react-responsive-modal 6.4.1 → 7.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/dist/index.d.ts CHANGED
@@ -1,140 +1,144 @@
1
- import React from 'react';
2
- export interface ModalProps {
3
- /**
4
- * Control if the modal is open or not.
5
- */
6
- open: boolean;
7
- /**
8
- * Should the dialog be centered.
9
- *
10
- * Default to false.
11
- */
12
- center?: boolean;
13
- /**
14
- * Is the modal closable when user press esc key.
15
- *
16
- * Default to true.
17
- */
18
- closeOnEsc?: boolean;
19
- /**
20
- * Is the modal closable when user click on overlay.
21
- *
22
- * Default to true.
23
- */
24
- closeOnOverlayClick?: boolean;
25
- /**
26
- * Whether to block scrolling when dialog is open.
27
- *
28
- * Default to true.
29
- */
30
- blockScroll?: boolean;
31
- /**
32
- * Show the close icon.
33
- *
34
- * Default to true.
35
- */
36
- showCloseIcon?: boolean;
37
- /**
38
- * id attribute for the close icon button.
39
- */
40
- closeIconId?: string;
41
- /**
42
- * Custom icon to render (svg, img, etc...).
43
- */
44
- closeIcon?: React.ReactNode;
45
- /**
46
- * When the modal is open, trap focus within it.
47
- *
48
- * Default to true.
49
- */
50
- focusTrapped?: boolean;
51
- /**
52
- * Element to focus when focus trap is used.
53
- *
54
- * Default to undefined.
55
- */
56
- initialFocusRef?: React.RefObject<HTMLElement>;
57
- /**
58
- * You can specify a container prop which should be of type `Element`.
59
- * The portal will be rendered inside that element.
60
- * The default behavior will create a div node and render it at the at the end of document.body.
61
- */
62
- container?: Element | null;
63
- /**
64
- * An object containing classNames to style the modal.
65
- */
66
- classNames?: {
67
- root?: string;
68
- overlay?: string;
69
- overlayAnimationIn?: string;
70
- overlayAnimationOut?: string;
71
- modalContainer?: string;
72
- modal?: string;
73
- modalAnimationIn?: string;
74
- modalAnimationOut?: string;
75
- closeButton?: string;
76
- closeIcon?: string;
77
- };
78
- /**
79
- * An object containing the styles objects to style the modal.
80
- */
81
- styles?: {
82
- root?: React.CSSProperties;
83
- overlay?: React.CSSProperties;
84
- modalContainer?: React.CSSProperties;
85
- modal?: React.CSSProperties;
86
- closeButton?: React.CSSProperties;
87
- closeIcon?: React.CSSProperties;
88
- };
89
- /**
90
- * Animation duration in milliseconds.
91
- *
92
- * Default to 300.
93
- */
94
- animationDuration?: number;
95
- /**
96
- * ARIA role for modal
97
- *
98
- * Default to 'dialog'.
99
- */
100
- role?: string;
101
- /**
102
- * ARIA label for modal
103
- */
104
- ariaLabelledby?: string;
105
- /**
106
- * ARIA description for modal
107
- */
108
- ariaDescribedby?: string;
109
- /**
110
- * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock
111
- */
112
- reserveScrollBarGap?: boolean;
113
- /**
114
- * id attribute for modal container
115
- */
116
- containerId?: string;
117
- /**
118
- * id attribute for modal
119
- */
120
- modalId?: string;
121
- /**
122
- * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
123
- */
124
- onClose: () => void;
125
- /**
126
- * Callback fired when the escape key is pressed.
127
- */
128
- onEscKeyDown?: (event: KeyboardEvent) => void;
129
- /**
130
- * Callback fired when the overlay is clicked.
131
- */
132
- onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
133
- /**
134
- * Callback fired when the Modal has exited and the animation is finished.
135
- */
136
- onAnimationEnd?: () => void;
137
- children?: React.ReactNode;
138
- }
139
- export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
140
- export default Modal;
1
+ import React from "react";
2
+
3
+ //#region src/index.d.ts
4
+ interface ModalProps {
5
+ /**
6
+ * Control if the modal is open or not.
7
+ */
8
+ open: boolean;
9
+ /**
10
+ * Should the dialog be centered.
11
+ *
12
+ * Default to false.
13
+ */
14
+ center?: boolean;
15
+ /**
16
+ * Is the modal closable when user press esc key.
17
+ *
18
+ * Default to true.
19
+ */
20
+ closeOnEsc?: boolean;
21
+ /**
22
+ * Is the modal closable when user click on overlay.
23
+ *
24
+ * Default to true.
25
+ */
26
+ closeOnOverlayClick?: boolean;
27
+ /**
28
+ * Whether to block scrolling when dialog is open.
29
+ *
30
+ * Default to true.
31
+ */
32
+ blockScroll?: boolean;
33
+ /**
34
+ * Show the close icon.
35
+ *
36
+ * Default to true.
37
+ */
38
+ showCloseIcon?: boolean;
39
+ /**
40
+ * id attribute for the close icon button.
41
+ */
42
+ closeIconId?: string;
43
+ /**
44
+ * Custom icon to render (svg, img, etc...).
45
+ */
46
+ closeIcon?: React.ReactNode;
47
+ /**
48
+ * When the modal is open, trap focus within it.
49
+ *
50
+ * Default to true.
51
+ */
52
+ focusTrapped?: boolean;
53
+ /**
54
+ * Element to focus when focus trap is used.
55
+ *
56
+ * Default to undefined.
57
+ */
58
+ initialFocusRef?: React.RefObject<HTMLElement | null>;
59
+ /**
60
+ * You can specify a container prop which should be of type `Element`.
61
+ * The portal will be rendered inside that element.
62
+ * The default behavior will create a div node and render it at the at the end of document.body.
63
+ */
64
+ container?: Element | null;
65
+ /**
66
+ * An object containing classNames to style the modal.
67
+ */
68
+ classNames?: {
69
+ root?: string;
70
+ overlay?: string;
71
+ overlayAnimationIn?: string;
72
+ overlayAnimationOut?: string;
73
+ modalContainer?: string;
74
+ modal?: string;
75
+ modalAnimationIn?: string;
76
+ modalAnimationOut?: string;
77
+ closeButton?: string;
78
+ closeIcon?: string;
79
+ };
80
+ /**
81
+ * An object containing the styles objects to style the modal.
82
+ */
83
+ styles?: {
84
+ root?: React.CSSProperties;
85
+ overlay?: React.CSSProperties;
86
+ modalContainer?: React.CSSProperties;
87
+ modal?: React.CSSProperties;
88
+ closeButton?: React.CSSProperties;
89
+ closeIcon?: React.CSSProperties;
90
+ };
91
+ /**
92
+ * Animation duration in milliseconds.
93
+ *
94
+ * Default to 300.
95
+ */
96
+ animationDuration?: number;
97
+ /**
98
+ * ARIA role for modal
99
+ *
100
+ * Default to 'dialog'.
101
+ */
102
+ role?: string;
103
+ /**
104
+ * ARIA label for modal
105
+ */
106
+ ariaLabelledby?: string;
107
+ /**
108
+ * ARIA description for modal
109
+ */
110
+ ariaDescribedby?: string;
111
+ /**
112
+ * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock
113
+ */
114
+ reserveScrollBarGap?: boolean;
115
+ /**
116
+ * id attribute for modal container
117
+ */
118
+ containerId?: string;
119
+ /**
120
+ * id attribute for modal
121
+ */
122
+ modalId?: string;
123
+ /**
124
+ * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
125
+ */
126
+ onClose: () => void;
127
+ /**
128
+ * Callback fired when the escape key is pressed.
129
+ */
130
+ onEscKeyDown?: (event: KeyboardEvent) => void;
131
+ /**
132
+ * Callback fired when the overlay is clicked.
133
+ */
134
+ onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
135
+ /**
136
+ * Callback fired when the Modal has exited and the animation is finished.
137
+ */
138
+ onAnimationEnd?: () => void;
139
+ children?: React.ReactNode;
140
+ }
141
+ declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
142
+ //#endregion
143
+ export { Modal, Modal as default, ModalProps };
144
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.js CHANGED
@@ -1,8 +1,313 @@
1
+ import React, { useEffect, useRef, useState } from "react";
2
+ import { createPortal } from "react-dom";
3
+ import cx from "classnames";
4
+ import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
1
7
 
