@alfalab/core-components-base-modal 4.1.0 → 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.
Files changed (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Component.js +12 -4
  3. package/dist/cssm/Component.js +11 -3
  4. package/dist/esm/Component.js +12 -4
  5. package/dist/esm/index.css +13 -13
  6. package/dist/index.css +13 -13
  7. package/dist/modern/Component.js +12 -4
  8. package/dist/modern/index.css +13 -13
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.1.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
+
6
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)
7
18
 
8
19
 
package/dist/Component.js CHANGED
@@ -48,7 +48,7 @@ var __assign = function () {
48
48
  return __assign.apply(this, arguments);
49
49
  };
50
50
 
51
- var styles = {"component":"base-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
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 handleBackdropClick = function (event) {
135
- if (!disableBackdropClick && event.target === wrapperRef.current) {
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, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
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 handleBackdropClick = function (event) {
134
- if (!disableBackdropClick && event.target === wrapperRef.current) {
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, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
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-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
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 handleBackdropClick = function (event) {
124
- if (!disableBackdropClick && event.target === wrapperRef.current) {
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, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
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: 1jd4u */
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-modal__component_nmcj5 {
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-modal__wrapper_nmcj5 {
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-modal__content_nmcj5 {
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-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_15icx {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_15icx {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_15icx,
47
+ .base-modal__enter_15icx {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
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-modal__exit_nmcj5 {
55
+ .base-modal__exit_15icx {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
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: 1jd4u */
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-modal__component_nmcj5 {
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-modal__wrapper_nmcj5 {
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-modal__content_nmcj5 {
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-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_15icx {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_15icx {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_15icx,
47
+ .base-modal__enter_15icx {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
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-modal__exit_nmcj5 {
55
+ .base-modal__exit_15icx {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
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-modal__component_nmcj5","wrapper":"base-modal__wrapper_nmcj5","content":"base-modal__content_nmcj5","hidden":"base-modal__hidden_nmcj5","backdrop":"base-modal__backdrop_nmcj5","appear":"base-modal__appear_nmcj5","enter":"base-modal__enter_nmcj5","appearActive":"base-modal__appearActive_nmcj5","enterActive":"base-modal__enterActive_nmcj5","exit":"base-modal__exit_nmcj5","exitActive":"base-modal__exitActive_nmcj5","exitDone":"base-modal__exitDone_nmcj5"};
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 handleBackdropClick = (event) => {
97
- if (!disableBackdropClick && event.target === wrapperRef.current) {
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, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
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: 1jd4u */
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-modal__component_nmcj5 {
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-modal__wrapper_nmcj5 {
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-modal__content_nmcj5 {
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-modal__hidden_nmcj5 {
40
+ .base-modal__hidden_15icx {
41
41
  display: none;
42
42
  }
43
- .base-modal__backdrop_nmcj5 {
43
+ .base-modal__backdrop_15icx {
44
44
  z-index: 0;
45
45
  }
46
- .base-modal__appear_nmcj5,
47
- .base-modal__enter_nmcj5 {
46
+ .base-modal__appear_15icx,
47
+ .base-modal__enter_15icx {
48
48
  opacity: 0;
49
49
  }
50
- .base-modal__appearActive_nmcj5,
51
- .base-modal__enterActive_nmcj5 {
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-modal__exit_nmcj5 {
55
+ .base-modal__exit_15icx {
56
56
  opacity: 1;
57
57
  }
58
- .base-modal__exitActive_nmcj5,
59
- .base-modal__exitDone_nmcj5 {
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.1.0",
3
+ "version": "4.1.1",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -31,5 +31,5 @@
31
31
  "peerDependencies": {
32
32
  "react": "^16.9.0 || ^17.0.1"
33
33
  },
34
- "gitHead": "dcd5c0c8e25b7c374ff9311505ccf738a82e22c0"
34
+ "gitHead": "7faa1479f68e818fde406010fe07b8ee126deffb"
35
35
  }