@helsenorge/designsystem-react 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.3.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.2.1&targetVersion=GTv2.3.0) (2022-10-31)
+
+
+### Features
+
+*  ny hook useFocusableElement ([3294609](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/32946099ab996597d1a1696a8f8d3d983da9c97e)), closes [#286778](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/286778)
+
 ## [2.2.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.2.0&targetVersion=GTv2.2.1) (2022-10-25)
 
 
@@ -111,7 +118,7 @@
 
 ## 2.0.0-beta.1 (2022-09-15)
 
-## 2.0.0-beta.0 (2022-09-12)
+## 2.0.0-beta.0 (2022-09-15)
 
 
 ### Features
@@ -213,8 +220,8 @@
 
 ### Bug Fixes
 
-*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 *  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
+*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/HelpBubble.js

@@ -1,2 +1,2 @@
-import y from"classnames";import t,{useRef as T,useState as E,useCallback as P,useEffect as R}from"react";import{AnalyticsId as de}from"./constants.js";import{useEventListenerState as j}from"./hooks/useEventListenerState.js";import{useGetDOMRect as pe}from"./hooks/useGetDOMRect.js";import{A as he}from"./AnchorLink.js";import{C as me}from"./Close.js";import e from"./components/HelpBubble/styles.module.scss";var fe=(s=>(s.positionautomatic="positionautomatic",s.positionbelow="positionbelow",s.positionabove="positionabove",s))(fe||{});const Le=s=>{const{helpBubbleId:F,children:H,controllerRef:n,className:U="",variant:a="positionautomatic",showBubble:b,noCloseButton:L,linkText:f="Mer hjelp",linkUrl:A,onLinkClick:W,onClose:G,closeAriaLabel:Y,testId:q}=s,J=373,w=12,_=3;let C,k;const u=T(null),x=T(null),[d,K]=pe(n,b,100),[S,X]=E(!0),[Q,V]=j(a),[Z,ee]=E(0),[v,te]=E({x:0,y:0}),[N,ne]=E({x:0,y:0}),[g,I]=j(a!=="positionbelow"),oe=y(e.helpbubble,{[e["helpbubble--initial-render"]]:S},U),re=y(e["helpbubble-arrow"],{[e["helpbubble-arrow--initial-render"]]:S,[e["helpbubble-arrow--under"]]:g.current,[e["helpbubble-arrow--over"]]:!g.current}),le=()=>{if(Q.current==="positionautomatic"&&u.current&&n.current){const o=n.current.getBoundingClientRect().y,r=u.current.getBoundingClientRect().height;I(o>r)}},O=()=>document.documentElement.clientWidth>J+w*2,$=()=>{if(n.current&&u.current&&x.current){const o=document.documentElement.clientWidth,r=d.x>0?d.x:n.current.getBoundingClientRect().x,l=d.y>0?d.y:n.current.getBoundingClientRect().y,h=n.current.getBoundingClientRect(),c=u.current.getBoundingClientRect(),i=x.current.getBoundingClientRect(),m=h.width/2,B=ie(c.width,r,m,o);O()||ee(o-w*2),te({x:B,y:g.current?l-i.height-c.height+_:l+h.height+i.height-_}),ne({x:r+m-i.width/2,y:g.current?l-i.height:l+h.height})}},ie=(o,r,l,h)=>{const c=o/2,i=r+l,m=i-c,B=h-i-c,be=m<0?m-w:0,ue=B<0?B-w:0;return r+l-c-be+ue},se=()=>{O()?C={left:`${v.x}px`,top:`${v.y}px`}:C={left:`${v.x}px`,top:`${v.y}px`,width:`${Z}px`},k={left:`${N.x}px`,top:`${N.y}px`}},p=()=>{le(),$()},z=P(()=>{p()},[]),D=P(()=>{p()},[]),ce=()=>{window.addEventListener("scroll",z,!1),window.addEventListener("resize",D,!1)},M=()=>{window.removeEventListener("scroll",z,!1),window.removeEventListener("resize",D,!1)};R(()=>($(),()=>{M()}),[]),R(()=>{p()},[d]),R(()=>{b?(X(!1),ce(),p()):b||(X(!0),M(),K())},[b]),R(()=>{V(a),I(a!=="positionbelow"),p()},[a]),se();const ae=()=>{if(W&&f)return t.createElement("button",{className:e["helpbubble__link-button"],onClick:W},f);if(A&&f)return t.createElement(he,{href:A},f)};return b?t.createElement(t.Fragment,null,t.createElement("div",{id:F,ref:u,style:C,className:oe,"data-testid":q,"data-analyticsid":de.HelpBubble,role:"tooltip"},t.createElement("div",{className:y(e["helpbubble__child-wrapper"],{[e["helpbubble__child-wrapper--no-close-button"]]:L})},H,ae()),!L&&t.createElement("div",{className:e["helpbubble__close-wrapper"]},t.createElement(me,{small:!0,onClick:G,ariaLabel:Y}))),t.createElement("div",{ref:x,style:k,className:re})):null};export{Le as H,fe as a};
+import w from"classnames";import s,{useRef as A,useState as j}from"react";import{AnalyticsId as Z}from"./constants.js";import{useInterval as q}from"./hooks/useInterval.js";import{useIsVisible as J}from"./hooks/useIsVisible.js";import{useLayoutEvent as K}from"./hooks/useLayoutEvent.js";import{useSize as Q}from"./hooks/useSize.js";import{A as Y}from"./AnchorLink.js";import{C as $}from"./Close.js";import r from"./components/HelpBubble/styles.module.scss";const z=373,b=12,g=16,N=20,S=4,I=12,k=(t,e,i)=>i!==l.positionautomatic?i:t.top>e.height+g?l.positionabove:l.positionbelow,y=t=>t.left+t.width/2,tt=t=>document.documentElement.clientWidth-t.right+t.width/2,p=(t,e)=>y(t)-e.width/2,et=(t,e)=>p(t,e)+e.width,ot=(t,e)=>p(t,e)>b,nt=(t,e)=>et(t,e)<document.documentElement.clientWidth-b,it=(t,e)=>nt(t,e)?ot(t,e)?"floating":"left":"right",P=(t,e)=>t.top-g-e.height,_=t=>t.bottom+g,rt=()=>document.documentElement.clientWidth-b*2,st=()=>document.documentElement.clientWidth>z+b*2,W=t=>t.top-g-S,lt=t=>y(t)-N/2,bt=t=>tt(t)-N/2,ct=(t,e,i)=>{const n=it(t,e),o=k(t,e,i);return n==="left"?o===l.positionabove?"leftabove":"leftbelow":n==="right"?o===l.positionabove?"rightabove":"rightbelow":o===l.positionabove?"floatingabove":"floatingbelow"},ut=(t,e,i)=>{const n=ct(t,e,i),o=st()?void 0:rt();return n==="leftabove"?{left:b,top:P(t,e),width:o}:n==="leftbelow"?{left:b,top:_(t),width:o}:n==="rightabove"?{right:b,top:P(t,e),width:o}:n==="rightbelow"?{right:b,top:_(t),width:o}:n==="floatingbelow"?{left:p(t,e),top:_(t),width:o}:{left:p(t,e),top:P(t,e),width:o}},at=(t,e,i)=>{const n=lt(e),o=bt(e),c=t.left+I,u=t.right+I;return t.right?i===l.positionabove?{right:o>u?o:u,top:W(e)}:{right:o>u?o:u,top:e.bottom}:i===l.positionabove?{left:n>c?n:c,top:W(e)}:{left:n>c?n:c,top:e.bottom}};var l=(t=>(t.positionautomatic="positionautomatic",t.positionbelow="positionbelow",t.positionabove="positionabove",t))(l||{});const xt=t=>{const{helpBubbleId:e,children:i,controllerRef:n,className:o="",variant:c="positionautomatic",showBubble:u,noCloseButton:v,linkText:f="Mer hjelp",linkUrl:x,onLinkClick:R,onClose:T,closeAriaLabel:O,testId:H}=t,B=A(null),F=A(null),h=Q(B),[a,X]=j(),C=J(n,0),L=()=>{var E;X((E=n.current)==null?void 0:E.getBoundingClientRect())};if(q(L,500),K(L,["scroll","resize"],10),!u)return null;const V=w(r.helpbubble,C&&r["helpbubble--visible"],o),m=a&&h&&k(a,h,c),D=w(r.helpbubble__arrow,{[r["helpbubble__arrow--visible"]]:C,[r["helpbubble__arrow--over"]]:m==="positionbelow",[r["helpbubble__arrow--under"]]:m==="positionabove"}),M=w(r.helpbubble__content,{[r["helpbubble__content--close"]]:!v}),d=a&&h&&ut(a,h,c),U=d&&a&&m&&at(d,a,m),G=()=>{if(R&&f)return s.createElement("button",{className:r.helpbubble__link,onClick:R,type:"button"},f);if(x&&f)return s.createElement(Y,{href:x},f)};return s.createElement(s.Fragment,null,s.createElement("div",{id:e,ref:B,className:V,style:d,"data-testid":H,"data-analyticsid":Z.HelpBubble,role:"tooltip"},s.createElement("div",{className:M},i,G()),!v&&s.createElement("div",{className:r.helpbubble__close},s.createElement($,{small:!0,onClick:T,ariaLabel:O}))),s.createElement("div",{ref:F,className:D,style:U}))};export{xt as H,l as a};
 //# sourceMappingURL=HelpBubble.js.map

package/HelpBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useEventListenerState } from '../../hooks/useEventListenerState';\nimport { useGetDOMRect } from '../../hooks/useGetDOMRect';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\n\nexport enum HelpBubbleVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Visible text on the link */\n  showBubble?: boolean;\n  /** Visible text on the link */\n  noCloseButton?: boolean;\n  /** Visible text on the link */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble: React.FC<HelpBubbleProps> = props => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    variant = HelpBubbleVariant.positionautomatic,\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    testId,\n  } = props;\n\n  /* Bredde på HelpBubble */\n  const BUBBLE_WIDTH_PX = 373;\n  /* Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\n  const WINDOW_MARGIN_PX = 12;\n  /* Y akse Offset på HelpBubble arrow */\n  const ARROW_Y_OFFSET = 3;\n\n  let bubblePositionStyle = undefined;\n  let arrowPositionStyle = undefined;\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const [controllerDOM, resetControllerDOM] = useGetDOMRect(controllerRef, showBubble, 100);\n  const [initialRender, setInitialRender] = useState(true);\n  const [eventListenerVariant, setEventListenerVariant] = useEventListenerState(variant);\n  const [customBubbleWidth, setCustomBubbleWidth] = useState(0);\n  const [translateBubble, setTranslateBubble] = useState({ x: 0, y: 0 });\n  const [translateArrow, setTranslateArrow] = useState({ x: 0, y: 0 });\n  const [bubbleAbove, setBubbleAbove] = useEventListenerState(variant !== HelpBubbleVariant.positionbelow);\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    {\n      [styles['helpbubble--initial-render']]: initialRender,\n    },\n    className\n  );\n  const arrowClasses = classNames(styles['helpbubble-arrow'], {\n    [styles['helpbubble-arrow--initial-render']]: initialRender,\n    [styles['helpbubble-arrow--under']]: bubbleAbove.current,\n    [styles['helpbubble-arrow--over']]: !bubbleAbove.current,\n  });\n\n  const checkSpaceAbove = () => {\n    if (eventListenerVariant.current === HelpBubbleVariant.positionautomatic && bubbleRef.current && controllerRef.current) {\n      const controllerBottom = controllerRef.current.getBoundingClientRect().y;\n      const bubbleHeight = bubbleRef.current.getBoundingClientRect().height;\n      setBubbleAbove(controllerBottom > bubbleHeight);\n    }\n  };\n\n  const checkBubbleFitsScreenWidth = () => {\n    const windowWidth = document.documentElement.clientWidth;\n    return windowWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n  };\n\n  const updateTranslate = () => {\n    if (controllerRef.current && bubbleRef.current && arrowRef.current) {\n      // Henter ut størrelser og posisjoner som trengs til kalkulering av HelpBubble posisjonering\n      const clientWidth = document.documentElement.clientWidth;\n      const controllerX = controllerDOM.x > 0 ? controllerDOM.x : controllerRef.current.getBoundingClientRect().x;\n      const controllerY = controllerDOM.y > 0 ? controllerDOM.y : controllerRef.current.getBoundingClientRect().y;\n      const controllerSize = controllerRef.current.getBoundingClientRect();\n      const bubbleSize = bubbleRef.current.getBoundingClientRect();\n      const arrowSize = arrowRef.current.getBoundingClientRect();\n      const controllerHalfWidth = controllerSize.width / 2;\n      const newBubbleX = getBubbleXAdjustment(bubbleSize.width, controllerX, controllerHalfWidth, clientWidth);\n\n      if (!checkBubbleFitsScreenWidth()) {\n        setCustomBubbleWidth(clientWidth - WINDOW_MARGIN_PX * 2);\n      }\n\n      setTranslateBubble({\n        x: newBubbleX,\n        y: bubbleAbove.current\n          ? controllerY - arrowSize.height - bubbleSize.height + ARROW_Y_OFFSET\n          : controllerY + controllerSize.height + arrowSize.height - ARROW_Y_OFFSET,\n      });\n      setTranslateArrow({\n        x: controllerX + controllerHalfWidth - arrowSize.width / 2,\n        y: bubbleAbove.current ? controllerY - arrowSize.height : controllerY + controllerSize.height,\n      });\n    }\n  };\n\n  const getBubbleXAdjustment = (bubbleWidth: number, controllerX: number, controllerHalf: number, clientWidth: number) => {\n    const bubbleHalfWidth = bubbleWidth / 2;\n\n    // Kalkulerer om HelpBubble går utenfor viewporten\n    const controllerXMiddle = controllerX + controllerHalf;\n    const bubbleControllerDifferenceX = controllerXMiddle - bubbleHalfWidth;\n    const bubbleRightOverlap = clientWidth - controllerXMiddle - bubbleHalfWidth;\n\n    // Justerer x akse posisjon utifra funnene over\n    const viewportXLeftAdjustment = bubbleControllerDifferenceX < 0 ? bubbleControllerDifferenceX - WINDOW_MARGIN_PX : 0;\n    const viewportXRightAdjustment = bubbleRightOverlap < 0 ? bubbleRightOverlap - WINDOW_MARGIN_PX : 0;\n\n    // Returnerer den justerte x posisjonen\n    const tempBubbleX = controllerX + controllerHalf - bubbleHalfWidth;\n    return tempBubbleX - viewportXLeftAdjustment + viewportXRightAdjustment;\n  };\n\n  const updatePositionStyle = () => {\n    if (checkBubbleFitsScreenWidth()) {\n      bubblePositionStyle = {\n        left: `${translateBubble.x}px`,\n        top: `${translateBubble.y}px`,\n      };\n    } else {\n      bubblePositionStyle = {\n        left: `${translateBubble.x}px`,\n        top: `${translateBubble.y}px`,\n        width: `${customBubbleWidth}px`,\n      };\n    }\n\n    arrowPositionStyle = {\n      left: `${translateArrow.x}px`,\n      top: `${translateArrow.y}px`,\n    };\n  };\n\n  const handleBubbleUpdate = () => {\n    checkSpaceAbove();\n    updateTranslate();\n  };\n\n  const handleScroll = useCallback((): void => {\n    handleBubbleUpdate();\n  }, []);\n\n  const handleResize = useCallback((): void => {\n    handleBubbleUpdate();\n  }, []);\n\n  const addEventListeners = () => {\n    window.addEventListener('scroll', handleScroll, false);\n    window.addEventListener('resize', handleResize, false);\n  };\n\n  const removeEventListeners = () => {\n    window.removeEventListener('scroll', handleScroll, false);\n    window.removeEventListener('resize', handleResize, false);\n  };\n\n  useEffect(() => {\n    updateTranslate();\n\n    return (): void => {\n      removeEventListeners();\n    };\n  }, []);\n\n  useEffect(() => {\n    handleBubbleUpdate();\n  }, [controllerDOM]);\n\n  useEffect(() => {\n    if (showBubble) {\n      setInitialRender(false);\n      addEventListeners();\n      handleBubbleUpdate();\n    } else if (!showBubble) {\n      setInitialRender(true);\n      removeEventListeners();\n      resetControllerDOM();\n    }\n  }, [showBubble]);\n\n  useEffect(() => {\n    setEventListenerVariant(variant);\n    setBubbleAbove(variant !== HelpBubbleVariant.positionbelow);\n    handleBubbleUpdate();\n  }, [variant]);\n\n  updatePositionStyle();\n\n  const renderLink = () => {\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles['helpbubble__link-button']} onClick={onLinkClick}>\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  return showBubble ? (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={bubbleRef}\n        style={bubblePositionStyle}\n        className={helpBubbleClasses}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={'tooltip'}\n      >\n        <div\n          className={classNames(styles['helpbubble__child-wrapper'], {\n            [styles['helpbubble__child-wrapper--no-close-button']]: noCloseButton,\n          })}\n        >\n          {children}\n          {renderLink()}\n        </div>\n        {!noCloseButton && (\n          <div className={styles['helpbubble__close-wrapper']}>\n            <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n          </div>\n        )}\n      </div>\n      <div ref={arrowRef} style={arrowPositionStyle} className={arrowClasses} />\n    </>\n  ) : null;\n};\n\nexport default HelpBubble;\n"],"names":["HelpBubbleVariant","HelpBubble","props","helpBubbleId","children","controllerRef","className","variant","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","testId","BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","ARROW_Y_OFFSET","bubblePositionStyle","arrowPositionStyle","bubbleRef","useRef","arrowRef","controllerDOM","resetControllerDOM","useGetDOMRect","initialRender","setInitialRender","useState","eventListenerVariant","setEventListenerVariant","useEventListenerState","customBubbleWidth","setCustomBubbleWidth","translateBubble","setTranslateBubble","translateArrow","setTranslateArrow","bubbleAbove","setBubbleAbove","helpBubbleClasses","classNames","styles","arrowClasses","checkSpaceAbove","controllerBottom","bubbleHeight","checkBubbleFitsScreenWidth","updateTranslate","clientWidth","controllerX","controllerY","controllerSize","bubbleSize","arrowSize","controllerHalfWidth","newBubbleX","getBubbleXAdjustment","bubbleWidth","controllerHalf","bubbleHalfWidth","controllerXMiddle","bubbleControllerDifferenceX","bubbleRightOverlap","viewportXLeftAdjustment","viewportXRightAdjustment","updatePositionStyle","handleBubbleUpdate","handleScroll","useCallback","handleResize","addEventListeners","removeEventListeners","useEffect","renderLink","React","AnchorLink","AnalyticsId","Close"],"mappings":"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"}
+{"version":3,"file":"HelpBubble.js","sources":["../src/components/HelpBubble/utils.ts","../src/components/HelpBubble/HelpBubble.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { HelpBubbleVariant } from './HelpBubble';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 373;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 16;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 4;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant: keyof typeof HelpBubbleVariant\n): keyof typeof HelpBubbleVariant => {\n  if (variant !== HelpBubbleVariant.positionautomatic) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return HelpBubbleVariant.positionabove;\n  } else {\n    return HelpBubbleVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightCenterPx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 2;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeftPx = getBubbleLeftPx(controllerSize, bubbleSize);\n\n  return bubbleLeftPx > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightCenterPx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof HelpBubbleVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === HelpBubbleVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom,\n    };\n  }\n\n  if (verticalPosition === HelpBubbleVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom,\n  };\n};\n","import classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\n\nimport { AnalyticsId } from '../../constants';\nimport { useInterval } from '../../hooks/useInterval';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { useSize } from '../../hooks/useSize';\nimport AnchorLink from '../AnchorLink';\nimport Close from '../Close';\n\nimport styles from './styles.module.scss';\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './utils';\n\nexport enum HelpBubbleVariant {\n  positionautomatic = 'positionautomatic',\n  positionbelow = 'positionbelow',\n  positionabove = 'positionabove',\n}\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: React.ReactNode;\n  /** Ref for the element the HelpBubble is placed upon */\n  controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Determines the placement of the helpbubble. Default: automatic positioning. */\n  variant?: keyof typeof HelpBubbleVariant;\n  /** Show the bubble. Default: false. */\n  showBubble?: boolean;\n  /** Hide the close button in the bubble */\n  noCloseButton?: boolean;\n  /** Visible text on the link */\n  linkText?: string;\n  /** Url the link leads to */\n  linkUrl?: string;\n  /** Function is called when link is clicked */\n  onLinkClick?: () => void;\n  /** Function is called when user clicks the button */\n  onClose?: () => void;\n  /** aria-label to be passed onto Close */\n  closeAriaLabel?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble: React.FC<HelpBubbleProps> = props => {\n  const {\n    helpBubbleId,\n    children,\n    controllerRef,\n    className = '',\n    variant = HelpBubbleVariant.positionautomatic,\n    showBubble,\n    noCloseButton,\n    linkText = 'Mer hjelp',\n    linkUrl,\n    onLinkClick,\n    onClose,\n    closeAriaLabel,\n    testId,\n  } = props;\n\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const bubbleSize = useSize(bubbleRef);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const controllerisVisible = useIsVisible(controllerRef, 0);\n\n  const updateControllerSize = (): void => {\n    setControllerSize(controllerRef.current?.getBoundingClientRect());\n  };\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  if (!showBubble) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(styles.helpbubble, controllerisVisible && styles['helpbubble--visible'], className);\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\n    [styles['helpbubble__arrow--visible']]: controllerisVisible,\n    [styles['helpbubble__arrow--over']]: verticalPosition === HelpBubbleVariant.positionbelow,\n    [styles['helpbubble__arrow--under']]: verticalPosition === HelpBubbleVariant.positionabove,\n  });\n  const contentClasses = classNames(styles.helpbubble__content, {\n    [styles['helpbubble__content--close']]: !noCloseButton,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const renderLink = (): JSX.Element | undefined => {\n    if (onLinkClick && linkText) {\n      return (\n        <button className={styles.helpbubble__link} onClick={onLinkClick} type=\"button\">\n          {linkText}\n        </button>\n      );\n    } else if (linkUrl && linkText) {\n      return <AnchorLink href={linkUrl}>{linkText}</AnchorLink>;\n    }\n  };\n\n  return (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={bubbleRef}\n        className={helpBubbleClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={'tooltip'}\n      >\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n        {!noCloseButton && (\n          <div className={styles.helpbubble__close}>\n            <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n          </div>\n        )}\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n};\n\nexport default HelpBubble;\n"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","variant","HelpBubbleVariant","getControllerLeftCenterPx","getControllerRightCenterPx","getBubbleLeftPx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","HelpBubble","props","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","React","AnchorLink","AnalyticsId","Close"],"mappings":"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"}

package/Modal.js

@@ -1,2 +1,2 @@
-import t,{useEffect as $}from"react";import n from"classnames";import{palette as u}from"./theme/palette.js";import{B as k}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import{ZIndex as A,AnalyticsId as F,IconSize as s}from"./constants.js";import a from"./components/Modal/styles.module.scss";import H from"./components/Icons/AlertSignStroke.js";import K from"./components/Icons/AlertSignFill.js";import{useFocusTrap as O}from"./hooks/useFocusTrap.js";import{useIsVisible as x}from"./hooks/useIsVisible.js";import{T as D}from"./Title.js";import{a as M}from"./uuid.js";import{C as V}from"./Close.js";import Z from"./components/Icons/CheckOutline.js";import j from"./components/Portal/index.js";var q=(e=>(e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image",e))(q||{}),G=(e=>(e.large="large",e.medium="medium",e))(G||{});const J={variant:"normal",primaryButtonText:"OK",titleId:M(),className:"",size:"large",zIndex:A.Modal},Q=e=>e==="error"?t.createElement(_,{size:s.Small,svgIcon:K,color:u.cherry500}):e==="warning"?t.createElement(_,{size:s.Small,svgIcon:H,color:u.black}):e==="success"?t.createElement(_,{size:s.Small,svgIcon:Z,color:u.kiwi900}):null,U=(e,r)=>{const c=Q(e);return c?t.createElement("div",{className:a.modal__iconWrapper},c):r?t.createElement("div",{className:a.modal__iconWrapper},t.cloneElement(r,{size:s.Small})):null},X=e=>{var I,w;const[r,c]=t.useState(0),f=t.useRef(null),v=t.useRef(null),i=t.useRef(null),E=t.useRef(null);O(E);const S=x(v),b=t.useRef(null),T=x(b),m=i.current&&i.current.scrollHeight>i.current.clientHeight;function g(l){l.key==="Escape"&&e.onClose&&(l.stopPropagation(),e.onClose())}function y(l){l.target&&d.current===l.target&&e.onClose&&(l.stopPropagation(),e.onClose())}function L(){document.body.style.overflow="hidden"}function W(){document.body.style.removeProperty("overflow")}const o=e.variant==="image",d=t.useRef(null),C=e.secondaryButtonText&&((I=e.secondaryButtonText)==null?void 0:I.length)>0||e.onSuccess,z=e.ariaLabelledBy?void 0:e.ariaLabel,h=e.ariaLabelledBy?e.ariaLabelledBy:e.ariaLabel?void 0:e.titleId;$(()=>{var B;const l=d.current;return(B=f.current)==null||B.focus(),L(),!e.disableCloseEvents&&l&&(l.addEventListener("keydown",g),l.addEventListener("click",y)),()=>{W(),!e.disableCloseEvents&&l&&(l.removeEventListener("keydown",g),l.removeEventListener("click",y))}},[e.disableCloseEvents]);const R=n(e.className,a.modal,a[`modal--${e.variant}`],a[`modal--${e.size}`],m&&!C&&a["modal--no-actions"]),P=n({[a["modal__title--error"]]:e.variant==="error",[a["modal__title--success"]]:e.variant==="success"}),N=t.createElement("div",{"data-testid":"dialog-container"},t.createElement("div",{ref:d,className:a["modal-overlay"],"data-testid":e.testId,"data-analyticsid":F.Modal,style:{zIndex:e.zIndex}},t.createElement("div",{className:a.align},t.createElement("div",{className:R,role:"dialog","aria-label":z,"aria-labelledby":h,ref:E},t.createElement("div",{tabIndex:r,ref:f,onBlur:()=>c(-1)}),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--top"],{[a["modal__shadow--show"]]:!S&&m})}),t.createElement("div",{className:n(a.modal__contentWrapper,{[a["modal__contentWrapper--image"]]:o}),ref:i},!e.noCloseButton&&t.createElement("div",{className:a.modal__closeWrapper},t.createElement("div",{className:n(a.modal__closeWrapper__close)},t.createElement(V,{onClick:e.onClose,ariaLabel:e.ariaLabelCloseBtn}))),t.createElement("div",{className:n(a[`modal__contentWrapper__scroll--${e.size}`],{[a["modal__contentWrapper__scroll--image"]]:o})},t.createElement("div",{ref:v}),t.createElement("div",{className:a.modal__contentWrapper__title},U(e.variant,e.icon),t.createElement(D,{id:h,htmlMarkup:"h3",appearance:"title3",className:P},e.title),e.afterTitleChildren&&t.createElement("div",{className:a.modal__afterTitleChildren},e.afterTitleChildren)),o&&t.createElement("div",null,t.createElement("div",{className:a.modal__contentWrapper__imageWrapper},e.children),t.createElement("span",{className:a.modal__contentWrapper__imageDescription},e.description)),!o&&e.children&&t.createElement("div",null,e.children),!o&&!e.children&&t.createElement("p",{className:a.modal__description},e.description),t.createElement("div",{ref:b}))),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--bottom"],{[a["modal__shadow--show"]]:!T&&m})}),C&&t.createElement("div",{className:n(a["modal__call-to-action"],a[`modal__call-to-action--${e.size}`])},e.onSuccess&&t.createElement(k,{onClick:e.onSuccess},e.primaryButtonText),e.secondaryButtonText&&((w=e.secondaryButtonText)==null?void 0:w.length)>0&&t.createElement(k,{variant:"borderless",onClick:e.onClose},e.secondaryButtonText))))));if(e.printable){const l="print-modal";return t.createElement(j,{className:l,testId:"print-modal"},t.createElement("style",{media:"print"},`body > *:not(.${l}) {display: none;}`),N)}return N};X.defaultProps=J;export{X as M,q as a,G as b};
+import t,{useEffect as W}from"react";import n from"classnames";import{palette as d}from"./theme/palette.js";import{B as N}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import{ZIndex as z,AnalyticsId as R,IconSize as c}from"./constants.js";import a from"./components/Modal/styles.module.scss";import P from"./components/Icons/AlertSignStroke.js";import $ from"./components/Icons/AlertSignFill.js";import{useFocusTrap as A}from"./hooks/useFocusTrap.js";import{useIsVisible as I}from"./hooks/useIsVisible.js";import{T as F}from"./Title.js";import{a as H}from"./uuid.js";import{C as K}from"./Close.js";import O from"./components/Icons/CheckOutline.js";import D from"./components/Portal/index.js";var M=(e=>(e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image",e))(M||{}),V=(e=>(e.large="large",e.medium="medium",e))(V||{});const Z={variant:"normal",primaryButtonText:"OK",titleId:H(),className:"",size:"large",zIndex:z.Modal},j=e=>e==="error"?t.createElement(u,{size:c.Small,svgIcon:$,color:d.cherry500}):e==="warning"?t.createElement(u,{size:c.Small,svgIcon:P,color:d.black}):e==="success"?t.createElement(u,{size:c.Small,svgIcon:O,color:d.kiwi900}):null,q=(e,r)=>{const o=j(e);return o?t.createElement("div",{className:a.modal__iconWrapper},o):r?t.createElement("div",{className:a.modal__iconWrapper},t.cloneElement(r,{size:c.Small})):null},G=e=>{var C,h;const r=t.useRef(null),o=t.useRef(null),_=t.useRef(null);A(_,!0,!0);const w=I(r),f=t.useRef(null),B=I(f),m=o.current&&o.current.scrollHeight>o.current.clientHeight;function v(l){l.key==="Escape"&&e.onClose&&(l.stopPropagation(),e.onClose())}function E(l){l.target&&s.current===l.target&&e.onClose&&(l.stopPropagation(),e.onClose())}function k(){document.body.style.overflow="hidden"}function L(){document.body.style.removeProperty("overflow")}const i=e.variant==="image",s=t.useRef(null),g=e.secondaryButtonText&&((C=e.secondaryButtonText)==null?void 0:C.length)>0||e.onSuccess,S=e.ariaLabelledBy?void 0:e.ariaLabel,y=e.ariaLabelledBy?e.ariaLabelledBy:e.ariaLabel?void 0:e.titleId;W(()=>{const l=s.current;return k(),!e.disableCloseEvents&&l&&(l.addEventListener("keydown",v),l.addEventListener("click",E)),()=>{L(),!e.disableCloseEvents&&l&&(l.removeEventListener("keydown",v),l.removeEventListener("click",E))}},[e.disableCloseEvents]);const T=n(e.className,a.modal,a[`modal--${e.variant}`],a[`modal--${e.size}`],m&&!g&&a["modal--no-actions"]),x=n({[a["modal__title--error"]]:e.variant==="error",[a["modal__title--success"]]:e.variant==="success"}),b=t.createElement("div",{"data-testid":"dialog-container"},t.createElement("div",{ref:s,className:a["modal-overlay"],"data-testid":e.testId,"data-analyticsid":R.Modal,style:{zIndex:e.zIndex}},t.createElement("div",{className:a.align},t.createElement("div",{className:T,role:"dialog","aria-label":S,"aria-labelledby":y,ref:_},t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--top"],{[a["modal__shadow--show"]]:!w&&m})}),t.createElement("div",{className:n(a.modal__contentWrapper,{[a["modal__contentWrapper--image"]]:i}),ref:o},!e.noCloseButton&&t.createElement("div",{className:a.modal__closeWrapper},t.createElement("div",{className:n(a.modal__closeWrapper__close)},t.createElement(K,{onClick:e.onClose,ariaLabel:e.ariaLabelCloseBtn}))),t.createElement("div",{className:n(a[`modal__contentWrapper__scroll--${e.size}`],{[a["modal__contentWrapper__scroll--image"]]:i})},t.createElement("div",{ref:r}),t.createElement("div",{className:a.modal__contentWrapper__title},q(e.variant,e.icon),t.createElement(F,{id:y,htmlMarkup:"h3",appearance:"title3",className:x},e.title),e.afterTitleChildren&&t.createElement("div",{className:a.modal__afterTitleChildren},e.afterTitleChildren)),i&&t.createElement("div",null,t.createElement("div",{className:a.modal__contentWrapper__imageWrapper},e.children),t.createElement("span",{className:a.modal__contentWrapper__imageDescription},e.description)),!i&&e.children&&t.createElement("div",null,e.children),!i&&!e.children&&t.createElement("p",{className:a.modal__description},e.description),t.createElement("div",{ref:f}))),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--bottom"],{[a["modal__shadow--show"]]:!B&&m})}),g&&t.createElement("div",{className:n(a["modal__call-to-action"],a[`modal__call-to-action--${e.size}`])},e.onSuccess&&t.createElement(N,{onClick:e.onSuccess},e.primaryButtonText),e.secondaryButtonText&&((h=e.secondaryButtonText)==null?void 0:h.length)>0&&t.createElement(N,{variant:"borderless",onClick:e.onClose},e.secondaryButtonText))))));if(e.printable){const l="print-modal";return t.createElement(D,{className:l,testId:"print-modal"},t.createElement("style",{media:"print"},`body > *:not(.${l}) {display: none;}`),b)}return b};G.defaultProps=Z;export{G as M,M as a,V as b};
 //# sourceMappingURL=Modal.js.map

