@helsenorge/designsystem-react 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [2.2.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.2.0&targetVersion=GTv2.2.1) (2022-10-25)
+
+
+### Features
+
+*  nytt ikon og fiks på confluence script ([0d6d9ea](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/0d6d9ea492b22ee70c2edbb32440f39739a6ce6d)), closes [#287052](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287052)
+
 ## [2.2.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.1.0&targetVersion=GTv2.2.0) (2022-10-25)
 
 
@@ -104,7 +111,7 @@
 
 ## 2.0.0-beta.1 (2022-09-15)
 
-## 2.0.0-beta.0 (2022-09-15)
+## 2.0.0-beta.0 (2022-09-12)
 
 
 ### Features
@@ -206,8 +213,8 @@
 
 ### Bug Fixes
 
-*  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 *  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
+*  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/Modal.js

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

package/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { palette } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport FocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport Title from '../Title/Title';\nimport { uuid } from '../../utils/uuid';\nimport Close from '../Close';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const [tabIndex, setTabIndex] = React.useState(0);\n  const initFocus = React.useRef<HTMLDivElement>(null);\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    initFocus.current?.focus();\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align} ref={FocusTrap()}>\n          <div className={dialogClasses} role=\"dialog\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>\n            <div tabIndex={tabIndex} ref={initFocus} onBlur={(): void => setTabIndex(-1)} />\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","tabIndex","setTabIndex","initFocus","topContent","modalContentRef","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","FocusTrap","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}
+{"version":3,"file":"Modal.js","sources":["../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { palette } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize } from '../Icons';\n\nimport styles from './styles.module.scss';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport useFocusTrap from '../../hooks/useFocusTrap';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport Title from '../Title/Title';\nimport { uuid } from '../../utils/uuid';\nimport Close from '../Close';\nimport CheckOutline from '../Icons/CheckOutline';\nimport Portal from '../Portal';\nimport { AnalyticsId, ZIndex } from '../../constants';\n\nexport enum ModalVariants {\n  normal = 'normal',\n  warning = 'warning',\n  error = 'error',\n  success = 'success',\n  image = 'image',\n}\n\nexport enum ModalSize {\n  large = 'large',\n  medium = 'medium',\n}\n\nexport interface ModalProps {\n  /** Title of the modal */\n  title: string;\n  /** id of the modal title */\n  titleId?: string;\n  /** Description of the modal. Will not render if the modal has children. */\n  description?: string;\n  /** Changes the visual representation of the modal */\n  variant?: keyof typeof ModalVariants;\n  /** Change width of the modal (default: large) */\n  size?: keyof typeof ModalSize;\n  /** Icon displayed in title */\n  icon?: React.ReactElement;\n  /** Hides the close button */\n  noCloseButton?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Primary button text */\n  primaryButtonText?: string;\n  /** Secondary button text */\n  secondaryButtonText?: string;\n  /** Sets the aria-label of the modal */\n  ariaLabel?: string;\n  /** Sets the aria-labelledby of the modal */\n  ariaLabelledBy?: string;\n  /** Close button aria-label */\n  ariaLabelCloseBtn?: string;\n  /** Alternative component to modal */\n  children?: React.ReactNode;\n  /** Component shown after title */\n  afterTitleChildren?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Customize the z-index of the modal */\n  zIndex?: number;\n  /** Function is called when user clicks primary button */\n  onSuccess?: () => void;\n  /** Function is called when user clicks secondary button, clicks escape or outside the modal */\n  onClose?: () => void;\n  /** When enabled the component will be rendered in the bottom of document.body */\n  printable?: boolean;\n  /** If disabled, clicking escape or outside the modal will not close it */\n  disableCloseEvents?: boolean;\n}\n\nconst defaultProps = {\n  variant: ModalVariants.normal,\n  primaryButtonText: 'OK',\n  titleId: uuid(),\n  className: '',\n  size: ModalSize.large,\n  zIndex: ZIndex.Modal,\n};\n\nconst getVariantIcon = (variant?: ModalProps['variant']): JSX.Element | null => {\n  if (variant === ModalVariants.error) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignFill} color={palette.cherry500} />;\n  } else if (variant === ModalVariants.warning) {\n    return <Icon size={IconSize.Small} svgIcon={AlertSignStroke} color={palette.black} />;\n  } else if (variant === ModalVariants.success) {\n    return <Icon size={IconSize.Small} svgIcon={CheckOutline} color={palette.kiwi900} />;\n  }\n  return null;\n};\n\nconst getIcon = (variant?: ModalProps['variant'], icon?: ModalProps['icon']): JSX.Element | null => {\n  const variantIcon = getVariantIcon(variant);\n  if (variantIcon) {\n    return <div className={styles.modal__iconWrapper}>{variantIcon}</div>;\n  }\n  if (icon) {\n    return (\n      <div className={styles.modal__iconWrapper}>\n        {React.cloneElement(icon, {\n          size: IconSize.Small,\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n\nconst Modal = (props: ModalProps): JSX.Element => {\n  const [tabIndex, setTabIndex] = React.useState(0);\n  const initFocus = React.useRef<HTMLDivElement>(null);\n  const topContent = React.useRef<HTMLDivElement>(null);\n  const modalContentRef = React.useRef<HTMLDivElement>(null);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  useFocusTrap(dialogRef);\n  const topContentVisible = useIsVisible(topContent);\n  const bottomContent = React.useRef<HTMLDivElement>(null);\n  const bottomContentVisible = useIsVisible(bottomContent);\n  const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;\n\n  function handleKeyboardEvent(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && props.onClose) {\n      e.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function handleClickEvent(event: MouseEvent): void {\n    if (event.target && overlayRef.current === event.target && props.onClose) {\n      event.stopPropagation();\n      props.onClose();\n    }\n  }\n\n  function disableBodyScroll(): void {\n    document.body.style.overflow = 'hidden';\n  }\n\n  function enableBodyScroll(): void {\n    document.body.style.removeProperty('overflow');\n  }\n\n  /* Displays a full window size modal with image */\n  const imageView = props.variant === ModalVariants.image;\n\n  const overlayRef = React.useRef<HTMLDivElement>(null);\n\n  const showActions = (props.secondaryButtonText && props.secondaryButtonText?.length > 0) || props.onSuccess;\n\n  // ariaLabelledBy prioriteres over ariaLabel, men dersom ariaLabel brukes trengs ikke ariaLabelledBy\n  const ariaLabel = !props.ariaLabelledBy ? props.ariaLabel : undefined;\n  const ariaLabelledBy = props.ariaLabelledBy ? props.ariaLabelledBy : !props.ariaLabel ? props.titleId : undefined;\n\n  useEffect(() => {\n    const overlayElement = overlayRef.current;\n    initFocus.current?.focus();\n    disableBodyScroll();\n    if (!props.disableCloseEvents && overlayElement) {\n      overlayElement.addEventListener('keydown', handleKeyboardEvent);\n      overlayElement.addEventListener('click', handleClickEvent);\n    }\n    return (): void => {\n      enableBodyScroll();\n      if (!props.disableCloseEvents && overlayElement) {\n        overlayElement.removeEventListener('keydown', handleKeyboardEvent);\n        overlayElement.removeEventListener('click', handleClickEvent);\n      }\n    };\n  }, [props.disableCloseEvents]);\n\n  const dialogClasses = cn(\n    props.className,\n    styles.modal,\n    styles[`modal--${props.variant}`],\n    styles[`modal--${props.size}`],\n    contentIsScrollable && !showActions && styles['modal--no-actions']\n  );\n\n  const titleClasses = cn({\n    [styles['modal__title--error']]: props.variant === ModalVariants.error,\n    [styles['modal__title--success']]: props.variant === ModalVariants.success,\n  });\n\n  const Component = (\n    <div data-testid=\"dialog-container\">\n      <div\n        ref={overlayRef}\n        className={styles['modal-overlay']}\n        data-testid={props.testId}\n        data-analyticsid={AnalyticsId.Modal}\n        style={{ zIndex: props.zIndex }}\n      >\n        <div className={styles.align}>\n          <div className={dialogClasses} role=\"dialog\" aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} ref={dialogRef}>\n            <div tabIndex={tabIndex} ref={initFocus} onBlur={(): void => setTabIndex(-1)} />\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--top'], {\n                [styles['modal__shadow--show']]: !topContentVisible && contentIsScrollable,\n              })}\n            />\n            <div\n              className={cn(styles.modal__contentWrapper, {\n                [styles['modal__contentWrapper--image']]: imageView,\n              })}\n              ref={modalContentRef}\n            >\n              {!props.noCloseButton && (\n                <div className={styles.modal__closeWrapper}>\n                  <div className={cn(styles.modal__closeWrapper__close)}>\n                    <Close onClick={props.onClose} ariaLabel={props.ariaLabelCloseBtn} />\n                  </div>\n                </div>\n              )}\n              <div\n                className={cn(styles[`modal__contentWrapper__scroll--${props.size}`], {\n                  [styles['modal__contentWrapper__scroll--image']]: imageView,\n                })}\n              >\n                <div ref={topContent} />\n                <div className={styles.modal__contentWrapper__title}>\n                  {getIcon(props.variant, props.icon)}\n                  <Title id={ariaLabelledBy} htmlMarkup=\"h3\" appearance=\"title3\" className={titleClasses}>\n                    {props.title}\n                  </Title>\n                  {props.afterTitleChildren && <div className={styles['modal__afterTitleChildren']}>{props.afterTitleChildren}</div>}\n                </div>\n                {imageView && (\n                  <div>\n                    <div className={styles['modal__contentWrapper__imageWrapper']}>{props.children}</div>\n                    <span className={styles['modal__contentWrapper__imageDescription']}>{props.description}</span>\n                  </div>\n                )}\n                {!imageView && props.children && <div>{props.children}</div>}\n                {!imageView && !props.children && <p className={styles.modal__description}>{props.description}</p>}\n                <div ref={bottomContent} />\n              </div>\n            </div>\n            <div\n              className={cn(styles['modal__shadow'], styles['modal__shadow--bottom'], {\n                [styles['modal__shadow--show']]: !bottomContentVisible && contentIsScrollable,\n              })}\n            />\n            {showActions && (\n              <div className={cn(styles['modal__call-to-action'], styles[`modal__call-to-action--${props.size}`])}>\n                {props.onSuccess && <Button onClick={props.onSuccess}>{props.primaryButtonText}</Button>}\n                {props.secondaryButtonText && props.secondaryButtonText?.length > 0 && (\n                  <Button variant=\"borderless\" onClick={props.onClose}>\n                    {props.secondaryButtonText}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (props.printable) {\n    const printModal = 'print-modal';\n    return (\n      <Portal className={printModal} testId=\"print-modal\">\n        <style media=\"print\">{`body > *:not(.${printModal}) {display: none;}`}</style>\n        {Component}\n      </Portal>\n    );\n  }\n\n  return Component;\n};\n\nModal.defaultProps = defaultProps;\n\nexport default Modal;\n"],"names":["ModalVariants","ModalSize","defaultProps","uuid","ZIndex","getVariantIcon","variant","React","Icon","IconSize","AlertSignFill","palette","AlertSignStroke","CheckOutline","getIcon","icon","variantIcon","styles","Modal","props","tabIndex","setTabIndex","initFocus","topContent","modalContentRef","dialogRef","useFocusTrap","topContentVisible","useIsVisible","bottomContent","bottomContentVisible","contentIsScrollable","handleKeyboardEvent","e","handleClickEvent","event","overlayRef","disableBodyScroll","enableBodyScroll","imageView","showActions","_a","ariaLabel","ariaLabelledBy","useEffect","overlayElement","dialogClasses","cn","titleClasses","Component","AnalyticsId","Close","Title","Button","_b","printModal","Portal"],"mappings":"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"}

