@semcore/modal 3.0.5 → 3.0.8

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [3.0.8] - 2022-07-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
+
+## [3.0.7] - 2022-07-07
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/animation` [1.5.3 ~> 1.5.4], `@semcore/flex-box` [4.5.5 ~> 4.5.6], `@semcore/icon` [2.27.0 ~> 2.28.0]).
+
+## [3.0.6] - 2022-06-02
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/animation` [1.5.2 ~> 1.5.3], `@semcore/flex-box` [4.5.4 ~> 4.5.5], `@semcore/icon` [2.26.1 ~> 2.27.0]).
+
 ## [3.0.5] - 2022-05-31
 
 ### Changed

package/README.md

@@ -0,0 +1,67 @@
+# @semcore/modal
+
+[![version](https://img.shields.io/npm/v/@semcore/modal.svg)](https://www.npmjs.com/@semcore/modal)
+[![downloads](https://img.shields.io/npm/dt/@semcore/modal.svg)](https://www.npmjs.com/package/@semcore/modal)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/semrush/intergalactic/blob/master/LICENSE)
+
+> This component is part of the Intergalactic design system
+
+### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/modal/)
+
+### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
+
+## Install
+
+```sh
+npm install @semcore/ui
+```
+
+## Usage
+
+```jsx
+import Modal from '@semcore/ui/modal';
+```
+
+<details>
+  <summary>Alternative installation and use</summary>
+
+**We do not recommend this usage path due to possible dependency and update issues.**
+
+### Install
+
+You can only install one package from the design system
+
+```sh
+npm install @semcore/modal @semcore/core
+```
+
+`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
+of the components that is discussed below. There should only be one version of the package in the project._
+
+### Usage
+
+You can use the package the same way but without `/ui/` in the import path.
+
+```jsx
+import Modal from '@semcore/modal';
+```
+
+</details>
+
+## 👤 Author
+
+[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+
+## 🤝 Contributing
+
+Contributions, issues and feature requests are welcome!
+
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## 📝 License
+
+This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.

package/lib/cjs/Modal.js

@@ -70,15 +70,15 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_bgw27_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
+".___SWindow_uplm1_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_uplm1_gg_:focus{outline:none}.___SOverlay_uplm1_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_uplm1_gg_ .___SOverlay_uplm1_gg_{background:rgba(25,27,35,.4)}.___SClose_uplm1_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_uplm1_gg_:hover{color:#8a8e9b}.___SClose_uplm1_gg_.__keyboardFocused_uplm1_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_uplm1_gg_{min-width:60%}.___SOverlay_uplm1_gg_{padding:12px}}"
 /*__inner_css_end__*/
-, "kfzky3_gg_")
+, "uplm1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_bgw27_gg_",
-  "__SOverlay": "___SOverlay_bgw27_gg_",
-  "__SClose": "___SClose_bgw27_gg_",
-  "_keyboardFocused": "__keyboardFocused_bgw27_gg_"
+  "__SWindow": "___SWindow_uplm1_gg_",
+  "__SOverlay": "___SOverlay_uplm1_gg_",
+  "__SClose": "___SClose_uplm1_gg_",
+  "_keyboardFocused": "__keyboardFocused_uplm1_gg_"
 });
 
 var ModalRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/Modal.js

@@ -40,15 +40,15 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_bgw27_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_bgw27_gg_:focus{outline:none}.___SOverlay_bgw27_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_bgw27_gg_ .___SOverlay_bgw27_gg_{background:rgba(25,27,35,.4)}.___SClose_bgw27_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_bgw27_gg_:hover{color:#8a8e9b}.___SClose_bgw27_gg_.__keyboardFocused_bgw27_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_bgw27_gg_{min-width:60%}.___SOverlay_bgw27_gg_{padding:12px}}"
+".___SWindow_uplm1_gg_{position:relative;border-radius:12px;background:#ffffff;box-sizing:border-box;margin:auto;padding:40px;box-shadow:0 3px 8px rgba(25,27,35,.2)}.___SWindow_uplm1_gg_:focus{outline:none}.___SOverlay_uplm1_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:40px;background:rgba(25,27,35,.7);overflow:auto;z-index:10005;-webkit-overflow-scrolling:touch}.___SOverlay_uplm1_gg_ .___SOverlay_uplm1_gg_{background:rgba(25,27,35,.4)}.___SClose_uplm1_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:12px;color:#a9abb6;cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_uplm1_gg_:hover{color:#8a8e9b}.___SClose_uplm1_gg_.__keyboardFocused_uplm1_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}@media (max-width:767px){.___SWindow_uplm1_gg_{min-width:60%}.___SOverlay_uplm1_gg_{padding:12px}}"
 /*__inner_css_end__*/
-, "kfzky3_gg_")
+, "uplm1_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_bgw27_gg_",
-  "__SOverlay": "___SOverlay_bgw27_gg_",
-  "__SClose": "___SClose_bgw27_gg_",
-  "_keyboardFocused": "__keyboardFocused_bgw27_gg_"
+  "__SWindow": "___SWindow_uplm1_gg_",
+  "__SOverlay": "___SOverlay_uplm1_gg_",
+  "__SClose": "___SClose_uplm1_gg_",
+  "_keyboardFocused": "__keyboardFocused_uplm1_gg_"
 });
 
 var ModalRoot = /*#__PURE__*/function (_Component) {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@semcore/modal",
   "description": "SEMRush Modal Component",
-  "version": "3.0.5",
+  "version": "3.0.8",
   "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>",
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "scripts": {
     "build": "build --source=js",

package/src/Modal.jsx

@@ -1,149 +0,0 @@
-import React, { useRef } from 'react';
-import FocusLock from 'react-focus-lock';
-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 CloseIcon from '@semcore/icon/Close/l';
-import fire from '@semcore/utils/lib/fire';
-import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
-import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-import style from './style/modal.shadow.css';
-
-class ModalRoot extends Component {
-  static displayName = 'Modal';
-  static style = style;
-  static defaultProps = {
-    duration: 200,
-    closable: true,
-  };
-
-  handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
-      e.stopPropagation();
-      fire(this, 'onClose', 'onEscape', e);
-    }
-  };
-
-  handleIconCloseClick = (e) => {
-    fire(this, 'onClose', 'onCloseClick', e);
-  };
-
-  handleOutsideClick = (e) => {
-    fire(this, 'onClose', 'onOutsideClick', e);
-  };
-
-  getOverlayProps() {
-    const { duration, visible } = this.asProps;
-    return {
-      duration,
-      visible,
-      onOutsideClick: this.handleOutsideClick,
-    };
-  }
-
-  getWindowProps() {
-    const { visible, closable } = this.asProps;
-    return {
-      visible,
-      closable,
-      onKeyDown: this.handleKeyDown,
-    };
-  }
-
-  getCloseProps() {
-    return {
-      onClick: this.handleIconCloseClick,
-    };
-  }
-
-  render() {
-    const { Children, disablePortal } = this.asProps;
-
-    const advanceMode = isAdvanceMode(Children, [
-      Modal.Overlay.displayName,
-      Modal.Window.displayName,
-    ]);
-
-    return (
-      <Portal disablePortal={disablePortal}>
-        {advanceMode ? (
-          <Children />
-        ) : (
-          <Modal.Overlay>
-            <Root render={Modal.Window} />
-          </Modal.Overlay>
-        )}
-      </Portal>
-    );
-  }
-}
-
-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(null);
-
-  if (!visible) return null;
-
-  return sstyled(styles)(
-    <SWindow
-      render={FocusLockWrapper}
-      tag={Box}
-      ref={windowRef}
-      returnFocus={true}
-      tabIndex={-1}
-      autoFocus={true}
-      role="dialog"
-      aria-modal={true}
-      aria-label="Modal window"
-    >
-      <PortalProvider value={windowRef}>
-        {closable && <Modal.Close />}
-        <Children />
-      </PortalProvider>
-    </SWindow>,
-  );
-}
-
-function Overlay(props) {
-  const SOverlay = Root;
-  const { Children, styles, onOutsideClick, visible } = props;
-  const overlayRef = useRef(null);
-  usePreventScroll(visible);
-
-  return sstyled(styles)(
-    <SOverlay render={FadeInOut} ref={overlayRef}>
-      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>
-        <Children />
-      </OutsideClick>
-    </SOverlay>,
-  );
-}
-
-function Close(props) {
-  const SClose = Root;
-  return sstyled(props.styles)(
-    <SClose render={Box} tag="button" tabIndex={0} aria-label="Close" />,
-  );
-}
-
-Close.defaultProps = {
-  children: <CloseIcon title="Close" />,
-};
-
-Close.enhance = [keyboardFocusEnhance()];
-
-const Modal = createComponent(ModalRoot, {
-  Window,
-  Overlay,
-  Close,
-});
-
-export default Modal;

package/src/index.d.ts

@@ -1,37 +0,0 @@
-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/index.js

@@ -1 +0,0 @@
-export { default } from './Modal';

package/src/style/modal.shadow.css

@@ -1,68 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SWindow {
-  position: relative;
-  border-radius: var(--rounded-l);
-  background: var(--white);
-  box-sizing: border-box;
-  margin: auto;
-  padding: 40px;
-  box-shadow: 0 3px 8px color-mod(var(--gray-800) a(20%));
-
-  &:focus {
-    outline: none;
-  }
-}
-
-SOverlay {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 40px;
-  background: color-mod(var(--gray-800) a(70%));
-  overflow: auto;
-  z-index: 10005;
-  -webkit-overflow-scrolling: touch;
-
-  & SOverlay {
-    background: color-mod(var(--gray-800) a(40%));
-  }
-}
-
-SClose {
-  display: inline-flex;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 12px;
-  color: var(--gray-300);
-  cursor: pointer;
-  z-index: 1;
-  border: none;
-  background: none;
-  outline: none;
-
-  &:hover {
-    color: var(--gray-400);
-  }
-}
-
-SClose[keyboardFocused] {
-  box-shadow: var(--keyboard-focus);
-}
-
-@media (max-width: 767px) {
-  SWindow {
-    min-width: 60%;
-  }
-
-  SOverlay {
-    padding: 12px;
-  }
-}