@semcore/modal 3.4.6 → 3.5.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 +12 -0
- package/lib/cjs/Modal.js +41 -31
- package/lib/cjs/Modal.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/Modal.js +42 -32
- package/lib/es6/Modal.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/types/index.d.ts +4 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.5.1] - 2023-02-21
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/animation` [1.9.0 ~> 1.9.1], `@semcore/flex-box` [4.7.9 ~> 4.7.10], `@semcore/icon` [3.10.1 ~> 3.10.2], `@semcore/utils` [3.47.0 ~> 3.47.1]).
|
|
10
|
+
|
|
11
|
+
## [3.5.0] - 2023-02-20
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- Added appear and disappear animation.
|
|
16
|
+
|
|
5
17
|
## [3.4.6] - 2023-02-13
|
|
6
18
|
|
|
7
19
|
### Changed
|
package/lib/cjs/Modal.js
CHANGED
|
@@ -11,8 +11,6 @@ exports["default"] = void 0;
|
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
14
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
-
|
|
16
14
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
17
15
|
|
|
18
16
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
@@ -59,7 +57,7 @@ var _typography = require("@semcore/typography");
|
|
|
59
57
|
|
|
60
58
|
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
61
59
|
|
|
62
|
-
var
|
|
60
|
+
var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
|
|
63
61
|
|
|
64
62
|
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); }
|
|
65
63
|
|
|
@@ -78,16 +76,16 @@ var style = (
|
|
|
78
76
|
/*__reshadow_css_start__*/
|
|
79
77
|
_core.sstyled.insert(
|
|
80
78
|
/*__inner_css_start__*/
|
|
81
|
-
".
|
|
79
|
+
".___SWindow_1jyey_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2))}.___SWindow_1jyey_gg_:focus{outline:0}.___SOverlay_1jyey_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;z-index:var(--intergalactic-z-index-modal, 600);-webkit-overflow-scrolling:touch}.___SOverlay_1jyey_gg_ .___SOverlay_1jyey_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SClose_1jyey_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);cursor:pointer;z-index:1;border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_1jyey_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SClose_1jyey_gg_.__keyboardFocused_1jyey_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___STitle_1jyey_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px)}@media (max-width:767px){.___SWindow_1jyey_gg_{min-width:60%}.___SOverlay_1jyey_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}"
|
|
82
80
|
/*__inner_css_end__*/
|
|
83
|
-
, "
|
|
81
|
+
, "1jyey_gg_")
|
|
84
82
|
/*__reshadow_css_end__*/
|
|
85
83
|
, {
|
|
86
|
-
"__SWindow": "
|
|
87
|
-
"__SOverlay": "
|
|
88
|
-
"__SClose": "
|
|
89
|
-
"_keyboardFocused": "
|
|
90
|
-
"__STitle": "
|
|
84
|
+
"__SWindow": "___SWindow_1jyey_gg_",
|
|
85
|
+
"__SOverlay": "___SOverlay_1jyey_gg_",
|
|
86
|
+
"__SClose": "___SClose_1jyey_gg_",
|
|
87
|
+
"_keyboardFocused": "__keyboardFocused_1jyey_gg_",
|
|
88
|
+
"__STitle": "___STitle_1jyey_gg_"
|
|
91
89
|
});
|
|
92
90
|
|
|
93
91
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
@@ -142,14 +140,16 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
142
140
|
visible = _this$asProps2.visible,
|
|
143
141
|
closable = _this$asProps2.closable,
|
|
144
142
|
getI18nText = _this$asProps2.getI18nText,
|
|
145
|
-
uid = _this$asProps2.uid
|
|
143
|
+
uid = _this$asProps2.uid,
|
|
144
|
+
duration = _this$asProps2.duration;
|
|
146
145
|
var hasTitle = this.state.hasTitle;
|
|
147
146
|
return {
|
|
148
147
|
visible: visible,
|
|
149
148
|
closable: closable,
|
|
150
149
|
onKeyDown: this.handleKeyDown,
|
|
151
150
|
'aria-label': hasTitle ? undefined : getI18nText('title'),
|
|
152
|
-
'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined
|
|
151
|
+
'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined,
|
|
152
|
+
duration: duration
|
|
153
153
|
};
|
|
154
154
|
}
|
|
155
155
|
}, {
|
|
@@ -197,46 +197,56 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
197
197
|
|
|
198
198
|
(0, _defineProperty2["default"])(ModalRoot, "displayName", 'Modal');
|
|
199
199
|
(0, _defineProperty2["default"])(ModalRoot, "style", style);
|
|
200
|
-
(0, _defineProperty2["default"])(ModalRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()
|
|
200
|
+
(0, _defineProperty2["default"])(ModalRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])(), (0, _useCssVariable.cssVariableEnhance)({
|
|
201
|
+
variable: '--intergalactic-duration-modal',
|
|
202
|
+
fallback: '200',
|
|
203
|
+
map: Number.parseInt,
|
|
204
|
+
prop: 'duration'
|
|
205
|
+
})]);
|
|
201
206
|
(0, _defineProperty2["default"])(ModalRoot, "defaultProps", {
|
|
202
|
-
duration: 200,
|
|
203
207
|
closable: true,
|
|
204
208
|
i18n: _intergalacticDynamicLocales.localizedMessages,
|
|
205
209
|
locale: 'en'
|
|
206
210
|
});
|
|
207
211
|
|
|
208
|
-
var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (
|
|
209
|
-
var tag = _ref10.tag,
|
|
210
|
-
other = (0, _objectWithoutProperties2["default"])(_ref10, _excluded);
|
|
212
|
+
var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
211
213
|
return /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], (0, _extends2["default"])({
|
|
212
|
-
ref: ref
|
|
213
|
-
|
|
214
|
-
lockProps:
|
|
215
|
-
|
|
214
|
+
ref: ref
|
|
215
|
+
}, props, {
|
|
216
|
+
lockProps: {
|
|
217
|
+
style: {
|
|
218
|
+
display: 'contents'
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
}));
|
|
216
222
|
});
|
|
217
223
|
|
|
218
224
|
function Window(props) {
|
|
219
225
|
var _ref2 = arguments[0],
|
|
220
226
|
_ref6;
|
|
221
227
|
|
|
222
|
-
var SWindow =
|
|
228
|
+
var SWindow = _animation.Slide;
|
|
223
229
|
var Children = props.Children,
|
|
224
230
|
styles = props.styles,
|
|
225
231
|
visible = props.visible,
|
|
226
|
-
closable = props.closable
|
|
232
|
+
closable = props.closable,
|
|
233
|
+
duration = props.duration;
|
|
227
234
|
var windowRef = (0, _react.useRef)(null);
|
|
228
|
-
if (!visible) return null;
|
|
229
235
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, (0, _core.assignProps)({
|
|
230
|
-
"
|
|
231
|
-
"
|
|
236
|
+
"initialAnimation": true,
|
|
237
|
+
"slideOrigin": "top",
|
|
238
|
+
"visible": visible,
|
|
239
|
+
"role": "dialog",
|
|
240
|
+
"aria-modal": true,
|
|
241
|
+
"duration": duration
|
|
242
|
+
}, _ref2))), /*#__PURE__*/_react["default"].createElement(FocusLockWrapper, _ref6.cn("FocusLockWrapper", {
|
|
232
243
|
"returnFocus": true,
|
|
233
|
-
"tabIndex": -1,
|
|
234
244
|
"autoFocus": true,
|
|
235
|
-
"
|
|
236
|
-
"
|
|
237
|
-
}
|
|
245
|
+
"ref": windowRef,
|
|
246
|
+
"tabIndex": -1
|
|
247
|
+
}), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref6.cn("PortalProvider", {
|
|
238
248
|
"value": windowRef
|
|
239
|
-
}), closable && /*#__PURE__*/_react["default"].createElement(Modal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
|
|
249
|
+
}), closable && /*#__PURE__*/_react["default"].createElement(Modal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {})))));
|
|
240
250
|
}
|
|
241
251
|
|
|
242
252
|
function Overlay(props) {
|
package/lib/cjs/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["ModalRoot","hasTitle","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","i18nEnhance","localizedMessages","uniqueIDEnhancement","i18n","locale","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","useRef","sstyled","Box","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","hasChildren","children","enhance","keyboardFocusEnhance","Title","STitle","Text","useEffect","createComponent"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } 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';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n static defaultProps = {\n duration: 200,\n closable: true,\n i18n: localizedMessages,\n locale: 'en',\n };\n state = { hasTitle: false };\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, getI18nText, uid } = this.asProps;\n const { hasTitle } = this.state;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n 'aria-label': hasTitle ? undefined : getI18nText('title'),\n 'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n };\n }\n\n getCloseProps() {\n const { getI18nText } = this.asProps;\n\n return {\n onClick: this.handleIconCloseClick,\n getI18nText,\n };\n }\n\n getTitleProps() {\n const { uid } = this.asProps;\n const setTitle = () => this.setState({ hasTitle: true });\n\n return {\n id: `igc-${uid}-title`,\n setTitle,\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 >\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 const { Children, children: hasChildren, getI18nText } = props;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n </SClose>,\n );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n const { setTitle, styles } = props;\n const STitle = Root;\n\n useEffect(() => setTitle());\n\n return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n Title,\n});\n\nexport default Modal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["ModalRoot","hasTitle","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","i18nEnhance","localizedMessages","uniqueIDEnhancement","cssVariableEnhance","variable","fallback","map","Number","parseInt","prop","i18n","locale","FocusLockWrapper","React","forwardRef","props","ref","display","SWindow","Slide","styles","windowRef","useRef","sstyled","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","Box","hasChildren","children","enhance","keyboardFocusEnhance","Title","STitle","Text","useEffect","createComponent"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut, Slide } 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';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n uniqueIDEnhancement(),\n cssVariableEnhance({\n variable: '--intergalactic-duration-modal',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n ];\n static defaultProps = {\n closable: true,\n i18n: localizedMessages,\n locale: 'en',\n };\n state = { hasTitle: false };\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, getI18nText, uid, duration } = this.asProps;\n const { hasTitle } = this.state;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n 'aria-label': hasTitle ? undefined : getI18nText('title'),\n 'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n duration,\n };\n }\n\n getCloseProps() {\n const { getI18nText } = this.asProps;\n\n return {\n onClick: this.handleIconCloseClick,\n getI18nText,\n };\n }\n\n getTitleProps() {\n const { uid } = this.asProps;\n const setTitle = () => this.setState({ hasTitle: true });\n\n return {\n id: `igc-${uid}-title`,\n setTitle,\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 (props, ref) {\n return <FocusLock ref={ref} {...props} lockProps={{ style: { display: 'contents' } }} />;\n});\n\nfunction Window(props) {\n const SWindow = Root;\n const { Children, styles, visible, closable, duration } = props;\n const windowRef = useRef(null);\n\n return sstyled(styles)(\n <SWindow\n render={Slide}\n initialAnimation={true}\n slideOrigin=\"top\"\n visible={visible}\n role=\"dialog\"\n aria-modal={true}\n duration={duration}\n >\n <FocusLockWrapper returnFocus={true} autoFocus={true} ref={windowRef} tabIndex={-1}>\n <PortalProvider value={windowRef}>\n {closable && <Modal.Close />}\n <Children />\n </PortalProvider>\n </FocusLockWrapper>\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 const { Children, children: hasChildren, getI18nText } = props;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n </SClose>,\n );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n const { setTitle, styles } = props;\n const STitle = Root;\n\n useEffect(() => setTitle());\n\n return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n Title,\n});\n\nexport default Modal;\n"],"mappings":"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"}
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n locale?: string;\n}\n\nexport interface IModalContext {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n Window: <T>(props:
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps, ISlideProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n locale?: string;\n}\n\nexport interface IWindowProps extends IBoxProps, ISlideProps {}\n\nexport interface IModalContext {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n Window: <T>(props: CProps<IWindowProps> & T) => ReturnEl;\n Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n Title: <T>(props: ITextProps & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}
|
package/lib/es6/Modal.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
2
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
4
|
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
@@ -13,7 +12,6 @@ import { assignProps as _assignProps4 } from "@semcore/core";
|
|
|
13
12
|
import { assignProps as _assignProps3 } from "@semcore/core";
|
|
14
13
|
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
15
14
|
import { assignProps as _assignProps } from "@semcore/core";
|
|
16
|
-
var _excluded = ["tag"];
|
|
17
15
|
|
|
18
16
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
17
|
|
|
@@ -25,7 +23,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
25
23
|
|
|
26
24
|
import React, { useRef, useEffect } from 'react';
|
|
27
25
|
import FocusLock from 'react-focus-lock';
|
|
28
|
-
import { FadeInOut } from '@semcore/animation';
|
|
26
|
+
import { FadeInOut, Slide } from '@semcore/animation';
|
|
29
27
|
import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
30
28
|
import Portal, { PortalProvider } from '@semcore/portal';
|
|
31
29
|
import { Box } from '@semcore/flex-box';
|
|
@@ -41,21 +39,22 @@ var style = (
|
|
|
41
39
|
/*__reshadow_css_start__*/
|
|
42
40
|
_sstyled.insert(
|
|
43
41
|
/*__inner_css_start__*/
|
|
44
|
-
".
|
|
42
|
+
".___SWindow_1jyey_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2))}.___SWindow_1jyey_gg_:focus{outline:0}.___SOverlay_1jyey_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;z-index:var(--intergalactic-z-index-modal, 600);-webkit-overflow-scrolling:touch}.___SOverlay_1jyey_gg_ .___SOverlay_1jyey_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SClose_1jyey_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);cursor:pointer;z-index:1;border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_1jyey_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SClose_1jyey_gg_.__keyboardFocused_1jyey_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3))}.___STitle_1jyey_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px)}@media (max-width:767px){.___SWindow_1jyey_gg_{min-width:60%}.___SOverlay_1jyey_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}"
|
|
45
43
|
/*__inner_css_end__*/
|
|
46
|
-
, "
|
|
44
|
+
, "1jyey_gg_")
|
|
47
45
|
/*__reshadow_css_end__*/
|
|
48
46
|
, {
|
|
49
|
-
"__SWindow": "
|
|
50
|
-
"__SOverlay": "
|
|
51
|
-
"__SClose": "
|
|
52
|
-
"_keyboardFocused": "
|
|
53
|
-
"__STitle": "
|
|
47
|
+
"__SWindow": "___SWindow_1jyey_gg_",
|
|
48
|
+
"__SOverlay": "___SOverlay_1jyey_gg_",
|
|
49
|
+
"__SClose": "___SClose_1jyey_gg_",
|
|
50
|
+
"_keyboardFocused": "__keyboardFocused_1jyey_gg_",
|
|
51
|
+
"__STitle": "___STitle_1jyey_gg_"
|
|
54
52
|
});
|
|
55
53
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
56
54
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
57
55
|
import { Text } from '@semcore/typography';
|
|
58
56
|
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
57
|
+
import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
|
|
59
58
|
|
|
60
59
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
61
60
|
_inherits(ModalRoot, _Component);
|
|
@@ -114,14 +113,16 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
|
114
113
|
visible = _this$asProps2.visible,
|
|
115
114
|
closable = _this$asProps2.closable,
|
|
116
115
|
getI18nText = _this$asProps2.getI18nText,
|
|
117
|
-
uid = _this$asProps2.uid
|
|
116
|
+
uid = _this$asProps2.uid,
|
|
117
|
+
duration = _this$asProps2.duration;
|
|
118
118
|
var hasTitle = this.state.hasTitle;
|
|
119
119
|
return {
|
|
120
120
|
visible: visible,
|
|
121
121
|
closable: closable,
|
|
122
122
|
onKeyDown: this.handleKeyDown,
|
|
123
123
|
'aria-label': hasTitle ? undefined : getI18nText('title'),
|
|
124
|
-
'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined
|
|
124
|
+
'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined,
|
|
125
|
+
duration: duration
|
|
125
126
|
};
|
|
126
127
|
}
|
|
127
128
|
}, {
|
|
@@ -172,48 +173,57 @@ _defineProperty(ModalRoot, "displayName", 'Modal');
|
|
|
172
173
|
|
|
173
174
|
_defineProperty(ModalRoot, "style", style);
|
|
174
175
|
|
|
175
|
-
_defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()
|
|
176
|
+
_defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), cssVariableEnhance({
|
|
177
|
+
variable: '--intergalactic-duration-modal',
|
|
178
|
+
fallback: '200',
|
|
179
|
+
map: Number.parseInt,
|
|
180
|
+
prop: 'duration'
|
|
181
|
+
})]);
|
|
176
182
|
|
|
177
183
|
_defineProperty(ModalRoot, "defaultProps", {
|
|
178
|
-
duration: 200,
|
|
179
184
|
closable: true,
|
|
180
185
|
i18n: localizedMessages,
|
|
181
186
|
locale: 'en'
|
|
182
187
|
});
|
|
183
188
|
|
|
184
|
-
var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (
|
|
185
|
-
var tag = _ref10.tag,
|
|
186
|
-
other = _objectWithoutProperties(_ref10, _excluded);
|
|
187
|
-
|
|
189
|
+
var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
188
190
|
return /*#__PURE__*/React.createElement(FocusLock, _extends({
|
|
189
|
-
ref: ref
|
|
190
|
-
|
|
191
|
-
lockProps:
|
|
192
|
-
|
|
191
|
+
ref: ref
|
|
192
|
+
}, props, {
|
|
193
|
+
lockProps: {
|
|
194
|
+
style: {
|
|
195
|
+
display: 'contents'
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}));
|
|
193
199
|
});
|
|
194
200
|
|
|
195
201
|
function Window(props) {
|
|
196
202
|
var _ref2 = arguments[0],
|
|
197
203
|
_ref6;
|
|
198
204
|
|
|
199
|
-
var SWindow =
|
|
205
|
+
var SWindow = Slide;
|
|
200
206
|
var Children = props.Children,
|
|
201
207
|
styles = props.styles,
|
|
202
208
|
visible = props.visible,
|
|
203
|
-
closable = props.closable
|
|
209
|
+
closable = props.closable,
|
|
210
|
+
duration = props.duration;
|
|
204
211
|
var windowRef = useRef(null);
|
|
205
|
-
if (!visible) return null;
|
|
206
212
|
return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, _assignProps2({
|
|
207
|
-
"
|
|
208
|
-
"
|
|
213
|
+
"initialAnimation": true,
|
|
214
|
+
"slideOrigin": "top",
|
|
215
|
+
"visible": visible,
|
|
216
|
+
"role": "dialog",
|
|
217
|
+
"aria-modal": true,
|
|
218
|
+
"duration": duration
|
|
219
|
+
}, _ref2))), /*#__PURE__*/React.createElement(FocusLockWrapper, _ref6.cn("FocusLockWrapper", {
|
|
209
220
|
"returnFocus": true,
|
|
210
|
-
"tabIndex": -1,
|
|
211
221
|
"autoFocus": true,
|
|
212
|
-
"
|
|
213
|
-
"
|
|
214
|
-
}
|
|
222
|
+
"ref": windowRef,
|
|
223
|
+
"tabIndex": -1
|
|
224
|
+
}), /*#__PURE__*/React.createElement(PortalProvider, _ref6.cn("PortalProvider", {
|
|
215
225
|
"value": windowRef
|
|
216
|
-
}), closable && /*#__PURE__*/React.createElement(Modal.Close, null), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
|
|
226
|
+
}), closable && /*#__PURE__*/React.createElement(Modal.Close, null), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {})))));
|
|
217
227
|
}
|
|
218
228
|
|
|
219
229
|
function Overlay(props) {
|
package/lib/es6/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["React","useRef","useEffect","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","isAdvanceMode","keyboardFocusEnhance","localizedMessages","i18nEnhance","Text","uniqueIDEnhancement","ModalRoot","hasTitle","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","i18n","locale","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","hasChildren","children","enhance","Title","STitle"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } 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';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n static defaultProps = {\n duration: 200,\n closable: true,\n i18n: localizedMessages,\n locale: 'en',\n };\n state = { hasTitle: false };\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, getI18nText, uid } = this.asProps;\n const { hasTitle } = this.state;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n 'aria-label': hasTitle ? undefined : getI18nText('title'),\n 'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n };\n }\n\n getCloseProps() {\n const { getI18nText } = this.asProps;\n\n return {\n onClick: this.handleIconCloseClick,\n getI18nText,\n };\n }\n\n getTitleProps() {\n const { uid } = this.asProps;\n const setTitle = () => this.setState({ hasTitle: true });\n\n return {\n id: `igc-${uid}-title`,\n setTitle,\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 >\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 const { Children, children: hasChildren, getI18nText } = props;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n </SClose>,\n );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n const { setTitle, styles } = props;\n const STitle = Root;\n\n useEffect(() => setTitle());\n\n return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n Title,\n});\n\nexport default Modal;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["React","useRef","useEffect","FocusLock","FadeInOut","Slide","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","isAdvanceMode","keyboardFocusEnhance","localizedMessages","i18nEnhance","Text","uniqueIDEnhancement","cssVariableEnhance","ModalRoot","hasTitle","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","variable","fallback","map","Number","parseInt","prop","i18n","locale","FocusLockWrapper","forwardRef","props","ref","display","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","hasChildren","children","enhance","Title","STitle"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut, Slide } 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';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static enhance = [\n i18nEnhance(localizedMessages),\n uniqueIDEnhancement(),\n cssVariableEnhance({\n variable: '--intergalactic-duration-modal',\n fallback: '200',\n map: Number.parseInt,\n prop: 'duration',\n }),\n ];\n static defaultProps = {\n closable: true,\n i18n: localizedMessages,\n locale: 'en',\n };\n state = { hasTitle: false };\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, getI18nText, uid, duration } = this.asProps;\n const { hasTitle } = this.state;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n 'aria-label': hasTitle ? undefined : getI18nText('title'),\n 'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n duration,\n };\n }\n\n getCloseProps() {\n const { getI18nText } = this.asProps;\n\n return {\n onClick: this.handleIconCloseClick,\n getI18nText,\n };\n }\n\n getTitleProps() {\n const { uid } = this.asProps;\n const setTitle = () => this.setState({ hasTitle: true });\n\n return {\n id: `igc-${uid}-title`,\n setTitle,\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 (props, ref) {\n return <FocusLock ref={ref} {...props} lockProps={{ style: { display: 'contents' } }} />;\n});\n\nfunction Window(props) {\n const SWindow = Root;\n const { Children, styles, visible, closable, duration } = props;\n const windowRef = useRef(null);\n\n return sstyled(styles)(\n <SWindow\n render={Slide}\n initialAnimation={true}\n slideOrigin=\"top\"\n visible={visible}\n role=\"dialog\"\n aria-modal={true}\n duration={duration}\n >\n <FocusLockWrapper returnFocus={true} autoFocus={true} ref={windowRef} tabIndex={-1}>\n <PortalProvider value={windowRef}>\n {closable && <Modal.Close />}\n <Children />\n </PortalProvider>\n </FocusLockWrapper>\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 const { Children, children: hasChildren, getI18nText } = props;\n return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n </SClose>,\n );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n const { setTitle, styles } = props;\n const STitle = Root;\n\n useEffect(() => setTitle());\n\n return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n Title,\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,SAAxB,QAAyC,OAAzC;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,SAASC,SAAT,EAAoBC,KAApB,QAAiC,oBAAjC;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;;;;;;;;;;;;;;;;;;AAEA,SAASC,iBAAT,QAAkC,gDAAlC;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,SAASC,IAAT,QAAqB,qBAArB;AACA,OAAOC,mBAAP,MAAgC,6BAAhC;AACA,SAASC,kBAAT,QAAmC,mCAAnC;;IAEMC,S;;;;;;;;;;;;;;;;4DAkBI;MAAEC,QAAQ,EAAE;IAAZ,C;;oEAEQ,UAACC,CAAD,EAAO;MACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;QACtBD,CAAC,CAACE,eAAF;QACAb,IAAI,gCAAO,SAAP,EAAkB,UAAlB,EAA8BW,CAA9B,CAAJ;MACD;IACF,C;;2EAEsB,UAACA,CAAD,EAAO;MAC5BX,IAAI,gCAAO,SAAP,EAAkB,cAAlB,EAAkCW,CAAlC,CAAJ;IACD,C;;yEAEoB,UAACA,CAAD,EAAO;MAC1BX,IAAI,gCAAO,SAAP,EAAkB,gBAAlB,EAAoCW,CAApC,CAAJ;IACD,C;;;;;;;WAED,2BAAkB;MAChB,oBAA8B,KAAKG,OAAnC;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,OAAlB,iBAAkBA,OAAlB;MACA,OAAO;QACLD,QAAQ,EAARA,QADK;QAELC,OAAO,EAAPA,OAFK;QAGLC,cAAc,EAAE,KAAKC;MAHhB,CAAP;IAKD;;;WAED,0BAAiB;MACf,qBAA0D,KAAKJ,OAA/D;MAAA,IAAQE,OAAR,kBAAQA,OAAR;MAAA,IAAiBG,QAAjB,kBAAiBA,QAAjB;MAAA,IAA2BC,WAA3B,kBAA2BA,WAA3B;MAAA,IAAwCC,GAAxC,kBAAwCA,GAAxC;MAAA,IAA6CN,QAA7C,kBAA6CA,QAA7C;MACA,IAAQL,QAAR,GAAqB,KAAKY,KAA1B,CAAQZ,QAAR;MACA,OAAO;QACLM,OAAO,EAAPA,OADK;QAELG,QAAQ,EAARA,QAFK;QAGLI,SAAS,EAAE,KAAKC,aAHX;QAIL,cAAcd,QAAQ,GAAGe,SAAH,GAAeL,WAAW,CAAC,OAAD,CAJ3C;QAKL,mBAAmBV,QAAQ,iBAAUW,GAAV,cAAwBI,SAL9C;QAMLV,QAAQ,EAARA;MANK,CAAP;IAQD;;;WAED,yBAAgB;MACd,IAAQK,WAAR,GAAwB,KAAKN,OAA7B,CAAQM,WAAR;MAEA,OAAO;QACLM,OAAO,EAAE,KAAKC,oBADT;QAELP,WAAW,EAAXA;MAFK,CAAP;IAID;;;WAED,yBAAgB;MAAA;;MACd,IAAQC,GAAR,GAAgB,KAAKP,OAArB,CAAQO,GAAR;;MACA,IAAMO,QAAQ,GAAG,SAAXA,QAAW;QAAA,OAAM,MAAI,CAACC,QAAL,CAAc;UAAEnB,QAAQ,EAAE;QAAZ,CAAd,CAAN;MAAA,CAAjB;;MAEA,OAAO;QACLoB,EAAE,gBAAST,GAAT,WADG;QAELO,QAAQ,EAARA;MAFK,CAAP;IAID;;;WAED,kBAAS;MAAA;MACP,qBAAoC,KAAKd,OAAzC;MAAA,IAAQiB,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,aAAlB,kBAAkBA,aAAlB;MAEA,IAAMC,WAAW,GAAG/B,aAAa,CAAC6B,QAAD,EAAW,CAC1CG,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAX,CAAjC;MAKA,oBACE,oBAAC,MAAD;QAAQ,aAAa,EAAEJ;MAAvB,GACGC,WAAW,gBACV,oBAAC,QAAD,OADU,gBAGV,oBAAC,KAAD,CAAO,OAAP,qBACE,oBAAcC,KAAK,CAACG,MAApB,yBADF,CAJJ,CADF;IAWD;;;;EA/FqB7C,S;;gBAAlBiB,S,iBACiB,O;;gBADjBA,S,WAEW6B,K;;gBAFX7B,S,aAGa,CACfJ,WAAW,CAACD,iBAAD,CADI,EAEfG,mBAAmB,EAFJ,EAGfC,kBAAkB,CAAC;EACjB+B,QAAQ,EAAE,gCADO;EAEjBC,QAAQ,EAAE,KAFO;EAGjBC,GAAG,EAAEC,MAAM,CAACC,QAHK;EAIjBC,IAAI,EAAE;AAJW,CAAD,CAHH,C;;gBAHbnC,S,kBAakB;EACpBU,QAAQ,EAAE,IADU;EAEpB0B,IAAI,EAAEzC,iBAFc;EAGpB0C,MAAM,EAAE;AAHY,C;;AAqFxB,IAAMC,gBAAgB,gBAAG9D,KAAK,CAAC+D,UAAN,CAAiB,UAAUC,KAAV,EAAiBC,GAAjB,EAAsB;EAC9D,oBAAO,oBAAC,SAAD;IAAW,GAAG,EAAEA;EAAhB,GAAyBD,KAAzB;IAAgC,SAAS,EAAE;MAAEX,KAAK,EAAE;QAAEa,OAAO,EAAE;MAAX;IAAT;EAA3C,GAAP;AACD,CAFwB,CAAzB;;AAIA,SAASd,MAAT,CAAgBY,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAMG,OAAO,GAMD9D,KANZ;EACA,IAAQyC,QAAR,GAA0DkB,KAA1D,CAAQlB,QAAR;EAAA,IAAkBsB,MAAlB,GAA0DJ,KAA1D,CAAkBI,MAAlB;EAAA,IAA0BrC,OAA1B,GAA0DiC,KAA1D,CAA0BjC,OAA1B;EAAA,IAAmCG,QAAnC,GAA0D8B,KAA1D,CAAmC9B,QAAnC;EAAA,IAA6CJ,QAA7C,GAA0DkC,KAA1D,CAA6ClC,QAA7C;EACA,IAAMuC,SAAS,GAAGpE,MAAM,CAAC,IAAD,CAAxB;EAEA,eAAOO,OAAO,CAAC4D,MAAD,CAAd,eACE,oBAAC,OAAD;IAAA,oBAEoB,IAFpB;IAAA,eAGc,KAHd;IAAA,WAIWrC,OAJX;IAAA,QAKO,QALP;IAAA,cAMc,IANd;IAAA,YAOYD;EAPZ,0BASE,oBAAC,gBAAD;IAAA,eAA+B,IAA/B;IAAA,aAAgD,IAAhD;IAAA,OAA2DuC,SAA3D;IAAA,YAAgF,CAAC;EAAjF,iBACE,oBAAC,cAAD;IAAA,SAAuBA;EAAvB,IACGnC,QAAQ,iBAAI,oBAAC,KAAD,CAAO,KAAP,OADf,eAEE,oBAAC,QAAD,2BAFF,CADF,CATF,CADF;AAkBD;;AAED,SAASgB,OAAT,CAAiBc,KAAjB,EAAwB;EAAA;EAAA;;EACtB,IAAMM,QAAQ,GAMMlE,SANpB;EACA,IAAQ0C,QAAR,GAAsDkB,KAAtD,CAAQlB,QAAR;EAAA,IAAkBsB,MAAlB,GAAsDJ,KAAtD,CAAkBI,MAAlB;EAAA,IAA0BpC,cAA1B,GAAsDgC,KAAtD,CAA0BhC,cAA1B;EAAA,IAA0CD,OAA1C,GAAsDiC,KAAtD,CAA0CjC,OAA1C;EACA,IAAMwC,UAAU,GAAGtE,MAAM,CAAC,IAAD,CAAzB;EACAe,gBAAgB,CAACe,OAAD,CAAhB;EAEA,eAAOvB,OAAO,CAAC4D,MAAD,CAAd,eACE,oBAAC,QAAD;IAAA,OAAkCG;EAAlC,0BACE,oBAAC,YAAD;IAAA,QAAoBA,UAApB;IAAA,kBAAgDvC;EAAhD,iBACE,oBAAC,QAAD,2BADF,CADF,CADF;AAOD;;AAED,SAASwC,KAAT,CAAeR,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMS,MAAM,GAGM7D,GAHlB;EACA,IAAQkC,QAAR,GAAyDkB,KAAzD,CAAQlB,QAAR;EAAA,IAA4B4B,WAA5B,GAAyDV,KAAzD,CAAkBW,QAAlB;EAAA,IAAyCxC,WAAzC,GAAyD6B,KAAzD,CAAyC7B,WAAzC;EACA,eAAO3B,OAAO,CAACwD,KAAK,CAACI,MAAP,CAAd,eACE,oBAAC,MAAD;IAAA,OAAyB,QAAzB;IAAA,YAA4C,CAA5C;IAAA,cAA2DjC,WAAW,CAAC,OAAD;EAAtE,aACGuC,WAAW,gBAAG,oBAAC,QAAD,2BAAH,gBAAkB,oBAAC,SAAD;IAAA,SAAkBvC,WAAW,CAAC,OAAD;EAA7B,GADhC,CADF;AAKD;;AAEDqC,KAAK,CAACI,OAAN,GAAgB,CAAC1D,oBAAoB,EAArB,CAAhB;;AAEA,SAAS2D,KAAT,CAAeb,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQrB,QAAR,GAA6BqB,KAA7B,CAAQrB,QAAR;EAAA,IAAkByB,MAAlB,GAA6BJ,KAA7B,CAAkBI,MAAlB;EACA,IAAMU,MAAM,GAI2BzD,IAJvC;EAEAnB,SAAS,CAAC;IAAA,OAAMyC,QAAQ,EAAd;EAAA,CAAD,CAAT;EAEA,eAAOnC,OAAO,CAAC4D,MAAD,CAAd,eAAuB,oBAAC,MAAD;IAAA,OAA0B;EAA1B,YAAvB;AACD;;AAED,IAAMnB,KAAK,GAAG3C,eAAe,CAACkB,SAAD,EAAY;EACvC4B,MAAM,EAANA,MADuC;EAEvCF,OAAO,EAAPA,OAFuC;EAGvCsB,KAAK,EAALA,KAHuC;EAIvCK,KAAK,EAALA;AAJuC,CAAZ,CAA7B;AAOA,eAAe5B,KAAf"}
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n locale?: string;\n}\n\nexport interface IModalContext {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n Window: <T>(props:
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps, ISlideProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n locale?: string;\n}\n\nexport interface IWindowProps extends IBoxProps, ISlideProps {}\n\nexport interface IModalContext {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n Window: <T>(props: CProps<IWindowProps> & T) => ReturnEl;\n Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n Title: <T>(props: ITextProps & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ComponentProps } from 'react';
|
|
2
|
-
import { IFadeInOutProps } from '@semcore/animation';
|
|
2
|
+
import { IFadeInOutProps, ISlideProps } 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';
|
|
@@ -24,6 +24,8 @@ export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
|
|
|
24
24
|
locale?: string;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
export interface IWindowProps extends IBoxProps, ISlideProps {}
|
|
28
|
+
|
|
27
29
|
export interface IModalContext {
|
|
28
30
|
getOverlayProps: PropGetterFn;
|
|
29
31
|
getWindowProps: PropGetterFn;
|
|
@@ -31,7 +33,7 @@ export interface IModalContext {
|
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
declare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {
|
|
34
|
-
Window: <T>(props:
|
|
36
|
+
Window: <T>(props: CProps<IWindowProps> & T) => ReturnEl;
|
|
35
37
|
Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
36
38
|
Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
|
|
37
39
|
Title: <T>(props: ITextProps & T) => ReturnEl;
|