package/__mocks__/MutationObserver.d.ts

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

package/__mocks__/MutationObserver.d.ts.map

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

package/__mocks__/MutationObserver.js

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

package/__mocks__/MutationObserver.js.map

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

package/components/ButtonWithModal/index.js

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

package/components/ButtonWithModal/index.js.map

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

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

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

package/components/Modal/index.js

@@ -1,2 +1,2 @@
-import"../../Modal.js";import{b as K,a as L,M as N}from"../../Modal.js";import"react";import"classnames";import"../../theme/palette.js";import"../../Button.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"./styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusToggle.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";export{K as ModalSize,L as ModalVariants,N as default};
+import"../../Modal.js";import{b as K,a as L,M as N}from"../../Modal.js";import"react";import"classnames";import"../../theme/palette.js";import"../../Button.js";import"../../constants.js";import"../../uuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"./styles.module.scss";import"../Icons/AlertSignStroke.js";import"../Icons/AlertSignFill.js";import"../../hooks/useFocusTrap.js";import"../../hooks/focus-utils.js";import"../../hooks/useFocusableElements.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../Title.js";import"../Title/styles.module.scss";import"../../Close.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../Icons/CheckOutline.js";import"../Portal/index.js";import"react-dom";export{K as ModalSize,L as ModalVariants,N as default};
 //# sourceMappingURL=index.js.map

