@helsenorge/designsystem-react 2.4.0 → 2.5.0

package/Textarea.js

@@ -1,2 +1,2 @@
-import r,{useState as A,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}from"./constants.js";import{a as re}from"./uuid.js";import{A as ae}from"./Input.js";import{E as ne}from"./ErrorWrapper.js";const oe=o=>{const p="2rem",a="16px",l="4px";return`calc(${o*ae}px + ${p} + ${a} + ${l})`},ue=r.forwardRef((o,p)=>{const{maxCharacters:a,maxText:l,width:b,testId:I,defaultValue:_,marginBottom:k,transparent:L,mode:m,label:E,textareaId:g=re(),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]=A(v),[u,G]=A(_||""),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"]]:k}),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":I,"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{ue as T};
+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};
 //# 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 { FormMode, AnalyticsId } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport { AVERAGE_CHARACTER_WIDTH_PX } from '../Input';\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'\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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"}

package/Tooltip.js

@@ -1,2 +1,2 @@
-import e,{useRef as y,useState as l,useEffect as O,useContext as h}from"react";import{AnalyticsId as k}from"./constants.js";import{useUuid as D}from"./hooks/useUuid.js";import{H as L}from"./HelpBubble.js";import R from"./components/Tooltip/styles.module.scss";const S=r=>{const{children:a,description:i,testId:c}=r,u=200,f=`help-bubble-${D()}`,m=y(null),p=y(!0),g=M(),x=V(),[n,t]=l(!1),[d,o]=l(!1),[s,w]=l(null);O(()=>{p.current||x(),p.current&&(p.current=!1)},[n]);const T=()=>{d||t(!1)},b=()=>{g||w(window.setTimeout(()=>{o(!0)},u))},E=()=>{o(!1),s&&clearTimeout(s)};O(()=>(document.addEventListener("mouseup",T),()=>{document.removeEventListener("mouseup",T),s&&clearTimeout(s)}),[]);const B=v=>{v.key==="Enter"&&(t(d?!1:!n),o(!1)),v.key==="Escape"&&(t(!1),o(!1))},H=()=>{t(!n),o(!1)};return e.createElement(e.Fragment,null,e.createElement("span",{className:R.word,ref:m,tabIndex:0,onClick:()=>H(),onMouseEnter:()=>b(),onMouseLeave:()=>E(),onFocus:()=>b(),onBlur:()=>E(),onKeyDown:B,"aria-describedby":f,"data-testid":c,"data-analyticsid":k.Tooltip},a),e.createElement(L,{helpBubbleId:f,controllerRef:m,showBubble:n||d,noCloseButton:!0},i))},C=e.createContext(!1),I=e.createContext(()=>{}),M=()=>h(C),V=()=>h(I),U=({children:r})=>{const[a,i]=l(!1),c=()=>{i(u=>!u)};return e.createElement(C.Provider,{value:a},e.createElement(I.Provider,{value:c},r))};export{S as T,V as a,U as b,M as u};
+import t,{useRef as y,useContext as C,useEffect as u,useState as b}from"react";import{useDelayedState as D}from"./hooks/useDelayedState.js";import{useUuid as v}from"./hooks/useUuid.js";import{H as B}from"./HelpBubble.js";import{T as R}from"./TooltipWord.js";const x=200,K=({children:s,description:r,testId:i})=>{const n=v(),a=y(null),{currentTooltip:p,setCurrentTooltip:c}=C(d),[{showTooltip:l,keepOpen:m},h,o]=D({showTooltip:!1,keepOpen:!1},x);u(()=>{!c||c(l?n:void 0)},[l]),u(()=>{p!==n&&typeof p<"u"&&o(e=>({showTooltip:!1,keepOpen:e.keepOpen}))},[p]);const f=()=>{l||o({showTooltip:!1,keepOpen:!1})};u(()=>(document.addEventListener("mouseup",f),()=>{document.removeEventListener("mouseup",f)}),[]);const k=()=>{o(e=>({showTooltip:!e.showTooltip,keepOpen:!e.keepOpen}))},w=()=>{p||h(e=>({showTooltip:!0,keepOpen:e.keepOpen}))},O=()=>{o(e=>({showTooltip:!1,keepOpen:e.keepOpen}))},E=e=>{e.key==="Enter"&&o(T=>({showTooltip:!T.showTooltip,keepOpen:!T.keepOpen})),e.key==="Escape"&&o({showTooltip:!1,keepOpen:!1})};return t.createElement(t.Fragment,null,t.createElement(R,{ref:a,onClick:k,onFocus:w,onBlur:O,onKeyDown:E,ariaDescribedById:n,testId:i},s),t.createElement(B,{helpBubbleId:n,controllerRef:a,role:"tooltip",showBubble:l||m},r))},d=t.createContext({currentTooltip:void 0}),P=({children:s})=>{const[r,i]=b();return t.createElement(d.Provider,{value:{currentTooltip:r,setCurrentTooltip:i}},s)};export{K as T,P as a};
 //# sourceMappingURL=Tooltip.js.map

package/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef, ReactChild, ReactChildren, ReactNode } from 'react';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\n\nimport HelpBubble from '../HelpBubble';\n\nimport tooltipstyles from './styles.module.scss';\n\nexport interface TooltipProps {\n  /**Ordet som skal ha en tilhørende hjelpeblubb */\n  children: ReactNode;\n  /**Teksten som skal vises i hjelpeblubben */\n  description: ReactNode;\n  /**Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = (props: TooltipProps): JSX.Element => {\n  const { children, description, testId } = props;\n\n  const HOVER_DELAY = 200;\n\n  const ariaDescribedBy = `help-bubble-${useUuid()}`;\n  const node = useRef<HTMLDivElement>(null);\n  const firstRender = useRef(true);\n  const anyTooltipIsOpen = useTooltipOpen();\n  const toggleTooltipIsOpen = useTooltipOpenToggle();\n  const [visTooltip, setVisTooltip] = useState(false);\n  const [hoverVisTooltip, setHoverVisTooltip] = useState(false);\n  const [delayHandler, setDelayHandler] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (!firstRender.current) toggleTooltipIsOpen();\n    if (firstRender.current) firstRender.current = false;\n  }, [visTooltip]);\n\n  const handleClick = (): void => {\n    if (!hoverVisTooltip) {\n      setVisTooltip(false);\n    }\n  };\n\n  const handleMouseEnter = (): void => {\n    if (!anyTooltipIsOpen) {\n      setDelayHandler(\n        window.setTimeout(() => {\n          setHoverVisTooltip(true);\n        }, HOVER_DELAY)\n      );\n    }\n  };\n\n  const handleMouseLeave = (): void => {\n    setHoverVisTooltip(false);\n    delayHandler && clearTimeout(delayHandler);\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleClick);\n      delayHandler && clearTimeout(delayHandler);\n    };\n  }, []);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (e.key === 'Enter') {\n      hoverVisTooltip ? setVisTooltip(false) : setVisTooltip(!visTooltip);\n      setHoverVisTooltip(false);\n    }\n    if (e.key === 'Escape') {\n      setVisTooltip(false);\n      setHoverVisTooltip(false);\n    }\n  };\n\n  const handleTooltipClick = () => {\n    setVisTooltip(!visTooltip);\n    setHoverVisTooltip(false);\n  };\n\n  return (\n    <>\n      <span\n        className={tooltipstyles.word}\n        ref={node}\n        tabIndex={0}\n        onClick={(): void => handleTooltipClick()}\n        onMouseEnter={(): void => handleMouseEnter()}\n        onMouseLeave={(): void => handleMouseLeave()}\n        onFocus={(): void => handleMouseEnter()}\n        onBlur={(): void => handleMouseLeave()}\n        onKeyDown={handleKeyDown}\n        aria-describedby={ariaDescribedBy}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Tooltip}\n      >\n        {children}\n      </span>\n      <HelpBubble helpBubbleId={ariaDescribedBy} controllerRef={node} showBubble={visTooltip || hoverVisTooltip} noCloseButton>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nconst TooltipOpenContext = React.createContext(false);\nconst TooltipOpenToggleContext = React.createContext(() => {});\n\ninterface ContextProps {\n  children: ReactChild | ReactChildren;\n}\nexport const useTooltipOpen = () => {\n  return useContext(TooltipOpenContext);\n};\nexport const useTooltipOpenToggle = () => {\n  return useContext(TooltipOpenToggleContext);\n};\n\nexport const TooltipOpenProvider = ({ children }: ContextProps) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const tooltipIsOpen = () => {\n    setIsOpen(prevIsOpen => !prevIsOpen);\n  };\n\n  return (\n    <TooltipOpenContext.Provider value={isOpen}>\n      <TooltipOpenToggleContext.Provider value={tooltipIsOpen}>{children}</TooltipOpenToggleContext.Provider>\n    </TooltipOpenContext.Provider>\n  );\n};\n\nexport default Tooltip;\n"],"names":["Tooltip","props","children","description","testId","HOVER_DELAY","ariaDescribedBy","useUuid","node","useRef","firstRender","anyTooltipIsOpen","useTooltipOpen","toggleTooltipIsOpen","useTooltipOpenToggle","visTooltip","setVisTooltip","useState","hoverVisTooltip","setHoverVisTooltip","delayHandler","setDelayHandler","useEffect","handleClick","handleMouseEnter","handleMouseLeave","handleKeyDown","e","handleTooltipClick","React","tooltipstyles","AnalyticsId","HelpBubble","TooltipOpenContext","TooltipOpenToggleContext","useContext","TooltipOpenProvider","isOpen","setIsOpen","tooltipIsOpen","prevIsOpen"],"mappings":"oQAiBa,MAAAA,EAAmCC,GAAqC,CACnF,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,OAAAC,CAAA,EAAWH,EAEpCI,EAAc,IAEdC,EAAkB,eAAeC,EAAQ,IACzCC,EAAOC,EAAuB,IAAI,EAClCC,EAAcD,EAAO,EAAI,EACzBE,EAAmBC,IACnBC,EAAsBC,IACtB,CAACC,EAAYC,CAAa,EAAIC,EAAS,EAAK,EAC5C,CAACC,EAAiBC,CAAkB,EAAIF,EAAS,EAAK,EACtD,CAACG,EAAcC,CAAe,EAAIJ,EAAwB,IAAI,EAEpEK,EAAU,IAAM,CACTZ,EAAY,SAA6BG,IAC1CH,EAAY,UAASA,EAAY,QAAU,GAAA,EAC9C,CAACK,CAAU,CAAC,EAEf,MAAMQ,EAAc,IAAY,CACzBL,GACHF,EAAc,EAAK,CACrB,EAGIQ,EAAmB,IAAY,CAC9Bb,GACHU,EACE,OAAO,WAAW,IAAM,CACtBF,EAAmB,EAAI,GACtBd,CAAW,CAAA,CAElB,EAGIoB,EAAmB,IAAY,CACnCN,EAAmB,EAAK,EACxBC,GAAgB,aAAaA,CAAY,CAAA,EAG3CE,EAAU,KACC,SAAA,iBAAiB,UAAWC,CAAW,EACzC,IAAY,CACR,SAAA,oBAAoB,UAAWA,CAAW,EACnDH,GAAgB,aAAaA,CAAY,CAAA,GAE1C,CAAE,CAAA,EAEC,MAAAM,EAAiBC,GAAiD,CAClEA,EAAE,MAAQ,UACMX,EAAlBE,EAAgC,GAAuB,CAACH,CAAnB,EACrCI,EAAmB,EAAK,GAEtBQ,EAAE,MAAQ,WACZX,EAAc,EAAK,EACnBG,EAAmB,EAAK,EAC1B,EAGIS,EAAqB,IAAM,CAC/BZ,EAAc,CAACD,CAAU,EACzBI,EAAmB,EAAK,CAAA,EAG1B,uCAEKU,EAAA,cAAA,OAAA,CACC,UAAWC,EAAc,KACzB,IAAKtB,EACL,SAAU,EACV,QAAS,IAAYoB,EAAmB,EACxC,aAAc,IAAYJ,EAAiB,EAC3C,aAAc,IAAYC,EAAiB,EAC3C,QAAS,IAAYD,EAAiB,EACtC,OAAQ,IAAYC,EAAiB,EACrC,UAAWC,EACX,mBAAkBpB,EAClB,cAAaF,EACb,mBAAkB2B,EAAY,OAE7B,EAAA7B,CACH,EACC2B,EAAA,cAAAG,EAAA,CAAW,aAAc1B,EAAiB,cAAeE,EAAM,WAAYO,GAAcG,EAAiB,cAAa,EAAA,EACrHf,CACH,CACF,CAEJ,EAEM8B,EAAqBJ,EAAM,cAAc,EAAK,EAC9CK,EAA2BL,EAAM,cAAc,IAAM,CAAC,CAAC,EAKhDjB,EAAiB,IACrBuB,EAAWF,CAAkB,EAEzBnB,EAAuB,IAC3BqB,EAAWD,CAAwB,EAG/BE,EAAsB,CAAC,CAAE,SAAAlC,KAA6B,CACjE,KAAM,CAACmC,EAAQC,CAAS,EAAIrB,EAAS,EAAK,EAEpCsB,EAAgB,IAAM,CAChBD,EAAAE,GAAc,CAACA,CAAU,CAAA,EAInC,OAAAX,EAAA,cAACI,EAAmB,SAAnB,CAA4B,MAAOI,CAClC,EAAAR,EAAA,cAACK,EAAyB,SAAzB,CAAkC,MAAOK,CAAA,EAAgBrC,CAAS,CACrE,CAEJ"}
+{"version":3,"file":"Tooltip.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useContext, useState, useEffect, useRef } from 'react';\nimport { useDelayedState } from '../../hooks/useDelayedState';\n\nimport { useUuid } from '../../hooks/useUuid';\nimport HelpBubble from '../HelpBubble';\n\nimport TooltipWord from './TooltipWord';\n\nconst HOVER_DELAY_MS = 200;\n\nexport interface TooltipProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Teksten som skal vises i tooltip */\n  description: React.ReactNode;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nexport const Tooltip: React.FC<TooltipProps> = ({ children, description, testId }) => {\n  const helpBubbleId = useUuid();\n  const wordRef = useRef<HTMLSpanElement>(null);\n  const { currentTooltip, setCurrentTooltip } = useContext(TooltipOpenContext);\n  const [{ showTooltip, keepOpen }, setShowTooltipDelayed, setShowTooltip] = useDelayedState(\n    { showTooltip: false, keepOpen: false },\n    HOVER_DELAY_MS\n  );\n\n  useEffect(() => {\n    if (!setCurrentTooltip) {\n      return;\n    }\n    if (showTooltip) {\n      setCurrentTooltip(helpBubbleId);\n    } else {\n      setCurrentTooltip(undefined);\n    }\n  }, [showTooltip]);\n\n  useEffect(() => {\n    if (currentTooltip !== helpBubbleId && typeof currentTooltip !== 'undefined') {\n      setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n    }\n  }, [currentTooltip]);\n\n  const handleDocumentClick = (): void => {\n    if (!showTooltip) {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('mouseup', handleDocumentClick);\n    return (): void => {\n      document.removeEventListener('mouseup', handleDocumentClick);\n    };\n  }, []);\n\n  const handleTooltipClick = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n  };\n\n  const handleFocus = (): void => {\n    if (!currentTooltip) {\n      setShowTooltipDelayed(prevState => ({ showTooltip: true, keepOpen: prevState.keepOpen }));\n    }\n  };\n\n  const handleBlur = (): void => {\n    setShowTooltip(prevState => ({ showTooltip: false, keepOpen: prevState.keepOpen }));\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>): void => {\n    if (e.key === 'Enter') {\n      setShowTooltip(prevState => ({ showTooltip: !prevState.showTooltip, keepOpen: !prevState.keepOpen }));\n    }\n    if (e.key === 'Escape') {\n      setShowTooltip({ showTooltip: false, keepOpen: false });\n    }\n  };\n\n  return (\n    <>\n      <TooltipWord\n        ref={wordRef}\n        onClick={handleTooltipClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        ariaDescribedById={helpBubbleId}\n        testId={testId}\n      >\n        {children}\n      </TooltipWord>\n      <HelpBubble helpBubbleId={helpBubbleId} controllerRef={wordRef} role=\"tooltip\" showBubble={showTooltip || keepOpen}>\n        {description}\n      </HelpBubble>\n    </>\n  );\n};\n\nexport type TooltipContext = {\n  currentTooltip?: string;\n  setCurrentTooltip?: (id?: string) => void;\n};\n\nconst TooltipOpenContext = React.createContext<TooltipContext>({\n  currentTooltip: undefined,\n});\n\nexport const TooltipOpenProvider: React.FC = ({ children }) => {\n  const [currentTooltip, setCurrentTooltip] = useState<string>();\n\n  return <TooltipOpenContext.Provider value={{ currentTooltip, setCurrentTooltip }}>{children}</TooltipOpenContext.Provider>;\n};\n\nexport default Tooltip;\n"],"names":["HOVER_DELAY_MS","Tooltip","children","description","testId","helpBubbleId","useUuid","wordRef","useRef","currentTooltip","setCurrentTooltip","useContext","TooltipOpenContext","showTooltip","keepOpen","setShowTooltipDelayed","setShowTooltip","useDelayedState","useEffect","prevState","handleDocumentClick","handleTooltipClick","handleFocus","handleBlur","handleKeyDown","React","TooltipWord","HelpBubble","TooltipOpenProvider","useState"],"mappings":"kQAQA,MAAMA,EAAiB,IAWVC,EAAkC,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAa,OAAAC,KAAa,CACpF,MAAMC,EAAeC,IACfC,EAAUC,EAAwB,IAAI,EACtC,CAAE,eAAAC,EAAgB,kBAAAC,CAAkB,EAAIC,EAAWC,CAAkB,EACrE,CAAC,CAAE,YAAAC,EAAa,SAAAC,CAAY,EAAAC,EAAuBC,CAAc,EAAIC,EACzE,CAAE,YAAa,GAAO,SAAU,EAAM,EACtCjB,CAAA,EAGFkB,EAAU,IAAM,CACV,CAACR,GAIHA,EADEG,EACgBR,EAEA,MAFY,CAGhC,EACC,CAACQ,CAAW,CAAC,EAEhBK,EAAU,IAAM,CACVT,IAAmBJ,GAAgB,OAAOI,EAAmB,KAC/DO,MAA6B,CAAE,YAAa,GAAO,SAAUG,EAAU,QAAW,EAAA,CACpF,EACC,CAACV,CAAc,CAAC,EAEnB,MAAMW,EAAsB,IAAY,CACjCP,GACHG,EAAe,CAAE,YAAa,GAAO,SAAU,EAAO,CAAA,CACxD,EAGFE,EAAU,KACC,SAAA,iBAAiB,UAAWE,CAAmB,EACjD,IAAY,CACR,SAAA,oBAAoB,UAAWA,CAAmB,CAAA,GAE5D,CAAE,CAAA,EAEL,MAAMC,EAAqB,IAAY,CACtBL,EAAAG,IAAc,CAAE,YAAa,CAACA,EAAU,YAAa,SAAU,CAACA,EAAU,QAAA,EAAW,CAAA,EAGhGG,EAAc,IAAY,CACzBb,GACHM,MAAoC,CAAE,YAAa,GAAM,SAAUI,EAAU,QAAW,EAAA,CAC1F,EAGII,EAAa,IAAY,CAC7BP,MAA6B,CAAE,YAAa,GAAO,SAAUG,EAAU,QAAW,EAAA,CAAA,EAG9EK,EAAiB,GAAkD,CACnE,EAAE,MAAQ,SACGR,EAAAG,IAAc,CAAE,YAAa,CAACA,EAAU,YAAa,SAAU,CAACA,EAAU,QAAA,EAAW,EAElG,EAAE,MAAQ,UACZH,EAAe,CAAE,YAAa,GAAO,SAAU,EAAO,CAAA,CACxD,EAGF,uCAEKS,EAAA,cAAAC,EAAA,CACC,IAAKnB,EACL,QAASc,EACT,QAASC,EACT,OAAQC,EACR,UAAWC,EACX,kBAAmBnB,EACnB,OAAAD,CAEC,EAAAF,CACH,EACCuB,EAAA,cAAAE,EAAA,CAAW,aAAAtB,EAA4B,cAAeE,EAAS,KAAK,UAAU,WAAYM,GAAeC,CAAA,EACvGX,CACH,CACF,CAEJ,EAOMS,EAAqBa,EAAM,cAA8B,CAC7D,eAAgB,MAClB,CAAC,EAEYG,EAAgC,CAAC,CAAE,SAAA1B,KAAe,CAC7D,KAAM,CAACO,EAAgBC,CAAiB,EAAImB,EAAiB,EAEtD,OAAAJ,EAAA,cAACb,EAAmB,SAAnB,CAA4B,MAAO,CAAE,eAAAH,EAAgB,kBAAAC,CAAkB,CAAA,EAAIR,CAAS,CAC9F"}

package/TooltipWord.js

@@ -0,0 +1,2 @@
+import e from"react";import{AnalyticsId as p}from"./constants.js";import l from"./components/Tooltip/TooltipWord/styles.module.scss";const n=e.forwardRef(({children:o,onClick:r,onFocus:a,onBlur:t,onKeyDown:d,testId:i,ariaDescribedById:s},m)=>e.createElement("span",{className:l.word,ref:m,tabIndex:0,onClick:r,onMouseEnter:a,onMouseLeave:t,onFocus:a,onBlur:t,onKeyDown:d,"aria-describedby":s,"data-testid":i,"data-analyticsid":p.Tooltip},o));n.displayName="TooltipWord";export{n as T};
+//# sourceMappingURL=TooltipWord.js.map

package/TooltipWord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipWord.js","sources":["../src/components/Tooltip/TooltipWord/TooltipWord.tsx"],"sourcesContent":["import React from 'react';\n\nimport { AnalyticsId } from '../../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface TooltipWordProps {\n  /** Ordet som skal ha en tilhørende tooltip */\n  children: string;\n  /** Callback når ordet klikkes på */\n  onClick: () => void;\n  /** Callback når ordet får fokus eller hovres over */\n  onFocus: () => void;\n  /** Callback når ordet mister fokus eller hover forsvinner */\n  onBlur: () => void;\n  /** Callback når det skrives på tastaturet */\n  onKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  /** ID til element som beskriver ordet */\n  ariaDescribedById: string;\n  /** Valgfri test-id */\n  testId?: string;\n}\n\nconst TooltipWord = React.forwardRef<HTMLSpanElement, TooltipWordProps>(\n  ({ children, onClick, onFocus, onBlur, onKeyDown, testId, ariaDescribedById }, ref) => (\n    <span\n      className={styles.word}\n      ref={ref}\n      tabIndex={0}\n      onClick={onClick}\n      onMouseEnter={onFocus}\n      onMouseLeave={onBlur}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      aria-describedby={ariaDescribedById}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Tooltip}\n    >\n      {children}\n    </span>\n  )\n);\n\nTooltipWord.displayName = 'TooltipWord';\n\nexport default TooltipWord;\n"],"names":["TooltipWord","React","children","onClick","onFocus","onBlur","onKeyDown","testId","ariaDescribedById","ref","styles","AnalyticsId"],"mappings":"qIAuBA,MAAMA,EAAcC,EAAM,WACxB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,OAAAC,EAAQ,kBAAAC,CAAqB,EAAAC,IAC5ER,EAAA,cAAA,OAAA,CACC,UAAWS,EAAO,KAClB,IAAAD,EACA,SAAU,EACV,QAAAN,EACA,aAAcC,EACd,aAAcC,EACd,QAAAD,EACA,OAAAC,EACA,UAAAC,EACA,mBAAkBE,EAClB,cAAaD,EACb,mBAAkBI,EAAY,OAAA,EAE7BT,CACH,CAEJ,EAEAF,EAAY,YAAc"}

package/__mocks__/uuid.js

@@ -1,2 +1,2 @@
-import{u as i}from"../uuid.js";const t={id:0};jest.spyOn(i,"uuid").mockImplementation(()=>(t.id++,`testid-${t.id}`));
+import{u as i}from"../uuid.js";import"../utils/environment.js";const t={id:0};jest.spyOn(i,"uuid").mockImplementation(()=>(t.id++,`testid-${t.id}`));
 //# sourceMappingURL=uuid.js.map

package/__mocks__/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\njest.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":["testId","uuidUtils"],"mappings":"+BAEA,MAAMA,EAAS,CACb,GAAI,CACN,EAKA,KAAK,MAAMC,EAAW,MAAM,EAAE,mBAAmB,KACxCD,EAAA,KACA,UAAUA,EAAO,KACzB"}
+{"version":3,"file":"uuid.js","sources":["../../src/__mocks__/uuid.ts"],"sourcesContent":["import * as uuidUtils from '../utils/uuid';\n\nconst testId = {\n  id: 0,\n};\n\n/**\n * Returnerer en unik, forutsigbar id hver gang uuid() kalles\n */\njest.spyOn(uuidUtils, 'uuid').mockImplementation(() => {\n  testId.id++;\n  return `testid-${testId.id}`;\n});\n"],"names":["testId","uuidUtils"],"mappings":"+DAEA,MAAMA,EAAS,CACb,GAAI,CACN,EAKA,KAAK,MAAMC,EAAW,MAAM,EAAE,mBAAmB,KACxCD,EAAA,KACA,UAAUA,EAAO,KACzB"}

package/components/AnchorLink/index.js

@@ -1,2 +1,2 @@
-import"../../AnchorLink.js";import{A as x}from"../../AnchorLink.js";import"react";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"./styles.module.scss";export{x as default};
+import"../../AnchorLink.js";import{A as L}from"../../AnchorLink.js";import"react";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"./styles.module.scss";export{L as default};
 //# sourceMappingURL=index.js.map

package/components/Avatar/index.js

@@ -1,2 +1,2 @@
-import a from"react";import{Icon as d}from"../Icons/Icon.js";import{AnalyticsId as p,IconSize as f}from"../../constants.js";import v from"../Icons/Check.js";import u from"classnames";import t from"./styles.module.scss";import{palette as c}from"../../theme/palette.js";import"../../hooks/useUuid.js";import"../../uuid.js";const z=a.forwardRef(function(s,l){const{children:e,className:m="",selected:r=!1,variant:o="normal",testId:n}=s,i=e.charAt(0).toLocaleUpperCase()+e.substring(1,2);return a.createElement("span",{className:u(t.avatar,r&&t["avatar--selected"],o==="black"&&t["avatar--black"],m),ref:l,"data-testid":n,"data-analyticsid":p.Avatar},r?a.createElement(d,{svgIcon:v,size:f.Small,color:o==="black"?c.neutral900:c.blueberry600}):i)});export{z as default};
+import a from"react";import{Icon as p}from"../Icons/Icon.js";import{AnalyticsId as d,IconSize as f}from"../../constants.js";import v from"../Icons/Check.js";import u from"classnames";import t from"./styles.module.scss";import{palette as c}from"../../theme/palette.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const C=a.forwardRef(function(s,m){const{children:r,className:l="",selected:e=!1,variant:o="normal",testId:i}=s,n=r.charAt(0).toLocaleUpperCase()+r.substring(1,2);return a.createElement("span",{className:u(t.avatar,e&&t["avatar--selected"],o==="black"&&t["avatar--black"],l),ref:m,"data-testid":i,"data-analyticsid":d.Avatar},e?a.createElement(p,{svgIcon:v,size:f.Small,color:o==="black"?c.neutral900:c.blueberry600}):n)});export{C as default};
 //# sourceMappingURL=index.js.map

package/components/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\ninterface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Avatar = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(styles.avatar, selected && styles['avatar--selected'], variant === 'black' && styles['avatar--black'], className)}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["Avatar","React","props","ref","children","className","selected","variant","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"iUAuBA,MAAMA,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC9G,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,OAAAC,CAAW,EAAAN,EAC7EO,EAAgBL,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWS,EAAGC,EAAO,OAAQL,GAAYK,EAAO,oBAAqBJ,IAAY,SAAWI,EAAO,iBAAkBN,CAAS,EAC9H,IAAAF,EACA,cAAaK,EACb,mBAAkBI,EAAY,MAAA,EAE7BN,EACEL,EAAA,cAAAY,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOR,IAAY,QAAUS,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\nimport Icon, { IconSize } from '../Icons';\nimport Check from '../Icons/Check';\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nimport { palette } from '../../theme/palette';\nimport { AnalyticsId } from '../../constants';\n\ninterface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst Avatar = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(styles.avatar, selected && styles['avatar--selected'], variant === 'black' && styles['avatar--black'], className)}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["Avatar","React","props","ref","children","className","selected","variant","testId","truncatedName","cn","styles","AnalyticsId","Icon","Check","IconSize","palette"],"mappings":"oWAuBA,MAAMA,EAASC,EAAM,WAAW,SAA4BC,EAAoBC,EAAsC,CAC9G,KAAA,CAAE,SAAAC,EAAU,UAAAC,EAAY,GAAI,SAAAC,EAAW,GAAO,QAAAC,EAAU,SAAU,OAAAC,CAAW,EAAAN,EAC7EO,EAAgBL,EAAS,OAAO,CAAC,EAAE,kBAAsB,EAAAA,EAAS,UAAU,EAAG,CAAC,EACtF,OACGH,EAAA,cAAA,OAAA,CACC,UAAWS,EAAGC,EAAO,OAAQL,GAAYK,EAAO,oBAAqBJ,IAAY,SAAWI,EAAO,iBAAkBN,CAAS,EAC9H,IAAAF,EACA,cAAaK,EACb,mBAAkBI,EAAY,MAAA,EAE7BN,EACEL,EAAA,cAAAY,EAAA,CAAK,QAASC,EAAO,KAAMC,EAAS,MAAO,MAAOR,IAAY,QAAUS,EAAQ,WAAaA,EAAQ,YAAA,CAAc,EAEpHP,CAEJ,CAEJ,CAAC"}

package/components/Button/index.js

@@ -1,2 +1,2 @@
-import"../../Button.js";import{B as q}from"../../Button.js";import"react";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"classnames";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"./styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";export{q as default};
+import"../../Button.js";import{B as v}from"../../Button.js";import"react";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"./styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";export{v as default};
 //# sourceMappingURL=index.js.map

package/components/ButtonWithModal/index.js

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

package/components/ButtonWithModal/index.js.map

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

package/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import"../../Checkbox.js";import{C as l,C as u}from"../../Checkbox.js";import"react";import"classnames";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"./styles.module.scss";export{l as Checkbox,u as default};
+import"../../Checkbox.js";import{C as u,C as g}from"../../Checkbox.js";import"react";import"classnames";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"./styles.module.scss";export{u as Checkbox,g as default};
 //# sourceMappingURL=index.js.map

package/components/Close/index.js

@@ -1,2 +1,2 @@
-import"../../Close.js";import{C as b}from"../../Close.js";import"react";import"../../theme/palette.js";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../Icons/X.js";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";export{b as default};
+import"../../Close.js";import{C as c}from"../../Close.js";import"react";import"../../theme/palette.js";import"../Icons/Icon.js";import"classnames";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/X.js";import"./styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";export{c as default};
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js

@@ -1,2 +1,2 @@
-import t,{useRef as f,useState as W}from"react";import v from"classnames";import{Icon as X}from"../Icons/Icon.js";import{KeyboardEventKey as r,AnalyticsId as j,IconSize as q}from"../../constants.js";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as F}from"../../hooks/useHover.js";import{useResizeObserver as G}from"../../hooks/useResizeObserver.js";import{useToggle as J}from"../../hooks/useToggle.js";import{useKeyboardEvent as Q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as Y}from"../../hooks/useOutsideEvent.js";import{useUuid as g}from"../../hooks/useUuid.js";import e from"./styles.module.scss";import Z from"../Icons/PlusSmall.js";import{B as M}from"../../Button.js";import"../../uuid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/usePrevious.js";import"../../theme/currys/color.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";var ee=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(ee||{});const Ce=s=>{const{label:R,placeholder:A,closeText:O="Lukk",noCloseButton:$=!1,onToggle:H,open:K=!1,children:_,mode:d="onwhite",transparent:S=!1,fluid:y=!1,testId:z,disabled:c}=s,p=f(null),b=f(null),{hoverRef:m,isHovered:B}=F(),{value:a,toggleValue:w}=J(!c&&K,H),i=f(t.Children.map(_,()=>t.createRef())),[h,L]=W(),{width:T}=G(m)||{},E=g(),x=g(),I=g(),k=()=>{var o;w(),(o=b.current)==null||o.focus()},u=()=>{var o;w(),(o=m.current)==null||o.focus()},U=o=>{var N;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){u();return}}else{k();return}const l=i.current.findIndex(V=>V.current===o.target);let n=l;o.key===r.Home?n=0:o.key===r.End?n=i.current.length-1:o.key===r.ArrowDown&&l<i.current.length-1?n=l+1:o.key===r.ArrowUp&&l>0?n=l-1:o.key===r.Enter&&l!==-1&&(n=l),n!==-1&&((N=i.current[n].current)==null||N.focus(),L(n))};Q("keydown",p,[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home],U),Y(p,()=>a&&u());const D=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:S,[e["dropdown__toggle--fluid"]]:y,[e["dropdown__toggle--open"]]:a}),P=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&k(),className:D,ref:m,"data-testid":z,"data-analyticsid":j.Dropdown,disabled:c,"aria-labelledby":x,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:x,className:e.dropdown__toggle__label},A),t.createElement(X,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:q.XSmall})),t.createElement("div",{className:P,style:{width:y?"100%":`${T}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof h<"u"?`${I}-${h}`:void 0,ref:b},t.Children.map(_,(o,l)=>{var n;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${I}-${l}`},t.cloneElement(o,{ref:(n=i.current)==null?void 0:n[l]}))})),!$&&t.createElement("div",{className:e.dropdown__close},t.createElement(M,{onClick:u,fluid:!0,"aria-expanded":a},O))))};export{ee as DropdownMode,Ce as default};
+import t,{useRef as f,useState as W}from"react";import v from"classnames";import{Icon as X}from"../Icons/Icon.js";import{KeyboardEventKey as r,AnalyticsId as j,IconSize as q}from"../../constants.js";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as F}from"../../hooks/useHover.js";import{useResizeObserver as G}from"../../hooks/useResizeObserver.js";import{useToggle as J}from"../../hooks/useToggle.js";import{useKeyboardEvent as Q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as Y}from"../../hooks/useOutsideEvent.js";import{useUuid as g}from"../../hooks/useUuid.js";import e from"./styles.module.scss";import Z from"../Icons/PlusSmall.js";import{B as M}from"../../Button.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/usePrevious.js";import"../../theme/currys/color.js";import"../../hooks/useIcons.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";var ee=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(ee||{});const Re=s=>{const{label:R,placeholder:A,closeText:O="Lukk",noCloseButton:$=!1,onToggle:H,open:K=!1,children:_,mode:d="onwhite",transparent:S=!1,fluid:y=!1,testId:z,disabled:c}=s,p=f(null),b=f(null),{hoverRef:m,isHovered:B}=F(),{value:a,toggleValue:w}=J(!c&&K,H),i=f(t.Children.map(_,()=>t.createRef())),[h,L]=W(),{width:T}=G(m)||{},E=g(),x=g(),I=g(),k=()=>{var o;w(),(o=b.current)==null||o.focus()},u=()=>{var o;w(),(o=m.current)==null||o.focus()},U=o=>{var N;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){u();return}}else{k();return}const l=i.current.findIndex(V=>V.current===o.target);let n=l;o.key===r.Home?n=0:o.key===r.End?n=i.current.length-1:o.key===r.ArrowDown&&l<i.current.length-1?n=l+1:o.key===r.ArrowUp&&l>0?n=l-1:o.key===r.Enter&&l!==-1&&(n=l),n!==-1&&((N=i.current[n].current)==null||N.focus(),L(n))};Q("keydown",p,[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home],U),Y(p,()=>a&&u());const D=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:S,[e["dropdown__toggle--fluid"]]:y,[e["dropdown__toggle--open"]]:a}),P=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&k(),className:D,ref:m,"data-testid":z,"data-analyticsid":j.Dropdown,disabled:c,"aria-labelledby":x,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:x,className:e.dropdown__toggle__label},A),t.createElement(X,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:q.XSmall})),t.createElement("div",{className:P,style:{width:y?"100%":`${T}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof h<"u"?`${I}-${h}`:void 0,ref:b},t.Children.map(_,(o,l)=>{var n;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${I}-${l}`},t.cloneElement(o,{ref:(n=i.current)==null?void 0:n[l]}))})),!$&&t.createElement("div",{className:e.dropdown__close},t.createElement(M,{onClick:u,fluid:!0,"aria-expanded":a},O))))};export{ee as DropdownMode,Re as default};
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon from '../Icons';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useResizeObserver,\n  useToggle,\n  useUuid,\n} from '../..';\n\nimport styles from './styles.module.scss';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Button from '../Button';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useResizeObserver(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = () => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = () => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent) => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(\n    'keydown',\n    dropdownRef,\n    [\n      KeyboardEventKey.ArrowDown,\n      KeyboardEventKey.ArrowUp,\n      KeyboardEventKey.End,\n      KeyboardEventKey.Enter,\n      KeyboardEventKey.Escape,\n      KeyboardEventKey.Home,\n    ],\n    handleKeyboardNavigation\n  );\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useResizeObserver","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","handleKeyboardNavigation","event","KeyboardEventKey","index","x","nextIndex","useKeyboardEvent","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon from '../Icons';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useResizeObserver,\n  useToggle,\n  useUuid,\n} from '../..';\n\nimport styles from './styles.module.scss';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Button from '../Button';\n\nexport enum DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed. */\n  onToggle?: (isOpen: boolean) => void;\n  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button. */\n  testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const { width: buttonWidth } = useResizeObserver(buttonRef) || {};\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = () => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = () => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent) => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(\n    'keydown',\n    dropdownRef,\n    [\n      KeyboardEventKey.ArrowDown,\n      KeyboardEventKey.ArrowUp,\n      KeyboardEventKey.End,\n      KeyboardEventKey.Enter,\n      KeyboardEventKey.Escape,\n      KeyboardEventKey.Home,\n    ],\n    handleKeyboardNavigation\n  );\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={() => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useResizeObserver","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","handleKeyboardNavigation","event","KeyboardEventKey","index","x","nextIndex","useKeyboardEvent","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button"],"mappings":"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"}

package/components/Duolist/Duolist.d.ts

@@ -18,14 +18,16 @@ interface DuolistProps {
     className?: string;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Width of the description column in percentage */
+    descriptionWidth?: number;
 }
 interface DuolistGroupProps {
     /** Determines which column is bold */
     boldColumn?: BoldColumn;
-    /** Sets text of the <dd> tag. */
-    description: string;
-    /** Sets text of the <dt> tag. */
-    term: string;
+    /** Sets content of the <dd> tag. */
+    description: React.ReactNode;
+    /** Sets content of the <dt> tag. */
+    term: React.ReactNode;
 }
 export declare const DuolistGroup: React.FC<DuolistGroupProps>;
 export declare const Duolist: React.FC<DuolistProps>;

package/components/Duolist/Duolist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,oBAAY,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5C,oBAAY,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5C,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iCAAiC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAcpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqC1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Duolist.d.ts","sourceRoot":"","sources":["../../../src/components/Duolist/Duolist.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,oBAAY,eAAe,GAAG,QAAQ,GAAG,MAAM,CAAC;AAChD,oBAAY,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC5C,oBAAY,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5C,UAAU,YAAY;IACpB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,iBAAiB;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,oCAAoC;IACpC,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAcpD,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAyC1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/Duolist/componentdata.json

@@ -1 +1 @@
-{"props":{"boldColumn":{"defaultValue":null,"description":"Determines which column is bold","name":"boldColumn","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"enum","raw":"BoldColumn","value":[{"value":"\"first\""},{"value":"\"second\""}]}},"description":{"defaultValue":null,"description":"Sets text of the <dd> tag.","name":"description","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"string"}},"term":{"defaultValue":null,"description":"Sets text of the <dt> tag.","name":"term","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"string"}}}}
+{"props":{"boldColumn":{"defaultValue":null,"description":"Determines which column is bold","name":"boldColumn","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":false,"type":{"name":"enum","raw":"BoldColumn","value":[{"value":"\"first\""},{"value":"\"second\""}]}},"description":{"defaultValue":null,"description":"Sets content of the <dd> tag.","name":"description","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}},"term":{"defaultValue":null,"description":"Sets content of the <dt> tag.","name":"term","parent":{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"},"declarations":[{"fileName":"src/components/Duolist/Duolist.tsx","name":"DuolistGroupProps"}],"required":true,"type":{"name":"ReactNode"}}}}