package/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { palette } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport Title from '../Title/Title';\nimport { uuid } from '../../utils/uuid';\nimport Close from '../Close';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const [tabIndex, setTabIndex] = React.useState(0);\n  const initFocus = React.useRef<HTMLDivElement>(null);\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    initFocus.current?.focus();\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} ref={dialogRef}>\n            <div tabIndex={tabIndex} ref={initFocus} onBlur={(): void => setTabIndex(-1)} />\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","tabIndex","setTabIndex","initFocus","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { palette } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport Title from '../Title/Title';\nimport { uuid } from '../../utils/uuid';\nimport Close from '../Close';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef, true, true);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} ref={dialogRef}>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"0sBAmBY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,MAAQ,QACRA,EAAA,QAAU,UACVA,EAAA,MAAQ,QALEA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,OAAS,SAFCA,IAAAA,GAAA,CAAA,CAAA,EAkDZ,MAAMC,EAAe,CACnB,QAAS,SACT,kBAAmB,KACnB,QAASC,EAAK,EACd,UAAW,GACX,KAAM,QACN,OAAQC,EAAO,KACjB,EAEMC,EAAkBC,GAClBA,IAAY,QACNC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,MAAO,QAASC,EAAe,MAAOC,EAAQ,SAAA,CAAW,EAC5EL,IAAY,UACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,MAAO,QAASG,EAAiB,MAAOD,EAAQ,KAAA,CAAO,EAC1EL,IAAY,UACbC,EAAA,cAAAC,EAAA,CAAK,KAAMC,EAAS,MAAO,QAASI,EAAc,MAAOF,EAAQ,OAAA,CAAS,EAE7E,KAGHG,EAAU,CAACR,EAAiCS,IAAkD,CAC5F,MAAAC,EAAcX,EAAeC,CAAO,EAC1C,OAAIU,EACMT,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,kBAAA,EAAqBD,CAAY,EAE7DD,EAECR,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,kBAAA,EACpBV,EAAM,aAAaQ,EAAM,CACxB,KAAMN,EAAS,KAChB,CAAA,CACH,EAGG,IACT,EAEMS,EAASC,GAAmC,SAC1C,MAAAC,EAAab,EAAM,OAAuB,IAAI,EAC9Cc,EAAkBd,EAAM,OAAuB,IAAI,EACnDe,EAAYf,EAAM,OAAuB,IAAI,EACtCgB,EAAAD,EAAW,GAAM,EAAI,EAC5B,MAAAE,EAAoBC,EAAaL,CAAU,EAC3CM,EAAgBnB,EAAM,OAAuB,IAAI,EACjDoB,EAAuBF,EAAaC,CAAa,EACjDE,EAAsBP,EAAgB,SAAWA,EAAgB,QAAQ,aAAeA,EAAgB,QAAQ,aAEtH,SAASQ,EAAoBC,EAAwB,CAC/CA,EAAE,MAAQ,UAAYX,EAAM,UAC9BW,EAAE,gBAAgB,EAClBX,EAAM,QAAQ,EAElB,CAEA,SAASY,EAAiBC,EAAyB,CAC7CA,EAAM,QAAUC,EAAW,UAAYD,EAAM,QAAUb,EAAM,UAC/Da,EAAM,gBAAgB,EACtBb,EAAM,QAAQ,EAElB,CAEA,SAASe,GAA0B,CACxB,SAAA,KAAK,MAAM,SAAW,QACjC,CAEA,SAASC,GAAyB,CACvB,SAAA,KAAK,MAAM,eAAe,UAAU,CAC/C,CAGM,MAAAC,EAAYjB,EAAM,UAAY,QAE9Bc,EAAa1B,EAAM,OAAuB,IAAI,EAE9C8B,EAAelB,EAAM,uBAAuBmB,EAAAnB,EAAM,sBAAN,YAAAmB,EAA2B,QAAS,GAAMnB,EAAM,UAG5FoB,EAAapB,EAAM,eAAmC,OAAlBA,EAAM,UAC1CqB,EAAiBrB,EAAM,eAAiBA,EAAM,eAAkBA,EAAM,UAA4B,OAAhBA,EAAM,QAE9FsB,EAAU,IAAM,CACd,MAAMC,EAAiBT,EAAW,QAChB,OAAAC,IACd,CAACf,EAAM,oBAAsBuB,IAChBA,EAAA,iBAAiB,UAAWb,CAAmB,EAC/Ca,EAAA,iBAAiB,QAASX,CAAgB,GAEpD,IAAY,CACAI,IACb,CAAChB,EAAM,oBAAsBuB,IAChBA,EAAA,oBAAoB,UAAWb,CAAmB,EAClDa,EAAA,oBAAoB,QAASX,CAAgB,EAC9D,CACF,EACC,CAACZ,EAAM,kBAAkB,CAAC,EAE7B,MAAMwB,EAAgBC,EACpBzB,EAAM,UACNF,EAAO,MACPA,EAAO,UAAUE,EAAM,WACvBF,EAAO,UAAUE,EAAM,QACvBS,GAAuB,CAACS,GAAepB,EAAO,oBAAA,EAG1C4B,EAAeD,EAAG,CACtB,CAAC3B,EAAO,wBAAyBE,EAAM,UAAY,QACnD,CAACF,EAAO,0BAA2BE,EAAM,UAAY,SAAA,CACtD,EAEK2B,EACHvC,EAAA,cAAA,MAAA,CAAI,cAAY,kBAAA,EACdA,EAAA,cAAA,MAAA,CACC,IAAK0B,EACL,UAAWhB,EAAO,iBAClB,cAAaE,EAAM,OACnB,mBAAkB4B,EAAY,MAC9B,MAAO,CAAE,OAAQ5B,EAAM,MAAO,CAAA,EAE7BZ,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,KAAA,EACpBV,EAAA,cAAA,MAAA,CAAI,UAAWoC,EAAe,KAAK,SAAS,aAAYJ,EAAW,kBAAiBC,EAAgB,IAAKlB,CAAA,EACvGf,EAAA,cAAA,MAAA,CACC,UAAWqC,EAAG3B,EAAO,cAAkBA,EAAO,sBAAuB,CACnE,CAACA,EAAO,wBAAyB,CAACO,GAAqBI,CAAA,CACxD,CAAA,CACH,EACCrB,EAAA,cAAA,MAAA,CACC,UAAWqC,EAAG3B,EAAO,sBAAuB,CAC1C,CAACA,EAAO,iCAAkCmB,CAAA,CAC3C,EACD,IAAKf,CAEJ,EAAA,CAACF,EAAM,eACLZ,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,mBAAA,EACpBV,EAAA,cAAA,MAAA,CAAI,UAAWqC,EAAG3B,EAAO,0BAA0B,CAAA,EACjDV,EAAA,cAAAyC,EAAA,CAAM,QAAS7B,EAAM,QAAS,UAAWA,EAAM,iBAAmB,CAAA,CACrE,CACF,EAEDZ,EAAA,cAAA,MAAA,CACC,UAAWqC,EAAG3B,EAAO,kCAAkCE,EAAM,QAAS,CACpE,CAACF,EAAO,yCAA0CmB,CAAA,CACnD,CAAA,EAEA7B,EAAA,cAAA,MAAA,CAAI,IAAKa,CAAA,CAAY,EACrBb,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,4BAAA,EACpBH,EAAQK,EAAM,QAASA,EAAM,IAAI,EACjCZ,EAAA,cAAA0C,EAAA,CAAM,GAAIT,EAAgB,WAAW,KAAK,WAAW,SAAS,UAAWK,CAAA,EACvE1B,EAAM,KACT,EACCA,EAAM,oBAAuBZ,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,yBAAA,EAA+BE,EAAM,kBAAmB,CAC9G,EACCiB,GACC7B,EAAA,cAAC,WACEA,EAAA,cAAA,MAAA,CAAI,UAAWU,EAAO,mCAAyC,EAAAE,EAAM,QAAS,EAC9EZ,EAAA,cAAA,OAAA,CAAK,UAAWU,EAAO,uCAAA,EAA6CE,EAAM,WAAY,CACzF,EAED,CAACiB,GAAajB,EAAM,UAAYZ,EAAA,cAAC,MAAK,KAAAY,EAAM,QAAS,EACrD,CAACiB,GAAa,CAACjB,EAAM,UAAaZ,EAAA,cAAA,IAAA,CAAE,UAAWU,EAAO,kBAAqB,EAAAE,EAAM,WAAY,EAC7FZ,EAAA,cAAA,MAAA,CAAI,IAAKmB,CAAe,CAAA,CAC3B,CACF,EACCnB,EAAA,cAAA,MAAA,CACC,UAAWqC,EAAG3B,EAAO,cAAkBA,EAAO,yBAA0B,CACtE,CAACA,EAAO,wBAAyB,CAACU,GAAwBC,CAAA,CAC3D,CACH,CAAA,EACCS,GACE9B,EAAA,cAAA,MAAA,CAAI,UAAWqC,EAAG3B,EAAO,yBAA0BA,EAAO,0BAA0BE,EAAM,OAAO,CAC/F,EAAAA,EAAM,WAAcZ,EAAA,cAAA2C,EAAA,CAAO,QAAS/B,EAAM,SAAY,EAAAA,EAAM,iBAAkB,EAC9EA,EAAM,uBAAuBgC,EAAAhC,EAAM,sBAAN,YAAAgC,EAA2B,QAAS,GAC/D5C,EAAA,cAAA2C,EAAA,CAAO,QAAQ,aAAa,QAAS/B,EAAM,OAAA,EACzCA,EAAM,mBACT,CAEJ,CAEJ,CACF,CACF,CACF,EAGF,GAAIA,EAAM,UAAW,CACnB,MAAMiC,EAAa,cACnB,OACG7C,EAAA,cAAA8C,EAAA,CAAO,UAAWD,EAAY,OAAO,aAAA,EACnC7C,EAAA,cAAA,QAAA,CAAM,MAAM,OAAA,EAAS,iBAAiB6C,qBAA+B,EACrEN,CACH,CAEJ,CAEO,OAAAA,CACT,EAEA5B,EAAM,aAAehB"}

