@helsenorge/designsystem-react 4.3.0 → 4.4.0

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';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\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}\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,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\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  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  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\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        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormMode } from '../../constants';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\ninterface TextareaProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLTextAreaElement>,\n    | 'aria-describedby'\n    | 'autoFocus'\n    | 'disabled'\n    | 'name'\n    | 'autoComplete'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'defaultValue'\n    | 'onChange'\n  > {\n  /** max character limit in textarea  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n  /** Width of textarea in characters (approximate) */\n  width?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** If true, the component will have a bottom margin. */\n  marginBottom?: boolean;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Changes the visuals of the textarea */\n  mode?: keyof typeof FormMode;\n  /** Label of the input */\n  label?: React.ReactNode;\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}\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,\n    maxText,\n    width,\n    testId,\n    defaultValue,\n    marginBottom: gutterBottom,\n    transparent,\n    mode = FormMode.onwhite,\n    label,\n    textareaId = uuid(),\n    minRows = 3,\n    maxRows = 10,\n    grow,\n    errorText,\n    autoFocus,\n    disabled,\n    name,\n    autoComplete,\n    placeholder,\n    readOnly,\n    required,\n    onChange,\n    ...rest\n  } = props;\n\n  const [rows, setRows] = useState(minRows);\n  const [textareaInput, setTextareaInput] = useState(defaultValue || '');\n  const referanse = useRef<HTMLDivElement>(null);\n\n  const resizeHeight = (target: HTMLTextAreaElement): void => {\n    const textareaLineHeight = 28;\n\n    const previousRows = target.rows;\n    target.rows = minRows; // reset number of rows in textarea\n\n    const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n    if (currentRows === previousRows) {\n      target.rows = currentRows;\n    }\n\n    if (currentRows >= maxRows) {\n      target.rows = maxRows;\n      target.scrollTop = target.scrollHeight;\n    }\n\n    if (currentRows < maxRows) {\n      setRows(currentRows);\n    } else {\n      setRows(maxRows);\n    }\n  };\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || maxCharactersExceeded;\n\n  const textareaWrapperClass = cn(styles.textarea, {\n    [styles['textarea--gutterBottom']]: gutterBottom,\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  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  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (grow) {\n      resizeHeight(e.target);\n    }\n    setTextareaInput(e.target.value);\n  };\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n    handleChange(e);\n  };\n\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        {renderLabel(label, textareaId, mode as FormMode, disabled)}\n        <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n          <textarea\n            rows={rows}\n            defaultValue={defaultValue}\n            id={textareaId}\n            className={textareaClass}\n            ref={ref}\n            aria-describedby={props['aria-describedby'] ?? undefined}\n            aria-invalid={!!onError}\n            // eslint-disable-next-line jsx-a11y/no-autofocus\n            autoFocus={autoFocus}\n            disabled={disabled}\n            name={name}\n            autoComplete={autoComplete ? autoComplete : undefined}\n            placeholder={placeholder}\n            readOnly={readOnly}\n            required={required}\n            onChange={onChangeHandler}\n            {...rest}\n          />\n        </div>\n        {maxCharacters && (\n          <MaxCharacters\n            maxCharacters={maxCharacters}\n            length={textareaInput.toString().length}\n            maxText={maxText}\n            mode={mode}\n            maxWidth={maxWidth}\n          />\n        )}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n"],"names":["getTextareaMaxWidth","characters","paddingWidth","scrollbarWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Textarea","React","props","ref","maxCharacters","maxText","width","testId","defaultValue","gutterBottom","transparent","mode","FormMode","label","textareaId","uuid","minRows","maxRows","grow","errorText","autoFocus","disabled","name","autoComplete","placeholder","readOnly","required","onChange","rest","rows","setRows","useState","textareaInput","setTextareaInput","referanse","useRef","resizeHeight","target","previousRows","currentRows","onDark","onBlueberry","maxCharactersExceeded","onError","textareaWrapperClass","cn","styles","contentWrapperClass","textareaClass","useEffect","_a","_b","textarea","_c","handleChange","onChangeHandler","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Textarea$1"],"mappings":"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"}

package/Trigger.js