package/components/Duolist/index.js

@@ -1,2 +1,2 @@
-import t from"react";import o from"classnames";import e from"./styles.module.scss";import{AnalyticsId as N}from"../../constants.js";import{S as _}from"../../Spacer.js";import"../Spacer/styles.module.scss";const C=r=>{const{boldColumn:a="first",description:d,term:s}=r,l=a==="first",n=o(e.duolist__dt,{[e["duolist__dt--bold"]]:l}),i=o(e.duolist__dd,{[e["duolist__dd--bold"]]:!l});return t.createElement(t.Fragment,null,t.createElement("dt",{className:n},s),t.createElement("dd",{className:i},d))},S=r=>{const{boldColumn:a,border:d="no-border",label:s,variant:l="normal",children:n,className:i,testId:p}=r,m=d==="border",c=l==="line",f=m&&(s||c),b=o(e["duolist-wrapper"],{[e["duolist-wrapper--border"]]:m,[e["duolist-wrapper--extra-padding-top"]]:f},i),E=o(e.duolist,{[e["duolist--line"]]:c});return t.createElement("div",{className:b,"data-testid":p,"data-analyticsid":N.Duolist},s&&t.createElement(t.Fragment,null,s,t.createElement(_,null)),t.createElement("dl",{className:E},t.Children.map(n,u=>{if(u.type===C)return t.cloneElement(u,{boldColumn:a})})))};export{S as Duolist,C as DuolistGroup,S as default};
+import t from"react";import l from"classnames";import e from"./styles.module.scss";import{AnalyticsId as g}from"../../constants.js";import{S as h}from"../../Spacer.js";import"../Spacer/styles.module.scss";const x=r=>{const{boldColumn:a="first",description:d,term:o}=r,s=a==="first",n=l(e.duolist__dt,{[e["duolist__dt--bold"]]:s}),i=l(e.duolist__dd,{[e["duolist__dd--bold"]]:!s});return t.createElement(t.Fragment,null,t.createElement("dt",{className:n},o),t.createElement("dd",{className:i},d))},G=r=>{const{boldColumn:a,border:d="no-border",descriptionWidth:o,label:s,variant:n="normal",children:i,className:f,testId:C}=r,m=d==="border",c=n==="line",E=m&&(s||c),N=l(e["duolist-wrapper"],{[e["duolist-wrapper--border"]]:m,[e["duolist-wrapper--extra-padding-top"]]:E},f),_=l(e.duolist,{[e["duolist--line"]]:c}),y=o?o+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:N,"data-testid":C,"data-analyticsid":g.Duolist},s&&t.createElement(t.Fragment,null,s,t.createElement(h,null)),t.createElement("dl",{style:{gridTemplateColumns:`auto ${y}`},className:_},t.Children.map(i,u=>{var b;const p=u;if(p.type===x)return t.cloneElement(u,{boldColumn:(b=p.props.boldColumn)!=null?b:a})})))};export{G as Duolist,x as DuolistGroup,G as default};
 //# sourceMappingURL=index.js.map

