@helsenorge/designsystem-react 2.6.1 → 2.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/Modal.js +1 -1
- package/Modal.js.map +1 -1
- package/components/Modal/Modal.d.ts.map +1 -1
- package/hooks/useFocusTrap.d.ts +1 -2
- package/hooks/useFocusTrap.d.ts.map +1 -1
- package/hooks/useFocusTrap.js +1 -1
- package/hooks/useFocusTrap.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [2.6.1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.6.0&targetVersion=GTv2.6.1) (2022-11-17)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* 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)
|
|
7
|
+
|
|
1
8
|
## [2.6.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.5.0&targetVersion=GTv2.6.0) (2022-11-15)
|
|
2
9
|
|
|
3
10
|
|
package/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t,{useEffect as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/Modal.js.map
CHANGED
|
@@ -1 +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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"}
|
|
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);\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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"}
|
|
@@ -1 +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;;;;;;;;;
|
|
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;;;;;;;;;CAyK7C,CAAC;AAIF,eAAe,KAAK,CAAC"}
|
package/hooks/useFocusTrap.d.ts
CHANGED
|
@@ -3,8 +3,7 @@ import React from 'react';
|
|
|
3
3
|
* Lås fokus til et bestemt element. Bruker vil bare kunne tabbe mellom fokuserbare elementer innenfor elementet.
|
|
4
4
|
* @param ref Alle barn av dette elementet vil være fokuserbare, elementer utenfor vil ikke det
|
|
5
5
|
* @param trapFocus Om fokus skal "trappes" innenfor elementet eller ikke. Default=true.
|
|
6
|
-
* @param autofocus Om fokus automatisk skal settes til første fokuserbare element. Default=false.
|
|
7
6
|
*/
|
|
8
|
-
export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean
|
|
7
|
+
export declare const useFocusTrap: (ref: React.RefObject<HTMLElement>, trapFocus?: boolean) => void;
|
|
9
8
|
export default useFocusTrap;
|
|
10
9
|
//# sourceMappingURL=useFocusTrap.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC
|
|
1
|
+
{"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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useEffect as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=useFocusTrap.js.map
|
|
@@ -1 +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
|
|
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 */\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/package.json
CHANGED