@@ -0,0 +1,2 @@
+import e from"react";import I from"classnames";import{getIcon as M,Icon as T}from"./components/Icons/Icon.js";import{IconSize as d,AnalyticsId as f}from"./constants.js";import{useHover as Z}from"./hooks/useHover.js";import{getColor as h}from"./theme/currys/color.js";import{getAriaLabelAttributes as $}from"./utils/accessibility.js";import{mergeRefs as A}from"./utils/refs.js";import l from"./components/Trigger/styles.module.scss";const C=({size:t,isHovered:o})=>M({size:t,isHovered:o,normal:e.createElement("path",{d:"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z"}),normalHover:e.createElement("path",{d:"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z"}),xSmall:e.createElement("path",{d:"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678"}),xSmallHover:e.createElement("path",{d:"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z"})}),N=C,R={help:N},w={medium:d.XSmall,large:d.Small},z=(t,o,a)=>{if(t==="ondark")return"white";const r=a?800:600;if(o==="help")return h("plum",r);if(o==="info")return h("blueberry",r)},u=e.forwardRef(({ariaLabel:t,ariaLabelledById:o,variant:a="help",mode:r="onlight",size:n="medium",selected:c=!1,isHovered:i,htmlMarkup:b="button",className:S,testId:m,...H},y)=>{const{isHovered:s,hoverRef:E}=Z(),g=I(l.trigger,r==="onlight"&&l[`trigger--${a}`],l[`trigger--${r}`],l[`trigger--${n}`],i&&l["trigger--hovered"],c&&l["trigger--selected"],S),v=z(r,a,i||s||c),p=e.createElement(T,{svgIcon:R[a],size:w[n],color:v,isHovered:i||s});if(b==="span")return e.createElement("span",{"data-testid":m,"data-analyticsid":f.Trigger,className:g},p);const x=$({label:t,id:o});return e.createElement("button",{"aria-label":t,type:"button","data-testid":m,"data-analyticsid":f.Trigger,className:g,ref:A([y,E]),"aria-expanded":c,...x,...H},p)});u.displayName="Trigger";const J=u;export{J as T};
+//# sourceMappingURL=Trigger.js.map

package/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../src/components/Trigger/HelpSign.tsx","../src/components/Trigger/Trigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport { getIcon, SvgPathProps } from '../Icons';\n\nconst HelpSign: React.FC<SvgPathProps> = ({ size, isHovered }: SvgPathProps): React.ReactElement => {\n  const normal = (\n    <path d=\"M18.854 19.678c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.222 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.84-3.424l1.042-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.136 1.022l-2.564-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 10.186c0-.908.726-1.678 1.656-1.678.908 0 1.656.77 1.656 1.678 0 .907-.748 1.657-1.656 1.657-.93 0-1.656-.75-1.656-1.657Z\" />\n  );\n\n  const normalHover = (\n    <path d=\"M18.854 18.178c0-2.268 1.701-4.74 5.126-4.74 3.358 0 5.172 2.223 5.172 4.536 0 1.793-.952 3.064-2.268 3.992l-.976.682c-.749.521-1.134 1.27-1.134 2.154 0 .047 0 .16.023.296h-2.269a46.85 46.85 0 0 0-.01-.139 8.554 8.554 0 0 1-.036-.724c0-1.36.522-2.471 1.838-3.424l1.044-.75c.75-.544 1.066-1.201 1.066-1.974 0-1.178-.793-2.29-2.45-2.29-1.679 0-2.563 1.293-2.563 2.585 0 .34.045.772.135 1.022l-2.563-.181a3.903 3.903 0 0 1-.135-1.044Zm3.176 11.686c0-.908.725-1.678 1.655-1.678.908 0 1.657.77 1.657 1.678 0 .907-.749 1.657-1.657 1.657-.93 0-1.655-.75-1.655-1.657Z\" />\n  );\n\n  const xSmall = (\n    <path d=\"M23.98 14.937c-3.425 0-5.127 2.473-5.127 4.741 0 .363.047.726.137 1.044l2.563.182c-.09-.25-.136-.681-.136-1.022 0-1.292.885-2.586 2.563-2.586 1.658 0 2.45 1.112 2.45 2.291 0 .772-.317 1.43-1.065 1.974l-1.043.749c-1.317.953-1.84 2.065-1.84 3.425 0 .319.024.567.047.862h2.267c-.021-.135-.021-.25-.021-.295 0-.884.385-1.633 1.133-2.154l.976-.681c1.317-.93 2.27-2.2 2.27-3.993 0-2.314-1.816-4.537-5.174-4.537m-.294 13.248c-.93 0-1.656.773-1.656 1.678a1.65 1.65 0 0 0 1.656 1.657c.907 0 1.656-.748 1.656-1.657 0-.905-.749-1.678-1.656-1.678\" />\n  );\n\n  const xSmallHover = (\n    <path d=\"M18.853 18.289c0-2.268 1.701-4.742 5.127-4.742 3.357 0 5.173 2.223 5.173 4.537 0 1.794-.953 3.065-2.27 3.994l-.976.681c-.747.52-1.133 1.27-1.133 2.154 0 .046 0 .16.022.295h-2.267a39.324 39.324 0 0 0-.01-.125 8.468 8.468 0 0 1-.037-.737c0-1.36.523-2.472 1.839-3.425l1.043-.75c.748-.543 1.065-1.201 1.065-1.973 0-1.18-.792-2.29-2.45-2.29-1.678 0-2.562 1.293-2.562 2.585 0 .341.045.772.135 1.022l-2.563-.183a3.914 3.914 0 0 1-.136-1.043Zm3.176 11.575c0-.907.726-1.679 1.656-1.679.908 0 1.657.772 1.657 1.68 0 .907-.749 1.656-1.657 1.656-.93 0-1.656-.749-1.656-1.657Z\" />\n  );\n\n  return getIcon({ size, isHovered, normal, normalHover, xSmall, xSmallHover });\n};\n\nexport default HelpSign;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport HelpSign from './HelpSign';\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { getColor } from '../../theme/currys';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport Icon, { SvgIcon } from '../Icons';\n\nimport styles from './styles.module.scss';\n\nexport type TriggerTags = 'button' | 'span';\n\nexport type TriggerVariant = 'help'; // @todo Support variant='info' in later version\n\nexport type TriggerSize = 'medium' | 'large';\n\nexport type TriggerMode = 'onlight' | 'ondark';\n\nexport interface TriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'aria-haspopup' | 'aria-controls'> {\n  /**\n   * Sets aria-label of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabel?: string;\n  /**\n   * Sets aria-labelledby of the trigger. ariaLabel or ariaLabelledById MUST be set!\n   */\n  ariaLabelledById?: string;\n  /**\n   * Controls the icon and color. Default: help.\n   */\n  variant?: TriggerVariant;\n  /**\n   * Changes the design based on the background the trigger is placed on. Default: onlight.\n   */\n  mode?: TriggerMode;\n  /**\n   * Size of the trigger. Default: medium.\n   */\n  size?: TriggerSize;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Indicates that the trigger is hovered. Used in combination with htmlMarkup=span to force visual hover state.\n   */\n  isHovered?: boolean;\n  /**\n   * Changes the underlying element of the trigger. If set to span, the trigger will be a non-interactive icon. Default: button\n   */\n  htmlMarkup?: TriggerTags;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Optional test id.\n   */\n  testId?: string;\n}\n\nconst iconMap: Record<TriggerVariant, SvgIcon> = {\n  help: HelpSign,\n  //info: InfoSignStroke, // @todo Support variant='info' in later version\n};\n\nconst iconSizeMap: Record<TriggerSize, IconSize> = {\n  medium: IconSize.XSmall,\n  large: IconSize.Small,\n};\n\nconst getIconColor = (mode: TriggerMode, variant: TriggerVariant, isActive: boolean): string | undefined => {\n  if (mode === 'ondark') {\n    return 'white';\n  }\n\n  const depth = isActive ? 800 : 600;\n\n  if (variant === 'help') {\n    return getColor('plum', depth);\n  }\n\n  if (variant === 'info') {\n    return getColor('blueberry', depth);\n  }\n};\n\nconst Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(\n  (\n    {\n      ariaLabel,\n      ariaLabelledById,\n      variant = 'help',\n      mode = 'onlight',\n      size = 'medium',\n      selected = false,\n      isHovered,\n      htmlMarkup = 'button',\n      className,\n      testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const { isHovered: buttonIsHovered, hoverRef } = useHover<HTMLButtonElement>();\n\n    const triggerClasses = classNames(\n      styles.trigger,\n      mode === 'onlight' && styles[`trigger--${variant}`], // variants look the same when mode=ondark\n      styles[`trigger--${mode}`],\n      styles[`trigger--${size}`],\n      isHovered && styles[`trigger--hovered`],\n      selected && styles[`trigger--selected`],\n      className\n    );\n\n    const iconColor = getIconColor(mode, variant, isHovered || buttonIsHovered || selected);\n\n    const icon = <Icon svgIcon={iconMap[variant]} size={iconSizeMap[size]} color={iconColor} isHovered={isHovered || buttonIsHovered} />;\n\n    if (htmlMarkup === 'span') {\n      return (\n        <span data-testid={testId} data-analyticsid={AnalyticsId.Trigger} className={triggerClasses}>\n          {icon}\n        </span>\n      );\n    }\n\n    const ariaLabelAttributes = getAriaLabelAttributes({ label: ariaLabel, id: ariaLabelledById });\n\n    return (\n      <button\n        aria-label={ariaLabel}\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Trigger}\n        className={triggerClasses}\n        ref={mergeRefs([ref, hoverRef])}\n        aria-expanded={selected}\n        {...ariaLabelAttributes}\n        {...rest}\n      >\n        {icon}\n      </button>\n    );\n  }\n);\n\nTrigger.displayName = 'Trigger';\n\nexport default Trigger;\n"],"names":["HelpSign","size","isHovered","getIcon","React","HelpSign$1","iconMap","iconSizeMap","IconSize","getIconColor","mode","variant","isActive","depth","getColor","Trigger","ariaLabel","ariaLabelledById","selected","htmlMarkup","className","testId","rest","ref","buttonIsHovered","hoverRef","useHover","triggerClasses","classNames","styles","iconColor","icon","Icon","AnalyticsId","ariaLabelAttributes","getAriaLabelAttributes","mergeRefs","Trigger$1"],"mappings":"gbAIA,MAAMA,EAAmC,CAAC,CAAE,KAAAC,EAAM,UAAAC,KAiBzCC,EAAQ,CAAE,KAAAF,EAAM,UAAAC,EAAW,OAfhCE,EAAA,cAAC,OAAK,CAAA,EAAE,gjBAAijB,CAAA,EAejhB,YAXxCA,EAAA,cAAC,OAAK,CAAA,EAAE,ijBAAkjB,CAAA,EAWrgB,OAPrDA,EAAA,cAAC,OAAK,CAAA,EAAE,whBAAyhB,CAAA,EAOpe,YAH7DA,EAAA,cAAC,OAAK,CAAA,EAAE,qjBAAsjB,CAAA,EAGpf,EAG9EC,EAAeL,ECyCTM,EAA2C,CAC/C,KAAMN,CAER,EAEMO,EAA6C,CACjD,OAAQC,EAAS,OACjB,MAAOA,EAAS,KAClB,EAEMC,EAAe,CAACC,EAAmBC,EAAyBC,IAA0C,CAC1G,GAAIF,IAAS,SACJ,MAAA,QAGH,MAAAG,EAAQD,EAAW,IAAM,IAE/B,GAAID,IAAY,OACP,OAAAG,EAAS,OAAQD,CAAK,EAG/B,GAAIF,IAAY,OACP,OAAAG,EAAS,YAAaD,CAAK,CAEtC,EAEME,EAAUX,EAAM,WACpB,CACE,CACE,UAAAY,EACA,iBAAAC,EACA,QAAAN,EAAU,OACV,KAAAD,EAAO,UACP,KAAAT,EAAO,SACP,SAAAiB,EAAW,GACX,UAAAhB,EACA,WAAAiB,EAAa,SACb,UAAAC,EACA,OAAAC,EACA,GAAGC,GAELC,IACG,CACH,KAAM,CAAE,UAAWC,EAAiB,SAAAC,GAAaC,EAA4B,EAEvEC,EAAiBC,EACrBC,EAAO,QACPnB,IAAS,WAAamB,EAAO,YAAYlB,GAAS,EAClDkB,EAAO,YAAYnB,GAAM,EACzBmB,EAAO,YAAY5B,GAAM,EACzBC,GAAa2B,EAAO,kBAAkB,EACtCX,GAAYW,EAAO,mBAAmB,EACtCT,CAAA,EAGIU,EAAYrB,EAAaC,EAAMC,EAAST,GAAasB,GAAmBN,CAAQ,EAEhFa,EAAO3B,EAAA,cAAC4B,EAAK,CAAA,QAAS1B,EAAQK,CAAO,EAAG,KAAMJ,EAAYN,CAAI,EAAG,MAAO6B,EAAW,UAAW5B,GAAasB,CAAiB,CAAA,EAElI,GAAIL,IAAe,OAEf,OAAAf,EAAA,cAAC,QAAK,cAAaiB,EAAQ,mBAAkBY,EAAY,QAAS,UAAWN,CAAA,EAC1EI,CACH,EAIJ,MAAMG,EAAsBC,EAAuB,CAAE,MAAOnB,EAAW,GAAIC,EAAkB,EAG3F,OAAAb,EAAA,cAAC,SAAA,CACC,aAAYY,EACZ,KAAK,SACL,cAAaK,EACb,mBAAkBY,EAAY,QAC9B,UAAWN,EACX,IAAKS,EAAU,CAACb,EAAKE,CAAQ,CAAC,EAC9B,gBAAeP,EACd,GAAGgB,EACH,GAAGZ,CAAA,EAEHS,CAAA,CAGP,CACF,EAEAhB,EAAQ,YAAc,UAEtB,MAAAsB,EAAetB"}