2
- 'use strict'
8
+ //#region src/CloseIcon.tsx
9
+ const CloseIcon = ({ classes: classes$1, classNames, styles, id, closeIcon, onClick }) => /* @__PURE__ */ jsx("button", {
10
+ id,
11
+ className: cx(classes$1.closeButton, classNames?.closeButton),
12
+ style: styles?.closeButton,
13
+ onClick,
14
+ "data-testid": "close-button",
15
+ children: closeIcon ? closeIcon : /* @__PURE__ */ jsx("svg", {
16
+ className: classNames?.closeIcon,
17
+ style: styles?.closeIcon,
18
+ width: 28,
19
+ height: 28,
20
+ viewBox: "0 0 36 36",
21
+ "data-testid": "close-icon",
22
+ children: /* @__PURE__ */ jsx("path", { d: "M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z" })
23
+ })
24
+ });
25
+ var CloseIcon_default = CloseIcon;
3
26
 
4
- if (process.env.NODE_ENV === 'production') {
5
- module.exports = require('./react-responsive-modal.cjs.production.min.js')
6
- } else {
7
- module.exports = require('./react-responsive-modal.cjs.development.js')
27
+ //#endregion
28
+ //#region src/utils.ts
29
+ const isBrowser = typeof window !== "undefined";
30
+
31
+ //#endregion
32
+ //#region src/lib/focusTrapJs.ts
33
+ const candidateSelectors = [
34
+ "input",
35
+ "select",
36
+ "textarea",
37
+ "a[href]",
38
+ "button",
39
+ "[tabindex]",
40
+ "audio[controls]",
41
+ "video[controls]",
42
+ "[contenteditable]:not([contenteditable=\"false\"])"
43
+ ];
44
+ function isHidden(node) {
45
+ return node.offsetParent === null || getComputedStyle(node).visibility === "hidden";
46
+ }
47
+ function getCheckedRadio(nodes, form) {
48
+ for (var i = 0; i < nodes.length; i++) if (nodes[i].checked && nodes[i].form === form) return nodes[i];
49
+ }
50
+ function isNotRadioOrTabbableRadio(node) {
51
+ if (node.tagName !== "INPUT" || node.type !== "radio" || !node.name) return true;
52
+ var radioScope = node.form || node.ownerDocument;
53
+ var radioSet = radioScope.querySelectorAll("input[type=\"radio\"][name=\"" + node.name + "\"]");
54
+ var checked = getCheckedRadio(radioSet, node.form);
55
+ return checked === node || checked === void 0 && radioSet[0] === node;
56
+ }
57
+ function getAllTabbingElements(parentElem) {
58
+ var currentActiveElement = document.activeElement;
59
+ var tabbableNodes = parentElem.querySelectorAll(candidateSelectors.join(","));
60
+ var onlyTabbable = [];
61
+ for (var i = 0; i < tabbableNodes.length; i++) {
62
+ var node = tabbableNodes[i];
63
+ if (currentActiveElement === node || !node.disabled && getTabindex(node) > -1 && !isHidden(node) && isNotRadioOrTabbableRadio(node)) onlyTabbable.push(node);
64
+ }
65
+ return onlyTabbable;
66
+ }
67
+ function tabTrappingKey(event, parentElem) {
68
+ if (!event || event.key !== "Tab") return;
69
+ if (!parentElem || !parentElem.contains) {
70
+ if (process && true) console.warn("focus-trap-js: parent element is not defined");
71
+ return false;
72
+ }
73
+ if (!parentElem.contains(event.target)) return false;
74
+ var allTabbingElements = getAllTabbingElements(parentElem);
75
+ var firstFocusableElement = allTabbingElements[0];
76
+ var lastFocusableElement = allTabbingElements[allTabbingElements.length - 1];
77
+ if (event.shiftKey && event.target === firstFocusableElement) {
78
+ lastFocusableElement.focus();
79
+ event.preventDefault();
80
+ return true;
81
+ } else if (!event.shiftKey && event.target === lastFocusableElement) {
82
+ firstFocusableElement.focus();
83
+ event.preventDefault();
84
+ return true;
85
+ }
86
+ return false;
87
+ }
88
+ function getTabindex(node) {
89
+ var tabindexAttr = parseInt(node.getAttribute("tabindex"), 10);
90
+ if (!isNaN(tabindexAttr)) return tabindexAttr;
91
+ if (isContentEditable(node)) return 0;
92
+ return node.tabIndex;
93
+ }
94
+ function isContentEditable(node) {
95
+ return node.getAttribute("contentEditable");
8
96
  }
97
+
98
+ //#endregion
99
+ //#region src/FocusTrap.tsx
100
+ const FocusTrap = ({ container, initialFocusRef }) => {
101
+ const refLastFocus = useRef(null);
102
+ /**
103
+ * Handle focus lock on the modal
104
+ */
105
+ useEffect(() => {
106
+ const handleKeyEvent = (event) => {
107
+ if (container?.current) tabTrappingKey(event, container.current);
108
+ };
109
+ if (isBrowser) document.addEventListener("keydown", handleKeyEvent);
110
+ if (isBrowser && container?.current) {
111
+ const savePreviousFocus = () => {
112
+ if (candidateSelectors.findIndex((selector) => document.activeElement?.matches(selector)) !== -1) refLastFocus.current = document.activeElement;
113
+ };
114
+ if (initialFocusRef) {
115
+ savePreviousFocus();
116
+ requestAnimationFrame(() => {
117
+ initialFocusRef.current?.focus();
118
+ });
119
+ } else {
120
+ const allTabbingElements = getAllTabbingElements(container.current);
121
+ if (allTabbingElements[0]) {
122
+ savePreviousFocus();
123
+ allTabbingElements[0].focus();
124
+ }
125
+ }
126
+ }
127
+ return () => {
128
+ if (isBrowser) {
129
+ document.removeEventListener("keydown", handleKeyEvent);
130
+ refLastFocus.current?.focus();
131
+ }
132
+ };
133
+ }, [container, initialFocusRef]);
134
+ return null;
135
+ };
136
+
137
+ //#endregion
138
+ //#region src/modalManager.ts
139
+ let modals = [];
140
+ /**
141
+ * Handle the order of the modals.
142
+ * Inspired by the material-ui implementation.
143
+ */
144
+ const modalManager = {
145
+ add: (newModal) => {
146
+ modals.push(newModal);
147
+ },
148
+ remove: (oldModal) => {
149
+ modals = modals.filter((modal) => modal !== oldModal);
150
+ },
151
+ isTopModal: (modal) => !!modals.length && modals[modals.length - 1] === modal
152
+ };
153
+ function useModalManager(ref, open) {
154
+ useEffect(() => {
155
+ if (open) modalManager.add(ref);
156
+ return () => {
157
+ modalManager.remove(ref);
158
+ };
159
+ }, [open, ref]);
160
+ }
161
+
162
+ //#endregion
163
+ //#region src/useScrollLock.ts
164
+ const useScrollLock = (refModal, open, showPortal, blockScroll, reserveScrollBarGap) => {
165
+ const oldRef = useRef(null);
166
+ useEffect(() => {
167
+ if (open && refModal.current && blockScroll) {
168
+ oldRef.current = refModal.current;
169
+ disableBodyScroll(refModal.current, { reserveScrollBarGap });
170
+ }
171
+ return () => {
172
+ if (oldRef.current) {
173
+ enableBodyScroll(oldRef.current);
174
+ oldRef.current = null;
175
+ }
176
+ };
177
+ }, [
178
+ open,
179
+ showPortal,
180
+ refModal,
181
+ blockScroll,
182
+ reserveScrollBarGap
183
+ ]);
184
+ };
185
+
186
+ //#endregion
187
+ //#region src/index.tsx
188
+ const classes = {
189
+ root: "react-responsive-modal-root",
190
+ overlay: "react-responsive-modal-overlay",
191
+ overlayAnimationIn: "react-responsive-modal-overlay-in",
192
+ overlayAnimationOut: "react-responsive-modal-overlay-out",
193
+ modalContainer: "react-responsive-modal-container",
194
+ modalContainerCenter: "react-responsive-modal-containerCenter",
195
+ modal: "react-responsive-modal-modal",
196
+ modalAnimationIn: "react-responsive-modal-modal-in",
197
+ modalAnimationOut: "react-responsive-modal-modal-out",
198
+ closeButton: "react-responsive-modal-closeButton"
199
+ };
200
+ const Modal = React.forwardRef(({ open, center, blockScroll = true, closeOnEsc = true, closeOnOverlayClick = true, container, showCloseIcon = true, closeIconId, closeIcon, focusTrapped = true, initialFocusRef = void 0, animationDuration = 300, classNames, styles, role = "dialog", ariaDescribedby, ariaLabelledby, containerId, modalId, onClose, onEscKeyDown, onOverlayClick, onAnimationEnd, children, reserveScrollBarGap }, ref) => {
201
+ const refDialog = useForwardedRef(ref);
202
+ const refModal = useRef(null);
203
+ const refShouldClose = useRef(null);
204
+ const refContainer = useRef(null);
205
+ if (refContainer.current === null && isBrowser) refContainer.current = document.createElement("div");
206
+ const [showPortal, setShowPortal] = useState(false);
207
+ useModalManager(refModal, open);
208
+ useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap);
209
+ const handleOpen = () => {
210
+ if (refContainer.current && !container && !document.body.contains(refContainer.current)) document.body.appendChild(refContainer.current);
211
+ document.addEventListener("keydown", handleKeydown);
212
+ };
213
+ const handleClose = () => {
214
+ if (refContainer.current && !container && document.body.contains(refContainer.current)) document.body.removeChild(refContainer.current);
215
+ document.removeEventListener("keydown", handleKeydown);
216
+ };
217
+ const handleKeydown = (event) => {
218
+ if (event.keyCode !== 27 || !modalManager.isTopModal(refModal)) return;
219
+ onEscKeyDown?.(event);
220
+ if (closeOnEsc) onClose();
221
+ };
222
+ useEffect(() => {
223
+ return () => {
224
+ if (showPortal) handleClose();
225
+ };
226
+ }, [showPortal]);
227
+ useEffect(() => {
228
+ if (open && !showPortal) {
229
+ setShowPortal(true);
230
+ handleOpen();
231
+ }
232
+ }, [open]);
233
+ const handleClickOverlay = (event) => {
234
+ if (refShouldClose.current === null) refShouldClose.current = true;
235
+ if (!refShouldClose.current) {
236
+ refShouldClose.current = null;
237
+ return;
238
+ }
239
+ onOverlayClick?.(event);
240
+ if (closeOnOverlayClick) onClose();
241
+ refShouldClose.current = null;
242
+ };
243
+ const handleModalEvent = () => {
244
+ refShouldClose.current = false;
245
+ };
246
+ const handleAnimationEnd = () => {
247
+ if (!open) setShowPortal(false);
248
+ onAnimationEnd?.();
249
+ };
250
+ const containerModal = container || refContainer.current;
251
+ const overlayAnimation = open ? classNames?.overlayAnimationIn ?? classes.overlayAnimationIn : classNames?.overlayAnimationOut ?? classes.overlayAnimationOut;
252
+ const modalAnimation = open ? classNames?.modalAnimationIn ?? classes.modalAnimationIn : classNames?.modalAnimationOut ?? classes.modalAnimationOut;
253
+ return showPortal && containerModal ? createPortal(/* @__PURE__ */ jsxs("div", {
254
+ className: cx(classes.root, classNames?.root),
255
+ style: styles?.root,
256
+ "data-testid": "root",
257
+ children: [/* @__PURE__ */ jsx("div", {
258
+ className: cx(classes.overlay, classNames?.overlay),
259
+ "data-testid": "overlay",
260
+ "aria-hidden": true,
261
+ style: {
262
+ animation: `${overlayAnimation} ${animationDuration}ms`,
263
+ ...styles?.overlay
264
+ }
265
+ }), /* @__PURE__ */ jsx("div", {
266
+ ref: refModal,
267
+ id: containerId,
268
+ className: cx(classes.modalContainer, center && classes.modalContainerCenter, classNames?.modalContainer),
269
+ style: styles?.modalContainer,
270
+ "data-testid": "modal-container",
271
+ onClick: handleClickOverlay,
272
+ children: /* @__PURE__ */ jsxs("div", {
273
+ ref: refDialog,
274
+ className: cx(classes.modal, classNames?.modal),
275
+ style: {
276
+ animation: `${modalAnimation} ${animationDuration}ms`,
277
+ ...styles?.modal
278
+ },
279
+ onMouseDown: handleModalEvent,
280
+ onMouseUp: handleModalEvent,
281
+ onClick: handleModalEvent,
282
+ onAnimationEnd: handleAnimationEnd,
283
+ id: modalId,
284
+ role,
285
+ "aria-modal": "true",
286
+ "aria-labelledby": ariaLabelledby,
287
+ "aria-describedby": ariaDescribedby,
288
+ "data-testid": "modal",
289
+ tabIndex: -1,
290
+ children: [
291
+ focusTrapped && /* @__PURE__ */ jsx(FocusTrap, {
292
+ container: refDialog,
293
+ initialFocusRef
294
+ }),
295
+ children,
296
+ showCloseIcon && /* @__PURE__ */ jsx(CloseIcon_default, {
297
+ classes,
298
+ classNames,
299
+ styles,
300
+ closeIcon,
301
+ onClick: onClose,
302
+ id: closeIconId
303
+ })
304
+ ]
305
+ })
306
+ })]
307
+ }), containerModal) : null;
308
+ });
309
+ var src_default = Modal;
310
+
311
+ //#endregion
312
+ export { Modal, src_default as default };
313
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["classes","node: any","nodes: any","form: any","parentElem: any","event: any","event: KeyboardEvent","modals: Ref<Element>[]","newModal: Ref<Element>","oldModal: Ref<Element>","modal: Ref<Element>","ref: Ref<Element>","open: boolean","refModal: React.RefObject<Element | null>","open: boolean","showPortal: boolean","blockScroll: boolean","reserveScrollBarGap?: boolean","ref: React.ForwardedRef<HTMLDivElement>","event: KeyboardEvent","event: React.MouseEvent<HTMLDivElement, MouseEvent>","CloseIcon"],"sources":["../src/CloseIcon.tsx","../src/utils.ts","../src/lib/focusTrapJs.ts","../src/FocusTrap.tsx","../src/modalManager.ts","../src/useScrollLock.ts","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\n\ninterface CloseIconProps {\n id?: string;\n closeIcon?: React.ReactNode;\n styles?: {\n closeButton?: React.CSSProperties;\n closeIcon?: React.CSSProperties;\n };\n classNames?: {\n closeButton?: string;\n closeIcon?: string;\n };\n classes: {\n closeButton?: string;\n };\n onClick: () => void;\n}\n\nconst CloseIcon = ({\n classes,\n classNames,\n styles,\n id,\n closeIcon,\n onClick,\n}: CloseIconProps) => (\n <button\n id={id}\n className={cx(classes.closeButton, classNames?.closeButton)}\n style={styles?.closeButton}\n onClick={onClick}\n data-testid=\"close-button\"\n >\n {closeIcon ? (\n closeIcon\n ) : (\n <svg\n className={classNames?.closeIcon}\n style={styles?.closeIcon}\n width={28}\n height={28}\n viewBox=\"0 0 36 36\"\n data-testid=\"close-icon\"\n >\n <path d=\"M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z\" />\n </svg>\n )}\n </button>\n);\n\nexport default CloseIcon;\n","export const isBrowser = typeof window !== 'undefined';\n","// https://github.com/alexandrzavalii/focus-trap-js/blob/master/src/index.js v1.1.0\n\nexport const candidateSelectors = [\n 'input',\n 'select',\n 'textarea',\n 'a[href]',\n 'button',\n '[tabindex]',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]:not([contenteditable=\"false\"])',\n];\n\nfunction isHidden(node: any) {\n // offsetParent being null will allow detecting cases where an element is invisible or inside an invisible element,\n // as long as the element does not use position: fixed. For them, their visibility has to be checked directly as well.\n return (\n node.offsetParent === null || getComputedStyle(node).visibility === 'hidden'\n );\n}\n\nfunction getCheckedRadio(nodes: any, form: any) {\n for (var i = 0; i < nodes.length; i++) {\n if (nodes[i].checked && nodes[i].form === form) {\n return nodes[i];\n }\n }\n}\n\nfunction isNotRadioOrTabbableRadio(node: any) {\n if (node.tagName !== 'INPUT' || node.type !== 'radio' || !node.name) {\n return true;\n }\n var radioScope = node.form || node.ownerDocument;\n var radioSet = radioScope.querySelectorAll(\n 'input[type=\"radio\"][name=\"' + node.name + '\"]',\n );\n var checked = getCheckedRadio(radioSet, node.form);\n return checked === node || (checked === undefined && radioSet[0] === node);\n}\n\nexport function getAllTabbingElements(parentElem: any) {\n var currentActiveElement = document.activeElement;\n var tabbableNodes = parentElem.querySelectorAll(candidateSelectors.join(','));\n var onlyTabbable = [];\n for (var i = 0; i < tabbableNodes.length; i++) {\n var node = tabbableNodes[i];\n if (\n currentActiveElement === node ||\n (!node.disabled &&\n getTabindex(node) > -1 &&\n !isHidden(node) &&\n isNotRadioOrTabbableRadio(node))\n ) {\n onlyTabbable.push(node);\n }\n }\n return onlyTabbable;\n}\n\nexport function tabTrappingKey(event: any, parentElem: any) {\n // check if current event keyCode is tab\n if (!event || event.key !== 'Tab') return;\n\n if (!parentElem || !parentElem.contains) {\n if (process && process.env.NODE_ENV === 'development') {\n console.warn('focus-trap-js: parent element is not defined');\n }\n return false;\n }\n\n if (!parentElem.contains(event.target)) {\n return false;\n }\n\n var allTabbingElements = getAllTabbingElements(parentElem);\n var firstFocusableElement = allTabbingElements[0];\n var lastFocusableElement = allTabbingElements[allTabbingElements.length - 1];\n\n if (event.shiftKey && event.target === firstFocusableElement) {\n lastFocusableElement.focus();\n event.preventDefault();\n return true;\n } else if (!event.shiftKey && event.target === lastFocusableElement) {\n firstFocusableElement.focus();\n event.preventDefault();\n return true;\n }\n return false;\n}\n\nfunction getTabindex(node: any) {\n var tabindexAttr = parseInt(node.getAttribute('tabindex'), 10);\n\n if (!isNaN(tabindexAttr)) return tabindexAttr;\n // Browsers do not return tabIndex correctly for contentEditable nodes;\n // so if they don't have a tabindex attribute specifically set, assume it's 0.\n\n if (isContentEditable(node)) return 0;\n return node.tabIndex;\n}\n\nfunction isContentEditable(node: any) {\n return node.getAttribute('contentEditable');\n}\n","import { useEffect, useRef } from 'react';\nimport { isBrowser } from './utils';\nimport {\n tabTrappingKey,\n candidateSelectors,\n getAllTabbingElements,\n} from './lib/focusTrapJs';\n\ninterface FocusTrapProps {\n container?: React.RefObject<HTMLElement> | null;\n initialFocusRef?: React.RefObject<HTMLElement | null>;\n}\n\nexport const FocusTrap = ({ container, initialFocusRef }: FocusTrapProps) => {\n const refLastFocus = useRef<HTMLElement | null>(null);\n /**\n * Handle focus lock on the modal\n */\n useEffect(() => {\n const handleKeyEvent = (event: KeyboardEvent) => {\n if (container?.current) {\n tabTrappingKey(event, container.current);\n }\n };\n\n if (isBrowser) {\n document.addEventListener('keydown', handleKeyEvent);\n }\n // On mount we focus on the first focusable element in the modal if there is one\n if (isBrowser && container?.current) {\n const savePreviousFocus = () => {\n // First we save the last focused element\n // only if it's a focusable element\n if (\n candidateSelectors.findIndex((selector) =>\n document.activeElement?.matches(selector),\n ) !== -1\n ) {\n refLastFocus.current = document.activeElement as HTMLElement;\n }\n };\n\n if (initialFocusRef) {\n savePreviousFocus();\n // We need to schedule focusing on a next frame - this allows to focus on the modal root\n requestAnimationFrame(() => {\n initialFocusRef.current?.focus();\n });\n } else {\n const allTabbingElements = getAllTabbingElements(container.current);\n if (allTabbingElements[0]) {\n savePreviousFocus();\n allTabbingElements[0].focus();\n }\n }\n }\n return () => {\n if (isBrowser) {\n document.removeEventListener('keydown', handleKeyEvent);\n // On unmount we restore the focus to the last focused element\n refLastFocus.current?.focus();\n }\n };\n }, [container, initialFocusRef]);\n\n return null;\n};\n","import { Ref, useEffect } from 'react';\n\nlet modals: Ref<Element>[] = [];\n\n/**\n * Handle the order of the modals.\n * Inspired by the material-ui implementation.\n */\nexport const modalManager = {\n /**\n * Register a new modal\n */\n add: (newModal: Ref<Element>) => {\n modals.push(newModal);\n },\n\n /**\n * Remove a modal\n */\n remove: (oldModal: Ref<Element>) => {\n modals = modals.filter((modal) => modal !== oldModal);\n },\n\n /**\n * When multiple modals are rendered will return true if current modal is the last one\n */\n isTopModal: (modal: Ref<Element>) =>\n !!modals.length && modals[modals.length - 1] === modal,\n};\n\nexport function useModalManager(ref: Ref<Element>, open: boolean) {\n useEffect(() => {\n if (open) {\n modalManager.add(ref);\n }\n return () => {\n modalManager.remove(ref);\n };\n }, [open, ref]);\n}\n","import { useEffect, useRef } from 'react';\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\n\nexport const useScrollLock = (\n refModal: React.RefObject<Element | null>,\n open: boolean,\n showPortal: boolean,\n blockScroll: boolean,\n reserveScrollBarGap?: boolean,\n) => {\n const oldRef = useRef<Element | null>(null);\n\n useEffect(() => {\n if (open && refModal.current && blockScroll) {\n oldRef.current = refModal.current;\n disableBodyScroll(refModal.current, { reserveScrollBarGap });\n }\n return () => {\n if (oldRef.current) {\n enableBodyScroll(oldRef.current);\n oldRef.current = null;\n }\n };\n }, [open, showPortal, refModal, blockScroll, reserveScrollBarGap]);\n};\n","import React, { useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport cx from 'classnames';\nimport { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';\nimport CloseIcon from './CloseIcon';\nimport { FocusTrap } from './FocusTrap';\nimport { modalManager, useModalManager } from './modalManager';\nimport { useScrollLock } from './useScrollLock';\nimport { isBrowser } from './utils';\n\nconst classes = {\n root: 'react-responsive-modal-root',\n overlay: 'react-responsive-modal-overlay',\n overlayAnimationIn: 'react-responsive-modal-overlay-in',\n overlayAnimationOut: 'react-responsive-modal-overlay-out',\n modalContainer: 'react-responsive-modal-container',\n modalContainerCenter: 'react-responsive-modal-containerCenter',\n modal: 'react-responsive-modal-modal',\n modalAnimationIn: 'react-responsive-modal-modal-in',\n modalAnimationOut: 'react-responsive-modal-modal-out',\n closeButton: 'react-responsive-modal-closeButton',\n};\n\nexport interface ModalProps {\n /**\n * Control if the modal is open or not.\n */\n open: boolean;\n /**\n * Should the dialog be centered.\n *\n * Default to false.\n */\n center?: boolean;\n /**\n * Is the modal closable when user press esc key.\n *\n * Default to true.\n */\n closeOnEsc?: boolean;\n /**\n * Is the modal closable when user click on overlay.\n *\n * Default to true.\n */\n closeOnOverlayClick?: boolean;\n /**\n * Whether to block scrolling when dialog is open.\n *\n * Default to true.\n */\n blockScroll?: boolean;\n /**\n * Show the close icon.\n *\n * Default to true.\n */\n showCloseIcon?: boolean;\n /**\n * id attribute for the close icon button.\n */\n closeIconId?: string;\n /**\n * Custom icon to render (svg, img, etc...).\n */\n closeIcon?: React.ReactNode;\n /**\n * When the modal is open, trap focus within it.\n *\n * Default to true.\n */\n focusTrapped?: boolean;\n /**\n * Element to focus when focus trap is used.\n *\n * Default to undefined.\n */\n initialFocusRef?: React.RefObject<HTMLElement | null>;\n /**\n * You can specify a container prop which should be of type `Element`.\n * The portal will be rendered inside that element.\n * The default behavior will create a div node and render it at the at the end of document.body.\n */\n container?: Element | null;\n /**\n * An object containing classNames to style the modal.\n */\n classNames?: {\n root?: string;\n overlay?: string;\n overlayAnimationIn?: string;\n overlayAnimationOut?: string;\n modalContainer?: string;\n modal?: string;\n modalAnimationIn?: string;\n modalAnimationOut?: string;\n closeButton?: string;\n closeIcon?: string;\n };\n /**\n * An object containing the styles objects to style the modal.\n */\n styles?: {\n root?: React.CSSProperties;\n overlay?: React.CSSProperties;\n modalContainer?: React.CSSProperties;\n modal?: React.CSSProperties;\n closeButton?: React.CSSProperties;\n closeIcon?: React.CSSProperties;\n };\n /**\n * Animation duration in milliseconds.\n *\n * Default to 300.\n */\n animationDuration?: number;\n /**\n * ARIA role for modal\n *\n * Default to 'dialog'.\n */\n role?: string;\n /**\n * ARIA label for modal\n */\n ariaLabelledby?: string;\n /**\n * ARIA description for modal\n */\n ariaDescribedby?: string;\n /**\n * Avoid unpleasant flickering effect when body overflow is hidden. For more information see https://www.npmjs.com/package/body-scroll-lock\n */\n reserveScrollBarGap?: boolean;\n /**\n * id attribute for modal container\n */\n containerId?: string;\n /**\n * id attribute for modal\n */\n modalId?: string;\n /**\n * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.\n */\n onClose: () => void;\n /**\n * Callback fired when the escape key is pressed.\n */\n onEscKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Callback fired when the overlay is clicked.\n */\n onOverlayClick?: (\n event: React.MouseEvent<HTMLDivElement, MouseEvent>,\n ) => void;\n /**\n * Callback fired when the Modal has exited and the animation is finished.\n */\n onAnimationEnd?: () => void;\n children?: React.ReactNode;\n}\n\nexport const Modal = React.forwardRef(\n (\n {\n open,\n center,\n blockScroll = true,\n closeOnEsc = true,\n closeOnOverlayClick = true,\n container,\n showCloseIcon = true,\n closeIconId,\n closeIcon,\n focusTrapped = true,\n initialFocusRef = undefined,\n animationDuration = 300,\n classNames,\n styles,\n role = 'dialog',\n ariaDescribedby,\n ariaLabelledby,\n containerId,\n modalId,\n onClose,\n onEscKeyDown,\n onOverlayClick,\n onAnimationEnd,\n children,\n reserveScrollBarGap,\n }: ModalProps,\n ref: React.ForwardedRef<HTMLDivElement>,\n ) => {\n const refDialog = useForwardedRef(ref);\n const refModal = useRef<HTMLDivElement>(null);\n const refShouldClose = useRef<boolean | null>(null);\n const refContainer = useRef<HTMLDivElement | null>(null);\n // Lazily create the ref instance\n // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily\n if (refContainer.current === null && isBrowser) {\n refContainer.current = document.createElement('div');\n }\n\n // The value should be false for srr, that way when the component is hydrated client side,\n // it will match the server rendered content\n const [showPortal, setShowPortal] = useState(false);\n\n // Hook used to manage multiple modals opened at the same time\n useModalManager(refModal, open);\n\n // Hook used to manage the scroll\n useScrollLock(refModal, open, showPortal, blockScroll, reserveScrollBarGap);\n\n const handleOpen = () => {\n if (\n refContainer.current &&\n !container &&\n !document.body.contains(refContainer.current)\n ) {\n document.body.appendChild(refContainer.current);\n }\n\n document.addEventListener('keydown', handleKeydown);\n };\n\n const handleClose = () => {\n if (\n refContainer.current &&\n !container &&\n document.body.contains(refContainer.current)\n ) {\n document.body.removeChild(refContainer.current);\n }\n document.removeEventListener('keydown', handleKeydown);\n };\n\n const handleKeydown = (event: KeyboardEvent) => {\n // Only the last modal need to be escaped when pressing the esc key\n if (event.keyCode !== 27 || !modalManager.isTopModal(refModal)) {\n return;\n }\n\n onEscKeyDown?.(event);\n\n if (closeOnEsc) {\n onClose();\n }\n };\n\n useEffect(() => {\n return () => {\n if (showPortal) {\n // When the modal is closed or removed directly, cleanup the listeners\n handleClose();\n }\n };\n }, [showPortal]);\n\n useEffect(() => {\n // If the open prop is changing, we need to open the modal\n // This is also called on the first render if the open prop is true when the modal is created\n if (open && !showPortal) {\n setShowPortal(true);\n handleOpen();\n }\n }, [open]);\n\n const handleClickOverlay = (\n event: React.MouseEvent<HTMLDivElement, MouseEvent>,\n ) => {\n if (refShouldClose.current === null) {\n refShouldClose.current = true;\n }\n\n if (!refShouldClose.current) {\n refShouldClose.current = null;\n return;\n }\n\n onOverlayClick?.(event);\n\n if (closeOnOverlayClick) {\n onClose();\n }\n\n refShouldClose.current = null;\n };\n\n const handleModalEvent = () => {\n refShouldClose.current = false;\n };\n\n const handleAnimationEnd = () => {\n if (!open) {\n setShowPortal(false);\n }\n\n onAnimationEnd?.();\n };\n\n const containerModal = container || refContainer.current;\n\n const overlayAnimation = open\n ? (classNames?.overlayAnimationIn ?? classes.overlayAnimationIn)\n : (classNames?.overlayAnimationOut ?? classes.overlayAnimationOut);\n\n const modalAnimation = open\n ? (classNames?.modalAnimationIn ?? classes.modalAnimationIn)\n : (classNames?.modalAnimationOut ?? classes.modalAnimationOut);\n\n return showPortal && containerModal\n ? createPortal(\n <div\n className={cx(classes.root, classNames?.root)}\n style={styles?.root}\n data-testid=\"root\"\n >\n <div\n className={cx(classes.overlay, classNames?.overlay)}\n data-testid=\"overlay\"\n aria-hidden={true}\n style={{\n animation: `${overlayAnimation} ${animationDuration}ms`,\n ...styles?.overlay,\n }}\n />\n <div\n ref={refModal}\n id={containerId}\n className={cx(\n classes.modalContainer,\n center && classes.modalContainerCenter,\n classNames?.modalContainer,\n )}\n style={styles?.modalContainer}\n data-testid=\"modal-container\"\n onClick={handleClickOverlay}\n >\n <div\n ref={refDialog}\n className={cx(classes.modal, classNames?.modal)}\n style={{\n animation: `${modalAnimation} ${animationDuration}ms`,\n ...styles?.modal,\n }}\n onMouseDown={handleModalEvent}\n onMouseUp={handleModalEvent}\n onClick={handleModalEvent}\n onAnimationEnd={handleAnimationEnd}\n id={modalId}\n role={role}\n aria-modal=\"true\"\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n data-testid=\"modal\"\n tabIndex={-1}\n >\n {focusTrapped && (\n <FocusTrap\n container={refDialog}\n initialFocusRef={initialFocusRef}\n />\n )}\n {children}\n {showCloseIcon && (\n <CloseIcon\n classes={classes}\n classNames={classNames}\n styles={styles}\n closeIcon={closeIcon}\n onClick={onClose}\n id={closeIconId}\n />\n )}\n </div>\n </div>\n </div>,\n containerModal,\n )\n : null;\n },\n);\n\nexport default Modal;\n"],"mappings":"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"}