@helsenorge/designsystem-react 2.5.0 → 2.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [2.5.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.4.0&targetVersion=GTv2.5.0) (2022-11-13)
+
+
+### Features
+
+*  duolist custom breddeforhold, bold per gruppe og mulighet for reactnode som dt og dd ([8c1db38](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/8c1db382e7006faf478bd2d93eb72a28fadf4e43)), closes [#285932](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285932)
+*  nytt komponent Select ([70b540f](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/70b540fc0791cf8e94f974cbf4b4d63990d435ae)), closes [#260924](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/260924)
+
+
+### Bug Fixes
+
+*  oppdater posisjon i helpbubble med én gang den vises ([ad297fe](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/ad297feeac1e0aa457121c4b6b369c1d57b53087)), closes [#285111](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285111)
+*  uu-forbedringer i tooltip og helpbubble ([be42f12](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/be42f12169779530f92d75dc7d64a06c41b38866)), closes [#285111](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285111)
+
 ## [2.4.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.3.0&targetVersion=GTv2.4.0) (2022-11-05)
 
 

package/Checkbox.js

@@ -1,2 +1,2 @@
-import c,{useState as W,useEffect as q}from"react";import r from"classnames";import{a as A}from"./uuid.js";import B from"./components/Icons/Check.js";import{Icon as D}from"./components/Icons/Icon.js";import{FormMode as p,FormVariant as L,AnalyticsId as M,IconSize as T}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import e from"./components/Checkbox/styles.module.scss";const P=c.forwardRef((_,C)=>{const{className:y,checked:n=!1,disabled:o,label:d,inputId:b=A(),mode:i,name:w=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:g,required:E}=_,[l,f]=W(n),m=x||i===p.oninvalid,h=i===p.ondark,u=i===p.onblueberry,k=v===L.bigform,I=r(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),S=r(e["checkbox-label"],{[e["checkbox-label--disabled"]]:o,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:u,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),F=r(e.checkbox,y),z=r(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:l,[e["checkbox__icon-wrapper--disabled"]]:o,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:u,[e["checkbox__icon-wrapper--invalid"]]:m}),R=r(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let s=t("blueberry",500);return o&&(s=t("neutral",400)),h&&(s=t("blueberry",200)),m&&(s=t("cherry",500)),q(()=>{f(n)},[n]),c.createElement("div",{"data-testid":g,"data-analyticsid":M.Checkbox,className:I},a&&c.createElement("p",{className:R},a),c.createElement("label",{htmlFor:b,className:S},c.createElement("input",{id:b,name:w,className:F,type:"checkbox",checked:l,disabled:o,onChange:()=>{f(!l)},value:N,ref:C,"aria-invalid":x,required:E}),c.createElement("span",{className:z},l&&c.createElement(D,{color:s,className:e.checkbox__icon,svgIcon:B,size:T.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))});export{P as C};
+import c,{useState as D,useEffect as H}from"react";import o from"classnames";import{a as L}from"./uuid.js";import M from"./components/Icons/Check.js";import{Icon as T}from"./components/Icons/Icon.js";import{FormMode as p,FormVariant as V,AnalyticsId as X,IconSize as j}from"./constants.js";import{getColor as t}from"./theme/currys/color.js";import e from"./components/Checkbox/styles.module.scss";const Z=c.forwardRef((C,y)=>{const{className:w,checked:n=!1,disabled:r,label:d,inputId:b=L(),mode:i,name:g=b,variant:v,errorText:a,error:x=!!a,value:N=d,testId:E,required:I,onChange:f,...S}=C,[l,u]=D(n),m=x||i===p.oninvalid,h=i===p.ondark,_=i===p.onblueberry,k=v===V.bigform,F=o(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:a,[e["checkbox-wrapper--bigform"]]:k}),z=o(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:h,[e["checkbox-label--on-blueberry"]]:_,[e["checkbox-label--invalid"]]:m,[e["checkbox-label--bigform"]]:k}),R=o(e.checkbox,w),W=o(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--checked"]]:l,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper--on-dark"]]:h,[e["checkbox__icon-wrapper--on-blueberry"]]:_,[e["checkbox__icon-wrapper--invalid"]]:m}),q=o(e["checkbox-errors"],{[e["checkbox-errors--bigform"]]:k});let s=t("blueberry",500);r&&(s=t("neutral",400)),h&&(s=t("blueberry",200)),m&&(s=t("cherry",500)),H(()=>{u(n)},[n]);const A=B=>{f&&f(B),u(!l)};return c.createElement("div",{"data-testid":E,"data-analyticsid":X.Checkbox,className:F},a&&c.createElement("p",{className:q},a),c.createElement("label",{htmlFor:b,className:z},c.createElement("input",{id:b,name:g,className:R,type:"checkbox",checked:l,disabled:r,value:N,ref:y,"aria-invalid":x,required:I,onChange:A,...S}),c.createElement("span",{className:W},l&&c.createElement(T,{color:s,className:e.checkbox__icon,svgIcon:M,size:j.XSmall})),c.createElement("span",{className:e["checkbox-label__text"]},d)))});export{Z as C};
 //# sourceMappingURL=Checkbox.js.map

package/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport Check from '../Icons/Check';\nimport Icon from '../Icons';\nimport { getColor } from '../../theme/currys/color';\n\nimport checkboxStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          onChange={(): void => {\n            setIsChecked(!isChecked);\n          }}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          required={required}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","AnalyticsId","Icon","Check","IconSize"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,CACE,EAAAf,EACE,CAACgB,EAAWC,CAAY,EAAIC,EAASf,CAAO,EAC5CgB,EAAUP,GAASJ,IAASY,EAAS,UACrCC,EAASb,IAASY,EAAS,OAC3BE,EAAcd,IAASY,EAAS,YAChCG,EAAUb,IAAYc,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,oBAAqB,CAC5E,CAACA,EAAe,iCAAkChB,EAClD,CAACgB,EAAe,8BAA+BJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,kBAAmB,CACxE,CAACA,EAAe,6BAA8BvB,EAC9C,CAACuB,EAAe,4BAA6BN,EAC7C,CAACM,EAAe,iCAAkCL,EAClD,CAACK,EAAe,4BAA6BR,EAC7C,CAACQ,EAAe,4BAA6BJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAUzB,CAAS,EAC/D4B,EAA6BJ,EAAWC,EAAe,0BAA2B,CACtF,CAACA,EAAe,oCAAqCX,EACrD,CAACW,EAAe,qCAAsCvB,EACtD,CAACuB,EAAe,oCAAqCN,EACrD,CAACM,EAAe,yCAA0CL,EAC1D,CAACK,EAAe,oCAAqCR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,mBAAoB,CAChE,CAACA,EAAe,6BAA8BJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC,OAAA7B,IAAsB4B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAad,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAGTJ,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkBqB,EAAY,SAAU,UAAWV,CAAA,EAC1Ed,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAWgC,CAAc,EAAApB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWsB,CAAA,EACjC7B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWoB,EACX,KAAK,WACL,QAASb,EACT,SAAAZ,EACA,SAAU,IAAY,CACpBa,EAAa,CAACD,CAAS,CACzB,EACA,MAAAH,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,CAAA,CACF,EACChB,EAAA,cAAA,OAAA,CAAK,UAAW+B,CAAA,EACdd,GAAcjB,EAAA,cAAAqC,EAAA,CAAK,MAAOJ,EAAW,UAAWL,EAAe,eAAmB,QAASU,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACCvC,EAAA,cAAA,OAAA,CAAK,UAAW4B,EAAe,uBAAA,EAA0BtB,CAAM,CAClE,CACF,CAEJ,CAAC"}
+{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport Check from '../Icons/Check';\nimport Icon from '../Icons';\nimport { getColor } from '../../theme/currys/color';\n\nimport checkboxStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\n\nexport interface CheckboxProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the checkbox */\n  label: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox-label--invalid']]: invalid,\n    [checkboxStyles['checkbox-label--bigform']]: bigform,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--checked']]: isChecked,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: invalid,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors'], {\n    [checkboxStyles['checkbox-errors--bigform']]: bigform,\n  });\n\n  let iconColor = getColor('blueberry', 500);\n  if (disabled) iconColor = getColor('neutral', 400);\n  if (onDark) iconColor = getColor('blueberry', 200);\n  if (invalid) iconColor = getColor('cherry', 500);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={checkboxLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n        <span className={checkboxStyles['checkbox-label__text']}>{label}</span>\n      </label>\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","onChange","rest","isChecked","setIsChecked","useState","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","AnalyticsId","Icon","Check","IconSize"],"mappings":"6YAgCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,EACA,SAAAC,KACGC,CACD,EAAAjB,EACE,CAACkB,EAAWC,CAAY,EAAIC,EAASjB,CAAO,EAC5CkB,EAAUT,GAASJ,IAASc,EAAS,UACrCC,EAASf,IAASc,EAAS,OAC3BE,EAAchB,IAASc,EAAS,YAChCG,EAAUf,IAAYgB,EAAY,QAElCC,EAAyBC,EAAWC,EAAe,oBAAqB,CAC5E,CAACA,EAAe,iCAAkClB,EAClD,CAACkB,EAAe,8BAA+BJ,CAAA,CAChD,EACKK,EAAuBF,EAAWC,EAAe,kBAAmB,CACxE,CAACA,EAAe,6BAA8BzB,EAC9C,CAACyB,EAAe,4BAA6BN,EAC7C,CAACM,EAAe,iCAAkCL,EAClD,CAACK,EAAe,4BAA6BR,EAC7C,CAACQ,EAAe,4BAA6BJ,CAAA,CAC9C,EACKM,EAAkBH,EAAWC,EAAe,SAAU3B,CAAS,EAC/D8B,EAA6BJ,EAAWC,EAAe,0BAA2B,CACtF,CAACA,EAAe,oCAAqCX,EACrD,CAACW,EAAe,qCAAsCzB,EACtD,CAACyB,EAAe,oCAAqCN,EACrD,CAACM,EAAe,yCAA0CL,EAC1D,CAACK,EAAe,oCAAqCR,CAAA,CACtD,EACKY,EAAcL,EAAWC,EAAe,mBAAoB,CAChE,CAACA,EAAe,6BAA8BJ,CAAA,CAC/C,EAEG,IAAAS,EAAYC,EAAS,YAAa,GAAG,EACrC/B,IAAsB8B,EAAAC,EAAS,UAAW,GAAG,GAC7CZ,IAAoBW,EAAAC,EAAS,YAAa,GAAG,GAC7Cd,IAAqBa,EAAAC,EAAS,SAAU,GAAG,GAE/CC,EAAU,IAAM,CACdjB,EAAahB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAkC,EAAmBC,GAAiD,CACpEtB,GACFA,EAASsB,CAAC,EAGZnB,EAAa,CAACD,CAAS,CAAA,EAGzB,OACGnB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkByB,EAAY,SAAU,UAAWZ,CAAA,EAC1EhB,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAWkC,CAAc,EAAAtB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWwB,CAAA,EACjC/B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWsB,EACX,KAAK,WACL,QAASb,EACT,SAAAd,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,SAAAG,EACA,SAAUsB,EACT,GAAGpB,CAAA,CACN,EACClB,EAAA,cAAA,OAAA,CAAK,UAAWiC,CAAA,EACdd,GAAcnB,EAAA,cAAAyC,EAAA,CAAK,MAAON,EAAW,UAAWL,EAAe,eAAmB,QAASY,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,EACC3C,EAAA,cAAA,OAAA,CAAK,UAAW8B,EAAe,uBAAA,EAA0BxB,CAAM,CAClE,CACF,CAEJ,CAAC"}

package/FormGroup.js

@@ -1,2 +1,2 @@
-import e from"react";import i from"classnames";import o from"./components/FormGroup/styles.module.scss";import{C as g}from"./Checkbox.js";import{FormMode as E,FormVariant as y,AnalyticsId as x}from"./constants.js";import{R as _}from"./RadioButton.js";import{I as v}from"./Input.js";import{T as G}from"./Title.js";import{F as I}from"./FormLayout.js";import{E as O}from"./ErrorWrapper.js";import{S as k}from"./Select.js";const j=e.forwardRef((t,C)=>{const{className:N,mode:l=E.onwhite,variant:s=y.normal,error:m,name:a,htmlMarkup:u="fieldset"}=t,f=l===E.ondark,d=s===y.bigform,w=i(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:f,[o["form-group-wrapper--invalid"]]:m},N),F=i(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:f&&!m,[o["form-group-wrapper__title--bigform"]]:d}),b=i(o["form-group"]),c=i(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:f&&!m,[o["field-set__legend--bigform"]]:d}),p=r=>{if(r.type===I)return e.cloneElement(r,{variant:s,mapHelper:p});if(r.type===g){let n=r.type===g;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===_){let n=r.type===_;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===v){let n=r.type===v;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,variant:s,error:!!m})}else if(r.type===k){let n=r.type===k;return e.cloneElement(r,{name:a!=null?a:n.valueOf.name,mode:l,error:!!m})}return r};return e.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:w,ref:C,tabIndex:-1},t.title&&e.createElement(G,{className:F,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),e.createElement(O,{errorText:m},e.createElement("div",{className:b},u==="div"&&e.createElement("div",{id:t.title,className:o["field-set"]},t.legend&&e.createElement("h5",{className:c},t.legend),e.Children.map(t.children,p)),u==="fieldset"&&e.createElement("fieldset",{name:t.title,className:o["field-set"]},t.legend&&e.createElement("legend",{className:c},t.legend),e.Children.map(t.children,p)))))});export{j as F};
+import r from"react";import i from"classnames";import a from"./components/FormGroup/styles.module.scss";import{C as b}from"./Checkbox.js";import{FormMode as g,FormVariant as E,AnalyticsId as v}from"./constants.js";import{R as y}from"./RadioButton.js";import{I as G}from"./Input.js";import{T as I}from"./Title.js";import{F as x}from"./FormLayout.js";import{E as R}from"./ErrorWrapper.js";import{S as T}from"./Select.js";const z=r.forwardRef((t,_)=>{const{className:C,mode:n=g.onwhite,variant:l=E.normal,error:m,name:o,htmlMarkup:d="fieldset"}=t,f=n===g.ondark,c=l===E.bigform,N=i(a["form-group-wrapper"],{[a["form-group-wrapper--on-dark"]]:f,[a["form-group-wrapper--invalid"]]:m},C),k=i(a["form-group-wrapper__title"],{[a["form-group-wrapper__title--on-dark"]]:f&&!m,[a["form-group-wrapper__title--bigform"]]:c}),w=i(a["form-group"]),u=i(a["field-set__legend"],{[a["field-set__legend--on-dark"]]:f&&!m,[a["field-set__legend--bigform"]]:c}),s=(e,F)=>r.isValidElement(e)&&e.type===F,p=e=>s(e,x)?r.cloneElement(e,{variant:l,mapHelper:p}):s(e,b)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:l,error:!!m}):s(e,y)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:l,error:!!m}):s(e,G)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,variant:l,error:!!m}):s(e,T)?r.cloneElement(e,{name:o!=null?o:e.props.name,mode:n,error:!!m}):e;return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":v.FormGroup,className:N,ref:_,tabIndex:-1},t.title&&r.createElement(I,{className:k,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:m?1:2}},t.title),r.createElement(R,{errorText:m},r.createElement("div",{className:w},d==="div"&&r.createElement("div",{id:t.title,className:a["field-set"]},t.legend&&r.createElement("h5",{className:u},t.legend),r.Children.map(t.children,p)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:a["field-set"]},t.legend&&r.createElement("legend",{className:u},t.legend),r.Children.map(t.children,p)))))});export{z as F};
 //# sourceMappingURL=FormGroup.js.map

