@semcore/modal 3.0.7 → 3.0.10
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 +18 -0
- package/README.md +2 -2
- package/lib/cjs/Modal.js +7 -7
- package/lib/cjs/Modal.js.map +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/es6/Modal.js +7 -7
- package/lib/es6/Modal.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/package.json +1 -1
- package/src/Modal.jsx +0 -149
- package/src/index.d.ts +0 -37
- package/src/index.js +0 -1
- package/src/style/modal.shadow.css +0 -68
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.10] - 2022-07-25
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.29.1 ~> 2.29.2]).
|
|
10
|
+
|
|
11
|
+
## [3.0.9] - 2022-07-22
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.34.0 ~> 3.35.0], `@semcore/animation` [1.5.4 ~> 1.5.5], `@semcore/flex-box` [4.5.6 ~> 4.5.7], `@semcore/icon` [2.29.0 ~> 2.29.1]).
|
|
16
|
+
|
|
17
|
+
## [3.0.8] - 2022-07-21
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
|
|
22
|
+
|
|
5
23
|
## [3.0.7] - 2022-07-07
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -42,12 +42,12 @@ of the components that is discussed below. There should only be one version of t
|
|
|
42
42
|
|
|
43
43
|
You can use the package the same way but without `/ui/` in the import path.
|
|
44
44
|
|
|
45
|
-
</details>
|
|
46
|
-
|
|
47
45
|
```jsx
|
|
48
46
|
import Modal from '@semcore/modal';
|
|
49
47
|
```
|
|
50
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
51
51
|
## 👤 Author
|
|
52
52
|
|
|
53
53
|
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
package/lib/cjs/Modal.js
CHANGED
|
@@ -70,15 +70,15 @@ var style = (
|
|
|
70
70
|
/*__reshadow_css_start__*/
|
|
71
71
|
_core.sstyled.insert(
|
|
72
72
|
/*__inner_css_start__*/
|
|
73
|
-
".
|
|
73
|
+
".___SWindow_6h928_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_6h928_gg_:focus{outline:none}.___SOverlay_6h928_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(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_6h928_gg_ .___SOverlay_6h928_gg_{background:rgba(25,27,35,.4)}.___SClose_6h928_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_6h928_gg_:hover{color:#8a8e9b}.___SClose_6h928_gg_.__keyboardFocused_6h928_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_6h928_gg_{min-width:60%}.___SOverlay_6h928_gg_{padding:12px}}"
|
|
74
74
|
/*__inner_css_end__*/
|
|
75
|
-
, "
|
|
75
|
+
, "6h928_gg_")
|
|
76
76
|
/*__reshadow_css_end__*/
|
|
77
77
|
, {
|
|
78
|
-
"__SWindow": "
|
|
79
|
-
"__SOverlay": "
|
|
80
|
-
"__SClose": "
|
|
81
|
-
"_keyboardFocused": "
|
|
78
|
+
"__SWindow": "___SWindow_6h928_gg_",
|
|
79
|
+
"__SOverlay": "___SOverlay_6h928_gg_",
|
|
80
|
+
"__SClose": "___SClose_6h928_gg_",
|
|
81
|
+
"_keyboardFocused": "__keyboardFocused_6h928_gg_"
|
|
82
82
|
});
|
|
83
83
|
|
|
84
84
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -165,7 +165,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
165
165
|
closable: true
|
|
166
166
|
});
|
|
167
167
|
|
|
168
|
-
var FocusLockWrapper = _react["default"].forwardRef(function (_ref8, ref) {
|
|
168
|
+
var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, ref) {
|
|
169
169
|
var tag = _ref8.tag,
|
|
170
170
|
other = (0, _objectWithoutProperties2["default"])(_ref8, _excluded);
|
|
171
171
|
return /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], (0, _extends2["default"])({
|
package/lib/cjs/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["ModalRoot","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","useRef","sstyled","Box","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","defaultProps","children","enhance","keyboardFocusEnhance","createComponent"],"sources":["../../src/Modal.jsx"],"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"],"mappings":"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"}
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Modal';\n"],"mappings":";;;;;;;;;;;;;;AAAA"}
|
package/lib/es6/Modal.js
CHANGED
|
@@ -40,15 +40,15 @@ var style = (
|
|
|
40
40
|
/*__reshadow_css_start__*/
|
|
41
41
|
_sstyled.insert(
|
|
42
42
|
/*__inner_css_start__*/
|
|
43
|
-
".
|
|
43
|
+
".___SWindow_6h928_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_6h928_gg_:focus{outline:none}.___SOverlay_6h928_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(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_6h928_gg_ .___SOverlay_6h928_gg_{background:rgba(25,27,35,.4)}.___SClose_6h928_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_6h928_gg_:hover{color:#8a8e9b}.___SClose_6h928_gg_.__keyboardFocused_6h928_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_6h928_gg_{min-width:60%}.___SOverlay_6h928_gg_{padding:12px}}"
|
|
44
44
|
/*__inner_css_end__*/
|
|
45
|
-
, "
|
|
45
|
+
, "6h928_gg_")
|
|
46
46
|
/*__reshadow_css_end__*/
|
|
47
47
|
, {
|
|
48
|
-
"__SWindow": "
|
|
49
|
-
"__SOverlay": "
|
|
50
|
-
"__SClose": "
|
|
51
|
-
"_keyboardFocused": "
|
|
48
|
+
"__SWindow": "___SWindow_6h928_gg_",
|
|
49
|
+
"__SOverlay": "___SOverlay_6h928_gg_",
|
|
50
|
+
"__SClose": "___SClose_6h928_gg_",
|
|
51
|
+
"_keyboardFocused": "__keyboardFocused_6h928_gg_"
|
|
52
52
|
});
|
|
53
53
|
|
|
54
54
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -142,7 +142,7 @@ _defineProperty(ModalRoot, "defaultProps", {
|
|
|
142
142
|
closable: true
|
|
143
143
|
});
|
|
144
144
|
|
|
145
|
-
var FocusLockWrapper = React.forwardRef(function (_ref8, ref) {
|
|
145
|
+
var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
|
|
146
146
|
var tag = _ref8.tag,
|
|
147
147
|
other = _objectWithoutProperties(_ref8, _excluded);
|
|
148
148
|
|
package/lib/es6/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"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"],"sources":["../../src/Modal.jsx"],"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"],"mappings":"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"}
|
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Modal';\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB"}
|
package/package.json
CHANGED
package/src/Modal.jsx
DELETED
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import React, { useRef } from 'react';
|
|
2
|
-
import FocusLock from 'react-focus-lock';
|
|
3
|
-
import { FadeInOut } from '@semcore/animation';
|
|
4
|
-
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
5
|
-
import Portal, { PortalProvider } from '@semcore/portal';
|
|
6
|
-
import { Box } from '@semcore/flex-box';
|
|
7
|
-
import OutsideClick from '@semcore/outside-click';
|
|
8
|
-
import CloseIcon from '@semcore/icon/Close/l';
|
|
9
|
-
import fire from '@semcore/utils/lib/fire';
|
|
10
|
-
import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
|
|
11
|
-
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
12
|
-
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
13
|
-
import style from './style/modal.shadow.css';
|
|
14
|
-
|
|
15
|
-
class ModalRoot extends Component {
|
|
16
|
-
static displayName = 'Modal';
|
|
17
|
-
static style = style;
|
|
18
|
-
static defaultProps = {
|
|
19
|
-
duration: 200,
|
|
20
|
-
closable: true,
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
handleKeyDown = (e) => {
|
|
24
|
-
if (e.key === 'Escape') {
|
|
25
|
-
e.stopPropagation();
|
|
26
|
-
fire(this, 'onClose', 'onEscape', e);
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
handleIconCloseClick = (e) => {
|
|
31
|
-
fire(this, 'onClose', 'onCloseClick', e);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
handleOutsideClick = (e) => {
|
|
35
|
-
fire(this, 'onClose', 'onOutsideClick', e);
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
getOverlayProps() {
|
|
39
|
-
const { duration, visible } = this.asProps;
|
|
40
|
-
return {
|
|
41
|
-
duration,
|
|
42
|
-
visible,
|
|
43
|
-
onOutsideClick: this.handleOutsideClick,
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
getWindowProps() {
|
|
48
|
-
const { visible, closable } = this.asProps;
|
|
49
|
-
return {
|
|
50
|
-
visible,
|
|
51
|
-
closable,
|
|
52
|
-
onKeyDown: this.handleKeyDown,
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
getCloseProps() {
|
|
57
|
-
return {
|
|
58
|
-
onClick: this.handleIconCloseClick,
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
render() {
|
|
63
|
-
const { Children, disablePortal } = this.asProps;
|
|
64
|
-
|
|
65
|
-
const advanceMode = isAdvanceMode(Children, [
|
|
66
|
-
Modal.Overlay.displayName,
|
|
67
|
-
Modal.Window.displayName,
|
|
68
|
-
]);
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<Portal disablePortal={disablePortal}>
|
|
72
|
-
{advanceMode ? (
|
|
73
|
-
<Children />
|
|
74
|
-
) : (
|
|
75
|
-
<Modal.Overlay>
|
|
76
|
-
<Root render={Modal.Window} />
|
|
77
|
-
</Modal.Overlay>
|
|
78
|
-
)}
|
|
79
|
-
</Portal>
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const FocusLockWrapper = React.forwardRef(function ({ tag, ...other }, ref) {
|
|
85
|
-
return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
function Window(props) {
|
|
89
|
-
const SWindow = Root;
|
|
90
|
-
const { Children, styles, visible, closable } = props;
|
|
91
|
-
const windowRef = useRef(null);
|
|
92
|
-
|
|
93
|
-
if (!visible) return null;
|
|
94
|
-
|
|
95
|
-
return sstyled(styles)(
|
|
96
|
-
<SWindow
|
|
97
|
-
render={FocusLockWrapper}
|
|
98
|
-
tag={Box}
|
|
99
|
-
ref={windowRef}
|
|
100
|
-
returnFocus={true}
|
|
101
|
-
tabIndex={-1}
|
|
102
|
-
autoFocus={true}
|
|
103
|
-
role="dialog"
|
|
104
|
-
aria-modal={true}
|
|
105
|
-
aria-label="Modal window"
|
|
106
|
-
>
|
|
107
|
-
<PortalProvider value={windowRef}>
|
|
108
|
-
{closable && <Modal.Close />}
|
|
109
|
-
<Children />
|
|
110
|
-
</PortalProvider>
|
|
111
|
-
</SWindow>,
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
function Overlay(props) {
|
|
116
|
-
const SOverlay = Root;
|
|
117
|
-
const { Children, styles, onOutsideClick, visible } = props;
|
|
118
|
-
const overlayRef = useRef(null);
|
|
119
|
-
usePreventScroll(visible);
|
|
120
|
-
|
|
121
|
-
return sstyled(styles)(
|
|
122
|
-
<SOverlay render={FadeInOut} ref={overlayRef}>
|
|
123
|
-
<OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>
|
|
124
|
-
<Children />
|
|
125
|
-
</OutsideClick>
|
|
126
|
-
</SOverlay>,
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
function Close(props) {
|
|
131
|
-
const SClose = Root;
|
|
132
|
-
return sstyled(props.styles)(
|
|
133
|
-
<SClose render={Box} tag="button" tabIndex={0} aria-label="Close" />,
|
|
134
|
-
);
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
Close.defaultProps = {
|
|
138
|
-
children: <CloseIcon title="Close" />,
|
|
139
|
-
};
|
|
140
|
-
|
|
141
|
-
Close.enhance = [keyboardFocusEnhance()];
|
|
142
|
-
|
|
143
|
-
const Modal = createComponent(ModalRoot, {
|
|
144
|
-
Window,
|
|
145
|
-
Overlay,
|
|
146
|
-
Close,
|
|
147
|
-
});
|
|
148
|
-
|
|
149
|
-
export default Modal;
|
package/src/index.d.ts
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React, { ComponentProps } from 'react';
|
|
2
|
-
import { IFadeInOutProps } from '@semcore/animation';
|
|
3
|
-
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
4
|
-
import { IPortalProps } from '@semcore/portal';
|
|
5
|
-
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
6
|
-
|
|
7
|
-
export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
8
|
-
/** Duration of animation, ms
|
|
9
|
-
* @default 200
|
|
10
|
-
*/
|
|
11
|
-
duration?: number;
|
|
12
|
-
/** This property is responsible for the visibility of the modal window */
|
|
13
|
-
visible?: boolean;
|
|
14
|
-
/** Function called when the component is hidden */
|
|
15
|
-
onClose?: (
|
|
16
|
-
trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',
|
|
17
|
-
e?: React.MouseEvent | React.KeyboardEvent,
|
|
18
|
-
) => void;
|
|
19
|
-
/** Displaying the close button(x) in the upper-right corner of the modal dialog
|
|
20
|
-
* @default true
|
|
21
|
-
* */
|
|
22
|
-
closable?: boolean;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export interface IModalContext {
|
|
26
|
-
getOverlayProps: PropGetterFn;
|
|
27
|
-
getWindowProps: PropGetterFn;
|
|
28
|
-
getCloseProps: PropGetterFn;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
declare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {
|
|
32
|
-
Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
33
|
-
Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
34
|
-
Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export default Modal;
|
package/src/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from './Modal';
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
@import '@semcore/utils/style/var.css';
|
|
2
|
-
|
|
3
|
-
SWindow {
|
|
4
|
-
position: relative;
|
|
5
|
-
border-radius: var(--rounded-l);
|
|
6
|
-
background: var(--white);
|
|
7
|
-
box-sizing: border-box;
|
|
8
|
-
margin: auto;
|
|
9
|
-
padding: 40px;
|
|
10
|
-
box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
|
|
11
|
-
|
|
12
|
-
&:focus {
|
|
13
|
-
outline: none;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
SOverlay {
|
|
18
|
-
position: fixed;
|
|
19
|
-
top: 0;
|
|
20
|
-
bottom: 0;
|
|
21
|
-
left: 0;
|
|
22
|
-
right: 0;
|
|
23
|
-
margin: 0;
|
|
24
|
-
display: flex;
|
|
25
|
-
justify-content: center;
|
|
26
|
-
align-items: center;
|
|
27
|
-
padding: 40px;
|
|
28
|
-
background: color-mod(var(--gray-800) a(70%));
|
|
29
|
-
overflow: auto;
|
|
30
|
-
z-index: 10005;
|
|
31
|
-
-webkit-overflow-scrolling: touch;
|
|
32
|
-
|
|
33
|
-
& SOverlay {
|
|
34
|
-
background: color-mod(var(--gray-800) a(40%));
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
SClose {
|
|
39
|
-
display: inline-flex;
|
|
40
|
-
position: absolute;
|
|
41
|
-
right: 0;
|
|
42
|
-
top: 0;
|
|
43
|
-
padding: 12px;
|
|
44
|
-
color: var(--gray-300);
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
z-index: 1;
|
|
47
|
-
border: none;
|
|
48
|
-
background: none;
|
|
49
|
-
outline: none;
|
|
50
|
-
|
|
51
|
-
&:hover {
|
|
52
|
-
color: var(--gray-400);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
SClose[keyboardFocused] {
|
|
57
|
-
box-shadow: var(--keyboard-focus);
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
@media (max-width: 767px) {
|
|
61
|
-
SWindow {
|
|
62
|
-
min-width: 60%;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
SOverlay {
|
|
66
|
-
padding: 12px;
|
|
67
|
-
}
|
|
68
|
-
}
|