@contentful/f36-modal 4.0.0
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/LICENSE.md +7 -0
- package/README.md +6 -0
- package/dist/main.js +467 -0
- package/dist/main.js.map +1 -0
- package/dist/module.js +448 -0
- package/dist/module.js.map +1 -0
- package/dist/types.d.ts +186 -0
- package/dist/types.d.ts.map +1 -0
- package/package.json +41 -0
package/dist/module.js
ADDED
|
@@ -0,0 +1,448 @@
|
|
|
1
|
+
import $8jMle$react, {useRef as $8jMle$useRef, useEffect as $8jMle$useEffect, createElement as $8jMle$createElement, Fragment as $8jMle$Fragment} from "react";
|
|
2
|
+
import $8jMle$reactmodal from "react-modal";
|
|
3
|
+
import {Box as $8jMle$Box, Flex as $8jMle$Flex} from "@contentful/f36-core";
|
|
4
|
+
import {cx as $8jMle$cx, css as $8jMle$css} from "emotion";
|
|
5
|
+
import {CloseIcon as $8jMle$CloseIcon} from "@contentful/f36-icons";
|
|
6
|
+
import {Button as $8jMle$Button, ButtonGroup as $8jMle$ButtonGroup} from "@contentful/f36-button";
|
|
7
|
+
import {Subheading as $8jMle$Subheading} from "@contentful/f36-typography";
|
|
8
|
+
import $8jMle$contentfulf36tokens from "@contentful/f36-tokens";
|
|
9
|
+
import $8jMle$reactdom from "react-dom";
|
|
10
|
+
|
|
11
|
+
function $parcel$export(e, n, v, s) {
|
|
12
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
13
|
+
}
|
|
14
|
+
var $a4925937a214d1d0$exports = {};
|
|
15
|
+
|
|
16
|
+
$parcel$export($a4925937a214d1d0$exports, "Modal", () => $d7b21827f6622ba3$export$2b77a92f1a5ad772);
|
|
17
|
+
$parcel$export($a4925937a214d1d0$exports, "ModalConfirm", () => $78040759975f86df$export$427af6990c8ff682);
|
|
18
|
+
$parcel$export($a4925937a214d1d0$exports, "ModalContent", () => $2e16b6f9c0e7012d$export$6da19a24bf249f17);
|
|
19
|
+
$parcel$export($a4925937a214d1d0$exports, "ModalControls", () => $12733d8c9bae35ea$export$c63fb08199be8e0e);
|
|
20
|
+
$parcel$export($a4925937a214d1d0$exports, "ModalHeader", () => $08ed4541188cb150$export$f50a68e3694789ee);
|
|
21
|
+
$parcel$export($a4925937a214d1d0$exports, "ModalLauncher", () => $1dc787d4cf525536$export$e21b828b42c54a37);
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
function $cdc4e74e8b16090b$export$4bef00d568400c9b() {
|
|
34
|
+
return {
|
|
35
|
+
root: /*#__PURE__*/ $8jMle$css({
|
|
36
|
+
position: 'relative',
|
|
37
|
+
padding: `${$8jMle$contentfulf36tokens.spacingM} ${$8jMle$contentfulf36tokens.spacingM} ${$8jMle$contentfulf36tokens.spacingM} ${$8jMle$contentfulf36tokens.spacingL}`,
|
|
38
|
+
borderRadius: `${$8jMle$contentfulf36tokens.borderRadiusMedium} ${$8jMle$contentfulf36tokens.borderRadiusMedium} 0 0`,
|
|
39
|
+
borderBottom: `1px solid ${$8jMle$contentfulf36tokens.gray300}`
|
|
40
|
+
}),
|
|
41
|
+
buttonContainer: /*#__PURE__*/ $8jMle$css({
|
|
42
|
+
position: 'relative',
|
|
43
|
+
width: $8jMle$contentfulf36tokens.spacing2Xl,
|
|
44
|
+
height: $8jMle$contentfulf36tokens.spacingL,
|
|
45
|
+
button: {
|
|
46
|
+
position: 'absolute',
|
|
47
|
+
top: `calc(-1 * ${$8jMle$contentfulf36tokens.spacing2Xs})`,
|
|
48
|
+
right: 0
|
|
49
|
+
}
|
|
50
|
+
})
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
function $08ed4541188cb150$export$f50a68e3694789ee({ onClose: onClose , title: title , testId: testId = 'cf-ui-modal-header' , className: className , ...otherProps }) {
|
|
56
|
+
const styles = $cdc4e74e8b16090b$export$4bef00d568400c9b();
|
|
57
|
+
return(/*#__PURE__*/ $8jMle$react.createElement($8jMle$Flex, {
|
|
58
|
+
...otherProps,
|
|
59
|
+
className: $8jMle$cx(styles.root, className),
|
|
60
|
+
testId: testId,
|
|
61
|
+
alignItems: "center",
|
|
62
|
+
justifyContent: "space-between"
|
|
63
|
+
}, /*#__PURE__*/ $8jMle$react.createElement($8jMle$Subheading, {
|
|
64
|
+
as: "h1",
|
|
65
|
+
isTruncated: true,
|
|
66
|
+
marginBottom: "none"
|
|
67
|
+
}, title), onClose && /*#__PURE__*/ $8jMle$react.createElement($8jMle$Flex, {
|
|
68
|
+
alignItems: "center",
|
|
69
|
+
className: styles.buttonContainer
|
|
70
|
+
}, /*#__PURE__*/ $8jMle$react.createElement($8jMle$Button, {
|
|
71
|
+
variant: "transparent",
|
|
72
|
+
"aria-label": "Close",
|
|
73
|
+
startIcon: /*#__PURE__*/ $8jMle$react.createElement($8jMle$CloseIcon, {
|
|
74
|
+
size: "small"
|
|
75
|
+
}),
|
|
76
|
+
onClick: ()=>{
|
|
77
|
+
onClose();
|
|
78
|
+
},
|
|
79
|
+
size: "small"
|
|
80
|
+
}))));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
function $d20e7c3da09cc1c0$export$5168abbf3ad664a0() {
|
|
90
|
+
return {
|
|
91
|
+
root: /*#__PURE__*/ $8jMle$css({
|
|
92
|
+
padding: `${$8jMle$contentfulf36tokens.spacingM} ${$8jMle$contentfulf36tokens.spacingL}`,
|
|
93
|
+
color: $8jMle$contentfulf36tokens.gray700,
|
|
94
|
+
fontSize: $8jMle$contentfulf36tokens.fontSizeM,
|
|
95
|
+
fontFamily: $8jMle$contentfulf36tokens.fontStackPrimary,
|
|
96
|
+
lineHeight: $8jMle$contentfulf36tokens.lineHeightM,
|
|
97
|
+
overflowY: 'auto',
|
|
98
|
+
overflowX: 'auto',
|
|
99
|
+
boxSizing: 'border-box'
|
|
100
|
+
})
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
function $2e16b6f9c0e7012d$export$6da19a24bf249f17({ testId: testId = 'cf-ui-modal-content' , className: className , children: children , ...otherProps }) {
|
|
106
|
+
const styles = $d20e7c3da09cc1c0$export$5168abbf3ad664a0();
|
|
107
|
+
return(/*#__PURE__*/ $8jMle$react.createElement($8jMle$Box, {
|
|
108
|
+
...otherProps,
|
|
109
|
+
as: "div",
|
|
110
|
+
className: $8jMle$cx(styles.root, className),
|
|
111
|
+
testId: testId
|
|
112
|
+
}, children));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
function $f482f3cd8cb551fb$export$9af97f4b0b4c597a(props) {
|
|
120
|
+
const modal = $8jMle$cx(/*#__PURE__*/ $8jMle$css({
|
|
121
|
+
transition: `opacity ${$8jMle$contentfulf36tokens.transitionDurationLong} ${$8jMle$contentfulf36tokens.transitionEasingDefault}, transform ${$8jMle$contentfulf36tokens.transitionDurationDefault} ${$8jMle$contentfulf36tokens.transitionEasingCubicBezier}`,
|
|
122
|
+
opacity: '0.5',
|
|
123
|
+
margin: $8jMle$contentfulf36tokens.spacing2Xl,
|
|
124
|
+
transform: 'scale(0.85)',
|
|
125
|
+
backgroundColor: $8jMle$contentfulf36tokens.colorWhite,
|
|
126
|
+
borderRadius: $8jMle$contentfulf36tokens.borderRadiusMedium,
|
|
127
|
+
boxShadow: $8jMle$contentfulf36tokens.boxShadowHeavy,
|
|
128
|
+
maxHeight: `calc(100vh - 1rem * (100 / ${$8jMle$contentfulf36tokens.fontBaseDefault}))`,
|
|
129
|
+
maxWidth: `calc(100vw - 1rem * (100 / ${$8jMle$contentfulf36tokens.fontBaseDefault}))`,
|
|
130
|
+
overflow: 'hidden',
|
|
131
|
+
display: 'flex',
|
|
132
|
+
flexDirection: 'column'
|
|
133
|
+
}), props.allowHeightOverflow ? /*#__PURE__*/ $8jMle$css({
|
|
134
|
+
name: "1evlo53",
|
|
135
|
+
styles: "overflow:auto;max-height:none;"
|
|
136
|
+
}) : null, props.size === 'zen' ? /*#__PURE__*/ $8jMle$css({
|
|
137
|
+
name: "11c88st",
|
|
138
|
+
styles: "max-width:none;max-height:none;margin:0;height:100%;width:100%;"
|
|
139
|
+
}) : null, props.className);
|
|
140
|
+
return {
|
|
141
|
+
portal: /*#__PURE__*/ $8jMle$css({
|
|
142
|
+
name: "13o7eu2",
|
|
143
|
+
styles: "display:block;"
|
|
144
|
+
}),
|
|
145
|
+
base: {
|
|
146
|
+
root: $8jMle$cx(/*#__PURE__*/ $8jMle$css({
|
|
147
|
+
zIndex: $8jMle$contentfulf36tokens.zIndexModalContent,
|
|
148
|
+
position: 'relative',
|
|
149
|
+
padding: 0,
|
|
150
|
+
display: 'inline-block',
|
|
151
|
+
margin: '0 auto',
|
|
152
|
+
textAlign: 'left',
|
|
153
|
+
outline: 'none'
|
|
154
|
+
}), props.size === 'zen' ? /*#__PURE__*/ $8jMle$css({
|
|
155
|
+
name: "uwwqev",
|
|
156
|
+
styles: "width:100%;height:100%;"
|
|
157
|
+
}) : null),
|
|
158
|
+
afterOpen: /*#__PURE__*/ $8jMle$css({
|
|
159
|
+
name: "rdgc1",
|
|
160
|
+
styles: "[data-modal-root]{transform:scale(1);opacity:1;}"
|
|
161
|
+
}),
|
|
162
|
+
beforeClose: /*#__PURE__*/ $8jMle$css({
|
|
163
|
+
name: "e66ys1",
|
|
164
|
+
styles: "[data-modal-root]{opacity:0.5;transform:scale(0.85);}"
|
|
165
|
+
})
|
|
166
|
+
},
|
|
167
|
+
modalOverlay: {
|
|
168
|
+
root: $8jMle$cx(/*#__PURE__*/ $8jMle$css({
|
|
169
|
+
display: 'flex',
|
|
170
|
+
alignItems: 'baseline',
|
|
171
|
+
flexWrap: 'wrap',
|
|
172
|
+
top: 0,
|
|
173
|
+
right: 0,
|
|
174
|
+
bottom: 0,
|
|
175
|
+
left: 0,
|
|
176
|
+
zIndex: $8jMle$contentfulf36tokens.zIndexModal,
|
|
177
|
+
opacity: 0,
|
|
178
|
+
transition: `opacity ${$8jMle$contentfulf36tokens.transitionDurationDefault} ${$8jMle$contentfulf36tokens.transitionEasingDefault}`,
|
|
179
|
+
position: 'fixed',
|
|
180
|
+
overflowY: 'auto',
|
|
181
|
+
backgroundColor: 'rgba(12, 20, 28, 0.74902)',
|
|
182
|
+
textAlign: 'center'
|
|
183
|
+
}), props.position === 'center' ? /*#__PURE__*/ $8jMle$css({
|
|
184
|
+
name: "1qe4tyl",
|
|
185
|
+
styles: "align-items:center;justify-content:center;"
|
|
186
|
+
}) : null),
|
|
187
|
+
afterOpen: /*#__PURE__*/ $8jMle$css({
|
|
188
|
+
name: "mcmk46",
|
|
189
|
+
styles: "opacity:1 !important;"
|
|
190
|
+
}),
|
|
191
|
+
beforeClose: /*#__PURE__*/ $8jMle$css({
|
|
192
|
+
name: "q7lffx",
|
|
193
|
+
styles: "opacity:0;"
|
|
194
|
+
})
|
|
195
|
+
},
|
|
196
|
+
modal: modal
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
const $bfd2aa2f2cc9e088$var$ModalSizesMapper = {
|
|
202
|
+
medium: '520px',
|
|
203
|
+
small: '400px',
|
|
204
|
+
large: '700px',
|
|
205
|
+
fullWidth: '100vw',
|
|
206
|
+
zen: '100vw'
|
|
207
|
+
};
|
|
208
|
+
function $bfd2aa2f2cc9e088$var$focusFirstWithinNode(node) {
|
|
209
|
+
if (node && node.querySelectorAll) {
|
|
210
|
+
const elements = node.querySelectorAll('input, button');
|
|
211
|
+
if (elements.length > 0) {
|
|
212
|
+
const firstElement = elements[0]; // @ts-expect-error focus might be missing
|
|
213
|
+
if (typeof firstElement.focus === 'function') // @ts-expect-error focus might be missing
|
|
214
|
+
firstElement.focus();
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
function $bfd2aa2f2cc9e088$export$2b77a92f1a5ad772({ allowHeightOverflow: allowHeightOverflow , position: position , shouldCloseOnEscapePress: shouldCloseOnEscapePress , shouldCloseOnOverlayClick: shouldCloseOnOverlayClick , size: size , testId: testId , topOffset: topOffset , aria: aria , ...otherProps }) {
|
|
219
|
+
const contentRef = $8jMle$useRef(null);
|
|
220
|
+
const props = {
|
|
221
|
+
...otherProps,
|
|
222
|
+
allowHeightOverflow: allowHeightOverflow,
|
|
223
|
+
position: position,
|
|
224
|
+
shouldCloseOnEscapePress: shouldCloseOnEscapePress,
|
|
225
|
+
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
226
|
+
size: size,
|
|
227
|
+
testId: testId,
|
|
228
|
+
topOffset: topOffset
|
|
229
|
+
};
|
|
230
|
+
const styles = $f482f3cd8cb551fb$export$9af97f4b0b4c597a({
|
|
231
|
+
position: position,
|
|
232
|
+
size: size,
|
|
233
|
+
allowHeightOverflow: allowHeightOverflow,
|
|
234
|
+
className: otherProps.className
|
|
235
|
+
});
|
|
236
|
+
$8jMle$useEffect(()=>{
|
|
237
|
+
if (props.isShown) setTimeout(()=>{
|
|
238
|
+
if (props.initialFocusRef && props.initialFocusRef.current) {
|
|
239
|
+
if (props.initialFocusRef.current.focus) props.initialFocusRef.current.focus();
|
|
240
|
+
} else if (contentRef.current) $bfd2aa2f2cc9e088$var$focusFirstWithinNode(contentRef.current);
|
|
241
|
+
}, 100);
|
|
242
|
+
}, [
|
|
243
|
+
props.isShown,
|
|
244
|
+
props.initialFocusRef
|
|
245
|
+
]);
|
|
246
|
+
const renderDefault = ()=>{
|
|
247
|
+
return(/*#__PURE__*/ $8jMle$createElement($8jMle$Fragment, null, otherProps.title && /*#__PURE__*/ $8jMle$createElement($08ed4541188cb150$export$f50a68e3694789ee, {
|
|
248
|
+
title: otherProps.title,
|
|
249
|
+
onClose: props.onClose,
|
|
250
|
+
...otherProps.modalHeaderProps
|
|
251
|
+
}), /*#__PURE__*/ $8jMle$createElement($2e16b6f9c0e7012d$export$6da19a24bf249f17, otherProps.modalContentProps, otherProps.children)));
|
|
252
|
+
};
|
|
253
|
+
return(/*#__PURE__*/ $8jMle$createElement($8jMle$reactmodal, {
|
|
254
|
+
ariaHideApp: false,
|
|
255
|
+
aria: aria,
|
|
256
|
+
onRequestClose: props.onClose,
|
|
257
|
+
isOpen: otherProps.isShown,
|
|
258
|
+
onAfterOpen: props.onAfterOpen,
|
|
259
|
+
shouldCloseOnEsc: shouldCloseOnEscapePress,
|
|
260
|
+
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
261
|
+
shouldFocusAfterRender: true,
|
|
262
|
+
shouldReturnFocusAfterClose: true,
|
|
263
|
+
portalClassName: styles.portal,
|
|
264
|
+
className: {
|
|
265
|
+
base: styles.base.root,
|
|
266
|
+
afterOpen: styles.base.afterOpen,
|
|
267
|
+
beforeClose: styles.base.beforeClose
|
|
268
|
+
},
|
|
269
|
+
style: {
|
|
270
|
+
content: {
|
|
271
|
+
top: position === 'center' ? 0 : topOffset
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
overlayClassName: {
|
|
275
|
+
base: styles.modalOverlay.root,
|
|
276
|
+
afterOpen: styles.modalOverlay.afterOpen,
|
|
277
|
+
beforeClose: styles.modalOverlay.beforeClose
|
|
278
|
+
},
|
|
279
|
+
closeTimeoutMS: 300,
|
|
280
|
+
contentRef: (ref)=>{
|
|
281
|
+
contentRef.current = ref;
|
|
282
|
+
}
|
|
283
|
+
}, /*#__PURE__*/ $8jMle$createElement($8jMle$Box, {
|
|
284
|
+
testId: testId,
|
|
285
|
+
style: {
|
|
286
|
+
width: $bfd2aa2f2cc9e088$var$ModalSizesMapper[size] || size
|
|
287
|
+
},
|
|
288
|
+
className: styles.modal,
|
|
289
|
+
"data-modal-root": true
|
|
290
|
+
}, typeof otherProps.children === 'function' ? otherProps.children(props) : renderDefault())));
|
|
291
|
+
} // Use defaultProps instead of default values in the function to allow the
|
|
292
|
+
// Storybook to import and use these values
|
|
293
|
+
$bfd2aa2f2cc9e088$export$2b77a92f1a5ad772.defaultProps = {
|
|
294
|
+
allowHeightOverflow: false,
|
|
295
|
+
position: 'center',
|
|
296
|
+
shouldCloseOnEscapePress: true,
|
|
297
|
+
shouldCloseOnOverlayClick: true,
|
|
298
|
+
size: 'medium',
|
|
299
|
+
testId: 'cf-ui-modal',
|
|
300
|
+
topOffset: '50px'
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
|
|
304
|
+
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
function $12733d8c9bae35ea$export$c63fb08199be8e0e({ testId: testId = 'cf-ui-modal-controls' , className: className , children: children , ...otherProps }) {
|
|
310
|
+
return(/*#__PURE__*/ $8jMle$react.createElement($8jMle$Flex, {
|
|
311
|
+
...otherProps,
|
|
312
|
+
className: className,
|
|
313
|
+
testId: testId,
|
|
314
|
+
flexDirection: "row",
|
|
315
|
+
justifyContent: "flex-end",
|
|
316
|
+
margin: "spacingL",
|
|
317
|
+
marginTop: "none"
|
|
318
|
+
}, /*#__PURE__*/ $8jMle$react.createElement($8jMle$ButtonGroup, {
|
|
319
|
+
variant: "spaced",
|
|
320
|
+
spacing: "spacingS"
|
|
321
|
+
}, children)));
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
|
|
325
|
+
const $d7b21827f6622ba3$export$2b77a92f1a5ad772 = $bfd2aa2f2cc9e088$export$2b77a92f1a5ad772;
|
|
326
|
+
$d7b21827f6622ba3$export$2b77a92f1a5ad772.Content = $2e16b6f9c0e7012d$export$6da19a24bf249f17;
|
|
327
|
+
$d7b21827f6622ba3$export$2b77a92f1a5ad772.Header = $08ed4541188cb150$export$f50a68e3694789ee;
|
|
328
|
+
$d7b21827f6622ba3$export$2b77a92f1a5ad772.Controls = $12733d8c9bae35ea$export$c63fb08199be8e0e;
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
function $78040759975f86df$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 }) {
|
|
335
|
+
const cancelRef = $8jMle$react.useRef(null);
|
|
336
|
+
const confirmButton = confirmLabel ? /*#__PURE__*/ $8jMle$react.createElement($8jMle$Button, {
|
|
337
|
+
testId: confirmTestId,
|
|
338
|
+
isDisabled: isConfirmDisabled,
|
|
339
|
+
isLoading: isConfirmLoading,
|
|
340
|
+
variant: intent,
|
|
341
|
+
size: "small",
|
|
342
|
+
onClick: ()=>onConfirm()
|
|
343
|
+
}, confirmLabel) : null;
|
|
344
|
+
const cancelButton = cancelLabel ? /*#__PURE__*/ $8jMle$react.createElement($8jMle$Button, {
|
|
345
|
+
testId: cancelTestId,
|
|
346
|
+
variant: "secondary",
|
|
347
|
+
onClick: onCancel,
|
|
348
|
+
size: "small",
|
|
349
|
+
ref: initialFocusRef || cancelRef
|
|
350
|
+
}, cancelLabel) : null;
|
|
351
|
+
return(/*#__PURE__*/ $8jMle$react.createElement($d7b21827f6622ba3$export$2b77a92f1a5ad772, {
|
|
352
|
+
testId: testId,
|
|
353
|
+
isShown: isShown,
|
|
354
|
+
onClose: onCancel,
|
|
355
|
+
size: size,
|
|
356
|
+
shouldCloseOnOverlayClick: shouldCloseOnOverlayClick,
|
|
357
|
+
shouldCloseOnEscapePress: shouldCloseOnEscapePress,
|
|
358
|
+
allowHeightOverflow: allowHeightOverflow,
|
|
359
|
+
initialFocusRef: cancelRef
|
|
360
|
+
}, ()=>{
|
|
361
|
+
return(/*#__PURE__*/ $8jMle$react.createElement($8jMle$react.Fragment, null, /*#__PURE__*/ $8jMle$react.createElement($d7b21827f6622ba3$export$2b77a92f1a5ad772.Header, {
|
|
362
|
+
title: title || '',
|
|
363
|
+
...modalHeaderProps
|
|
364
|
+
}), /*#__PURE__*/ $8jMle$react.createElement($d7b21827f6622ba3$export$2b77a92f1a5ad772.Content, modalContentProps, children), /*#__PURE__*/ $8jMle$react.createElement($d7b21827f6622ba3$export$2b77a92f1a5ad772.Controls, modalControlsProps, cancelButton, confirmButton)));
|
|
365
|
+
}));
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
const $1dc787d4cf525536$var$getRoot = (rootElId)=>{
|
|
374
|
+
// Reuse the container if we find it
|
|
375
|
+
let rootDom = document.getElementById(rootElId);
|
|
376
|
+
if (rootDom !== null) return rootDom;
|
|
377
|
+
// Otherwise create it
|
|
378
|
+
rootDom = document.createElement('div');
|
|
379
|
+
rootDom.setAttribute('id', rootElId);
|
|
380
|
+
document.body.appendChild(rootDom);
|
|
381
|
+
return rootDom;
|
|
382
|
+
};
|
|
383
|
+
const $1dc787d4cf525536$var$openModalsIds = new Map();
|
|
384
|
+
function $1dc787d4cf525536$var$closeAll() {
|
|
385
|
+
$1dc787d4cf525536$var$openModalsIds.forEach(async ({ render: render , currentConfig: currentConfig , delay: delay }, rootElId)=>{
|
|
386
|
+
const config = {
|
|
387
|
+
...currentConfig,
|
|
388
|
+
isShown: false
|
|
389
|
+
};
|
|
390
|
+
render(config);
|
|
391
|
+
await new Promise((resolveDelay)=>setTimeout(resolveDelay, delay)
|
|
392
|
+
);
|
|
393
|
+
$8jMle$reactdom.unmountComponentAtNode($1dc787d4cf525536$var$getRoot(rootElId));
|
|
394
|
+
$1dc787d4cf525536$var$openModalsIds.delete(rootElId);
|
|
395
|
+
});
|
|
396
|
+
} // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
397
|
+
function $1dc787d4cf525536$var$open(componentRenderer, options = {
|
|
398
|
+
}) {
|
|
399
|
+
options = {
|
|
400
|
+
delay: 300,
|
|
401
|
+
...options
|
|
402
|
+
}; // Allow components to specify if they wish to reuse the modal container
|
|
403
|
+
const rootElId = `modals-root${options.modalId || Date.now()}`;
|
|
404
|
+
const rootDom = $1dc787d4cf525536$var$getRoot(rootElId);
|
|
405
|
+
return new Promise((resolve)=>{
|
|
406
|
+
let currentConfig = {
|
|
407
|
+
onClose: onClose1,
|
|
408
|
+
isShown: true
|
|
409
|
+
};
|
|
410
|
+
function render({ onClose: onClose , isShown: isShown }) {
|
|
411
|
+
$8jMle$reactdom.render(componentRenderer({
|
|
412
|
+
onClose: onClose,
|
|
413
|
+
isShown: isShown
|
|
414
|
+
}), rootDom);
|
|
415
|
+
}
|
|
416
|
+
async function onClose1(arg) {
|
|
417
|
+
currentConfig = {
|
|
418
|
+
...currentConfig,
|
|
419
|
+
isShown: false
|
|
420
|
+
};
|
|
421
|
+
render(currentConfig);
|
|
422
|
+
await new Promise((resolveDelay)=>setTimeout(resolveDelay, options.delay)
|
|
423
|
+
);
|
|
424
|
+
$8jMle$reactdom.unmountComponentAtNode(rootDom);
|
|
425
|
+
rootDom.remove();
|
|
426
|
+
$1dc787d4cf525536$var$openModalsIds.delete(rootElId);
|
|
427
|
+
resolve(arg);
|
|
428
|
+
}
|
|
429
|
+
render(currentConfig);
|
|
430
|
+
$1dc787d4cf525536$var$openModalsIds.set(rootElId, {
|
|
431
|
+
render: render,
|
|
432
|
+
currentConfig: currentConfig,
|
|
433
|
+
delay: options.delay
|
|
434
|
+
});
|
|
435
|
+
});
|
|
436
|
+
}
|
|
437
|
+
const $1dc787d4cf525536$export$e21b828b42c54a37 = {
|
|
438
|
+
open: $1dc787d4cf525536$var$open,
|
|
439
|
+
closeAll: $1dc787d4cf525536$var$closeAll
|
|
440
|
+
};
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
export {$d7b21827f6622ba3$export$2b77a92f1a5ad772 as Modal, $78040759975f86df$export$427af6990c8ff682 as ModalConfirm, $2e16b6f9c0e7012d$export$6da19a24bf249f17 as ModalContent, $12733d8c9bae35ea$export$c63fb08199be8e0e as ModalControls, $08ed4541188cb150$export$f50a68e3694789ee as ModalHeader, $1dc787d4cf525536$export$e21b828b42c54a37 as ModalLauncher};
|
|
448
|
+
//# sourceMappingURL=module.js.map
|
|
@@ -0,0 +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 */\n shouldCloseOnOverlayClick?: boolean;\n /**\n * Boolean indicating if pressing the esc key should close the overlay.\n */\n shouldCloseOnEscapePress?: boolean;\n /**\n * Indicating if modal is centered or linked to the top\n */\n position?: ModalPositionType;\n /**\n Top offset if position is 'top'\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 */\n size?: ModalSizeType;\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 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,\n position,\n shouldCloseOnEscapePress,\n shouldCloseOnOverlayClick,\n size,\n testId,\n topOffset,\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 className={{\n base: styles.base.root,\n afterOpen: styles.base.afterOpen,\n beforeClose: styles.base.beforeClose,\n }}\n style={{\n content: {\n top: position === 'center' ? 0 : topOffset,\n },\n }}\n overlayClassName={{\n base: styles.modalOverlay.root,\n afterOpen: styles.modalOverlay.afterOpen,\n beforeClose: styles.modalOverlay.beforeClose,\n }}\n closeTimeoutMS={300}\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\n// Use defaultProps instead of default values in the function to allow the\n// Storybook to import and use these values\nModal.defaultProps = {\n allowHeightOverflow: false,\n position: 'center',\n shouldCloseOnEscapePress: true,\n shouldCloseOnOverlayClick: true,\n size: 'medium',\n testId: 'cf-ui-modal',\n topOffset: '50px',\n};\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","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","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 transition: `opacity ${tokens.transitionDurationLong} ${tokens.transitionEasingDefault}, transform ${tokens.transitionDurationDefault} ${tokens.transitionEasingCubicBezier}`,\n opacity: '0.5',\n margin: tokens.spacing2Xl,\n transform: 'scale(0.85)',\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 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 }),\n props.size === 'zen'\n ? css({\n width: '100%',\n height: '100%',\n })\n : null,\n ),\n afterOpen: css({\n '[data-modal-root]': {\n transform: 'scale(1)',\n opacity: '1',\n },\n }),\n beforeClose: css({\n '[data-modal-root]': {\n opacity: '0.5',\n transform: 'scale(0.85)',\n },\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 !important',\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","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","/* 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","base","root","afterOpen","beforeClose","content","top","modalOverlay","ref","width","modal","defaultProps","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","transition","transitionDurationLong","transitionEasingDefault","transitionDurationDefault","transitionEasingCubicBezier","opacity","margin","transform","backgroundColor","colorWhite","boxShadow","boxShadowHeavy","maxHeight","fontBaseDefault","maxWidth","overflow","display","flexDirection","zIndex","zIndexModalContent","textAlign","outline","alignItems","flexWrap","bottom","left","zIndexModal","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":"module.js.map"}
|