package/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if ((child as React.ReactElement<FormLayoutProps>).type === FormLayout) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if ((child as React.ReactElement<CheckboxProps>).type === Checkbox) {\n      let checkbox = (child as React.ReactElement<CheckboxProps>).type === Checkbox;\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? checkbox.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<RadioButtonProps>).type === RadioButton) {\n      let radioButton = (child as React.ReactElement<RadioButtonProps>).type === RadioButton;\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? radioButton.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<InputProps>).type === Input) {\n      let input = (child as React.ReactElement<InputProps>).type === Input;\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? input.valueOf.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if ((child as React.ReactElement<SelectProps>).type === Select) {\n      let select = (child as React.ReactElement<SelectProps>).type === Select;\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? select.valueOf.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper errorText={error}>\n        <div className={formGroupClasses}>\n          {htmlMarkup === 'div' && (\n            <div id={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </div>\n          )}\n          {htmlMarkup === 'fieldset' && (\n            <fieldset name={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </fieldset>\n          )}\n        </div>\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","mapFormComponent","child","FormLayout","Checkbox","checkbox","RadioButton","radioButton","Input","input","Select","select","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}
+{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport formGroupStyles from './styles.module.scss';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Input, { InputProps } from '../Input/Input';\nimport Title from '../Title';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Select, { SelectProps } from '../Select';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n  /** title for the the fieldset */\n  title?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Items in the FormGroup component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the formgroup */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the formgroup */\n  variant?: keyof typeof FormVariant;\n  /** Error message */\n  error?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Unique identifyer for the child input tags */\n  name?: string;\n  /** Sets div instead of fieldset tag */\n  htmlMarkup?: FormGroupTags;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { className, mode = FormMode.onwhite, variant = FormVariant.normal, error, name, htmlMarkup = 'fieldset' } = props;\n  const onDark = mode === FormMode.ondark;\n  const bigform = variant === FormVariant.bigform;\n  const formGroupWrapperClasses = classNames(\n    formGroupStyles['form-group-wrapper'],\n    {\n      [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n      [formGroupStyles['form-group-wrapper--invalid']]: error,\n    },\n    className\n  );\n  const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n    [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n    [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n  });\n  const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n  const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n    [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n    [formGroupStyles['field-set__legend--bigform']]: bigform,\n  });\n\n  const isComponent = <T,>(element: {} | null | undefined, type: React.ForwardRefExoticComponent<T>): element is React.ReactElement<T> =>\n    React.isValidElement<T>(element) && (element as React.ReactElement).type === type;\n\n  const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<FormGroupProps>(child, FormLayout)) {\n      return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n        variant,\n        mapHelper: mapFormComponent,\n      });\n    } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n      return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n      return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<InputProps>(child, Input)) {\n      return React.cloneElement(child as React.ReactElement<InputProps>, {\n        name: name ?? child.props.name,\n        mode,\n        variant,\n        error: !!error,\n      });\n    } else if (isComponent<SelectProps>(child, Select)) {\n      return React.cloneElement(child as React.ReactElement<SelectProps>, {\n        name: name ?? child.props.name,\n        mode,\n        error: !!error,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n      {props.title && (\n        <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n          {props.title}\n        </Title>\n      )}\n      <ErrorWrapper errorText={error}>\n        <div className={formGroupClasses}>\n          {htmlMarkup === 'div' && (\n            <div id={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </div>\n          )}\n          {htmlMarkup === 'fieldset' && (\n            <fieldset name={props.title} className={formGroupStyles['field-set']}>\n              {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n              {React.Children.map(props.children, mapFormComponent)}\n            </fieldset>\n          )}\n        </div>\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","isComponent","element","type","mapFormComponent","child","FormLayout","Checkbox","RadioButton","Input","Select","AnalyticsId","Title","ErrorWrapper"],"mappings":"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"}

package/HelpBubble.js

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

package/HelpBubble.js.map

@@ -1 +1 @@
-{"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, { useEffect, 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\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\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. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\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 role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\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    role,\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  useEffect(() => {\n    if (showBubble) {\n      updateControllerSize();\n    }\n  }, [showBubble]);\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    { [styles['helpbubble--visible']]: (!isTooltip && controllerisVisible) || (isTooltip && showBubble) },\n    className\n  );\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\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 && !isTooltip,\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    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\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  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\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={role}\n      >\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\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","role","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","React","AnchorLink","renderCloseButton","Close","AnalyticsId"],"mappings":"ydAOA,MAAMA,GAAkB,IAElBC,EAAmB,GAEnBC,EAA4B,GAE5BC,EAAiB,GAEjBC,GAA2B,EAE3BC,EAA6B,GAStBC,EAAsB,CACjCC,EACAC,EACAC,IAEIA,IAAYC,EAAkB,kBACzBD,EAELF,EAAe,IAAMC,EAAW,OAASN,EACpCQ,EAAkB,cAElBA,EAAkB,cASvBC,EAA6BJ,GAAoCA,EAAe,KAAOA,EAAe,MAAQ,EAO9GK,GAA8BL,GAClC,SAAS,gBAAgB,YAAcA,EAAe,MAAQA,EAAe,MAAQ,EAQjFM,EAAkB,CAACN,EAAyBC,IACXG,EAA0BJ,CAAc,EAEvCC,EAAW,MAAQ,EASrDM,GAAmB,CAACP,EAAyBC,IAC5BK,EAAgBN,EAAgBC,CAAU,EAEzCA,EAAW,MAS7BO,GAAuB,CAACR,EAAyBC,IAChCK,EAAgBN,EAAgBC,CAAU,EAEzCP,EASlBe,GAA0B,CAACT,EAAyBC,IAClCM,GAAiBP,EAAgBC,CAAU,EAE1C,SAAS,gBAAgB,YAAcP,EAS1DgB,GAAwB,CAACV,EAAyBC,IACjDQ,GAAwBT,EAAgBC,CAAU,EAGlDO,GAAqBR,EAAgBC,CAAU,EAI7C,WAHE,OAHA,QAeLU,EAAmB,CAACX,EAAyBC,IACjDD,EAAe,IAAML,EAA4BM,EAAW,OAQxDW,EAAoBZ,GAAoCA,EAAe,OAASL,EAMhFkB,GAAiB,IAAc,SAAS,gBAAgB,YAAcnB,EAAmB,EAMzFoB,GAAwB,IACrB,SAAS,gBAAgB,YAAcrB,GAAkBC,EAAmB,EAQ/EqB,EAAkBf,GAAoCA,EAAe,IAAML,EAA4BE,GAOvGmB,GAAkBhB,GAAoCI,EAA0BJ,CAAc,EAAIJ,EAAiB,EAOnHqB,GAAmBjB,GAAoCK,GAA2BL,CAAc,EAAIJ,EAAiB,EASrHsB,GAAoB,CAAClB,EAAyBC,EAAqBC,IAA4D,CAC7H,MAAAiB,EAAqBT,GAAsBV,EAAgBC,CAAU,EACrEmB,EAAmBrB,EAAoBC,EAAgBC,EAAYC,CAAO,EAEhF,OAAIiB,IAAuB,OACrBC,IAAqBjB,EAAkB,cAClC,YAEF,YAGLgB,IAAuB,QACrBC,IAAqBjB,EAAkB,cAClC,aAEF,aAGLiB,IAAqBjB,EAAkB,cAClC,gBAGF,eACT,EASakB,GAAiB,CAACrB,EAAyBC,EAAqBC,IAA2D,CACtI,MAAMoB,EAAiBJ,GAAkBlB,EAAgBC,EAAYC,CAAO,EACtEqB,EAAeT,GAAsB,EAAuB,OAAnBD,GAAmB,EAElE,OAAIS,IAAmB,YACd,CACL,KAAM5B,EACN,IAAKiB,EAAiBX,EAAgBC,CAAU,EAChD,MAAOsB,CAAA,EAGPD,IAAmB,YACd,CAAE,KAAM5B,EAAkB,IAAKkB,EAAiBZ,CAAc,EAAG,MAAOuB,GAE7ED,IAAmB,aACd,CAAE,MAAO5B,EAAkB,IAAKiB,EAAiBX,EAAgBC,CAAU,EAAG,MAAOsB,GAE1FD,IAAmB,aACd,CAAE,MAAO5B,EAAkB,IAAKkB,EAAiBZ,CAAc,EAAG,MAAOuB,GAG9ED,IAAmB,gBACd,CAAE,KAAMhB,EAAgBN,EAAgBC,CAAU,EAAG,IAAKW,EAAiBZ,CAAc,EAAG,MAAOuB,CAAY,EAGjH,CAAE,KAAMjB,EAAgBN,EAAgBC,CAAU,EAAG,IAAKU,EAAiBX,EAAgBC,CAAU,EAAG,MAAOsB,CAAY,CACpI,EASaC,GAAgB,CAC3BC,EACAzB,EACAoB,IACkB,CACZ,MAAAM,EAASV,GAAehB,CAAc,EACtC2B,EAAUV,GAAgBjB,CAAc,EACxC4B,EAAaH,EAAY,KAAkB3B,EAC3C+B,EAAcJ,EAAY,MAAmB3B,EAEnD,OAAI2B,EAAY,MACVL,IAAqBjB,EAAkB,cAClC,CACL,MAAOwB,EAAUE,EAAaF,EAAUE,EACxC,IAAKd,EAAef,CAAc,CAAA,EAI/B,CACL,MAAO2B,EAAUE,EAAaF,EAAUE,EACxC,IAAK7B,EAAe,MAAA,EAIpBoB,IAAqBjB,EAAkB,cAClC,CACL,KAAMuB,EAASE,EAAYF,EAASE,EACpC,IAAKb,EAAef,CAAc,CAAA,EAI/B,CACL,KAAM0B,EAASE,EAAYF,EAASE,EACpC,IAAK5B,EAAe,MAAA,CAExB,EC5QY,IAAAG,GAAAA,IACVA,EAAA,kBAAoB,oBACpBA,EAAA,cAAgB,gBAChBA,EAAA,cAAgB,gBAHNA,IAAAA,GAAA,CAAA,CAAA,EAuCZ,MAAM2B,GAAiDC,GAAA,CAC/C,KAAA,CACJ,aAAAC,EACA,SAAAC,EACA,cAAAC,EACA,UAAAC,EAAY,GACZ,QAAAjC,EAAU,oBACV,WAAAkC,EACA,cAAAC,EACA,SAAAC,EAAW,YACX,QAAAC,EACA,YAAAC,EACA,QAAAC,EACA,eAAAC,EACA,KAAAC,EACA,OAAAC,CACE,EAAAb,EAEEc,EAAYC,EAAuB,IAAI,EACvCC,EAAWD,EAAuB,IAAI,EACtC7C,EAAa+C,EAAQH,CAAS,EAC9B,CAAC7C,EAAgBiD,CAAiB,EAAIC,EAAkB,EACxDC,EAAsBC,EAAalB,EAAe,CAAC,EAEnDmB,EAAuB,IAAY,OACrBJ,GAAAK,EAAApB,EAAc,UAAd,YAAAoB,EAAuB,uBAAuB,CAAA,EAGlEC,EAAYF,EAAsB,GAAG,EACrCG,EAAeH,EAAsB,CAAC,SAAU,QAAQ,EAAG,EAAE,EAE7DI,EAAU,IAAM,CACVrB,GACmBiB,GACvB,EACC,CAACjB,CAAU,CAAC,EAEf,MAAMsB,EAAYf,IAAS,UAEvB,GAAA,CAACP,GAAc,CAACsB,EACX,OAAA,KAGT,MAAMC,EAAoBC,EACxBC,EAAO,WACP,CAAE,CAACA,EAAO,wBAA0B,CAACH,GAAaP,GAAyBO,GAAatB,CAAY,EACpGD,CAAA,EAEIf,EAAmBpB,GAAkBC,GAAcF,EAAoBC,EAAgBC,EAAYC,CAAO,EAC1G4D,EAAeF,EAAWC,EAAO,kBAAmB,CACxD,CAACA,EAAO,4BAA6BzC,IAAqB,gBAC1D,CAACyC,EAAO,6BAA8BzC,IAAqB,eAAA,CAC5D,EACK2C,EAAiBH,EAAWC,EAAO,oBAAqB,CAC5D,CAACA,EAAO,+BAAgC,CAACxB,GAAiB,CAACqB,CAAA,CAC5D,EAEKjC,EAAczB,GAAkBC,GAAcoB,GAAerB,EAAgBC,EAAYC,CAAO,EAChG8D,EAAavC,GAAezB,GAAkBoB,GAAoBI,GAAcC,EAAazB,EAAgBoB,CAAgB,EAE7H6C,EAAa,IAA+B,CAEhD,GAAI,CAAAP,EAGJ,IAAIlB,GAAeF,EACjB,OACG4B,EAAA,cAAA,SAAA,CAAO,UAAWL,EAAO,iBAAkB,QAASrB,EAAa,KAAK,QAAA,EACpEF,CACH,EAEJ,GAAWC,GAAWD,EACpB,OAAQ4B,EAAA,cAAAC,GAAA,CAAW,KAAM5B,CAAA,EAAUD,CAAS,EAC9C,EAGI8B,EAAoB,IAA+B,CACvD,GAAI,EAAA/B,GAAiBqB,GAGrB,OACGQ,EAAA,cAAA,MAAA,CAAI,UAAWL,EAAO,iBAAA,EACpBK,EAAA,cAAAG,GAAA,CAAM,MAAK,GAAC,QAAS5B,EAAS,UAAWC,CAAgB,CAAA,CAC5D,CAAA,EAIJ,uCAEKwB,EAAA,cAAA,MAAA,CACC,GAAIlC,EACJ,IAAKa,EACL,UAAWc,EACX,MAAOlC,EACP,cAAamB,EACb,mBAAkB0B,EAAY,WAC9B,KAAA3B,CAEC,EAAAyB,IACAF,EAAA,cAAA,MAAA,CAAI,UAAWH,CAAA,EACb9B,EACAgC,EACH,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CAAI,IAAKnB,EAAU,UAAWe,EAAc,MAAOE,CAAY,CAAA,CAClE,CAEJ"}
+{"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, { useEffect, 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 { mergeRefs } from '../../utils/refs';\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\ntype HelpBubbleRole = 'tooltip';\n\nexport interface HelpBubbleProps {\n  /** Id of the HelpBubble */\n  helpBubbleId?: string;\n  /** Content shown inside HelpBubble. Note that if role=\"tooltip\", you must not include interactive/focusable elements. */\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. Close button is never rendered if role=\"tooltip\". */\n  noCloseButton?: boolean;\n  /** Visible text on the link. Link is never rendered if role=\"tooltip\". */\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 role of the HelpBubble element. If set to \"tooltip\",  */\n  role?: HelpBubbleRole;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst HelpBubble = React.forwardRef<HTMLDivElement, HelpBubbleProps>((props, ref) => {\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    role,\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  useEffect(() => {\n    if (showBubble) {\n      updateControllerSize();\n    }\n  }, [showBubble]);\n\n  const isTooltip = role === 'tooltip';\n\n  if (!showBubble && !isTooltip) {\n    return null;\n  }\n\n  const helpBubbleClasses = classNames(\n    styles.helpbubble,\n    { [styles['helpbubble--visible']]: (!isTooltip && controllerisVisible) || (isTooltip && showBubble) },\n    className\n  );\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const arrowClasses = classNames(styles.helpbubble__arrow, {\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 && !isTooltip,\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    // Det er ikke tillatt med interaktive/fokuserbare elementer i role=\"tooltip\"\n    if (isTooltip) {\n      return;\n    }\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  const renderCloseButton = (): JSX.Element | undefined => {\n    if (noCloseButton || isTooltip) {\n      return;\n    }\n    return (\n      <div className={styles.helpbubble__close}>\n        <Close small onClick={onClose} ariaLabel={closeAriaLabel} />\n      </div>\n    );\n  };\n\n  return (\n    <>\n      <div\n        id={helpBubbleId}\n        ref={mergeRefs([ref, bubbleRef])}\n        className={helpBubbleClasses}\n        style={bubbleStyle}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.HelpBubble}\n        role={role}\n      >\n        {renderCloseButton()}\n        <div className={contentClasses}>\n          {children}\n          {renderLink()}\n        </div>\n      </div>\n      <div ref={arrowRef} className={arrowClasses} style={arrowStyle} />\n    </>\n  );\n});\n\nHelpBubble.displayName = 'HelpBubble';\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","React","props","ref","helpBubbleId","children","controllerRef","className","showBubble","noCloseButton","linkText","linkUrl","onLinkClick","onClose","closeAriaLabel","role","testId","bubbleRef","useRef","arrowRef","useSize","setControllerSize","useState","controllerisVisible","useIsVisible","updateControllerSize","_a","useInterval","useLayoutEvent","useEffect","isTooltip","helpBubbleClasses","classNames","styles","arrowClasses","contentClasses","arrowStyle","renderLink","AnchorLink","renderCloseButton","Close","mergeRefs","AnalyticsId"],"mappings":"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"}

package/Input.js

@@ -1,2 +1,2 @@
-import t,{useRef as j}from"react";import c from"classnames";import{FormMode as s,FormVariant as J,IconSize as g,AnalyticsId as K,AVERAGE_CHARACTER_WIDTH_PX as Q}from"./constants.js";import{a as U}from"./uuid.js";import{Icon as Y}from"./components/Icons/Icon.js";import{getColor as R}from"./theme/currys/color.js";import{useBreakpoint as Z,Breakpoint as T}from"./hooks/useBreakpoint.js";import{E as ee}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var re=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r))(re||{});const te=(r,o,d)=>{const m=o?"1.5rem":"2rem",u=o?`${d}px`:"0px",l="4px";return`calc(${r*Q}px + ${m} + ${u} + ${l})`},ue=t.forwardRef((r,o)=>{const{defaultValue:d,placeholder:m,type:u="text",inputId:l=U(),name:N,transparent:A=!1,icon:n,iconRight:b,mode:i,variant:I,label:h,error:$,errorText:_,testId:F,disabled:a,readOnly:S,autoComplete:y,afterLabelChildren:C,belowLabelChildren:E,width:v,required:z}=r,B=Z(),p=j(null),x=i===s.ondark,V=i===s.onblueberry,f=i===s.oninvalid||_||$,w=I===J.bigform,D=A&&i!==s.ondark&&!f,H=c(e["input-wrapper"]),L=c(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:x,[e["input-wrapper__label-wrapper--disabled"]]:a}),M=c(e["content-wrapper"],{[e["content-wrapper--transparent"]]:D,[e["content-wrapper--on-blueberry"]]:V,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:f,[e["content-wrapper--bigform"]]:w,[e["content-wrapper--disabled"]]:a,[e["content-wrapper--with-icon"]]:n}),X=c(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:w,[e["content-wrapper__input--disabled"]]:a}),q=a?R("neutral",500):R("black"),k=B===T.xs||!w?g.XSmall:g.Small,W=()=>n!==void 0?t.createElement(Y,{color:q,size:k,svgIcon:n}):null,G=()=>{if(p&&p.current&&n){const P=b?0:1;p.current.children[P].focus()}},O=v?te(v,!!n,k):void 0;return t.createElement(ee,{errorText:_},t.createElement("div",{"data-testid":F,"data-analyticsid":K.Input,className:H},h&&t.createElement("div",{className:L},t.createElement("label",{htmlFor:l},h),C&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},C)),E&&t.createElement("div",null,E),t.createElement("div",{onClick:G,ref:p,className:M,style:{maxWidth:O}},!b&&W(),t.createElement("input",{name:N,type:u,defaultValue:d,id:l,className:X,ref:o,"aria-invalid":!!f,disabled:a,placeholder:m,readOnly:S,autoComplete:y||"off",required:z}),b&&W())))});export{ue as I,re as a};
+import t,{useRef as J}from"react";import c from"classnames";import{FormMode as s,FormVariant as K,IconSize as g,AnalyticsId as Q,AVERAGE_CHARACTER_WIDTH_PX as U}from"./constants.js";import{a as Y}from"./uuid.js";import{Icon as Z}from"./components/Icons/Icon.js";import{getColor as R}from"./theme/currys/color.js";import{useBreakpoint as T,Breakpoint as ee}from"./hooks/useBreakpoint.js";import{E as re}from"./ErrorWrapper.js";import e from"./components/Input/styles.module.scss";var te=(r=>(r.text="text",r.number="number",r.email="email",r.password="password",r.search="search",r.tel="tel",r.url="url",r))(te||{});const ne=(r,o,d)=>{const m=o?"1.5rem":"2rem",u=o?`${d}px`:"0px",l="4px";return`calc(${r*U}px + ${m} + ${u} + ${l})`},be=t.forwardRef((r,o)=>{const{defaultValue:d,placeholder:m,type:u="text",inputId:l=Y(),name:N,transparent:A=!1,icon:n,iconRight:b,mode:i,variant:I,label:h,error:$,errorText:_,testId:F,disabled:a,readOnly:S,autoComplete:y,afterLabelChildren:C,belowLabelChildren:E,width:v,required:z,...B}=r,V=T(),p=J(null),x=i===s.ondark,D=i===s.onblueberry,f=i===s.oninvalid||_||$,w=I===K.bigform,H=A&&i!==s.ondark&&!f,L=c(e["input-wrapper"]),M=c(e["input-wrapper__label-wrapper"],{[e["input-wrapper__label-wrapper--on-dark"]]:x,[e["input-wrapper__label-wrapper--disabled"]]:a}),X=c(e["content-wrapper"],{[e["content-wrapper--transparent"]]:H,[e["content-wrapper--on-blueberry"]]:D,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:f,[e["content-wrapper--bigform"]]:w,[e["content-wrapper--disabled"]]:a,[e["content-wrapper--with-icon"]]:n}),q=c(e["content-wrapper__input"],{[e["content-wrapper__input--bigform"]]:w,[e["content-wrapper__input--disabled"]]:a}),G=a?R("neutral",500):R("black"),k=V===ee.xs||!w?g.XSmall:g.Small,W=()=>n!==void 0?t.createElement(Z,{color:G,size:k,svgIcon:n}):null,O=()=>{if(p&&p.current&&n){const j=b?0:1;p.current.children[j].focus()}},P=v?ne(v,!!n,k):void 0;return t.createElement(re,{errorText:_},t.createElement("div",{"data-testid":F,"data-analyticsid":Q.Input,className:L},h&&t.createElement("div",{className:M},t.createElement("label",{htmlFor:l},h),C&&t.createElement("div",{className:e["input-wrapper__after-label-children"]},C)),E&&t.createElement("div",null,E),t.createElement("div",{onClick:O,ref:p,className:X,style:{maxWidth:P}},!b&&W(),t.createElement("input",{name:N,type:u,defaultValue:d,id:l,className:q,ref:o,"aria-invalid":!!f,disabled:a,placeholder:m,readOnly:S,autoComplete:y||"off",required:z,...B}),b&&W())))});export{be as I,te as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper']);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={inputId}>{label}</label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n          />\n          {iconRight && renderIcon()}\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { getColor } from '../../theme/currys';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\n\nimport ErrorWrapper from '../ErrorWrapper';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'disabled' | 'readOnly' | 'autoComplete' | 'name' | 'placeholder' | 'defaultValue' | 'required'\n  > {\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: string;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    inputId = uuid(),\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    mode,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterLabelChildren,\n    belowLabelChildren,\n    width,\n    required,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const contentWrapperRef = useRef<HTMLDivElement>(null);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onError = mode === FormMode.oninvalid || errorText || error;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper']);\n\n  const labelWrapperClass = cn(styles['input-wrapper__label-wrapper'], {\n    [styles['input-wrapper__label-wrapper--on-dark']]: onDark,\n    [styles['input-wrapper__label-wrapper--disabled']]: disabled,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: isTransparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--bigform']]: bigForm,\n    [styles['content-wrapper--disabled']]: disabled,\n    [styles['content-wrapper--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['content-wrapper__input'], {\n    [styles['content-wrapper__input--bigform']]: bigForm,\n    [styles['content-wrapper__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = () => {\n    return icon !== undefined ? <Icon color={iconColor} size={iconSize} svgIcon={icon} /> : null;\n  };\n\n  const handleClick = (): void => {\n    if (contentWrapperRef && contentWrapperRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = contentWrapperRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={inputId}>{label}</label>\n            {afterLabelChildren && <div className={styles['input-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div onClick={handleClick} ref={contentWrapperRef} className={contentWrapperClass} style={{ maxWidth }}>\n          {!iconRight && renderIcon()}\n          <input\n            name={name}\n            type={type}\n            defaultValue={defaultValue}\n            id={inputId}\n            className={inputClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            disabled={disabled}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            autoComplete={autoComplete || 'off'}\n            required={required}\n            {...rest}\n          />\n          {iconRight && renderIcon()}\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","defaultValue","placeholder","type","inputId","uuid","name","transparent","icon","iconRight","mode","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterLabelChildren","belowLabelChildren","width","required","rest","breakpoint","useBreakpoint","contentWrapperRef","useRef","onDark","FormMode","onBlueberry","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","selectedChild","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}

package/RadioButton.js

@@ -1,2 +1,2 @@
-import r from"react";import t from"classnames";import{a as F}from"./uuid.js";import o from"./components/RadioButton/styles.module.scss";import{FormMode as l,FormVariant as I,AnalyticsId as x}from"./constants.js";const M=r.forwardRef((p,f)=>{const{className:y,defaultChecked:v=!1,disabled:e,label:s,inputId:i=F(),mode:n,name:B=i,variant:N,errorText:a,error:b=!!a,value:g=s,testId:k,required:w}=p,u=b||n===l.oninvalid,m=n===l.ondark,c=n===l.onblueberry,d=N===I.bigform,R=t(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:a,[o["radio-button-wrapper--bigform"]]:d}),C=t(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:m,[o["radio-button-label--on-blueberry"]]:c,[o["radio-button-label--invalid"]]:u,[o["radio-button-label--bigform"]]:d}),E=t(o["radio-button"],{[o["radio-button--on-dark"]]:m,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:c,[o["radio-button--invalid"]]:u},y),h=t(o["radio-button-errors"],{[o["radio-button-errors--bigform"]]:d});return r.createElement("div",{"data-testid":k,"data-analyticsid":x.RadioButton,className:R},a&&r.createElement("p",{className:h},a),r.createElement("label",{htmlFor:i,className:C},r.createElement("input",{id:i,name:B,className:E,type:"radio",disabled:e,value:g,ref:f,"aria-invalid":b,defaultChecked:v,required:w}),s))});export{M as R};
+import r from"react";import a from"classnames";import{a as I}from"./uuid.js";import o from"./components/RadioButton/styles.module.scss";import{FormMode as l,FormVariant as x,AnalyticsId as S}from"./constants.js";const T=r.forwardRef((p,f)=>{const{className:y,defaultChecked:v=!1,disabled:e,label:s,inputId:i=I(),mode:n,name:B=i,variant:N,errorText:t,error:b=!!t,value:g=s,testId:k,required:w,...R}=p,u=b||n===l.oninvalid,m=n===l.ondark,c=n===l.onblueberry,d=N===x.bigform,C=a(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:t,[o["radio-button-wrapper--bigform"]]:d}),E=a(o["radio-button-label"],{[o["radio-button-label--disabled"]]:e,[o["radio-button-label--on-dark"]]:m,[o["radio-button-label--on-blueberry"]]:c,[o["radio-button-label--invalid"]]:u,[o["radio-button-label--bigform"]]:d}),h=a(o["radio-button"],{[o["radio-button--on-dark"]]:m,[o["radio-button--disabled"]]:e,[o["radio-button--on-blueberry"]]:c,[o["radio-button--invalid"]]:u},y),F=a(o["radio-button-errors"],{[o["radio-button-errors--bigform"]]:d});return r.createElement("div",{"data-testid":k,"data-analyticsid":S.RadioButton,className:C},t&&r.createElement("p",{className:F},t),r.createElement("label",{htmlFor:i,className:E},r.createElement("input",{id:i,name:B,className:h,type:"radio",disabled:e,value:g,ref:f,"aria-invalid":b,defaultChecked:v,required:w,...R}),s))});export{T as R};
 //# sourceMappingURL=RadioButton.js.map

package/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport radioButtonStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\n\nexport interface RadioButtonProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the radioButton */\n  label: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper--bigform']]: bigform,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--on-blueberry']]: onBlueberry,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label--bigform']]: bigform,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors'], {\n    [radioButtonStyles['radio-button-errors--bigform']]: bigform,\n  });\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={radioButtonLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          defaultChecked={defaultChecked}\n          required={required}\n        />\n        {label}\n      </label>\n    </div>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","AnalyticsId"],"mappings":"oNA4BO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,CACE,EAAAf,EACEgB,EAAUJ,GAASJ,IAASS,EAAS,UACrCC,EAASV,IAASS,EAAS,OAC3BE,EAAcX,IAASS,EAAS,YAChCG,EAAUV,IAAYW,EAAY,QAElCC,EAA4BC,EAAWC,EAAkB,wBAAyB,CACtF,CAACA,EAAkB,qCAAsCb,EACzD,CAACa,EAAkB,kCAAmCJ,CAAA,CACvD,EACKK,EAA0BF,EAAWC,EAAkB,sBAAuB,CAClF,CAACA,EAAkB,iCAAkCpB,EACrD,CAACoB,EAAkB,gCAAiCN,EACpD,CAACM,EAAkB,qCAAsCL,EACzD,CAACK,EAAkB,gCAAiCR,EACpD,CAACQ,EAAkB,gCAAiCJ,CAAA,CACrD,EACKM,EAAqBH,EACzBC,EAAkB,gBAClB,CACE,CAACA,EAAkB,0BAA2BN,EAC9C,CAACM,EAAkB,2BAA4BpB,EAC/C,CAACoB,EAAkB,+BAAgCL,EACnD,CAACK,EAAkB,0BAA2BR,CAChD,EACAd,CAAA,EAEIyB,EAAcJ,EAAWC,EAAkB,uBAAwB,CACvE,CAACA,EAAkB,iCAAkCJ,CAAA,CACtD,EAED,OACGrB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkBc,EAAY,YAAa,UAAWN,CAAA,EAC7EX,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAW4B,CAAc,EAAAhB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWmB,CAAA,EACjC1B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWiB,EACX,KAAK,QACL,SAAAtB,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,eAAAT,EACA,SAAAY,CAAA,CACF,EACCV,CACH,CACF,CAEJ,CAAC"}
+{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\nimport { uuid } from '../../utils/uuid';\n\nimport radioButtonStyles from './styles.module.scss';\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\n\nexport interface RadioButtonProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The label text next to the radioButton */\n  label: string;\n  /** input id of the radioButton */\n  inputId?: string;\n  /** Changes the visuals of the radioButton */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the radioButton */\n  variant?: keyof typeof FormVariant;\n  /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultChecked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode,\n    name = inputId,\n    variant,\n    errorText,\n    error = !!errorText,\n    value = label,\n    testId,\n    required,\n    ...rest\n  } = props;\n  const invalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const bigform = variant === FormVariant.bigform;\n\n  const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n    [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n    [radioButtonStyles['radio-button-wrapper--bigform']]: bigform,\n  });\n  const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n    [radioButtonStyles['radio-button-label--disabled']]: disabled,\n    [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n    [radioButtonStyles['radio-button-label--on-blueberry']]: onBlueberry,\n    [radioButtonStyles['radio-button-label--invalid']]: invalid,\n    [radioButtonStyles['radio-button-label--bigform']]: bigform,\n  });\n  const radioButtonClasses = classNames(\n    radioButtonStyles['radio-button'],\n    {\n      [radioButtonStyles['radio-button--on-dark']]: onDark,\n      [radioButtonStyles['radio-button--disabled']]: disabled,\n      [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n      [radioButtonStyles['radio-button--invalid']]: invalid,\n    },\n    className\n  );\n  const errorStyles = classNames(radioButtonStyles['radio-button-errors'], {\n    [radioButtonStyles['radio-button-errors--bigform']]: bigform,\n  });\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      <label htmlFor={inputId} className={radioButtonLabelClasses}>\n        <input\n          id={inputId}\n          name={name}\n          className={radioButtonClasses}\n          type=\"radio\"\n          disabled={disabled}\n          value={value}\n          ref={ref}\n          aria-invalid={error}\n          defaultChecked={defaultChecked}\n          required={required}\n          {...rest}\n        />\n        {label}\n      </label>\n    </div>\n  );\n});\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","disabled","label","inputId","uuid","mode","name","variant","errorText","error","value","testId","required","rest","invalid","FormMode","onDark","onBlueberry","bigform","FormVariant","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","AnalyticsId"],"mappings":"oNA4BO,MAAMA,EAAcC,EAAM,WAAW,CAACC,EAAyBC,IAAqC,CACnG,KAAA,CACJ,UAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EACA,KAAAC,EAAOH,EACP,QAAAI,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQR,EACR,OAAAS,EACA,SAAAC,KACGC,CACD,EAAAhB,EACEiB,EAAUL,GAASJ,IAASU,EAAS,UACrCC,EAASX,IAASU,EAAS,OAC3BE,EAAcZ,IAASU,EAAS,YAChCG,EAAUX,IAAYY,EAAY,QAElCC,EAA4BC,EAAWC,EAAkB,wBAAyB,CACtF,CAACA,EAAkB,qCAAsCd,EACzD,CAACc,EAAkB,kCAAmCJ,CAAA,CACvD,EACKK,EAA0BF,EAAWC,EAAkB,sBAAuB,CAClF,CAACA,EAAkB,iCAAkCrB,EACrD,CAACqB,EAAkB,gCAAiCN,EACpD,CAACM,EAAkB,qCAAsCL,EACzD,CAACK,EAAkB,gCAAiCR,EACpD,CAACQ,EAAkB,gCAAiCJ,CAAA,CACrD,EACKM,EAAqBH,EACzBC,EAAkB,gBAClB,CACE,CAACA,EAAkB,0BAA2BN,EAC9C,CAACM,EAAkB,2BAA4BrB,EAC/C,CAACqB,EAAkB,+BAAgCL,EACnD,CAACK,EAAkB,0BAA2BR,CAChD,EACAf,CAAA,EAEI0B,EAAcJ,EAAWC,EAAkB,uBAAwB,CACvE,CAACA,EAAkB,iCAAkCJ,CAAA,CACtD,EAED,OACGtB,EAAA,cAAA,MAAA,CAAI,cAAae,EAAQ,mBAAkBe,EAAY,YAAa,UAAWN,CAAA,EAC7EZ,GAAcZ,EAAA,cAAA,IAAA,CAAE,UAAW6B,CAAc,EAAAjB,CAAU,EACnDZ,EAAA,cAAA,QAAA,CAAM,QAASO,EAAS,UAAWoB,CAAA,EACjC3B,EAAA,cAAA,QAAA,CACC,GAAIO,EACJ,KAAAG,EACA,UAAWkB,EACX,KAAK,QACL,SAAAvB,EACA,MAAAS,EACA,IAAAZ,EACA,eAAcW,EACd,eAAAT,EACA,SAAAY,EACC,GAAGC,CAAA,CACN,EACCX,CACH,CACF,CAEJ,CAAC"}

