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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.4](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.1.3...@alfalab/core-components-base-modal@4.1.4) (2022-07-14)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **base-modal:** fix overflow hidden bug ([#128](https://github.com/core-ds/core-components/issues/128)) ([eb953b9](https://github.com/core-ds/core-components/commit/eb953b9866dae8c28bf8265d6884cdf1544ae63c))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [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
18
 
8
19
 
File without changes
@@ -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_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"};
51
+ var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
52
52
  require('./index.css')
53
53
 
54
54
  var BaseModalContext = React__default['default'].createContext({
@@ -66,7 +66,7 @@ var BaseModalContext = React__default['default'].createContext({
66
66
  });
67
67
  var BaseModal = React.forwardRef(function (_a, ref) {
68
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;
69
- var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
69
+ var _o = React.useState(null), exited = _o[0], setExited = _o[1];
70
70
  var _p = React.useState(false), hasScroll = _p[0], setHasScroll = _p[1];
71
71
  var _q = React.useState(false), hasHeader = _q[0], setHasHeader = _q[1];
72
72
  var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
@@ -87,7 +87,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
87
87
  setHasScroll(scrollExists);
88
88
  }
89
89
  };
90
- var shouldRender = keepMounted || open || !exited;
90
+ var isExited = exited || exited === null;
91
+ var shouldRender = keepMounted || open || !isExited;
91
92
  var getContainer = React.useCallback(function () {
92
93
  return (container ? container() : document.body);
93
94
  }, [container]);
@@ -199,17 +200,17 @@ var BaseModal = React.forwardRef(function (_a, ref) {
199
200
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
200
201
  React.useEffect(function () {
201
202
  if (open) {
202
- utils.handleContainer(getContainer());
203
- restoreContainerStylesRef.current = function () {
204
- restoreContainerStylesRef.current = null;
205
- utils.restoreContainerStyles(getContainer());
206
- };
203
+ if (isExited) {
204
+ var el_1 = getContainer();
205
+ utils.handleContainer(el_1);
206
+ restoreContainerStylesRef.current = function () {
207
+ restoreContainerStylesRef.current = null;
208
+ utils.restoreContainerStyles(el_1);
209
+ };
210
+ setExited(false);
211
+ }
207
212
  }
208
- }, [getContainer, open]);
209
- React.useEffect(function () {
210
- if (open)
211
- setExited(false);
212
- }, [open]);
213
+ }, [getContainer, open, isExited]);
213
214
  React.useEffect(function () {
214
215
  var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
215
216
  resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
@@ -256,7 +257,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
256
257
  zIndex: computedZIndex,
257
258
  } }))),
258
259
  React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles.wrapper, wrapperClassName, (_a = {},
259
- _a[styles.hidden] = !open && exited,
260
+ _a[styles.hidden] = !open && isExited,
260
261
  _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
261
262
  zIndex: computedZIndex,
262
263
  } },
File without changes
@@ -65,7 +65,7 @@ var BaseModalContext = React__default['default'].createContext({
65
65
  });
