@alfalab/core-components-base-modal 4.1.0 → 4.1.3

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +34 -0
  2. package/dist/Component.js +33 -18
  3. package/dist/cssm/Component.js +32 -17
  4. package/dist/cssm/index.js +1 -1
  5. package/dist/esm/Component.js +34 -19
  6. package/dist/esm/index.css +13 -13
  7. package/dist/esm/index.js +1 -1
  8. package/dist/index.css +13 -13
  9. package/dist/index.js +1 -1
  10. package/dist/modern/Component.js +34 -19
  11. package/dist/modern/index.css +13 -13
  12. package/dist/modern/index.js +1 -1
  13. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,40 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.3](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.2...@alfalab/core-components-base-modal@4.1.3) (2022-07-11)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **base-modal:** fix using resize observer ([#136](https://github.com/core-ds/core-components/issues/136)) ([cb8f03c](https://github.com/core-ds/core-components/commit/cb8f03ca55394316189d1d4529ee3fdb691538d9))
12
+ * fixed 'window is not defined' error ([#126](https://github.com/core-ds/core-components/issues/126)) ([f4e9ca5](https://github.com/core-ds/core-components/commit/f4e9ca54ed52fb328d21c85b7efa8176a90dcb6e))
13
+
14
+
15
+
16
+
17
+
18
+ ## [4.1.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.1...@alfalab/core-components-base-modal@4.1.2) (2022-07-01)
19
+
20
+
21
+ ### Performance Improvements
22
+
23
+ * refuse to use a resize-observer polyfill if it is not needed ([#120](https://github.com/core-ds/core-components/issues/120)) ([f2abcb2](https://github.com/core-ds/core-components/commit/f2abcb2888dd5906b345f5fc64b1624eef56ac13))
24
+
25
+
26
+
27
+
28
+
29
+ ## [4.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.0...@alfalab/core-components-base-modal@4.1.1) (2022-06-30)
30
+
31
+
32
+ ### Bug Fixes
33
+
34
+ * **base-modal:** fixed outside modal click ([#115](https://github.com/core-ds/core-components/issues/115)) ([6a08f72](https://github.com/core-ds/core-components/commit/6a08f726521dcd9a310b0e06345950429eac246a))
35
+
36
+
37
+
38
+
39
+
6
40
  # [4.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.0.2...@alfalab/core-components-base-modal@4.1.0) (2022-06-28)
7
41
 
8
42
 
package/dist/Component.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var mergeRefs = require('react-merge-refs');
8
- var resizeObserver = require('resize-observer');
8
+ var resizeObserver = require('@juggle/resize-observer');
9
9
  var reactTransitionGroup = require('react-transition-group');
10
10
  var FocusLock = require('react-focus-lock');
11
11
  var coreComponentsPortal = require('@alfalab/core-components-portal');
@@ -48,7 +48,7 @@ var __assign = function () {
48
48
  return __assign.apply(this, arguments);
49
49
  };
50
50
 
51
- var styles = {"component":"base-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
51
+ var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
52
52
  require('./index.css')
53
53
 
54
54
  var BaseModalContext = React__default['default'].createContext({
@@ -78,6 +78,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
78
78
  var scrollableNodeRef = React.useRef(null);
79
79
  var contentNodeRef = React.useRef(null);
80
80
  var restoreContainerStylesRef = React.useRef(null);
81
+ var mouseDownTarget = React.useRef();
82
+ var resizeObserverRef = React.useRef();
81
83
  var checkToHasScrollBar = function () {
82
84
  if (scrollableNodeRef.current) {
83
85
  var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -89,23 +91,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
89
91
  var getContainer = React.useCallback(function () {
90
92
  return (container ? container() : document.body);
91
93
  }, [container]);
92
- var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
93
94
  var addResizeHandle = React.useCallback(function () {
94
- if (scrollableNodeRef.current)
95
- resizeObserver$1.observe(scrollableNodeRef.current);
96
- if (contentNodeRef.current)
97
- resizeObserver$1.observe(contentNodeRef.current);
98
- }, [resizeObserver$1]);
99
- var removeResizeHandle = React.useCallback(function () {
100
- resizeObserver$1.disconnect();
101
- }, [resizeObserver$1]);
95
+ if (!resizeObserverRef.current)
96
+ return;
97
+ if (scrollableNodeRef.current) {
98
+ resizeObserverRef.current.observe(scrollableNodeRef.current);
99
+ }
100
+ if (contentNodeRef.current) {
101
+ resizeObserverRef.current.observe(contentNodeRef.current);
102
+ }
103
+ }, []);
104
+ var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
102
105
  var contentRef = React.useCallback(function (node) {
103
106
  if (node !== null) {
104
107
  contentNodeRef.current = node;
105
- resizeObserver$1.observe(node);
108
+ if (resizeObserverRef.current) {
109
+ resizeObserverRef.current.observe(node);
110
+ }
106
111
  checkToHasScrollBar();
107
112
  }
108
- }, [resizeObserver$1]);
113
+ }, []);
109
114
  var handleScroll = React.useCallback(function () {
110
115
  if (!scrollableNodeRef.current || !componentNodeRef.current)
111
116
  return;
@@ -131,8 +136,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
131
136
  }
132
137
  return null;
133
138
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
134
- var handleBackdropClick = function (event) {
135
- if (!disableBackdropClick && event.target === wrapperRef.current) {
139
+ var handleBackdropMouseDown = function (event) {
140
+ if (!disableBackdropClick) {
141
+ mouseDownTarget.current = event.target;
142
+ }
143
+ };
144
+ var handleBackdropMouseUp = function (event) {
145
+ if (!disableBackdropClick &&
146
+ event.target === wrapperRef.current &&
147
+ mouseDownTarget.current === wrapperRef.current) {
136
148
  handleClose(event, 'backdropClick');
137
149
  }
138
150
  };
@@ -199,13 +211,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
199
211
  setExited(false);
200
212
  }, [open]);
201
213
  React.useEffect(function () {
214
+ var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
215
+ resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
202
216
  return function () {
203
217
  if (restoreContainerStylesRef.current) {
204
218
  restoreContainerStylesRef.current();
205
219
  }
206
- resizeObserver$1.disconnect();
220
+ if (resizeObserverRef.current) {
221
+ resizeObserverRef.current.disconnect();
222
+ }
207
223
  };
208
- // eslint-disable-next-line react-hooks/exhaustive-deps
209
224
  }, []);
210
225
  var contextValue = React.useMemo(function () { return ({
211
226
  hasHeader: hasHeader,
@@ -242,7 +257,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
242
257
  } }))),
243
258
  React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles.wrapper, wrapperClassName, (_a = {},
244
259
  _a[styles.hidden] = !open && exited,
245
- _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
260
+ _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
246
261
  zIndex: computedZIndex,
247
262
  } },
248
263
  React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
package/dist/cssm/Component.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
7
  var mergeRefs = require('react-merge-refs');
8
- var resizeObserver = require('resize-observer');
8
+ var resizeObserver = require('@juggle/resize-observer');
9
9
  var reactTransitionGroup = require('react-transition-group');
10
10
  var FocusLock = require('react-focus-lock');
11
11
  var coreComponentsPortal = require('@alfalab/core-components-portal/dist/cssm');
@@ -77,6 +77,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
77
77
  var scrollableNodeRef = React.useRef(null);
78
78
  var contentNodeRef = React.useRef(null);
79
79
  var restoreContainerStylesRef = React.useRef(null);
80
+ var mouseDownTarget = React.useRef();
81
+ var resizeObserverRef = React.useRef();
80
82
  var checkToHasScrollBar = function () {
81
83
  if (scrollableNodeRef.current) {
82
84
  var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -88,23 +90,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
88
90
  var getContainer = React.useCallback(function () {
89
91
  return (container ? container() : document.body);
90
92
  }, [container]);
91
- var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
92
93
  var addResizeHandle = React.useCallback(function () {
93
- if (scrollableNodeRef.current)
94
- resizeObserver$1.observe(scrollableNodeRef.current);
95
- if (contentNodeRef.current)
96
- resizeObserver$1.observe(contentNodeRef.current);
97
- }, [resizeObserver$1]);
98
- var removeResizeHandle = React.useCallback(function () {
99
- resizeObserver$1.disconnect();
100
- }, [resizeObserver$1]);
94
+ if (!resizeObserverRef.current)
95
+ return;
96
+ if (scrollableNodeRef.current) {
97
+ resizeObserverRef.current.observe(scrollableNodeRef.current);
98
+ }
99
+ if (contentNodeRef.current) {
100
+ resizeObserverRef.current.observe(contentNodeRef.current);
101
+ }
102
+ }, []);
103
+ var removeResizeHandle = React.useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
101
104
  var contentRef = React.useCallback(function (node) {
102
105
  if (node !== null) {
103
106
  contentNodeRef.current = node;
104
- resizeObserver$1.observe(node);
107
+ if (resizeObserverRef.current) {
108
+ resizeObserverRef.current.observe(node);
109
+ }
105
110
  checkToHasScrollBar();
106
111
  }
107
- }, [resizeObserver$1]);
112
+ }, []);
108
113
  var handleScroll = React.useCallback(function () {
109
114
  if (!scrollableNodeRef.current || !componentNodeRef.current)
110
115
  return;
@@ -130,8 +135,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
130
135
  }
131
136
  return null;
132
137
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
133
- var handleBackdropClick = function (event) {
134
- if (!disableBackdropClick && event.target === wrapperRef.current) {
138
+ var handleBackdropMouseDown = function (event) {
139
+ if (!disableBackdropClick) {
140
+ mouseDownTarget.current = event.target;
141
+ }
142
+ };
143
+ var handleBackdropMouseUp = function (event) {
144
+ if (!disableBackdropClick &&
145
+ event.target === wrapperRef.current &&
146
+ mouseDownTarget.current === wrapperRef.current) {
135
147
  handleClose(event, 'backdropClick');
136
148
  }
137
149
  };
@@ -198,13 +210,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
198
210
  setExited(false);
199
211
  }, [open]);
200
212
  React.useEffect(function () {
213
+ var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
214
+ resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
201
215
  return function () {
202
216
  if (restoreContainerStylesRef.current) {
203
217
  restoreContainerStylesRef.current();
204
218
  }
205
- resizeObserver$1.disconnect();
219
+ if (resizeObserverRef.current) {
220
+ resizeObserverRef.current.disconnect();
221
+ }
206
222
  };
207
- // eslint-disable-next-line react-hooks/exhaustive-deps
208
223
  }, []);
209
224
  var contextValue = React.useMemo(function () { return ({
210
225
  hasHeader: hasHeader,
@@ -241,7 +256,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
241
256
  } }))),
242
257
  React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_a = {},
243
258
  _a[styles__default['default'].hidden] = !open && exited,
244
- _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
259
+ _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
245
260
  zIndex: computedZIndex,
246
261
  } },
247
262
  React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles__default['default'] }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
package/dist/cssm/index.js CHANGED
@@ -6,7 +6,7 @@ var Component = require('./Component.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-merge-refs');
9
- require('resize-observer');
9
+ require('@juggle/resize-observer');
10
10
  require('react-transition-group');
11
11
  require('react-focus-lock');
12
12
  require('@alfalab/core-components-portal/dist/cssm');
package/dist/esm/Component.js CHANGED
@@ -1,7 +1,7 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
1
+ import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import mergeRefs from 'react-merge-refs';
4
- import { ResizeObserver } from 'resize-observer';
4
+ import { ResizeObserver } from '@juggle/resize-observer';
5
5
  import { CSSTransition } from 'react-transition-group';
6
6
  import FocusLock from 'react-focus-lock';
7
7
  import { Portal } from '@alfalab/core-components-portal/dist/esm';
@@ -37,7 +37,7 @@ var __assign = function () {
37
37
  return __assign.apply(this, arguments);
38
38
  };
39
39
 
40
- var styles = {"component":"base-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
40
+ var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
41
41
  require('./index.css')
42
42
 
43
43
  var BaseModalContext = React.createContext({
@@ -67,6 +67,8 @@ var BaseModal = forwardRef(function (_a, ref) {
67
67
  var scrollableNodeRef = useRef(null);
68
68
  var contentNodeRef = useRef(null);
69
69
  var restoreContainerStylesRef = useRef(null);
70
+ var mouseDownTarget = useRef();
71
+ var resizeObserverRef = useRef();
70
72
  var checkToHasScrollBar = function () {
71
73
  if (scrollableNodeRef.current) {
72
74
  var scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -78,23 +80,26 @@ var BaseModal = forwardRef(function (_a, ref) {
78
80
  var getContainer = useCallback(function () {
79
81
  return (container ? container() : document.body);
80
82
  }, [container]);
81
- var resizeObserver = useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
82
83
  var addResizeHandle = useCallback(function () {
83
- if (scrollableNodeRef.current)
84
- resizeObserver.observe(scrollableNodeRef.current);
85
- if (contentNodeRef.current)
86
- resizeObserver.observe(contentNodeRef.current);
87
- }, [resizeObserver]);
88
- var removeResizeHandle = useCallback(function () {
89
- resizeObserver.disconnect();
90
- }, [resizeObserver]);
84
+ if (!resizeObserverRef.current)
85
+ return;
86
+ if (scrollableNodeRef.current) {
87
+ resizeObserverRef.current.observe(scrollableNodeRef.current);
88
+ }
89
+ if (contentNodeRef.current) {
90
+ resizeObserverRef.current.observe(contentNodeRef.current);
91
+ }
92
+ }, []);
93
+ var removeResizeHandle = useCallback(function () { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
91
94
  var contentRef = useCallback(function (node) {
92
95
  if (node !== null) {
93
96
  contentNodeRef.current = node;
94
- resizeObserver.observe(node);
97
+ if (resizeObserverRef.current) {
98
+ resizeObserverRef.current.observe(node);
99
+ }
95
100
  checkToHasScrollBar();
96
101
  }
97
- }, [resizeObserver]);
102
+ }, []);
98
103
  var handleScroll = useCallback(function () {
99
104
  if (!scrollableNodeRef.current || !componentNodeRef.current)
100
105
  return;
@@ -120,8 +125,15 @@ var BaseModal = forwardRef(function (_a, ref) {
120
125
  }
121
126
  return null;
122
127
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
123
- var handleBackdropClick = function (event) {
124
- if (!disableBackdropClick && event.target === wrapperRef.current) {
128
+ var handleBackdropMouseDown = function (event) {
129
+ if (!disableBackdropClick) {
130
+ mouseDownTarget.current = event.target;
131
+ }
132
+ };
133
+ var handleBackdropMouseUp = function (event) {
134
+ if (!disableBackdropClick &&
135
+ event.target === wrapperRef.current &&
136
+ mouseDownTarget.current === wrapperRef.current) {
125
137
  handleClose(event, 'backdropClick');
126
138
  }
127
139
  };
@@ -188,13 +200,16 @@ var BaseModal = forwardRef(function (_a, ref) {
188
200
  setExited(false);
189
201
  }, [open]);
190
202
  useEffect(function () {
203
+ var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
204
+ resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
191
205
  return function () {
192
206
  if (restoreContainerStylesRef.current) {
193
207
  restoreContainerStylesRef.current();
194
208
  }
195
- resizeObserver.disconnect();
209
+ if (resizeObserverRef.current) {
210
+ resizeObserverRef.current.disconnect();
211
+ }
196
212
  };
197
- // eslint-disable-next-line react-hooks/exhaustive-deps
198
213
  }, []);
199
214
  var contextValue = useMemo(function () { return ({
200
215
  hasHeader: hasHeader,
@@ -231,7 +246,7 @@ var BaseModal = forwardRef(function (_a, ref) {
231
246
  } }))),
232
247
  React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
233
248
  _a[styles.hidden] = !open && exited,
234
- _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
249
+ _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
235
250
  zIndex: computedZIndex,
236
251
  } },
237
252
  React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1jd4u */
1
+ /* hash: 12lf3 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_nmcj5 {
13
+ .base-modal__component_12xfo {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_nmcj5 {
20
+ .base-modal__wrapper_12xfo {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_nmcj5 {
33
+ .base-modal__content_12xfo {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
50
+ .base-modal__appearActive_12xfo,
51
+ .base-modal__enterActive_12xfo {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_nmcj5 {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
58
+ .base-modal__exitActive_12xfo,
59
+ .base-modal__exitDone_12xfo {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/dist/esm/index.js CHANGED
@@ -2,7 +2,7 @@ export { BaseModal, BaseModalContext } from './Component.js';
2
2
  import 'react';
3
3
  import 'classnames';
4
4
  import 'react-merge-refs';
5
- import 'resize-observer';
5
+ import '@juggle/resize-observer';
6
6
  import 'react-transition-group';
7
7
  import 'react-focus-lock';
8
8
  import '@alfalab/core-components-portal/dist/esm';
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1jd4u */
1
+ /* hash: 12lf3 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_nmcj5 {
13
+ .base-modal__component_12xfo {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_nmcj5 {
20
+ .base-modal__wrapper_12xfo {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_nmcj5 {
33
+ .base-modal__content_12xfo {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
50
+ .base-modal__appearActive_12xfo,
51
+ .base-modal__enterActive_12xfo {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_nmcj5 {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
58
+ .base-modal__exitActive_12xfo,
59
+ .base-modal__exitDone_12xfo {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ var Component = require('./Component.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-merge-refs');
9
- require('resize-observer');
9
+ require('@juggle/resize-observer');
10
10
  require('react-transition-group');
11
11
  require('react-focus-lock');
12
12
  require('@alfalab/core-components-portal');
package/dist/modern/Component.js CHANGED
@@ -1,7 +1,7 @@
1
- import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
1
+ import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
2
2
  import cn from 'classnames';
3
3
  import mergeRefs from 'react-merge-refs';
4
- import { ResizeObserver } from 'resize-observer';
4
+ import { ResizeObserver } from '@juggle/resize-observer';
5
5
  import { CSSTransition } from 'react-transition-group';
6
6
  import FocusLock from 'react-focus-lock';
7
7
  import { Portal } from '@alfalab/core-components-portal/dist/modern';
@@ -10,7 +10,7 @@ import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern
10
10
  import '@alfalab/core-components-global-store/dist/modern';
11
11
  import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
12
12
 
13
- var styles = {"component":"base-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
13
+ var styles = {"component":"base-modal__component_12xfo","wrapper":"base-modal__wrapper_12xfo","content":"base-modal__content_12xfo","hidden":"base-modal__hidden_12xfo","backdrop":"base-modal__backdrop_12xfo","appear":"base-modal__appear_12xfo","enter":"base-modal__enter_12xfo","appearActive":"base-modal__appearActive_12xfo","enterActive":"base-modal__enterActive_12xfo","exit":"base-modal__exit_12xfo","exitActive":"base-modal__exitActive_12xfo","exitDone":"base-modal__exitDone_12xfo"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -40,6 +40,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
40
40
  const scrollableNodeRef = useRef(null);
41
41
  const contentNodeRef = useRef(null);
42
42
  const restoreContainerStylesRef = useRef(null);
43
+ const mouseDownTarget = useRef();
44
+ const resizeObserverRef = useRef();
43
45
  const checkToHasScrollBar = () => {
44
46
  if (scrollableNodeRef.current) {
45
47
  const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -51,23 +53,26 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
51
53
  const getContainer = useCallback(() => {
52
54
  return (container ? container() : document.body);
53
55
  }, [container]);
54
- const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
55
56
  const addResizeHandle = useCallback(() => {
56
- if (scrollableNodeRef.current)
57
- resizeObserver.observe(scrollableNodeRef.current);
58
- if (contentNodeRef.current)
59
- resizeObserver.observe(contentNodeRef.current);
60
- }, [resizeObserver]);
61
- const removeResizeHandle = useCallback(() => {
62
- resizeObserver.disconnect();
63
- }, [resizeObserver]);
57
+ if (!resizeObserverRef.current)
58
+ return;
59
+ if (scrollableNodeRef.current) {
60
+ resizeObserverRef.current.observe(scrollableNodeRef.current);
61
+ }
62
+ if (contentNodeRef.current) {
63
+ resizeObserverRef.current.observe(contentNodeRef.current);
64
+ }
65
+ }, []);
66
+ const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
64
67
  const contentRef = useCallback((node) => {
65
68
  if (node !== null) {
66
69
  contentNodeRef.current = node;
67
- resizeObserver.observe(node);
70
+ if (resizeObserverRef.current) {
71
+ resizeObserverRef.current.observe(node);
72
+ }
68
73
  checkToHasScrollBar();
69
74
  }
70
- }, [resizeObserver]);
75
+ }, []);
71
76
  const handleScroll = useCallback(() => {
72
77
  if (!scrollableNodeRef.current || !componentNodeRef.current)
73
78
  return;
@@ -93,8 +98,15 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
93
98
  }
94
99
  return null;
95
100
  }, [onBackdropClick, onClose, onEscapeKeyDown]);
96
- const handleBackdropClick = (event) => {
97
- if (!disableBackdropClick && event.target === wrapperRef.current) {
101
+ const handleBackdropMouseDown = (event) => {
102
+ if (!disableBackdropClick) {
103
+ mouseDownTarget.current = event.target;
104
+ }
105
+ };
106
+ const handleBackdropMouseUp = (event) => {
107
+ if (!disableBackdropClick &&
108
+ event.target === wrapperRef.current &&
109
+ mouseDownTarget.current === wrapperRef.current) {
98
110
  handleClose(event, 'backdropClick');
99
111
  }
100
112
  };
@@ -161,13 +173,16 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
161
173
  setExited(false);
162
174
  }, [open]);
163
175
  useEffect(() => {
176
+ const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
177
+ resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
164
178
  return () => {
165
179
  if (restoreContainerStylesRef.current) {
166
180
  restoreContainerStylesRef.current();
167
181
  }
168
- resizeObserver.disconnect();
182
+ if (resizeObserverRef.current) {
183
+ resizeObserverRef.current.disconnect();
184
+ }
169
185
  };
170
- // eslint-disable-next-line react-hooks/exhaustive-deps
171
186
  }, []);
172
187
  const contextValue = useMemo(() => ({
173
188
  hasHeader,
@@ -202,7 +217,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
202
217
  } }))),
203
218
  React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
204
219
  [styles.hidden]: !open && exited,
205
- }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
220
+ }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
206
221
  zIndex: computedZIndex,
207
222
  } },
208
223
  React.createElement(CSSTransition, Object.assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1jd4u */
1
+ /* hash: 12lf3 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -10,14 +10,14 @@
10
10
 
11
11
  /* Hard up */
12
12
  }
13
- .base-modal__component_nmcj5 {
13
+ .base-modal__component_12xfo {
14
14
  position: relative;
15
15
  box-sizing: border-box;
16
16
  background: var(--color-light-bg-primary);
17
17
  margin: auto;
18
18
  flex-shrink: 0;
19
19
  }
20
- .base-modal__wrapper_nmcj5 {
20
+ .base-modal__wrapper_12xfo {
21
21
  position: fixed;
22
22
  top: 0;
23
23
  left: 0;
@@ -30,33 +30,33 @@
30
30
  align-items: center;
31
31
  outline: 0;
32
32
  }
33
- .base-modal__content_nmcj5 {
33
+ .base-modal__content_12xfo {
34
34
  width: 100%;
35
35
  height: 100%;
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  flex: 1;
39
39
  }
40
- .base-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
50
+ .base-modal__appearActive_12xfo,
51
+ .base-modal__enterActive_12xfo {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_nmcj5 {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
58
+ .base-modal__exitActive_12xfo,
59
+ .base-modal__exitDone_12xfo {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/dist/modern/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import 'react';
2
2
  import 'classnames';
3
3
  import 'react-merge-refs';
4
- import 'resize-observer';
4
+ import '@juggle/resize-observer';
5
5
  import 'react-transition-group';
6
6
  import 'react-focus-lock';
7
7
  import '@alfalab/core-components-portal/dist/modern';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "4.1.0",
3
+ "version": "4.1.3",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -19,11 +19,11 @@
19
19
  "@alfalab/core-components-global-store": "^1.1.1",
20
20
  "@alfalab/core-components-portal": "^2.0.3",
21
21
  "@alfalab/core-components-stack": "^3.0.3",
22
+ "@juggle/resize-observer": "^3.3.1",
22
23
  "classnames": "^2.2.6",
23
24
  "react-focus-lock": "^2.5.0",
24
25
  "react-merge-refs": "^1.1.0",
25
- "react-transition-group": "^4.4.1",
26
- "resize-observer": "^1.0.0"
26
+ "react-transition-group": "^4.4.1"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react-transition-group": "^4.2.4"
@@ -31,5 +31,5 @@
31
31
  "peerDependencies": {
32
32
  "react": "^16.9.0 || ^17.0.1"
33
33
  },
34
- "gitHead": "dcd5c0c8e25b7c374ff9311505ccf738a82e22c0"
34
+ "gitHead": "62c863f937c2b78ab35b8ca55863b11a0ebdd631"
35
35
  }