@alfalab/core-components-base-modal 5.7.10 → 5.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Component.js +1 -1
- package/esm/Component.js +1 -1
- package/esm/index.css +13 -13
- package/index.css +13 -13
- package/modern/Component.js +1 -1
- package/modern/index.css +13 -13
- package/moderncssm/Component.d.ts +159 -0
- package/moderncssm/Component.js +264 -0
- package/moderncssm/helpers/lockScroll.d.ts +4 -0
- package/moderncssm/helpers/lockScroll.js +18 -0
- package/moderncssm/index.d.ts +3 -0
- package/moderncssm/index.js +3 -0
- package/moderncssm/index.module.css +71 -0
- package/moderncssm/matches-polyfill.d.ts +1 -0
- package/moderncssm/matches-polyfill.js +18 -0
- package/moderncssm/utils.d.ts +6 -0
- package/moderncssm/utils.js +87 -0
- package/package.json +4 -4
- package/src/index.module.css +1 -1
package/Component.js
CHANGED
|
@@ -25,7 +25,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
|
|
|
25
25
|
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
26
26
|
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
27
27
|
|
|
28
|
-
var styles = {"component":"base-
|
|
28
|
+
var styles = {"component":"base-modal__component_1084l","wrapper":"base-modal__wrapper_1084l","content":"base-modal__content_1084l","hidden":"base-modal__hidden_1084l","backdrop":"base-modal__backdrop_1084l","appear":"base-modal__appear_1084l","enter":"base-modal__enter_1084l","appearActive":"base-modal__appearActive_1084l","enterActive":"base-modal__enterActive_1084l","exit":"base-modal__exit_1084l","exitActive":"base-modal__exitActive_1084l","exitDone":"base-modal__exitDone_1084l"};
|
|
29
29
|
require('./index.css')
|
|
30
30
|
|
|
31
31
|
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
package/esm/Component.js
CHANGED
|
@@ -14,7 +14,7 @@ import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
|
|
|
14
14
|
import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
|
|
15
15
|
import './matches-polyfill.js';
|
|
16
16
|
|
|
17
|
-
var styles = {"component":"base-
|
|
17
|
+
var styles = {"component":"base-modal__component_1084l","wrapper":"base-modal__wrapper_1084l","content":"base-modal__content_1084l","hidden":"base-modal__hidden_1084l","backdrop":"base-modal__backdrop_1084l","appear":"base-modal__appear_1084l","enter":"base-modal__enter_1084l","appearActive":"base-modal__appearActive_1084l","enterActive":"base-modal__enterActive_1084l","exit":"base-modal__exit_1084l","exitActive":"base-modal__exitActive_1084l","exitDone":"base-modal__exitDone_1084l"};
|
|
18
18
|
require('./index.css')
|
|
19
19
|
|
|
20
20
|
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1tee4 */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
margin-top: calc(var(--window-inner-scrollY) * -1);
|
|
26
26
|
position: fixed;
|
|
27
27
|
overflow: hidden;
|
|
28
|
-
} .base-
|
|
28
|
+
} .base-modal__component_1084l {
|
|
29
29
|
position: relative;
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
background: var(--color-light-modal-bg-primary);
|
|
32
32
|
margin: auto;
|
|
33
33
|
flex-shrink: 0;
|
|
34
|
-
} .base-
|
|
34
|
+
} .base-modal__wrapper_1084l {
|
|
35
35
|
position: fixed;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
@@ -44,27 +44,27 @@
|
|
|
44
44
|
align-items: center;
|
|
45
45
|
outline: 0;
|
|
46
46
|
overscroll-behavior: none;
|
|
47
|
-
} .base-
|
|
47
|
+
} .base-modal__content_1084l {
|
|
48
48
|
width: 100%;
|
|
49
49
|
height: 100%;
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
|
-
} .base-
|
|
53
|
+
} .base-modal__hidden_1084l {
|
|
54
54
|
display: none;
|
|
55
|
-
} .base-
|
|
55
|
+
} .base-modal__backdrop_1084l {
|
|
56
56
|
z-index: 0;
|
|
57
|
-
} .base-
|
|
58
|
-
.base-
|
|
57
|
+
} .base-modal__appear_1084l,
|
|
58
|
+
.base-modal__enter_1084l {
|
|
59
59
|
opacity: 0;
|
|
60
|
-
} .base-
|
|
61
|
-
.base-
|
|
60
|
+
} .base-modal__appearActive_1084l,
|
|
61
|
+
.base-modal__enterActive_1084l {
|
|
62
62
|
opacity: 1;
|
|
63
63
|
transition: opacity 200ms ease-in;
|
|
64
|
-
} .base-
|
|
64
|
+
} .base-modal__exit_1084l {
|
|
65
65
|
opacity: 1;
|
|
66
|
-
} .base-
|
|
67
|
-
.base-
|
|
66
|
+
} .base-modal__exitActive_1084l,
|
|
67
|
+
.base-modal__exitDone_1084l {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transition: opacity 200ms ease-out;
|
|
70
70
|
}
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1tee4 */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
margin-top: calc(var(--window-inner-scrollY) * -1);
|
|
26
26
|
position: fixed;
|
|
27
27
|
overflow: hidden;
|
|
28
|
-
} .base-
|
|
28
|
+
} .base-modal__component_1084l {
|
|
29
29
|
position: relative;
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
background: var(--color-light-modal-bg-primary);
|
|
32
32
|
margin: auto;
|
|
33
33
|
flex-shrink: 0;
|
|
34
|
-
} .base-
|
|
34
|
+
} .base-modal__wrapper_1084l {
|
|
35
35
|
position: fixed;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
@@ -44,27 +44,27 @@
|
|
|
44
44
|
align-items: center;
|
|
45
45
|
outline: 0;
|
|
46
46
|
overscroll-behavior: none;
|
|
47
|
-
} .base-
|
|
47
|
+
} .base-modal__content_1084l {
|
|
48
48
|
width: 100%;
|
|
49
49
|
height: 100%;
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
|
-
} .base-
|
|
53
|
+
} .base-modal__hidden_1084l {
|
|
54
54
|
display: none;
|
|
55
|
-
} .base-
|
|
55
|
+
} .base-modal__backdrop_1084l {
|
|
56
56
|
z-index: 0;
|
|
57
|
-
} .base-
|
|
58
|
-
.base-
|
|
57
|
+
} .base-modal__appear_1084l,
|
|
58
|
+
.base-modal__enter_1084l {
|
|
59
59
|
opacity: 0;
|
|
60
|
-
} .base-
|
|
61
|
-
.base-
|
|
60
|
+
} .base-modal__appearActive_1084l,
|
|
61
|
+
.base-modal__enterActive_1084l {
|
|
62
62
|
opacity: 1;
|
|
63
63
|
transition: opacity 200ms ease-in;
|
|
64
|
-
} .base-
|
|
64
|
+
} .base-modal__exit_1084l {
|
|
65
65
|
opacity: 1;
|
|
66
|
-
} .base-
|
|
67
|
-
.base-
|
|
66
|
+
} .base-modal__exitActive_1084l,
|
|
67
|
+
.base-modal__exitDone_1084l {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transition: opacity 200ms ease-out;
|
|
70
70
|
}
|
package/modern/Component.js
CHANGED
|
@@ -13,7 +13,7 @@ import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
|
|
|
13
13
|
import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
|
|
14
14
|
import './matches-polyfill.js';
|
|
15
15
|
|
|
16
|
-
const styles = {"component":"base-
|
|
16
|
+
const styles = {"component":"base-modal__component_1084l","wrapper":"base-modal__wrapper_1084l","content":"base-modal__content_1084l","hidden":"base-modal__hidden_1084l","backdrop":"base-modal__backdrop_1084l","appear":"base-modal__appear_1084l","enter":"base-modal__enter_1084l","appearActive":"base-modal__appearActive_1084l","enterActive":"base-modal__enterActive_1084l","exit":"base-modal__exit_1084l","exitActive":"base-modal__exitActive_1084l","exitDone":"base-modal__exitDone_1084l"};
|
|
17
17
|
require('./index.css')
|
|
18
18
|
|
|
19
19
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1tee4 */
|
|
2
2
|
:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
3
3
|
} /* deprecated */ :root {
|
|
4
4
|
--color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
margin-top: calc(var(--window-inner-scrollY) * -1);
|
|
26
26
|
position: fixed;
|
|
27
27
|
overflow: hidden;
|
|
28
|
-
} .base-
|
|
28
|
+
} .base-modal__component_1084l {
|
|
29
29
|
position: relative;
|
|
30
30
|
box-sizing: border-box;
|
|
31
31
|
background: var(--color-light-modal-bg-primary);
|
|
32
32
|
margin: auto;
|
|
33
33
|
flex-shrink: 0;
|
|
34
|
-
} .base-
|
|
34
|
+
} .base-modal__wrapper_1084l {
|
|
35
35
|
position: fixed;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
@@ -44,27 +44,27 @@
|
|
|
44
44
|
align-items: center;
|
|
45
45
|
outline: 0;
|
|
46
46
|
overscroll-behavior: none;
|
|
47
|
-
} .base-
|
|
47
|
+
} .base-modal__content_1084l {
|
|
48
48
|
width: 100%;
|
|
49
49
|
height: 100%;
|
|
50
50
|
display: flex;
|
|
51
51
|
flex-direction: column;
|
|
52
52
|
flex: 1;
|
|
53
|
-
} .base-
|
|
53
|
+
} .base-modal__hidden_1084l {
|
|
54
54
|
display: none;
|
|
55
|
-
} .base-
|
|
55
|
+
} .base-modal__backdrop_1084l {
|
|
56
56
|
z-index: 0;
|
|
57
|
-
} .base-
|
|
58
|
-
.base-
|
|
57
|
+
} .base-modal__appear_1084l,
|
|
58
|
+
.base-modal__enter_1084l {
|
|
59
59
|
opacity: 0;
|
|
60
|
-
} .base-
|
|
61
|
-
.base-
|
|
60
|
+
} .base-modal__appearActive_1084l,
|
|
61
|
+
.base-modal__enterActive_1084l {
|
|
62
62
|
opacity: 1;
|
|
63
63
|
transition: opacity 200ms ease-in;
|
|
64
|
-
} .base-
|
|
64
|
+
} .base-modal__exit_1084l {
|
|
65
65
|
opacity: 1;
|
|
66
|
-
} .base-
|
|
67
|
-
.base-
|
|
66
|
+
} .base-modal__exitActive_1084l,
|
|
67
|
+
.base-modal__exitDone_1084l {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transition: opacity 200ms ease-out;
|
|
70
70
|
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/// <reference types="react-transition-group" />
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
5
|
+
import { TransitionProps } from 'react-transition-group/Transition';
|
|
6
|
+
import { BackdropProps } from "@alfalab/core-components-backdrop";
|
|
7
|
+
import { PortalProps } from "@alfalab/core-components-portal";
|
|
8
|
+
type BaseModalProps = {
|
|
9
|
+
/**
|
|
10
|
+
* Контент
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Компонент бэкдропа
|
|
15
|
+
*/
|
|
16
|
+
Backdrop?: ComponentType<BackdropProps>;
|
|
17
|
+
/**
|
|
18
|
+
* Свойства для Бэкдропа
|
|
19
|
+
*/
|
|
20
|
+
backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
|
|
21
|
+
/**
|
|
22
|
+
* Нода, компонент или функция возвращающая их
|
|
23
|
+
*
|
|
24
|
+
* Контейнер к которому будут добавляться порталы
|
|
25
|
+
*/
|
|
26
|
+
container?: PortalProps['getPortalContainer'];
|
|
27
|
+
/**
|
|
28
|
+
* Отключает автоматический перевод фокуса на модалку при открытии
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
disableAutoFocus?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Отключает ловушку фокуса
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
disableFocusLock?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
|
|
39
|
+
* @default false
|
|
40
|
+
*/
|
|
41
|
+
disableRestoreFocus?: boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Отключает вызов `callback` при нажатии Escape
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
disableEscapeKeyDown?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Отключает вызов `callback` при клике на бэкдроп
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
disableBackdropClick?: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Отключает блокировку скролла при открытии модального окна
|
|
54
|
+
* @default false
|
|
55
|
+
*/
|
|
56
|
+
disableBlockingScroll?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Содержимое модалки всегда в DOM
|
|
59
|
+
* @default false
|
|
60
|
+
*/
|
|
61
|
+
keepMounted?: boolean;
|
|
62
|
+
/**
|
|
63
|
+
* Управление видимостью модалки
|
|
64
|
+
*/
|
|
65
|
+
open: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* Дополнительный класс
|
|
68
|
+
*/
|
|
69
|
+
className?: string;
|
|
70
|
+
/**
|
|
71
|
+
* Дополнительный класс
|
|
72
|
+
*/
|
|
73
|
+
contentClassName?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Дополнительные пропсы на dialog wrapper
|
|
76
|
+
*/
|
|
77
|
+
wrapperProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
78
|
+
/**
|
|
79
|
+
* Дополнительные пропсы на обертку контента
|
|
80
|
+
*/
|
|
81
|
+
contentProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
82
|
+
/**
|
|
83
|
+
* Дополнительные пропсы на компонентную обертку контента
|
|
84
|
+
*/
|
|
85
|
+
componentDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
86
|
+
/**
|
|
87
|
+
* Дополнительный класс для обертки (Modal)
|
|
88
|
+
*/
|
|
89
|
+
wrapperClassName?: string;
|
|
90
|
+
/**
|
|
91
|
+
* Обработчик скролла контента
|
|
92
|
+
*/
|
|
93
|
+
scrollHandler?: 'wrapper' | 'content' | MutableRefObject<HTMLDivElement | null>;
|
|
94
|
+
/**
|
|
95
|
+
* Пропсы для анимации (CSSTransition)
|
|
96
|
+
*/
|
|
97
|
+
transitionProps?: Partial<TransitionProps>;
|
|
98
|
+
/**
|
|
99
|
+
* Рендерить ли в контейнер через портал.
|
|
100
|
+
* @default true
|
|
101
|
+
*/
|
|
102
|
+
usePortal?: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Обработчик события нажатия на бэкдроп
|
|
105
|
+
*/
|
|
106
|
+
onBackdropClick?: (event: MouseEvent) => void;
|
|
107
|
+
/**
|
|
108
|
+
* Обработчик события нажатия на Escape
|
|
109
|
+
*
|
|
110
|
+
* Если `disableEscapeKeyDown` - false и модальное окно в фокусе
|
|
111
|
+
*/
|
|
112
|
+
onEscapeKeyDown?: (event: KeyboardEvent) => void;
|
|
113
|
+
/**
|
|
114
|
+
* Обработчик закрытия
|
|
115
|
+
*/
|
|
116
|
+
onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: 'backdropClick' | 'escapeKeyDown' | 'closerClick') => void;
|
|
117
|
+
/**
|
|
118
|
+
* Обработчик события onEntered компонента Transition
|
|
119
|
+
*/
|
|
120
|
+
onMount?: () => void;
|
|
121
|
+
/**
|
|
122
|
+
* Обработчик события onExited компонента Transition
|
|
123
|
+
*/
|
|
124
|
+
onUnmount?: () => void;
|
|
125
|
+
/**
|
|
126
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
127
|
+
*/
|
|
128
|
+
dataTestId?: string;
|
|
129
|
+
/**
|
|
130
|
+
* z-index компонента
|
|
131
|
+
*/
|
|
132
|
+
zIndex?: number;
|
|
133
|
+
/**
|
|
134
|
+
* Реф, который должен быть установлен компонентной области
|
|
135
|
+
*/
|
|
136
|
+
componentRef?: MutableRefObject<HTMLDivElement | null>;
|
|
137
|
+
/**
|
|
138
|
+
* Блокирует скролл когда модальное окно открыто. Работает только на iOS.
|
|
139
|
+
*/
|
|
140
|
+
iOSLock?: boolean;
|
|
141
|
+
};
|
|
142
|
+
type BaseModalContext = {
|
|
143
|
+
parentRef: React.RefObject<HTMLDivElement>;
|
|
144
|
+
componentRef: React.RefObject<HTMLDivElement>;
|
|
145
|
+
hasFooter?: boolean;
|
|
146
|
+
hasHeader?: boolean;
|
|
147
|
+
hasScroll?: boolean;
|
|
148
|
+
headerHighlighted?: boolean;
|
|
149
|
+
footerHighlighted?: boolean;
|
|
150
|
+
headerOffset?: number;
|
|
151
|
+
setHeaderOffset: (offset: number) => void;
|
|
152
|
+
contentRef: Ref<HTMLElement>;
|
|
153
|
+
setHasHeader: (exists: boolean) => void;
|
|
154
|
+
setHasFooter: (exists: boolean) => void;
|
|
155
|
+
onClose: Required<BaseModalProps>['onClose'];
|
|
156
|
+
};
|
|
157
|
+
declare const BaseModalContext: React.Context<BaseModalContext>;
|
|
158
|
+
declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
|
|
159
|
+
export { BaseModalProps, BaseModalContext, BaseModal };
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
2
|
+
import FocusLock from 'react-focus-lock';
|
|
3
|
+
import mergeRefs from 'react-merge-refs';
|
|
4
|
+
import { CSSTransition } from 'react-transition-group';
|
|
5
|
+
import { ResizeObserver } from '@juggle/resize-observer';
|
|
6
|
+
import cn from 'classnames';
|
|
7
|
+
import { Backdrop } from '@alfalab/core-components-backdrop/moderncssm';
|
|
8
|
+
import { Portal } from '@alfalab/core-components-portal/moderncssm';
|
|
9
|
+
import { os, browser } from '@alfalab/core-components-shared/moderncssm';
|
|
10
|
+
import { Stack } from '@alfalab/core-components-stack/moderncssm';
|
|
11
|
+
import { stackingOrder } from '@alfalab/stack-context';
|
|
12
|
+
import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
|
|
13
|
+
import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
|
|
14
|
+
import styles from './index.module.css';
|
|
15
|
+
import './matches-polyfill.js';
|
|
16
|
+
|
|
17
|
+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
19
|
+
const BaseModalContext = React.createContext({
|
|
20
|
+
parentRef: { current: null },
|
|
21
|
+
componentRef: { current: null },
|
|
22
|
+
hasFooter: false,
|
|
23
|
+
hasHeader: false,
|
|
24
|
+
hasScroll: false,
|
|
25
|
+
headerHighlighted: false,
|
|
26
|
+
footerHighlighted: false,
|
|
27
|
+
headerOffset: 0,
|
|
28
|
+
setHeaderOffset: () => null,
|
|
29
|
+
contentRef: () => null,
|
|
30
|
+
setHasHeader: () => null,
|
|
31
|
+
setHasFooter: () => null,
|
|
32
|
+
onClose: () => null,
|
|
33
|
+
});
|
|
34
|
+
const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
|
|
35
|
+
const [exited, setExited] = useState(null);
|
|
36
|
+
const [hasScroll, setHasScroll] = useState(false);
|
|
37
|
+
const [hasHeader, setHasHeader] = useState(false);
|
|
38
|
+
const [hasFooter, setHasFooter] = useState(false);
|
|
39
|
+
const [headerHighlighted, setHeaderHighlighted] = useState(false);
|
|
40
|
+
const [footerHighlighted, setFooterHighlighted] = useState(false);
|
|
41
|
+
const [headerOffset, setHeaderOffset] = useState(0);
|
|
42
|
+
const componentNodeRef = useRef(null);
|
|
43
|
+
const wrapperRef = useRef(null);
|
|
44
|
+
const scrollableNodeRef = useRef(null);
|
|
45
|
+
const contentNodeRef = useRef(null);
|
|
46
|
+
const restoreContainerStylesRef = useRef(null);
|
|
47
|
+
const mouseDownTarget = useRef();
|
|
48
|
+
const resizeObserverRef = useRef();
|
|
49
|
+
const checkToHasScrollBar = () => {
|
|
50
|
+
if (scrollableNodeRef.current) {
|
|
51
|
+
const scrollExists = hasScrollbar(scrollableNodeRef.current);
|
|
52
|
+
setFooterHighlighted(scrollExists);
|
|
53
|
+
setHasScroll(scrollExists);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
const isExited = exited || exited === null;
|
|
57
|
+
const shouldRender = keepMounted || open || !isExited;
|
|
58
|
+
const getContainer = useCallback(() => (container ? container() : document.body), [container]);
|
|
59
|
+
const addResizeHandle = useCallback(() => {
|
|
60
|
+
if (!resizeObserverRef.current)
|
|
61
|
+
return;
|
|
62
|
+
if (scrollableNodeRef.current) {
|
|
63
|
+
resizeObserverRef.current.observe(scrollableNodeRef.current);
|
|
64
|
+
}
|
|
65
|
+
if (contentNodeRef.current) {
|
|
66
|
+
resizeObserverRef.current.observe(contentNodeRef.current);
|
|
67
|
+
}
|
|
68
|
+
}, []);
|
|
69
|
+
const removeResizeHandle = useCallback(() => resizeObserverRef.current?.disconnect(), []);
|
|
70
|
+
const contentRef = useCallback((node) => {
|
|
71
|
+
if (node !== null) {
|
|
72
|
+
contentNodeRef.current = node;
|
|
73
|
+
if (resizeObserverRef.current) {
|
|
74
|
+
resizeObserverRef.current.observe(node);
|
|
75
|
+
}
|
|
76
|
+
checkToHasScrollBar();
|
|
77
|
+
}
|
|
78
|
+
}, []);
|
|
79
|
+
const handleScroll = useCallback(() => {
|
|
80
|
+
if (!scrollableNodeRef.current || !componentNodeRef.current)
|
|
81
|
+
return;
|
|
82
|
+
if (hasHeader) {
|
|
83
|
+
setHeaderHighlighted(!isScrolledToTop(scrollableNodeRef.current) &&
|
|
84
|
+
componentNodeRef.current.getBoundingClientRect().top - headerOffset <= 1);
|
|
85
|
+
}
|
|
86
|
+
if (hasFooter) {
|
|
87
|
+
setFooterHighlighted(!isScrolledToBottom(scrollableNodeRef.current) &&
|
|
88
|
+
componentNodeRef.current.getBoundingClientRect().bottom >=
|
|
89
|
+
window.innerHeight - 1);
|
|
90
|
+
}
|
|
91
|
+
}, [hasFooter, hasHeader, headerOffset]);
|
|
92
|
+
const handleClose = useCallback((event, reason) => {
|
|
93
|
+
if (iOSLock && os.isIOS()) {
|
|
94
|
+
unlockScroll();
|
|
95
|
+
}
|
|
96
|
+
if (onClose) {
|
|
97
|
+
onClose(event, reason);
|
|
98
|
+
}
|
|
99
|
+
if (reason === 'backdropClick' && onBackdropClick) {
|
|
100
|
+
onBackdropClick(event);
|
|
101
|
+
}
|
|
102
|
+
if (reason === 'escapeKeyDown' && onEscapeKeyDown) {
|
|
103
|
+
onEscapeKeyDown(event);
|
|
104
|
+
}
|
|
105
|
+
return null;
|
|
106
|
+
}, [onBackdropClick, onClose, onEscapeKeyDown, iOSLock]);
|
|
107
|
+
const handleBackdropMouseDown = (event) => {
|
|
108
|
+
let clickedOnScrollbar = false;
|
|
109
|
+
const clientWidth = event.target?.clientWidth;
|
|
110
|
+
if (event.clientX && clientWidth) {
|
|
111
|
+
// Устанавливаем смещение для абсолютно спозиционированного скроллбара в OSX в 17px.
|
|
112
|
+
const offset = browser.getScrollbarSize() === 0 ? 17 : 0;
|
|
113
|
+
clickedOnScrollbar = event.clientX + offset > clientWidth;
|
|
114
|
+
}
|
|
115
|
+
if (!disableBackdropClick && !clickedOnScrollbar) {
|
|
116
|
+
mouseDownTarget.current = event.target;
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
const handleBackdropMouseUp = (event) => {
|
|
120
|
+
if (!disableBackdropClick &&
|
|
121
|
+
event.target === wrapperRef.current &&
|
|
122
|
+
mouseDownTarget.current === wrapperRef.current) {
|
|
123
|
+
handleClose(event, 'backdropClick');
|
|
124
|
+
}
|
|
125
|
+
mouseDownTarget.current = undefined;
|
|
126
|
+
};
|
|
127
|
+
const handleKeyDown = useCallback((event) => {
|
|
128
|
+
/*
|
|
129
|
+
* Чтобы сохранить дефолтное поведение элементов и событий форм,
|
|
130
|
+
* обработчик не устанавливает event.preventDefault()
|
|
131
|
+
*/
|
|
132
|
+
if (event.key !== 'Escape') {
|
|
133
|
+
return;
|
|
134
|
+
}
|
|
135
|
+
// Если есть обработчик escape на body
|
|
136
|
+
event.stopPropagation();
|
|
137
|
+
if (!disableEscapeKeyDown && handleClose) {
|
|
138
|
+
handleClose(event, 'escapeKeyDown');
|
|
139
|
+
}
|
|
140
|
+
}, [disableEscapeKeyDown, handleClose]);
|
|
141
|
+
const getScrollHandler = useCallback(() => {
|
|
142
|
+
if (scrollHandler === 'wrapper')
|
|
143
|
+
return wrapperRef.current;
|
|
144
|
+
if (scrollHandler === 'content')
|
|
145
|
+
return componentNodeRef.current;
|
|
146
|
+
return scrollHandler.current || wrapperRef.current;
|
|
147
|
+
}, [scrollHandler]);
|
|
148
|
+
const handleEntered = useCallback((node, isAppearing) => {
|
|
149
|
+
scrollableNodeRef.current = getScrollHandler();
|
|
150
|
+
addResizeHandle();
|
|
151
|
+
if (scrollableNodeRef.current) {
|
|
152
|
+
scrollableNodeRef.current.addEventListener('scroll', handleScroll);
|
|
153
|
+
handleScroll();
|
|
154
|
+
}
|
|
155
|
+
if (transitionProps.onEntered) {
|
|
156
|
+
transitionProps.onEntered(node, isAppearing);
|
|
157
|
+
}
|
|
158
|
+
if (onMount)
|
|
159
|
+
onMount();
|
|
160
|
+
}, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
|
|
161
|
+
const handleExited = useCallback((node) => {
|
|
162
|
+
removeResizeHandle();
|
|
163
|
+
setExited(true);
|
|
164
|
+
if (scrollableNodeRef.current) {
|
|
165
|
+
scrollableNodeRef.current.removeEventListener('scroll', handleScroll);
|
|
166
|
+
}
|
|
167
|
+
if (transitionProps.onExited) {
|
|
168
|
+
transitionProps.onExited(node);
|
|
169
|
+
}
|
|
170
|
+
if (onUnmount)
|
|
171
|
+
onUnmount();
|
|
172
|
+
if (restoreContainerStylesRef.current) {
|
|
173
|
+
restoreContainerStylesRef.current();
|
|
174
|
+
}
|
|
175
|
+
}, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
|
|
176
|
+
useEffect(() => {
|
|
177
|
+
if (open && isExited) {
|
|
178
|
+
if (!disableBlockingScroll) {
|
|
179
|
+
const el = getContainer();
|
|
180
|
+
const shouldIOSLock = iOSLock && os.isIOS();
|
|
181
|
+
handleContainer(el, shouldIOSLock);
|
|
182
|
+
if (shouldIOSLock) {
|
|
183
|
+
syncHeight();
|
|
184
|
+
lockScroll();
|
|
185
|
+
}
|
|
186
|
+
restoreContainerStylesRef.current = () => {
|
|
187
|
+
restoreContainerStylesRef.current = null;
|
|
188
|
+
restoreContainerStyles(el);
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
setExited(false);
|
|
192
|
+
}
|
|
193
|
+
}, [getContainer, open, disableBlockingScroll, isExited, iOSLock]);
|
|
194
|
+
useEffect(() => {
|
|
195
|
+
const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
|
|
196
|
+
resizeObserverRef.current = new ResizeObserver$1(checkToHasScrollBar);
|
|
197
|
+
return () => {
|
|
198
|
+
if (restoreContainerStylesRef.current) {
|
|
199
|
+
restoreContainerStylesRef.current();
|
|
200
|
+
}
|
|
201
|
+
if (resizeObserverRef.current) {
|
|
202
|
+
resizeObserverRef.current.disconnect();
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
}, []);
|
|
206
|
+
useEffect(() => {
|
|
207
|
+
if (disableAutoFocus || !open)
|
|
208
|
+
return;
|
|
209
|
+
wrapperRef.current?.focus();
|
|
210
|
+
}, [open, disableAutoFocus]);
|
|
211
|
+
const contextValue = useMemo(() => ({
|
|
212
|
+
parentRef: wrapperRef,
|
|
213
|
+
componentRef: componentNodeRef,
|
|
214
|
+
hasHeader,
|
|
215
|
+
hasFooter,
|
|
216
|
+
hasScroll,
|
|
217
|
+
headerHighlighted,
|
|
218
|
+
footerHighlighted,
|
|
219
|
+
headerOffset,
|
|
220
|
+
setHeaderOffset,
|
|
221
|
+
contentRef,
|
|
222
|
+
setHasHeader,
|
|
223
|
+
setHasFooter,
|
|
224
|
+
onClose: handleClose,
|
|
225
|
+
}), [
|
|
226
|
+
contentRef,
|
|
227
|
+
hasHeader,
|
|
228
|
+
hasFooter,
|
|
229
|
+
hasScroll,
|
|
230
|
+
headerHighlighted,
|
|
231
|
+
footerHighlighted,
|
|
232
|
+
headerOffset,
|
|
233
|
+
setHeaderOffset,
|
|
234
|
+
handleClose,
|
|
235
|
+
]);
|
|
236
|
+
const renderContent = () => (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(BaseModalContext.Provider, { value: contextValue },
|
|
237
|
+
React.createElement(FocusLock, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
|
|
238
|
+
Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
|
|
239
|
+
zIndex: computedZIndex,
|
|
240
|
+
} })),
|
|
241
|
+
React.createElement("div", { ...wrapperProps, role: 'dialog', className: cn(styles.wrapper, wrapperClassName, wrapperProps?.className, {
|
|
242
|
+
[styles.hidden]: !open && isExited,
|
|
243
|
+
}), ref: mergeRefs([
|
|
244
|
+
ref,
|
|
245
|
+
wrapperRef,
|
|
246
|
+
wrapperProps?.ref,
|
|
247
|
+
]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
|
|
248
|
+
zIndex: computedZIndex,
|
|
249
|
+
} },
|
|
250
|
+
React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
|
|
251
|
+
React.createElement("div", { ...componentDivProps, className: cn(styles.component, className, componentDivProps?.className), ref: mergeRefs([
|
|
252
|
+
componentRef,
|
|
253
|
+
componentNodeRef,
|
|
254
|
+
componentDivProps?.ref || null,
|
|
255
|
+
]) },
|
|
256
|
+
React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
|
|
257
|
+
if (!shouldRender)
|
|
258
|
+
return null;
|
|
259
|
+
return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
|
|
260
|
+
});
|
|
261
|
+
BaseModal.displayName = 'BaseModal';
|
|
262
|
+
BaseModalContext.displayName = 'BaseModalContext';
|
|
263
|
+
|
|
264
|
+
export { BaseModal, BaseModalContext };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Хелпер для блокирования скроллинга в iOS
|
|
3
|
+
* В проекте используется overflow: hidden для блокировки, но в некоторых случаях этого недостаточно. Данный хелпер призван решать эту проблему
|
|
4
|
+
*/
|
|
5
|
+
let scrollY;
|
|
6
|
+
const lockScroll = () => {
|
|
7
|
+
scrollY = window.scrollY;
|
|
8
|
+
document.body.classList.add('is-locked');
|
|
9
|
+
};
|
|
10
|
+
const unlockScroll = () => {
|
|
11
|
+
document.body.classList.remove('is-locked');
|
|
12
|
+
window.scrollTo(0, scrollY);
|
|
13
|
+
};
|
|
14
|
+
const syncHeight = () => {
|
|
15
|
+
document.body.style.setProperty('--window-inner-scrollY', `${window.scrollY}px`);
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { lockScroll, syncHeight, unlockScroll };
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/* */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--window-inner-scrollY: 10px; /* fallback value to prevent ci error */
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body:global(.is-locked) {
|
|
8
|
+
margin-top: calc(var(--window-inner-scrollY) * -1);
|
|
9
|
+
position: fixed;
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.component {
|
|
14
|
+
position: relative;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
background: var(--color-light-modal-bg-primary);
|
|
17
|
+
margin: auto;
|
|
18
|
+
flex-shrink: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.wrapper {
|
|
22
|
+
position: fixed;
|
|
23
|
+
top: 0;
|
|
24
|
+
left: 0;
|
|
25
|
+
right: 0;
|
|
26
|
+
bottom: 0;
|
|
27
|
+
|
|
28
|
+
overflow: auto;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
align-items: center;
|
|
32
|
+
outline: 0;
|
|
33
|
+
overscroll-behavior: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.content {
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
flex: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.hidden {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.backdrop {
|
|
49
|
+
z-index: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.appear,
|
|
53
|
+
.enter {
|
|
54
|
+
opacity: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.appearActive,
|
|
58
|
+
.enterActive {
|
|
59
|
+
opacity: 1;
|
|
60
|
+
transition: opacity 200ms ease-in;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.exit {
|
|
64
|
+
opacity: 1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.exitActive,
|
|
68
|
+
.exitDone {
|
|
69
|
+
opacity: 0;
|
|
70
|
+
transition: opacity 200ms ease-out;
|
|
71
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
// @ts-nocheck
|
|
3
|
+
if (typeof window !== 'undefined') {
|
|
4
|
+
if (Element && !Element.prototype.matches) {
|
|
5
|
+
Element.prototype.matches =
|
|
6
|
+
Element.prototype.matchesSelector ||
|
|
7
|
+
Element.prototype.mozMatchesSelector ||
|
|
8
|
+
Element.prototype.msMatchesSelector ||
|
|
9
|
+
Element.prototype.oMatchesSelector ||
|
|
10
|
+
Element.prototype.webkitMatchesSelector ||
|
|
11
|
+
function (s) {
|
|
12
|
+
const matches = (this.document || this.ownerDocument).querySelectorAll(s);
|
|
13
|
+
let i = matches.length;
|
|
14
|
+
while (--i >= 0 && matches.item(i) !== this) { }
|
|
15
|
+
return i > -1;
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare function isScrolledToTop(target: HTMLElement): boolean;
|
|
2
|
+
declare function isScrolledToBottom(target: HTMLElement): boolean;
|
|
3
|
+
declare function hasScrollbar(target: HTMLElement): boolean;
|
|
4
|
+
declare const restoreContainerStyles: (container: HTMLElement) => void;
|
|
5
|
+
declare const handleContainer: (container?: HTMLElement, shouldIOSLock?: boolean) => void;
|
|
6
|
+
export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { getModalStore } from '@alfalab/core-components-global-store/moderncssm';
|
|
2
|
+
import { browser } from '@alfalab/core-components-shared/moderncssm';
|
|
3
|
+
|
|
4
|
+
function isScrolledToTop(target) {
|
|
5
|
+
return target.scrollTop <= 0;
|
|
6
|
+
}
|
|
7
|
+
function isScrolledToBottom(target) {
|
|
8
|
+
return target.scrollHeight - target.offsetHeight <= target.scrollTop;
|
|
9
|
+
}
|
|
10
|
+
function hasScrollbar(target) {
|
|
11
|
+
return target.scrollHeight > target.clientHeight;
|
|
12
|
+
}
|
|
13
|
+
const isOverflowing = (container) => {
|
|
14
|
+
if (document.body === container) {
|
|
15
|
+
return window.innerWidth > document.documentElement.clientWidth;
|
|
16
|
+
}
|
|
17
|
+
return container.scrollHeight > container.clientHeight;
|
|
18
|
+
};
|
|
19
|
+
const getPaddingRight = (node) => parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
|
|
20
|
+
const restoreContainerStyles = (container) => {
|
|
21
|
+
const modalRestoreStyles = getModalStore().getRestoreStyles();
|
|
22
|
+
const index = modalRestoreStyles.findIndex((s) => s.container === container);
|
|
23
|
+
const existingStyles = modalRestoreStyles[index];
|
|
24
|
+
if (!existingStyles)
|
|
25
|
+
return;
|
|
26
|
+
existingStyles.modals -= 1;
|
|
27
|
+
if (existingStyles.modals <= 0) {
|
|
28
|
+
modalRestoreStyles.splice(index, 1);
|
|
29
|
+
existingStyles.styles.forEach(({ value, el, key }) => {
|
|
30
|
+
if (value) {
|
|
31
|
+
el.style.setProperty(key, value);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
el.style.removeProperty(key);
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
const handleContainer = (container, shouldIOSLock = false) => {
|
|
40
|
+
if (!container)
|
|
41
|
+
return;
|
|
42
|
+
const modalRestoreStyles = getModalStore().getRestoreStyles();
|
|
43
|
+
const existingStyles = modalRestoreStyles.find((s) => s.container === container);
|
|
44
|
+
if (existingStyles) {
|
|
45
|
+
existingStyles.modals += 1;
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const containerStyles = [];
|
|
49
|
+
if (isOverflowing(container)) {
|
|
50
|
+
// Вычисляет размер до применения `overflow hidden` для избежания скачков
|
|
51
|
+
const scrollbarSize = browser.getScrollbarSize();
|
|
52
|
+
containerStyles.push({
|
|
53
|
+
value: container.style.paddingRight,
|
|
54
|
+
key: 'padding-right',
|
|
55
|
+
el: container,
|
|
56
|
+
});
|
|
57
|
+
// Вычисляем стили, чтобы получить реальный `padding` c шириной сколлбара
|
|
58
|
+
// eslint-disable-next-line no-param-reassign
|
|
59
|
+
container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
|
|
60
|
+
}
|
|
61
|
+
const parent = container.parentElement;
|
|
62
|
+
const scrollContainer =
|
|
63
|
+
// TODO: заменить на optional chaining
|
|
64
|
+
parent &&
|
|
65
|
+
parent.nodeName === 'HTML' &&
|
|
66
|
+
window.getComputedStyle(parent).overflowY === 'scroll'
|
|
67
|
+
? parent
|
|
68
|
+
: container;
|
|
69
|
+
// Блокируем скролл даже если отсутствует скроллбар
|
|
70
|
+
if (scrollContainer.style.overflow !== 'hidden') {
|
|
71
|
+
containerStyles.push({
|
|
72
|
+
value: scrollContainer.style.overflow,
|
|
73
|
+
key: 'overflow',
|
|
74
|
+
el: scrollContainer,
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
if (!shouldIOSLock) {
|
|
78
|
+
scrollContainer.style.overflow = 'hidden';
|
|
79
|
+
}
|
|
80
|
+
modalRestoreStyles.push({
|
|
81
|
+
container,
|
|
82
|
+
modals: 1,
|
|
83
|
+
styles: containerStyles,
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-base-modal",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.8.0",
|
|
4
4
|
"description": "BaseModal component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"directory": "dist"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@alfalab/core-components-backdrop": "^3.
|
|
14
|
+
"@alfalab/core-components-backdrop": "^3.4.0",
|
|
15
15
|
"@alfalab/core-components-global-store": "^2.1.0",
|
|
16
16
|
"@alfalab/core-components-portal": "^3.3.1",
|
|
17
17
|
"@alfalab/core-components-stack": "^5.0.0",
|
|
@@ -29,6 +29,6 @@
|
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
31
31
|
},
|
|
32
|
-
"themesVersion": "13.0
|
|
33
|
-
"varsVersion": "9.
|
|
32
|
+
"themesVersion": "13.1.0",
|
|
33
|
+
"varsVersion": "9.12.0"
|
|
34
34
|
}
|
package/src/index.module.css
CHANGED