@semcore/modal 2.3.1 → 2.4.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.4.0] - 2022-01-18
+
+### Changed
+
+- Up version icons and use new icon.
+
+## [2.3.4] - 2021-9-13
+
+### Changed
+
+- Changed overlay opacity from 80% to 60%
+- Changed overlay opacity for the second modal window from 20% to 40%
+
+## [2.3.3] - 2021-8-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [2.3.2] - 2021-06-28
+
+### Changed
+
+- [TS] rewrite code from ts to js.
+- [A11y] added role for `Window` and aria-label for `Close` and `Window`.
+
 ## [2.3.1] - 2021-04-28
 
 ### Changed

package/lib/cjs/Modal.js

@@ -41,7 +41,7 @@ var _flexBox = require("@semcore/flex-box");
 
 var _outsideClick = _interopRequireDefault(require("@semcore/outside-click"));
 
-var _s = _interopRequireDefault(require("@semcore/icon/lib/Close/s"));
+var _l = _interopRequireDefault(require("@semcore/icon/Close/l"));
 
 var _fire = _interopRequireDefault(require("@semcore/utils/lib/fire"));
 
@@ -64,15 +64,15 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_1bv7q_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_1bv7q_gg_:focus{outline:none}.___SOverlay_1bv7q_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.8);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_1bv7q_gg_ .___SOverlay_1bv7q_gg_{background:rgba(0,0,0,.2)}.___SClose_1bv7q_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1bv7q_gg_:hover{color:#929b9e}.___SClose_1bv7q_gg_.__keyboardFocused_1bv7q_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_1bv7q_gg_{min-width:60%}.___SOverlay_1bv7q_gg_{padding:10px}}"
+".___SWindow_n71dz_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_n71dz_gg_:focus{outline:none}.___SOverlay_n71dz_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_n71dz_gg_ .___SOverlay_n71dz_gg_{background:rgba(0,0,0,.4)}.___SClose_n71dz_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_n71dz_gg_:hover{color:#929b9e}.___SClose_n71dz_gg_.__keyboardFocused_n71dz_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_n71dz_gg_{min-width:60%}.___SOverlay_n71dz_gg_{padding:10px}}"
 /*__inner_css_end__*/
-, "f0u7vh_gg_")
+, "juwj6d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_1bv7q_gg_",
-  "__SOverlay": "___SOverlay_1bv7q_gg_",
-  "__SClose": "___SClose_1bv7q_gg_",
-  "_keyboardFocused": "__keyboardFocused_1bv7q_gg_"
+  "__SWindow": "___SWindow_n71dz_gg_",
+  "__SOverlay": "___SOverlay_n71dz_gg_",
+  "__SClose": "___SClose_n71dz_gg_",
+  "_keyboardFocused": "__keyboardFocused_n71dz_gg_"
 });
 
 var ModalRoot = /*#__PURE__*/function (_Component) {
@@ -151,8 +151,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
     }
   }]);
   return ModalRoot;
-}(_core.Component); // @ts-ignore
-
+}(_core.Component);
 
 (0, _defineProperty2["default"])(ModalRoot, "displayName", 'Modal');
 (0, _defineProperty2["default"])(ModalRoot, "style", style);
@@ -187,7 +186,10 @@ function Window(props) {
     "ref": windowRef,
     "returnFocus": true,
     "tabIndex": -1,
-    "autoFocus": true
+    "autoFocus": true,
+    "role": "dialog",
+    "aria-modal": true,
+    "aria-label": "Modal window"
   }, _ref2))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref5.cn("PortalProvider", {
     "value": windowRef
   }), closable && /*#__PURE__*/_react["default"].createElement(Modal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))));