package/Select.js

@@ -1,2 +1,2 @@
-import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as R,IconSize as k,AVERAGE_CHARACTER_WIDTH_PX as D}from"./constants.js";import{Icon as T}from"./components/Icons/Icon.js";import z from"./components/Icons/ChevronDown.js";import{getColor as w}from"./theme/currys/color.js";import{E as H}from"./ErrorWrapper.js";import{useUuid as L}from"./hooks/useUuid.js";const X=t=>{const a="2rem";return`calc(${t*D}px + ${a})`},$=(t,a)=>a?w("neutral",500):w(t?"cherry":"blueberry",600),J=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:f,children:v,concept:E="normal",disabled:n,error:C,errorText:i,label:m,selectId:p,name:h=p,mode:o,testId:y,width:d,required:I,value:_}=t,b=L(p),u=o==="onblueberry",l=o==="oninvalid"||!!i||!!C,N=o==="ondark",S=$(l,!!n),W=d?X(d):void 0,g=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:N}),x=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:E==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},f),A=c(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:l});return r.createElement(H,{errorText:i},r.createElement("div",{"data-testid":y,"data-analyticsid":R.Select,className:e["select-wrapper"],style:{maxWidth:W}},m&&r.createElement("div",{className:g},r.createElement("label",{htmlFor:b},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:x},r.createElement(T,{className:e["select-arrow"],svgIcon:z,color:S,size:k.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:b,name:h,className:A,disabled:n,ref:a,required:I,value:_},v))))});export{J as S};
+import r from"react";import c from"classnames";import e from"./components/Select/styles.module.scss";import{AnalyticsId as k,IconSize as D,AVERAGE_CHARACTER_WIDTH_PX as T}from"./constants.js";import{Icon as z}from"./components/Icons/Icon.js";import H from"./components/Icons/ChevronDown.js";import{getColor as w}from"./theme/currys/color.js";import{E as L}from"./ErrorWrapper.js";import{useUuid as X}from"./hooks/useUuid.js";const $=t=>{const a="2rem";return`calc(${t*T}px + ${a})`},q=(t,a)=>a?w("neutral",500):w(t?"cherry":"blueberry",600),K=r.forwardRef((t,a)=>{const{afterLabelChildren:s,className:f,children:v,concept:E="normal",disabled:n,error:C,errorText:i,label:m,selectId:p,name:h=p,mode:o,testId:y,width:d,required:I,value:_,...N}=t,b=X(p),u=o==="onblueberry",l=o==="oninvalid"||!!i||!!C,S=o==="ondark",W=q(l,!!n),g=d?$(d):void 0,x=c(e["select-wrapper__label-wrapper"],{[e["select-wrapper__label-wrapper--on-dark"]]:S}),A=c(e["select-inner-wrapper"],{[e["select-inner-wrapper--transparent"]]:E==="transparent",[e["select-inner-wrapper--on-blueberry"]]:u,[e["select-inner-wrapper--invalid"]]:l,[e["select-inner-wrapper--disabled"]]:n},f),R=c(e.select,{[e["select--on-blueberry"]]:u,[e["select--invalid"]]:l});return r.createElement(L,{errorText:i},r.createElement("div",{"data-testid":y,"data-analyticsid":k.Select,className:e["select-wrapper"],style:{maxWidth:g}},m&&r.createElement("div",{className:x},r.createElement("label",{htmlFor:b},m),s&&r.createElement("div",{className:e["select-wrapper__after-label-children"]},s)),r.createElement("div",{className:A},r.createElement(z,{className:e["select-arrow"],svgIcon:H,color:W,size:D.XSmall}),r.createElement("select",{"aria-invalid":!!l,id:b,name:h,className:R,disabled:n,ref:a,required:I,value:_,...N},v))))});export{K as S};
 //# sourceMappingURL=Select.js.map

