@entur/modal 1.7.58-alpha.0 → 1.7.58
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/README.md +2 -2
- package/dist/ModalContent.d.ts +5 -5
- package/dist/modal.cjs.development.js +13 -21
- package/dist/modal.cjs.development.js.map +1 -1
- package/dist/modal.cjs.production.min.js +1 -1
- package/dist/modal.cjs.production.min.js.map +1 -1
- package/dist/modal.esm.js +13 -21
- package/dist/modal.esm.js.map +1 -1
- package/dist/styles.css +38 -38
- package/package.json +12 -9
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
This package contains the different Modal components.
|
|
4
4
|
|
|
5
|
-
> 💡 Looking for the [documentation](https://design.entur.no/komponenter/layout-
|
|
5
|
+
> 💡 Looking for the [documentation](https://design.entur.no/komponenter/layout-og-flater/modal)?
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -14,4 +14,4 @@ yarn add @entur/modal
|
|
|
14
14
|
|
|
15
15
|
## Usage
|
|
16
16
|
|
|
17
|
-
Please refer to the [documentation](https://design.entur.no/komponenter/layout-
|
|
17
|
+
Please refer to the [documentation](https://design.entur.no/komponenter/layout-og-flater/modal) for usage information.
|
package/dist/ModalContent.d.ts
CHANGED
|
@@ -15,10 +15,10 @@ export type ModalContentProps = {
|
|
|
15
15
|
[key: string]: any;
|
|
16
16
|
};
|
|
17
17
|
export declare const headingsMap: {
|
|
18
|
-
extraSmall: <E extends React.ElementType
|
|
19
|
-
small: <
|
|
20
|
-
medium: <
|
|
21
|
-
large: <
|
|
22
|
-
extraLarge: <
|
|
18
|
+
extraSmall: <E extends React.ElementType = "h4">({ margin, children, as, ...rest }: import("@entur/typography").Heading4Props<E>) => JSX.Element;
|
|
19
|
+
small: <E extends React.ElementType = "h3">({ margin, children, as, ...rest }: import("@entur/typography").Heading3Props<E>) => JSX.Element;
|
|
20
|
+
medium: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => JSX.Element;
|
|
21
|
+
large: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => JSX.Element;
|
|
22
|
+
extraLarge: <E extends React.ElementType = "h2">({ margin, children, as, ...rest }: import("@entur/typography").Heading2Props<E>) => JSX.Element;
|
|
23
23
|
};
|
|
24
24
|
export declare const ModalContent: React.FC<ModalContentProps>;
|
|
@@ -14,30 +14,22 @@ var a11y = require('@entur/a11y');
|
|
|
14
14
|
var layout = require('@entur/layout');
|
|
15
15
|
|
|
16
16
|
function _extends() {
|
|
17
|
-
_extends = Object.assign ? Object.assign.bind() : function (
|
|
18
|
-
for (var
|
|
19
|
-
var
|
|
20
|
-
for (var
|
|
21
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
22
|
-
target[key] = source[key];
|
|
23
|
-
}
|
|
24
|
-
}
|
|
17
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
18
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
19
|
+
var t = arguments[e];
|
|
20
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
25
21
|
}
|
|
26
|
-
return
|
|
27
|
-
};
|
|
28
|
-
return _extends.apply(this, arguments);
|
|
22
|
+
return n;
|
|
23
|
+
}, _extends.apply(null, arguments);
|
|
29
24
|
}
|
|
30
|
-
function _objectWithoutPropertiesLoose(
|
|
31
|
-
if (
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
key = sourceKeys[i];
|
|
37
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
38
|
-
target[key] = source[key];
|
|
25
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
26
|
+
if (null == r) return {};
|
|
27
|
+
var t = {};
|
|
28
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
29
|
+
if (e.includes(n)) continue;
|
|
30
|
+
t[n] = r[n];
|
|
39
31
|
}
|
|
40
|
-
return
|
|
32
|
+
return t;
|
|
41
33
|
}
|
|
42
34
|
|
|
43
35
|
var _excluded$2 = ["className", "open"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.cjs.development.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","_excluded","React","createElement","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.cjs.development.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","_ref$closeLabel","closeLabel","initialFocusRef","onDismiss","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","_ref$contrast","contrast","_ref$open","style","_ref$overlay","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","VisuallyHidden","_ref2","warnAboutMissingStyles"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),n=require("react"),a=require("@entur/icons"),t=require("@entur/button"),r=require("@entur/typography"),l=require("classnames"),i=require("@reach/dialog"),o=require("react-focus-lock"),s=require("@entur/a11y"),c=require("@entur/layout");function d(){return d=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var a=arguments[n];for(var t in a)({}).hasOwnProperty.call(a,t)&&(e[t]=a[t])}return e},d.apply(null,arguments)}function u(e,n){if(null==e)return{};var a={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(n.includes(t))continue;a[t]=e[t]}return a}var m=["className","open"],g=function(e){var a=e.className,t=e.open,r=u(e,m);return n.createElement(i.DialogOverlay,d({className:l("eds-modal__overlay",a),isOpen:t},r))},p=["children","className","size","title","align"],v={extraSmall:r.Heading4,small:r.Heading3,medium:r.Heading2,large:r.Heading2,extraLarge:r.Heading2},y=function(a){var t=a.children,o=a.className,s=a.size,c=a.title,m=a.align,g=void 0===m?"start":m,y=u(a,p),f=v[s]||r.Heading2,b=e.useRandomId("eds-modal");return n.createElement(i.DialogContent,d({className:l("eds-modal__content","eds-modal__content--size-"+s,"eds-modal__content--align-"+g,o),"aria-labelledby":b},y),c&&n.createElement(f,{margin:"bottom",as:"h2",id:b},c),t)},f=["children","closeLabel","initialFocusRef","open","onDismiss","size","align","title","closeOnClickOutside"],b=function(e){var n=e.children;return e.condition?(0,e.wrapper)(n):n};e.warnAboutMissingStyles("modal","icons","typography","a11y","button"),exports.Drawer=function(d){var u=d.children,m=d.className,p=d.closeLabel,v=void 0===p?"Lukk skuff":p,y=d.contrast,f=void 0!==y&&y,E=d.open,h=void 0===E||E,_=d.onDismiss,O=d.title,k=d.style,w=d.overlay,N=void 0!==w&&w,q=e.useRandomId("eds-drawer");return h?n.createElement(b,{condition:N,wrapper:function(e){return n.createElement(g,{open:h,onDismiss:_},e)}},n.createElement(f?c.Contrast:n.Fragment,null,n.createElement(N?i.DialogContent:"div",{"aria-labelledby":q,className:l("eds-drawer",m),onKeyDown:function(e){"Escape"===e.key&&(e.stopPropagation(),_())},style:k},n.createElement(o.MoveFocusInside,null,n.createElement("div",{className:"eds-drawer__content"},n.createElement(r.Heading3,{as:"h2",id:q},O),u),n.createElement(t.IconButton,{className:"eds-drawer__close-button",onClick:_,type:"button"},n.createElement(a.CloseIcon,{"aria-hidden":!0}),n.createElement(s.VisuallyHidden,null,v)))))):null},exports.Modal=function(l){var i,o=l.children,s=l.closeLabel,c=void 0===s?"Lukk":s,m=l.initialFocusRef,p=l.open,b=l.onDismiss,E=l.size,h=l.align,_=void 0===h?"start":h,O=l.title,k=l.closeOnClickOutside,w=void 0===k||k,N=u(l,f),q=e.useRandomId("eds-modal"),C=v[E]||r.Heading2,D=["medium","large","extraLarge"].includes(E);return b&&w&&(i=b),n.createElement(g,{open:p,onDismiss:i,initialFocusRef:m},n.createElement(y,d({size:E,align:_},N),D&&n.createElement(t.IconButton,{className:"eds-modal__close","aria-label":c,onClick:b,type:"button"},n.createElement(a.CloseIcon,null)),O&&n.createElement(C,{margin:"bottom",as:"h2",id:q},O),o))},exports.ModalContent=y,exports.ModalOverlay=g,exports.headingsMap=v;
|
|
2
2
|
//# sourceMappingURL=modal.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","_ref2","condition","wrapper","warnAboutMissingStyles","_ref$closeLabel","closeLabel","_ref$contrast","contrast","_ref$open","onDismiss","style","_ref$overlay","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.cjs.production.min.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Drawer.tsx","../src/index.tsx","../src/Modal.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","ConditionalWrapper","_ref2","condition","wrapper","warnAboutMissingStyles","_ref$closeLabel","closeLabel","_ref$contrast","contrast","_ref$open","onDismiss","style","_ref$overlay","overlay","titleId","Contrast","Fragment","onKeyDown","e","key","stopPropagation","MoveFocusInside","IconButton","onClick","type","CloseIcon","VisuallyHidden","handleOnDismiss","initialFocusRef","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes"],"mappings":"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"}
|
package/dist/modal.esm.js
CHANGED
|
@@ -10,30 +10,22 @@ import { VisuallyHidden } from '@entur/a11y';
|
|
|
10
10
|
import { Contrast } from '@entur/layout';
|
|
11
11
|
|
|
12
12
|
function _extends() {
|
|
13
|
-
_extends = Object.assign ? Object.assign.bind() : function (
|
|
14
|
-
for (var
|
|
15
|
-
var
|
|
16
|
-
for (var
|
|
17
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
18
|
-
target[key] = source[key];
|
|
19
|
-
}
|
|
20
|
-
}
|
|
13
|
+
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
14
|
+
for (var e = 1; e < arguments.length; e++) {
|
|
15
|
+
var t = arguments[e];
|
|
16
|
+
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
21
17
|
}
|
|
22
|
-
return
|
|
23
|
-
};
|
|
24
|
-
return _extends.apply(this, arguments);
|
|
18
|
+
return n;
|
|
19
|
+
}, _extends.apply(null, arguments);
|
|
25
20
|
}
|
|
26
|
-
function _objectWithoutPropertiesLoose(
|
|
27
|
-
if (
|
|
28
|
-
var
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
key = sourceKeys[i];
|
|
33
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
34
|
-
target[key] = source[key];
|
|
21
|
+
function _objectWithoutPropertiesLoose(r, e) {
|
|
22
|
+
if (null == r) return {};
|
|
23
|
+
var t = {};
|
|
24
|
+
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
25
|
+
if (e.includes(n)) continue;
|
|
26
|
+
t[n] = r[n];
|
|
35
27
|
}
|
|
36
|
-
return
|
|
28
|
+
return t;
|
|
37
29
|
}
|
|
38
30
|
|
|
39
31
|
var _excluded$2 = ["className", "open"];
|
package/dist/modal.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","className","open","rest","_excluded","React","createElement","DialogOverlay","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","closeLabel","initialFocusRef","onDismiss","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","contrast","style","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","VisuallyHidden","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"modal.esm.js","sources":["../src/ModalOverlay.tsx","../src/ModalContent.tsx","../src/Modal.tsx","../src/Drawer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { DialogOverlay } from '@reach/dialog';\n\nexport type ModalOverlayProps = {\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n [key: string]: any;\n};\n\nexport const ModalOverlay: React.FC<ModalOverlayProps> = ({\n className,\n open,\n ...rest\n}) => (\n <DialogOverlay\n className={classNames('eds-modal__overlay', className)}\n isOpen={open}\n {...rest}\n />\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { DialogContent } from '@reach/dialog';\nimport { Heading4, Heading3, Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nexport type ModalContentProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n [key: string]: any;\n};\n\nexport const headingsMap = {\n extraSmall: Heading4,\n small: Heading3,\n medium: Heading2,\n large: Heading2,\n extraLarge: Heading2,\n};\n\nexport const ModalContent: React.FC<ModalContentProps> = ({\n children,\n className,\n size,\n title,\n align = 'start',\n ...rest\n}) => {\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const randomId = useRandomId('eds-modal');\n return (\n <DialogContent\n className={classNames(\n 'eds-modal__content',\n `eds-modal__content--size-${size}`,\n `eds-modal__content--align-${align}`,\n className,\n )}\n aria-labelledby={randomId}\n {...rest}\n >\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </DialogContent>\n );\n};\n","import React from 'react';\n\nimport { CloseIcon } from '@entur/icons';\nimport { IconButton } from '@entur/button';\nimport { Heading2 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\n\nimport { ModalOverlay } from './ModalOverlay';\nimport { ModalContent, headingsMap } from './ModalContent';\n\nimport './Modal.scss';\n\nexport type ModalProps = {\n /** Innholdet i modalen */\n children: React.ReactNode;\n /** Skjermleser-label til lukk-knappen */\n closeLabel?: string;\n /** En ref til elementet som skal være fokusert når modalen åpnes. Defaulter til lukkeknappen */\n initialFocusRef?: React.RefObject<HTMLElement>;\n /** Flagg som sier om modalen er åpen */\n open?: boolean;\n /** Callback som kalles når brukeren ber om å lukke modalen */\n onDismiss?: () => void;\n /** Størrelsen på modalen */\n size: 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';\n /** Hvordan innholdet skal plasseres i modalen\n * @default 'start'\n */\n align?: 'start' | 'center' | 'end';\n /** Tittelen som vises i modalen */\n title?: React.ReactNode;\n /** Om modalen skal lukkes når man klikker på utsiden av den\n * @default true\n */\n closeOnClickOutside?: boolean;\n [key: string]: any;\n};\n\nexport const Modal: React.FC<ModalProps> = ({\n children,\n closeLabel = 'Lukk',\n initialFocusRef,\n open,\n onDismiss,\n size,\n align = 'start',\n title,\n closeOnClickOutside = true,\n ...rest\n}) => {\n const randomId = useRandomId('eds-modal');\n const Heading: React.ElementType = headingsMap[size] || Heading2;\n const showCloseButton = ['medium', 'large', 'extraLarge'].includes(size);\n\n let handleOnDismiss;\n if (onDismiss && closeOnClickOutside) {\n handleOnDismiss = onDismiss;\n }\n return (\n <ModalOverlay\n open={open}\n onDismiss={handleOnDismiss}\n initialFocusRef={initialFocusRef}\n >\n <ModalContent size={size} align={align} {...rest}>\n {showCloseButton && (\n <IconButton\n className=\"eds-modal__close\"\n aria-label={closeLabel}\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon />\n </IconButton>\n )}\n {title && (\n <Heading margin=\"bottom\" as=\"h2\" id={randomId}>\n {title}\n </Heading>\n )}\n {children}\n </ModalContent>\n </ModalOverlay>\n );\n};\n","import React from 'react';\nimport classNames from 'classnames';\nimport { MoveFocusInside } from 'react-focus-lock';\nimport { VisuallyHidden } from '@entur/a11y';\nimport { Contrast } from '@entur/layout';\nimport { CloseIcon } from '@entur/icons';\nimport { Heading3 } from '@entur/typography';\nimport { useRandomId } from '@entur/utils';\nimport { IconButton } from '@entur/button';\n\nimport './Drawer.scss';\nimport { ModalOverlay } from './ModalOverlay';\nimport { DialogContent } from '@reach/dialog';\n\nexport type DrawerProps = {\n /** Innholdet. Typisk tekst, lenker eller knapper */\n children: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Tekst som beskriver lukkeknappen for skjermlesere\n * @default 'Lukk skuff'\n */\n closeLabel?: string;\n /** Om draweren skal vises i mørk variant\n * @default false\n */\n contrast?: boolean;\n /** Callback som kalles når brukeren ønsker å lukke draweren */\n onDismiss: () => void;\n /** Om draweren er åpen eller ikke\n * @default true\n */\n open?: boolean;\n /** Tittel på toppen av draweren */\n title: string;\n /** Styling som sendes til Drawer */\n style?: React.CSSProperties;\n /** Legger på et overlay over resten av siden */\n overlay?: boolean;\n};\n\nexport const Drawer: React.FC<DrawerProps> = ({\n children,\n className,\n closeLabel = 'Lukk skuff',\n contrast = false,\n open = true,\n onDismiss,\n title,\n style,\n overlay = false,\n}) => {\n const titleId = useRandomId('eds-drawer');\n\n if (!open) {\n return null;\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n onDismiss();\n }\n };\n\n const Wrapper = contrast ? Contrast : React.Fragment;\n const ContentContainer = overlay ? DialogContent : 'div';\n return (\n <ConditionalWrapper\n condition={overlay}\n wrapper={(children: React.ReactNode) => (\n <ModalOverlay open={open} onDismiss={onDismiss}>\n {children}\n </ModalOverlay>\n )}\n >\n <Wrapper>\n <ContentContainer\n aria-labelledby={titleId}\n className={classNames('eds-drawer', className)}\n onKeyDown={handleKeyDown}\n style={style}\n >\n <MoveFocusInside>\n <div className=\"eds-drawer__content\">\n <Heading3 as=\"h2\" id={titleId}>\n {title}\n </Heading3>\n {children}\n </div>\n <IconButton\n className=\"eds-drawer__close-button\"\n onClick={onDismiss}\n type=\"button\"\n >\n <CloseIcon aria-hidden />\n <VisuallyHidden>{closeLabel}</VisuallyHidden>\n </IconButton>\n </MoveFocusInside>\n </ContentContainer>\n </Wrapper>\n </ConditionalWrapper>\n );\n};\n\nconst ConditionalWrapper: React.FC<{\n condition: boolean;\n wrapper: (child: JSX.Element) => JSX.Element;\n children: React.ReactElement;\n}> = ({ condition, wrapper, children }) =>\n condition ? wrapper(children) : children;\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('modal', 'icons', 'typography', 'a11y', 'button');\n\nexport * from './Modal';\nexport * from './ModalOverlay';\nexport * from './ModalContent';\nexport * from './Drawer';\n"],"names":["ModalOverlay","_ref","className","open","rest","_objectWithoutPropertiesLoose","_excluded","React","createElement","DialogOverlay","_extends","classNames","isOpen","headingsMap","extraSmall","Heading4","small","Heading3","medium","Heading2","large","extraLarge","ModalContent","children","size","title","_ref$align","align","Heading","randomId","useRandomId","DialogContent","margin","as","id","Modal","_ref$closeLabel","closeLabel","initialFocusRef","onDismiss","_ref$closeOnClickOuts","closeOnClickOutside","showCloseButton","includes","handleOnDismiss","IconButton","onClick","type","CloseIcon","Drawer","_ref$contrast","contrast","_ref$open","style","_ref$overlay","overlay","titleId","handleKeyDown","e","key","stopPropagation","Wrapper","Contrast","Fragment","ContentContainer","ConditionalWrapper","condition","wrapper","onKeyDown","MoveFocusInside","VisuallyHidden","_ref2","warnAboutMissingStyles"],"mappings":"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"}
|
package/dist/styles.css
CHANGED
|
@@ -1,43 +1,5 @@
|
|
|
1
1
|
/* DO NOT CHANGE!*/
|
|
2
2
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
|
-
.eds-drawer {
|
|
4
|
-
animation: slideFromRight forwards ease-out 0.1s;
|
|
5
|
-
background-color: var(--components-modal-drawer-standard-background);
|
|
6
|
-
color: var(--components-modal-drawer-standard-text);
|
|
7
|
-
bottom: 0;
|
|
8
|
-
padding: 1.5rem;
|
|
9
|
-
position: fixed;
|
|
10
|
-
right: 0;
|
|
11
|
-
top: 0;
|
|
12
|
-
max-width: 100%;
|
|
13
|
-
min-width: 20rem;
|
|
14
|
-
width: 25vw;
|
|
15
|
-
z-index: 40;
|
|
16
|
-
overflow-y: auto;
|
|
17
|
-
}
|
|
18
|
-
.eds-contrast .eds-drawer {
|
|
19
|
-
background-color: var(--components-modal-drawer-contrast-background);
|
|
20
|
-
color: var(--components-modal-drawer-contrast-text);
|
|
21
|
-
}
|
|
22
|
-
.eds-drawer__close-button {
|
|
23
|
-
margin: 0;
|
|
24
|
-
position: absolute;
|
|
25
|
-
top: 1.5rem;
|
|
26
|
-
right: 1.5rem;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@keyframes slideFromRight {
|
|
30
|
-
from {
|
|
31
|
-
box-shadow: none;
|
|
32
|
-
transform: translateX(100%);
|
|
33
|
-
}
|
|
34
|
-
to {
|
|
35
|
-
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
36
|
-
transform: 0;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
/* DO NOT CHANGE!*/
|
|
40
|
-
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
41
3
|
:root {
|
|
42
4
|
--reach-dialog: 1;
|
|
43
5
|
}
|
|
@@ -146,6 +108,44 @@
|
|
|
146
108
|
}
|
|
147
109
|
/* DO NOT CHANGE!*/
|
|
148
110
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
111
|
+
.eds-drawer {
|
|
112
|
+
animation: slideFromRight forwards ease-out 0.1s;
|
|
113
|
+
background-color: var(--components-modal-drawer-standard-background);
|
|
114
|
+
color: var(--components-modal-drawer-standard-text);
|
|
115
|
+
bottom: 0;
|
|
116
|
+
padding: 1.5rem;
|
|
117
|
+
position: fixed;
|
|
118
|
+
right: 0;
|
|
119
|
+
top: 0;
|
|
120
|
+
max-width: 100%;
|
|
121
|
+
min-width: 20rem;
|
|
122
|
+
width: 25vw;
|
|
123
|
+
z-index: 40;
|
|
124
|
+
overflow-y: auto;
|
|
125
|
+
}
|
|
126
|
+
.eds-contrast .eds-drawer {
|
|
127
|
+
background-color: var(--components-modal-drawer-contrast-background);
|
|
128
|
+
color: var(--components-modal-drawer-contrast-text);
|
|
129
|
+
}
|
|
130
|
+
.eds-drawer__close-button {
|
|
131
|
+
margin: 0;
|
|
132
|
+
position: absolute;
|
|
133
|
+
top: 1.5rem;
|
|
134
|
+
right: 1.5rem;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes slideFromRight {
|
|
138
|
+
from {
|
|
139
|
+
box-shadow: none;
|
|
140
|
+
transform: translateX(100%);
|
|
141
|
+
}
|
|
142
|
+
to {
|
|
143
|
+
box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
|
|
144
|
+
transform: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
/* DO NOT CHANGE!*/
|
|
148
|
+
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
149
149
|
/* DO NOT CHANGE!*/
|
|
150
150
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
151
151
|
/* DO NOT CHANGE!*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/modal",
|
|
3
|
-
"version": "1.7.58
|
|
3
|
+
"version": "1.7.58",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/modal.esm.js",
|
|
@@ -27,16 +27,19 @@
|
|
|
27
27
|
"react-dom": ">=16.8.0"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@entur/a11y": "^0.2.94
|
|
31
|
-
"@entur/button": "^3.2.37
|
|
32
|
-
"@entur/icons": "^7.5.
|
|
33
|
-
"@entur/layout": "^2.3.21
|
|
34
|
-
"@entur/tokens": "^3.17.
|
|
35
|
-
"@entur/typography": "^1.8.50
|
|
36
|
-
"@entur/utils": "^
|
|
30
|
+
"@entur/a11y": "^0.2.94",
|
|
31
|
+
"@entur/button": "^3.2.37",
|
|
32
|
+
"@entur/icons": "^7.5.1",
|
|
33
|
+
"@entur/layout": "^2.3.21",
|
|
34
|
+
"@entur/tokens": "^3.17.4",
|
|
35
|
+
"@entur/typography": "^1.8.50",
|
|
36
|
+
"@entur/utils": "^0.12.2",
|
|
37
37
|
"@reach/dialog": "^0.16.0",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"react-focus-lock": "^2.9.1"
|
|
40
40
|
},
|
|
41
|
-
"
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"dts-cli": "2.0.5"
|
|
43
|
+
},
|
|
44
|
+
"gitHead": "835e1335b390f48b80379ae6c473ac89041a392a"
|
|
42
45
|
}
|