@@ -219,12 +221,13 @@ function Close(props) {
   var SClose = _flexBox.Box;
   return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref7.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
     "tag": "button",
-    "tabIndex": 0
+    "tabIndex": 0,
+    "aria-label": "Close"
   }, _ref4))));
 }
 
 Close.defaultProps = {
-  children: /*#__PURE__*/_react["default"].createElement(_s["default"], {
+  children: /*#__PURE__*/_react["default"].createElement(_l["default"], {
     title: "Close"
   })
 };

package/lib/cjs/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal.tsx"],"names":["ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","Box","SOverlay","FadeInOut","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut, IFadeInOutProps } from '@semcore/animation';\nimport createComponent, { Component, Merge, PropGetter, sstyled, Root } from '@semcore/core';\nimport Portal, { IPortalProps, PortalProvider } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseS from '@semcore/icon/lib/Close/s';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport findComponent from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\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}\n\nexport interface IModalContext extends IModalProps {\n  getOverlayProps: PropGetter<ModalRoot['getOverlayProps']>;\n  getWindowProps: PropGetter<ModalRoot['getWindowProps']>;\n  getCloseProps: PropGetter<ModalRoot['getCloseProps']>;\n}\n\nclass ModalRoot extends Component<IModalProps> {\n  static displayName = 'Modal';\n  static style = style;\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = !!findComponent(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\n// @ts-ignore\nconst FocusLockWrapper = React.forwardRef<HTMLElement>(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<HTMLElement>(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    >\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<HTMLElement>(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  return sstyled(props.styles)(<SClose render={Box} tag=\"button\" tabIndex={0} />);\n}\n\nClose.defaultProps = {\n  children: <CloseS title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent<\n  Merge<IModalProps, HTMLAttributes<HTMLDivElement>>,\n  {\n    Window: ComponentProps<typeof Box>;\n    Overlay: ComponentProps<typeof Box>;\n    Close: ComponentProps<typeof Box>;\n  },\n  IModalContext\n>(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../src/Modal.js"],"names":["ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","Box","SOverlay","FadeInOut","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport findComponent from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = !!findComponent(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-modal={true}\n      aria-label=\"Modal window\"\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n  );\n}\n\nClose.defaultProps = {\n  children: <CloseIcon title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Modal';\nexport * from './Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { default } from './Modal';\nexport * from './Modal';\n"],"file":"index.js"}

package/lib/cjs/style/modal.shadow.css

@@ -24,13 +24,13 @@ SOverlay {
   justify-content: center;
   align-items: center;
   padding: 40px;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.6);
   overflow: auto;
   z-index: 10005;
   -webkit-overflow-scrolling: touch;
 
   & SOverlay {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 

package/lib/es6/Modal.js

@@ -28,7 +28,7 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
 import Portal, { PortalProvider } from '@semcore/portal';
 import { Box } from '@semcore/flex-box';
 import OutsideClick from '@semcore/outside-click';
-import CloseS from '@semcore/icon/lib/Close/s';
+import CloseIcon from '@semcore/icon/Close/l';
 import fire from '@semcore/utils/lib/fire';
 import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
 import findComponent from '@semcore/utils/lib/findComponent';
@@ -39,15 +39,15 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_1bv7q_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_1bv7q_gg_:focus{outline:none}.___SOverlay_1bv7q_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.8);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_1bv7q_gg_ .___SOverlay_1bv7q_gg_{background:rgba(0,0,0,.2)}.___SClose_1bv7q_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1bv7q_gg_:hover{color:#929b9e}.___SClose_1bv7q_gg_.__keyboardFocused_1bv7q_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_1bv7q_gg_{min-width:60%}.___SOverlay_1bv7q_gg_{padding:10px}}"
+".___SWindow_n71dz_gg_{position:relative;border-radius:6px;background:#fff;box-sizing:border-box;margin:auto;padding:24px 32px 32px 32px}.___SWindow_n71dz_gg_:focus{outline:none}.___SOverlay_n71dz_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(0,0,0,.6);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_n71dz_gg_ .___SOverlay_n71dz_gg_{background:rgba(0,0,0,.4)}.___SClose_n71dz_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a6b0b3;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_n71dz_gg_:hover{color:#929b9e}.___SClose_n71dz_gg_.__keyboardFocused_n71dz_gg_{box-shadow:0 0 0 3px rgba(43,148,225,.3)}@media (max-width:767px){.___SWindow_n71dz_gg_{min-width:60%}.___SOverlay_n71dz_gg_{padding:10px}}"
 /*__inner_css_end__*/
-, "f0u7vh_gg_")
+, "juwj6d_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_1bv7q_gg_",
-  "__SOverlay": "___SOverlay_1bv7q_gg_",
-  "__SClose": "___SClose_1bv7q_gg_",
-  "_keyboardFocused": "__keyboardFocused_1bv7q_gg_"
+  "__SWindow": "___SWindow_n71dz_gg_",
+  "__SOverlay": "___SOverlay_n71dz_gg_",
+  "__SClose": "___SClose_n71dz_gg_",
+  "_keyboardFocused": "__keyboardFocused_n71dz_gg_"
 });
 
 var ModalRoot = /*#__PURE__*/function (_Component) {
@@ -131,8 +131,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
   }]);
 
   return ModalRoot;