package/hooks/useFocusToggle.d.ts

@@ -1,14 +1,10 @@
 import React from 'react';
-export declare const FOCUSABLE_SELECTORS: string;
 /**
  * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig
  * ikke kunne fokuseres/tabbes til med tastaturet.
- *
- * Bruker MutationObserver slik at eventuelle nye elementer som legges til også vil miste/få fokus.
- *
  * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare
  * @param allowFocus Om elementene skal være fokuserbare eller ikke
- * @returns Liste med potensielt fokuserbare elementer
+ * @returns void
  */
-export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean) => NodeListOf<HTMLElement> | undefined;
+export declare const useFocusToggle: (ref: React.RefObject<HTMLElement>, allowFocus?: boolean) => void;
 //# sourceMappingURL=useFocusToggle.d.ts.map

package/hooks/useFocusToggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,eAAO,MAAM,mBAAmB,QAarB,CAAC;AAEZ;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,eAAe,OAAO,KAAG,WAAW,WAAW,CAAC,GAAG,SAgDlH,CAAC"}
+{"version":3,"file":"useFocusToggle.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusToggle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAGzC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,eAAe,OAAO,KAAG,IA4BxF,CAAC"}

package/hooks/useFocusToggle.js

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

package/hooks/useFocusToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusToggle.js","sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\n// Fra https://github.com/KittyGiraudel/focusable-selectors\nexport const FOCUSABLE_SELECTORS = [\n  'a[href]:not([tabindex^=\"-\"])',\n  'area[href]:not([tabindex^=\"-\"])',\n  'input:not([type=\"hidden\"]):not([type=\"radio\"]):not([disabled]):not([tabindex^=\"-\"])',\n  'input[type=\"radio\"]:not([disabled]):not([tabindex^=\"-\"])',\n  'select:not([disabled]):not([tabindex^=\"-\"])',\n  'textarea:not([disabled]):not([tabindex^=\"-\"])',\n  'button:not([disabled]):not([tabindex^=\"-\"])',\n  'iframe:not([tabindex^=\"-\"])',\n  'audio[controls]:not([tabindex^=\"-\"])',\n  'video[controls]:not([tabindex^=\"-\"])',\n  '[contenteditable]:not([tabindex^=\"-\"])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n].join(',');\n\n/**\n * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig\n * ikke kunne fokuseres/tabbes til med tastaturet.\n *\n * Bruker MutationObserver slik at eventuelle nye elementer som legges til også vil miste/få fokus.\n *\n * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare\n * @param allowFocus Om elementene skal være fokuserbare eller ikke\n * @returns Liste med potensielt fokuserbare elementer\n */\nexport const useFocusToggle = (ref: React.RefObject<HTMLElement>, allowFocus?: boolean): NodeListOf<HTMLElement> | undefined => {\n  const [focusableElementList, setFocusableElementList] = useState<NodeListOf<HTMLElement>>();\n\n  useEffect(() => {\n    const handleMutationChange = () => {\n      const elementList = ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS);\n      setFocusableElementList(elementList);\n    };\n\n    const mutationObserver = new MutationObserver(handleMutationChange);\n    if (ref?.current) {\n      mutationObserver.observe(ref.current, { subtree: true, childList: true });\n    }\n\n    handleMutationChange();\n\n    return (): void => {\n      mutationObserver.disconnect();\n    };\n  }, [ref]);\n\n  useEffect(() => {\n    const TABINDEX_ATTRIBUTE_NAME = 'tabindex';\n    const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = 'data-tabindex';\n    if (allowFocus) {\n      focusableElementList?.forEach(el => {\n        // Sett tabIndex tilbake til verdien den hadde før, eller fjern tabIndex\n        // slik at elementet kan tabbes til igjen.\n        const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);\n        if (prevTabIndex) {\n          el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);\n        } else {\n          el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);\n        }\n      });\n    } else {\n      focusableElementList?.forEach(el => {\n        // Hvis elementet allerede har tabIndex, ta vare på den før vi gjør det umulig å\n        // tabbe til det.\n        if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {\n          el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);\n        }\n        el.tabIndex = -1;\n      });\n    }\n  }, [allowFocus, focusableElementList]);\n\n  return focusableElementList;\n};\n"],"names":["FOCUSABLE_SELECTORS","useFocusToggle","ref","allowFocus","focusableElementList","setFocusableElementList","useState","useEffect","handleMutationChange","elementList","_a","mutationObserver","TABINDEX_ATTRIBUTE_NAME","PREVIOUS_TABINDEX_ATTRIBUTE_NAME","el","prevTabIndex"],"mappings":"gDAGO,MAAMA,EAAsB,CACjC,+BACA,kCACA,sFACA,2DACA,8CACA,gDACA,8CACA,8BACA,uCACA,uCACA,yCACA,iCACF,EAAE,KAAK,GAAG,EAYGC,EAAiB,CAACC,EAAmCC,IAA8D,CAC9H,KAAM,CAACC,EAAsBC,CAAuB,EAAIC,EAAkC,EAE1F,OAAAC,EAAU,IAAM,CACd,MAAMC,EAAuB,IAAM,OACjC,MAAMC,GAAcC,EAAAR,EAAI,UAAJ,YAAAQ,EAAa,iBAA8BV,GAC/DK,EAAwBI,CAAW,CAAA,EAG/BE,EAAmB,IAAI,iBAAiBH,CAAoB,EAClE,OAAIN,GAAA,MAAAA,EAAK,SACUS,EAAA,QAAQT,EAAI,QAAS,CAAE,QAAS,GAAM,UAAW,GAAM,EAGrDM,IAEd,IAAY,CACjBG,EAAiB,WAAW,CAAA,CAC9B,EACC,CAACT,CAAG,CAAC,EAERK,EAAU,IAAM,CACd,MAAMK,EAA0B,WAC1BC,EAAmC,gBACrCV,EACFC,GAAA,MAAAA,EAAsB,QAAcU,GAAA,CAG5B,MAAAC,EAAeD,EAAG,aAAaD,CAAgC,EACjEE,EACCD,EAAA,aAAaF,EAAyBG,CAAY,EAErDD,EAAG,gBAAgBF,CAAuB,CAC5C,GAGFR,GAAA,MAAAA,EAAsB,QAAcU,GAAA,CAG9BA,EAAG,aAAaF,CAAuB,GACzCE,EAAG,aAAaD,EAAkC,GAAGC,EAAG,UAAU,EAEpEA,EAAG,SAAW,EAAA,EAElB,EACC,CAACX,EAAYC,CAAoB,CAAC,EAE9BA,CACT"}
+{"version":3,"file":"useFocusToggle.js","sources":["../../src/hooks/useFocusToggle.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { useFocusableElements } from './useFocusableElements';\n\n/**\n * Skru av og på fokus på fokuserbare elementer slik at de kan være en del av DOMen, men samtidig\n * ikke kunne fokuseres/tabbes til med tastaturet.\n * @param ref Alle barn av dette elementet vil sjekkes for om de er fokuserbare\n * @param allowFocus Om elementene skal være fokuserbare eller ikke\n * @returns void\n */\nexport const useFocusToggle = (ref: React.RefObject<HTMLElement>, allowFocus?: boolean): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  useEffect(() => {\n    const TABINDEX_ATTRIBUTE_NAME = 'tabindex';\n    const PREVIOUS_TABINDEX_ATTRIBUTE_NAME = 'data-tabindex';\n    if (allowFocus) {\n      focusableElementList?.forEach(el => {\n        // Sett tabIndex tilbake til verdien den hadde før, eller fjern tabIndex\n        // slik at elementet kan tabbes til igjen.\n        const prevTabIndex = el.getAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME);\n        if (prevTabIndex) {\n          el.setAttribute(TABINDEX_ATTRIBUTE_NAME, prevTabIndex);\n        } else {\n          el.removeAttribute(TABINDEX_ATTRIBUTE_NAME);\n        }\n      });\n    } else {\n      focusableElementList?.forEach(el => {\n        // Hvis elementet allerede har tabIndex, ta vare på den før vi gjør det umulig å\n        // tabbe til det.\n        if (el.hasAttribute(TABINDEX_ATTRIBUTE_NAME)) {\n          el.setAttribute(PREVIOUS_TABINDEX_ATTRIBUTE_NAME, `${el.tabIndex}`);\n        }\n        el.tabIndex = -1;\n      });\n    }\n  }, [ref, allowFocus, focusableElementList]);\n};\n"],"names":["useFocusToggle","ref","allowFocus","focusableElementList","useFocusableElements","useEffect","TABINDEX_ATTRIBUTE_NAME","PREVIOUS_TABINDEX_ATTRIBUTE_NAME","el","prevTabIndex"],"mappings":"mGAUa,MAAAA,EAAiB,CAACC,EAAmCC,IAA+B,CACzF,MAAAC,EAAuBC,EAAqBH,CAAG,EAErDI,EAAU,IAAM,CACd,MAAMC,EAA0B,WAC1BC,EAAmC,gBACrCL,EACFC,GAAA,MAAAA,EAAsB,QAAcK,GAAA,CAG5B,MAAAC,EAAeD,EAAG,aAAaD,CAAgC,EACjEE,EACCD,EAAA,aAAaF,EAAyBG,CAAY,EAErDD,EAAG,gBAAgBF,CAAuB,CAC5C,GAGFH,GAAA,MAAAA,EAAsB,QAAcK,GAAA,CAG9BA,EAAG,aAAaF,CAAuB,GACzCE,EAAG,aAAaD,EAAkC,GAAGC,EAAG,UAAU,EAEpEA,EAAG,SAAW,EAAA,EAGjB,EAAA,CAACP,EAAKC,EAAYC,CAAoB,CAAC,CAC5C"}