package/components/Duolist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second';\nexport type Border = 'no-border' | 'border';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets text of the <dd> tag. */\n  description: string;\n  /** Sets text of the <dt> tag. */\n  term: string;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { boldColumn = 'first', description, term } = props;\n\n  const firstBold = boldColumn === 'first';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], { [duolistStyles['duolist__dt--bold']]: firstBold });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], { [duolistStyles['duolist__dd--bold']]: !firstBold });\n\n  return (\n    <>\n      <dt className={dtClassNames}>{term}</dt>\n      <dd className={ddClassNames}>{description}</dd>\n    </>\n  );\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const { boldColumn, border = 'no-border', label, variant = 'normal', children, className, testId } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n  });\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          if ((child as React.ReactElement<DuolistGroupProps>).type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, { boldColumn });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","boldColumn","description","term","firstBold","dtClassNames","classNames","duolistStyles","ddClassNames","React","Duolist","border","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","AnalyticsId","Spacer","child"],"mappings":"6MAsCO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,WAAAC,EAAa,QAAS,YAAAC,EAAa,KAAAC,GAASH,EAE9CI,EAAYH,IAAe,QAE3BI,EAAeC,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuBH,CAAA,CAAW,EAC3GI,EAAeF,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuB,CAACH,CAAW,CAAA,EAElH,uCAEKK,EAAA,cAAA,KAAA,CAAG,UAAWJ,CAAe,EAAAF,CAAK,EAClCM,EAAA,cAAA,KAAA,CAAG,UAAWD,CAAA,EAAeN,CAAY,CAC5C,CAEJ,EAEaQ,EAA2CV,GAAA,CAChD,KAAA,CAAE,WAAAC,EAAY,OAAAU,EAAS,YAAa,MAAAC,EAAO,QAAAC,EAAU,SAAU,SAAAC,EAAU,UAAAC,EAAW,OAAAC,CAAA,EAAWhB,EAE/FiB,EAAYN,IAAW,SACvBO,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GAEzCE,EAAwBd,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BU,EAC5C,CAACV,EAAc,uCAAwCY,CACzD,EACAJ,CAAA,EAGIM,EAAiBf,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBW,CAAA,CACnC,EAED,OACGT,EAAA,cAAA,MAAA,CAAI,UAAWW,EAAuB,cAAaJ,EAAQ,mBAAkBM,EAAY,OAAA,EACvFV,GAEIH,EAAA,cAAAA,EAAA,SAAA,KAAAG,kBACAW,EAAO,IAAA,CACV,EAEDd,EAAA,cAAA,KAAA,CAAG,UAAWY,CAAA,EACZZ,EAAM,SAAS,IAAIK,EAAWU,GAAmE,CAC3F,GAAAA,EAAgD,OAASzB,EAC5D,OAAOU,EAAM,aAAae,EAAgD,CAAE,WAAAvB,CAAY,CAAA,CAE3F,CAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second';\nexport type Border = 'no-border' | 'border';\n\ninterface DuolistProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Label of the Duolist */\n  border?: Border;\n  /** Label of the Duolist */\n  label?: TitleProps;\n  /** Sets the visual variant of the Duolist. */\n  variant?: DuolistVariants;\n  /** Sets the content of the Duolist. */\n  children: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Width of the description column in percentage */\n  descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n  /** Determines which column is bold */\n  boldColumn?: BoldColumn;\n  /** Sets content of the <dd> tag. */\n  description: React.ReactNode;\n  /** Sets content of the <dt> tag. */\n  term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n  const { boldColumn = 'first', description, term } = props;\n\n  const firstBold = boldColumn === 'first';\n\n  const dtClassNames = classNames(duolistStyles['duolist__dt'], { [duolistStyles['duolist__dt--bold']]: firstBold });\n  const ddClassNames = classNames(duolistStyles['duolist__dd'], { [duolistStyles['duolist__dd--bold']]: !firstBold });\n\n  return (\n    <>\n      <dt className={dtClassNames}>{term}</dt>\n      <dd className={ddClassNames}>{description}</dd>\n    </>\n  );\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n  const { boldColumn, border = 'no-border', descriptionWidth, label, variant = 'normal', children, className, testId } = props;\n\n  const hasBorder = border === 'border';\n  const hasLines = variant === 'line';\n  const extraPaddingTop = hasBorder && (label || hasLines);\n\n  const duolistWrapperClasses = classNames(\n    duolistStyles['duolist-wrapper'],\n    {\n      [duolistStyles['duolist-wrapper--border']]: hasBorder,\n      [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n    },\n    className\n  );\n\n  const duolistClasses = classNames(duolistStyles.duolist, {\n    [duolistStyles['duolist--line']]: hasLines,\n  });\n  const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n  return (\n    <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n      {label && (\n        <>\n          {label}\n          <Spacer />\n        </>\n      )}\n      <dl style={{ gridTemplateColumns: `auto ${duolistColumnStyle}` }} className={duolistClasses}>\n        {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n          const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n          if (duolistGroup.type === DuolistGroup) {\n            return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n              boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n            });\n          }\n        })}\n      </dl>\n    </div>\n  );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","boldColumn","description","term","firstBold","dtClassNames","classNames","duolistStyles","ddClassNames","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","_a"],"mappings":"6MAwCO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,WAAAC,EAAa,QAAS,YAAAC,EAAa,KAAAC,GAASH,EAE9CI,EAAYH,IAAe,QAE3BI,EAAeC,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuBH,CAAA,CAAW,EAC3GI,EAAeF,EAAWC,EAAc,YAAgB,CAAE,CAACA,EAAc,sBAAuB,CAACH,CAAW,CAAA,EAElH,uCAEKK,EAAA,cAAA,KAAA,CAAG,UAAWJ,CAAe,EAAAF,CAAK,EAClCM,EAAA,cAAA,KAAA,CAAG,UAAWD,CAAA,EAAeN,CAAY,CAC5C,CAEJ,EAEaQ,EAA2CV,GAAA,CAChD,KAAA,CAAE,WAAAC,EAAY,OAAAU,EAAS,YAAa,iBAAAC,EAAkB,MAAAC,EAAO,QAAAC,EAAU,SAAU,SAAAC,EAAU,UAAAC,EAAW,OAAAC,CAAA,EAAWjB,EAEjHkB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GAEzCE,EAAwBf,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BW,EAC5C,CAACX,EAAc,uCAAwCa,CACzD,EACAJ,CAAA,EAGIM,EAAiBhB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBY,CAAA,CACnC,EACKI,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,kBACAY,EAAO,IAAA,CACV,EAEDhB,EAAA,cAAA,KAAA,CAAG,MAAO,CAAE,oBAAqB,QAAQc,GAAqB,EAAG,UAAWD,CAAA,EAC1Eb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,OAChG,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAAS5B,EACjB,OAAAU,EAAM,aAAaiB,EAAgD,CACxE,YAAYE,EAAAD,EAAa,MAAM,aAAnB,KAAAC,EAAiC3B,CAAA,CAC9C,CAEJ,CAAA,CACH,CACF,CAEJ"}