package/components/AnchorLink/index.js

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

package/components/Button/index.js

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

package/components/ButtonWithModal/index.js

@@ -1,2 +1,2 @@
-import t,{useState as m}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"../Modal/styles.module.scss";const a=t.forwardRef(function(o,d){const[i,r]=m(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),i&&t.createElement(e,{...o,onClose:()=>r(!1)}))}),V=a;export{V as default};
+import t,{useState as m}from"react";import{B as p}from"../../Button.js";import{M as e}from"../../Modal.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useFocusTrap.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useElementList.js";import"../../utils/focus.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Close.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/AlertSignFill.js";import"../Icons/AlertSignStroke.js";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";import"../../Title.js";import"../Title/styles.module.scss";import"../Modal/styles.module.scss";const a=t.forwardRef(function(o,d){const[i,r]=m(!1);return t.createElement("div",{"data-testid":o.testId},t.createElement(p,{onClick:()=>r(!0)},o.buttonText),i&&t.createElement(e,{...o,onClose:()=>r(!1)}))}),Y=a;export{Y 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';\n\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","ButtonWithModal"],"mappings":"urCAaA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAG9C,OAAAL,EAAA,cAAC,MAAI,CAAA,cAAaC,EAAM,MAAA,kBACrBK,EAAO,CAAA,QAAS,IAAMF,EAAa,EAAI,GAAIH,EAAM,UAAW,EAC5DE,GAAaH,EAAA,cAACO,EAAO,CAAA,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAA,CAAG,CACtE,CAEJ,CAAC,EAEDI,EAAeT"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ButtonWithModal/ButtonWithModal.tsx"],"sourcesContent":["/* istanbul ignore file */\nimport React, { useState } from 'react';\n\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","ButtonWithModal"],"mappings":"2vCAaA,MAAMA,EAAkBC,EAAM,WAAW,SAA2BC,EAA6BC,EAAsC,CACrI,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAS,EAAK,EAG9C,OAAAL,EAAA,cAAC,MAAI,CAAA,cAAaC,EAAM,MAAA,kBACrBK,EAAO,CAAA,QAAS,IAAMF,EAAa,EAAI,GAAIH,EAAM,UAAW,EAC5DE,GAAaH,EAAA,cAACO,EAAO,CAAA,GAAGN,EAAO,QAAS,IAAMG,EAAa,EAAK,CAAA,CAAG,CACtE,CAEJ,CAAC,EAEDI,EAAeT"}

