@alfalab/core-components-base-modal 4.1.1 → 4.1.2

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.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
+
8
+
9
+ ### Performance Improvements
10
+
11
+ * 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))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [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)
7
18
 
8
19
 
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_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
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"};
52
52
  require('./index.css')
53
53
 
54
54
  var BaseModalContext = React__default['default'].createContext({
@@ -64,6 +64,7 @@ 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;
67
68
  var BaseModal = React.forwardRef(function (_a, ref) {
68
69
  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
70
  var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -90,23 +91,23 @@ var BaseModal = React.forwardRef(function (_a, ref) {
90
91
  var getContainer = React.useCallback(function () {
91
92
  return (container ? container() : document.body);
92
93
  }, [container]);
93
- var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
94
+ var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
94
95
  var addResizeHandle = React.useCallback(function () {
95
96
  if (scrollableNodeRef.current)
96
- resizeObserver$1.observe(scrollableNodeRef.current);
97
+ resizeObserver.observe(scrollableNodeRef.current);
97
98
  if (contentNodeRef.current)
98
- resizeObserver$1.observe(contentNodeRef.current);
99
- }, [resizeObserver$1]);
99
+ resizeObserver.observe(contentNodeRef.current);
100
+ }, [resizeObserver]);
100
101
  var removeResizeHandle = React.useCallback(function () {
101
- resizeObserver$1.disconnect();
102
- }, [resizeObserver$1]);
102
+ resizeObserver.disconnect();
103
+ }, [resizeObserver]);
103
104
  var contentRef = React.useCallback(function (node) {
104
105
  if (node !== null) {
105
106
  contentNodeRef.current = node;
106
- resizeObserver$1.observe(node);
107
+ resizeObserver.observe(node);
107
108
  checkToHasScrollBar();
108
109
  }
109
- }, [resizeObserver$1]);
110
+ }, [resizeObserver]);
110
111
  var handleScroll = React.useCallback(function () {
111
112
  if (!scrollableNodeRef.current || !componentNodeRef.current)
112
113
  return;
@@ -211,7 +212,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
211
212
  if (restoreContainerStylesRef.current) {
212
213
  restoreContainerStylesRef.current();
213
214
  }
214
- resizeObserver$1.disconnect();
215
+ resizeObserver.disconnect();
215
216
  };
216
217
  // eslint-disable-next-line react-hooks/exhaustive-deps
217
218
  }, []);
@@ -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');
@@ -63,6 +63,7 @@ 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;
66
67
  var BaseModal = React.forwardRef(function (_a, ref) {
67
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;
68
69
  var _o = React.useState(!open), exited = _o[0], setExited = _o[1];
@@ -89,23 +90,23 @@ var BaseModal = React.forwardRef(function (_a, ref) {
89
90
  var getContainer = React.useCallback(function () {
90
91
  return (container ? container() : document.body);
91
92
  }, [container]);
92
- var resizeObserver$1 = React.useMemo(function () { return new resizeObserver.ResizeObserver(checkToHasScrollBar); }, []);
93
+ var resizeObserver = React.useMemo(function () { return new ResizeObserver(checkToHasScrollBar); }, []);
93
94
  var addResizeHandle = React.useCallback(function () {
94
95
  if (scrollableNodeRef.current)
95
- resizeObserver$1.observe(scrollableNodeRef.current);
96
+ resizeObserver.observe(scrollableNodeRef.current);
96
97
  if (contentNodeRef.current)
97
- resizeObserver$1.observe(contentNodeRef.current);
98
- }, [resizeObserver$1]);
98
+ resizeObserver.observe(contentNodeRef.current);
99
+ }, [resizeObserver]);
99
100
  var removeResizeHandle = React.useCallback(function () {
100
- resizeObserver$1.disconnect();
101
- }, [resizeObserver$1]);
101
+ resizeObserver.disconnect();
102
+ }, [resizeObserver]);
102
103
  var contentRef = React.useCallback(function (node) {
103
104
  if (node !== null) {
104
105
  contentNodeRef.current = node;
105
- resizeObserver$1.observe(node);
106
+ resizeObserver.observe(node);
106
107
  checkToHasScrollBar();
107
108
  }
108
- }, [resizeObserver$1]);
109
+ }, [resizeObserver]);
109
110
  var handleScroll = React.useCallback(function () {
110
111
  if (!scrollableNodeRef.current || !componentNodeRef.current)
111
112
  return;
@@ -210,7 +211,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
210
211
  if (restoreContainerStylesRef.current) {
211
212
  restoreContainerStylesRef.current();
212
213
  }
213
- resizeObserver$1.disconnect();
214
+ resizeObserver.disconnect();
214
215
  };
215
216
  // eslint-disable-next-line react-hooks/exhaustive-deps
216
217
  }, []);
@@ -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');
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } 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 as ResizeObserver$1 } 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_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
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"};
41
41
  require('./index.css')