package/components/Duolist/styles.module.scss

@@ -18,7 +18,6 @@
   font-size: $font-size-sm;
   margin: 0;
   display: grid;
-  grid-template-columns: auto minmax(60%, 1fr);
 
   @media (min-width: map-get($grid-breakpoints, sm)) {
     font-size: $font-size-md;

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import n,{useState as O,useRef as b,useEffect as h}from"react";import{Icon as g}from"../Icons/Icon.js";import{ZIndex as P,AnalyticsId as k,IconSize as f}from"../../constants.js";import{useHover as U}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import e from"./styles.module.scss";import s from"classnames";import $ from"../Icons/ChevronDown.js";import S from"../Icons/ChevronUp.js";import{B as j}from"../../Button.js";import{useSticky as q}from"../../hooks/useSticky.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../../hooks/useLayoutEvent.js";var F=(o=>(o.small="small",o.large="large",o))(F||{});const ve=o=>{const{title:u,children:z,size:r="small",color:v,svgIcon:i,expanded:d=!1,noNestedLine:w=!1,sticky:R=!1,testId:E,onExpand:c,renderChildrenWhenClosed:W=!1}=o,[t,m]=O(d),B=Z(t),y=b(null),l=b(null),{isHovered:_}=U(l),{isOutsideWindow:H,isLeavingWindow:p,offsetHeight:I,contentWidth:C}=q(y,l),a=R&&t&&H;h(()=>{d!==t&&m(d)},[d]),h(()=>{c&&t!==!!B&&c(t)},[t,c]);const N=x=>n.createElement("span",{className:s(e.expander__icon,e[`expander__icon--${x}`])},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall,isHovered:_})),T=s(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${v||"neutral"}`],r==="large"&&i&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!p&&e["expander__trigger--sticky"],a&&p&&e["expander__trigger--absolute"]),X=()=>n.createElement("button",{type:"button",className:T,style:{zIndex:_||a?P.ExpanderTrigger:void 0,width:a&&C?`${C}px`:void 0},"aria-expanded":t,ref:l,onClick:()=>m(!t),"data-testid":E,"data-analyticsid":k.Expander},r==="small"&&N("left"),i&&n.createElement("span",{className:s(e.expander__icon,e["expander__icon--left"])},n.createElement(g,{svgIcon:i,size:f.XSmall,isHovered:_})),u,r==="large"&&N("right")),L=s(e.expander__button,t&&e["expander__button--expanded"],a&&!p&&e["expander__button--sticky"],a&&p&&e["expander__button--absolute"]),A=()=>n.createElement(j,{variant:"borderless",className:L,"aria-expanded":t,ref:l,onClick:()=>m(!t),testId:E,"data-analyticsid":k.Expander},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall}),u),D=()=>{if(!W&&!t)return null;const x=s(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${v||"neutral"}`],r==="large"&&i&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!w&&e["expander__content--nested-line"]);return n.createElement("div",{className:x},z)};return n.createElement("div",{className:e.expander,ref:y,style:{paddingTop:a&&I?`${I}px`:void 0}},r==="large"?X():A(),D())};export{F as ExpanderSize,ve as default};
+import n,{useState as O,useRef as b,useEffect as h}from"react";import{Icon as g}from"../Icons/Icon.js";import{ZIndex as P,AnalyticsId as k,IconSize as f}from"../../constants.js";import{useHover as U}from"../../hooks/useHover.js";import{usePrevious as Z}from"../../hooks/usePrevious.js";import e from"./styles.module.scss";import s from"classnames";import $ from"../Icons/ChevronDown.js";import S from"../Icons/ChevronUp.js";import{B as j}from"../../Button.js";import{useSticky as q}from"../../hooks/useSticky.js";import"../../hooks/useUuid.js";import"../../uuid.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"../../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"../../hooks/useLayoutEvent.js";var F=(o=>(o.small="small",o.large="large",o))(F||{});const Ee=o=>{const{title:u,children:z,size:r="small",color:v,svgIcon:i,expanded:d=!1,noNestedLine:w=!1,sticky:R=!1,testId:E,onExpand:c,renderChildrenWhenClosed:W=!1}=o,[t,m]=O(d),B=Z(t),y=b(null),l=b(null),{isHovered:_}=U(l),{isOutsideWindow:H,isLeavingWindow:p,offsetHeight:I,contentWidth:C}=q(y,l),a=R&&t&&H;h(()=>{d!==t&&m(d)},[d]),h(()=>{c&&t!==!!B&&c(t)},[t,c]);const N=x=>n.createElement("span",{className:s(e.expander__icon,e[`expander__icon--${x}`])},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall,isHovered:_})),T=s(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${v||"neutral"}`],r==="large"&&i&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!p&&e["expander__trigger--sticky"],a&&p&&e["expander__trigger--absolute"]),X=()=>n.createElement("button",{type:"button",className:T,style:{zIndex:_||a?P.ExpanderTrigger:void 0,width:a&&C?`${C}px`:void 0},"aria-expanded":t,ref:l,onClick:()=>m(!t),"data-testid":E,"data-analyticsid":k.Expander},r==="small"&&N("left"),i&&n.createElement("span",{className:s(e.expander__icon,e["expander__icon--left"])},n.createElement(g,{svgIcon:i,size:f.XSmall,isHovered:_})),u,r==="large"&&N("right")),L=s(e.expander__button,t&&e["expander__button--expanded"],a&&!p&&e["expander__button--sticky"],a&&p&&e["expander__button--absolute"]),A=()=>n.createElement(j,{variant:"borderless",className:L,"aria-expanded":t,ref:l,onClick:()=>m(!t),testId:E,"data-analyticsid":k.Expander},n.createElement(g,{svgIcon:t?S:$,size:f.XSmall}),u),D=()=>{if(!W&&!t)return null;const x=s(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${v||"neutral"}`],r==="large"&&i&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!w&&e["expander__content--nested-line"]);return n.createElement("div",{className:x},z)};return n.createElement("div",{className:e.expander,ref:y,style:{paddingTop:a&&I?`${I}px`:void 0}},r==="large"?X():A(),D())};export{F as ExpanderSize,Ee as default};
 //# sourceMappingURL=index.js.map

