@helsenorge/designsystem-react 2.2.1 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [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)
+
+
+### Features
+
+*  nytt ikon og fiks på confluence script ([0d6d9ea](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/0d6d9ea492b22ee70c2edbb32440f39739a6ce6d)), closes [#287052](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287052)
+
 ## [2.2.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.1.0&targetVersion=GTv2.2.0) (2022-10-25)
 
 

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 P}from"react";import n from"classnames";import{palette as u}from"./theme/palette.js";import{B}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import{ZIndex as $,AnalyticsId as A,IconSize as s}from"./constants.js";import a from"./components/Modal/styles.module.scss";import F from"./components/Icons/AlertSignStroke.js";import H from"./components/Icons/AlertSignFill.js";import{useFocusTrap as K}from"./hooks/useFocusTrap.js";import{useIsVisible as k}from"./hooks/useIsVisible.js";import{T as O}from"./Title.js";import{a as D}from"./uuid.js";import{C as M}from"./Close.js";import V from"./components/Icons/CheckOutline.js";import Z from"./components/Portal/index.js";var j=(e=>(e.normal="normal",e.warning="warning",e.error="error",e.success="success",e.image="image",e))(j||{}),q=(e=>(e.large="large",e.medium="medium",e))(q||{});const G={variant:"normal",primaryButtonText:"OK",titleId:D(),className:"",size:"large",zIndex:$.Modal},J=e=>e==="error"?t.createElement(_,{size:s.Small,svgIcon:H,color:u.cherry500}):e==="warning"?t.createElement(_,{size:s.Small,svgIcon:F,color:u.black}):e==="success"?t.createElement(_,{size:s.Small,svgIcon:V,color:u.kiwi900}):null,Q=(e,r)=>{const c=J(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},U=e=>{var N,I;const[r,c]=t.useState(0),f=t.useRef(null),v=t.useRef(null),i=t.useRef(null),x=k(v),E=t.useRef(null),S=k(E),m=i.current&&i.current.scrollHeight>i.current.clientHeight;function b(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 T(){document.body.style.overflow="hidden"}function L(){document.body.style.removeProperty("overflow")}const o=e.variant==="image",d=t.useRef(null),g=e.secondaryButtonText&&((N=e.secondaryButtonText)==null?void 0:N.length)>0||e.onSuccess,W=e.ariaLabelledBy?void 0:e.ariaLabel,C=e.ariaLabelledBy?e.ariaLabelledBy:e.ariaLabel?void 0:e.titleId;P(()=>{var w;const l=d.current;return(w=f.current)==null||w.focus(),T(),!e.disableCloseEvents&&l&&(l.addEventListener("keydown",b),l.addEventListener("click",y)),()=>{L(),!e.disableCloseEvents&&l&&(l.removeEventListener("keydown",b),l.removeEventListener("click",y))}},[e.disableCloseEvents]);const z=n(e.className,a.modal,a[`modal--${e.variant}`],a[`modal--${e.size}`],m&&!g&&a["modal--no-actions"]),R=n({[a["modal__title--error"]]:e.variant==="error",[a["modal__title--success"]]:e.variant==="success"}),h=t.createElement("div",{"data-testid":"dialog-container"},t.createElement("div",{ref:d,className:a["modal-overlay"],"data-testid":e.testId,"data-analyticsid":A.Modal,style:{zIndex:e.zIndex}},t.createElement("div",{className:a.align,ref:K()},t.createElement("div",{className:z,role:"dialog","aria-label":W,"aria-labelledby":C},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"]]:!x&&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(M,{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},Q(e.variant,e.icon),t.createElement(O,{id:C,htmlMarkup:"h3",appearance:"title3",className:R},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:E}))),t.createElement("div",{className:n(a.modal__shadow,a["modal__shadow--bottom"],{[a["modal__shadow--show"]]:!S&&m})}),g&&t.createElement("div",{className:n(a["modal__call-to-action"],a[`modal__call-to-action--${e.size}`])},e.onSuccess&&t.createElement(B,{onClick:e.onSuccess},e.primaryButtonText),e.secondaryButtonText&&((I=e.secondaryButtonText)==null?void 0:I.length)>0&&t.createElement(B,{variant:"borderless",onClick:e.onClose},e.secondaryButtonText))))));if(e.printable){const l="print-modal";return t.createElement(Z,{className:l,testId:"print-modal"},t.createElement("style",{media:"print"},`body > *:not(.${l}) {display: none;}`),h)}return h};U.defaultProps=G;export{U as M,j as a,q 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 FocusTrap 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 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} ref={FocusTrap()}>\n          <div className={dialogClasses} role=\"dialog\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>\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","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","FocusTrap","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":"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"}

package/__mocks__/MutationObserver.d.ts

@@ -0,0 +1,6 @@
+declare class MutationObserver {
+    observe(): void;
+    disconnect(): void;
+}
+export default MutationObserver;
+//# sourceMappingURL=MutationObserver.d.ts.map

package/__mocks__/MutationObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MutationObserver.d.ts","sourceRoot":"","sources":["../../src/__mocks__/MutationObserver.ts"],"names":[],"mappings":"AAAA,cAAM,gBAAgB;IACpB,OAAO,IAAI,IAAI;IAGf,UAAU,IAAI,IAAI;CAGnB;AAMD,eAAe,gBAAgB,CAAC"}

package/__mocks__/MutationObserver.js

@@ -0,0 +1,2 @@
+class e{observe(){}disconnect(){}}Object.defineProperty(window,"MutationObserver",{value:e});export{e as default};
+//# sourceMappingURL=MutationObserver.js.map

package/__mocks__/MutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MutationObserver.js","sources":["../../src/__mocks__/MutationObserver.ts"],"sourcesContent":["class MutationObserver {\n  observe(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'MutationObserver', {\n  value: MutationObserver,\n});\n\nexport default MutationObserver;\n"],"names":["MutationObserver"],"mappings":"AAAA,MAAMA,CAAiB,CACrB,SAAgB,CAEhB,CACA,YAAmB,CAEnB,CACF,CAEA,OAAO,eAAe,OAAQ,mBAAoB,CAChD,MAAOA,CACT,CAAC"}

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import t,{useState as i}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusToggle.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";const P=t.forwardRef(function(o,d){const[m,r]=i(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),m&&t.createElement(e,{...o,onClose:()=>r(!1)}))});export{P as default};
+import t,{useState as i}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";const P=t.forwardRef(function(o,d){const[m,r]=i(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),m&&t.createElement(e,{...o,onClose:()=>r(!1)}))});export{P as default};
 //# sourceMappingURL=index.js.map

package/components/ButtonWithModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal"],"mappings":"wmCAYA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAEhD,OACGL,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,MAAA,EACrBD,EAAA,cAAAM,EAAA,CAAO,QAAS,IAAMF,EAAa,EAAI,CAAA,EAAIH,EAAM,UAAW,EAC5DE,GAAcH,EAAA,cAAAO,EAAA,CAAO,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAG,CAAA,CACtE,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\nimport Button from '../Button';\nimport Modal, { ModalProps } from '../Modal/Modal';\n\ninterface ModalWithButtonProps extends ModalProps {\n  /** Text of the button */\n  buttonText: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst ModalWithButton = React.forwardRef(function ModalForwardedRef(props: ModalWithButtonProps, ref: React.ForwardedRef<HTMLElement>) {\n  const [showModal, setShowModal] = useState(false);\n\n  return (\n    <div data-testid={props.testId}>\n      <Button onClick={() => setShowModal(true)}>{props.buttonText}</Button>\n      {showModal && <Modal {...props} onClose={() => setShowModal(false)} />}\n    </div>\n  );\n});\n\nexport default ModalWithButton;\n"],"names":["ModalWithButton","React","props","ref","showModal","setShowModal","useState","Button","Modal"],"mappings":"8mCAYA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAEhD,OACGL,EAAA,cAAA,MAAA,CAAI,cAAaC,EAAM,MAAA,EACrBD,EAAA,cAAAM,EAAA,CAAO,QAAS,IAAMF,EAAa,EAAI,CAAA,EAAIH,EAAM,UAAW,EAC5DE,GAAcH,EAAA,cAAAO,EAAA,CAAO,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAG,CAAA,CACtE,CAEJ,CAAC"}

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"}}}}