package/components/HelpBubble/HelpBubble.d.ts

@@ -13,11 +13,11 @@ export interface HelpBubbleProps {
     controllerRef: React.RefObject<HTMLElement | SVGSVGElement>;
     /** Adds custom classes to the element. */
     className?: string;
-    /** Determines the placement of the helpbubble */
+    /** Determines the placement of the helpbubble. Default: automatic positioning. */
     variant?: keyof typeof HelpBubbleVariant;
-    /** Visible text on the link */
+    /** Show the bubble. Default: false. */
     showBubble?: boolean;
-    /** Visible text on the link */
+    /** Hide the close button in the bubble */
     noCloseButton?: boolean;
     /** Visible text on the link */
     linkText?: string;

package/components/HelpBubble/HelpBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,oBAAY,iBAAiB;IAC3B,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+NzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HelpBubble.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/HelpBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,oBAAY,iBAAiB;IAC3B,iBAAiB,sBAAsB;IACvC,aAAa,kBAAkB;IAC/B,aAAa,kBAAkB;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,wDAAwD;IACxD,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC;IAC5D,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,OAAO,iBAAiB,CAAC;IACzC,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yCAAyC;IACzC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoFzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/components/HelpBubble/componentdata.json

@@ -1 +1 @@
-{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble","name":"variant","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Visible text on the link","name":"showBubble","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Visible text on the link","name":"noCloseButton","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link","name":"linkText","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble. Default: automatic positioning.","name":"variant","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Show the bubble. Default: false.","name":"showBubble","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Hide the close button in the bubble","name":"noCloseButton","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link","name":"linkText","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import"../../HelpBubble.js";import{a as w,H as y}from"../../HelpBubble.js";import"classnames";import"react";import"../../constants.js";import"../../hooks/useEventListenerState.js";import"../../hooks/useGetDOMRect.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";export{w as HelpBubbleVariant,y as default};
+import"../../HelpBubble.js";import{a as C,H as D}from"../../HelpBubble.js";import"classnames";import"react";import"../../constants.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";export{C as HelpBubbleVariant,D as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubble/styles.module.scss

@@ -15,32 +15,32 @@
   line-height: $lineheight-size-sm;
   background-color: $white;
   z-index: 3;
-  visibility: visible;
+  visibility: hidden;
+
+  &--visible {
+    visibility: visible;
+  }
 
   border: getSpacer(4xs) solid $plum600;
   border-radius: 9px;
   box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.15);
 
-  &--initial-render {
-    visibility: hidden;
-  }
-
   @media (min-width: map-get($grid-breakpoints, lg)) {
     font-size: $font-size-md;
     line-height: $lineheight-size-md;
   }
 
-  &__child-wrapper {
+  &__content {
     display: flex;
     width: max-content;
     flex-direction: column;
     align-items: flex-start;
     overflow-wrap: anywhere;
     row-gap: getSpacer(2xs);
-    padding: getSpacer(s) 0 getSpacer(m) getSpacer(s);
+    padding: getSpacer(s) getSpacer(s) getSpacer(m) getSpacer(s);
 
-    &--no-close-button {
-      padding: getSpacer(s) getSpacer(s) getSpacer(m);
+    &--close {
+      padding-right: 0;
     }
 
     > p {
@@ -48,38 +48,39 @@
     }
   }
 
-  &__link-button {
+  &__link {
     all: unset;
     @include anchorlink;
   }
 
-  &__close-wrapper {
+  &__close {
     padding: getSpacer(2xs) getSpacer(2xs) 0px 0px;
   }
-}
 
-.helpbubble-arrow {
-  width: 0;
-  height: 0;
-  position: fixed;
-  border-style: solid;
-  border-color: transparent;
-  z-index: 4;
+  &__arrow {
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    position: fixed;
+    border-style: solid;
+    border-color: transparent;
+    z-index: 4;
 
-  &--over {
-    border-width: 10px 10px;
-    border-bottom-color: $white;
-    -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
-    filter: drop-shadow(0px -0.185rem 0px $plum600);
-  }
-  &--under {
-    border-width: 10px 10px;
-    border-top-color: $white;
-    -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
-    filter: drop-shadow(0px 0.2rem 0px $plum600);
-  }
+    &--visible {
+      visibility: visible;
+    }
 
-  &--initial-render {
-    visibility: hidden;
+    &--over {
+      border-width: 10px 10px;
+      border-bottom-color: $white;
+      -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
+      filter: drop-shadow(0px -0.185rem 0px $plum600);
+    }
+    &--under {
+      border-width: 10px 10px;
+      border-top-color: $white;
+      -webkit-filter: drop-shadow($plum600 0px 2px 6px 2px);
+      filter: drop-shadow(0px 0.2rem 0px $plum600);
+    }
   }
 }

package/components/HelpBubble/styles.module.scss.d.ts

@@ -3,16 +3,16 @@ export type Styles = {
   anchorlink__icon: string;
   'anchorlink-wrapper': string;
   helpbubble: string;
-  'helpbubble__child-wrapper': string;
-  'helpbubble__child-wrapper--no-close-button': string;
-  'helpbubble__close-wrapper': string;
-  'helpbubble__link-button': string;
-  'helpbubble__link-button__icon': string;
-  'helpbubble--initial-render': string;
-  'helpbubble-arrow': string;
-  'helpbubble-arrow--initial-render': string;
-  'helpbubble-arrow--over': string;
-  'helpbubble-arrow--under': string;
+  helpbubble__arrow: string;
+  'helpbubble__arrow--over': string;
+  'helpbubble__arrow--under': string;
+  'helpbubble__arrow--visible': string;
+  helpbubble__close: string;
+  helpbubble__content: string;
+  'helpbubble__content--close': string;
+  helpbubble__link: string;
+  helpbubble__link__icon: string;
+  'helpbubble--visible': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/HelpBubble/utils.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+import { HelpBubbleVariant } from './HelpBubble';
+/**
+ * Beregn om hjelpeboblen skal vises over eller under kontrolleren
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)
+ * @returns Om hjelpeboblen skal vises over eller under
+ */
+export declare const getVerticalPosition: (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant) => keyof typeof HelpBubbleVariant;
+/**
+ * Finn riktig plassering av hjelpeboblen
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer hjelpeboblen riktig
+ */
+export declare const getBubbleStyle: (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof HelpBubbleVariant) => CSSProperties;
+/**
+ * Finn riktig plassering av pilen
+ * @param bubbleStyle CSSProperties for hjelpeboblen
+ * @param controllerSize DOMRect for kontrolleren
+ * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer pilen riktig
+ */
+export declare const getArrowStyle: (bubbleStyle: CSSProperties, controllerSize: DOMRect, verticalPosition: keyof typeof HelpBubbleVariant) => CSSProperties;
+//# sourceMappingURL=utils.d.ts.map

package/components/HelpBubble/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/HelpBubble/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAkBjD;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,mBACd,OAAO,cACX,OAAO,WACV,MAAM,wBAAwB,KACtC,MAAM,wBASR,CAAC;AAsKF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mBAAoB,OAAO,cAAc,OAAO,WAAW,MAAM,wBAAwB,KAAG,aA0BtH,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,gBACX,aAAa,kBACV,OAAO,oBACL,MAAM,wBAAwB,KAC/C,aA+BF,CAAC"}

package/components/HelpBubbleExample/componentdata.json

@@ -1 +1 @@
-{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble","name":"variant","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Visible text on the link","name":"showBubble","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Visible text on the link","name":"noCloseButton","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link","name":"linkText","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}
+{"props":{"helpBubbleId":{"defaultValue":null,"description":"Id of the HelpBubble","name":"helpBubbleId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Name to display in the avatar. Will be truncated to the first two characters.","name":"children","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},{"fileName":"designsystem/node_modules/@types/react/index.d.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"ReactNode"}},"controllerRef":{"defaultValue":null,"description":"Ref for the element the HelpBubble is placed upon","name":"controllerRef","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":true,"type":{"name":"RefObject<HTMLElement | SVGSVGElement>"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"variant":{"defaultValue":null,"description":"Determines the placement of the helpbubble. Default: automatic positioning.","name":"variant","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"enum","raw":"\"positionautomatic\" | \"positionbelow\" | \"positionabove\"","value":[{"value":"\"positionautomatic\""},{"value":"\"positionbelow\""},{"value":"\"positionabove\""}]}},"showBubble":{"defaultValue":null,"description":"Show the bubble. Default: false.","name":"showBubble","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"noCloseButton":{"defaultValue":null,"description":"Hide the close button in the bubble","name":"noCloseButton","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"boolean"}},"linkText":{"defaultValue":null,"description":"Visible text on the link","name":"linkText","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"linkUrl":{"defaultValue":null,"description":"Url the link leads to","name":"linkUrl","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"onLinkClick":{"defaultValue":null,"description":"Function is called when link is clicked","name":"onLinkClick","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"onClose":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClose","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"(() => void)"}},"closeAriaLabel":{"defaultValue":null,"description":"aria-label to be passed onto Close","name":"closeAriaLabel","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"},"declarations":[{"fileName":"designsystem/src/components/HelpBubble/HelpBubble.tsx","name":"HelpBubbleProps"}],"required":false,"type":{"name":"string"}}}}

package/components/HelpBubbleExample/index.js

@@ -1,2 +1,2 @@
-import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../hooks/useEventListenerState.js";import"../../hooks/useGetDOMRect.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";const R=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))};export{R as default};
+import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";const S=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))};export{S as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble"],"mappings":"wtBAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAElD,uBACG,MACC,KAAAC,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACCA,EAAA,cAAA,MAAA,CAAI,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAAM,CACtE,EAAA,0BACH,EACCE,EAAA,cAAAC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QACT,CACF,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/HelpBubbleExample/HelpBubbleExample.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport HelpBubble, { HelpBubbleProps } from '../HelpBubble/HelpBubble';\n\nconst HelpBubbleExample: React.FC<HelpBubbleProps> = props => {\n  const controllerRef = useRef<HTMLSpanElement>(null);\n\n  return (\n    <div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n      <div style={{ position: 'relative', display: 'inline' }}>\n        <span ref={controllerRef} style={{ display: 'inline-block', color: 'red' }}>\n          {'Jeg er en tooltip tekst.'}\n        </span>\n        <HelpBubble\n          {...props}\n          onClose={() => {\n            alert('Bubble closed');\n          }}\n          controllerRef={controllerRef}\n        >\n          {props.children}\n        </HelpBubble>\n      </div>\n      <span>\n        {\n          'Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non.'\n        }\n      </span>\n    </div>\n  );\n};\n\nexport default HelpBubbleExample;\n"],"names":["HelpBubbleExample","props","controllerRef","useRef","React","HelpBubble"],"mappings":"21BAIA,MAAMA,EAAwDC,GAAA,CACtD,MAAAC,EAAgBC,EAAwB,IAAI,EAElD,uBACG,MACC,KAAAC,EAAA,cAAC,OAEG,KAAA,+pBAEJ,EACCA,EAAA,cAAA,MAAA,CAAI,MAAO,CAAE,SAAU,WAAY,QAAS,QAAS,CAAA,EACnDA,EAAA,cAAA,OAAA,CAAK,IAAKF,EAAe,MAAO,CAAE,QAAS,eAAgB,MAAO,KAAM,CACtE,EAAA,0BACH,EACCE,EAAA,cAAAC,EAAA,CACE,GAAGJ,EACJ,QAAS,IAAM,CACb,MAAM,eAAe,CACvB,EACA,cAAAC,CAAA,EAECD,EAAM,QACT,CACF,EACCG,EAAA,cAAA,OAAA,KAEG,+pBAEJ,CACF,CAEJ"}

package/components/HorizontalScroll/styles.module.scss

@@ -3,7 +3,7 @@
 $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
 
 .horizontalscroll {
-  transform: translateZ(0); // Gjør at position: fixed på child-elementer er relativ til denne parenten
+  position: relative;
   &__viewport {
     display: flex;
     &--overflow {
@@ -12,7 +12,7 @@ $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
     }
   }
   &__indicator {
-    position: fixed;
+    position: absolute;
     width: 23px;
     top: 0;
     height: 100%;

package/components/LinkList/LinkList.d.ts

@@ -37,6 +37,10 @@ export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTML
     target?: LinkAnchorTargets;
     /** HTML markup for link. Default: a */
     htmlMarkup?: LinkTags;
+    /**
+     * Ref for lenke/knapp
+     */
+    linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/components/LinkList/LinkList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvG,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AACtC,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyED,eAAO,MAAM,QAAQ,mBAuBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LinkList.d.ts","sourceRoot":"","sources":["../../../src/components/LinkList/LinkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AASnD,oBAAY,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,oBAAY,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D,oBAAY,cAAc,GAAG,YAAY,CAAC;AAC1C,oBAAY,QAAQ,GAAG,KAAK,CAAC,yBAAyB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC;AAEvG,oBAAY,QAAQ,GAAG,QAAQ,GAAG,GAAG,CAAC;AACtC,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,yBAAyB,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC/H,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,UAAU,aAAa;IACrB,4BAA4B;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,KAAK,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC5F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,uCAAuC;IACvC,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;IACjE,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0ED,eAAO,MAAM,QAAQ,mBAuBE,CAAC;AAKxB,eAAe,QAAQ,CAAC"}

package/components/LinkList/index.js

@@ -1,2 +1,2 @@
-import e from"react";import N from"classnames";import{Icon as I}from"../Icons/Icon.js";import{AnalyticsId as v,IconSize as p}from"../../constants.js";import g from"../Icons/ChevronRight.js";import{useBreakpoint as R,Breakpoint as z}from"../../hooks/useBreakpoint.js";import{useHover as S}from"../../hooks/useHover.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../theme/grid.js";const f=e.forwardRef((u,s)=>{const{children:m,className:c="",color:d="neutral",icon:r,size:n="medium",chevron:l=!1,testId:k,target:i,htmlMarkup:o="a",...a}=u,{hoverRef:_,isHovered:h}=S(),y=R(),L=n!=="small"&&!!(l||r),b=()=>e.createElement(e.Fragment,null,L&&r&&e.createElement("span",{className:t["link-list__icon"]},e.cloneElement(r,{size:y===z.xs?p.XSmall:p.Small,isHovered:h})),e.createElement("span",{className:t["link-list__content"]},m),L&&l&&e.createElement("span",{className:t["link-list__chevron"]},e.createElement(I,{svgIcon:g,isHovered:h,size:p.XSmall}))),E=N(t["link-list__anchor"],t["link-list__anchor--"+d],{[t["link-list__anchor--small"]]:n==="small",[t["link-list__anchor--medium"]]:n==="medium",[t["link-list__anchor--large"]]:n==="large",[t["link-list__anchor--button"]]:o==="button"},c);return e.createElement("li",{ref:s,"data-testid":k,"data-analyticsid":v.Link},o==="a"&&e.createElement("a",{className:E,ref:_,rel:i==="_blank"?"noopener noreferrer":void 0,target:i,...a},b()),o==="button"&&e.createElement("button",{className:E,ref:_,type:"button",...a},b()))}),B=e.forwardRef(function(s,m){const{children:c,className:d="",chevron:r=!1,size:n="medium",color:l,topBorder:k=!0,bottomBorder:i=!0,testId:o}=s;return e.createElement("ul",{ref:m,className:N(t["link-list"],{[t["link-list--hastopborder"]]:k,[t["link-list--nobottomborder"]]:!i},d),"data-testid":o,"data-analyticsid":v.LinkList},e.Children.map(c,a=>{if(a.type===f)return e.cloneElement(a,{color:l,size:n,chevron:r})}))});B.Link=f;f.displayName="LinkList.Link";export{B as LinkList,B as default};
+import e from"react";import v from"classnames";import{Icon as R}from"../Icons/Icon.js";import{AnalyticsId as y,IconSize as p}from"../../constants.js";import g from"../Icons/ChevronRight.js";import{useBreakpoint as z,Breakpoint as S}from"../../hooks/useBreakpoint.js";import{useHover as B}from"../../hooks/useHover.js";import t from"./styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../theme/grid.js";const f=e.forwardRef((u,i)=>{const{children:s,className:m="",color:c="neutral",icon:o,size:n="medium",chevron:l=!1,linkRef:d,testId:k,target:a,htmlMarkup:r="a",..._}=u,{hoverRef:h,isHovered:L}=B(d),I=z(),b=n!=="small"&&!!(l||o),E=()=>e.createElement(e.Fragment,null,b&&o&&e.createElement("span",{className:t["link-list__icon"]},e.cloneElement(o,{size:I===S.xs?p.XSmall:p.Small,isHovered:L})),e.createElement("span",{className:t["link-list__content"]},s),b&&l&&e.createElement("span",{className:t["link-list__chevron"]},e.createElement(R,{svgIcon:g,isHovered:L,size:p.XSmall}))),N=v(t["link-list__anchor"],t["link-list__anchor--"+c],{[t["link-list__anchor--small"]]:n==="small",[t["link-list__anchor--medium"]]:n==="medium",[t["link-list__anchor--large"]]:n==="large",[t["link-list__anchor--button"]]:r==="button"},m);return e.createElement("li",{ref:i,"data-testid":k,"data-analyticsid":y.Link},r==="a"&&e.createElement("a",{className:N,ref:h,rel:a==="_blank"?"noopener noreferrer":void 0,target:a,..._},E()),r==="button"&&e.createElement("button",{className:N,ref:h,type:"button",..._},E()))}),C=e.forwardRef(function(i,s){const{children:m,className:c="",chevron:o=!1,size:n="medium",color:l,topBorder:d=!0,bottomBorder:k=!0,testId:a}=i;return e.createElement("ul",{ref:s,className:v(t["link-list"],{[t["link-list--hastopborder"]]:d,[t["link-list--nobottomborder"]]:!k},c),"data-testid":a,"data-analyticsid":y.LinkList},e.Children.map(m,r=>{if(r.type===f)return e.cloneElement(r,{color:l,size:n,chevron:o})}))});C.Link=f;f.displayName="LinkList.Link";export{C as LinkList,C as default};
 //# sourceMappingURL=index.js.map

package/components/LinkList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkType = React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>>;\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\ninterface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Toggles the bottom border of the last child element. */\n  bottomBorder?: boolean;\n  /** Toggles the top border of the first child element. */\n  topBorder?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n  children: React.ReactNode;\n  color?: LinkListColors;\n  size?: LinkListSize;\n  chevron?: boolean;\n  className?: string;\n  icon?: React.ReactElement;\n  href?: string;\n  target?: LinkAnchorTargets;\n  /** HTML markup for link. Default: a */\n  htmlMarkup?: LinkTags;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    testId,\n    target,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>();\n  const breakpoint = useBreakpoint();\n\n  const hasIcon = size !== 'small' && !!(chevron || icon);\n\n  const renderContent = (): JSX.Element => (\n    <>\n      {hasIcon && icon && (\n        <span className={LinkListStyles['link-list__icon']}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      <span className={LinkListStyles['link-list__content']}>{children}</span>\n      {hasIcon && chevron && (\n        <span className={LinkListStyles['link-list__chevron']}>\n          <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </>\n  );\n\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles['link-list__anchor--' + color],\n    {\n      [LinkListStyles['link-list__anchor--small']]: size === 'small',\n      [LinkListStyles['link-list__anchor--medium']]: size === 'medium',\n      [LinkListStyles['link-list__anchor--large']]: size === 'large',\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n\n  return (\n    <li ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderContent()}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, topBorder = true, bottomBorder = true, testId } = props;\n  return (\n    <ul\n      ref={ref}\n      className={cn(\n        LinkListStyles['link-list'],\n        {\n          [LinkListStyles['link-list--hastopborder']]: topBorder,\n          [LinkListStyles['link-list--nobottomborder']]: !bottomBorder,\n        },\n        className\n      )}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.LinkList}\n    >\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","testId","target","htmlMarkup","restProps","hoverRef","isHovered","useHover","breakpoint","useBreakpoint","hasIcon","renderContent","LinkListStyles","Breakpoint","IconSize","Icon","ChevronRight","linkClasses","cn","AnalyticsId","LinkList","topBorder","bottomBorder","child"],"mappings":"mbA0DA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,OAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,OACVC,CACD,EAAAX,EACE,CAAE,SAAAY,EAAU,UAAAC,CAAU,EAAIC,EAAgD,EAC1EC,EAAaC,IAEbC,EAAUX,IAAS,SAAW,CAAC,EAAEC,GAAWF,GAE5Ca,EAAgB,IAEjBnB,EAAA,cAAAA,EAAA,SAAA,KAAAkB,GAAWZ,GACTN,EAAA,cAAA,OAAA,CAAK,UAAWoB,EAAe,kBAAA,EAC7BpB,EAAM,aAAaM,EAAM,CACxB,KAAMU,IAAeK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAR,CACD,CAAA,CACH,EAEDd,EAAA,cAAA,OAAA,CAAK,UAAWoB,EAAe,qBAAA,EAAwBjB,CAAS,EAChEe,GAAWV,GACTR,EAAA,cAAA,OAAA,CAAK,UAAWoB,EAAe,qBAAA,EAC7BpB,EAAA,cAAAuB,EAAA,CAAK,QAASC,EAAc,UAAAV,EAAsB,KAAMQ,EAAS,MAAQ,CAAA,CAC5E,CAEJ,EAGIG,EAAcC,EAClBN,EAAe,qBACfA,EAAe,sBAAwBf,GACvC,CACE,CAACe,EAAe,6BAA8Bb,IAAS,QACvD,CAACa,EAAe,8BAA+Bb,IAAS,SACxD,CAACa,EAAe,6BAA8Bb,IAAS,QACvD,CAACa,EAAe,8BAA+BT,IAAe,QAChE,EACAP,CAAA,EAGF,OACGJ,EAAA,cAAA,KAAA,CAAG,IAAAE,EAAU,cAAaO,EAAQ,mBAAkBkB,EAAY,IAC9D,EAAAhB,IAAe,KACbX,EAAA,cAAA,IAAA,CACC,UAAWyB,EACX,IAAKZ,EACL,IAAKH,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGE,CAAA,EAEHO,EACH,CAAA,EAEDR,IAAe,UACbX,EAAA,cAAA,SAAA,CAAO,UAAWyB,EAAa,IAAKZ,EAAgD,KAAK,SAAU,GAAGD,CAAA,EACpGO,EACH,CAAA,CAEJ,CAEJ,CAAC,EAEYS,EAAW5B,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,UAAAwB,EAAY,GAAM,aAAAC,EAAe,GAAM,OAAArB,CAAW,EAAAR,EAC7H,OACGD,EAAA,cAAA,KAAA,CACC,IAAAE,EACA,UAAWwB,EACTN,EAAe,aACf,CACE,CAACA,EAAe,4BAA6BS,EAC7C,CAACT,EAAe,8BAA+B,CAACU,CAClD,EACA1B,CACF,EACA,cAAaK,EACb,mBAAkBkB,EAAY,QAAA,EAE7B3B,EAAM,SAAS,IAAIG,EAAW4B,GAA2D,CACnF,GAAAA,EAAwC,OAAShC,EACpD,OAAOC,EAAM,aAAa+B,EAAwC,CAAE,MAAA1B,EAAO,KAAAE,EAAM,QAAAC,EAAS,CAE7F,CAAA,CACH,CAEJ,CAAC,EAEDoB,EAAS,KAAO7B,EAChBA,EAAK,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../src/components/LinkList/LinkList.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronRight from '../Icons/ChevronRight';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\n\nimport LinkListStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\n\nexport type LinkListSize = 'small' | 'medium' | 'large';\n\nexport type LinkAnchorTargets = '_self' | '_blank' | '_parent';\n\nexport type LinkListColors = PaletteNames;\nexport type LinkType = React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLLIElement>>;\n\nexport type LinkTags = 'button' | 'a';\nexport interface CompoundComponent extends React.ForwardRefExoticComponent<LinkListProps & React.RefAttributes<HTMLUListElement>> {\n  Link: LinkType;\n}\n\ninterface LinkListProps {\n  /** Items in the LinkList */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color: LinkListColors;\n  /** Toggles chevron icon on or off. */\n  chevron?: boolean;\n  /** Toggles the bottom border of the last child element. */\n  bottomBorder?: boolean;\n  /** Toggles the top border of the first child element. */\n  topBorder?: boolean;\n  /** Changes size of the LinkList. */\n  size?: LinkListSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n  children: React.ReactNode;\n  color?: LinkListColors;\n  size?: LinkListSize;\n  chevron?: boolean;\n  className?: string;\n  icon?: React.ReactElement;\n  href?: string;\n  target?: LinkAnchorTargets;\n  /** HTML markup for link. Default: a */\n  htmlMarkup?: LinkTags;\n  /**\n   * Ref for lenke/knapp\n   */\n  linkRef?: React.RefObject<HTMLButtonElement | HTMLAnchorElement>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Link: LinkType = React.forwardRef((props: LinkProps, ref: React.Ref<HTMLLIElement>) => {\n  const {\n    children,\n    className = '',\n    color = 'neutral',\n    icon,\n    size = 'medium',\n    chevron = false,\n    linkRef,\n    testId,\n    target,\n    htmlMarkup = 'a',\n    ...restProps\n  } = props;\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement | HTMLAnchorElement>(linkRef);\n  const breakpoint = useBreakpoint();\n\n  const hasIcon = size !== 'small' && !!(chevron || icon);\n\n  const renderContent = (): JSX.Element => (\n    <>\n      {hasIcon && icon && (\n        <span className={LinkListStyles['link-list__icon']}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      <span className={LinkListStyles['link-list__content']}>{children}</span>\n      {hasIcon && chevron && (\n        <span className={LinkListStyles['link-list__chevron']}>\n          <Icon svgIcon={ChevronRight} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </>\n  );\n\n  const linkClasses = cn(\n    LinkListStyles['link-list__anchor'],\n    LinkListStyles['link-list__anchor--' + color],\n    {\n      [LinkListStyles['link-list__anchor--small']]: size === 'small',\n      [LinkListStyles['link-list__anchor--medium']]: size === 'medium',\n      [LinkListStyles['link-list__anchor--large']]: size === 'large',\n      [LinkListStyles['link-list__anchor--button']]: htmlMarkup === 'button',\n    },\n    className\n  );\n\n  return (\n    <li ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Link}>\n      {htmlMarkup === 'a' && (\n        <a\n          className={linkClasses}\n          ref={hoverRef as React.RefObject<HTMLAnchorElement>}\n          rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n          target={target}\n          {...restProps}\n        >\n          {renderContent()}\n        </a>\n      )}\n      {htmlMarkup === 'button' && (\n        <button className={linkClasses} ref={hoverRef as React.RefObject<HTMLButtonElement>} type=\"button\" {...restProps}>\n          {renderContent()}\n        </button>\n      )}\n    </li>\n  );\n});\n\nexport const LinkList = React.forwardRef(function LinkListForwardedRef(props: LinkListProps, ref: React.Ref<HTMLUListElement>) {\n  const { children, className = '', chevron = false, size = 'medium', color, topBorder = true, bottomBorder = true, testId } = props;\n  return (\n    <ul\n      ref={ref}\n      className={cn(\n        LinkListStyles['link-list'],\n        {\n          [LinkListStyles['link-list--hastopborder']]: topBorder,\n          [LinkListStyles['link-list--nobottomborder']]: !bottomBorder,\n        },\n        className\n      )}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.LinkList}\n    >\n      {React.Children.map(children, (child: React.ReactNode | React.ReactElement<LinkProps>) => {\n        if ((child as React.ReactElement<LinkProps>).type === Link) {\n          return React.cloneElement(child as React.ReactElement<LinkProps>, { color, size, chevron });\n        }\n      })}\n    </ul>\n  );\n}) as CompoundComponent;\n\nLinkList.Link = Link;\nLink.displayName = 'LinkList.Link';\n\nexport default LinkList;\n"],"names":["Link","React","props","ref","children","className","color","icon","size","chevron","linkRef","testId","target","htmlMarkup","restProps","hoverRef","isHovered","useHover","breakpoint","useBreakpoint","hasIcon","renderContent","LinkListStyles","Breakpoint","IconSize","Icon","ChevronRight","linkClasses","cn","AnalyticsId","LinkList","topBorder","bottomBorder","child"],"mappings":"mbA8DA,MAAMA,EAAiBC,EAAM,WAAW,CAACC,EAAkBC,IAAkC,CACrF,KAAA,CACJ,SAAAC,EACA,UAAAC,EAAY,GACZ,MAAAC,EAAQ,UACR,KAAAC,EACA,KAAAC,EAAO,SACP,QAAAC,EAAU,GACV,QAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAC,EAAa,OACVC,CACD,EAAAZ,EACE,CAAE,SAAAa,EAAU,UAAAC,CAAU,EAAIC,EAAgDP,CAAO,EACjFQ,EAAaC,IAEbC,EAAUZ,IAAS,SAAW,CAAC,EAAEC,GAAWF,GAE5Cc,EAAgB,IAEjBpB,EAAA,cAAAA,EAAA,SAAA,KAAAmB,GAAWb,GACTN,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,kBAAA,EAC7BrB,EAAM,aAAaM,EAAM,CACxB,KAAMW,IAAeK,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAR,CACD,CAAA,CACH,EAEDf,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,qBAAA,EAAwBlB,CAAS,EAChEgB,GAAWX,GACTR,EAAA,cAAA,OAAA,CAAK,UAAWqB,EAAe,qBAAA,EAC7BrB,EAAA,cAAAwB,EAAA,CAAK,QAASC,EAAc,UAAAV,EAAsB,KAAMQ,EAAS,MAAQ,CAAA,CAC5E,CAEJ,EAGIG,EAAcC,EAClBN,EAAe,qBACfA,EAAe,sBAAwBhB,GACvC,CACE,CAACgB,EAAe,6BAA8Bd,IAAS,QACvD,CAACc,EAAe,8BAA+Bd,IAAS,SACxD,CAACc,EAAe,6BAA8Bd,IAAS,QACvD,CAACc,EAAe,8BAA+BT,IAAe,QAChE,EACAR,CAAA,EAGF,OACGJ,EAAA,cAAA,KAAA,CAAG,IAAAE,EAAU,cAAaQ,EAAQ,mBAAkBkB,EAAY,IAC9D,EAAAhB,IAAe,KACbZ,EAAA,cAAA,IAAA,CACC,UAAW0B,EACX,IAAKZ,EACL,IAAKH,IAAW,SAAW,sBAAwB,OACnD,OAAAA,EACC,GAAGE,CAAA,EAEHO,EACH,CAAA,EAEDR,IAAe,UACbZ,EAAA,cAAA,SAAA,CAAO,UAAW0B,EAAa,IAAKZ,EAAgD,KAAK,SAAU,GAAGD,CAAA,EACpGO,EACH,CAAA,CAEJ,CAEJ,CAAC,EAEYS,EAAW7B,EAAM,WAAW,SAA8BC,EAAsBC,EAAkC,CAC7H,KAAM,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,QAAAI,EAAU,GAAO,KAAAD,EAAO,SAAU,MAAAF,EAAO,UAAAyB,EAAY,GAAM,aAAAC,EAAe,GAAM,OAAArB,CAAW,EAAAT,EAC7H,OACGD,EAAA,cAAA,KAAA,CACC,IAAAE,EACA,UAAWyB,EACTN,EAAe,aACf,CACE,CAACA,EAAe,4BAA6BS,EAC7C,CAACT,EAAe,8BAA+B,CAACU,CAClD,EACA3B,CACF,EACA,cAAaM,EACb,mBAAkBkB,EAAY,QAAA,EAE7B5B,EAAM,SAAS,IAAIG,EAAW6B,GAA2D,CACnF,GAAAA,EAAwC,OAASjC,EACpD,OAAOC,EAAM,aAAagC,EAAwC,CAAE,MAAA3B,EAAO,KAAAE,EAAM,QAAAC,EAAS,CAE7F,CAAA,CACH,CAEJ,CAAC,EAEDqB,EAAS,KAAO9B,EAChBA,EAAK,YAAc"}

package/components/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;CAiK7C,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,OAAO,EAAe,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEtD,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,MAAM,WAAW,UAAU;IACzB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACrC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,OAAO,SAAS,CAAC;IAC9B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4BAA4B;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAuCD,QAAA,MAAM,KAAK;YAAW,UAAU,GAAG,WAAW;;;;;;;;;CA6J7C,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/components/Tooltip/index.js

@@ -1,2 +1,2 @@
-import"../../Tooltip.js";import{T as z,b as A,T as B,u as C,a as D}from"../../Tooltip.js";import"react";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useEventListenerState.js";import"../../hooks/useGetDOMRect.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"./styles.module.scss";export{z as Tooltip,A as TooltipOpenProvider,B as default,C as useTooltipOpen,D as useTooltipOpenToggle};
+import"../../Tooltip.js";import{T as D,b as E,T as F,u as G,a as H}from"../../Tooltip.js";import"react";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"./styles.module.scss";export{D as Tooltip,E as TooltipOpenProvider,F as default,G as useTooltipOpen,H as useTooltipOpenToggle};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js

@@ -1,2 +1,2 @@
-import i from"react";import{b as r,T as e}from"../../Tooltip.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useEventListenerState.js";import"../../hooks/useGetDOMRect.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"../Tooltip/styles.module.scss";const o="Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ",R=t=>i.createElement(r,null,i.createElement(i.Fragment,null,i.createElement(e,{...t},"Et tooltip her.")," "+o,"Dette er ",i.createElement(e,{...t},t.children)," som skal ha n\xE6rmere forklaring.",o,i.createElement(e,{...t},"Enda et tooltip her.")));export{R as default};
+import i from"react";import{b as r,T as e}from"../../Tooltip.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../HelpBubble.js";import"classnames";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";import"../../hooks/useSize.js";import"../../AnchorLink.js";import"../Icons/Icon.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../HelpBubble/styles.module.scss";import"../Tooltip/styles.module.scss";const o="Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ",z=t=>i.createElement(r,null,i.createElement(i.Fragment,null,i.createElement(e,{...t},"Et tooltip her.")," "+o,"Dette er ",i.createElement(e,{...t},t.children)," som skal ha n\xE6rmere forklaring.",o,i.createElement(e,{...t},"Enda et tooltip her.")));export{z as default};
 //# sourceMappingURL=index.js.map

package/components/TooltipExample/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/loremtext.ts","../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["export const shortLoremText = 'Officia laboris in sit nisi consectetur eu.';\nexport const mediumLoremText =\n  'Cupidatat culpa dolor id nulla sit commodo elit aliqua cillum. Reprehenderit aute aute enim non adipisicing duis adipisicing id laboris aliquip tempor amet. Non occaecat minim ad duis sunt et.';\nexport const longLoremText =\n  'Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ';\n\nexport default longLoremText;\n","import React from 'react';\n\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\nimport longLoremText from '../../utils/loremtext';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["longLoremText","TooltipExample","props","React","TooltipOpenProvider","Tooltip"],"mappings":"ixBAGO,MAAMA,EACX,giBCCIC,EAAkDC,GAEpDC,EAAA,cAACC,EACC,KAAAD,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,iBAAkB,EACtC,IAAMF,EACN,YACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQA,EAAM,QAAS,EACnC,sCACAF,EACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,sBAAuB,CAC9C,CACF"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/loremtext.ts","../../../src/components/TooltipExample/TooltipExample.tsx"],"sourcesContent":["export const shortLoremText = 'Officia laboris in sit nisi consectetur eu.';\nexport const mediumLoremText =\n  'Cupidatat culpa dolor id nulla sit commodo elit aliqua cillum. Reprehenderit aute aute enim non adipisicing duis adipisicing id laboris aliquip tempor amet. Non occaecat minim ad duis sunt et.';\nexport const longLoremText =\n  'Dolore quis tempor culpa exercitation laboris. Enim enim pariatur veniam nisi ad quis fugiat magna occaecat nisi. Excepteur ad ad duis quis mollit ex. Laboris duis velit eu eiusmod ea in ex aliqua. Est proident proident dolor veniam nostrud aliquip occaecat dolore sunt laboris nisi ipsum Lorem nisi. Magna sunt ex occaecat amet id. Eiusmod magna Lorem proident est occaecat pariatur sunt esse nostrud. Mollit reprehenderit velit veniam amet ipsum veniam et. Dolor sunt adipisicing enim dolore quis qui occaecat esse quis ut fugiat laboris. ';\n\nexport default longLoremText;\n","import React from 'react';\n\nimport Tooltip, { TooltipProps, TooltipOpenProvider } from '../Tooltip';\nimport longLoremText from '../../utils/loremtext';\n\nconst TooltipExample: React.FC<TooltipProps> = props => {\n  return (\n    <TooltipOpenProvider>\n      <>\n        <Tooltip {...props}>{'Et tooltip her.'}</Tooltip>\n        {' ' + longLoremText}\n        {'Dette er '}\n        <Tooltip {...props}>{props.children}</Tooltip>\n        {' som skal ha nærmere forklaring.'}\n        {longLoremText}\n        <Tooltip {...props}>{'Enda et tooltip her.'}</Tooltip>\n      </>\n    </TooltipOpenProvider>\n  );\n};\n\nexport default TooltipExample;\n"],"names":["longLoremText","TooltipExample","props","React","TooltipOpenProvider","Tooltip"],"mappings":"o5BAGO,MAAMA,EACX,giBCCIC,EAAkDC,GAEpDC,EAAA,cAACC,EACC,KAAAD,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,iBAAkB,EACtC,IAAMF,EACN,YACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQA,EAAM,QAAS,EACnC,sCACAF,EACAG,EAAA,cAAAE,EAAA,CAAS,GAAGH,CAAA,EAAQ,sBAAuB,CAC9C,CACF"}

package/hooks/useFocusTrap.d.ts

@@ -3,7 +3,8 @@ import React from 'react';
  * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.
  * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det
  * @param trapFocus Om fokus skal "trappes" innenfor elementet eller ikke. Default=true.
+ * @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.
  */
-export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean) => void;
+export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean, autofocus?: boolean) => void;
 export default useFocusTrap;
 //# sourceMappingURL=useFocusTrap.d.ts.map

package/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,KAAU,IA4B3F,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,cAAoB,OAAO,KAAW,IAgCvH,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/hooks/useFocusTrap.js

@@ -1,2 +1,2 @@
-import{useEffect as l}from"react";import{getDocumentActiveElement as i}from"./focus-utils.js";import{useFocusableElements as m}from"./useFocusableElements.js";const v=(t,r=!0)=>{const n=m(t),c=e=>{if(r&&t.current&&n&&e.key==="Tab"){const s=i(t.current),o=n[0],u=n.length===1?o:n[n.length-1];e.shiftKey&&s===o?(u.focus(),e.preventDefault()):!e.shiftKey&&s===u&&(o.focus(),e.preventDefault())}};l(()=>{var e;return(e=t.current)==null||e.addEventListener("keydown",c),()=>{var s;(s=t.current)==null||s.removeEventListener("keydown",c)}},[t,r,n])};export{v as default,v as useFocusTrap};
+import{useEffect as u}from"react";import{getDocumentActiveElement as f}from"./focus-utils.js";import{useFocusableElements as m}from"./useFocusableElements.js";const h=(n,o=!0,c=!1)=>{const e=m(n),i=t=>{if(o&&n.current&&(e==null?void 0:e.length)&&t.key==="Tab"){const r=f(n.current),s=e[0],l=e.length===1?s:e[e.length-1];t.shiftKey&&r===s?(l.focus(),t.preventDefault()):!t.shiftKey&&r===l&&(s.focus(),t.preventDefault())}};u(()=>{var t;return c&&o&&(e==null?void 0:e.length)&&e[0].focus(),(t=n.current)==null||t.addEventListener("keydown",i),()=>{var r;(r=n.current)==null||r.removeEventListener("keydown",i)}},[n,o,c,e])};export{h as default,h as useFocusTrap};
 //# sourceMappingURL=useFocusTrap.js.map

package/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { getDocumentActiveElement } from './focus-utils';\nimport { useFocusableElements } from './useFocusableElements';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","focusableElementList","useFocusableElements","handleKeyboardEvent","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"+JASO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,KAAe,CAC5F,MAAAC,EAAuBC,EAAqBH,CAAG,EAE/CI,EAAuB,GAA2B,CACtD,GAAIH,GAAaD,EAAI,SAAWE,GAAwB,EAAE,MAAQ,MAAO,CACjE,MAAAG,EAAgBC,EAAyBN,EAAI,OAAO,EACpDO,EAAeL,EAAqB,GACpCM,EAAcN,EAAqB,SAAW,EAAIK,EAAeL,EAAqBA,EAAqB,OAAS,GAEtH,EAAE,UAAYG,IAAkBE,GAElCC,EAAY,MAAM,EAClB,EAAE,eAAe,GACR,CAAC,EAAE,UAAYH,IAAkBG,IAE1CD,EAAa,MAAM,EACnB,EAAE,eAAe,EAErB,CAAA,EAGFE,EAAU,IAAM,OACV,OAAAC,EAAAV,EAAA,UAAA,MAAAU,EAAS,iBAAiB,UAAWN,GAElC,IAAY,QACbM,EAAAV,EAAA,UAAA,MAAAU,EAAS,oBAAoB,UAAWN,EAAmB,CAEhE,EAAA,CAACJ,EAAKC,EAAWC,CAAoB,CAAC,CAC3C"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { getDocumentActiveElement } from './focus-utils';\nimport { useFocusableElements } from './useFocusableElements';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n * @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true, autofocus: boolean = false): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList?.length && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    if (autofocus && trapFocus && focusableElementList?.length) {\n      focusableElementList[0].focus();\n    }\n\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, autofocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","autofocus","focusableElementList","useFocusableElements","handleKeyboardEvent","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"+JAUO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,GAAMC,EAAqB,KAAgB,CACxH,MAAAC,EAAuBC,EAAqBJ,CAAG,EAE/CK,EAAuBC,GAA2B,CACtD,GAAIL,GAAaD,EAAI,UAAWG,GAAA,YAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBR,EAAI,OAAO,EACpDS,EAAeN,EAAqB,GACpCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,GAEtHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,EAErB,CAAA,EAGFK,EAAU,IAAM,OACV,OAAAT,GAAaD,IAAaE,GAAA,YAAAA,EAAsB,SAClDA,EAAqB,GAAG,SAGtBS,EAAAZ,EAAA,UAAA,MAAAY,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAZ,EAAA,UAAA,MAAAY,EAAS,oBAAoB,UAAWP,EAAmB,GAEhE,CAACL,EAAKC,EAAWC,EAAWC,CAAoB,CAAC,CACtD"}

package/hooks/useFocusableElements.js

@@ -1,2 +1,2 @@
-import{useState as s,useEffect as b}from"react";const r=['a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])','input[type="radio"]:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','audio[controls]:not([tabindex^="-"])','video[controls]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])'].join(","),u=t=>{const[i,a]=s();return b(()=>{const e=()=>{var o;const d=(o=t.current)==null?void 0:o.querySelectorAll(r);a(d)},n=new MutationObserver(e);return t!=null&&t.current&&n.observe(t.current,{subtree:!0,childList:!0,attributeFilter:["tabindex","type","disabled","href"]}),e(),()=>{n.disconnect()}},[t]),i};export{r as FOCUSABLE_SELECTORS,u as useFocusableElements};
+import{useState as s,useEffect as b}from"react";const r=['a[href]:not([tabindex^="-"])','area[href]:not([tabindex^="-"])','input:not([type="hidden"]):not([type="radio"]):not([disabled]):not([tabindex^="-"])','input[type="radio"]:not([disabled]):not([tabindex^="-"])','select:not([disabled]):not([tabindex^="-"])','textarea:not([disabled]):not([tabindex^="-"])','button:not([disabled]):not([tabindex^="-"])','iframe:not([tabindex^="-"])','audio[controls]:not([tabindex^="-"])','video[controls]:not([tabindex^="-"])','[contenteditable]:not([tabindex^="-"])','[tabindex]:not([tabindex^="-"])'].join(","),c=t=>{const[i,a]=s();return b(()=>{const e=()=>{var o;const d=(o=t.current)==null?void 0:o.querySelectorAll(r);a(d)},n=new MutationObserver(e);return t!=null&&t.current&&n.observe(t.current,{subtree:!0,childList:!0}),e(),()=>{n.disconnect()}},[t]),i};export{r as FOCUSABLE_SELECTORS,c as useFocusableElements};
 //# sourceMappingURL=useFocusableElements.js.map

package/hooks/useFocusableElements.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusableElements.js","sources":["../../src/hooks/useFocusableElements.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Fra https://github.com/KittyGiraudel/focusable-selectors\nexport const FOCUSABLE_SELECTORS = [\n  'a[href]:not([tabindex^=\"-\"])',\n  'area[href]:not([tabindex^=\"-\"])',\n  'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n  'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n  'select:not([disabled]):not([tabindex^=\"-\"])',\n  'textarea:not([disabled]):not([tabindex^=\"-\"])',\n  'button:not([disabled]):not([tabindex^=\"-\"])',\n  'iframe:not([tabindex^=\"-\"])',\n  'audio[controls]:not([tabindex^=\"-\"])',\n  'video[controls]:not([tabindex^=\"-\"])',\n  '[contenteditable]:not([tabindex^=\"-\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle\n * nye elementer som legges til også vil inkluderes i listen.\n * @param ref Element som skal observeres\n * @returns Liste med fokuserbare HTML-elementer\n */\nexport const useFocusableElements = (ref: React.RefObject<HTMLElement>): NodeListOf<HTMLElement> | undefined => {\n  const [focusableElementList, setFocusableElementList] = useState<NodeListOf<HTMLElement>>();\n\n  useEffect(() => {\n    const handleMutationChange = () => {\n      const elementList = ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);\n      setFocusableElementList(elementList);\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true, attributeFilter: ['tabindex', 'type', 'disabled', 'href'] }); // Observer de samme attributtene som i FOCUSABLE_SELECTORS\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref]);\n\n  return focusableElementList;\n};\n"],"names":["FOCUSABLE_SELECTORS","useFocusableElements","ref","focusableElementList","setFocusableElementList","useState","useEffect","handleMutationChange","elementList","_a","mutationObserver"],"mappings":"gDAGO,MAAMA,EAAsB,CACjC,+BACA,kCACA,sFACA,2DACA,8CACA,gDACA,8CACA,8BACA,uCACA,uCACA,yCACA,iCACF,EAAE,KAAK,GAAG,EAQGC,EAAwBC,GAA2E,CAC9G,KAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAkC,EAE1F,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAM,OACjC,MAAMC,GAAcC,EAAAP,EAAI,UAAJ,YAAAO,EAAa,iBAA8BT,GAC/DI,EAAwBI,CAAW,CAAA,EAG/BE,EAAmB,IAAI,iBAAiBH,CAAoB,EAClE,OAAIL,GAAA,MAAAA,EAAK,SACPQ,EAAiB,QAAQR,EAAI,QAAS,CAAE,QAAS,GAAM,UAAW,GAAM,gBAAiB,CAAC,WAAY,OAAQ,WAAY,MAAM,EAAG,EAGhHK,IAEd,IAAY,CACjBG,EAAiB,WAAW,CAAA,CAC9B,EACC,CAACR,CAAG,CAAC,EAEDC,CACT"}
+{"version":3,"file":"useFocusableElements.js","sources":["../../src/hooks/useFocusableElements.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Fra https://github.com/KittyGiraudel/focusable-selectors\nexport const FOCUSABLE_SELECTORS = [\n  'a[href]:not([tabindex^=\"-\"])',\n  'area[href]:not([tabindex^=\"-\"])',\n  'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n  'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n  'select:not([disabled]):not([tabindex^=\"-\"])',\n  'textarea:not([disabled]):not([tabindex^=\"-\"])',\n  'button:not([disabled]):not([tabindex^=\"-\"])',\n  'iframe:not([tabindex^=\"-\"])',\n  'audio[controls]:not([tabindex^=\"-\"])',\n  'video[controls]:not([tabindex^=\"-\"])',\n  '[contenteditable]:not([tabindex^=\"-\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle\n * nye elementer som legges til også vil inkluderes i listen.\n * @param ref Element som skal observeres\n * @returns Liste med fokuserbare HTML-elementer\n */\nexport const useFocusableElements = (ref: React.RefObject<HTMLElement>): NodeListOf<HTMLElement> | undefined => {\n  const [focusableElementList, setFocusableElementList] = useState<NodeListOf<HTMLElement>>();\n\n  useEffect(() => {\n    const handleMutationChange = () => {\n      const elementList = ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);\n      setFocusableElementList(elementList);\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true });\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref]);\n\n  return focusableElementList;\n};\n"],"names":["FOCUSABLE_SELECTORS","useFocusableElements","ref","focusableElementList","setFocusableElementList","useState","useEffect","handleMutationChange","elementList","_a","mutationObserver"],"mappings":"gDAGO,MAAMA,EAAsB,CACjC,+BACA,kCACA,sFACA,2DACA,8CACA,gDACA,8CACA,8BACA,uCACA,uCACA,yCACA,iCACF,EAAE,KAAK,GAAG,EAQGC,EAAwBC,GAA2E,CAC9G,KAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAkC,EAE1F,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAM,OACjC,MAAMC,GAAcC,EAAAP,EAAI,UAAJ,YAAAO,EAAa,iBAA8BT,GAC/DI,EAAwBI,CAAW,CAAA,EAG/BE,EAAmB,IAAI,iBAAiBH,CAAoB,EAClE,OAAIL,GAAA,MAAAA,EAAK,SACUQ,EAAA,QAAQR,EAAI,QAAS,CAAE,QAAS,GAAM,UAAW,GAAM,EAGrDK,IAEd,IAAY,CACjBG,EAAiB,WAAW,CAAA,CAC9B,EACC,CAACR,CAAG,CAAC,EAEDC,CACT"}

package/hooks/useIntersectionObserver.d.ts

@@ -6,5 +6,5 @@
  * @param callback Kalles når en endring i intersection er observert
  * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres
  */
-export declare const useIntersectionObserver: (ref: React.RefObject<HTMLElement>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => void;
+export declare const useIntersectionObserver: (ref: React.RefObject<Element>, callback: IntersectionObserverCallback, options?: IntersectionObserverInit) => void;
 //# sourceMappingURL=useIntersectionObserver.d.ts.map

package/hooks/useIntersectionObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,uBAAuB,QAC7B,MAAM,SAAS,CAAC,WAAW,CAAC,YACvB,4BAA4B,YAC5B,wBAAwB,KACjC,IAgBF,CAAC"}
+{"version":3,"file":"useIntersectionObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useIntersectionObserver.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,eAAO,MAAM,uBAAuB,QAC7B,MAAM,SAAS,CAAC,OAAO,CAAC,YACnB,4BAA4B,YAC5B,wBAAwB,KACjC,IAgBF,CAAC"}

package/hooks/useIntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback\n * når elementet er i ferd med å forsvinne ut av vinduet.\n *\n * @param ref Element som skal observeres\n * @param callback Kalles når en endring i intersection er observert\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n */\n\nexport const useIntersectionObserver = (\n  ref: React.RefObject<HTMLElement>,\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit\n): void => {\n  useEffect(() => {\n    const intersectionObserver = new IntersectionObserver(callback, options);\n\n    if (ref?.current) {\n      intersectionObserver.observe(ref.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        intersectionObserver.unobserve(ref.current);\n      } else {\n        intersectionObserver.disconnect();\n      }\n    };\n  }, [ref, options]);\n};\n"],"names":["useIntersectionObserver","ref","callback","options","useEffect","intersectionObserver"],"mappings":"kCAWO,MAAMA,EAA0B,CACrCC,EACAC,EACAC,IACS,CACTC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAI,qBAAqBH,EAAUC,CAAO,EAEvE,OAAIF,GAAA,MAAAA,EAAK,SACcI,EAAA,QAAQJ,EAAI,OAAO,EAGnC,IAAY,CACbA,GAAA,MAAAA,EAAK,QACcI,EAAA,UAAUJ,EAAI,OAAO,EAE1CI,EAAqB,WAAW,CAClC,CACF,EACC,CAACJ,EAAKE,CAAO,CAAC,CACnB"}
+{"version":3,"file":"useIntersectionObserver.js","sources":["../../src/hooks/useIntersectionObserver.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Lytt på endringer i synligheten (intersection) til et HTML-element. F.eks. kan du bruke denne til å kalle en callback\n * når elementet er i ferd med å forsvinne ut av vinduet.\n *\n * @param ref Element som skal observeres\n * @param callback Kalles når en endring i intersection er observert\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n */\n\nexport const useIntersectionObserver = (\n  ref: React.RefObject<Element>,\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit\n): void => {\n  useEffect(() => {\n    const intersectionObserver = new IntersectionObserver(callback, options);\n\n    if (ref?.current) {\n      intersectionObserver.observe(ref.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        intersectionObserver.unobserve(ref.current);\n      } else {\n        intersectionObserver.disconnect();\n      }\n    };\n  }, [ref, options]);\n};\n"],"names":["useIntersectionObserver","ref","callback","options","useEffect","intersectionObserver"],"mappings":"kCAWO,MAAMA,EAA0B,CACrCC,EACAC,EACAC,IACS,CACTC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAI,qBAAqBH,EAAUC,CAAO,EAEvE,OAAIF,GAAA,MAAAA,EAAK,SACcI,EAAA,QAAQJ,EAAI,OAAO,EAGnC,IAAY,CACbA,GAAA,MAAAA,EAAK,QACcI,EAAA,UAAUJ,EAAI,OAAO,EAE1CI,EAAqB,WAAW,CAClC,CACF,EACC,CAACJ,EAAKE,CAAO,CAAC,CACnB"}

package/hooks/useInterval.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Kjør en funksjon ved intervaller basert på ønsket frequency.
+ *
+ * @param callback Funksjon som skal kjøres
+ * @param frequency Hvor ofte vi skal kjøre funksjonen
+ * @returns void
+ */
+export declare const useInterval: (callback: () => void, frequency?: number) => void;
+//# sourceMappingURL=useInterval.d.ts.map

package/hooks/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../src/hooks/useInterval.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,aAAc,MAAM,IAAI,yBAAmB,IAQlE,CAAC"}

package/hooks/useInterval.js

@@ -0,0 +1,2 @@
+import{useEffect as n}from"react";const s=(t,e=10)=>{n(()=>{const r=setInterval(t,e);return()=>{clearInterval(r)}},[t,e])};export{s as useInterval};
+//# sourceMappingURL=useInterval.js.map

package/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect } from 'react';\n\n/**\n * Kjør en funksjon ved intervaller basert på ønsket frequency.\n *\n * @param callback Funksjon som skal kjøres\n * @param frequency Hvor ofte vi skal kjøre funksjonen\n * @returns void\n */\nexport const useInterval = (callback: () => void, frequency = 10): void => {\n  useEffect(() => {\n    const timer = setInterval(callback, frequency);\n\n    return () => {\n      clearInterval(timer);\n    };\n  }, [callback, frequency]);\n};\n"],"names":["useInterval","callback","frequency","useEffect","timer"],"mappings":"kCASO,MAAMA,EAAc,CAACC,EAAsBC,EAAY,KAAa,CACzEC,EAAU,IAAM,CACR,MAAAC,EAAQ,YAAYH,EAAUC,CAAS,EAE7C,MAAO,IAAM,CACX,cAAcE,CAAK,CAAA,CACrB,EACC,CAACH,EAAUC,CAAS,CAAC,CAC1B"}

package/hooks/useIsVisible.d.ts

@@ -7,5 +7,5 @@
  * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig
  * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke
  */
-export declare const useIsVisible: (ref: React.RefObject<HTMLElement>, threshold?: number, options?: IntersectionObserverInit, initial?: boolean) => boolean;
+export declare const useIsVisible: (ref: React.RefObject<Element>, threshold?: number, options?: IntersectionObserverInit, initial?: boolean) => boolean;
 //# sourceMappingURL=useIsVisible.d.ts.map

package/hooks/useIsVisible.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsVisible.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAClB,MAAM,SAAS,CAAC,WAAW,CAAC,gCAEvB,wBAAwB,wBAEjC,OAUF,CAAC"}
+{"version":3,"file":"useIsVisible.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsVisible.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,QAClB,MAAM,SAAS,CAAC,OAAO,CAAC,gCAEnB,wBAAwB,wBAEjC,OAUF,CAAC"}

package/hooks/useIsVisible.js

@@ -1,2 +1,2 @@
-import{useState as a}from"react";import{useIntersectionObserver as c}from"./useIntersectionObserver.js";const m=(s,e=1,t,n=!1)=>{const[i,r]=a(n);return c(s,o=>{r(o[0].intersectionRatio>=e)},{threshold:e,...t}),i};export{m as useIsVisible};
+import{useState as a}from"react";import{useIntersectionObserver as c}from"./useIntersectionObserver.js";const u=(s,e=1,i,n=!1)=>{const[o,r]=a(n);return c(s,t=>{r(e===0?t[0].intersectionRatio!==e:t[0].intersectionRatio>=e)},{threshold:e,...i}),o};export{u as useIsVisible};
 //# sourceMappingURL=useIsVisible.js.map

package/hooks/useIsVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsVisible.js","sources":["../../src/hooks/useIsVisible.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIntersectionObserver } from './useIntersectionObserver';\n\n/**\n * Sjekk om et HTML-element er synlig i vinduet, eller ikke.\n *\n * @param ref Element som skal observeres\n * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig\n * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke\n */\nexport const useIsVisible = (\n  ref: React.RefObject<HTMLElement>,\n  threshold = 1,\n  options?: IntersectionObserverInit,\n  initial = false\n): boolean => {\n  const [isVisible, setIsVisible] = useState(initial);\n\n  const handleIntersectChange: IntersectionObserverCallback = entries => {\n    setIsVisible(entries[0].intersectionRatio >= threshold);\n  };\n\n  useIntersectionObserver(ref, handleIntersectChange, { threshold, ...options });\n\n  return isVisible;\n};\n"],"names":["useIsVisible","ref","threshold","options","initial","isVisible","setIsVisible","useState","useIntersectionObserver","entries"],"mappings":"wGAYO,MAAMA,EAAe,CAC1BC,EACAC,EAAY,EACZC,EACAC,EAAU,KACE,CACZ,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAASH,CAAO,EAMlD,OAAAI,EAAwBP,EAJ+CQ,GAAA,CACxDH,EAAAG,EAAQ,GAAG,mBAAqBP,CAAS,CAAA,EAGJ,CAAE,UAAAA,EAAW,GAAGC,EAAS,EAEtEE,CACT"}
+{"version":3,"file":"useIsVisible.js","sources":["../../src/hooks/useIsVisible.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIntersectionObserver } from './useIntersectionObserver';\n\n/**\n * Sjekk om et HTML-element er synlig i vinduet, eller ikke.\n *\n * @param ref Element som skal observeres\n * @param threshold Hvor synlig må elementet være? Default = 1 (helt synlig)\n * @param options Objekt med options for IntersectionObserver, f.eks. threshold for å bestemme når callbacken skal fyres\n * @param initial Om elementet default skal antas å være synlig eller ikke. Default: ikke synlig\n * @returns true hvis objektet er synlig lik threshold eller mer, false hvis ikke\n */\nexport const useIsVisible = (\n  ref: React.RefObject<Element>,\n  threshold = 1,\n  options?: IntersectionObserverInit,\n  initial = false\n): boolean => {\n  const [isVisible, setIsVisible] = useState(initial);\n\n  const handleIntersectChange: IntersectionObserverCallback = entries => {\n    setIsVisible(threshold === 0 ? entries[0].intersectionRatio !== threshold : entries[0].intersectionRatio >= threshold);\n  };\n\n  useIntersectionObserver(ref, handleIntersectChange, { threshold, ...options });\n\n  return isVisible;\n};\n"],"names":["useIsVisible","ref","threshold","options","initial","isVisible","setIsVisible","useState","useIntersectionObserver","entries"],"mappings":"wGAYO,MAAMA,EAAe,CAC1BC,EACAC,EAAY,EACZC,EACAC,EAAU,KACE,CACZ,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAASH,CAAO,EAMlD,OAAAI,EAAwBP,EAJ+CQ,GAAA,CACxDH,EAAAJ,IAAc,EAAIO,EAAQ,GAAG,oBAAsBP,EAAYO,EAAQ,GAAG,mBAAqBP,CAAS,CAAA,EAGnE,CAAE,UAAAA,EAAW,GAAGC,EAAS,EAEtEE,CACT"}

package/hooks/useSize.d.ts

@@ -2,7 +2,8 @@
  * Lytt på endringer i størrelse på et element
  *
  * @param ref Element som skal observeres.
- * @returns Object med høyde, bredde, x og y til elementet
+ * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når
+ * posisjonen (x og y) endres.
  */
 export declare const useSize: (ref?: React.RefObject<HTMLElement>) => DOMRect | undefined;
 //# sourceMappingURL=useSize.d.ts.map

package/hooks/useSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,OAAO,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,wBAwCzD,CAAC"}
+{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,wBAwCzD,CAAC"}

package/hooks/useSize.js

@@ -1,2 +1,2 @@
-import{useState as r,useEffect as d}from"react";import{d as a}from"../debounce.js";const w=e=>{const[i,c]=r();return d(()=>{if(typeof ResizeObserver<"u"){const n=new ResizeObserver(t=>{c(t[0].target.getBoundingClientRect())});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}}else if(typeof window=="object"){const n=()=>{e!=null&&e.current&&c(e.current.getBoundingClientRect())},t=["layoutchange","resize","orientationchange"],[o,u]=a(n,10);return t.forEach(s=>window.addEventListener(s,o)),o(),()=>{u(),t.forEach(s=>window.removeEventListener(s,o))}}},[e]),i};export{w as useSize};
+import{useState as d,useEffect as r}from"react";import{d as a}from"../debounce.js";const w=e=>{const[i,c]=d();return r(()=>{if(typeof ResizeObserver<"u"){const n=new ResizeObserver(t=>{c(t[0].target.getBoundingClientRect())});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}}else if(typeof window=="object"){const n=()=>{e!=null&&e.current&&c(e.current.getBoundingClientRect())},t=["layoutchange","resize","orientationchange"],[o,u]=a(n,10);return t.forEach(s=>window.addEventListener(s,o)),o(),()=>{u(),t.forEach(s=>window.removeEventListener(s,o))}}},[e==null?void 0:e.current]),i};export{w as useSize};
 //# sourceMappingURL=useSize.js.map

package/hooks/useSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>) => {\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        setSize(entries[0].target.getBoundingClientRect());\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref]);\n\n  return size;\n};\n"],"names":["useSize","ref","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"mFASa,MAAAA,EAAWC,GAAuC,CAC7D,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CACnDJ,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,CAAA,CAClD,EACD,OAAIN,GAAA,MAAAA,EAAK,SACQK,EAAA,QAAQL,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQK,EAAA,UAAUL,EAAI,OAAO,EAEpCK,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BP,GAAA,MAAAA,EAAK,SAAWE,EAAQF,EAAI,QAAQ,uBAAuB,CAAA,EAGvDQ,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACT,CAAG,CAAC,EAEDC,CACT"}
+{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>) => {\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        setSize(entries[0].target.getBoundingClientRect());\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref?.current]);\n\n  return size;\n};\n"],"names":["useSize","ref","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"mFAUa,MAAAA,EAAWC,GAAuC,CAC7D,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CACnDJ,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,CAAA,CAClD,EACD,OAAIN,GAAA,MAAAA,EAAK,SACQK,EAAA,QAAQL,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQK,EAAA,UAAUL,EAAI,OAAO,EAEpCK,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BP,GAAA,MAAAA,EAAK,SAAWE,EAAQF,EAAI,QAAQ,uBAAuB,CAAA,EAGvDQ,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACT,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVC,CACT"}

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {

package/hooks/useGetDOMRect.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/**
- * Hent ut posisjon og størrelse til en Ref, med intervaller basert på ønsket frequency.
- *
- * @param ref Element som skal observeres
- * @param updatePosition om posisjonen skal fortsette å hentes ut
- * @param frequency Hvor ofte skal vi hente posisjonen i MS
- * @returns DOMRect objekt med posisjon og størrelse til ref
- */
-export declare const useGetDOMRect: (ref: React.RefObject<HTMLElement | SVGSVGElement>, updatePosition?: boolean, frequency?: number) => [DOMRect, () => void];
-//# sourceMappingURL=useGetDOMRect.d.ts.map

package/hooks/useGetDOMRect.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGetDOMRect.d.ts","sourceRoot":"","sources":["../../src/hooks/useGetDOMRect.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,QACnB,MAAM,SAAS,CAAC,WAAW,GAAG,aAAa,CAAC,mDAGhD,CAAC,OAAO,EAAE,MAAM,IAAI,CA4CtB,CAAC"}

package/hooks/useGetDOMRect.js

@@ -1,2 +0,0 @@
-import{useState as s,useEffect as I}from"react";const f=(t,e=!0,c=10)=>{const n={height:0,width:0,x:0,y:0,bottom:0,left:0,right:0,top:0,toJSON:()=>null},[i,o]=s(n),[l,u]=s();I(()=>(e?a():r(),()=>r()),[e]);const r=()=>{clearInterval(l)},a=()=>{const m=setInterval(()=>{t.current&&o(t.current.getBoundingClientRect())},c);u(m)};return[i,()=>{o(n)}]};export{f as useGetDOMRect};
-//# sourceMappingURL=useGetDOMRect.js.map

package/hooks/useGetDOMRect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGetDOMRect.js","sources":["../../src/hooks/useGetDOMRect.ts"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\n/**\n * Hent ut posisjon og størrelse til en Ref, med intervaller basert på ønsket frequency.\n *\n * @param ref Element som skal observeres\n * @param updatePosition om posisjonen skal fortsette å hentes ut\n * @param frequency Hvor ofte skal vi hente posisjonen i MS\n * @returns DOMRect objekt med posisjon og størrelse til ref\n */\nexport const useGetDOMRect = (\n  ref: React.RefObject<HTMLElement | SVGSVGElement>,\n  updatePosition = true,\n  frequency = 10\n): [DOMRect, () => void] => {\n  const newDOMRect = {\n    height: 0,\n    width: 0,\n    x: 0,\n    y: 0,\n    bottom: 0,\n    left: 0,\n    right: 0,\n    top: 0,\n    toJSON: () => null,\n  };\n  const [domRect, setDomRect] = useState<DOMRect>(newDOMRect);\n  const [intervalId, setIntervalId] = useState<NodeJS.Timer>();\n\n  useEffect(() => {\n    if (updatePosition) {\n      startGetPosition();\n    } else {\n      stopGetPosition();\n    }\n\n    return () => stopGetPosition();\n  }, [updatePosition]);\n\n  const stopGetPosition = () => {\n    clearInterval(intervalId);\n  };\n\n  const startGetPosition = () => {\n    const newIntervalId = setInterval(() => {\n      if (ref.current) {\n        setDomRect(ref.current.getBoundingClientRect());\n      }\n    }, frequency);\n\n    setIntervalId(newIntervalId);\n  };\n\n  const resetDomRect = () => {\n    setDomRect(newDOMRect);\n  };\n\n  return [domRect, resetDomRect];\n};\n"],"names":["useGetDOMRect","ref","updatePosition","frequency","newDOMRect","domRect","setDomRect","useState","intervalId","setIntervalId","useEffect","startGetPosition","stopGetPosition","newIntervalId"],"mappings":"gDAUO,MAAMA,EAAgB,CAC3BC,EACAC,EAAiB,GACjBC,EAAY,KACc,CAC1B,MAAMC,EAAa,CACjB,OAAQ,EACR,MAAO,EACP,EAAG,EACH,EAAG,EACH,OAAQ,EACR,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,IAAM,IAAA,EAEV,CAACC,EAASC,CAAU,EAAIC,EAAkBH,CAAU,EACpD,CAACI,EAAYC,CAAa,EAAIF,EAAuB,EAE3DG,EAAU,KACJR,EACeS,IAEDC,IAGX,IAAMA,EAAgB,GAC5B,CAACV,CAAc,CAAC,EAEnB,MAAMU,EAAkB,IAAM,CAC5B,cAAcJ,CAAU,CAAA,EAGpBG,EAAmB,IAAM,CACvB,MAAAE,EAAgB,YAAY,IAAM,CAClCZ,EAAI,SACKK,EAAAL,EAAI,QAAQ,sBAAuB,CAAA,GAE/CE,CAAS,EAEZM,EAAcI,CAAa,CAAA,EAOtB,MAAA,CAACR,EAJa,IAAM,CACzBC,EAAWF,CAAU,CAAA,CAGM,CAC/B"}