package/hooks/useFocusTrap.d.ts

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

package/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,wBAAgB,YAAY,IAAI,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CA0D5E;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,KAAU,IA4B3F,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/hooks/useFocusTrap.js

@@ -1,2 +1,2 @@
-import{useRef as i,useEffect as a}from"react";import{getDocumentActiveElement as p}from"./focus-utils.js";import{FOCUSABLE_SELECTORS as E}from"./useFocusToggle.js";function y(){const n=i(null);function s(e){const t=n.current,r=e.key==="Tab";if(!t||!r)return;const l=p(t),o=t==null?void 0:t.querySelectorAll(E),c=o[0],f=o.length===1?c:o[o.length-1];e.shiftKey?l===c&&(f.focus(),e.preventDefault()):l===f&&(c.focus(),e.preventDefault())}function u(e){const t=n.current;if(!t)return;const r=t.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');r.length===1&&(r[0].focus(),e.preventDefault())}return a(()=>{const e=n.current;return e.addEventListener("keydown",s),e.addEventListener("click",u),()=>{e.removeEventListener("keydown",s),e.removeEventListener("click",u)}},[]),n}export{y as default,y as useFocusTrap};
+import{useEffect as l}from"react";import{getDocumentActiveElement as i}from"./focus-utils.js";import{useFocusableElements as m}from"./useFocusableElements.js";const v=(t,r=!0)=>{const n=m(t),c=e=>{if(r&&t.current&&n&&e.key==="Tab"){const s=i(t.current),o=n[0],u=n.length===1?o:n[n.length-1];e.shiftKey&&s===o?(u.focus(),e.preventDefault()):!e.shiftKey&&s===u&&(o.focus(),e.preventDefault())}};l(()=>{var e;return(e=t.current)==null||e.addEventListener("keydown",c),()=>{var s;(s=t.current)==null||s.removeEventListener("keydown",c)}},[t,r,n])};export{v as default,v as useFocusTrap};
 //# sourceMappingURL=useFocusTrap.js.map

package/hooks/useFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { getDocumentActiveElement } from './focus-utils';\nimport { FOCUSABLE_SELECTORS } from './useFocusToggle';\n\nexport function useFocusTrap(): React.MutableRefObject<HTMLDivElement | null> {\n  const elRef = useRef<HTMLDivElement>(null);\n\n  function handleFocus(e: KeyboardEvent): void {\n    const node = elRef.current;\n    const isTabPressed = e.key === 'Tab';\n\n    if (!node || !isTabPressed) {\n      return;\n    }\n\n    const activeElement = getDocumentActiveElement(node);\n\n    const focusElements = node?.querySelectorAll(FOCUSABLE_SELECTORS),\n      firstFocusableEl = focusElements[0] as unknown as HTMLElement,\n      lastFocusableEl = focusElements.length === 1 ? firstFocusableEl : (focusElements[focusElements.length - 1] as unknown as HTMLElement);\n\n    if (e.shiftKey) {\n      /* shift + tab */\n      if (activeElement === firstFocusableEl) {\n        lastFocusableEl.focus();\n        e.preventDefault();\n      }\n    } /* tab */ else {\n      if (activeElement === lastFocusableEl) {\n        firstFocusableEl.focus();\n        e.preventDefault();\n      }\n    }\n  }\n\n  function handleClick(e: MouseEvent): void {\n    const node = elRef.current;\n\n    if (!node) {\n      return;\n    }\n\n    const focusElements = node.querySelectorAll(\n      'a[href], button, textarea, input[type=\"text\"], input[type=\"radio\"], input[type=\"checkbox\"], select'\n    ) as unknown as HTMLElement[];\n    if (focusElements.length === 1) {\n      focusElements[0].focus();\n      e.preventDefault();\n    }\n  }\n\n  useEffect(() => {\n    const node = elRef.current as unknown as HTMLElement;\n    node.addEventListener('keydown', handleFocus);\n    node.addEventListener('click', handleClick);\n    return (): void => {\n      node.removeEventListener('keydown', handleFocus);\n      node.removeEventListener('click', handleClick);\n    };\n  }, []);\n\n  return elRef;\n}\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","elRef","useRef","handleFocus","node","isTabPressed","activeElement","getDocumentActiveElement","focusElements","FOCUSABLE_SELECTORS","firstFocusableEl","lastFocusableEl","handleClick","useEffect"],"mappings":"oKAIO,SAASA,GAA8D,CACtE,MAAAC,EAAQC,EAAuB,IAAI,EAEzC,SAASC,EAAY,EAAwB,CAC3C,MAAMC,EAAOH,EAAM,QACbI,EAAe,EAAE,MAAQ,MAE3B,GAAA,CAACD,GAAQ,CAACC,EACZ,OAGI,MAAAC,EAAgBC,EAAyBH,CAAI,EAE7CI,EAAgBJ,GAAA,YAAAA,EAAM,iBAAiBK,GAC3CC,EAAmBF,EAAc,GACjCG,EAAkBH,EAAc,SAAW,EAAIE,EAAoBF,EAAcA,EAAc,OAAS,GAEtG,EAAE,SAEAF,IAAkBI,IACpBC,EAAgB,MAAM,EACtB,EAAE,eAAe,GAGfL,IAAkBK,IACpBD,EAAiB,MAAM,EACvB,EAAE,eAAe,EAGvB,CAEA,SAASE,EAAY,EAAqB,CACxC,MAAMR,EAAOH,EAAM,QAEnB,GAAI,CAACG,EACH,OAGF,MAAMI,EAAgBJ,EAAK,iBACzB,oGAAA,EAEEI,EAAc,SAAW,IAC3BA,EAAc,GAAG,QACjB,EAAE,eAAe,EAErB,CAEA,OAAAK,EAAU,IAAM,CACd,MAAMT,EAAOH,EAAM,QACd,OAAAG,EAAA,iBAAiB,UAAWD,CAAW,EACvCC,EAAA,iBAAiB,QAASQ,CAAW,EACnC,IAAY,CACZR,EAAA,oBAAoB,UAAWD,CAAW,EAC1CC,EAAA,oBAAoB,QAASQ,CAAW,CAAA,CAEjD,EAAG,CAAE,CAAA,EAEEX,CACT"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { getDocumentActiveElement } from './focus-utils';\nimport { useFocusableElements } from './useFocusableElements';\n\n/**\n * Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.\n * @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det\n * @param trapFocus Om fokus skal \"trappes\" innenfor elementet eller ikke. Default=true.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList && e.key === 'Tab') {\n      const activeElement = getDocumentActiveElement(ref.current);\n      const firstElement = focusableElementList[0];\n      const lastElement = focusableElementList.length === 1 ? firstElement : focusableElementList[focusableElementList.length - 1];\n\n      if (e.shiftKey && activeElement === firstElement) {\n        /* shift + tab */\n        lastElement.focus();\n        e.preventDefault();\n      } else if (!e.shiftKey && activeElement === lastElement) {\n        /* tab */\n        firstElement.focus();\n        e.preventDefault();\n      }\n    }\n  };\n\n  useEffect(() => {\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, focusableElementList]); // focusableElementList må være med som dependency for at handleKeyboardEvent skal få oppdatert state\n};\n\nexport default useFocusTrap;\n"],"names":["useFocusTrap","ref","trapFocus","focusableElementList","useFocusableElements","handleKeyboardEvent","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"+JASO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,KAAe,CAC5F,MAAAC,EAAuBC,EAAqBH,CAAG,EAE/CI,EAAuB,GAA2B,CACtD,GAAIH,GAAaD,EAAI,SAAWE,GAAwB,EAAE,MAAQ,MAAO,CACjE,MAAAG,EAAgBC,EAAyBN,EAAI,OAAO,EACpDO,EAAeL,EAAqB,GACpCM,EAAcN,EAAqB,SAAW,EAAIK,EAAeL,EAAqBA,EAAqB,OAAS,GAEtH,EAAE,UAAYG,IAAkBE,GAElCC,EAAY,MAAM,EAClB,EAAE,eAAe,GACR,CAAC,EAAE,UAAYH,IAAkBG,IAE1CD,EAAa,MAAM,EACnB,EAAE,eAAe,EAErB,CAAA,EAGFE,EAAU,IAAM,OACV,OAAAC,EAAAV,EAAA,UAAA,MAAAU,EAAS,iBAAiB,UAAWN,GAElC,IAAY,QACbM,EAAAV,EAAA,UAAA,MAAAU,EAAS,oBAAoB,UAAWN,EAAmB,CAEhE,EAAA,CAACJ,EAAKC,EAAWC,CAAoB,CAAC,CAC3C"}

package/hooks/useFocusableElements.d.ts

@@ -0,0 +1,9 @@
+export declare const FOCUSABLE_SELECTORS: string;
+/**
+ * Overvåk et element og finn alle fokuserbare elementer inne i elementet. Bruker MutationObserver slik at eventuelle
+ * nye elementer som legges til også vil inkluderes i listen.
+ * @param ref Element som skal observeres
+ * @returns Liste med fokuserbare HTML-elementer
+ */
+export declare const useFocusableElements: (ref: React.RefObject<HTMLElement>) => NodeListOf<HTMLElement> | undefined;
+//# sourceMappingURL=useFocusableElements.d.ts.map

package/hooks/useFocusableElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusableElements.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusableElements.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,QAarB,CAAC;AAEZ;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,WAAW,WAAW,CAAC,GAAG,SAsBlG,CAAC"}

package/hooks/useFocusableElements.js

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

package/hooks/useFocusableElements.js.map

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

package/index.js

@@ -1,2 +1,2 @@
-import{theme as i}from"./theme/index.js";import{Breakpoint as f,useBreakpoint as n}from"./hooks/useBreakpoint.js";import{useFocusToggle as d}from"./hooks/useFocusToggle.js";import{useFocusTrap as c}from"./hooks/useFocusTrap.js";import{useHover as b}from"./hooks/useHover.js";import{useIntersectionObserver as g}from"./hooks/useIntersectionObserver.js";import{useIsVisible as E}from"./hooks/useIsVisible.js";import{useLayoutEvent as k}from"./hooks/useLayoutEvent.js";import{usePrevious as K}from"./hooks/usePrevious.js";import{useSticky as S}from"./hooks/useSticky.js";import{useSize as B}from"./hooks/useSize.js";import{useResizeObserver as h}from"./hooks/useResizeObserver.js";import{useToggle as H}from"./hooks/useToggle.js";import{useKeyboardEvent as M}from"./hooks/useKeyboardEvent.js";import{useOutsideEvent as R}from"./hooks/useOutsideEvent.js";import{useUuid as Z}from"./hooks/useUuid.js";import{a as q}from"./uuid.js";import{AnalyticsId as C,FormMode as D,FormVariant as G,IconSize as J,KeyboardEventKey as N,ZIndex as Q}from"./constants.js";import"./theme/palette.js";import"./theme/spacers.js";import"./theme/grid.js";import"react";import"./hooks/focus-utils.js";import"./debounce.js";export{C as AnalyticsId,f as Breakpoint,D as FormMode,G as FormVariant,J as IconSize,N as KeyboardEventKey,Q as ZIndex,i as theme,n as useBreakpoint,d as useFocusToggle,c as useFocusTrap,b as useHover,g as useIntersectionObserver,E as useIsVisible,M as useKeyboardEvent,k as useLayoutEvent,R as useOutsideEvent,K as usePrevious,h as useResizeObserver,B as useSize,S as useSticky,H as useToggle,Z as useUuid,q as uuid};
+import{theme as x}from"./theme/index.js";import{Breakpoint as n,useBreakpoint as a}from"./hooks/useBreakpoint.js";import{useFocusToggle as v}from"./hooks/useFocusToggle.js";import{useFocusTrap as y}from"./hooks/useFocusTrap.js";import{useHover as I}from"./hooks/useHover.js";import{useIntersectionObserver as l}from"./hooks/useIntersectionObserver.js";import{useIsVisible as F}from"./hooks/useIsVisible.js";import{useLayoutEvent as z}from"./hooks/useLayoutEvent.js";import{usePrevious as O}from"./hooks/usePrevious.js";import{useSticky as T}from"./hooks/useSticky.js";import{useSize as V}from"./hooks/useSize.js";import{useResizeObserver as A}from"./hooks/useResizeObserver.js";import{useToggle as L}from"./hooks/useToggle.js";import{useKeyboardEvent as P}from"./hooks/useKeyboardEvent.js";import{useOutsideEvent as U}from"./hooks/useOutsideEvent.js";import{useUuid as j}from"./hooks/useUuid.js";import{a as w}from"./uuid.js";import{AnalyticsId as D,FormMode as G,FormVariant as J,IconSize as N,KeyboardEventKey as Q,ZIndex as W}from"./constants.js";import"./theme/palette.js";import"./theme/spacers.js";import"./theme/grid.js";import"react";import"./hooks/useFocusableElements.js";import"./hooks/focus-utils.js";import"./debounce.js";export{D as AnalyticsId,n as Breakpoint,G as FormMode,J as FormVariant,N as IconSize,Q as KeyboardEventKey,W as ZIndex,x as theme,a as useBreakpoint,v as useFocusToggle,y as useFocusTrap,I as useHover,l as useIntersectionObserver,F as useIsVisible,P as useKeyboardEvent,z as useLayoutEvent,U as useOutsideEvent,O as usePrevious,A as useResizeObserver,V as useSize,T as useSticky,L as useToggle,j as useUuid,w as uuid};
 //# sourceMappingURL=index.js.map

package/package.json

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