66
66
  var BaseModal = React.forwardRef(function (_a, ref) {
67
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;
68
- var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
68
+ var _o = React.useState(null), exited = _o[0], setExited = _o[1];
69
69
  var _p = React.useState(false), hasScroll = _p[0], setHasScroll = _p[1];
70
70
  var _q = React.useState(false), hasHeader = _q[0], setHasHeader = _q[1];
71
71
  var _r = React.useState(false), hasFooter = _r[0], setHasFooter = _r[1];
@@ -86,7 +86,8 @@ var BaseModal = React.forwardRef(function (_a, ref) {
86
86
  setHasScroll(scrollExists);
87
87
  }
88
88
  };
89
- var shouldRender = keepMounted || open || !exited;
89
+ var isExited = exited || exited === null;
90
+ var shouldRender = keepMounted || open || !isExited;
90
91
  var getContainer = React.useCallback(function () {
91
92
  return (container ? container() : document.body);
92
93
  }, [container]);
@@ -198,17 +199,17 @@ var BaseModal = React.forwardRef(function (_a, ref) {
198
199
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
199
200
  React.useEffect(function () {
200
201
  if (open) {
201
- utils.handleContainer(getContainer());
202
- restoreContainerStylesRef.current = function () {
203
- restoreContainerStylesRef.current = null;
204
- utils.restoreContainerStyles(getContainer());
205
- };
202
+ if (isExited) {
203
+ var el_1 = getContainer();
204
+ utils.handleContainer(el_1);
205
+ restoreContainerStylesRef.current = function () {
206
+ restoreContainerStylesRef.current = null;
207
+ utils.restoreContainerStyles(el_1);
208
+ };
209
+ setExited(false);
210
+ }
206
211
  }
207
- }, [getContainer, open]);
208
- React.useEffect(function () {
209
- if (open)
210
- setExited(false);
211
- }, [open]);
212
+ }, [getContainer, open, isExited]);
212
213
  React.useEffect(function () {
213
214
  var ResizeObserver = window.ResizeObserver || resizeObserver.ResizeObserver;
214
215
  resizeObserverRef.current = new ResizeObserver(checkToHasScrollBar);
@@ -255,7 +256,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
255
256
  zIndex: computedZIndex,
256
257
  } }))),
257
258
  React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_a = {},
258
- _a[styles__default['default'].hidden] = !open && exited,
259
+ _a[styles__default['default'].hidden] = !open && isExited,
259
260
  _a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
260
261
  zIndex: computedZIndex,
261
262
  } },
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
@@ -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_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"};
40
+ var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
41
41
  require('./index.css')
42
42
 