package/components/Expander/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport classNames from 'classnames';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Button from '../Button';\nimport { useSticky } from '../../hooks/useSticky';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\ninterface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","useEffect","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\nimport classNames from 'classnames';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Button from '../Button';\nimport { useSticky } from '../../hooks/useSticky';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\ninterface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","useEffect","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","buttonClassName","renderButton","Button","renderContent","contentClassName"],"mappings":"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"}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import r,{useState as T,useRef as V,useEffect as y}from"react";import{Icon as Z}from"../Icons/Icon.js";import{AnalyticsId as P,ZIndex as q,IconSize as z}from"../../constants.js";import F from"../Icons/ChevronUp.js";import G from"../Icons/ChevronDown.js";import{useHover as K}from"../../hooks/useHover.js";import{usePrevious as M}from"../../hooks/usePrevious.js";import{useBreakpoint as Q,Breakpoint as Y}from"../../hooks/useBreakpoint.js";import u from"classnames";import t from"./styles.module.scss";import{useUuid as v}from"../../hooks/useUuid.js";import{useSticky as S}from"../../hooks/useSticky.js";import"../../uuid.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";const ee=l=>{var{top:d,left:o,bottom:f,right:E}=l.getBoundingClientRect();return d>=0&&o>=0&&f<=(window.innerHeight||document.documentElement.clientHeight)&&E<=(window.innerWidth||document.documentElement.clientWidth)},ne=l=>d=>{l.forEach(o=>{typeof o=="function"?o(d):o!=null&&(o.current=d)})},A=r.forwardRef((l,d)=>{const{id:o,children:f,padding:E=!0,color:k="neutral",className:b="",icon:I,large:L=!1,title:m,expanded:x=!1,sticky:R,testId:W,handleExpanderClick:$,onExpand:c,renderChildrenWhenClosed:g}=l,[i,B]=T(x),w=M(i),N=V(null),C=V(null),{isHovered:_}=K(C),H=Q(),{isOutsideWindow:h,isLeavingWindow:n,offsetHeight:e,contentWidth:s}=S(N,C),a=R&&i&&h,p=typeof m=="object",j=u(b,{[t["expander-list__item--jsx"]]:p}),U=u(t["expander-list-link"],t[`expander-list-link--${k}`],{[t["expander-list-link--closed"]]:!i,[t["expander-list-link--large"]]:L,[t["expander-list-link--jsx"]]:p,[t["expander-list-link--sticky"]]:a&&!n,[t["expander-list-link--absolute"]]:a&&n}),X=u(t["expander-list-link__title"],{[t["expander-list-link__title--string"]]:!p,[t["expander-list-link__title--jsx"]]:p});y(()=>{x!==i&&B(x)},[x]),y(()=>{c&&i!==!!w&&c(i)},[i,c]);const D=()=>{if(!g&&!i)return null;const J=u(t["expander-list-link__main-content"],i&&t["expander-list-link__main-content--expanded"],E?t["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},f)};return r.createElement("li",{className:j,ref:ne([d,N]),style:{paddingTop:a&&e?`${e}px`:void 0}},r.createElement("button",{type:"button",id:o,onClick:$,"data-testid":W,"data-analyticsid":P.ExpanderListExpander,className:U,ref:C,"aria-expanded":i,style:{zIndex:_||a?q.ExpanderTrigger:void 0,width:a&&s?`${s}px`:void 0}},I&&r.createElement("span",{className:t["expander-list-link__icon"]},r.cloneElement(I,{size:H===Y.xs?z.XSmall:z.Small,isHovered:_})),r.createElement("span",{className:X},m),r.createElement("span",{className:t["expander-list-link__chevron"]},r.createElement(Z,{size:z.XSmall,svgIcon:i?F:G,isHovered:_}))),D())}),O=l=>r.isValidElement(l)&&l.type===A,te=r.forwardRef((l,d)=>{const{children:o,childPadding:f=!0,large:E,isOpen:k=!1,renderChildrenWhenClosed:b=!1,color:I,className:L="",accordion:m=!1,topBorder:x=!0,bottomBorder:R=!0,sticky:W=!1,testId:$}=l,[c,g]=T(),[i,B]=T(),w=v(),N=r.Children.count(o),C=u(t["expander-list"],L);function _(n,e){g(s=>m?{[e]:!(s!=null&&s[e])}:{...s,[e]:!(s!=null&&s[e])}),B(n.currentTarget)}const H=n=>u(t["expander-list__item"],{[t["expander-list__item--top"]]:n===0&&x,[t["expander-list__item--no-bottom"]]:n===N-1&&!R}),h=n=>`${w}-${n}`;return y(()=>{m&&i&&!ee(i)&&i.scrollIntoView()},[m,i]),y(()=>{if(k){const n=h(0);g(e=>m?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[k]),y(()=>{var n;if(!k){const e=(n=r.Children.map(o,s=>{if(O(s))return s}))==null?void 0:n.reduce((s,a,p)=>(typeof a.props.expanded<"u"&&(s[h(p)]=a.props.expanded),s),{});g({...c,...e})}},[o]),r.createElement("ul",{className:C,ref:d,"data-testid":$,"data-analyticsid":P.ExpanderList},r.Children.map(o,(n,e)=>{if(O(n)){const s=h(e),a=c==null?void 0:c[s],p=H(e);return r.cloneElement(n,{id:s,key:e,expanded:a,padding:f,color:I,large:E,sticky:W,"aria-expanded":a,className:p,handleExpanderClick:j=>_(j,`${w}-${e}`),renderChildrenWhenClosed:b})}return n}))});te.Expander=A;A.displayName="ExpanderList.Expander";export{te as ExpanderList,te as default};
+import r,{useState as A,useRef as V,useEffect as _}from"react";import{Icon as Z}from"../Icons/Icon.js";import{AnalyticsId as P,ZIndex as q,IconSize as T}from"../../constants.js";import F from"../Icons/ChevronUp.js";import G from"../Icons/ChevronDown.js";import{useHover as K}from"../../hooks/useHover.js";import{usePrevious as M}from"../../hooks/usePrevious.js";import{useBreakpoint as Q,Breakpoint as Y}from"../../hooks/useBreakpoint.js";import{isElementInViewport as v}from"../../utils/viewport.js";import x from"classnames";import t from"./styles.module.scss";import{useUuid as S}from"../../hooks/useUuid.js";import{useSticky as ee}from"../../hooks/useSticky.js";import{mergeRefs as ne}from"../../utils/refs.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";const H=r.forwardRef((c,I)=>{const{id:p,children:N,padding:w=!0,color:f="neutral",className:L="",icon:g,large:b=!1,title:d,expanded:m=!1,sticky:R,testId:$,handleExpanderClick:W,onExpand:o,renderChildrenWhenClosed:u}=c,[i,j]=A(m),y=M(i),h=V(null),E=V(null),{isHovered:k}=K(E),z=Q(),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:s}=ee(h,E),a=R&&i&&C,l=typeof d=="object",B=x(L,{[t["expander-list__item--jsx"]]:l}),U=x(t["expander-list-link"],t[`expander-list-link--${f}`],{[t["expander-list-link--closed"]]:!i,[t["expander-list-link--large"]]:b,[t["expander-list-link--jsx"]]:l,[t["expander-list-link--sticky"]]:a&&!n,[t["expander-list-link--absolute"]]:a&&n}),X=x(t["expander-list-link__title"],{[t["expander-list-link__title--string"]]:!l,[t["expander-list-link__title--jsx"]]:l});_(()=>{m!==i&&j(m)},[m]),_(()=>{o&&i!==!!y&&o(i)},[i,o]);const D=()=>{if(!u&&!i)return null;const J=x(t["expander-list-link__main-content"],i&&t["expander-list-link__main-content--expanded"],w?t["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},N)};return r.createElement("li",{className:B,ref:ne([I,h]),style:{paddingTop:a&&e?`${e}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":$,"data-analyticsid":P.ExpanderListExpander,className:U,ref:E,"aria-expanded":i,style:{zIndex:k||a?q.ExpanderTrigger:void 0,width:a&&s?`${s}px`:void 0}},g&&r.createElement("span",{className:t["expander-list-link__icon"]},r.cloneElement(g,{size:z===Y.xs?T.XSmall:T.Small,isHovered:k})),r.createElement("span",{className:X},d),r.createElement("span",{className:t["expander-list-link__chevron"]},r.createElement(Z,{size:T.XSmall,svgIcon:i?F:G,isHovered:k}))),D())}),O=c=>r.isValidElement(c)&&c.type===H,te=r.forwardRef((c,I)=>{const{children:p,childPadding:N=!0,large:w,isOpen:f=!1,renderChildrenWhenClosed:L=!1,color:g,className:b="",accordion:d=!1,topBorder:m=!0,bottomBorder:R=!0,sticky:$=!1,testId:W}=c,[o,u]=A(),[i,j]=A(),y=S(),h=r.Children.count(p),E=x(t["expander-list"],b);function k(n,e){u(s=>d?{[e]:!(s!=null&&s[e])}:{...s,[e]:!(s!=null&&s[e])}),j(n.currentTarget)}const z=n=>x(t["expander-list__item"],{[t["expander-list__item--top"]]:n===0&&m,[t["expander-list__item--no-bottom"]]:n===h-1&&!R}),C=n=>`${y}-${n}`;return _(()=>{d&&i&&!v(i)&&i.scrollIntoView()},[d,i]),_(()=>{if(f){const n=C(0);u(e=>d?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),_(()=>{var n;if(!f){const e=(n=r.Children.map(p,s=>{if(O(s))return s}))==null?void 0:n.reduce((s,a,l)=>(typeof a.props.expanded<"u"&&(s[C(l)]=a.props.expanded),s),{});u({...o,...e})}},[p]),r.createElement("ul",{className:E,ref:I,"data-testid":W,"data-analyticsid":P.ExpanderList},r.Children.map(p,(n,e)=>{if(O(n)){const s=C(e),a=o==null?void 0:o[s],l=z(e);return r.cloneElement(n,{id:s,key:e,expanded:a,padding:N,color:g,large:w,sticky:$,"aria-expanded":a,className:l,handleExpanderClick:B=>k(B,`${y}-${e}`),renderChildrenWhenClosed:L})}return n}))});te.Expander=H;H.displayName="ExpanderList.Expander";export{te as ExpanderList,te as default};
 //# sourceMappingURL=index.js.map