@alfalab/core-components-base-modal 4.1.2 → 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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/Component.js +21 -15
  3. package/dist/cssm/Component.js +20 -14
  4. package/dist/esm/Component.js +23 -17
  5. package/dist/esm/index.css +13 -13
  6. package/dist/index.css +13 -13
  7. package/dist/modern/Component.js +23 -17
  8. package/dist/modern/index.css +13 -13
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+
6
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)
7
19
 
8
20
 
package/dist/Component.js CHANGED
@@ -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_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
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({
@@ -64,7 +64,6 @@ var BaseModalContext = React__default['default'].createContext({
64
64
  setHasFooter: function () { return null; },
65
65
  onClose: function () { return null; },
66
66
  });
67
- var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
68
67
  var BaseModal = React.forwardRef(function (_a, ref) {
69
68
  var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
70
69
  var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -80,6 +79,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
80
79
  var contentNodeRef = React.useRef(null);
81
80
  var restoreContainerStylesRef = React.useRef(null);
82
81
  var mouseDownTarget = React.useRef();
82
+ var resizeObserverRef = React.useRef();
83
83
  var checkToHasScrollBar = function () {
84
84
  if (scrollableNodeRef.current) {
85
85
  var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -91,23 +91,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
91
91
  var getContainer = React.useCallback(function () {
92
92
  return (container ? container() : document.body);
93
93
  }, [container]);
94
- var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
95
94
  var addResizeHandle = React.useCallback(function () {
96
- if (scrollableNodeRef.current)
97
- resizeObserver.observe(scrollableNodeRef.current);
98
- if (contentNodeRef.current)
99
- resizeObserver.observe(contentNodeRef.current);
100
- }, [resizeObserver]);
101
- var removeResizeHandle = React.useCallback(function () {
102
- resizeObserver.disconnect();
103
- }, [resizeObserver]);
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(); }, []);
104
105
  var contentRef = React.useCallback(function (node) {
105
106
  if (node !== null) {
106
107
  contentNodeRef.current = node;
107
- resizeObserver.observe(node);
108
+ if (resizeObserverRef.current) {
109
+ resizeObserverRef.current.observe(node);
110
+ }
108
111
  checkToHasScrollBar();
109
112
  }
110
- }, [resizeObserver]);
113
+ }, []);
111
114
  var handleScroll = React.useCallback(function () {
112
115
  if (!scrollableNodeRef.current || !componentNodeRef.current)
113
116
  return;
@@ -208,13 +211,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
208
211
  setExited(false);
209
212
  }, [open]);
210
213
  React.useEffect(function () {
214
+ var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
215
+ resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
211
216
  return function () {
212
217
  if (restoreContainerStylesRef.current) {
213
218
  restoreContainerStylesRef.current();
214
219
  }
215
- resizeObserver.disconnect();
220
+ if (resizeObserverRef.current) {
221
+ resizeObserverRef.current.disconnect();
222
+ }
216
223
  };
217
- // eslint-disable-next-line react-hooks/exhaustive-deps
218
224
  }, []);
219
225
  var contextValue = React.useMemo(function () { return ({
220
226
  hasHeader: hasHeader,
package/dist/cssm/Component.js CHANGED
@@ -63,7 +63,6 @@ var BaseModalContext = React__default['default'].createContext({
63
63
  setHasFooter: function () { return null; },
64
64
  onClose: function () { return null; },
65
65
  });
66
- var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
67
66
  var BaseModal = React.forwardRef(function (_a, ref) {
68
67
  var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? coreComponentsStack.stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
69
68
  var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -79,6 +78,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
79
78
  var contentNodeRef = React.useRef(null);
80
79
  var restoreContainerStylesRef = React.useRef(null);
81
80
  var mouseDownTarget = React.useRef();
81
+ var resizeObserverRef = React.useRef();
82
82
  var checkToHasScrollBar = function () {
83
83
  if (scrollableNodeRef.current) {
84
84
  var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
@@ -90,23 +90,26 @@ var BaseModal = React.forwardRef(function (_a, ref) {
90
90
  var getContainer = React.useCallback(function () {
91
91
  return (container ? container() : document.body);
92
92
  }, [container]);
93
- var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
94
93
  var addResizeHandle = React.useCallback(function () {
95
- if (scrollableNodeRef.current)
96
- resizeObserver.observe(scrollableNodeRef.current);
97
- if (contentNodeRef.current)
98
- resizeObserver.observe(contentNodeRef.current);
99
- }, [resizeObserver]);
100
- var removeResizeHandle = React.useCallback(function () {
101
- resizeObserver.disconnect();
102
- }, [resizeObserver]);
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(); }, []);
103
104
  var contentRef = React.useCallback(function (node) {
104
105
  if (node !== null) {
105
106
  contentNodeRef.current = node;
106
- resizeObserver.observe(node);
107
+ if (resizeObserverRef.current) {
108
+ resizeObserverRef.current.observe(node);
109
+ }
107
110
  checkToHasScrollBar();
108
111
  }
109
- }, [resizeObserver]);
112
+ }, []);
110
113
  var handleScroll = React.useCallback(function () {
111
114
  if (!scrollableNodeRef.current || !componentNodeRef.current)
112
115
  return;
@@ -207,13 +210,16 @@ var BaseModal = React.forwardRef(function (_a, ref) {
207
210
  setExited(false);
208
211
  }, [open]);
209
212
  React.useEffect(function () {
213
+ var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
214
+ resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
210
215
  return function () {
211
216
  if (restoreContainerStylesRef.current) {
212
217
  restoreContainerStylesRef.current();
213
218
  }
214
- resizeObserver.disconnect();
219
+ if (resizeObserverRef.current) {
220
+ resizeObserverRef.current.disconnect();
221
+ }
215
222
  };
216
- // eslint-disable-next-line react-hooks/exhaustive-deps
217
223
  }, []);
218
224
  var contextValue = React.useMemo(function () { return ({
219
225
  hasHeader: hasHeader,
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 as ResizeObserver$1 } from '@juggle/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_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
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({
@@ -53,7 +53,6 @@ var BaseModalContext = React.createContext({
53
53
  setHasFooter: function () { return null; },
54
54
  onClose: function () { return null; },
55
55
  });
56
- var ResizeObserver = window.ResizeObserver || ResizeObserver$1;
57
56
  var BaseModal = forwardRef(function (_a, ref) {
58
57
  var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.keepMounted, keepMounted = _k === void 0 ? false : _k, className = _a.className, contentClassName = _a.contentClassName, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _l = _a.zIndex, zIndex = _l === void 0 ? stackingOrder.MODAL : _l, _m = _a.componentRef, componentRef = _m === void 0 ? null : _m;
59
58
  var _o = useState(!open), exited = _o[0], setExited = _o[1];
@@ -69,6 +68,7 @@ var BaseModal = forwardRef(function (_a, ref) {
69
68
  var contentNodeRef = useRef(null);
70
69
  var restoreContainerStylesRef = useRef(null);
71
70
  var mouseDownTarget = useRef();
71
+ var resizeObserverRef = useRef();
72
72
  var checkToHasScrollBar = function () {
73
73
  if (scrollableNodeRef.current) {
74
74
  var scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -80,23 +80,26 @@ var BaseModal = forwardRef(function (_a, ref) {
80
80
  var getContainer = useCallback(function () {
81
81
  return (container ? container() : document.body);
82
82
  }, [container]);
83
- var resizeObserver = useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
84
83
  var addResizeHandle = useCallback(function () {
85
- if (scrollableNodeRef.current)
86
- resizeObserver.observe(scrollableNodeRef.current);
87
- if (contentNodeRef.current)
88
- resizeObserver.observe(contentNodeRef.current);
89
- }, [resizeObserver]);
90
- var removeResizeHandle = useCallback(function () {
91
- resizeObserver.disconnect();
92
- }, [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(); }, []);
93
94
  var contentRef = useCallback(function (node) {
94
95
  if (node !== null) {
95
96
  contentNodeRef.current = node;
96
- resizeObserver.observe(node);
97
+ if (resizeObserverRef.current) {
98
+ resizeObserverRef.current.observe(node);
99
+ }
97
100
  checkToHasScrollBar();
98
101
  }
99
- }, [resizeObserver]);
102
+ }, []);
100
103
  var handleScroll = useCallback(function () {
101
104
  if (!scrollableNodeRef.current || !componentNodeRef.current)
102
105
  return;
@@ -197,13 +200,16 @@ var BaseModal = forwardRef(function (_a, ref) {
197
200
  setExited(false);
198
201
  }, [open]);
199
202
  useEffect(function () {
203
+ var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
204
+ resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
200
205
  return function () {
201
206
  if (restoreContainerStylesRef.current) {
202
207
  restoreContainerStylesRef.current();
203
208
  }
204
- resizeObserver.disconnect();
209
+ if (resizeObserverRef.current) {
210
+ resizeObserverRef.current.disconnect();
211
+ }
205
212
  };
206
- // eslint-disable-next-line react-hooks/exhaustive-deps
207
213
  }, []);
208
214
  var contextValue = useMemo(function () { return ({
209
215
  hasHeader: hasHeader,
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: a8jqp */
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_8t6ig {
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_8t6ig {
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_8t6ig {
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_8t6ig {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_8t6ig {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_8t6ig,
47
- .base-modal__enter_8t6ig {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_8t6ig,
51
- .base-modal__enterActive_8t6ig {
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_8t6ig {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_8t6ig,
59
- .base-modal__exitDone_8t6ig {
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.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: a8jqp */
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_8t6ig {
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_8t6ig {
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_8t6ig {
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_8t6ig {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_8t6ig {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_8t6ig,
47
- .base-modal__enter_8t6ig {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_8t6ig,
51
- .base-modal__enterActive_8t6ig {
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_8t6ig {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_8t6ig,
59
- .base-modal__exitDone_8t6ig {
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/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 as ResizeObserver$1 } from '@juggle/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_8t6ig","wrapper":"base-modal__wrapper_8t6ig","content":"base-modal__content_8t6ig","hidden":"base-modal__hidden_8t6ig","backdrop":"base-modal__backdrop_8t6ig","appear":"base-modal__appear_8t6ig","enter":"base-modal__enter_8t6ig","appearActive":"base-modal__appearActive_8t6ig","enterActive":"base-modal__enterActive_8t6ig","exit":"base-modal__exit_8t6ig","exitActive":"base-modal__exitActive_8t6ig","exitDone":"base-modal__exitDone_8t6ig"};
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 */
@@ -27,7 +27,6 @@ const BaseModalContext = React.createContext({
27
27
  setHasFooter: () => null,
28
28
  onClose: () => null,
29
29
  });
30
- const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
31
30
  const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, keepMounted = false, className, contentClassName, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, }, ref) => {
32
31
  const [exited, setExited] = useState(!open);
33
32
  const [hasScroll, setHasScroll] = useState(false);
@@ -42,6 +41,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
42
41
  const contentNodeRef = useRef(null);
43
42
  const restoreContainerStylesRef = useRef(null);
44
43
  const mouseDownTarget = useRef();
44
+ const resizeObserverRef = useRef();
45
45
  const checkToHasScrollBar = () => {
46
46
  if (scrollableNodeRef.current) {
47
47
  const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -53,23 +53,26 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
53
53
  const getContainer = useCallback(() => {
54
54
  return (container ? container() : document.body);
55
55
  }, [container]);
56
- const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
57
56
  const addResizeHandle = useCallback(() => {
58
- if (scrollableNodeRef.current)
59
- resizeObserver.observe(scrollableNodeRef.current);
60
- if (contentNodeRef.current)
61
- resizeObserver.observe(contentNodeRef.current);
62
- }, [resizeObserver]);
63
- const removeResizeHandle = useCallback(() => {
64
- resizeObserver.disconnect();
65
- }, [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(), []);
66
67
  const contentRef = useCallback((node) => {
67
68
  if (node !== null) {
68
69
  contentNodeRef.current = node;
69
- resizeObserver.observe(node);
70
+ if (resizeObserverRef.current) {
71
+ resizeObserverRef.current.observe(node);
72
+ }
70
73
  checkToHasScrollBar();
71
74
  }
72
- }, [resizeObserver]);
75
+ }, []);
73
76
  const handleScroll = useCallback(() => {
74
77
  if (!scrollableNodeRef.current || !componentNodeRef.current)
75
78
  return;
@@ -170,13 +173,16 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
170
173
  setExited(false);
171
174
  }, [open]);
172
175
  useEffect(() => {
176
+ const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
177
+ resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
173
178
  return () => {
174
179
  if (restoreContainerStylesRef.current) {
175
180
  restoreContainerStylesRef.current();
176
181
  }
177
- resizeObserver.disconnect();
182
+ if (resizeObserverRef.current) {
183
+ resizeObserverRef.current.disconnect();
184
+ }
178
185
  };
179
- // eslint-disable-next-line react-hooks/exhaustive-deps
180
186
  }, []);
181
187
  const contextValue = useMemo(() => ({
182
188
  hasHeader,
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: a8jqp */
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_8t6ig {
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_8t6ig {
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_8t6ig {
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_8t6ig {
40
+ .base-modal__hidden_12xfo {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_8t6ig {
43
+ .base-modal__backdrop_12xfo {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_8t6ig,
47
- .base-modal__enter_8t6ig {
46
+ .base-modal__appear_12xfo,
47
+ .base-modal__enter_12xfo {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_8t6ig,
51
- .base-modal__enterActive_8t6ig {
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_8t6ig {
55
+ .base-modal__exit_12xfo {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_8t6ig,
59
- .base-modal__exitDone_8t6ig {
58
+ .base-modal__exitActive_12xfo,
59
+ .base-modal__exitDone_12xfo {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "4.1.2",
3
+ "version": "4.1.3",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -31,5 +31,5 @@
31
31
  "peerDependencies": {
32
32
  "react": "^16.9.0 || ^17.0.1"
33
33
  },
34
- "gitHead": "a1e54f5b2894447f4a6c80347706c27f855d5710"
34
+ "gitHead": "62c863f937c2b78ab35b8ca55863b11a0ebdd631"
35
35
  }