package/components/Checkbox/styles.module.scss

@@ -208,6 +208,13 @@ $checkbox-icon-size: 1.625rem;
     min-width: $checkbox-icon-size;
     box-shadow: 0 0 0 getSpacer(4xs);
 
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background-color: #000 !important;
+      color: #fff !important;
+    }
+
     :hover > & {
       box-shadow: 0 0 0 getSpacer(3xs);
     }
@@ -325,6 +332,12 @@ $checkbox-icon-size: 1.625rem;
     position: relative;
     top: 0.1rem;
     right: 0.05rem;
+
+    // Vi overstyrer farger satt ved high-contrast mode i nettleser/os
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      fill: #fff;
+    }
   }
 
   &:focus {

package/components/Close/Close.d.ts

@@ -12,8 +12,6 @@ export interface CloseProps {
     className?: string;
     /** Gives color to the svg */
     color?: string;
-    /** Gives hovered effect to X icon */
-    isHovered?: boolean;
 }
 declare const Close: React.ForwardRefExoticComponent<CloseProps & React.RefAttributes<HTMLButtonElement>>;
 export default Close;

package/components/Close/Close.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Close.d.ts","sourceRoot":"","sources":["../../../src/components/Close/Close.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,KAAK,sFAqBT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Close.d.ts","sourceRoot":"","sources":["../../../src/components/Close/Close.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,MAAM,WAAW,UAAU;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,KAAK,sFAsBT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/components/Close/componentdata.json

@@ -1 +1 @@
-{"props":{"small":{"defaultValue":null,"description":"Keeps the icon small for all screen sizes","name":"small","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClick","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"(() => void)"}},"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button","name":"ariaLabel","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":null,"description":"Gives color to the svg","name":"color","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"isHovered":{"defaultValue":null,"description":"Gives hovered effect to X icon","name":"isHovered","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}}}}
+{"props":{"small":{"defaultValue":null,"description":"Keeps the icon small for all screen sizes","name":"small","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"boolean"}},"onClick":{"defaultValue":null,"description":"Function is called when user clicks the button","name":"onClick","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"(() => void)"}},"ariaLabel":{"defaultValue":null,"description":"Sets the aria-label of the button","name":"ariaLabel","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}},"color":{"defaultValue":null,"description":"Gives color to the svg","name":"color","parent":{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"},"declarations":[{"fileName":"src/components/Close/Close.tsx","name":"CloseProps"}],"required":false,"type":{"name":"string"}}}}

package/components/Close/index.js

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

package/components/Dropdown/index.js

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

package/components/Dropdown/styles.module.scss

@@ -180,6 +180,7 @@
     background-color: $white;
     margin-top: getSpacer(2xs);
     box-shadow: 0 0 0 2px $blueberry500;
+    z-index: 1;
 
     &--open {
       display: block;

package/components/Expander/index.js

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

package/components/ExpanderHierarchy/ExpanderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ExpanderHierarchy/expander.module.scss

@@ -46,18 +46,11 @@
     &[aria-expanded='true'] {
       background-color: $neutral100;
       border-bottom: none;
-
-      + #{$item}__content {
-        display: block;
-      }
     }
 
     @media print {
       &--print {
         background-color: $neutral100;
-        + #{$item}__content {
-          display: block;
-        }
       }
     }
 
@@ -88,6 +81,20 @@
     &--4-and-lower {
       @include title5;
     }
+
+    &--expanded {
+      + #{$item}__content {
+        display: block;
+      }
+    }
+
+    @media print {
+      &--print {
+        + #{$item}__content {
+          display: block;
+        }
+      }
+    }
   }
 
   &__content {

package/components/ExpanderHierarchy/expander.module.scss.d.ts

@@ -15,6 +15,8 @@ export type Styles = {
   'expander__title--2': string;
   'expander__title--3': string;
   'expander__title--4-and-lower': string;
+  'expander__title--expanded': string;
+  'expander__title--print': string;
   'fade-in': string;
 };
 

package/components/ExpanderHierarchy/index.js

@@ -1,2 +1,2 @@
-import n from"react";import i from"classnames";import{AnalyticsId as l,IconSize as $}from"../../constants.js";import{useExpand as b}from"../../hooks/useExpand.js";import{useHover as g}from"../../hooks/useHover.js";import{Icon as I}from"../Icons/Icon.js";import k from"../Icons/ChevronDown.js";import z from"../Icons/ChevronUp.js";import t from"./expander.module.scss";import{isComponent as _}from"../../utils/component.js";import h from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const B=({htmlMarkup:a="h2",level:e=1,print:r,expanded:c,onExpand:d,children:p,testId:o})=>{const{hoverRef:m,isHovered:x}=g(),[s,f]=b(c,d),y=()=>{f(!s)},C=a,w=i(t.expander__button,e>1&&t["expander__button--2-and-lower"],r&&t["expander__button--print"]),H=i(t.expander__title,e<=3&&t[`expander__title--${e}`],e>3&&t["expander__title--4-and-lower"]),N=i(t.expander__icon,e>1&&t["expander__icon--2-and-lower"],e>2&&t["expander__icon--3-and-lower"]);return n.createElement("button",{type:"button",onClick:y,className:w,"aria-expanded":s,ref:m,"data-testid":o,"data-analyticsid":l.ExpanderHierarchyExpander},n.createElement(C,{className:H},p),n.createElement(I,{svgIcon:s?z:k,isHovered:x,className:N,size:$.XSmall}))},R=B,S=a=>{switch(a){case"h2":return"h3";case"h3":return"h4";case"h4":return"h5";case"h5":return"h6";case"h6":return"h6";default:return"h2"}},T=({title:a,htmlMarkup:e="h2",level:r=1,print:c,expanded:d=!1,onExpand:p,children:o,testId:m})=>{const x=i(t.expander__content,r<=2&&t[`expander__content--${r}`],r>2&&t["expander__content--3-and-lower"]);return n.createElement("li",{className:t.expander},n.createElement(R,{htmlMarkup:e,level:r,print:c,expanded:d,onExpand:p,testId:m},a),n.createElement("div",{className:x},n.Children.map(o,s=>_(s,A)?n.cloneElement(s,{htmlMarkup:S(e),level:r+1,print:c}):s)))},u=T,E=({htmlMarkup:a="h2",level:e=1,print:r,children:c,testId:d})=>{const p=i(h.expanderhierarchy,h[`expanderhierarchy--${e}`],e>2&&h["expanderhierarchy--3-and-lower"]);return n.createElement("ul",{className:p,"data-testid":d,"data-analyticsid":l.ExpanderHierarchy},n.Children.map(c,o=>_(o,u)?n.cloneElement(o,{htmlMarkup:a,level:e,print:r}):o))};E.Expander=u;const A=E;export{A as default};
+import n from"react";import i from"classnames";import{AnalyticsId as _,IconSize as $}from"../../constants.js";import{useExpand as b}from"../../hooks/useExpand.js";import{useHover as g}from"../../hooks/useHover.js";import{Icon as I}from"../Icons/Icon.js";import k from"../Icons/ChevronDown.js";import z from"../Icons/ChevronUp.js";import e from"./expander.module.scss";import{isComponent as h}from"../../utils/component.js";import l from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const B=({htmlMarkup:o="h2",level:t=1,print:r,expanded:c,onExpand:d,children:p,testId:s})=>{const{hoverRef:m,isHovered:x}=g(),[a,f]=b(c,d),y=()=>{f(!a)},C=o,w=i(e.expander__button,t>1&&e["expander__button--2-and-lower"],r&&e["expander__button--print"]),H=i(e.expander__title,t<=3&&e[`expander__title--${t}`],t>3&&e["expander__title--4-and-lower"],a&&e["expander__title--expanded"],r&&e["expander__title--print"]),N=i(e.expander__icon,t>1&&e["expander__icon--2-and-lower"],t>2&&e["expander__icon--3-and-lower"]);return n.createElement(C,{className:H},n.createElement("button",{type:"button",onClick:y,className:w,"aria-expanded":a,ref:m,"data-testid":s,"data-analyticsid":_.ExpanderHierarchyExpander},p,n.createElement(I,{svgIcon:a?z:k,isHovered:x,className:N,size:$.XSmall})))},R=B,S=o=>{switch(o){case"h2":return"h3";case"h3":return"h4";case"h4":return"h5";case"h5":return"h6";case"h6":return"h6";default:return"h2"}},T=({title:o,htmlMarkup:t="h2",level:r=1,print:c,expanded:d=!1,onExpand:p,children:s,testId:m})=>{const x=i(e.expander__content,r<=2&&e[`expander__content--${r}`],r>2&&e["expander__content--3-and-lower"]);return n.createElement("li",{className:e.expander},n.createElement(R,{htmlMarkup:t,level:r,print:c,expanded:d,onExpand:p,testId:m},o),n.createElement("div",{className:x},n.Children.map(s,a=>h(a,A)?n.cloneElement(a,{htmlMarkup:S(t),level:r+1,print:c}):a)))},u=T,E=({htmlMarkup:o="h2",level:t=1,print:r,children:c,testId:d})=>{const p=i(l.expanderhierarchy,l[`expanderhierarchy--${t}`],t>2&&l["expanderhierarchy--3-and-lower"]);return n.createElement("ul",{className:p,"data-testid":d,"data-analyticsid":_.ExpanderHierarchy},n.Children.map(c,s=>h(s,u)?n.cloneElement(s,{htmlMarkup:o,level:t,print:r}):s))};E.Expander=u;const A=E;export{A as default};
 //# sourceMappingURL=index.js.map

package/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    level <= 3 && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`]\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={buttonClasses}\n      aria-expanded={isExpanded}\n      ref={hoverRef}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n    >\n      <CustomTag className={titleClasses}>{children}</CustomTag>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n    </button>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    level <= 2 && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["ExpanderButton","htmlMarkup","level","print","expanded","onExpand","children","testId","hoverRef","isHovered","useHover","isExpanded","setIsExpanded","useExpand","handleClick","CustomTag","buttonClasses","classNames","styles","titleClasses","iconClasses","React","AnalyticsId","Icon","ChevronUp","ChevronDown","IconSize","ExpanderButton$1","getHeadingTag","Expander","title","contentClasses","isComponent","child","ExpanderHierarchy","Expander$1","listClasses","ExpanderHierarchy$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    level <= 3 && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={hoverRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    level <= 2 && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["ExpanderButton","htmlMarkup","level","print","expanded","onExpand","children","testId","hoverRef","isHovered","useHover","isExpanded","setIsExpanded","useExpand","handleClick","CustomTag","buttonClasses","classNames","styles","titleClasses","iconClasses","React","AnalyticsId","Icon","ChevronUp","ChevronDown","IconSize","ExpanderButton$1","getHeadingTag","Expander","title","contentClasses","isComponent","child","ExpanderHierarchy","Expander$1","listClasses","ExpanderHierarchy$1"],"mappings":"8mBAqBA,MAAMA,EAAgD,CAAC,CAAE,WAAAC,EAAa,KAAM,MAAAC,EAAQ,EAAG,MAAAC,EAAO,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,OAAAC,CAAA,IAAa,CACvI,KAAM,CAAE,SAAAC,EAAU,UAAAC,CAAU,EAAIC,EAA4B,EACtD,CAACC,EAAYC,CAAa,EAAIC,EAAUT,EAAUC,CAAQ,EAE1DS,EAAc,IAAY,CAC9BF,EAAc,CAACD,CAAU,CAAA,EAGrBI,EAAYd,EAEZe,EAAgBC,EACpBC,EAAO,iBACPhB,EAAQ,GAAKgB,EAAO,+BAA+B,EACnDf,GAASe,EAAO,yBAAyB,CAAA,EAGrCC,EAAeF,EACnBC,EAAO,gBACPhB,GAAS,GAAKgB,EAAO,oBAAoBhB,GAAO,EAChDA,EAAQ,GAAKgB,EAAO,8BAA8B,EAClDP,GAAcO,EAAO,2BAA2B,EAChDf,GAASe,EAAO,wBAAwB,CAAA,EAGpCE,EAAcH,EAClBC,EAAO,eACPhB,EAAQ,GAAKgB,EAAO,6BAA6B,EACjDhB,EAAQ,GAAKgB,EAAO,6BAA6B,CAAA,EAIjD,OAAAG,EAAA,cAACN,EAAU,CAAA,UAAWI,CACpB,EAAAE,EAAA,cAAC,SAAA,CACC,KAAK,SACL,QAASP,EACT,UAAWE,EACX,gBAAeL,EACf,IAAKH,EACL,cAAaD,EACb,mBAAkBe,EAAY,yBAAA,EAE7BhB,EACDe,EAAA,cAACE,EAAK,CAAA,QAASZ,EAAaa,EAAYC,EAAa,UAAAhB,EAAsB,UAAWW,EAAa,KAAMM,EAAS,MAAQ,CAAA,CAAA,CAE9H,CAEJ,EAEAC,EAAe3B,ECnEF4B,EAAiB3B,GAA0C,CACtE,OAAQA,EAAY,CAClB,IAAK,KACI,MAAA,KACT,IAAK,KACI,MAAA,KACT,IAAK,KACI,MAAA,KACT,IAAK,KACI,MAAA,KACT,IAAK,KACI,MAAA,KACT,QACS,MAAA,IACX,CACF,ECSM4B,EAAyB,CAAC,CAC9B,MAAAC,EACA,WAAA7B,EAAa,KACb,MAAAC,EAAQ,EACR,MAAAC,EACA,SAAAC,EAAW,GACX,SAAAC,EACA,SAAAC,EACA,OAAAC,CACF,IAAqB,CACnB,MAAMwB,EAAiBd,EACrBC,EAAO,kBACPhB,GAAS,GAAKgB,EAAO,sBAAsBhB,GAAO,EAClDA,EAAQ,GAAKgB,EAAO,gCAAgC,CAAA,EAIpD,OAAAG,EAAA,cAAC,MAAG,UAAWH,EAAO,UACnBG,EAAA,cAAArB,EAAA,CAAe,WAAAC,EAAwB,MAAAC,EAAc,MAAAC,EAAc,SAAAC,EAAoB,SAAAC,EAAoB,OAAAE,CAAA,EACzGuB,CACH,EACAT,EAAA,cAAC,OAAI,UAAWU,CAAA,EACbV,EAAM,SAAS,IAAIf,KAClB0B,EAAoCC,EAAOC,CAAiB,EACxDb,EAAM,aAAaY,EAAO,CAAE,WAAYL,EAAc3B,CAAU,EAAG,MAAOC,EAAQ,EAAG,MAAAC,CAAO,CAAA,EAC5F8B,CAER,CAAA,CACF,CAEJ,EAEAE,EAAeN,EC5BTK,EAA+C,CAAC,CACpD,WAAAjC,EAAa,KACb,MAAAC,EAAQ,EACR,MAAAC,EACA,SAAAG,EACA,OAAAC,CACF,IAA8B,CAC5B,MAAM6B,EAAcnB,EAClBC,EAAO,kBACPA,EAAO,sBAAsBhB,GAAO,EACpCA,EAAQ,GAAKgB,EAAO,gCAAgC,CAAA,EAIpD,OAAAG,EAAA,cAAC,KAAG,CAAA,UAAWe,EAAa,cAAa7B,EAAQ,mBAAkBe,EAAY,iBAC5E,EAAAD,EAAM,SAAS,IAAIf,EAClB2B,GAAAD,EAA2BC,EAAOJ,CAAQ,EAAIR,EAAM,aAAaY,EAAO,CAAE,WAAAhC,EAAY,MAAAC,EAAO,MAAAC,CAAA,CAAO,EAAI8B,CAAA,CAE5G,CAEJ,EAEAC,EAAkB,SAAWL,EAE7B,MAAAQ,EAAeH"}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}from"../../constants.js";import{useExpand as P}from"../../hooks/useExpand.js";import{useHover as Z}from"../../hooks/useHover.js";import{useSticky as q}from"../../hooks/useSticky.js";import{useUuid as F}from"../../hooks/useUuid.js";import{mergeRefs as G}from"../../utils/refs.js";import{isElementInViewport as K}from"../../utils/viewport.js";import Q from"../Icons/ChevronDown.js";import X from"../Icons/ChevronUp.js";import{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Oe=B;export{B as ExpanderList,Oe as default};
+import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}from"../../constants.js";import{useExpand as P}from"../../hooks/useExpand.js";import{useHover as Z}from"../../hooks/useHover.js";import{useSticky as q}from"../../hooks/useSticky.js";import{useUuid as F}from"../../hooks/useUuid.js";import{mergeRefs as G}from"../../utils/refs.js";import{isElementInViewport as K}from"../../utils/viewport.js";import Q from"../Icons/ChevronDown.js";import X from"../Icons/ChevronUp.js";import{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Ue=B;export{B as ExpanderList,Ue as default};
 //# sourceMappingURL=index.js.map