package/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: string;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode,\n    testId,\n    width,\n    required,\n    value,\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const onDark = mode === 'ondark';\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n    [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n  });\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {label && (\n          <div className={selectLabelClasses}>\n            <label htmlFor={uuid}>{label}</label>\n            {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            value={value}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAuCA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,CACE,EAAAf,EAEEgB,EAAOC,EAAQR,CAAQ,EACvBS,EAAcP,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDa,EAASR,IAAS,SAClBS,EAAY1B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5CyB,EAAWR,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CS,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCnB,IAAY,cACjE,CAACmB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC7B,EACjD,CAAC6B,EAAa,mCAAoC5B,CACpD,EACAO,CAAA,EAGIuB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB7B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA4B,EAAA,CAAa,UAAApB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBgB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hb,GACET,EAAA,cAAA,MAAA,CAAI,UAAWuB,CAAA,EACbvB,EAAA,cAAA,QAAA,CAAM,QAASiB,CAAO,EAAAR,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAWyB,EAAa,uCAA0C,EAAAtB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW0B,CAAA,EACb1B,EAAA,cAAA8B,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GhC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIqB,EACJ,KAAAN,EACA,UAAWgB,EACX,SAAA9B,EACA,IAAAK,EACA,SAAAa,EACA,MAAAC,CAAA,EAECX,CACH,CACF,CACF,CACF,CAEJ,CAAC"}
+{"version":3,"file":"Select.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport selectStyles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode, IconSize } from '../../constants';\nimport Icon from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { useUuid } from '../../hooks/useUuid';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'disabled' | 'required' | 'value'> {\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Sets the content of the select element. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the visuals of the component */\n  concept?: SelectConcept;\n  /** The label text above the select */\n  label?: string;\n  /** Changes the visuals of the component */\n  mode?: keyof typeof FormMode;\n  /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** select id of the select element */\n  selectId?: string;\n  /** Width of select in characters (approximate) */\n  width?: number;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean) => {\n  const iconColor = invalid ? 'cherry' : 'blueberry';\n  return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef((props: SelectProps, ref: React.Ref<HTMLSelectElement>) => {\n  const {\n    afterLabelChildren,\n    className,\n    children,\n    concept = 'normal',\n    disabled,\n    error,\n    errorText,\n    label,\n    selectId,\n    name = selectId,\n    mode,\n    testId,\n    width,\n    required,\n    value,\n    ...rest\n  } = props;\n\n  const uuid = useUuid(selectId);\n  const onBlueberry = mode === 'onblueberry';\n  const invalid = mode === 'oninvalid' || !!errorText || !!error;\n  const onDark = mode === 'ondark';\n  const iconColor = getIconColor(invalid, !!disabled);\n  const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n  const selectLabelClasses = classNames(selectStyles['select-wrapper__label-wrapper'], {\n    [selectStyles['select-wrapper__label-wrapper--on-dark']]: onDark,\n  });\n\n  const selectInnerWrapperClasses = classNames(\n    selectStyles['select-inner-wrapper'],\n    {\n      [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n      [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n      [selectStyles['select-inner-wrapper--invalid']]: invalid,\n      [selectStyles['select-inner-wrapper--disabled']]: disabled,\n    },\n    className\n  );\n\n  const selectClasses = classNames(selectStyles.select, {\n    [selectStyles['select--on-blueberry']]: onBlueberry,\n    [selectStyles['select--invalid']]: invalid,\n  });\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectStyles['select-wrapper']} style={{ maxWidth }}>\n        {label && (\n          <div className={selectLabelClasses}>\n            <label htmlFor={uuid}>{label}</label>\n            {afterLabelChildren && <div className={selectStyles['select-wrapper__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        <div className={selectInnerWrapperClasses}>\n          <Icon className={selectStyles['select-arrow']} svgIcon={ChevronDown} color={iconColor} size={IconSize.XSmall} />\n          <select\n            aria-invalid={!!invalid}\n            id={uuid}\n            name={name}\n            className={selectClasses}\n            disabled={disabled}\n            ref={ref}\n            required={required}\n            value={value}\n            {...rest}\n          >\n            {children}\n          </select>\n        </div>\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Select;\n"],"names":["getSelectMaxWidth","characters","paddingWidth","AVERAGE_CHARACTER_WIDTH_PX","getIconColor","invalid","disabled","getColor","Select","React","props","ref","afterLabelChildren","className","children","concept","error","errorText","label","selectId","name","mode","testId","width","required","value","rest","uuid","useUuid","onBlueberry","onDark","iconColor","maxWidth","selectLabelClasses","classNames","selectStyles","selectInnerWrapperClasses","selectClasses","ErrorWrapper","AnalyticsId","Icon","ChevronDown","IconSize"],"mappings":"yaAuCA,MAAMA,EAAqBC,GAA+B,CACxD,MAAMC,EAAe,OAEd,MAAA,QAAQD,EAAaE,SAAkCD,IAChE,EAEME,EAAe,CAACC,EAAkBC,IAE/BA,EAAWC,EAAS,UAAW,GAAG,EAAIA,EAD3BF,EAAU,SAAW,YAC0B,GAAG,EAGzDG,EAASC,EAAM,WAAW,CAACC,EAAoBC,IAAsC,CAC1F,KAAA,CACJ,mBAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,SACV,SAAAT,EACA,MAAAU,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAOD,EACP,KAAAE,EACA,OAAAC,EACA,MAAAC,EACA,SAAAC,EACA,MAAAC,KACGC,CACD,EAAAhB,EAEEiB,EAAOC,EAAQT,CAAQ,EACvBU,EAAcR,IAAS,cACvBhB,EAAUgB,IAAS,aAAe,CAAC,CAACJ,GAAa,CAAC,CAACD,EACnDc,EAAST,IAAS,SAClBU,EAAY3B,EAAaC,EAAS,CAAC,CAACC,CAAQ,EAC5C0B,EAAWT,EAAQvB,EAAkBuB,CAAK,EAAI,OAE9CU,EAAqBC,EAAWC,EAAa,iCAAkC,CACnF,CAACA,EAAa,2CAA4CL,CAAA,CAC3D,EAEKM,EAA4BF,EAChCC,EAAa,wBACb,CACE,CAACA,EAAa,sCAAuCpB,IAAY,cACjE,CAACoB,EAAa,uCAAwCN,EACtD,CAACM,EAAa,kCAAmC9B,EACjD,CAAC8B,EAAa,mCAAoC7B,CACpD,EACAO,CAAA,EAGIwB,EAAgBH,EAAWC,EAAa,OAAQ,CACpD,CAACA,EAAa,yBAA0BN,EACxC,CAACM,EAAa,oBAAqB9B,CAAA,CACpC,EAED,OACGI,EAAA,cAAA6B,EAAA,CAAa,UAAArB,CAAA,EACXR,EAAA,cAAA,MAAA,CAAI,cAAaa,EAAQ,mBAAkBiB,EAAY,OAAQ,UAAWJ,EAAa,kBAAmB,MAAO,CAAE,SAAAH,CAAS,CAAA,EAC1Hd,GACET,EAAA,cAAA,MAAA,CAAI,UAAWwB,CAAA,EACbxB,EAAA,cAAA,QAAA,CAAM,QAASkB,CAAO,EAAAT,CAAM,EAC5BN,GAAuBH,EAAA,cAAA,MAAA,CAAI,UAAW0B,EAAa,uCAA0C,EAAAvB,CAAmB,CACnH,EAEDH,EAAA,cAAA,MAAA,CAAI,UAAW2B,CAAA,EACb3B,EAAA,cAAA+B,EAAA,CAAK,UAAWL,EAAa,gBAAiB,QAASM,EAAa,MAAOV,EAAW,KAAMW,EAAS,MAAA,CAAQ,EAC7GjC,EAAA,cAAA,SAAA,CACC,eAAc,CAAC,CAACJ,EAChB,GAAIsB,EACJ,KAAAP,EACA,UAAWiB,EACX,SAAA/B,EACA,IAAAK,EACA,SAAAa,EACA,MAAAC,EACC,GAAGC,CAAA,EAEHZ,CACH,CACF,CACF,CACF,CAEJ,CAAC"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import r,{useState as I,useRef as Z,useEffect as ee}from"react";import s from"classnames";import e from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as te,AVERAGE_CHARACTER_WIDTH_PX as re}from"./constants.js";import{a as ae}from"./uuid.js";import{E as ne}from"./ErrorWrapper.js";const oe=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*re}px + ${p} + ${a} + ${l})`},me=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:k,defaultValue:_,marginBottom:A,transparent:L,mode:m,label:E,textareaId:g=ae(),minRows:v=3,maxRows:c=10,grow:C,errorText:R,afterLabelChildren:T,belowLabelChildren:W,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q}=o,[z,y]=I(v),[u,G]=I(_||""),i=Z(null),H=t=>{const d=t.rows;t.rows=v;const n=Math.floor((t.scrollHeight-16)/28);n===d&&(t.rows=n),n>=c&&(t.rows=c,t.scrollTop=t.scrollHeight),n<c?y(n):y(c)},O=t=>{C&&H(t.target),G(t.target.value)},x=m===f.ondark,P=m===f.onblueberry,X=a&&u.toString().length>a,h=m===f.oninvalid||R||X,j=s(e.textarea,{[e["textarea--gutterBottom"]]:A}),J=s(e["textarea__label-wrapper"],{[e["textarea__label-wrapper--on-dark"]]:x}),K=s(e["content-wrapper"],{[e["content-wrapper--transparent"]]:L,[e["content-wrapper--on-blueberry"]]:P,[e["content-wrapper--on-dark"]]:x,[e["content-wrapper--invalid"]]:h,[e["content-wrapper--disabled"]]:o.disabled}),Q=s(e["content-wrapper__input"],{[e["content-wrapper__input--disabled"]]:o.disabled}),U=s(e["textarea__counter-wrapper"],{[e["textarea__counter-wrapper--on-dark"]]:x,[e["textarea__counter-wrapper--invalid"]]:h});ee(()=>{var t,w,d;if(C&&((t=i.current)==null?void 0:t.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];H(n)}},[]);let N=0;a&&(N=u.toString().length/a);const Y=N>.95?"polite":"off",$=b?oe(b):void 0;return r.createElement(ne,{errorText:R},r.createElement("div",{"data-testid":k,"data-analyticsid":te.Textarea,className:j},E&&r.createElement("div",{className:J},r.createElement("label",{htmlFor:g},E),T&&r.createElement("div",{className:e["textarea__after-label-children"]},T)),W&&r.createElement("div",null,W),r.createElement("div",{className:K,ref:i,style:{maxWidth:$}},r.createElement("textarea",{rows:z,defaultValue:_,id:g,className:Q,ref:p,onChange:O,"aria-invalid":!!h,autoFocus:B,disabled:S,name:F,autoComplete:M,placeholder:D,readOnly:V,required:q})),a&&r.createElement("div",{"aria-live":Y,"aria-atomic":"true",className:U,style:{maxWidth:$}},r.createElement("p",null,`${u.toString().length}/${a} ${l||"tegn"}`))))});export{me as T};
+import r,{useState as k,useRef as re,useEffect as ae}from"react";import s from"classnames";import t from"./components/Textarea/styles.module.scss";import{FormMode as f,AnalyticsId as ne,AVERAGE_CHARACTER_WIDTH_PX as oe}from"./constants.js";import{a as se}from"./uuid.js";import{E as le}from"./ErrorWrapper.js";const ce=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*oe}px + ${p} + ${a} + ${l})`},he=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:A,defaultValue:g,marginBottom:L,transparent:B,mode:m,label:_,textareaId:E=se(),minRows:C=3,maxRows:c=10,grow:v,errorText:R,afterLabelChildren:T,belowLabelChildren:W,autoFocus:S,disabled:F,name:M,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:y,...G}=o,[O,H]=k(C),[u,P]=k(g||""),i=re(null),N=e=>{const d=e.rows;e.rows=C;const n=Math.floor((e.scrollHeight-16)/28);n===d&&(e.rows=n),n>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),n<c?H(n):H(c)},X=e=>{v&&N(e.target),P(e.target.value)},x=m===f.ondark,j=m===f.onblueberry,J=a&&u.toString().length>a,h=m===f.oninvalid||R||J,K=s(t.textarea,{[t["textarea--gutterBottom"]]:L}),Q=s(t["textarea__label-wrapper"],{[t["textarea__label-wrapper--on-dark"]]:x}),U=s(t["content-wrapper"],{[t["content-wrapper--transparent"]]:B,[t["content-wrapper--on-blueberry"]]:j,[t["content-wrapper--on-dark"]]:x,[t["content-wrapper--invalid"]]:h,[t["content-wrapper--disabled"]]:o.disabled}),Y=s(t["content-wrapper__input"],{[t["content-wrapper__input--disabled"]]:o.disabled}),Z=s(t["textarea__counter-wrapper"],{[t["textarea__counter-wrapper--on-dark"]]:x,[t["textarea__counter-wrapper--invalid"]]:h});ae(()=>{var e,w,d;if(v&&((e=i.current)==null?void 0:e.children)&&((w=i.current)==null?void 0:w.children[0])){const n=(d=i.current)==null?void 0:d.children[0];N(n)}},[]);let $=0;a&&($=u.toString().length/a);const ee=$>.95?"polite":"off",I=b?ce(b):void 0,te=e=>{y&&y(e),X(e)};return r.createElement(le,{errorText:R},r.createElement("div",{"data-testid":A,"data-analyticsid":ne.Textarea,className:K},_&&r.createElement("div",{className:Q},r.createElement("label",{htmlFor:E},_),T&&r.createElement("div",{className:t["textarea__after-label-children"]},T)),W&&r.createElement("div",null,W),r.createElement("div",{className:U,ref:i,style:{maxWidth:I}},r.createElement("textarea",{rows:O,defaultValue:g,id:E,className:Y,ref:p,"aria-invalid":!!h,autoFocus:S,disabled:F,name:M,autoComplete:D,placeholder:V,readOnly:q,required:z,onChange:te,...G})),a&&r.createElement("div",{"aria-live":ee,"aria-atomic":"true",className:Z,style:{maxWidth:I}},r.createElement("p",null,`${u.toString().length}/${a} ${l||"tegn"}`))))});export{he as T};
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: string;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            onChange={handleChange}\n            aria-invalid={!!onError}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n          />\n        </div>\n        {max && (\n          <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n            <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n          </div>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","ErrorWrapper","AnalyticsId"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: string;\n  /** id of the textarea */\n  textareaId?: string;\n  /** max rows */\n  maxRows?: number;\n  /** min rows */\n  minRows?: number;\n  /** auto-grows until maxRows */\n  grow?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Component shown after label */\n  afterLabelChildren?: React.ReactNode;\n  /** Component shown under label */\n  belowLabelChildren?: React.ReactNode;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n  const paddingWidth = '2rem';\n  const scrollbarWidth = '16px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n  const {\n    maxCharacters: max,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    afterLabelChildren,\n    belowLabelChildren,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(event.target);\n    }\n    setTextareaInput(event.target.value);\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const textHasError = max && textareaInput.toString().length > max;\n  const onError = mode === FormMode.oninvalid || errorText || textHasError;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\n  });\n\n  const labelWrapperClass = cn(styles['textarea__label-wrapper'], {\n    [styles[`textarea__label-wrapper--on-dark`]]: onDark,\n  });\n\n  const contentWrapperClass = cn(styles['content-wrapper'], {\n    [styles['content-wrapper--transparent']]: transparent,\n    [styles['content-wrapper--on-blueberry']]: onBlueberry,\n    [styles['content-wrapper--on-dark']]: onDark,\n    [styles['content-wrapper--invalid']]: onError,\n    [styles['content-wrapper--disabled']]: props.disabled,\n  });\n\n  const textareaClass = cn(styles['content-wrapper__input'], {\n    [styles[`content-wrapper__input--disabled`]]: props.disabled,\n  });\n\n  const counterTextClass = cn(styles['textarea__counter-wrapper'], {\n    [styles[`textarea__counter-wrapper--on-dark`]]: onDark,\n    [styles[`textarea__counter-wrapper--invalid`]]: onError,\n  });\n\n  useEffect(() => {\n    if (grow && referanse.current?.children && referanse.current?.children[0]) {\n      const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n      resizeHeight(textarea);\n    }\n  }, []);\n\n  let progress = 0;\n  if (max) {\n    progress = textareaInput.toString().length / max;\n  }\n\n  const ariaLevel = progress > 0.95 ? 'polite' : 'off';\n  const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n        {label && (\n          <div className={labelWrapperClass}>\n            <label htmlFor={textareaId}>{label}</label>\n            {afterLabelChildren && <div className={styles['textarea__after-label-children']}>{afterLabelChildren}</div>}\n          </div>\n        )}\n        {belowLabelChildren && <div>{belowLabelChildren}</div>}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-invalid={!!onError}\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {max && (\n          <div aria-live={ariaLevel} aria-atomic={'true'} className={counterTextClass} style={{ maxWidth }}>\n            <p>{`${textareaInput.toString().length}/${max} ${maxText ? maxText : 'tegn'}`}</p>\n          </div>\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","max","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","label","textareaId","uuid","minRows","maxRows","grow","errorText","afterLabelChildren","belowLabelChildren","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","handleChange","event","onDark","FormMode","onBlueberry","textHasError","onError","textareaWrapperClass","cn","styles","labelWrapperClass","contentWrapperClass","textareaClass","counterTextClass","useEffect","_a","_b","textarea","_c","progress","ariaLevel","maxWidth","onChangeHandler","ErrorWrapper","AnalyticsId"],"mappings":"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"}

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"../../utils/environment.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"../../uuid.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"../../utils/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 Q=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{Q 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"../../utils/environment.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"../../uuid.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"../../utils/debounce.js";import"../Modal/styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../utils/focus.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.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 U=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{U as default};
 //# sourceMappingURL=index.js.map