@alfalab/core-components-base-modal 4.0.1 → 4.1.1
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 +50 -28
- package/dist/Component.js +12 -4
- package/dist/cssm/Component.js +11 -3
- package/dist/esm/Component.js +12 -4
- package/dist/esm/index.css +13 -13
- package/dist/index.css +13 -13
- package/dist/modern/Component.js +12 -4
- package/dist/modern/index.css +13 -13
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -3,12 +3,34 @@
|
|
|
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
|
-
|
|
6
|
+
## [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
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **base-modal:** fixed outside modal click ([#115](https://github.com/core-ds/core-components/issues/115)) ([6a08f72](https://github.com/core-ds/core-components/commit/6a08f726521dcd9a310b0e06345950429eac246a))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [4.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@4.0.2...@alfalab/core-components-base-modal@4.1.0) (2022-06-28)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* circumflexus retrieval ([#57](https://github.com/core-ds/core-components/issues/57)) ([3820da8](https://github.com/core-ds/core-components/commit/3820da818bcdcbee6904c648b3e29c3c828fe202))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
# [4.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.2.0...@alfalab/core-components-base-modal@4.0.0) (2022-03-24)
|
|
7
29
|
|
|
8
30
|
|
|
9
31
|
### Features
|
|
10
32
|
|
|
11
|
-
* **bottom-sheet:** update-bottom-sheet ([#1025](https://github.com/
|
|
33
|
+
* **bottom-sheet:** update-bottom-sheet ([#1025](https://github.com/core-ds/core-components/issues/1025)) ([26fa9aa](https://github.com/core-ds/core-components/commit/26fa9aab68bebf0f7093a38bc0f18a9b596ccf37)), closes [#1032](https://github.com/core-ds/core-components/issues/1032)
|
|
12
34
|
|
|
13
35
|
|
|
14
36
|
### BREAKING CHANGES
|
|
@@ -19,41 +41,41 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
19
41
|
|
|
20
42
|
|
|
21
43
|
|
|
22
|
-
# [3.2.0](https://github.com/
|
|
44
|
+
# [3.2.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.1.0...@alfalab/core-components-base-modal@3.2.0) (2022-03-01)
|
|
23
45
|
|
|
24
46
|
|
|
25
47
|
### Features
|
|
26
48
|
|
|
27
|
-
* **base-modal:** add component ref for base modal ([#1008](https://github.com/
|
|
28
|
-
* Исправить импорты в сторях. ([#998](https://github.com/
|
|
49
|
+
* **base-modal:** add component ref for base modal ([#1008](https://github.com/core-ds/core-components/issues/1008)) ([fb13dbd](https://github.com/core-ds/core-components/commit/fb13dbdf6352b10b80a74fa87edfcb1f54b76d5a))
|
|
50
|
+
* Исправить импорты в сторях. ([#998](https://github.com/core-ds/core-components/issues/998)) ([e6a654a](https://github.com/core-ds/core-components/commit/e6a654a0599451c7d149484cb61d8067eed083b7))
|
|
29
51
|
|
|
30
52
|
|
|
31
53
|
|
|
32
54
|
|
|
33
55
|
|
|
34
|
-
# [3.1.0](https://github.com/
|
|
56
|
+
# [3.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.2...@alfalab/core-components-base-modal@3.1.0) (2022-01-17)
|
|
35
57
|
|
|
36
58
|
|
|
37
59
|
### Features
|
|
38
60
|
|
|
39
|
-
* **base-modal:** extract modal store to global ([#943](https://github.com/
|
|
61
|
+
* **base-modal:** extract modal store to global ([#943](https://github.com/core-ds/core-components/issues/943)) ([9587f17](https://github.com/core-ds/core-components/commit/9587f1773bb690ac6696077509d4a519aa109198))
|
|
40
62
|
|
|
41
63
|
|
|
42
64
|
|
|
43
65
|
|
|
44
66
|
|
|
45
|
-
## [3.0.2](https://github.com/
|
|
67
|
+
## [3.0.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.1...@alfalab/core-components-base-modal@3.0.2) (2021-09-14)
|
|
46
68
|
|
|
47
69
|
|
|
48
70
|
### Bug Fixes
|
|
49
71
|
|
|
50
|
-
* **base-modal:** modal scroll ([#820](https://github.com/
|
|
72
|
+
* **base-modal:** modal scroll ([#820](https://github.com/core-ds/core-components/issues/820)) ([1b2d94a](https://github.com/core-ds/core-components/commit/1b2d94ad45e04145bf1292d749ae2028702dc622))
|
|
51
73
|
|
|
52
74
|
|
|
53
75
|
|
|
54
76
|
|
|
55
77
|
|
|
56
|
-
## [3.0.1](https://github.com/
|
|
78
|
+
## [3.0.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@3.0.0...@alfalab/core-components-base-modal@3.0.1) (2021-07-09)
|
|
57
79
|
|
|
58
80
|
**Note:** Version bump only for package @alfalab/core-components-base-modal
|
|
59
81
|
|
|
@@ -61,69 +83,69 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
61
83
|
|
|
62
84
|
|
|
63
85
|
|
|
64
|
-
# [3.0.0](https://github.com/
|
|
86
|
+
# [3.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.1.1...@alfalab/core-components-base-modal@3.0.0) (2021-07-08)
|
|
65
87
|
|
|
66
88
|
|
|
67
89
|
### Features
|
|
68
90
|
|
|
69
|
-
* upgrade storybook ([#696](https://github.com/
|
|
91
|
+
* upgrade storybook ([#696](https://github.com/core-ds/core-components/issues/696))
|
|
70
92
|
|
|
71
|
-
## [2.1.1](https://github.com/
|
|
93
|
+
## [2.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.1.0...@alfalab/core-components-base-modal@2.1.1) (2021-07-02)
|
|
72
94
|
|
|
73
95
|
|
|
74
96
|
### Bug Fixes
|
|
75
97
|
|
|
76
|
-
* **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/
|
|
98
|
+
* **base-modal:** resubscribe observer when content node changed ([2fef06e](https://github.com/core-ds/core-components/commit/2fef06eea01354f58663a5f4470606123d31f9d4))
|
|
77
99
|
|
|
78
100
|
|
|
79
101
|
|
|
80
102
|
|
|
81
103
|
|
|
82
|
-
# [2.1.0](https://github.com/
|
|
104
|
+
# [2.1.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.2...@alfalab/core-components-base-modal@2.1.0) (2021-06-28)
|
|
83
105
|
|
|
84
106
|
|
|
85
107
|
### Bug Fixes
|
|
86
108
|
|
|
87
|
-
* **base-modal:** fix has scroll bug ([#712](https://github.com/
|
|
109
|
+
* **base-modal:** fix has scroll bug ([#712](https://github.com/core-ds/core-components/issues/712)) ([a6749a1](https://github.com/core-ds/core-components/commit/a6749a149d511b28cc59aaec188d59c380c64243))
|
|
88
110
|
|
|
89
111
|
|
|
90
112
|
### Features
|
|
91
113
|
|
|
92
|
-
* **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/
|
|
114
|
+
* **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/core-ds/core-components/issues/645)) ([1f7391d](https://github.com/core-ds/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/core-ds/core-components/issues/642) [#642](https://github.com/core-ds/core-components/issues/642) [#646](https://github.com/core-ds/core-components/issues/646) [#646](https://github.com/core-ds/core-components/issues/646) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#648](https://github.com/core-ds/core-components/issues/648) [#647](https://github.com/core-ds/core-components/issues/647) [#630](https://github.com/core-ds/core-components/issues/630) [#648](https://github.com/core-ds/core-components/issues/648) [#630](https://github.com/core-ds/core-components/issues/630) [#669](https://github.com/core-ds/core-components/issues/669)
|
|
93
115
|
|
|
94
116
|
|
|
95
117
|
|
|
96
118
|
|
|
97
119
|
|
|
98
|
-
## [2.0.2](https://github.com/
|
|
120
|
+
## [2.0.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.1...@alfalab/core-components-base-modal@2.0.2) (2021-05-28)
|
|
99
121
|
|
|
100
122
|
|
|
101
123
|
### Bug Fixes
|
|
102
124
|
|
|
103
|
-
* **base-modal:** restore body styles on unmount ([#671](https://github.com/
|
|
125
|
+
* **base-modal:** restore body styles on unmount ([#671](https://github.com/core-ds/core-components/issues/671)) ([963a6b1](https://github.com/core-ds/core-components/commit/963a6b18b13924a09cda672a662d0b402d00e75b))
|
|
104
126
|
|
|
105
127
|
|
|
106
128
|
|
|
107
129
|
|
|
108
130
|
|
|
109
|
-
## [2.0.1](https://github.com/
|
|
131
|
+
## [2.0.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@2.0.0...@alfalab/core-components-base-modal@2.0.1) (2021-05-25)
|
|
110
132
|
|
|
111
133
|
|
|
112
134
|
### Bug Fixes
|
|
113
135
|
|
|
114
|
-
* **modal:** fix styles ([#665](https://github.com/
|
|
115
|
-
* **modal:** restore styles after exited ([#663](https://github.com/
|
|
136
|
+
* **modal:** fix styles ([#665](https://github.com/core-ds/core-components/issues/665)) ([06f3615](https://github.com/core-ds/core-components/commit/06f3615c532f8ec2932d8a4d1fcbb1f5ee6b6a30))
|
|
137
|
+
* **modal:** restore styles after exited ([#663](https://github.com/core-ds/core-components/issues/663)) ([48a8d69](https://github.com/core-ds/core-components/commit/48a8d6986dcde6c191d8411d51f28e6f399e26e6))
|
|
116
138
|
|
|
117
139
|
|
|
118
140
|
|
|
119
141
|
|
|
120
142
|
|
|
121
|
-
# [2.0.0](https://github.com/
|
|
143
|
+
# [2.0.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.2...@alfalab/core-components-base-modal@2.0.0) (2021-04-26)
|
|
122
144
|
|
|
123
145
|
|
|
124
146
|
### Features
|
|
125
147
|
|
|
126
|
-
* **stack:** add new component ([#612](https://github.com/
|
|
148
|
+
* **stack:** add new component ([#612](https://github.com/core-ds/core-components/issues/612)) ([c520f91](https://github.com/core-ds/core-components/commit/c520f91cd22bb9e23fd2f428719865b4c7d5a2a6))
|
|
127
149
|
|
|
128
150
|
|
|
129
151
|
### BREAKING CHANGES
|
|
@@ -182,7 +204,7 @@ remove z-index, add stack component
|
|
|
182
204
|
|
|
183
205
|
|
|
184
206
|
|
|
185
|
-
## [1.1.2](https://github.com/
|
|
207
|
+
## [1.1.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.1...@alfalab/core-components-base-modal@1.1.2) (2021-04-26)
|
|
186
208
|
|
|
187
209
|
**Note:** Version bump only for package @alfalab/core-components-base-modal
|
|
188
210
|
|
|
@@ -190,12 +212,12 @@ remove z-index, add stack component
|
|
|
190
212
|
|
|
191
213
|
|
|
192
214
|
|
|
193
|
-
## [1.1.1](https://github.com/
|
|
215
|
+
## [1.1.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-base-modal@1.1.0...@alfalab/core-components-base-modal@1.1.1) (2021-04-09)
|
|
194
216
|
|
|
195
217
|
|
|
196
218
|
### Bug Fixes
|
|
197
219
|
|
|
198
|
-
* **base-modal:** correct cb ([256a142](https://github.com/
|
|
220
|
+
* **base-modal:** correct cb ([256a142](https://github.com/core-ds/core-components/commit/256a142398a9ada34386e92d012185763cedef5a))
|
|
199
221
|
|
|
200
222
|
|
|
201
223
|
|
|
@@ -206,4 +228,4 @@ remove z-index, add stack component
|
|
|
206
228
|
|
|
207
229
|
### Features
|
|
208
230
|
|
|
209
|
-
* **backdrop:** add component ([948a6c2](https://github.com/
|
|
231
|
+
* **backdrop:** add component ([948a6c2](https://github.com/core-ds/core-components/commit/948a6c2fb5ec58edb2d087691ce4713d75da6e35))
|
package/dist/Component.js
CHANGED
|
@@ -48,7 +48,7 @@ var __assign = function () {
|
|
|
48
48
|
return __assign.apply(this, arguments);
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
var styles = {"component":"base-
|
|
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"};
|
|
52
52
|
require('./index.css')
|
|
53
53
|
|
|
54
54
|
var BaseModalContext = React__default['default'].createContext({
|
|
@@ -78,6 +78,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
78
78
|
var scrollableNodeRef = React.useRef(null);
|
|
79
79
|
var contentNodeRef = React.useRef(null);
|
|
80
80
|
var restoreContainerStylesRef = React.useRef(null);
|
|
81
|
+
var mouseDownTarget = React.useRef();
|
|
81
82
|
var checkToHasScrollBar = function () {
|
|
82
83
|
if (scrollableNodeRef.current) {
|
|
83
84
|
var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
|
|
@@ -131,8 +132,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
131
132
|
}
|
|
132
133
|
return null;
|
|
133
134
|
}, [onBackdropClick, onClose, onEscapeKeyDown]);
|
|
134
|
-
var
|
|
135
|
-
if (!disableBackdropClick
|
|
135
|
+
var handleBackdropMouseDown = function (event) {
|
|
136
|
+
if (!disableBackdropClick) {
|
|
137
|
+
mouseDownTarget.current = event.target;
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
var handleBackdropMouseUp = function (event) {
|
|
141
|
+
if (!disableBackdropClick &&
|
|
142
|
+
event.target === wrapperRef.current &&
|
|
143
|
+
mouseDownTarget.current === wrapperRef.current) {
|
|
136
144
|
handleClose(event, 'backdropClick');
|
|
137
145
|
}
|
|
138
146
|
};
|
|
@@ -242,7 +250,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
242
250
|
} }))),
|
|
243
251
|
React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles.wrapper, wrapperClassName, (_a = {},
|
|
244
252
|
_a[styles.hidden] = !open && exited,
|
|
245
|
-
_a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown,
|
|
253
|
+
_a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
|
|
246
254
|
zIndex: computedZIndex,
|
|
247
255
|
} },
|
|
248
256
|
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
|
package/dist/cssm/Component.js
CHANGED
|
@@ -77,6 +77,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
77
77
|
var scrollableNodeRef = React.useRef(null);
|
|
78
78
|
var contentNodeRef = React.useRef(null);
|
|
79
79
|
var restoreContainerStylesRef = React.useRef(null);
|
|
80
|
+
var mouseDownTarget = React.useRef();
|
|
80
81
|
var checkToHasScrollBar = function () {
|
|
81
82
|
if (scrollableNodeRef.current) {
|
|
82
83
|
var scrollExists = utils.hasScrollbar(scrollableNodeRef.current);
|
|
@@ -130,8 +131,15 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
130
131
|
}
|
|
131
132
|
return null;
|
|
132
133
|
}, [onBackdropClick, onClose, onEscapeKeyDown]);
|
|
133
|
-
var
|
|
134
|
-
if (!disableBackdropClick
|
|
134
|
+
var handleBackdropMouseDown = function (event) {
|
|
135
|
+
if (!disableBackdropClick) {
|
|
136
|
+
mouseDownTarget.current = event.target;
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
var handleBackdropMouseUp = function (event) {
|
|
140
|
+
if (!disableBackdropClick &&
|
|
141
|
+
event.target === wrapperRef.current &&
|
|
142
|
+
mouseDownTarget.current === wrapperRef.current) {
|
|
135
143
|
handleClose(event, 'backdropClick');
|
|
136
144
|
}
|
|
137
145
|
};
|
|
@@ -241,7 +249,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
241
249
|
} }))),
|
|
242
250
|
React__default['default'].createElement("div", { role: 'dialog', className: cn__default['default'](styles__default['default'].wrapper, wrapperClassName, (_a = {},
|
|
243
251
|
_a[styles__default['default'].hidden] = !open && exited,
|
|
244
|
-
_a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown,
|
|
252
|
+
_a)), ref: mergeRefs__default['default']([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
|
|
245
253
|
zIndex: computedZIndex,
|
|
246
254
|
} },
|
|
247
255
|
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles__default['default'] }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
|
package/dist/esm/Component.js
CHANGED
|
@@ -37,7 +37,7 @@ var __assign = function () {
|
|
|
37
37
|
return __assign.apply(this, arguments);
|
|
38
38
|
};
|
|
39
39
|
|
|
40
|
-
var styles = {"component":"base-
|
|
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"};
|
|
41
41
|
require('./index.css')
|
|
42
42
|
|
|
43
43
|
var BaseModalContext = React.createContext({
|
|
@@ -67,6 +67,7 @@ var BaseModal = forwardRef(function (_a, ref) {
|
|
|
67
67
|
var scrollableNodeRef = useRef(null);
|
|
68
68
|
var contentNodeRef = useRef(null);
|
|
69
69
|
var restoreContainerStylesRef = useRef(null);
|
|
70
|
+
var mouseDownTarget = useRef();
|
|
70
71
|
var checkToHasScrollBar = function () {
|
|
71
72
|
if (scrollableNodeRef.current) {
|
|
72
73
|
var scrollExists = hasScrollbar(scrollableNodeRef.current);
|
|
@@ -120,8 +121,15 @@ var BaseModal = forwardRef(function (_a, ref) {
|
|
|
120
121
|
}
|
|
121
122
|
return null;
|
|
122
123
|
}, [onBackdropClick, onClose, onEscapeKeyDown]);
|
|
123
|
-
var
|
|
124
|
-
if (!disableBackdropClick
|
|
124
|
+
var handleBackdropMouseDown = function (event) {
|
|
125
|
+
if (!disableBackdropClick) {
|
|
126
|
+
mouseDownTarget.current = event.target;
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
var handleBackdropMouseUp = function (event) {
|
|
130
|
+
if (!disableBackdropClick &&
|
|
131
|
+
event.target === wrapperRef.current &&
|
|
132
|
+
mouseDownTarget.current === wrapperRef.current) {
|
|
125
133
|
handleClose(event, 'backdropClick');
|
|
126
134
|
}
|
|
127
135
|
};
|
|
@@ -231,7 +239,7 @@ var BaseModal = forwardRef(function (_a, ref) {
|
|
|
231
239
|
} }))),
|
|
232
240
|
React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, (_a = {},
|
|
233
241
|
_a[styles.hidden] = !open && exited,
|
|
234
|
-
_a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown,
|
|
242
|
+
_a)), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
|
|
235
243
|
zIndex: computedZIndex,
|
|
236
244
|
} },
|
|
237
245
|
React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
|
package/dist/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 5o7wx */
|
|
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-
|
|
13
|
+
.base-modal__component_15icx {
|
|
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-
|
|
20
|
+
.base-modal__wrapper_15icx {
|
|
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-
|
|
33
|
+
.base-modal__content_15icx {
|
|
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-
|
|
40
|
+
.base-modal__hidden_15icx {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_15icx {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_15icx,
|
|
47
|
+
.base-modal__enter_15icx {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_15icx,
|
|
51
|
+
.base-modal__enterActive_15icx {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_15icx {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_15icx,
|
|
59
|
+
.base-modal__exitDone_15icx {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 5o7wx */
|
|
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-
|
|
13
|
+
.base-modal__component_15icx {
|
|
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-
|
|
20
|
+
.base-modal__wrapper_15icx {
|
|
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-
|
|
33
|
+
.base-modal__content_15icx {
|
|
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-
|
|
40
|
+
.base-modal__hidden_15icx {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_15icx {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_15icx,
|
|
47
|
+
.base-modal__enter_15icx {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_15icx,
|
|
51
|
+
.base-modal__enterActive_15icx {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_15icx {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_15icx,
|
|
59
|
+
.base-modal__exitDone_15icx {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/dist/modern/Component.js
CHANGED
|
@@ -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-
|
|
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"};
|
|
14
14
|
require('./index.css')
|
|
15
15
|
|
|
16
16
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
@@ -40,6 +40,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
40
40
|
const scrollableNodeRef = useRef(null);
|
|
41
41
|
const contentNodeRef = useRef(null);
|
|
42
42
|
const restoreContainerStylesRef = useRef(null);
|
|
43
|
+
const mouseDownTarget = useRef();
|
|
43
44
|
const checkToHasScrollBar = () => {
|
|
44
45
|
if (scrollableNodeRef.current) {
|
|
45
46
|
const scrollExists = hasScrollbar(scrollableNodeRef.current);
|
|
@@ -93,8 +94,15 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
93
94
|
}
|
|
94
95
|
return null;
|
|
95
96
|
}, [onBackdropClick, onClose, onEscapeKeyDown]);
|
|
96
|
-
const
|
|
97
|
-
if (!disableBackdropClick
|
|
97
|
+
const handleBackdropMouseDown = (event) => {
|
|
98
|
+
if (!disableBackdropClick) {
|
|
99
|
+
mouseDownTarget.current = event.target;
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const handleBackdropMouseUp = (event) => {
|
|
103
|
+
if (!disableBackdropClick &&
|
|
104
|
+
event.target === wrapperRef.current &&
|
|
105
|
+
mouseDownTarget.current === wrapperRef.current) {
|
|
98
106
|
handleClose(event, 'backdropClick');
|
|
99
107
|
}
|
|
100
108
|
};
|
|
@@ -202,7 +210,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
202
210
|
} }))),
|
|
203
211
|
React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
|
|
204
212
|
[styles.hidden]: !open && exited,
|
|
205
|
-
}), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown,
|
|
213
|
+
}), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
|
|
206
214
|
zIndex: computedZIndex,
|
|
207
215
|
} },
|
|
208
216
|
React.createElement(CSSTransition, Object.assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
|
package/dist/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 5o7wx */
|
|
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-
|
|
13
|
+
.base-modal__component_15icx {
|
|
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-
|
|
20
|
+
.base-modal__wrapper_15icx {
|
|
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-
|
|
33
|
+
.base-modal__content_15icx {
|
|
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-
|
|
40
|
+
.base-modal__hidden_15icx {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_15icx {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_15icx,
|
|
47
|
+
.base-modal__enter_15icx {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_15icx,
|
|
51
|
+
.base-modal__enterActive_15icx {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_15icx {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_15icx,
|
|
59
|
+
.base-modal__exitDone_15icx {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-base-modal",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"description": "BaseModal component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@alfalab/core-components-backdrop": "^2.0
|
|
19
|
-
"@alfalab/core-components-global-store": "^1.1.
|
|
20
|
-
"@alfalab/core-components-portal": "^2.0.
|
|
21
|
-
"@alfalab/core-components-stack": "^3.0.
|
|
22
|
-
"classnames": "2.2.6",
|
|
23
|
-
"react-focus-lock": "2.5.0",
|
|
24
|
-
"react-merge-refs": "1.1.0",
|
|
25
|
-
"react-transition-group": "4.4.1",
|
|
26
|
-
"resize-observer": "1.0.0"
|
|
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",
|
|
22
|
+
"classnames": "^2.2.6",
|
|
23
|
+
"react-focus-lock": "^2.5.0",
|
|
24
|
+
"react-merge-refs": "^1.1.0",
|
|
25
|
+
"react-transition-group": "^4.4.1",
|
|
26
|
+
"resize-observer": "^1.0.0"
|
|
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": "
|
|
34
|
+
"gitHead": "7faa1479f68e818fde406010fe07b8ee126deffb"
|
|
35
35
|
}
|