42
42
 
43
43
  var BaseModalContext = React.createContext({
@@ -53,6 +53,7 @@ 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;
56
57
  var BaseModal = forwardRef(function (_a, ref) {
57
58
  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
59
  var _o = useState(!open), exited = _o[0], setExited = _o[1];
@@ -1,4 +1,4 @@
1
- /* hash: 5o7wx */
1
+ /* hash: a8jqp */
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_15icx {
13
+ .base-modal__component_8t6ig {
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_15icx {
20
+ .base-modal__wrapper_8t6ig {
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_15icx {
33
+ .base-modal__content_8t6ig {
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_15icx {
40
+ .base-modal__hidden_8t6ig {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_15icx {
43
+ .base-modal__backdrop_8t6ig {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_15icx,
47
- .base-modal__enter_15icx {
46
+ .base-modal__appear_8t6ig,
47
+ .base-modal__enter_8t6ig {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_15icx,
51
- .base-modal__enterActive_15icx {
50
+ .base-modal__appearActive_8t6ig,
51
+ .base-modal__enterActive_8t6ig {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_15icx {
55
+ .base-modal__exit_8t6ig {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_15icx,
59
- .base-modal__exitDone_15icx {
58
+ .base-modal__exitActive_8t6ig,
59
+ .base-modal__exitDone_8t6ig {
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: 5o7wx */
1
+ /* hash: a8jqp */
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_15icx {
13
+ .base-modal__component_8t6ig {
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_15icx {
20
+ .base-modal__wrapper_8t6ig {
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_15icx {
33
+ .base-modal__content_8t6ig {
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_15icx {
40
+ .base-modal__hidden_8t6ig {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_15icx {
43
+ .base-modal__backdrop_8t6ig {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_15icx,
47
- .base-modal__enter_15icx {
46
+ .base-modal__appear_8t6ig,
47
+ .base-modal__enter_8t6ig {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_15icx,
51
- .base-modal__enterActive_15icx {
50
+ .base-modal__appearActive_8t6ig,
51
+ .base-modal__enterActive_8t6ig {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_15icx {
55
+ .base-modal__exit_8t6ig {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_15icx,
59
- .base-modal__exitDone_15icx {
58
+ .base-modal__exitActive_8t6ig,
59
+ .base-modal__exitDone_8t6ig {
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');
@@ -1,7 +1,7 @@
1
1
  import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } 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 as ResizeObserver$1 } 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_15icx","wrapper":"base-modal__wrapper_15icx","content":"base-modal__content_15icx","hidden":"base-modal__hidden_15icx","backdrop":"base-modal__backdrop_15icx","appear":"base-modal__appear_15icx","enter":"base-modal__enter_15icx","appearActive":"base-modal__appearActive_15icx","enterActive":"base-modal__enterActive_15icx","exit":"base-modal__exit_15icx","exitActive":"base-modal__exitActive_15icx","exitDone":"base-modal__exitDone_15icx"};
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"};
14
14
  require('./index.css')
15
15
 
16
16
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -27,6 +27,7 @@ const BaseModalContext = React.createContext({
27
27
  setHasFooter: () => null,
28
28
  onClose: () => null,
29
29
  });
30
+ const ResizeObserver = window.ResizeObserver || ResizeObserver$1;
30
31
  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
32
  const [exited, setExited] = useState(!open);
32
33
  const [hasScroll, setHasScroll] = useState(false);
@@ -1,4 +1,4 @@
1
- /* hash: 5o7wx */
1
+ /* hash: a8jqp */
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_15icx {
13
+ .base-modal__component_8t6ig {
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_15icx {
20
+ .base-modal__wrapper_8t6ig {
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_15icx {
33
+ .base-modal__content_8t6ig {
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_15icx {
40
+ .base-modal__hidden_8t6ig {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_15icx {
43
+ .base-modal__backdrop_8t6ig {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_15icx,
47
- .base-modal__enter_15icx {
46
+ .base-modal__appear_8t6ig,
47
+ .base-modal__enter_8t6ig {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_15icx,
51
- .base-modal__enterActive_15icx {
50
+ .base-modal__appearActive_8t6ig,
51
+ .base-modal__enterActive_8t6ig {
52
52
  opacity: 1;
53
53
  transition: opacity 200ms ease-in;
54
54
  }
55
- .base-modal__exit_15icx {
55
+ .base-modal__exit_8t6ig {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_15icx,
59
- .base-modal__exitDone_15icx {
58
+ .base-modal__exitActive_8t6ig,
59
+ .base-modal__exitDone_8t6ig {
60
60
  opacity: 0;
61
61
  transition: opacity 200ms ease-out;
62
62
  }
@@ -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.1",
3
+ "version": "4.1.2",
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": "7faa1479f68e818fde406010fe07b8ee126deffb"
34
+ "gitHead": "a1e54f5b2894447f4a6c80347706c27f855d5710"
35
35
  }