@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 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 _excluded = ["tag"];
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
- ".___SWindow_lix9o_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_lix9o_gg_:focus{outline:none}.___SOverlay_lix9o_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,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_lix9o_gg_ .___SOverlay_lix9o_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_lix9o_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:none;background:none;outline:none}@media (hover: hover){.___SClose_lix9o_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}}.___SClose_lix9o_gg_.__keyboardFocused_lix9o_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STitle_lix9o_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_lix9o_gg_{min-width:60%}.___SOverlay_lix9o_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
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
- , "lix9o_gg_")
81
+ , "1jyey_gg_")
84
82
  /*__reshadow_css_end__*/
85
83
  , {
86
- "__SWindow": "___SWindow_lix9o_gg_",
87
- "__SOverlay": "___SOverlay_lix9o_gg_",
88
- "__SClose": "___SClose_lix9o_gg_",
89
- "_keyboardFocused": "__keyboardFocused_lix9o_gg_",
90
- "__STitle": "___STitle_lix9o_gg_"
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 (_ref10, ref) {
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
- as: tag,
214
- lockProps: other
215
- }, other));
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 = FocusLockWrapper;
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
- "tag": _flexBox.Box,
231
- "ref": windowRef,
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
- "role": "dialog",
236
- "aria-modal": true
237
- }, _ref2))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref6.cn("PortalProvider", {
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) {
@@ -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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"}
@@ -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: ComponentProps<typeof Box> & 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":""}
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
- ".___SWindow_lix9o_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_lix9o_gg_:focus{outline:none}.___SOverlay_lix9o_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,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_lix9o_gg_ .___SOverlay_lix9o_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_lix9o_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:none;background:none;outline:none}@media (hover: hover){.___SClose_lix9o_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}}.___SClose_lix9o_gg_.__keyboardFocused_lix9o_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STitle_lix9o_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_lix9o_gg_{min-width:60%}.___SOverlay_lix9o_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
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
- , "lix9o_gg_")
44
+ , "1jyey_gg_")
47
45
  /*__reshadow_css_end__*/
48
46
  , {
49
- "__SWindow": "___SWindow_lix9o_gg_",
50
- "__SOverlay": "___SOverlay_lix9o_gg_",
51
- "__SClose": "___SClose_lix9o_gg_",
52
- "_keyboardFocused": "__keyboardFocused_lix9o_gg_",
53
- "__STitle": "___STitle_lix9o_gg_"
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 (_ref10, ref) {
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
- as: tag,
191
- lockProps: other
192
- }, other));
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 = FocusLockWrapper;
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
- "tag": Box,
208
- "ref": windowRef,
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
- "role": "dialog",
213
- "aria-modal": true
214
- }, _ref2))), /*#__PURE__*/React.createElement(PortalProvider, _ref6.cn("PortalProvider", {
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) {
@@ -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":"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"}
@@ -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: ComponentProps<typeof Box> & 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":""}
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":""}
@@ -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: ComponentProps<typeof Box> & T) => ReturnEl;
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;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/modal",
3
3
  "description": "Semrush Modal Component",
4
- "version": "3.4.6",
4
+ "version": "3.5.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",