43
43
  var BaseModalContext = React.createContext({
@@ -55,7 +55,7 @@ var BaseModalContext = React.createContext({
55
55
  });
56
56
  var BaseModal = forwardRef(function (_a, ref) {
57
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;
58
- var _o = useState(!open), exited = _o[0], setExited = _o[1];
58
+ var _o = useState(null), exited = _o[0], setExited = _o[1];
59
59
  var _p = useState(false), hasScroll = _p[0], setHasScroll = _p[1];
60
60
  var _q = useState(false), hasHeader = _q[0], setHasHeader = _q[1];
61
61
  var _r = useState(false), hasFooter = _r[0], setHasFooter = _r[1];
@@ -76,7 +76,8 @@ var BaseModal = forwardRef(function (_a, ref) {
76
76
  setHasScroll(scrollExists);
77
77
  }
78
78
  };
79
- var shouldRender = keepMounted || open || !exited;
79
+ var isExited = exited || exited === null;
80
+ var shouldRender = keepMounted || open || !isExited;
80
81
  var getContainer = useCallback(function () {
81
82
  return (container ? container() : document.body);
82
83
  }, [container]);
@@ -188,17 +189,17 @@ var BaseModal = forwardRef(function (_a, ref) {
188
189
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
189
190
  useEffect(function () {
190
191
  if (open) {
191
- handleContainer(getContainer());
192
- restoreContainerStylesRef.current = function () {
193
- restoreContainerStylesRef.current = null;
194
- restoreContainerStyles(getContainer());
195
- };
192
+ if (isExited) {
193
+ var el_1 = getContainer();
194
+ handleContainer(el_1);
195
+ restoreContainerStylesRef.current = function () {
196
+ restoreContainerStylesRef.current = null;
197
+ restoreContainerStyles(el_1);
198
+ };
199
+ setExited(false);
200
+ }
196
201
  }
197
- }, [getContainer, open]);
198
- useEffect(function () {
199
- if (open)
200
- setExited(false);
201
- }, [open]);
202
+ }, [getContainer, open, isExited]);
202
203
  useEffect(function () {
203
204
  var ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
204
205
  resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
@@ -245,7 +246,7 @@ var BaseModal = forwardRef(function (_a, ref) {
245
246
  zIndex: computedZIndex,
246
247
  } }))),
247
248
  React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
248
- _a[styles.hidden] = !open && exited,
249
+ _a[styles.hidden] = !open && isExited,
249
250
  _a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
250
251
  zIndex: computedZIndex,
251
252
  } },
@@ -1,4 +1,4 @@
1
- /* hash: 12lf3 */
1
+ /* hash: 1i6t2 */
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_12xfo {
13
+ .base-modal__component_1bawz {
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_12xfo {
20
+ .base-modal__wrapper_1bawz {
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_12xfo {
33
+ .base-modal__content_1bawz {
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_12xfo {
40
+ .base-modal__hidden_1bawz {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_12xfo {
43
+ .base-modal__backdrop_1bawz {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_12xfo,
47
- .base-modal__enter_12xfo {
46
+ .base-modal__appear_1bawz,
47
+ .base-modal__enter_1bawz {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_12xfo,
51
- .base-modal__enterActive_12xfo {
50
+ .base-modal__appearActive_1bawz,
51
+ .base-modal__enterActive_1bawz {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_12xfo {
55
+ .base-modal__exit_1bawz {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_12xfo,
59
- .base-modal__exitDone_12xfo {
58
+ .base-modal__exitActive_1bawz,
59
+ .base-modal__exitDone_1bawz {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
File without changes
File without changes
File without changes
File without changes
@@ -1,4 +1,4 @@
1
- /* hash: 12lf3 */
1
+ /* hash: 1i6t2 */
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_12xfo {
13
+ .base-modal__component_1bawz {
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_12xfo {
20
+ .base-modal__wrapper_1bawz {
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_12xfo {
33
+ .base-modal__content_1bawz {
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_12xfo {
40
+ .base-modal__hidden_1bawz {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_12xfo {
43
+ .base-modal__backdrop_1bawz {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_12xfo,
47
- .base-modal__enter_12xfo {
46
+ .base-modal__appear_1bawz,
47
+ .base-modal__enter_1bawz {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_12xfo,
51
- .base-modal__enterActive_12xfo {
50
+ .base-modal__appearActive_1bawz,
51
+ .base-modal__enterActive_1bawz {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_12xfo {
55
+ .base-modal__exit_1bawz {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_12xfo,
59
- .base-modal__exitDone_12xfo {
58
+ .base-modal__exitActive_1bawz,
59
+ .base-modal__exitDone_1bawz {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
File without changes
File without changes
File without changes
@@ -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_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"};
13
+ var styles = {"component":"base-modal__component_1bawz","wrapper":"base-modal__wrapper_1bawz","content":"base-modal__content_1bawz","hidden":"base-modal__hidden_1bawz","backdrop":"base-modal__backdrop_1bawz","appear":"base-modal__appear_1bawz","enter":"base-modal__enter_1bawz","appearActive":"base-modal__appearActive_1bawz","enterActive":"base-modal__enterActive_1bawz","exit":"base-modal__exit_1bawz","exitActive":"base-modal__exitActive_1bawz","exitDone":"base-modal__exitDone_1bawz"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -28,7 +28,7 @@ const BaseModalContext = React.createContext({
28
28
  onClose: () => null,
29
29
  });
30
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) => {
31
- const [exited, setExited] = useState(!open);
31
+ const [exited, setExited] = useState(null);
32
32
  const [hasScroll, setHasScroll] = useState(false);
33
33
  const [hasHeader, setHasHeader] = useState(false);
34
34
  const [hasFooter, setHasFooter] = useState(false);
@@ -49,7 +49,8 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
49
49
  setHasScroll(scrollExists);
50
50
  }
51
51
  };
52
- const shouldRender = keepMounted || open || !exited;
52
+ const isExited = exited || exited === null;
53
+ const shouldRender = keepMounted || open || !isExited;
53
54
  const getContainer = useCallback(() => {
54
55
  return (container ? container() : document.body);
55
56
  }, [container]);
@@ -161,17 +162,17 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
161
162
  }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
162
163
  useEffect(() => {
163
164
  if (open) {
164
- handleContainer(getContainer());
165
- restoreContainerStylesRef.current = () => {
166
- restoreContainerStylesRef.current = null;
167
- restoreContainerStyles(getContainer());
168
- };
165
+ if (isExited) {
166
+ const el = getContainer();
167
+ handleContainer(el);
168
+ restoreContainerStylesRef.current = () => {
169
+ restoreContainerStylesRef.current = null;
170
+ restoreContainerStyles(el);
171
+ };
172
+ setExited(false);
173
+ }
169
174
  }
170
- }, [getContainer, open]);
171
- useEffect(() => {
172
- if (open)
173
- setExited(false);
174
- }, [open]);
175
+ }, [getContainer, open, isExited]);
175
176
  useEffect(() => {
176
177
  const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
177
178
  resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
@@ -216,7 +217,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
216
217
  zIndex: computedZIndex,
217
218
  } }))),
218
219
  React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
219
- [styles.hidden]: !open && exited,
220
+ [styles.hidden]: !open && isExited,
220
221
  }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
221
222
  zIndex: computedZIndex,
222
223
  } },
@@ -1,4 +1,4 @@
1
- /* hash: 12lf3 */
1
+ /* hash: 1i6t2 */
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_12xfo {
13
+ .base-modal__component_1bawz {
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_12xfo {
20
+ .base-modal__wrapper_1bawz {
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_12xfo {
33
+ .base-modal__content_1bawz {
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_12xfo {
40
+ .base-modal__hidden_1bawz {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_12xfo {
43
+ .base-modal__backdrop_1bawz {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_12xfo,
47
- .base-modal__enter_12xfo {
46
+ .base-modal__appear_1bawz,
47
+ .base-modal__enter_1bawz {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_12xfo,
51
- .base-modal__enterActive_12xfo {
50
+ .base-modal__appearActive_1bawz,
51
+ .base-modal__enterActive_1bawz {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_12xfo {
55
+ .base-modal__exit_1bawz {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_12xfo,
59
- .base-modal__exitDone_12xfo {
58
+ .base-modal__exitActive_1bawz,
59
+ .base-modal__exitDone_1bawz {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
File without changes
File without changes
File without changes
File without changes
package/package.json CHANGED
@@ -1,24 +1,22 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "4.1.3",
3
+ "version": "4.1.4",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
- "main": "dist/index.js",
8
- "files": [
9
- "dist"
10
- ],
7
+ "main": "index.js",
11
8
  "scripts": {
12
- "postinstall": "node ./dist/send-stats.js > /dev/null 2>&1 || exit 0"
9
+ "postinstall": "node ./send-stats.js > /dev/null 2>&1 || exit 0"
13
10
  },
14
11
  "publishConfig": {
15
- "access": "public"
12
+ "access": "public",
13
+ "directory": "dist"
16
14
  },
17
15
  "dependencies": {
18
- "@alfalab/core-components-backdrop": "^2.1.0",
19
- "@alfalab/core-components-global-store": "^1.1.1",
20
- "@alfalab/core-components-portal": "^2.0.3",
21
- "@alfalab/core-components-stack": "^3.0.3",
16
+ "@alfalab/core-components-backdrop": "^2.1.1",
17
+ "@alfalab/core-components-global-store": "^1.1.2",
18
+ "@alfalab/core-components-portal": "^2.0.4",
19
+ "@alfalab/core-components-stack": "^3.0.4",
22
20
  "@juggle/resize-observer": "^3.3.1",
23
21
  "classnames": "^2.2.6",
24
22
  "react-focus-lock": "^2.5.0",
@@ -30,6 +28,5 @@
30
28
  },
31
29
  "peerDependencies": {
32
30
  "react": "^16.9.0 || ^17.0.1"
33
- },
34
- "gitHead": "62c863f937c2b78ab35b8ca55863b11a0ebdd631"
31
+ }
35
32
  }
File without changes
File without changes
File without changes