-}(Component); // @ts-ignore
-
+}(Component);
 
 _defineProperty(ModalRoot, "displayName", 'Modal');
 
@@ -170,7 +169,10 @@ function Window(props) {
     "ref": windowRef,
     "returnFocus": true,
     "tabIndex": -1,
-    "autoFocus": true
+    "autoFocus": true,
+    "role": "dialog",
+    "aria-modal": true,
+    "aria-label": "Modal window"
   }, _ref2))), /*#__PURE__*/React.createElement(PortalProvider, _ref5.cn("PortalProvider", {
     "value": windowRef
   }), closable && /*#__PURE__*/React.createElement(Modal.Close, null), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
@@ -202,12 +204,13 @@ function Close(props) {
   var SClose = Box;
   return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SClose, _ref7.cn("SClose", _objectSpread({}, _assignProps4({
     "tag": "button",
-    "tabIndex": 0
+    "tabIndex": 0,
+    "aria-label": "Close"
   }, _ref4))));
 }
 
 Close.defaultProps = {
-  children: /*#__PURE__*/React.createElement(CloseS, {
+  children: /*#__PURE__*/React.createElement(CloseIcon, {
     title: "Close"
   })
 };

package/lib/es6/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Modal.tsx"],"names":["React","useRef","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseS","fire","usePreventScroll","findComponent","keyboardFocusEnhance","ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { ComponentProps, HTMLAttributes, useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut, IFadeInOutProps } from '@semcore/animation';\nimport createComponent, { Component, Merge, PropGetter, sstyled, Root } from '@semcore/core';\nimport Portal, { IPortalProps, PortalProvider } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseS from '@semcore/icon/lib/Close/s';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport findComponent from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\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}\n\nexport interface IModalContext extends IModalProps {\n  getOverlayProps: PropGetter<ModalRoot['getOverlayProps']>;\n  getWindowProps: PropGetter<ModalRoot['getWindowProps']>;\n  getCloseProps: PropGetter<ModalRoot['getCloseProps']>;\n}\n\nclass ModalRoot extends Component<IModalProps> {\n  static displayName = 'Modal';\n  static style = style;\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = !!findComponent(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\n// @ts-ignore\nconst FocusLockWrapper = React.forwardRef<HTMLElement>(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<HTMLElement>(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    >\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<HTMLElement>(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  return sstyled(props.styles)(<SClose render={Box} tag=\"button\" tabIndex={0} />);\n}\n\nClose.defaultProps = {\n  children: <CloseS title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent<\n  Merge<IModalProps, HTMLAttributes<HTMLDivElement>>,\n  {\n    Window: ComponentProps<typeof Box>;\n    Overlay: ComponentProps<typeof Box>;\n    Close: ComponentProps<typeof Box>;\n  },\n  IModalContext\n>(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../src/Modal.js"],"names":["React","useRef","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","findComponent","keyboardFocusEnhance","ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","defaultProps","children","enhance"],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport findComponent from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n    };\n  }\n\n  getCloseProps() {\n    return {\n      onClick: this.handleIconCloseClick,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = !!findComponent(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-modal={true}\n      aria-label=\"Modal window\"\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n  );\n}\n\nClose.defaultProps = {\n  children: <CloseIcon title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"file":"Modal.js"}

package/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd","sourcesContent":["export { default } from './Modal';\nexport * from './Modal';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,cAAc,SAAd","sourcesContent":["export { default } from './Modal';\nexport * from './Modal';\n"],"file":"index.js"}

package/lib/es6/style/modal.shadow.css

@@ -24,13 +24,13 @@ SOverlay {
   justify-content: center;
   align-items: center;
   padding: 40px;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.6);
   overflow: auto;
   z-index: 10005;
   -webkit-overflow-scrolling: touch;
 
   & SOverlay {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 

package/lib/types/index.d.ts

@@ -1,2 +1,37 @@
-export { default } from './Modal';
-export * from './Modal';
+import React, { ComponentProps } from 'react';
+import { IFadeInOutProps } from '@semcore/animation';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { IPortalProps } from '@semcore/portal';
+import { Box, IBoxProps } from '@semcore/flex-box';
+
+export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
+  /** Duration of animation, ms
+   * @default 200
+   */
+  duration?: number;
+  /** This property is responsible for the visibility of the modal window */
+  visible?: boolean;
+  /** Function called when the component is hidden */
+  onClose?: (
+    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => void;
+  /** Displaying the close button(x) in the upper-right corner of the modal dialog
+   * @default true
+   * */
+  closable?: boolean;
+}
+
+export interface IModalContext {
+  getOverlayProps: PropGetterFn;
+  getWindowProps: PropGetterFn;
+  getCloseProps: PropGetterFn;
+}
+
+declare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {
+  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+};
+
+export default Modal;

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@semcore/modal",
   "description": "SEMRush Modal Component",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build",
+    "build": "build --source=js",
     "test": "jest"
   },
   "dependencies": {
@@ -16,7 +17,7 @@
     "@semcore/animation": "^1",
     "@semcore/portal": "^2",
     "@semcore/flex-box": "^4",
-    "@semcore/icon": "^2",
+    "@semcore/icon": "^2.16",
     "@semcore/outside-click": "^2",
     "react-focus-lock": "^2.3"
   },

package/src/{Modal.tsx → Modal.js}

@@ -1,42 +1,18 @@
-import React, { ComponentProps, HTMLAttributes, useRef } from 'react';
+import React, { useRef } from 'react';
 import FocusLock from 'react-focus-lock';
-import { FadeInOut, IFadeInOutProps } from '@semcore/animation';
-import createComponent, { Component, Merge, PropGetter, sstyled, Root } from '@semcore/core';
-import Portal, { IPortalProps, PortalProvider } from '@semcore/portal';
-import { Box, IBoxProps } from '@semcore/flex-box';
+import { FadeInOut } from '@semcore/animation';
+import createComponent, { Component, sstyled, Root } from '@semcore/core';
+import Portal, { PortalProvider } from '@semcore/portal';
+import { Box } from '@semcore/flex-box';
 import OutsideClick from '@semcore/outside-click';
-import CloseS from '@semcore/icon/lib/Close/s';
+import CloseIcon from '@semcore/icon/Close/l';
 import fire from '@semcore/utils/lib/fire';
 import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
 import findComponent from '@semcore/utils/lib/findComponent';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 import style from './style/modal.shadow.css';
 
-export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
-  /** Duration of animation, ms
-   * @default 200
-   */
-  duration?: number;
-  /** This property is responsible for the visibility of the modal window */
-  visible?: boolean;
-  /** Function called when the component is hidden */
-  onClose?: (
-    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',
-    e?: React.MouseEvent | React.KeyboardEvent,
-  ) => void;
-  /** Displaying the close button(x) in the upper-right corner of the modal dialog
-   * @default true
-   * */
-  closable?: boolean;
-}
-
-export interface IModalContext extends IModalProps {
-  getOverlayProps: PropGetter<ModalRoot['getOverlayProps']>;
-  getWindowProps: PropGetter<ModalRoot['getWindowProps']>;
-  getCloseProps: PropGetter<ModalRoot['getCloseProps']>;
-}
-
-class ModalRoot extends Component<IModalProps> {
+class ModalRoot extends Component {
   static displayName = 'Modal';
   static style = style;
   static defaultProps = {
@@ -105,15 +81,14 @@ class ModalRoot extends Component<IModalProps> {
   }
 }
 
-// @ts-ignore
-const FocusLockWrapper = React.forwardRef<HTMLElement>(function ({ tag, ...other }, ref) {
+const FocusLockWrapper = React.forwardRef(function({ tag, ...other }, ref) {
   return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;
 });
 
 function Window(props) {
   const SWindow = Root;
   const { Children, styles, visible, closable } = props;
-  const windowRef = useRef<HTMLElement>(null);
+  const windowRef = useRef(null);
 
   if (!visible) return null;
 
@@ -125,6 +100,9 @@ function Window(props) {
       returnFocus={true}
       tabIndex={-1}
       autoFocus={true}
+      role="dialog"
+      aria-modal={true}
+      aria-label="Modal window"
     >
       <PortalProvider value={windowRef}>
         {closable && <Modal.Close />}
@@ -137,7 +115,7 @@ function Window(props) {
 function Overlay(props) {
   const SOverlay = Root;
   const { Children, styles, onOutsideClick, visible } = props;
-  const overlayRef = useRef<HTMLElement>(null);
+  const overlayRef = useRef(null);
   usePreventScroll(visible);
 
   return sstyled(styles)(
@@ -151,24 +129,18 @@ function Overlay(props) {
 
 function Close(props) {
   const SClose = Root;
-  return sstyled(props.styles)(<SClose render={Box} tag="button" tabIndex={0} />);
+  return sstyled(props.styles)(
+    <SClose render={Box} tag="button" tabIndex={0} aria-label="Close" />,
+  );
 }
 
 Close.defaultProps = {
-  children: <CloseS title="Close" />,
+  children: <CloseIcon title="Close" />,
 };
 
 Close.enhance = [keyboardFocusEnhance()];
 
-const Modal = createComponent<
-  Merge<IModalProps, HTMLAttributes<HTMLDivElement>>,
-  {
-    Window: ComponentProps<typeof Box>;
-    Overlay: ComponentProps<typeof Box>;
-    Close: ComponentProps<typeof Box>;
-  },
-  IModalContext
->(ModalRoot, {
+const Modal = createComponent(ModalRoot, {
   Window,
   Overlay,
   Close,

package/src/index.d.ts

@@ -0,0 +1,37 @@
+import React, { ComponentProps } from 'react';
+import { IFadeInOutProps } from '@semcore/animation';
+import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
+import { IPortalProps } from '@semcore/portal';
+import { Box, IBoxProps } from '@semcore/flex-box';
+
+export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
+  /** Duration of animation, ms
+   * @default 200
+   */
+  duration?: number;
+  /** This property is responsible for the visibility of the modal window */
+  visible?: boolean;
+  /** Function called when the component is hidden */
+  onClose?: (
+    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',
+    e?: React.MouseEvent | React.KeyboardEvent,
+  ) => void;
+  /** Displaying the close button(x) in the upper-right corner of the modal dialog
+   * @default true
+   * */
+  closable?: boolean;
+}
+
+export interface IModalContext {
+  getOverlayProps: PropGetterFn;
+  getWindowProps: PropGetterFn;
+  getCloseProps: PropGetterFn;
+}
+
+declare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {
+  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+};
+
+export default Modal;

package/src/style/modal.shadow.css

@@ -24,13 +24,13 @@ SOverlay {
   justify-content: center;
   align-items: center;
   padding: 40px;
-  background: rgba(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.6);
   overflow: auto;
   z-index: 10005;
   -webkit-overflow-scrolling: touch;
 
   & SOverlay {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 

package/lib/types/Modal.d.ts

@@ -1,59 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { IFadeInOutProps } from '@semcore/animation';
-import { Component, Merge, PropGetter } from '@semcore/core';
-import { IPortalProps } from '@semcore/portal';
-import { Box, IBoxProps } from '@semcore/flex-box';
-export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
-    /** Duration of animation, ms
-     * @default 200
-     */
-    duration?: number;
-    /** This property is responsible for the visibility of the modal window */
-    visible?: boolean;
-    /** Function called when the component is hidden */
-    onClose?: (trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape', e?: React.MouseEvent | React.KeyboardEvent) => void;
-    /** Displaying the close button(x) in the upper-right corner of the modal dialog
-     * @default true
-     * */
-    closable?: boolean;
-}
-export interface IModalContext extends IModalProps {
-    getOverlayProps: PropGetter<ModalRoot['getOverlayProps']>;
-    getWindowProps: PropGetter<ModalRoot['getWindowProps']>;
-    getCloseProps: PropGetter<ModalRoot['getCloseProps']>;
-}
-declare class ModalRoot extends Component<IModalProps> {
-    static displayName: string;
-    static style: {
-        [key: string]: string;
-    };
-    static defaultProps: {
-        duration: number;
-        closable: boolean;
-    };
-    handleKeyDown: (e: any) => void;
-    handleIconCloseClick: (e: any) => void;
-    handleOutsideClick: (e: any) => void;
-    getOverlayProps(): {
-        duration: number;
-        visible: boolean;
-        onOutsideClick: (e: any) => void;
-    };
-    getWindowProps(): {
-        visible: boolean;
-        closable: boolean;
-        onKeyDown: (e: any) => void;
-    };
-    getCloseProps(): {
-        onClick: (e: any) => void;
-    };
-    render(): JSX.Element;
-}
-declare const Modal: import("@semcore/core").ComponentType<Merge<IModalProps, React.HTMLAttributes<HTMLDivElement>>, {
-    Window: ComponentProps<typeof Box>;
-    Overlay: ComponentProps<typeof Box>;
-    Close: ComponentProps<typeof Box>;
-}, IModalContext, {
-    [key: string]: (arg: unknown) => void;
-}, null>;
-export default Modal;