@semcore/modal 2.4.7 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/lib/cjs/Modal.js +7 -7
- package/lib/cjs/Modal.js.map +1 -1
- package/lib/cjs/index.d.ts +37 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/modal.shadow.css +9 -8
- package/lib/es6/Modal.js +7 -7
- package/lib/es6/Modal.js.map +1 -1
- package/lib/es6/index.d.ts +37 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/modal.shadow.css +9 -8
- package/package.json +5 -2
- package/src/index.js +0 -1
- package/src/style/modal.shadow.css +9 -8
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.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
|
|
11
|
+
## [2.4.9] - 2022-05-16
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
16
|
+
|
|
17
|
+
## [2.4.8] - 2022-04-28
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
|
|
22
|
+
|
|
5
23
|
## [2.4.7] - 2022-04-03
|
|
6
24
|
|
|
7
25
|
### Changed
|
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_bgw27_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_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_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_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_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_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
|
|
74
74
|
/*__inner_css_end__*/
|
|
75
|
-
, "
|
|
75
|
+
, "kfzky3_gg_")
|
|
76
76
|
/*__reshadow_css_end__*/
|
|
77
77
|
, {
|
|
78
|
-
"__SWindow": "
|
|
79
|
-
"__SOverlay": "
|
|
80
|
-
"__SClose": "
|
|
81
|
-
"_keyboardFocused": "
|
|
78
|
+
"__SWindow": "___SWindow_bgw27_gg_",
|
|
79
|
+
"__SOverlay": "___SOverlay_bgw27_gg_",
|
|
80
|
+
"__SClose": "___SClose_bgw27_gg_",
|
|
81
|
+
"_keyboardFocused": "__keyboardFocused_bgw27_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 =
|
|
168
|
+
var FocusLockWrapper = _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,"sources":["../../src/Modal.jsx"],"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;AAChB,0BAA8B,KAAKG,OAAnC;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,OAAlB,iBAAkBA,OAAlB;AACA,aAAO;AACLD,QAAAA,QAAQ,EAARA,QADK;AAELC,QAAAA,OAAO,EAAPA,OAFK;AAGLC,QAAAA,cAAc,EAAE,KAAKC;AAHhB,OAAP;AAKD;;;WAED,0BAAiB;AACf,2BAA8B,KAAKJ,OAAnC;AAAA,UAAQE,OAAR,kBAAQA,OAAR;AAAA,UAAiBG,QAAjB,kBAAiBA,QAAjB;AACA,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;AACP,2BAAoC,KAAKT,OAAzC;AAAA,UAAQU,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,aAAlB,kBAAkBA,aAAlB;AAEA,UAAMC,WAAW,GAAG,kCAAcF,QAAd,EAAwB,CAC1CG,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAxB,CAApB;AAKA,0BACE,gCAAC,kBAAD;AAAQ,QAAA,aAAa,EAAEJ;AAAvB,SACGC,WAAW,gBACV,gCAAC,QAAD,OADU,gBAGV,gCAAC,KAAD,CAAO,OAAP,qBACE,gCAAcC,KAAK,CAACG,MAApB,mCADF,CAJJ,CADF;AAWD;;;EAlEqBC,e;;iCAAlBrB,S,iBACiB,O;iCADjBA,S,WAEWsB,K;iCAFXtB,S,kBAGkB;AACpBK,EAAAA,QAAQ,EAAE,GADU;AAEpBI,EAAAA,QAAQ,EAAE;AAFU,C;;AAkExB,IAAMc,gBAAgB,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal.jsx"],"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
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/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _Modal =
|
|
17
|
-
|
|
18
|
-
Object.keys(_Modal).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _Modal[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _Modal[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
-
|
|
32
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
var _Modal = _interopRequireDefault(require("./Modal"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Modal';\n"],"file":"index.js"}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
SWindow {
|
|
4
4
|
position: relative;
|
|
5
|
-
border-radius:
|
|
5
|
+
border-radius: var(--rounded-l);
|
|
6
6
|
background: var(--white);
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
margin: auto;
|
|
9
|
-
padding:
|
|
9
|
+
padding: 40px;
|
|
10
|
+
box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
|
|
10
11
|
|
|
11
12
|
&:focus {
|
|
12
13
|
outline: none;
|
|
@@ -24,13 +25,13 @@ SOverlay {
|
|
|
24
25
|
justify-content: center;
|
|
25
26
|
align-items: center;
|
|
26
27
|
padding: 40px;
|
|
27
|
-
background:
|
|
28
|
+
background: color-mod(var(--gray-800) a(70%));
|
|
28
29
|
overflow: auto;
|
|
29
30
|
z-index: 10005;
|
|
30
31
|
-webkit-overflow-scrolling: touch;
|
|
31
32
|
|
|
32
33
|
& SOverlay {
|
|
33
|
-
background:
|
|
34
|
+
background: color-mod(var(--gray-800) a(40%));
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
|
|
@@ -40,7 +41,7 @@ SClose {
|
|
|
40
41
|
right: 0;
|
|
41
42
|
top: 0;
|
|
42
43
|
padding: 12px;
|
|
43
|
-
color: var(--
|
|
44
|
+
color: var(--gray-300);
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
z-index: 1;
|
|
46
47
|
border: none;
|
|
@@ -48,12 +49,12 @@ SClose {
|
|
|
48
49
|
outline: none;
|
|
49
50
|
|
|
50
51
|
&:hover {
|
|
51
|
-
color:
|
|
52
|
+
color: var(--gray-400);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
SClose[keyboardFocused] {
|
|
56
|
-
box-shadow: var(--
|
|
57
|
+
box-shadow: var(--keyboard-focus);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
@media (max-width: 767px) {
|
|
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
|
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
SOverlay {
|
|
65
|
-
padding:
|
|
66
|
+
padding: 12px;
|
|
66
67
|
}
|
|
67
68
|
}
|
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_bgw27_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_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_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_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_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_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
|
|
44
44
|
/*__inner_css_end__*/
|
|
45
|
-
, "
|
|
45
|
+
, "kfzky3_gg_")
|
|
46
46
|
/*__reshadow_css_end__*/
|
|
47
47
|
, {
|
|
48
|
-
"__SWindow": "
|
|
49
|
-
"__SOverlay": "
|
|
50
|
-
"__SClose": "
|
|
51
|
-
"_keyboardFocused": "
|
|
48
|
+
"__SWindow": "___SWindow_bgw27_gg_",
|
|
49
|
+
"__SOverlay": "___SOverlay_bgw27_gg_",
|
|
50
|
+
"__SClose": "___SClose_bgw27_gg_",
|
|
51
|
+
"_keyboardFocused": "__keyboardFocused_bgw27_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 =
|
|
145
|
+
var FocusLockWrapper = 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,"sources":["../../src/Modal.jsx"],"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":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,MAAP,IAAiBC,cAAjB,QAAuC,iBAAvC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,SAAP,MAAsB,uBAAtB;AACA,OAAOC,IAAP,MAAiB,yBAAjB;AACA,OAAOC,gBAAP,MAA6B,yCAA7B;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;IAGMC,S;;;;;;;;;;;;;;;;oEAQY,UAACC,CAAD,EAAO;AACrB,UAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;AACtBD,QAAAA,CAAC,CAACE,eAAF;AACAP,QAAAA,IAAI,gCAAO,SAAP,EAAkB,UAAlB,EAA8BK,CAA9B,CAAJ;AACD;AACF,K;;2EAEsB,UAACA,CAAD,EAAO;AAC5BL,MAAAA,IAAI,gCAAO,SAAP,EAAkB,cAAlB,EAAkCK,CAAlC,CAAJ;AACD,K;;yEAEoB,UAACA,CAAD,EAAO;AAC1BL,MAAAA,IAAI,gCAAO,SAAP,EAAkB,gBAAlB,EAAoCK,CAApC,CAAJ;AACD,K;;;;;;;WAED,2BAAkB;AAChB,0BAA8B,KAAKG,OAAnC;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,OAAlB,iBAAkBA,OAAlB;AACA,aAAO;AACLD,QAAAA,QAAQ,EAARA,QADK;AAELC,QAAAA,OAAO,EAAPA,OAFK;AAGLC,QAAAA,cAAc,EAAE,KAAKC;AAHhB,OAAP;AAKD;;;WAED,0BAAiB;AACf,2BAA8B,KAAKJ,OAAnC;AAAA,UAAQE,OAAR,kBAAQA,OAAR;AAAA,UAAiBG,QAAjB,kBAAiBA,QAAjB;AACA,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;AACP,2BAAoC,KAAKT,OAAzC;AAAA,UAAQU,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,aAAlB,kBAAkBA,aAAlB;AAEA,UAAMC,WAAW,GAAGlB,aAAa,CAACgB,QAAD,EAAW,CAC1CG,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAX,CAAjC;AAKA,0BACE,oBAAC,MAAD;AAAQ,QAAA,aAAa,EAAEJ;AAAvB,SACGC,WAAW,gBACV,oBAAC,QAAD,OADU,gBAGV,oBAAC,KAAD,CAAO,OAAP,qBACE,oBAAcC,KAAK,CAACG,MAApB,yBADF,CAJJ,CADF;AAWD;;;;EAlEqBhC,S;;gBAAlBY,S,iBACiB,O;;gBADjBA,S,WAEWqB,K;;gBAFXrB,S,kBAGkB;AACpBK,EAAAA,QAAQ,EAAE,GADU;AAEpBI,EAAAA,QAAQ,EAAE;AAFU,C;;AAkExB,IAAMa,gBAAgB,
|
|
1
|
+
{"version":3,"sources":["../../src/Modal.jsx"],"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
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/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB","sourcesContent":["export { default } from './Modal';\n"],"file":"index.js"}
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
SWindow {
|
|
4
4
|
position: relative;
|
|
5
|
-
border-radius:
|
|
5
|
+
border-radius: var(--rounded-l);
|
|
6
6
|
background: var(--white);
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
margin: auto;
|
|
9
|
-
padding:
|
|
9
|
+
padding: 40px;
|
|
10
|
+
box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
|
|
10
11
|
|
|
11
12
|
&:focus {
|
|
12
13
|
outline: none;
|
|
@@ -24,13 +25,13 @@ SOverlay {
|
|
|
24
25
|
justify-content: center;
|
|
25
26
|
align-items: center;
|
|
26
27
|
padding: 40px;
|
|
27
|
-
background:
|
|
28
|
+
background: color-mod(var(--gray-800) a(70%));
|
|
28
29
|
overflow: auto;
|
|
29
30
|
z-index: 10005;
|
|
30
31
|
-webkit-overflow-scrolling: touch;
|
|
31
32
|
|
|
32
33
|
& SOverlay {
|
|
33
|
-
background:
|
|
34
|
+
background: color-mod(var(--gray-800) a(40%));
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
|
|
@@ -40,7 +41,7 @@ SClose {
|
|
|
40
41
|
right: 0;
|
|
41
42
|
top: 0;
|
|
42
43
|
padding: 12px;
|
|
43
|
-
color: var(--
|
|
44
|
+
color: var(--gray-300);
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
z-index: 1;
|
|
46
47
|
border: none;
|
|
@@ -48,12 +49,12 @@ SClose {
|
|
|
48
49
|
outline: none;
|
|
49
50
|
|
|
50
51
|
&:hover {
|
|
51
|
-
color:
|
|
52
|
+
color: var(--gray-400);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
SClose[keyboardFocused] {
|
|
56
|
-
box-shadow: var(--
|
|
57
|
+
box-shadow: var(--keyboard-focus);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
@media (max-width: 767px) {
|
|
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
|
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
SOverlay {
|
|
65
|
-
padding:
|
|
66
|
+
padding: 12px;
|
|
66
67
|
}
|
|
67
68
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/modal",
|
|
3
3
|
"description": "SEMRush Modal Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.0.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@semcore/flex-box": "^4",
|
|
20
20
|
"@semcore/icon": "^2.16",
|
|
21
21
|
"@semcore/outside-click": "^2",
|
|
22
|
-
"react-focus-lock": "
|
|
22
|
+
"react-focus-lock": "2.3.1"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@semcore/core": "^1.11",
|
|
@@ -32,5 +32,8 @@
|
|
|
32
32
|
"type": "git",
|
|
33
33
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
34
34
|
"directory": "semcore/modal"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@semcore/jest-preset-ui": "1.0.0"
|
|
35
38
|
}
|
|
36
39
|
}
|
package/src/index.js
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
SWindow {
|
|
4
4
|
position: relative;
|
|
5
|
-
border-radius:
|
|
5
|
+
border-radius: var(--rounded-l);
|
|
6
6
|
background: var(--white);
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
margin: auto;
|
|
9
|
-
padding:
|
|
9
|
+
padding: 40px;
|
|
10
|
+
box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
|
|
10
11
|
|
|
11
12
|
&:focus {
|
|
12
13
|
outline: none;
|
|
@@ -24,13 +25,13 @@ SOverlay {
|
|
|
24
25
|
justify-content: center;
|
|
25
26
|
align-items: center;
|
|
26
27
|
padding: 40px;
|
|
27
|
-
background:
|
|
28
|
+
background: color-mod(var(--gray-800) a(70%));
|
|
28
29
|
overflow: auto;
|
|
29
30
|
z-index: 10005;
|
|
30
31
|
-webkit-overflow-scrolling: touch;
|
|
31
32
|
|
|
32
33
|
& SOverlay {
|
|
33
|
-
background:
|
|
34
|
+
background: color-mod(var(--gray-800) a(40%));
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
|
|
@@ -40,7 +41,7 @@ SClose {
|
|
|
40
41
|
right: 0;
|
|
41
42
|
top: 0;
|
|
42
43
|
padding: 12px;
|
|
43
|
-
color: var(--
|
|
44
|
+
color: var(--gray-300);
|
|
44
45
|
cursor: pointer;
|
|
45
46
|
z-index: 1;
|
|
46
47
|
border: none;
|
|
@@ -48,12 +49,12 @@ SClose {
|
|
|
48
49
|
outline: none;
|
|
49
50
|
|
|
50
51
|
&:hover {
|
|
51
|
-
color:
|
|
52
|
+
color: var(--gray-400);
|
|
52
53
|
}
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
SClose[keyboardFocused] {
|
|
56
|
-
box-shadow: var(--
|
|
57
|
+
box-shadow: var(--keyboard-focus);
|
|
57
58
|
}
|
|
58
59
|
|
|
59
60
|
@media (max-width: 767px) {
|
|
@@ -62,6 +63,6 @@ SClose[keyboardFocused] {
|
|
|
62
63
|
}
|
|
63
64
|
|
|
64
65
|
SOverlay {
|
|
65
|
-
padding:
|
|
66
|
+
padding: 12px;
|
|
66
67
|
}
|
|
67
68
|
}
|