@helsenorge/designsystem-react 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## [2.6.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.6.0&targetVersion=GTv2.6.1) (2022-11-17)
+
+
+### Bug Fixes
+
+*  resizeobserver logger ikke feil om loop limit exceeded ([afece3a](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/afece3a3f40763f6520e09c2398b5928eaf9fa82)), closes [#288871](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/288871)
+
+## [2.6.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.5.0&targetVersion=GTv2.6.0) (2022-11-15)
+
+
+### Features
+
+*  helpbubble kan ta imot ref ([ae2dfcb](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/ae2dfcb5325dd31da97c032c502a8c433a8a13b4)), closes [#285111](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285111)
+*  react-hook-form 7 støtte ([bd50e9d](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/bd50e9d616faec405a441661169db559bcf00783)), closes [#287912](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/287912)
+
+
+### Bug Fixes
+
+*  useSize trigges ved endring i ref igjen ([c374772](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/c374772117d019d77ad725add65f20f869a876b9)), closes [#285111](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/285111)
+
 ## [2.5.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.4.0&targetVersion=GTv2.5.0) (2022-11-13)
 
 

package/Modal.js

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

package/Modal.js.map

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

package/components/Dropdown/index.js

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

package/components/Dropdown/index.js.map

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

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;;;;;;;;;CA6J7C,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;;;;;;;;;CAyK7C,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/hooks/useFocusTrap.d.ts

@@ -3,8 +3,7 @@ import React from 'react';
  * 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.
- * @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.
  */
-export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean, autofocus?: boolean) => void;
+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,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;;GAKG;AACH,eAAO,MAAM,YAAY,QAAS,MAAM,SAAS,CAAC,WAAW,CAAC,cAAa,OAAO,cAAoB,OAAO,KAAW,IAgCvH,CAAC;AAEF,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{useEffect as m}from"react";import{getDocumentActiveElement as u}from"../utils/focus.js";import{useFocusableElements as f}from"./useFocusableElements.js";import"./useElementList.js";const p=(n,o=!0,c=!1)=>{const e=f(n),i=t=>{if(o&&n.current&&(e==null?void 0:e.length)&&t.key==="Tab"){const r=u(n.current),s=e[0],l=e.length===1?s:e[e.length-1];t.shiftKey&&r===s?(l.focus(),t.preventDefault()):!t.shiftKey&&r===l&&(s.focus(),t.preventDefault())}};m(()=>{var t;return c&&o&&(e==null?void 0:e.length)&&e[0].focus(),(t=n.current)==null||t.addEventListener("keydown",i),()=>{var r;(r=n.current)==null||r.removeEventListener("keydown",i)}},[n,o,c,e])};export{p as default,p as useFocusTrap};
+import{useEffect as i}from"react";import{getDocumentActiveElement as l}from"../utils/focus.js";import{useFocusableElements as m}from"./useFocusableElements.js";import"./useElementList.js";const d=(n,s=!0)=>{const e=m(n),c=t=>{if(s&&n.current&&(e==null?void 0:e.length)&&t.key==="Tab"){const o=l(n.current),r=e[0],u=e.length===1?r:e[e.length-1];t.shiftKey&&o===r?(u.focus(),t.preventDefault()):!t.shiftKey&&o===u&&(r.focus(),t.preventDefault())}};i(()=>{var t;return(t=n.current)==null||t.addEventListener("keydown",c),()=>{var o;(o=n.current)==null||o.removeEventListener("keydown",c)}},[n,s,e])};export{d as default,d 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, { useEffect } from 'react';\nimport { getDocumentActiveElement } from '../utils/focus';\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 * @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.\n */\nexport const useFocusTrap = (ref: React.RefObject<HTMLElement>, trapFocus: boolean = true, autofocus: boolean = false): void => {\n  const focusableElementList = useFocusableElements(ref);\n\n  const handleKeyboardEvent = (e: KeyboardEvent): void => {\n    if (trapFocus && ref.current && focusableElementList?.length && 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    if (autofocus && trapFocus && focusableElementList?.length) {\n      focusableElementList[0].focus();\n    }\n\n    ref.current?.addEventListener('keydown', handleKeyboardEvent);\n\n    return (): void => {\n      ref.current?.removeEventListener('keydown', handleKeyboardEvent);\n    };\n  }, [ref, trapFocus, autofocus, 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","autofocus","focusableElementList","useFocusableElements","handleKeyboardEvent","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"4LAUO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,GAAMC,EAAqB,KAAgB,CACxH,MAAAC,EAAuBC,EAAqBJ,CAAG,EAE/CK,EAAuBC,GAA2B,CACtD,GAAIL,GAAaD,EAAI,UAAWG,GAAA,YAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBR,EAAI,OAAO,EACpDS,EAAeN,EAAqB,GACpCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,GAEtHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,EAErB,CAAA,EAGFK,EAAU,IAAM,OACV,OAAAT,GAAaD,IAAaE,GAAA,YAAAA,EAAsB,SAClDA,EAAqB,GAAG,SAGtBS,EAAAZ,EAAA,UAAA,MAAAY,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAZ,EAAA,UAAA,MAAAY,EAAS,oBAAoB,UAAWP,EAAmB,GAEhE,CAACL,EAAKC,EAAWC,EAAWC,CAAoB,CAAC,CACtD"}
+{"version":3,"file":"useFocusTrap.js","sources":["../../src/hooks/useFocusTrap.ts"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { getDocumentActiveElement } from '../utils/focus';\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?.length && 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","e","activeElement","getDocumentActiveElement","firstElement","lastElement","useEffect","_a"],"mappings":"4LASO,MAAMA,EAAe,CAACC,EAAmCC,EAAqB,KAAe,CAC5F,MAAAC,EAAuBC,EAAqBH,CAAG,EAE/CI,EAAuBC,GAA2B,CACtD,GAAIJ,GAAaD,EAAI,UAAWE,GAAA,YAAAA,EAAsB,SAAUG,EAAE,MAAQ,MAAO,CACzE,MAAAC,EAAgBC,EAAyBP,EAAI,OAAO,EACpDQ,EAAeN,EAAqB,GACpCO,EAAcP,EAAqB,SAAW,EAAIM,EAAeN,EAAqBA,EAAqB,OAAS,GAEtHG,EAAE,UAAYC,IAAkBE,GAElCC,EAAY,MAAM,EAClBJ,EAAE,eAAe,GACR,CAACA,EAAE,UAAYC,IAAkBG,IAE1CD,EAAa,MAAM,EACnBH,EAAE,eAAe,EAErB,CAAA,EAGFK,EAAU,IAAM,OACV,OAAAC,EAAAX,EAAA,UAAA,MAAAW,EAAS,iBAAiB,UAAWP,GAElC,IAAY,QACbO,EAAAX,EAAA,UAAA,MAAAW,EAAS,oBAAoB,UAAWP,EAAmB,CAEhE,EAAA,CAACJ,EAAKC,EAAWC,CAAoB,CAAC,CAC3C"}

package/hooks/useResizeObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,OAAO,GAAG,SAoBhF,CAAC"}
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,OAAO,GAAG,SA2BhF,CAAC"}

package/hooks/useResizeObserver.js

@@ -1,2 +1,2 @@
-import{useState as i,useEffect as u}from"react";const r=e=>{const[s,n]=i();return u(()=>{const t=new ResizeObserver(c=>{n(c[0].target.getBoundingClientRect())});return e!=null&&e.current&&t.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?t.unobserve(e.current):t.disconnect()}},[e]),s};export{r as useResizeObserver};
+import{useRef as u,useState as c,useEffect as o}from"react";const b=e=>{const t=u(!1),[s,r]=c();return o(()=>{const n=new ResizeObserver(i=>{t.current||window.requestAnimationFrame(()=>{r(i[0].target.getBoundingClientRect()),t.current=!1}),t.current=!0});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}},[e]),s};export{b as useResizeObserver};
 //# sourceMappingURL=useResizeObserver.js.map

package/hooks/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Lytt på endringer i størrelse på et element. Bruker ResizeObserver-APIet.\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet\n */\nexport const useResizeObserver = (ref?: React.RefObject<HTMLElement>): DOMRect | undefined => {\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      setSize(entries[0].target.getBoundingClientRect());\n    });\n    if (ref?.current) {\n      resizeObserver.observe(ref?.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        resizeObserver.unobserve(ref.current);\n      } else {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [ref]);\n\n  return size;\n};\n"],"names":["useResizeObserver","ref","size","setSize","useState","useEffect","resizeObserver","entries"],"mappings":"gDAQa,MAAAA,EAAqBC,GAA4D,CAC5F,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACR,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CACnDJ,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,CAAA,CAClD,EACD,OAAIN,GAAA,MAAAA,EAAK,SACQK,EAAA,QAAQL,GAAA,YAAAA,EAAK,OAAO,EAG9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQK,EAAA,UAAUL,EAAI,OAAO,EAEpCK,EAAe,WAAW,CAC5B,CACF,EACC,CAACL,CAAG,CAAC,EAEDC,CACT"}
+{"version":3,"file":"useResizeObserver.js","sources":["../../src/hooks/useResizeObserver.ts"],"sourcesContent":["import { useEffect, useState, useRef } from 'react';\n\n/**\n * Lytt på endringer i størrelse på et element. Bruker ResizeObserver-APIet.\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet\n */\nexport const useResizeObserver = (ref?: React.RefObject<HTMLElement>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(entries => {\n      if (!ticking.current) {\n        window.requestAnimationFrame(() => {\n          setSize(entries[0].target.getBoundingClientRect());\n          ticking.current = false;\n        });\n      }\n      ticking.current = true;\n    });\n    if (ref?.current) {\n      resizeObserver.observe(ref?.current);\n    }\n\n    return (): void => {\n      if (ref?.current) {\n        resizeObserver.unobserve(ref.current);\n      } else {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [ref]);\n\n  return size;\n};\n"],"names":["useResizeObserver","ref","ticking","useRef","size","setSize","useState","useEffect","resizeObserver","entries"],"mappings":"4DAQa,MAAAA,EAAqBC,GAA4D,CACtF,MAAAC,EAAUC,EAAO,EAAK,EACtB,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACR,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CAC9CP,EAAQ,SACX,OAAO,sBAAsB,IAAM,CACjCG,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,EACjDP,EAAQ,QAAU,EAAA,CACnB,EAEHA,EAAQ,QAAU,EAAA,CACnB,EACD,OAAID,GAAA,MAAAA,EAAK,SACQO,EAAA,QAAQP,GAAA,YAAAA,EAAK,OAAO,EAG9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQO,EAAA,UAAUP,EAAI,OAAO,EAEpCO,EAAe,WAAW,CAC5B,CACF,EACC,CAACP,CAAG,CAAC,EAEDG,CACT"}

package/hooks/useSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,wBAwCzD,CAAC"}
+{"version":3,"file":"useSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useSize.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,SAAU,MAAM,SAAS,CAAC,WAAW,CAAC,KAAG,OAAO,GAAG,SA+CtE,CAAC"}

package/hooks/useSize.js

@@ -1,2 +1,2 @@
-import{useState as d,useEffect as r}from"react";import{debounce as a}from"../utils/debounce.js";const w=e=>{const[i,s]=d();return r(()=>{if(typeof ResizeObserver<"u"){const n=new ResizeObserver(t=>{s(t[0].target.getBoundingClientRect())});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}}else if(typeof window=="object"){const n=()=>{e!=null&&e.current&&s(e.current.getBoundingClientRect())},t=["layoutchange","resize","orientationchange"],[o,u]=a(n,10);return t.forEach(c=>window.addEventListener(c,o)),o(),()=>{u(),t.forEach(c=>window.removeEventListener(c,o))}}},[e==null?void 0:e.current]),i};export{w as useSize};
+import{useRef as a,useState as d,useEffect as b}from"react";import{debounce as l}from"../utils/debounce.js";const m=e=>{const o=a(!1),[u,i]=d();return b(()=>{if(typeof ResizeObserver<"u"){const n=new ResizeObserver(t=>{o.current||window.requestAnimationFrame(()=>{i(t[0].target.getBoundingClientRect()),o.current=!1}),o.current=!0});return e!=null&&e.current&&n.observe(e==null?void 0:e.current),()=>{e!=null&&e.current?n.unobserve(e.current):n.disconnect()}}else if(typeof window=="object"){const n=()=>{e!=null&&e.current&&i(e.current.getBoundingClientRect())},t=["layoutchange","resize","orientationchange"],[c,r]=l(n,10);return t.forEach(s=>window.addEventListener(s,c)),c(),()=>{r(),t.forEach(s=>window.removeEventListener(s,c))}}},[e==null?void 0:e.current]),u};export{m as useSize};
 //# sourceMappingURL=useSize.js.map

package/hooks/useSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>) => {\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        setSize(entries[0].target.getBoundingClientRect());\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref?.current]);\n\n  return size;\n};\n"],"names":["useSize","ref","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"gGAUa,MAAAA,EAAWC,GAAuC,CAC7D,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CACnDJ,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,CAAA,CAClD,EACD,OAAIN,GAAA,MAAAA,EAAK,SACQK,EAAA,QAAQL,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQK,EAAA,UAAUL,EAAI,OAAO,EAEpCK,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BP,GAAA,MAAAA,EAAK,SAAWE,EAAQF,EAAI,QAAQ,uBAAuB,CAAA,EAGvDQ,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACT,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVC,CACT"}
+{"version":3,"file":"useSize.js","sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { debounce } from '../utils/debounce';\n\n/**\n * Lytt på endringer i størrelse på et element\n *\n * @param ref Element som skal observeres.\n * @returns Object med høyde, bredde, x og y til elementet. Merk at objektet bare oppdates når høyde eller bredde endres, ikke når\n * posisjonen (x og y) endres.\n */\nexport const useSize = (ref?: React.RefObject<HTMLElement>): DOMRect | undefined => {\n  const ticking = useRef(false);\n  const [size, setSize] = useState<DOMRect>();\n  useEffect(() => {\n    if (typeof ResizeObserver !== 'undefined') {\n      const resizeObserver = new ResizeObserver(entries => {\n        if (!ticking.current) {\n          window.requestAnimationFrame(() => {\n            setSize(entries[0].target.getBoundingClientRect());\n            ticking.current = false;\n          });\n        }\n        ticking.current = true;\n      });\n      if (ref?.current) {\n        resizeObserver.observe(ref?.current);\n      }\n      return (): void => {\n        if (ref?.current) {\n          resizeObserver.unobserve(ref.current);\n        } else {\n          resizeObserver.disconnect();\n        }\n      };\n    } else if (typeof window === 'object') {\n      // For nettlesere som ikke støtter ResizeObserver (iOS 13 og lavere)\n      const handleLayoutEvent = () => {\n        ref?.current && setSize(ref.current.getBoundingClientRect());\n      };\n\n      const events = ['layoutchange', 'resize', 'orientationchange'];\n      const debounceMs = 10;\n\n      const [debouncedCallback, teardown] = debounce(handleLayoutEvent, debounceMs);\n\n      events.forEach(eventName => window.addEventListener(eventName, debouncedCallback));\n\n      debouncedCallback();\n\n      return () => {\n        teardown();\n        events.forEach(eventName => window.removeEventListener(eventName, debouncedCallback));\n      };\n    }\n  }, [ref?.current]);\n\n  return size;\n};\n"],"names":["useSize","ref","ticking","useRef","size","setSize","useState","useEffect","resizeObserver","entries","handleLayoutEvent","events","debouncedCallback","teardown","debounce","eventName"],"mappings":"4GAUa,MAAAA,EAAWC,GAA4D,CAC5E,MAAAC,EAAUC,EAAO,EAAK,EACtB,CAACC,EAAMC,CAAO,EAAIC,EAAkB,EAC1C,OAAAC,EAAU,IAAM,CACV,GAAA,OAAO,eAAmB,IAAa,CACnC,MAAAC,EAAiB,IAAI,eAA0BC,GAAA,CAC9CP,EAAQ,SACX,OAAO,sBAAsB,IAAM,CACjCG,EAAQI,EAAQ,GAAG,OAAO,sBAAuB,CAAA,EACjDP,EAAQ,QAAU,EAAA,CACnB,EAEHA,EAAQ,QAAU,EAAA,CACnB,EACD,OAAID,GAAA,MAAAA,EAAK,SACQO,EAAA,QAAQP,GAAA,YAAAA,EAAK,OAAO,EAE9B,IAAY,CACbA,GAAA,MAAAA,EAAK,QACQO,EAAA,UAAUP,EAAI,OAAO,EAEpCO,EAAe,WAAW,CAC5B,CACF,SACS,OAAO,QAAW,SAAU,CAErC,MAAME,EAAoB,IAAM,CAC9BT,GAAA,MAAAA,EAAK,SAAWI,EAAQJ,EAAI,QAAQ,uBAAuB,CAAA,EAGvDU,EAAS,CAAC,eAAgB,SAAU,mBAAmB,EAGvD,CAACC,EAAmBC,CAAQ,EAAIC,EAASJ,EAAmB,EAAU,EAE5E,OAAAC,EAAO,QAAqBI,GAAA,OAAO,iBAAiBA,EAAWH,CAAiB,CAAC,EAE/DA,IAEX,IAAM,CACFC,IACTF,EAAO,QAAqBI,GAAA,OAAO,oBAAoBA,EAAWH,CAAiB,CAAC,CAAA,CAExF,CAAA,EACC,CAACX,GAAA,YAAAA,EAAK,OAAO,CAAC,EAEVG,CACT"}

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.6.0",
+  "version": "2.6.2",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {