@navikt/ds-react 1.5.9 → 1.5.10
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/cjs/modal/Modal.js +8 -2
- package/esm/modal/Modal.js +8 -2
- package/esm/modal/Modal.js.map +1 -1
- package/package.json +2 -2
- package/src/modal/Modal.tsx +10 -5
- package/src/modal/modal.stories.tsx +33 -7
package/cjs/modal/Modal.js
CHANGED
|
@@ -63,9 +63,15 @@ exports.Modal = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
63
63
|
buttonRef.current.focus();
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
|
|
66
|
+
const getParentSelector = () => {
|
|
67
|
+
if (parentSelector) {
|
|
68
|
+
return parentSelector;
|
|
69
|
+
}
|
|
70
|
+
return rootElement !== undefined
|
|
67
71
|
? () => rootElement
|
|
68
|
-
: undefined
|
|
72
|
+
: undefined;
|
|
73
|
+
};
|
|
74
|
+
return (react_1.default.createElement(react_modal_1.default, Object.assign({}, rest, { parentSelector: getParentSelector(), style: style, isOpen: open, ref: mergedRef, className: (0, clsx_1.default)("navds-modal", className), overlayClassName: (0, clsx_1.default)("navds-modal__overlay", overlayClassName), shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
69
75
|
describedby: ariaDescribedBy,
|
|
70
76
|
labelledby: ariaLabelledBy,
|
|
71
77
|
modal: ariaModal,
|
package/esm/modal/Modal.js
CHANGED
|
@@ -34,9 +34,15 @@ export const Modal = forwardRef((_a, ref) => {
|
|
|
34
34
|
buttonRef.current.focus();
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
|
|
37
|
+
const getParentSelector = () => {
|
|
38
|
+
if (parentSelector) {
|
|
39
|
+
return parentSelector;
|
|
40
|
+
}
|
|
41
|
+
return rootElement !== undefined
|
|
38
42
|
? () => rootElement
|
|
39
|
-
: undefined
|
|
43
|
+
: undefined;
|
|
44
|
+
};
|
|
45
|
+
return (React.createElement(ReactModal, Object.assign({}, rest, { parentSelector: getParentSelector(), style: style, isOpen: open, ref: mergedRef, className: cl("navds-modal", className), overlayClassName: cl("navds-modal__overlay", overlayClassName), shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, onRequestClose: (e) => onModalCloseRequest(e), aria: {
|
|
40
46
|
describedby: ariaDescribedBy,
|
|
41
47
|
labelledby: ariaLabelledBy,
|
|
42
48
|
modal: ariaModal,
|
package/esm/modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AACpD,OAAO,YAAkC,MAAM,gBAAgB,CAAC;AA+DhE,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAeC,EACD,GAAG,EACH,EAAE;;QAjBF,EACE,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,yBAAyB,GAAG,IAAI,EAChC,WAAW,GAAG,IAAI,EAClB,kBAAkB,EAAE,eAAe,EACnC,iBAAiB,EAAE,cAAc,EACjC,YAAY,EAAE,SAAS,EACvB,YAAY,EAAE,YAAY,EAC1B,KAAK,EACL,cAAc,OAEf,EADI,IAAI,cAdT,0MAeC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,MAAA,WAAW,EAAE,0CAAE,WAAW,CAAC;IAC/C,MAAM,UAAU,GAAG,MAAA,WAAW,EAAE,0CAAE,UAAU,CAAC;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,IAAI,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,mBAAmB,GAAG,CAAC,CAAC,EAAE,EAAE;QAChC,IAAI,yBAAyB,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE;YACrD,OAAO,EAAE,CAAC;SACX;aAAM,IAAI,SAAS,CAAC,OAAO,EAAE;YAC5B,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-react",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.10",
|
|
4
4
|
"description": "NAV designsystem react components",
|
|
5
5
|
"author": "NAV Designsystem team",
|
|
6
6
|
"license": "MIT",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@floating-ui/react-dom-interactions": "0.9.2",
|
|
40
|
-
"@navikt/ds-icons": "^1.5.
|
|
40
|
+
"@navikt/ds-icons": "^1.5.10",
|
|
41
41
|
"@radix-ui/react-tabs": "1.0.0",
|
|
42
42
|
"@radix-ui/react-toggle-group": "1.0.0",
|
|
43
43
|
"clsx": "^1.2.1",
|
package/src/modal/Modal.tsx
CHANGED
|
@@ -104,14 +104,19 @@ export const Modal = forwardRef<ReactModal, ModalProps>(
|
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
+
const getParentSelector = () => {
|
|
108
|
+
if (parentSelector) {
|
|
109
|
+
return parentSelector;
|
|
110
|
+
}
|
|
111
|
+
return rootElement !== undefined
|
|
112
|
+
? () => rootElement as HTMLElement
|
|
113
|
+
: undefined;
|
|
114
|
+
};
|
|
115
|
+
|
|
107
116
|
return (
|
|
108
117
|
<ReactModal
|
|
109
118
|
{...rest}
|
|
110
|
-
parentSelector={
|
|
111
|
-
parentSelector ?? rootElement !== undefined
|
|
112
|
-
? () => rootElement as HTMLElement
|
|
113
|
-
: undefined
|
|
114
|
-
}
|
|
119
|
+
parentSelector={getParentSelector()}
|
|
115
120
|
style={style}
|
|
116
121
|
isOpen={open}
|
|
117
122
|
ref={mergedRef}
|
|
@@ -20,17 +20,10 @@ export const Default = (props) => {
|
|
|
20
20
|
return (
|
|
21
21
|
<>
|
|
22
22
|
<Button onClick={() => setOpen(true)}>Open Modal</Button>
|
|
23
|
-
<p>
|
|
24
|
-
We can also custom style the modal by passing in a react-modal style
|
|
25
|
-
object. Here the backdrop is red.
|
|
26
|
-
</p>
|
|
27
23
|
<Modal
|
|
28
24
|
open={open}
|
|
29
25
|
onClose={() => setOpen(false)}
|
|
30
26
|
aria-labelledby="header123"
|
|
31
|
-
style={{
|
|
32
|
-
overlay: { backgroundColor: "#ff0000aa" },
|
|
33
|
-
}}
|
|
34
27
|
{...props}
|
|
35
28
|
>
|
|
36
29
|
<Modal.Content>
|
|
@@ -51,3 +44,36 @@ Default.args = {
|
|
|
51
44
|
shouldCloseOnOverlayClick: true,
|
|
52
45
|
closeButton: true,
|
|
53
46
|
};
|
|
47
|
+
|
|
48
|
+
export const ParentSelector = () => {
|
|
49
|
+
const [open, setOpen] = useState(true);
|
|
50
|
+
|
|
51
|
+
useEffect(() => {
|
|
52
|
+
Modal.setAppElement?.("#root");
|
|
53
|
+
}, []);
|
|
54
|
+
|
|
55
|
+
const parentEl = document.getElementById("custom-container");
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<>
|
|
59
|
+
<div id="custom-container" />
|
|
60
|
+
<Button onClick={() => setOpen(true)}>Open Modal</Button>
|
|
61
|
+
<Modal
|
|
62
|
+
open={open}
|
|
63
|
+
onClose={() => setOpen(false)}
|
|
64
|
+
aria-labelledby="header123"
|
|
65
|
+
parentSelector={parentEl ? () => parentEl : undefined}
|
|
66
|
+
>
|
|
67
|
+
<Modal.Content>
|
|
68
|
+
<Heading spacing id="header123" level="1" size="large">
|
|
69
|
+
Header
|
|
70
|
+
</Heading>
|
|
71
|
+
<Heading spacing level="2" size="medium">
|
|
72
|
+
Header
|
|
73
|
+
</Heading>
|
|
74
|
+
<BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
|
|
75
|
+
</Modal.Content>
|
|
76
|
+
</Modal>
|
|
77
|
+
</>
|
|
78
|
+
);
|
|
79
|
+
};
|