@semcore/modal 2.3.2 → 2.4.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 +25 -0
- package/lib/cjs/Modal.js +10 -10
- package/lib/cjs/Modal.js.map +1 -1
- package/lib/cjs/style/modal.shadow.css +2 -2
- package/lib/es6/Modal.js +10 -10
- package/lib/es6/Modal.js.map +1 -1
- package/lib/es6/style/modal.shadow.css +2 -2
- package/lib/types/index.d.ts +1 -2
- package/package.json +4 -3
- package/src/Modal.js +4 -4
- package/src/index.d.ts +1 -2
- package/src/style/modal.shadow.css +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [2.4.1] - 2022-01-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Replaced function `findComponent` to `isAdvanceMode` for check children in `Modal`.
|
|
10
|
+
|
|
11
|
+
## [2.4.0] - 2022-01-18
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Up version icons and use new icon.
|
|
16
|
+
|
|
17
|
+
## [2.3.4] - 2021-9-13
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Changed overlay opacity from 80% to 60%
|
|
22
|
+
- Changed overlay opacity for the second modal window from 20% to 40%
|
|
23
|
+
|
|
24
|
+
## [2.3.3] - 2021-8-26
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- Add 'sideEffect=false' for more optimal build via webpack
|
|
29
|
+
|
|
5
30
|
## [2.3.2] - 2021-06-28
|
|
6
31
|
|
|
7
32
|
### Changed
|
package/lib/cjs/Modal.js
CHANGED
|
@@ -41,13 +41,13 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
41
41
|
|
|
42
42
|
var _outsideClick = _interopRequireDefault(require("@semcore/outside-click"));
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var _l = _interopRequireDefault(require("@semcore/icon/Close/l"));
|
|
45
45
|
|
|
46
46
|
var _fire = _interopRequireDefault(require("@semcore/utils/lib/fire"));
|
|
47
47
|
|
|
48
48
|
var _usePreventScroll = _interopRequireDefault(require("@semcore/utils/lib/use/usePreventScroll"));
|
|
49
49
|
|
|
50
|
-
var _findComponent =
|
|
50
|
+
var _findComponent = require("@semcore/utils/lib/findComponent");
|
|
51
51
|
|
|
52
52
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
53
53
|
|
|
@@ -64,15 +64,15 @@ var style = (
|
|
|
64
64
|
/*__reshadow_css_start__*/
|
|
65
65
|
_core.sstyled.insert(
|
|
66
66
|
/*__inner_css_start__*/
|
|
67
|
-
".
|
|
67
|
+
".___SWindow_n71dz_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_n71dz_gg_:focus{outline:none}.___SOverlay_n71dz_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_n71dz_gg_ .___SOverlay_n71dz_gg_{background:rgba(0,0,0,.4)}.___SClose_n71dz_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_n71dz_gg_:hover{color:#929b9e}.___SClose_n71dz_gg_.__keyboardFocused_n71dz_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_n71dz_gg_{min-width:60%}.___SOverlay_n71dz_gg_{padding:10px}}"
|
|
68
68
|
/*__inner_css_end__*/
|
|
69
|
-
, "
|
|
69
|
+
, "juwj6d_gg_")
|
|
70
70
|
/*__reshadow_css_end__*/
|
|
71
71
|
, {
|
|
72
|
-
"__SWindow": "
|
|
73
|
-
"__SOverlay": "
|
|
74
|
-
"__SClose": "
|
|
75
|
-
"_keyboardFocused": "
|
|
72
|
+
"__SWindow": "___SWindow_n71dz_gg_",
|
|
73
|
+
"__SOverlay": "___SOverlay_n71dz_gg_",
|
|
74
|
+
"__SClose": "___SClose_n71dz_gg_",
|
|
75
|
+
"_keyboardFocused": "__keyboardFocused_n71dz_gg_"
|
|
76
76
|
});
|
|
77
77
|
|
|
78
78
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -144,7 +144,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
144
144
|
var _this$asProps3 = this.asProps,
|
|
145
145
|
Children = _this$asProps3.Children,
|
|
146
146
|
disablePortal = _this$asProps3.disablePortal;
|
|
147
|
-
var advanceMode =
|
|
147
|
+
var advanceMode = (0, _findComponent.isAdvanceMode)(Children, [Modal.Overlay.displayName, Modal.Window.displayName]);
|
|
148
148
|
return /*#__PURE__*/_react["default"].createElement(_portal["default"], {
|
|
149
149
|
disablePortal: disablePortal
|
|
150
150
|
}, advanceMode ? /*#__PURE__*/_react["default"].createElement(Children, null) : /*#__PURE__*/_react["default"].createElement(Modal.Overlay, null, /*#__PURE__*/_react["default"].createElement(Modal.Window, (0, _core.assignProps)({}, _ref))));
|
|
@@ -227,7 +227,7 @@ function Close(props) {
|
|
|
227
227
|
}
|
|
228
228
|
|
|
229
229
|
Close.defaultProps = {
|
|
230
|
-
children: /*#__PURE__*/_react["default"].createElement(
|
|
230
|
+
children: /*#__PURE__*/_react["default"].createElement(_l["default"], {
|
|
231
231
|
title: "Close"
|
|
232
232
|
})
|
|
233
233
|
};
|
package/lib/cjs/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal.js"],"names":["ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","Box","SOverlay","FadeInOut","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AAHA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;IAGMA,S;;;;;;;;;;;;;;;sGAQY,UAACC,CAAD,EAAO;AACrB,UAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;AACtBD,QAAAA,CAAC,CAACE,eAAF;AACA,8EAAW,SAAX,EAAsB,UAAtB,EAAkCF,CAAlC;AACD;AACF,K;6GAEsB,UAACA,CAAD,EAAO;AAC5B,4EAAW,SAAX,EAAsB,cAAtB,EAAsCA,CAAtC;AACD,K;2GAEoB,UAACA,CAAD,EAAO;AAC1B,4EAAW,SAAX,EAAsB,gBAAtB,EAAwCA,CAAxC;AACD,K;;;;;;WAED,2BAAkB;AAAA,0BACc,KAAKG,OADnB;AAAA,UACRC,QADQ,iBACRA,QADQ;AAAA,UACEC,OADF,iBACEA,OADF;AAEhB,aAAO;AACLD,QAAAA,QAAQ,EAARA,QADK;AAELC,QAAAA,OAAO,EAAPA,OAFK;AAGLC,QAAAA,cAAc,EAAE,KAAKC;AAHhB,OAAP;AAKD;;;WAED,0BAAiB;AAAA,2BACe,KAAKJ,OADpB;AAAA,UACPE,OADO,kBACPA,OADO;AAAA,UACEG,QADF,kBACEA,QADF;AAEf,aAAO;AACLH,QAAAA,OAAO,EAAPA,OADK;AAELG,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,SAAS,EAAE,KAAKC;AAHX,OAAP;AAKD;;;WAED,yBAAgB;AACd,aAAO;AACLC,QAAAA,OAAO,EAAE,KAAKC;AADT,OAAP;AAGD;;;WAED,kBAAS;AAAA;;AAAA,2BAC6B,KAAKT,OADlC;AAAA,UACCU,QADD,kBACCA,QADD;AAAA,UACWC,aADX,kBACWA,aADX;AAGP,UAAMC,WAAW,GAAG,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal.js"],"names":["ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","Box","SOverlay","FadeInOut","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static defaultProps = {\n duration: 200,\n closable: true,\n };\n\n handleKeyDown = (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n fire(this, 'onClose', 'onEscape', e);\n }\n };\n\n handleIconCloseClick = (e) => {\n fire(this, 'onClose', 'onCloseClick', e);\n };\n\n handleOutsideClick = (e) => {\n fire(this, 'onClose', 'onOutsideClick', e);\n };\n\n getOverlayProps() {\n const { duration, visible } = this.asProps;\n return {\n duration,\n visible,\n onOutsideClick: this.handleOutsideClick,\n };\n }\n\n getWindowProps() {\n const { visible, closable } = this.asProps;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n };\n }\n\n getCloseProps() {\n return {\n onClick: this.handleIconCloseClick,\n };\n }\n\n render() {\n const { Children, disablePortal } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n Modal.Overlay.displayName,\n Modal.Window.displayName,\n ]);\n\n return (\n <Portal disablePortal={disablePortal}>\n {advanceMode ? (\n <Children />\n ) : (\n <Modal.Overlay>\n <Root render={Modal.Window} />\n </Modal.Overlay>\n )}\n </Portal>\n );\n }\n}\n\nconst FocusLockWrapper = React.forwardRef(function({ tag, ...other }, ref) {\n return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n const SWindow = Root;\n const { Children, styles, visible, closable } = props;\n const windowRef = useRef(null);\n\n if (!visible) return null;\n\n return sstyled(styles)(\n <SWindow\n render={FocusLockWrapper}\n tag={Box}\n ref={windowRef}\n returnFocus={true}\n tabIndex={-1}\n autoFocus={true}\n role=\"dialog\"\n aria-modal={true}\n aria-label=\"Modal window\"\n >\n <PortalProvider value={windowRef}>\n {closable && <Modal.Close />}\n <Children />\n </PortalProvider>\n </SWindow>,\n );\n}\n\nfunction Overlay(props) {\n const SOverlay = Root;\n const { Children, styles, onOutsideClick, visible } = props;\n const overlayRef = useRef(null);\n usePreventScroll(visible);\n\n return sstyled(styles)(\n <SOverlay render={FadeInOut} ref={overlayRef}>\n <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n <Children />\n </OutsideClick>\n </SOverlay>,\n );\n}\n\nfunction Close(props) {\n const SClose = Root;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n );\n}\n\nClose.defaultProps = {\n children: <CloseIcon title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}
|
|
@@ -24,13 +24,13 @@ SOverlay {
|
|
|
24
24
|
justify-content: center;
|
|
25
25
|
align-items: center;
|
|
26
26
|
padding: 40px;
|
|
27
|
-
background: rgba(0, 0, 0, 0.
|
|
27
|
+
background: rgba(0, 0, 0, 0.6);
|
|
28
28
|
overflow: auto;
|
|
29
29
|
z-index: 10005;
|
|
30
30
|
-webkit-overflow-scrolling: touch;
|
|
31
31
|
|
|
32
32
|
& SOverlay {
|
|
33
|
-
background: rgba(0, 0, 0, 0.
|
|
33
|
+
background: rgba(0, 0, 0, 0.4);
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
package/lib/es6/Modal.js
CHANGED
|
@@ -28,10 +28,10 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
28
28
|
import Portal, { PortalProvider } from '@semcore/portal';
|
|
29
29
|
import { Box } from '@semcore/flex-box';
|
|
30
30
|
import OutsideClick from '@semcore/outside-click';
|
|
31
|
-
import
|
|
31
|
+
import CloseIcon from '@semcore/icon/Close/l';
|
|
32
32
|
import fire from '@semcore/utils/lib/fire';
|
|
33
33
|
import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
|
|
34
|
-
import
|
|
34
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
35
35
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
36
36
|
|
|
37
37
|
/*__reshadow-styles__:"./style/modal.shadow.css"*/
|
|
@@ -39,15 +39,15 @@ var style = (
|
|
|
39
39
|
/*__reshadow_css_start__*/
|
|
40
40
|
_sstyled.insert(
|
|
41
41
|
/*__inner_css_start__*/
|
|
42
|
-
".
|
|
42
|
+
".___SWindow_n71dz_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_n71dz_gg_:focus{outline:none}.___SOverlay_n71dz_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_n71dz_gg_ .___SOverlay_n71dz_gg_{background:rgba(0,0,0,.4)}.___SClose_n71dz_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_n71dz_gg_:hover{color:#929b9e}.___SClose_n71dz_gg_.__keyboardFocused_n71dz_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_n71dz_gg_{min-width:60%}.___SOverlay_n71dz_gg_{padding:10px}}"
|
|
43
43
|
/*__inner_css_end__*/
|
|
44
|
-
, "
|
|
44
|
+
, "juwj6d_gg_")
|
|
45
45
|
/*__reshadow_css_end__*/
|
|
46
46
|
, {
|
|
47
|
-
"__SWindow": "
|
|
48
|
-
"__SOverlay": "
|
|
49
|
-
"__SClose": "
|
|
50
|
-
"_keyboardFocused": "
|
|
47
|
+
"__SWindow": "___SWindow_n71dz_gg_",
|
|
48
|
+
"__SOverlay": "___SOverlay_n71dz_gg_",
|
|
49
|
+
"__SClose": "___SClose_n71dz_gg_",
|
|
50
|
+
"_keyboardFocused": "__keyboardFocused_n71dz_gg_"
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -123,7 +123,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
123
123
|
var _this$asProps3 = this.asProps,
|
|
124
124
|
Children = _this$asProps3.Children,
|
|
125
125
|
disablePortal = _this$asProps3.disablePortal;
|
|
126
|
-
var advanceMode =
|
|
126
|
+
var advanceMode = isAdvanceMode(Children, [Modal.Overlay.displayName, Modal.Window.displayName]);
|
|
127
127
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
128
128
|
disablePortal: disablePortal
|
|
129
129
|
}, advanceMode ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(Modal.Overlay, null, /*#__PURE__*/React.createElement(Modal.Window, _assignProps({}, _ref))));
|
|
@@ -210,7 +210,7 @@ function Close(props) {
|
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
Close.defaultProps = {
|
|
213
|
-
children: /*#__PURE__*/React.createElement(
|
|
213
|
+
children: /*#__PURE__*/React.createElement(CloseIcon, {
|
|
214
214
|
title: "Close"
|
|
215
215
|
})
|
|
216
216
|
};
|
package/lib/es6/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modal.js"],"names":["React","useRef","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","
|
|
1
|
+
{"version":3,"sources":["../../src/Modal.js"],"names":["React","useRef","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","isAdvanceMode","keyboardFocusEnhance","ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static defaultProps = {\n duration: 200,\n closable: true,\n };\n\n handleKeyDown = (e) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n fire(this, 'onClose', 'onEscape', e);\n }\n };\n\n handleIconCloseClick = (e) => {\n fire(this, 'onClose', 'onCloseClick', e);\n };\n\n handleOutsideClick = (e) => {\n fire(this, 'onClose', 'onOutsideClick', e);\n };\n\n getOverlayProps() {\n const { duration, visible } = this.asProps;\n return {\n duration,\n visible,\n onOutsideClick: this.handleOutsideClick,\n };\n }\n\n getWindowProps() {\n const { visible, closable } = this.asProps;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n };\n }\n\n getCloseProps() {\n return {\n onClick: this.handleIconCloseClick,\n };\n }\n\n render() {\n const { Children, disablePortal } = this.asProps;\n\n const advanceMode = isAdvanceMode(Children, [\n Modal.Overlay.displayName,\n Modal.Window.displayName,\n ]);\n\n return (\n <Portal disablePortal={disablePortal}>\n {advanceMode ? (\n <Children />\n ) : (\n <Modal.Overlay>\n <Root render={Modal.Window} />\n </Modal.Overlay>\n )}\n </Portal>\n );\n }\n}\n\nconst FocusLockWrapper = React.forwardRef(function({ tag, ...other }, ref) {\n return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n const SWindow = Root;\n const { Children, styles, visible, closable } = props;\n const windowRef = useRef(null);\n\n if (!visible) return null;\n\n return sstyled(styles)(\n <SWindow\n render={FocusLockWrapper}\n tag={Box}\n ref={windowRef}\n returnFocus={true}\n tabIndex={-1}\n autoFocus={true}\n role=\"dialog\"\n aria-modal={true}\n aria-label=\"Modal window\"\n >\n <PortalProvider value={windowRef}>\n {closable && <Modal.Close />}\n <Children />\n </PortalProvider>\n </SWindow>,\n );\n}\n\nfunction Overlay(props) {\n const SOverlay = Root;\n const { Children, styles, onOutsideClick, visible } = props;\n const overlayRef = useRef(null);\n usePreventScroll(visible);\n\n return sstyled(styles)(\n <SOverlay render={FadeInOut} ref={overlayRef}>\n <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n <Children />\n </OutsideClick>\n </SOverlay>,\n );\n}\n\nfunction Close(props) {\n const SClose = Root;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n );\n}\n\nClose.defaultProps = {\n children: <CloseIcon title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}
|
|
@@ -24,13 +24,13 @@ SOverlay {
|
|
|
24
24
|
justify-content: center;
|
|
25
25
|
align-items: center;
|
|
26
26
|
padding: 40px;
|
|
27
|
-
background: rgba(0, 0, 0, 0.
|
|
27
|
+
background: rgba(0, 0, 0, 0.6);
|
|
28
28
|
overflow: auto;
|
|
29
29
|
z-index: 10005;
|
|
30
30
|
-webkit-overflow-scrolling: touch;
|
|
31
31
|
|
|
32
32
|
& SOverlay {
|
|
33
|
-
background: rgba(0, 0, 0, 0.
|
|
33
|
+
background: rgba(0, 0, 0, 0.4);
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
package/lib/types/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import { IFadeInOutProps } from '@semcore/animation';
|
|
|
3
3
|
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
4
4
|
import { IPortalProps } from '@semcore/portal';
|
|
5
5
|
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
6
|
-
import { ILinkProps } from '@semcore/link/src';
|
|
7
6
|
|
|
8
7
|
export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
9
8
|
/** Duration of animation, ms
|
|
@@ -23,7 +22,7 @@ export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
|
23
22
|
closable?: boolean;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
|
-
export interface IModalContext
|
|
25
|
+
export interface IModalContext {
|
|
27
26
|
getOverlayProps: PropGetterFn;
|
|
28
27
|
getWindowProps: PropGetterFn;
|
|
29
28
|
getCloseProps: PropGetterFn;
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/modal",
|
|
3
3
|
"description": "SEMRush Modal Component",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.4.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
|
+
"sideEffects": false,
|
|
8
9
|
"author": "Roman Lysov <r.lysov@semrush.com>",
|
|
9
10
|
"license": "MIT",
|
|
10
11
|
"scripts": {
|
|
@@ -12,11 +13,11 @@
|
|
|
12
13
|
"test": "jest"
|
|
13
14
|
},
|
|
14
15
|
"dependencies": {
|
|
15
|
-
"@semcore/utils": "^3.
|
|
16
|
+
"@semcore/utils": "^3.31",
|
|
16
17
|
"@semcore/animation": "^1",
|
|
17
18
|
"@semcore/portal": "^2",
|
|
18
19
|
"@semcore/flex-box": "^4",
|
|
19
|
-
"@semcore/icon": "^2",
|
|
20
|
+
"@semcore/icon": "^2.16",
|
|
20
21
|
"@semcore/outside-click": "^2",
|
|
21
22
|
"react-focus-lock": "^2.3"
|
|
22
23
|
},
|
package/src/Modal.js
CHANGED
|
@@ -5,10 +5,10 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
5
5
|
import Portal, { PortalProvider } from '@semcore/portal';
|
|
6
6
|
import { Box } from '@semcore/flex-box';
|
|
7
7
|
import OutsideClick from '@semcore/outside-click';
|
|
8
|
-
import
|
|
8
|
+
import CloseIcon from '@semcore/icon/Close/l';
|
|
9
9
|
import fire from '@semcore/utils/lib/fire';
|
|
10
10
|
import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
|
|
11
|
-
import
|
|
11
|
+
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
12
12
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
13
13
|
import style from './style/modal.shadow.css';
|
|
14
14
|
|
|
@@ -62,7 +62,7 @@ class ModalRoot extends Component {
|
|
|
62
62
|
render() {
|
|
63
63
|
const { Children, disablePortal } = this.asProps;
|
|
64
64
|
|
|
65
|
-
const advanceMode =
|
|
65
|
+
const advanceMode = isAdvanceMode(Children, [
|
|
66
66
|
Modal.Overlay.displayName,
|
|
67
67
|
Modal.Window.displayName,
|
|
68
68
|
]);
|
|
@@ -135,7 +135,7 @@ function Close(props) {
|
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
Close.defaultProps = {
|
|
138
|
-
children: <
|
|
138
|
+
children: <CloseIcon title="Close" />,
|
|
139
139
|
};
|
|
140
140
|
|
|
141
141
|
Close.enhance = [keyboardFocusEnhance()];
|
package/src/index.d.ts
CHANGED
|
@@ -3,7 +3,6 @@ import { IFadeInOutProps } from '@semcore/animation';
|
|
|
3
3
|
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
4
4
|
import { IPortalProps } from '@semcore/portal';
|
|
5
5
|
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
6
|
-
import { ILinkProps } from '@semcore/link/src';
|
|
7
6
|
|
|
8
7
|
export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
9
8
|
/** Duration of animation, ms
|
|
@@ -23,7 +22,7 @@ export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
|
23
22
|
closable?: boolean;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
|
-
export interface IModalContext
|
|
25
|
+
export interface IModalContext {
|
|
27
26
|
getOverlayProps: PropGetterFn;
|
|
28
27
|
getWindowProps: PropGetterFn;
|
|
29
28
|
getCloseProps: PropGetterFn;
|
|
@@ -24,13 +24,13 @@ SOverlay {
|
|
|
24
24
|
justify-content: center;
|
|
25
25
|
align-items: center;
|
|
26
26
|
padding: 40px;
|
|
27
|
-
background: rgba(0, 0, 0, 0.
|
|
27
|
+
background: rgba(0, 0, 0, 0.6);
|
|
28
28
|
overflow: auto;
|
|
29
29
|
z-index: 10005;
|
|
30
30
|
-webkit-overflow-scrolling: touch;
|
|
31
31
|
|
|
32
32
|
& SOverlay {
|
|
33
|
-
background: rgba(0, 0, 0, 0.
|
|
33
|
+
background: rgba(0, 0, 0, 0.4);
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|