@contentful/f36-modal 4.6.1 → 4.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 +12 -0
- package/dist/main.js +82 -103
- package/dist/main.js.map +1 -1
- package/dist/module.js +76 -90
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +10 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.6.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1994](https://github.com/contentful/forma-36/pull/1994) [`0364ffe2`](https://github.com/contentful/forma-36/commit/0364ffe2aa2e5ccfea6263f4173b2d8069e4ec05) Thanks [@denkristoffer](https://github.com/denkristoffer)! - fix(modal): fix scaling issues for modals with size "zen"
|
|
8
|
+
|
|
9
|
+
- Updated dependencies []:
|
|
10
|
+
- @contentful/f36-button@4.6.2
|
|
11
|
+
- @contentful/f36-icons@4.6.2
|
|
12
|
+
- @contentful/f36-typography@4.6.2
|
|
13
|
+
- @contentful/f36-core@4.6.2
|
|
14
|
+
|
|
3
15
|
## 4.6.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/main.js
CHANGED
|
@@ -1,43 +1,26 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
7
|
-
var $
|
|
8
|
-
var $
|
|
9
|
-
var $
|
|
10
|
-
|
|
11
|
-
function $parcel$exportWildcard(dest, source) {
|
|
12
|
-
Object.keys(source).forEach(function(key) {
|
|
13
|
-
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
Object.defineProperty(dest, key, {
|
|
18
|
-
enumerable: true,
|
|
19
|
-
get: function get() {
|
|
20
|
-
return source[key];
|
|
21
|
-
}
|
|
22
|
-
});
|
|
23
|
-
});
|
|
1
|
+
var $a6cQm$react = require("react");
|
|
2
|
+
var $a6cQm$reactmodal = require("react-modal");
|
|
3
|
+
var $a6cQm$contentfulf36core = require("@contentful/f36-core");
|
|
4
|
+
var $a6cQm$emotion = require("emotion");
|
|
5
|
+
var $a6cQm$contentfulf36icons = require("@contentful/f36-icons");
|
|
6
|
+
var $a6cQm$contentfulf36button = require("@contentful/f36-button");
|
|
7
|
+
var $a6cQm$contentfulf36typography = require("@contentful/f36-typography");
|
|
8
|
+
var $a6cQm$contentfulf36tokens = require("@contentful/f36-tokens");
|
|
9
|
+
var $a6cQm$reactdom = require("react-dom");
|
|
24
10
|
|
|
25
|
-
return dest;
|
|
26
|
-
}
|
|
27
11
|
function $parcel$export(e, n, v, s) {
|
|
28
12
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
29
13
|
}
|
|
30
14
|
function $parcel$interopDefault(a) {
|
|
31
15
|
return a && a.__esModule ? a.default : a;
|
|
32
16
|
}
|
|
33
|
-
var $4eddba25b642b7ac$exports = {};
|
|
34
17
|
|
|
35
|
-
$parcel$export(
|
|
36
|
-
$parcel$export(
|
|
37
|
-
$parcel$export(
|
|
38
|
-
$parcel$export(
|
|
39
|
-
$parcel$export(
|
|
40
|
-
$parcel$export(
|
|
18
|
+
$parcel$export(module.exports, "Modal", () => $2132db66f9439432$export$2b77a92f1a5ad772);
|
|
19
|
+
$parcel$export(module.exports, "ModalConfirm", () => $657ddd6e4548962f$export$427af6990c8ff682);
|
|
20
|
+
$parcel$export(module.exports, "ModalContent", () => $66391c55bbcf9065$export$6da19a24bf249f17);
|
|
21
|
+
$parcel$export(module.exports, "ModalControls", () => $8b06e393320a8e77$export$c63fb08199be8e0e);
|
|
22
|
+
$parcel$export(module.exports, "ModalHeader", () => $2679bd8c144d3995$export$f50a68e3694789ee);
|
|
23
|
+
$parcel$export(module.exports, "ModalLauncher", () => $f6dfceab072669eb$export$e21b828b42c54a37);
|
|
41
24
|
|
|
42
25
|
|
|
43
26
|
|
|
@@ -51,19 +34,19 @@ $parcel$export($4eddba25b642b7ac$exports, "ModalLauncher", () => $f6dfceab072669
|
|
|
51
34
|
|
|
52
35
|
function $2e9361382cc113aa$export$4bef00d568400c9b() {
|
|
53
36
|
return {
|
|
54
|
-
root: /*#__PURE__*/ $
|
|
37
|
+
root: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
55
38
|
position: 'relative',
|
|
56
|
-
padding: `${($parcel$interopDefault($
|
|
57
|
-
borderRadius: `${($parcel$interopDefault($
|
|
58
|
-
borderBottom: `1px solid ${($parcel$interopDefault($
|
|
39
|
+
padding: `${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingL}`,
|
|
40
|
+
borderRadius: `${($parcel$interopDefault($a6cQm$contentfulf36tokens)).borderRadiusMedium} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).borderRadiusMedium} 0 0`,
|
|
41
|
+
borderBottom: `1px solid ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).gray300}`
|
|
59
42
|
}),
|
|
60
|
-
buttonContainer: /*#__PURE__*/ $
|
|
43
|
+
buttonContainer: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
61
44
|
position: 'relative',
|
|
62
|
-
width: ($parcel$interopDefault($
|
|
63
|
-
height: ($parcel$interopDefault($
|
|
45
|
+
width: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacing2Xl,
|
|
46
|
+
height: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingL,
|
|
64
47
|
button: {
|
|
65
48
|
position: 'absolute',
|
|
66
|
-
top: `calc(-1 * ${($parcel$interopDefault($
|
|
49
|
+
top: `calc(-1 * ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacing2Xs})`,
|
|
67
50
|
right: 0
|
|
68
51
|
}
|
|
69
52
|
})
|
|
@@ -73,23 +56,23 @@ function $2e9361382cc113aa$export$4bef00d568400c9b() {
|
|
|
73
56
|
|
|
74
57
|
function $2679bd8c144d3995$export$f50a68e3694789ee({ onClose: onClose , title: title , testId: testId = 'cf-ui-modal-header' , className: className , ...otherProps }) {
|
|
75
58
|
const styles = $2e9361382cc113aa$export$4bef00d568400c9b();
|
|
76
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
59
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36core.Flex, {
|
|
77
60
|
...otherProps,
|
|
78
|
-
className: $
|
|
61
|
+
className: $a6cQm$emotion.cx(styles.root, className),
|
|
79
62
|
testId: testId,
|
|
80
63
|
alignItems: "center",
|
|
81
64
|
justifyContent: "space-between"
|
|
82
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
65
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36typography.Subheading, {
|
|
83
66
|
as: "h1",
|
|
84
67
|
isTruncated: true,
|
|
85
68
|
marginBottom: "none"
|
|
86
|
-
}, title), onClose && /*#__PURE__*/ ($parcel$interopDefault($
|
|
69
|
+
}, title), onClose && /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36core.Flex, {
|
|
87
70
|
alignItems: "center",
|
|
88
71
|
className: styles.buttonContainer
|
|
89
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
72
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36button.Button, {
|
|
90
73
|
variant: "transparent",
|
|
91
74
|
"aria-label": "Close",
|
|
92
|
-
startIcon: /*#__PURE__*/ ($parcel$interopDefault($
|
|
75
|
+
startIcon: /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36icons.CloseIcon, {
|
|
93
76
|
size: "small"
|
|
94
77
|
}),
|
|
95
78
|
onClick: ()=>{
|
|
@@ -108,12 +91,12 @@ $2679bd8c144d3995$export$f50a68e3694789ee.displayName = 'ModalHeader';
|
|
|
108
91
|
|
|
109
92
|
function $32e971b34c262557$export$5168abbf3ad664a0() {
|
|
110
93
|
return {
|
|
111
|
-
root: /*#__PURE__*/ $
|
|
112
|
-
padding: `${($parcel$interopDefault($
|
|
113
|
-
color: ($parcel$interopDefault($
|
|
114
|
-
fontSize: ($parcel$interopDefault($
|
|
115
|
-
fontFamily: ($parcel$interopDefault($
|
|
116
|
-
lineHeight: ($parcel$interopDefault($
|
|
94
|
+
root: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
95
|
+
padding: `${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingM} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacingL}`,
|
|
96
|
+
color: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).gray700,
|
|
97
|
+
fontSize: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).fontSizeM,
|
|
98
|
+
fontFamily: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).fontStackPrimary,
|
|
99
|
+
lineHeight: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).lineHeightM,
|
|
117
100
|
overflowY: 'auto',
|
|
118
101
|
overflowX: 'auto',
|
|
119
102
|
boxSizing: 'border-box'
|
|
@@ -124,10 +107,10 @@ function $32e971b34c262557$export$5168abbf3ad664a0() {
|
|
|
124
107
|
|
|
125
108
|
function $66391c55bbcf9065$export$6da19a24bf249f17({ testId: testId = 'cf-ui-modal-content' , className: className , children: children , ...otherProps }) {
|
|
126
109
|
const styles = $32e971b34c262557$export$5168abbf3ad664a0();
|
|
127
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
110
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36core.Box, {
|
|
128
111
|
...otherProps,
|
|
129
112
|
as: "div",
|
|
130
|
-
className: $
|
|
113
|
+
className: $a6cQm$emotion.cx(styles.root, className),
|
|
131
114
|
testId: testId
|
|
132
115
|
}, children));
|
|
133
116
|
}
|
|
@@ -138,55 +121,53 @@ $66391c55bbcf9065$export$6da19a24bf249f17.displayName = 'ModalContent';
|
|
|
138
121
|
|
|
139
122
|
|
|
140
123
|
function $a1d799ea27882387$export$9af97f4b0b4c597a(props) {
|
|
141
|
-
const modal = $
|
|
142
|
-
margin: ($parcel$interopDefault($
|
|
143
|
-
backgroundColor: ($parcel$interopDefault($
|
|
144
|
-
borderRadius: ($parcel$interopDefault($
|
|
145
|
-
boxShadow: ($parcel$interopDefault($
|
|
146
|
-
maxHeight: `calc(100vh - 1rem * (100 / ${($parcel$interopDefault($
|
|
147
|
-
maxWidth: `calc(100vw - 1rem * (100 / ${($parcel$interopDefault($
|
|
124
|
+
const modal = $a6cQm$emotion.cx(/*#__PURE__*/ $a6cQm$emotion.css({
|
|
125
|
+
margin: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).spacing2Xl,
|
|
126
|
+
backgroundColor: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).colorWhite,
|
|
127
|
+
borderRadius: props.size === 'zen' ? 0 : ($parcel$interopDefault($a6cQm$contentfulf36tokens)).borderRadiusMedium,
|
|
128
|
+
boxShadow: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).boxShadowHeavy,
|
|
129
|
+
maxHeight: `calc(100vh - 1rem * (100 / ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).fontBaseDefault}))`,
|
|
130
|
+
maxWidth: `calc(100vw - 1rem * (100 / ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).fontBaseDefault}))`,
|
|
148
131
|
overflow: 'hidden',
|
|
149
132
|
display: 'flex',
|
|
150
133
|
flexDirection: 'column'
|
|
151
|
-
}), props.allowHeightOverflow ? /*#__PURE__*/ $
|
|
134
|
+
}), props.allowHeightOverflow ? /*#__PURE__*/ $a6cQm$emotion.css({
|
|
152
135
|
name: "1evlo53",
|
|
153
136
|
styles: "overflow:auto;max-height:none;"
|
|
154
|
-
}) : null, props.size === 'zen' ? /*#__PURE__*/ $
|
|
137
|
+
}) : null, props.size === 'zen' ? /*#__PURE__*/ $a6cQm$emotion.css({
|
|
155
138
|
name: "11c88st",
|
|
156
139
|
styles: "max-width:none;max-height:none;margin:0;height:100%;width:100%;"
|
|
157
140
|
}) : null, props.className);
|
|
158
141
|
return {
|
|
159
|
-
|
|
160
|
-
portal: /*#__PURE__*/ $7x5iO$emotion.css({
|
|
142
|
+
portal: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
161
143
|
name: "13o7eu2",
|
|
162
144
|
styles: "display:block;"
|
|
163
145
|
}),
|
|
164
146
|
base: {
|
|
165
|
-
root: $
|
|
166
|
-
zIndex: ($parcel$interopDefault($
|
|
147
|
+
root: $a6cQm$emotion.cx(/*#__PURE__*/ $a6cQm$emotion.css({
|
|
148
|
+
zIndex: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).zIndexModalContent,
|
|
167
149
|
position: 'relative',
|
|
168
150
|
padding: 0,
|
|
169
151
|
display: 'inline-block',
|
|
170
152
|
margin: '0 auto',
|
|
171
153
|
textAlign: 'left',
|
|
172
154
|
outline: 'none',
|
|
173
|
-
transform: 'scale(0.85)',
|
|
174
|
-
transition: `transform ${($parcel$interopDefault($
|
|
175
|
-
}), props.size === 'zen' ? /*#__PURE__*/ $
|
|
155
|
+
transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',
|
|
156
|
+
transition: `transform ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).transitionEasingDefault}`
|
|
157
|
+
}), props.size === 'zen' ? /*#__PURE__*/ $a6cQm$emotion.css({
|
|
176
158
|
name: "uwwqev",
|
|
177
159
|
styles: "width:100%;height:100%;"
|
|
178
160
|
}) : null),
|
|
179
|
-
afterOpen: /*#__PURE__*/ $
|
|
161
|
+
afterOpen: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
180
162
|
name: "plgkgv",
|
|
181
163
|
styles: "transform:scale(1) !important;"
|
|
182
164
|
}),
|
|
183
|
-
beforeClose: /*#__PURE__*/ $
|
|
184
|
-
|
|
185
|
-
styles: "transform:scale(0.85) !important;"
|
|
165
|
+
beforeClose: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
166
|
+
transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)'
|
|
186
167
|
})
|
|
187
168
|
},
|
|
188
169
|
modalOverlay: {
|
|
189
|
-
root: $
|
|
170
|
+
root: $a6cQm$emotion.cx(/*#__PURE__*/ $a6cQm$emotion.css({
|
|
190
171
|
display: 'flex',
|
|
191
172
|
alignItems: 'baseline',
|
|
192
173
|
flexWrap: 'wrap',
|
|
@@ -194,26 +175,27 @@ function $a1d799ea27882387$export$9af97f4b0b4c597a(props) {
|
|
|
194
175
|
right: 0,
|
|
195
176
|
bottom: 0,
|
|
196
177
|
left: 0,
|
|
197
|
-
zIndex: ($parcel$interopDefault($
|
|
178
|
+
zIndex: ($parcel$interopDefault($a6cQm$contentfulf36tokens)).zIndexModal,
|
|
198
179
|
opacity: 0,
|
|
199
|
-
transition: `opacity ${($parcel$interopDefault($
|
|
180
|
+
transition: `opacity ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($a6cQm$contentfulf36tokens)).transitionEasingDefault}`,
|
|
200
181
|
position: 'fixed',
|
|
201
182
|
overflowY: 'auto',
|
|
202
183
|
backgroundColor: 'rgba(12, 20, 28, 0.74902)',
|
|
203
184
|
textAlign: 'center'
|
|
204
|
-
}), props.position === 'center' ? /*#__PURE__*/ $
|
|
185
|
+
}), props.position === 'center' ? /*#__PURE__*/ $a6cQm$emotion.css({
|
|
205
186
|
name: "1qe4tyl",
|
|
206
187
|
styles: "align-items:center;justify-content:center;"
|
|
207
188
|
}) : null),
|
|
208
|
-
afterOpen: /*#__PURE__*/ $
|
|
189
|
+
afterOpen: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
209
190
|
name: "whh5e5",
|
|
210
191
|
styles: "opacity:1;"
|
|
211
192
|
}),
|
|
212
|
-
beforeClose: /*#__PURE__*/ $
|
|
193
|
+
beforeClose: /*#__PURE__*/ $a6cQm$emotion.css({
|
|
213
194
|
name: "q7lffx",
|
|
214
195
|
styles: "opacity:0;"
|
|
215
196
|
})
|
|
216
|
-
}
|
|
197
|
+
},
|
|
198
|
+
modal: modal
|
|
217
199
|
};
|
|
218
200
|
}
|
|
219
201
|
|
|
@@ -235,8 +217,8 @@ function $854b6d713fe70fc9$var$focusFirstWithinNode(node) {
|
|
|
235
217
|
}
|
|
236
218
|
}
|
|
237
219
|
}
|
|
238
|
-
|
|
239
|
-
const contentRef = $
|
|
220
|
+
const $854b6d713fe70fc9$export$2b77a92f1a5ad772 = ({ allowHeightOverflow: allowHeightOverflow = false , position: position = 'center' , shouldCloseOnEscapePress: shouldCloseOnEscapePress = true , shouldCloseOnOverlayClick: shouldCloseOnOverlayClick = true , size: size = 'medium' , testId: testId = 'cf-ui-modal' , topOffset: topOffset = '50px' , aria: aria , ...otherProps })=>{
|
|
221
|
+
const contentRef = $a6cQm$react.useRef(null);
|
|
240
222
|
const props = {
|
|
241
223
|
...otherProps,
|
|
242
224
|
allowHeightOverflow: allowHeightOverflow,
|
|
@@ -253,7 +235,7 @@ function $854b6d713fe70fc9$export$2b77a92f1a5ad772({ allowHeightOverflow: allowH
|
|
|
253
235
|
allowHeightOverflow: allowHeightOverflow,
|
|
254
236
|
className: otherProps.className
|
|
255
237
|
});
|
|
256
|
-
$
|
|
238
|
+
$a6cQm$react.useEffect(()=>{
|
|
257
239
|
if (props.isShown) setTimeout(()=>{
|
|
258
240
|
if (props.initialFocusRef && props.initialFocusRef.current) {
|
|
259
241
|
if (props.initialFocusRef.current.focus) props.initialFocusRef.current.focus();
|
|
@@ -264,13 +246,13 @@ function $854b6d713fe70fc9$export$2b77a92f1a5ad772({ allowHeightOverflow: allowH
|
|
|
264
246
|
props.initialFocusRef
|
|
265
247
|
]);
|
|
266
248
|
const renderDefault = ()=>{
|
|
267
|
-
return(/*#__PURE__*/ $
|
|
249
|
+
return(/*#__PURE__*/ $a6cQm$react.createElement($a6cQm$react.Fragment, null, otherProps.title && /*#__PURE__*/ $a6cQm$react.createElement($2679bd8c144d3995$export$f50a68e3694789ee, {
|
|
268
250
|
title: otherProps.title,
|
|
269
251
|
onClose: props.onClose,
|
|
270
252
|
...otherProps.modalHeaderProps
|
|
271
|
-
}), /*#__PURE__*/ $
|
|
253
|
+
}), /*#__PURE__*/ $a6cQm$react.createElement($66391c55bbcf9065$export$6da19a24bf249f17, otherProps.modalContentProps, otherProps.children)));
|
|
272
254
|
};
|
|
273
|
-
return(/*#__PURE__*/ $
|
|
255
|
+
return(/*#__PURE__*/ $a6cQm$react.createElement(($parcel$interopDefault($a6cQm$reactmodal)), {
|
|
274
256
|
ariaHideApp: false,
|
|
275
257
|
aria: aria,
|
|
276
258
|
onRequestClose: props.onClose,
|
|
@@ -300,7 +282,7 @@ function $854b6d713fe70fc9$export$2b77a92f1a5ad772({ allowHeightOverflow: allowH
|
|
|
300
282
|
contentRef: (ref)=>{
|
|
301
283
|
contentRef.current = ref;
|
|
302
284
|
}
|
|
303
|
-
}, /*#__PURE__*/ $
|
|
285
|
+
}, /*#__PURE__*/ $a6cQm$react.createElement($a6cQm$contentfulf36core.Box, {
|
|
304
286
|
testId: testId,
|
|
305
287
|
style: {
|
|
306
288
|
width: $854b6d713fe70fc9$var$ModalSizesMapper[size] || size
|
|
@@ -308,7 +290,7 @@ function $854b6d713fe70fc9$export$2b77a92f1a5ad772({ allowHeightOverflow: allowH
|
|
|
308
290
|
className: styles.modal,
|
|
309
291
|
"data-modal-root": true
|
|
310
292
|
}, typeof otherProps.children === 'function' ? otherProps.children(props) : renderDefault())));
|
|
311
|
-
}
|
|
293
|
+
};
|
|
312
294
|
$854b6d713fe70fc9$export$2b77a92f1a5ad772.displayName = 'Modal';
|
|
313
295
|
|
|
314
296
|
|
|
@@ -318,7 +300,7 @@ $854b6d713fe70fc9$export$2b77a92f1a5ad772.displayName = 'Modal';
|
|
|
318
300
|
|
|
319
301
|
|
|
320
302
|
function $8b06e393320a8e77$export$c63fb08199be8e0e({ testId: testId = 'cf-ui-modal-controls' , className: className , children: children , ...otherProps }) {
|
|
321
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
303
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36core.Flex, {
|
|
322
304
|
...otherProps,
|
|
323
305
|
className: className,
|
|
324
306
|
testId: testId,
|
|
@@ -326,7 +308,7 @@ function $8b06e393320a8e77$export$c63fb08199be8e0e({ testId: testId = 'cf-ui-mod
|
|
|
326
308
|
justifyContent: "flex-end",
|
|
327
309
|
margin: "spacingL",
|
|
328
310
|
marginTop: "none"
|
|
329
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
311
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36button.ButtonGroup, {
|
|
330
312
|
variant: "spaced",
|
|
331
313
|
spacing: "spacingS"
|
|
332
314
|
}, children)));
|
|
@@ -344,8 +326,8 @@ $2132db66f9439432$export$2b77a92f1a5ad772.Controls = $8b06e393320a8e77$export$c6
|
|
|
344
326
|
|
|
345
327
|
|
|
346
328
|
function $657ddd6e4548962f$export$427af6990c8ff682({ allowHeightOverflow: allowHeightOverflow = false , cancelLabel: cancelLabel = 'Cancel' , cancelTestId: cancelTestId = 'cf-ui-modal-confirm-cancel-button' , children: children , confirmLabel: confirmLabel = 'Confirm' , confirmTestId: confirmTestId = 'cf-ui-modal-confirm-confirm-button' , intent: intent = 'positive' , isConfirmDisabled: isConfirmDisabled = false , isConfirmLoading: isConfirmLoading = false , isShown: isShown , modalContentProps: modalContentProps , modalControlsProps: modalControlsProps , modalHeaderProps: modalHeaderProps , onCancel: onCancel , onConfirm: onConfirm , shouldCloseOnEscapePress: shouldCloseOnEscapePress = true , shouldCloseOnOverlayClick: shouldCloseOnOverlayClick = true , size: size = 'medium' , testId: testId = 'cf-ui-modal-confirm' , title: title = 'Are you sure?' , initialFocusRef: initialFocusRef }) {
|
|
347
|
-
const cancelRef = ($parcel$interopDefault($
|
|
348
|
-
const confirmButton = confirmLabel ? /*#__PURE__*/ ($parcel$interopDefault($
|
|
329
|
+
const cancelRef = ($parcel$interopDefault($a6cQm$react)).useRef(null);
|
|
330
|
+
const confirmButton = confirmLabel ? /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36button.Button, {
|
|
349
331
|
testId: confirmTestId,
|
|
350
332
|
isDisabled: isConfirmDisabled,
|
|
351
333
|
isLoading: isConfirmLoading,
|
|
@@ -353,14 +335,14 @@ function $657ddd6e4548962f$export$427af6990c8ff682({ allowHeightOverflow: allowH
|
|
|
353
335
|
size: "small",
|
|
354
336
|
onClick: ()=>onConfirm()
|
|
355
337
|
}, confirmLabel) : null;
|
|
356
|
-
const cancelButton = cancelLabel ? /*#__PURE__*/ ($parcel$interopDefault($
|
|
338
|
+
const cancelButton = cancelLabel ? /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($a6cQm$contentfulf36button.Button, {
|
|
357
339
|
testId: cancelTestId,
|
|
358
340
|
variant: "secondary",
|
|
359
341
|
onClick: onCancel,
|
|
360
342
|
size: "small",
|
|
361
343
|
ref: initialFocusRef || cancelRef
|
|
362
344
|
}, cancelLabel) : null;
|
|
363
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
345
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($2132db66f9439432$export$2b77a92f1a5ad772, {
|
|
364
346
|
testId: testId,
|
|
365
347
|
isShown: isShown,
|
|
366
348
|
onClose: onCancel,
|
|
@@ -370,10 +352,10 @@ function $657ddd6e4548962f$export$427af6990c8ff682({ allowHeightOverflow: allowH
|
|
|
370
352
|
allowHeightOverflow: allowHeightOverflow,
|
|
371
353
|
initialFocusRef: cancelRef
|
|
372
354
|
}, ()=>{
|
|
373
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
355
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement(($parcel$interopDefault($a6cQm$react)).Fragment, null, /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($2132db66f9439432$export$2b77a92f1a5ad772.Header, {
|
|
374
356
|
title: title || '',
|
|
375
357
|
...modalHeaderProps
|
|
376
|
-
}), /*#__PURE__*/ ($parcel$interopDefault($
|
|
358
|
+
}), /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($2132db66f9439432$export$2b77a92f1a5ad772.Content, modalContentProps, children), /*#__PURE__*/ ($parcel$interopDefault($a6cQm$react)).createElement($2132db66f9439432$export$2b77a92f1a5ad772.Controls, modalControlsProps, cancelButton, confirmButton)));
|
|
377
359
|
}));
|
|
378
360
|
}
|
|
379
361
|
$657ddd6e4548962f$export$427af6990c8ff682.displayName = 'ModalConfirm';
|
|
@@ -403,7 +385,7 @@ function $f6dfceab072669eb$var$closeAll() {
|
|
|
403
385
|
render(config);
|
|
404
386
|
await new Promise((resolveDelay)=>setTimeout(resolveDelay, delay)
|
|
405
387
|
);
|
|
406
|
-
($parcel$interopDefault($
|
|
388
|
+
($parcel$interopDefault($a6cQm$reactdom)).unmountComponentAtNode($f6dfceab072669eb$var$getRoot(rootElId));
|
|
407
389
|
$f6dfceab072669eb$var$openModalsIds.delete(rootElId);
|
|
408
390
|
});
|
|
409
391
|
} // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -421,7 +403,7 @@ function $f6dfceab072669eb$var$open(componentRenderer, options = {
|
|
|
421
403
|
isShown: true
|
|
422
404
|
};
|
|
423
405
|
function render({ onClose: onClose , isShown: isShown }) {
|
|
424
|
-
($parcel$interopDefault($
|
|
406
|
+
($parcel$interopDefault($a6cQm$reactdom)).render(componentRenderer({
|
|
425
407
|
onClose: onClose,
|
|
426
408
|
isShown: isShown
|
|
427
409
|
}), rootDom);
|
|
@@ -434,7 +416,7 @@ function $f6dfceab072669eb$var$open(componentRenderer, options = {
|
|
|
434
416
|
render(currentConfig);
|
|
435
417
|
await new Promise((resolveDelay)=>setTimeout(resolveDelay, options.delay)
|
|
436
418
|
);
|
|
437
|
-
($parcel$interopDefault($
|
|
419
|
+
($parcel$interopDefault($a6cQm$reactdom)).unmountComponentAtNode(rootDom);
|
|
438
420
|
rootDom.remove();
|
|
439
421
|
$f6dfceab072669eb$var$openModalsIds.delete(rootElId);
|
|
440
422
|
resolve(arg);
|
|
@@ -455,7 +437,4 @@ const $f6dfceab072669eb$export$e21b828b42c54a37 = {
|
|
|
455
437
|
|
|
456
438
|
|
|
457
439
|
|
|
458
|
-
$parcel$exportWildcard(module.exports, $4eddba25b642b7ac$exports);
|
|
459
|
-
|
|
460
|
-
|
|
461
440
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/components/modal/index.ts","packages/components/modal/src/index.ts","packages/components/modal/src/CompoundModal.tsx","packages/components/modal/src/Modal.tsx","packages/components/modal/src/ModalHeader/ModalHeader.tsx","packages/components/modal/src/ModalHeader/ModalHeader.styles.ts","packages/components/modal/src/ModalContent/ModalContent.tsx","packages/components/modal/src/ModalContent/ModalContent.styles.ts","packages/components/modal/src/Modal.styles.ts","packages/components/modal/src/ModalControls/ModalControls.tsx","packages/components/modal/src/ModalConfirm/ModalConfirm.tsx","packages/components/modal/src/ModalLauncher/ModalLauncher.tsx"],"sourcesContent":["export * from './src/index';\n","export { Modal } from './CompoundModal';\nexport type { ModalProps } from './Modal';\nexport { ModalConfirm } from './ModalConfirm/ModalConfirm';\nexport type { ModalConfirmProps } from './ModalConfirm/ModalConfirm';\nexport { ModalContent } from './ModalContent/ModalContent';\nexport type { ModalContentProps } from './ModalContent/ModalContent';\nexport { ModalControls } from './ModalControls/ModalControls';\nexport type { ModalControlsProps } from './ModalControls/ModalControls';\nexport { ModalHeader } from './ModalHeader/ModalHeader';\nexport type { ModalHeaderProps } from './ModalHeader/ModalHeader';\nexport { ModalLauncher } from './ModalLauncher/ModalLauncher';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport function Modal({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ModalProps) {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n });\n\n React.useEffect(() => {\n if (props.isShown) {\n setTimeout(() => {\n if (props.initialFocusRef && props.initialFocusRef.current) {\n if (props.initialFocusRef.current.focus) {\n props.initialFocusRef.current.focus();\n }\n } else if (contentRef.current) {\n focusFirstWithinNode(contentRef.current);\n }\n }, 100);\n }\n }, [props.isShown, props.initialFocusRef]);\n\n const renderDefault = () => {\n return (\n <React.Fragment>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </React.Fragment>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={props.onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n}\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { CloseIcon } from '@contentful/f36-icons';\nimport { Flex } from '@contentful/f36-core';\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n onClose?: Function;\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport function ModalHeader({\n onClose,\n title,\n testId = 'cf-ui-modal-header',\n className,\n ...otherProps\n}: ModalHeaderProps): React.ReactElement {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h1\" isTruncated marginBottom=\"none\">\n {title}\n </Subheading>\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <Button\n variant=\"transparent\"\n aria-label=\"Close\"\n startIcon={<CloseIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n size=\"small\"\n />\n </Flex>\n )}\n </Flex>\n );\n}\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray300}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport function ModalContent({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n}\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\nimport type { ModalPositionType, ModalSizeType } from './types';\n\nexport function getModalStyles(props: {\n size: ModalSizeType;\n position: ModalPositionType;\n allowHeightOverflow?: boolean;\n className?: string;\n}) {\n const modal = cx(\n css({\n margin: tokens.spacing2Xl,\n backgroundColor: tokens.colorWhite,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.className,\n );\n\n return {\n modal,\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: 'scale(0.85) !important',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n }),\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n ),\n afterOpen: css({\n opacity: 1,\n }),\n beforeClose: css({\n opacity: 0,\n }),\n },\n };\n}\n","import React from 'react';\n\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Flex } from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport function ModalControls({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement {\n return (\n <Flex\n {...otherProps}\n className={className}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n margin=\"spacingL\"\n marginTop=\"none\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n}\n\nModalControls.displayName = 'ModalControls';\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport { ModalProps } from '../Modal';\nimport type { ModalSizeType } from '../types';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n Size of the modal window\n */\n size?: ModalSizeType;\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport function ModalConfirm({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header title={title || ''} {...modalHeaderProps} />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n}\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\ninterface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nfunction closeAll() {\n openModalsIds.forEach(async ({ render, currentConfig, delay }, rootElId) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId || Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"],"names":["Modal","ModalProps","ModalConfirm","ModalConfirmProps","ModalContent","ModalContentProps","ModalControls","ModalControlsProps","ModalHeader","ModalHeaderProps","ModalLauncher","OriginalModal","CompoundModal","Content","Header","Controls","React","ReactModal","Box","CommonProps","getModalStyles","ModalSizeType","ModalPositionType","ModalSizesMapper","medium","small","large","fullWidth","zen","isShown","onClose","Props","onAfterOpen","aria","shouldCloseOnOverlayClick","shouldCloseOnEscapePress","position","topOffset","title","size","allowHeightOverflow","modalHeaderProps","Partial","modalContentProps","initialFocusRef","RefObject","HTMLElement","children","ReactNode","RenderModal","modalProps","focusFirstWithinNode","node","querySelectorAll","elements","length","firstElement","focus","testId","otherProps","contentRef","useRef","HTMLDivElement","props","styles","className","useEffect","setTimeout","current","renderDefault","portal","content","top","base","root","afterOpen","beforeClose","modalOverlay","ref","width","modal","displayName","CloseIcon","Flex","PropsWithHTMLElement","Button","Subheading","getModalHeaderStyles","ModalHeaderInternalProps","Function","ReactElement","buttonContainer","tokens","padding","spacingM","spacingL","borderRadius","borderRadiusMedium","borderBottom","gray300","spacing2Xl","height","button","spacing2Xs","right","getModalContentStyles","ModalContentInternalProps","color","gray700","fontSize","fontSizeM","fontFamily","fontStackPrimary","lineHeight","lineHeightM","overflowY","overflowX","boxSizing","margin","backgroundColor","colorWhite","boxShadow","boxShadowHeavy","maxHeight","fontBaseDefault","maxWidth","overflow","display","flexDirection","zIndex","zIndexModalContent","textAlign","outline","transform","transition","transitionDurationDefault","transitionEasingDefault","alignItems","flexWrap","bottom","left","zIndexModal","opacity","ButtonGroup","ModalControlsInternalProps","onConfirm","onCancel","confirmLabel","cancelLabel","intent","isConfirmDisabled","isConfirmLoading","modalControlsProps","confirmTestId","cancelTestId","cancelRef","confirmButton","cancelButton","ReactDOM","ModalLauncherComponentRendererProps","result","T","ModalLauncherOpenOptions","modalId","delay","CloseModalData","render","args","currentConfig","getRoot","rootElId","rootDom","document","getElementById","createElement","setAttribute","body","appendChild","openModalsIds","Map","closeAll","forEach","config","Promise","resolveDelay","unmountComponentAtNode","delete","open","componentRenderer","JSX","Element","options","Date","now","resolve","arg","remove","set"],"version":3,"file":"main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/components/modal/src/index.ts","packages/components/modal/src/CompoundModal.tsx","packages/components/modal/src/Modal.tsx","packages/components/modal/src/ModalHeader/ModalHeader.tsx","packages/components/modal/src/ModalHeader/ModalHeader.styles.ts","packages/components/modal/src/ModalContent/ModalContent.tsx","packages/components/modal/src/ModalContent/ModalContent.styles.ts","packages/components/modal/src/Modal.styles.ts","packages/components/modal/src/ModalControls/ModalControls.tsx","packages/components/modal/src/ModalConfirm/ModalConfirm.tsx","packages/components/modal/src/ModalLauncher/ModalLauncher.tsx"],"sourcesContent":["export { Modal } from './CompoundModal';\nexport type { ModalProps } from './Modal';\nexport { ModalConfirm } from './ModalConfirm/ModalConfirm';\nexport type { ModalConfirmProps } from './ModalConfirm/ModalConfirm';\nexport { ModalContent } from './ModalContent/ModalContent';\nexport type { ModalContentProps } from './ModalContent/ModalContent';\nexport { ModalControls } from './ModalControls/ModalControls';\nexport type { ModalControlsProps } from './ModalControls/ModalControls';\nexport { ModalHeader } from './ModalHeader/ModalHeader';\nexport type { ModalHeaderProps } from './ModalHeader/ModalHeader';\nexport { ModalLauncher } from './ModalLauncher/ModalLauncher';\n","import { Modal as OriginalModal } from './Modal';\nimport { ModalContent } from './ModalContent/ModalContent';\nimport { ModalHeader } from './ModalHeader/ModalHeader';\nimport { ModalControls } from './ModalControls/ModalControls';\n\ntype CompoundModal = typeof OriginalModal & {\n Content: typeof ModalContent;\n Header: typeof ModalHeader;\n Controls: typeof ModalControls;\n};\n\nexport const Modal = OriginalModal as CompoundModal;\nModal.Content = ModalContent;\nModal.Header = ModalHeader;\nModal.Controls = ModalControls;\n","import * as React from 'react';\nimport ReactModal from 'react-modal';\n\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\n\nimport { ModalHeader, ModalHeaderProps } from './ModalHeader/ModalHeader';\nimport { ModalContent, ModalContentProps } from './ModalContent/ModalContent';\nimport { getModalStyles } from './Modal.styles';\nimport type { ModalSizeType, ModalPositionType } from './types';\n\nconst ModalSizesMapper: { [key in ModalSizeType]: string } = {\n medium: '520px',\n small: '400px',\n large: '700px',\n fullWidth: '100vw',\n zen: '100vw',\n};\n\nexport interface ModalProps extends CommonProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n\n /**\n * Function that will be run when the modal is requested to be closed, prior to actually closing.\n */\n onClose: ReactModal.Props['onRequestClose'];\n\n /**\n * Function that will be run after the modal has opened.\n */\n onAfterOpen?: ReactModal.Props['onAfterOpen'];\n\n /**\n * Additional aria attributes\n */\n aria?: ReactModal.Props['aria'];\n\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n * @default true\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n * @default true\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n * @default center\n */\n position?: ModalPositionType;\n /**\n * Top offset if position is 'top'\n * @default 50px\n */\n topOffset?: number | string;\n /**\n * Modal title that is used in header\n */\n title?: string;\n /**\n * Size of the modal window\n * @default medium\n */\n size?: ModalSizeType | string | number;\n /**\n * Are modals higher than viewport allowed\n * @default false\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n children: React.ReactNode | RenderModal;\n}\n\ntype RenderModal = (modalProps: ModalProps) => React.ReactNode;\n\nfunction focusFirstWithinNode(node: HTMLElement) {\n if (node && node.querySelectorAll) {\n const elements = node.querySelectorAll('input, button');\n if (elements.length > 0) {\n const firstElement = elements[0];\n // @ts-expect-error focus might be missing\n if (typeof firstElement.focus === 'function') {\n // @ts-expect-error focus might be missing\n firstElement.focus();\n }\n }\n }\n}\n\nexport const Modal = ({\n allowHeightOverflow = false,\n position = 'center',\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal',\n topOffset = '50px',\n aria,\n ...otherProps\n}: ExpandProps<ModalProps>) => {\n const contentRef = React.useRef<HTMLDivElement>(null);\n\n const props = {\n ...otherProps,\n allowHeightOverflow,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\n };\n\n const styles = getModalStyles({\n position,\n size,\n allowHeightOverflow,\n className: otherProps.className,\n });\n\n React.useEffect(() => {\n if (props.isShown) {\n setTimeout(() => {\n if (props.initialFocusRef && props.initialFocusRef.current) {\n if (props.initialFocusRef.current.focus) {\n props.initialFocusRef.current.focus();\n }\n } else if (contentRef.current) {\n focusFirstWithinNode(contentRef.current);\n }\n }, 100);\n }\n }, [props.isShown, props.initialFocusRef]);\n\n const renderDefault = () => {\n return (\n <>\n {otherProps.title && (\n <ModalHeader\n title={otherProps.title}\n onClose={props.onClose}\n {...otherProps.modalHeaderProps}\n />\n )}\n <ModalContent {...otherProps.modalContentProps}>\n {otherProps.children}\n </ModalContent>\n </>\n );\n };\n\n return (\n <ReactModal\n ariaHideApp={false}\n aria={aria}\n onRequestClose={props.onClose}\n isOpen={otherProps.isShown}\n onAfterOpen={props.onAfterOpen}\n shouldCloseOnEsc={shouldCloseOnEscapePress}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldFocusAfterRender\n shouldReturnFocusAfterClose\n portalClassName={styles.portal}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n }}\n className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={200}\n contentRef={(ref) => {\n contentRef.current = ref;\n }}\n >\n <Box\n testId={testId}\n style={{\n width: ModalSizesMapper[size] || size,\n }}\n className={styles.modal}\n data-modal-root\n >\n {typeof otherProps.children === 'function'\n ? otherProps.children(props)\n : renderDefault()}\n </Box>\n </ReactModal>\n );\n};\n\nModal.displayName = 'Modal';\n","import React from 'react';\nimport { cx } from 'emotion';\nimport { CloseIcon } from '@contentful/f36-icons';\nimport { Flex } from '@contentful/f36-core';\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Button } from '@contentful/f36-button';\nimport { Subheading } from '@contentful/f36-typography';\n\nimport { getModalHeaderStyles } from './ModalHeader.styles';\n\ninterface ModalHeaderInternalProps extends CommonProps {\n title: string;\n onClose?: Function;\n}\n\nexport type ModalHeaderProps = PropsWithHTMLElement<\n ModalHeaderInternalProps,\n 'div'\n>;\n\nexport function ModalHeader({\n onClose,\n title,\n testId = 'cf-ui-modal-header',\n className,\n ...otherProps\n}: ModalHeaderProps): React.ReactElement {\n const styles = getModalHeaderStyles();\n\n return (\n <Flex\n {...otherProps}\n className={cx(styles.root, className)}\n testId={testId}\n alignItems=\"center\"\n justifyContent=\"space-between\"\n >\n <Subheading as=\"h1\" isTruncated marginBottom=\"none\">\n {title}\n </Subheading>\n {onClose && (\n <Flex alignItems=\"center\" className={styles.buttonContainer}>\n <Button\n variant=\"transparent\"\n aria-label=\"Close\"\n startIcon={<CloseIcon size=\"small\" />}\n onClick={() => {\n onClose();\n }}\n size=\"small\"\n />\n </Flex>\n )}\n </Flex>\n );\n}\n\nModalHeader.displayName = 'ModalHeader';\n","import tokens from '@contentful/f36-tokens';\nimport { css } from 'emotion';\n\nexport function getModalHeaderStyles() {\n return {\n root: css({\n position: 'relative',\n padding: `${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingM} ${tokens.spacingL}`,\n borderRadius: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,\n borderBottom: `1px solid ${tokens.gray300}`,\n }),\n buttonContainer: css({\n position: 'relative',\n width: tokens.spacing2Xl,\n height: tokens.spacingL,\n button: {\n position: 'absolute',\n top: `calc(-1 * ${tokens.spacing2Xs})`,\n right: 0,\n },\n }),\n };\n}\n","import React from 'react';\nimport { cx } from 'emotion';\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Box } from '@contentful/f36-core';\nimport { getModalContentStyles } from './ModalContent.styles';\n\ninterface ModalContentInternalProps extends CommonProps {\n children: React.ReactNode;\n}\n\nexport type ModalContentProps = PropsWithHTMLElement<\n ModalContentInternalProps,\n 'div'\n>;\n\nexport function ModalContent({\n testId = 'cf-ui-modal-content',\n className,\n children,\n ...otherProps\n}: ModalContentProps) {\n const styles = getModalContentStyles();\n return (\n <Box\n {...otherProps}\n as=\"div\"\n className={cx(styles.root, className)}\n testId={testId}\n >\n {children}\n </Box>\n );\n}\n\nModalContent.displayName = 'ModalContent';\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport function getModalContentStyles() {\n return {\n root: css({\n padding: `${tokens.spacingM} ${tokens.spacingL}`,\n color: tokens.gray700,\n fontSize: tokens.fontSizeM,\n fontFamily: tokens.fontStackPrimary,\n lineHeight: tokens.lineHeightM,\n overflowY: 'auto',\n overflowX: 'auto',\n boxSizing: 'border-box',\n }),\n };\n}\n","import tokens from '@contentful/f36-tokens';\nimport { css, cx } from 'emotion';\n\nimport type { ModalProps } from './Modal';\n\nexport function getModalStyles(props: {\n size: ModalProps['size'];\n position: ModalProps['position'];\n allowHeightOverflow?: boolean;\n className?: string;\n}) {\n const modal = cx(\n css({\n margin: tokens.spacing2Xl,\n backgroundColor: tokens.colorWhite,\n borderRadius: props.size === 'zen' ? 0 : tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowHeavy,\n maxHeight: `calc(100vh - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n maxWidth: `calc(100vw - 1rem * (100 / ${tokens.fontBaseDefault}))`,\n overflow: 'hidden',\n display: 'flex',\n flexDirection: 'column',\n }),\n props.allowHeightOverflow\n ? css({\n overflow: 'auto',\n maxHeight: 'none',\n })\n : null,\n props.size === 'zen'\n ? css({\n maxWidth: 'none',\n maxHeight: 'none',\n margin: 0,\n height: '100%',\n width: '100%',\n })\n : null,\n props.className,\n );\n\n return {\n portal: css({\n display: 'block',\n }),\n base: {\n root: cx(\n css({\n zIndex: tokens.zIndexModalContent,\n position: 'relative',\n padding: 0,\n display: 'inline-block',\n margin: '0 auto',\n textAlign: 'left',\n outline: 'none',\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n transition: `transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n transform: 'scale(1) !important',\n }),\n beforeClose: css({\n transform: props.size === 'zen' ? 'scale(1)' : 'scale(0.85)',\n }),\n },\n modalOverlay: {\n root: cx(\n css({\n display: 'flex',\n alignItems: 'baseline',\n flexWrap: 'wrap',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n zIndex: tokens.zIndexModal,\n opacity: 0,\n transition: `opacity ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n position: 'fixed',\n overflowY: 'auto',\n backgroundColor: 'rgba(12, 20, 28, 0.74902)',\n textAlign: 'center',\n }),\n props.position === 'center'\n ? css({\n alignItems: 'center',\n justifyContent: 'center',\n })\n : null,\n ),\n afterOpen: css({\n opacity: 1,\n }),\n beforeClose: css({\n opacity: 0,\n }),\n },\n modal,\n };\n}\n","import React from 'react';\n\nimport type { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';\nimport { Flex } from '@contentful/f36-core';\nimport { ButtonGroup } from '@contentful/f36-button';\n\ninterface ModalControlsInternalProps extends CommonProps {\n children: React.ReactElement[] | React.ReactElement;\n}\n\nexport type ModalControlsProps = PropsWithHTMLElement<\n ModalControlsInternalProps,\n 'div'\n>;\n\nexport function ModalControls({\n testId = 'cf-ui-modal-controls',\n className,\n children,\n ...otherProps\n}: ModalControlsProps): React.ReactElement {\n return (\n <Flex\n {...otherProps}\n className={className}\n testId={testId}\n flexDirection=\"row\"\n justifyContent=\"flex-end\"\n margin=\"spacingL\"\n marginTop=\"none\"\n >\n <ButtonGroup variant=\"spaced\" spacing=\"spacingS\">\n {children}\n </ButtonGroup>\n </Flex>\n );\n}\n\nModalControls.displayName = 'ModalControls';\n","import React from 'react';\n\nimport { Modal } from '../CompoundModal';\nimport type { ModalProps } from '../Modal';\nimport type { ModalHeaderProps } from '../ModalHeader/ModalHeader';\nimport type { ModalContentProps } from '../ModalContent/ModalContent';\nimport type { ModalControlsProps } from '../ModalControls/ModalControls';\nimport { Button } from '@contentful/f36-button';\n\nexport interface ModalConfirmProps {\n /**\n * When true, the dialog is shown.\n */\n isShown: boolean;\n /**\n * Function that will be called when the confirm button is clicked. This does not close the ModalConfirm.\n */\n onConfirm(): void;\n /**\n * Function that will be called when the cancel button is clicked. This does not close the ModalConfirm.\n */\n onCancel: ModalProps['onClose'];\n /**\n Modal title that is used in header\n */\n title?: string;\n /**\n * Label of the confirm button\n */\n confirmLabel?: string | false;\n /**\n * Label of the cancel button\n */\n cancelLabel?: string | false;\n /**\n * The intent of the ModalConfirm. Used for the Button.\n */\n intent?: 'primary' | 'positive' | 'negative';\n /**\n * Size of the modal window\n */\n size?: ModalProps['size'];\n /**\n * Boolean indicating if clicking the overlay should close the overlay.\n */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * When true, the confirm button is set to disabled.\n */\n isConfirmDisabled?: boolean;\n /**\n * When true, the confirm button is set to loading.\n */\n isConfirmLoading?: boolean;\n /**\n * Are modals higher than viewport allowed\n */\n allowHeightOverflow?: boolean;\n\n /**\n * Optional props to override ModalHeader behaviour\n */\n modalHeaderProps?: Partial<ModalHeaderProps>;\n\n /**\n * Optional props to override ModalContent behaviour\n */\n modalContentProps?: Partial<ModalContentProps>;\n\n /**\n * Optional props to override ModalControl behaviour\n */\n modalControlsProps?: Partial<ModalControlsProps>;\n\n /**\n * Optional property to set initial focus\n */\n initialFocusRef?: React.RefObject<HTMLElement>;\n\n testId?: string;\n confirmTestId?: string;\n cancelTestId?: string;\n children: React.ReactNode;\n}\n\nexport function ModalConfirm({\n allowHeightOverflow = false,\n cancelLabel = 'Cancel',\n cancelTestId = 'cf-ui-modal-confirm-cancel-button',\n children,\n confirmLabel = 'Confirm',\n confirmTestId = 'cf-ui-modal-confirm-confirm-button',\n intent = 'positive',\n isConfirmDisabled = false,\n isConfirmLoading = false,\n isShown,\n modalContentProps,\n modalControlsProps,\n modalHeaderProps,\n onCancel,\n onConfirm,\n shouldCloseOnEscapePress = true,\n shouldCloseOnOverlayClick = true,\n size = 'medium',\n testId = 'cf-ui-modal-confirm',\n title = 'Are you sure?',\n initialFocusRef,\n}: ModalConfirmProps) {\n const cancelRef = React.useRef(null);\n\n const confirmButton = confirmLabel ? (\n <Button\n testId={confirmTestId}\n isDisabled={isConfirmDisabled}\n isLoading={isConfirmLoading}\n variant={intent}\n size=\"small\"\n onClick={() => onConfirm()}\n >\n {confirmLabel}\n </Button>\n ) : null;\n\n const cancelButton = cancelLabel ? (\n <Button\n testId={cancelTestId}\n variant=\"secondary\"\n onClick={onCancel}\n size=\"small\"\n ref={initialFocusRef || cancelRef}\n >\n {cancelLabel}\n </Button>\n ) : null;\n\n return (\n <Modal\n testId={testId}\n isShown={isShown}\n onClose={onCancel}\n size={size}\n shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}\n shouldCloseOnEscapePress={shouldCloseOnEscapePress}\n allowHeightOverflow={allowHeightOverflow}\n initialFocusRef={cancelRef}\n >\n {() => {\n return (\n <React.Fragment>\n <Modal.Header title={title || ''} {...modalHeaderProps} />\n <Modal.Content {...modalContentProps}>{children}</Modal.Content>\n <Modal.Controls {...modalControlsProps}>\n {cancelButton}\n {confirmButton}\n </Modal.Controls>\n </React.Fragment>\n );\n }}\n </Modal>\n );\n}\n\nModalConfirm.displayName = 'ModalConfirm';\n","/* global Promise */\nimport ReactDOM from 'react-dom';\n\n// @todo: change any to unknown\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ninterface ModalLauncherComponentRendererProps<T = any> {\n isShown: boolean;\n onClose: (result?: T) => void;\n}\n\ninterface ModalLauncherOpenOptions {\n /**\n * Unique id to be used as identifier for the modal contianer\n */\n modalId?: string;\n /**\n * ms before removing the component from the tree\n * @default 300\n */\n delay?: number;\n}\n\ninterface CloseModalData {\n delay: number;\n render: (args: ModalLauncherComponentRendererProps<any>) => void;\n currentConfig: ModalLauncherComponentRendererProps<any>;\n}\n\nconst getRoot = (rootElId: string): HTMLElement => {\n // Reuse the container if we find it\n let rootDom = document.getElementById(rootElId);\n if (rootDom !== null) {\n return rootDom;\n }\n\n // Otherwise create it\n rootDom = document.createElement('div');\n rootDom.setAttribute('id', rootElId);\n document.body.appendChild(rootDom);\n return rootDom;\n};\n\nconst openModalsIds: Map<string, CloseModalData> = new Map();\nfunction closeAll() {\n openModalsIds.forEach(async ({ render, currentConfig, delay }, rootElId) => {\n const config = { ...currentConfig, isShown: false };\n render(config);\n await new Promise((resolveDelay) => setTimeout(resolveDelay, delay));\n ReactDOM.unmountComponentAtNode(getRoot(rootElId));\n openModalsIds.delete(rootElId);\n });\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction open<T = any>(\n componentRenderer: (\n props: ModalLauncherComponentRendererProps<T>,\n ) => JSX.Element,\n options: ModalLauncherOpenOptions = {},\n): Promise<T> {\n options = { delay: 300, ...options };\n\n // Allow components to specify if they wish to reuse the modal container\n const rootElId = `modals-root${options.modalId || Date.now()}`;\n const rootDom = getRoot(rootElId);\n\n return new Promise((resolve) => {\n let currentConfig = { onClose, isShown: true };\n\n function render({\n onClose,\n isShown,\n }: ModalLauncherComponentRendererProps<T>) {\n ReactDOM.render(componentRenderer({ onClose, isShown }), rootDom);\n }\n\n async function onClose(arg?: T) {\n currentConfig = {\n ...currentConfig,\n isShown: false,\n };\n render(currentConfig);\n await new Promise((resolveDelay) =>\n setTimeout(resolveDelay, options.delay),\n );\n ReactDOM.unmountComponentAtNode(rootDom);\n rootDom.remove();\n openModalsIds.delete(rootElId);\n resolve(arg);\n }\n\n render(currentConfig);\n openModalsIds.set(rootElId, {\n render,\n currentConfig,\n delay: options.delay,\n });\n });\n}\n\nexport const ModalLauncher = {\n open,\n closeAll,\n};\n"],"names":["Modal","ModalProps","ModalConfirm","ModalConfirmProps","ModalContent","ModalContentProps","ModalControls","ModalControlsProps","ModalHeader","ModalHeaderProps","ModalLauncher","OriginalModal","CompoundModal","Content","Header","Controls","React","ReactModal","Box","CommonProps","ExpandProps","getModalStyles","ModalSizeType","ModalPositionType","ModalSizesMapper","medium","small","large","fullWidth","zen","isShown","onClose","Props","onAfterOpen","aria","shouldCloseOnOverlayClick","shouldCloseOnEscapePress","position","topOffset","title","size","allowHeightOverflow","modalHeaderProps","Partial","modalContentProps","initialFocusRef","RefObject","HTMLElement","children","ReactNode","RenderModal","modalProps","focusFirstWithinNode","node","querySelectorAll","elements","length","firstElement","focus","testId","otherProps","contentRef","useRef","HTMLDivElement","props","styles","className","useEffect","setTimeout","current","renderDefault","portal","content","top","base","root","afterOpen","beforeClose","modalOverlay","ref","width","modal","displayName","CloseIcon","Flex","PropsWithHTMLElement","Button","Subheading","getModalHeaderStyles","ModalHeaderInternalProps","Function","ReactElement","buttonContainer","tokens","padding","spacingM","spacingL","borderRadius","borderRadiusMedium","borderBottom","gray300","spacing2Xl","height","button","spacing2Xs","right","getModalContentStyles","ModalContentInternalProps","color","gray700","fontSize","fontSizeM","fontFamily","fontStackPrimary","lineHeight","lineHeightM","overflowY","overflowX","boxSizing","margin","backgroundColor","colorWhite","boxShadow","boxShadowHeavy","maxHeight","fontBaseDefault","maxWidth","overflow","display","flexDirection","zIndex","zIndexModalContent","textAlign","outline","transform","transition","transitionDurationDefault","transitionEasingDefault","alignItems","flexWrap","bottom","left","zIndexModal","opacity","ButtonGroup","ModalControlsInternalProps","onConfirm","onCancel","confirmLabel","cancelLabel","intent","isConfirmDisabled","isConfirmLoading","modalControlsProps","confirmTestId","cancelTestId","cancelRef","confirmButton","cancelButton","ReactDOM","ModalLauncherComponentRendererProps","result","T","ModalLauncherOpenOptions","modalId","delay","CloseModalData","render","args","currentConfig","getRoot","rootElId","rootDom","document","getElementById","createElement","setAttribute","body","appendChild","openModalsIds","Map","closeAll","forEach","config","Promise","resolveDelay","unmountComponentAtNode","delete","open","componentRenderer","JSX","Element","options","Date","now","resolve","arg","remove","set"],"version":3,"file":"main.js.map"}
|