@semcore/fullscreen-modal 2.0.9 → 2.0.10

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [2.0.10] - 2022-07-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
+
 ## [2.0.9] - 2022-07-13
 
 ### Fixed

package/lib/cjs/FullscreenModal.js

@@ -56,22 +56,22 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SFullscreenOverlay_1rpnd_gg_{padding:0}.___SFullscreenModal_1rpnd_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_1rpnd_gg_,.___SClose_1rpnd_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1rpnd_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_1rpnd_gg_:hover{color:#8a8e9b}.___SBack_1rpnd_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_1rpnd_gg_:hover{color:#484a54}.___SBackText_1rpnd_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1rpnd_gg_,.___STitle_1rpnd_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1rpnd_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_1rpnd_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_1rpnd_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_1rpnd_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_1rpnd_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_1rpnd_gg_{display:flex;height:100%;overflow:auto}.___SSection_1rpnd_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1rpnd_gg_{transition:none}}"
+".___SFullscreenOverlay_pndqi_gg_{padding:0}.___SFullscreenModal_pndqi_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_pndqi_gg_,.___SClose_pndqi_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_pndqi_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_pndqi_gg_:hover{color:#8a8e9b}.___SBack_pndqi_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_pndqi_gg_:hover{color:#484a54}.___SBackText_pndqi_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_pndqi_gg_,.___STitle_pndqi_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_pndqi_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_pndqi_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_pndqi_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_pndqi_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_pndqi_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_pndqi_gg_{display:flex;height:100%;overflow:auto}.___SSection_pndqi_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_pndqi_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1a3d4j1_gg_")
+, "pndqi_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SFullscreenOverlay": "___SFullscreenOverlay_1rpnd_gg_",
-  "__SFullscreenModal": "___SFullscreenModal_1rpnd_gg_",
-  "__SBack": "___SBack_1rpnd_gg_",
-  "__SClose": "___SClose_1rpnd_gg_",
-  "__SBackText": "___SBackText_1rpnd_gg_",
-  "__SDescription": "___SDescription_1rpnd_gg_",
-  "__STitle": "___STitle_1rpnd_gg_",
-  "__SHeader": "___SHeader_1rpnd_gg_",
-  "__SFooter": "___SFooter_1rpnd_gg_",
-  "__SBody": "___SBody_1rpnd_gg_",
-  "__SSection": "___SSection_1rpnd_gg_"
+  "__SFullscreenOverlay": "___SFullscreenOverlay_pndqi_gg_",
+  "__SFullscreenModal": "___SFullscreenModal_pndqi_gg_",
+  "__SBack": "___SBack_pndqi_gg_",
+  "__SClose": "___SClose_pndqi_gg_",
+  "__SBackText": "___SBackText_pndqi_gg_",
+  "__SDescription": "___SDescription_pndqi_gg_",
+  "__STitle": "___STitle_pndqi_gg_",
+  "__SHeader": "___SHeader_pndqi_gg_",
+  "__SFooter": "___SFooter_pndqi_gg_",
+  "__SBody": "___SBody_pndqi_gg_",
+  "__SSection": "___SSection_pndqi_gg_"
 });
 
 var FullscreenModalRoot = /*#__PURE__*/function (_Component) {

package/lib/es6/FullscreenModal.js

@@ -38,22 +38,22 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SFullscreenOverlay_1rpnd_gg_{padding:0}.___SFullscreenModal_1rpnd_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_1rpnd_gg_,.___SClose_1rpnd_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1rpnd_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_1rpnd_gg_:hover{color:#8a8e9b}.___SBack_1rpnd_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_1rpnd_gg_:hover{color:#484a54}.___SBackText_1rpnd_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_1rpnd_gg_,.___STitle_1rpnd_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1rpnd_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_1rpnd_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_1rpnd_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_1rpnd_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_1rpnd_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_1rpnd_gg_{display:flex;height:100%;overflow:auto}.___SSection_1rpnd_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1rpnd_gg_{transition:none}}"
+".___SFullscreenOverlay_pndqi_gg_{padding:0}.___SFullscreenModal_pndqi_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:#ffffff;border-radius:0;padding:0}.___SBack_pndqi_gg_,.___SClose_pndqi_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_pndqi_gg_{top:17px;right:23px;padding:12px;color:#a9abb6}.___SClose_pndqi_gg_:hover{color:#8a8e9b}.___SBack_pndqi_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:12px;color:#6c6e79;font-size:12px;line-height:1.33}.___SBack_pndqi_gg_:hover{color:#484a54}.___SBackText_pndqi_gg_{margin-left:4px;font-size:14px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SDescription_pndqi_gg_,.___STitle_pndqi_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_pndqi_gg_{font-size:24px;line-height:1.17;font-weight:700;font-family:FactorA-Bold,sans-serif;color:#191b23}.___SDescription_pndqi_gg_{display:flex;align-items:baseline;font-size:12px;line-height:1.33;color:#6c6e79}.___SDescription_pndqi_gg_:before{content:\"\";position:relative;top:4px;display:block;margin-left:12px;margin-right:12px;height:24px;width:1px;background-color:#c4c7cf}.___SHeader_pndqi_gg_{display:flex;align-items:baseline;padding-left:32px;padding-bottom:8px;padding-right:72px;padding-top:40px;min-height:76px;box-shadow:inset 0 -1px 0 #c4c7cf;box-sizing:border-box}.___SFooter_pndqi_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 #c4c7cf;box-sizing:border-box}.___SBody_pndqi_gg_{display:flex;height:100%;overflow:auto}.___SSection_pndqi_gg_{padding-top:24px;padding-bottom:24px;padding-left:32px;padding-right:32px;flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_pndqi_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1a3d4j1_gg_")
+, "pndqi_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SFullscreenOverlay": "___SFullscreenOverlay_1rpnd_gg_",
-  "__SFullscreenModal": "___SFullscreenModal_1rpnd_gg_",
-  "__SBack": "___SBack_1rpnd_gg_",
-  "__SClose": "___SClose_1rpnd_gg_",
-  "__SBackText": "___SBackText_1rpnd_gg_",
-  "__SDescription": "___SDescription_1rpnd_gg_",
-  "__STitle": "___STitle_1rpnd_gg_",
-  "__SHeader": "___SHeader_1rpnd_gg_",
-  "__SFooter": "___SFooter_1rpnd_gg_",
-  "__SBody": "___SBody_1rpnd_gg_",
-  "__SSection": "___SSection_1rpnd_gg_"
+  "__SFullscreenOverlay": "___SFullscreenOverlay_pndqi_gg_",
+  "__SFullscreenModal": "___SFullscreenModal_pndqi_gg_",
+  "__SBack": "___SBack_pndqi_gg_",
+  "__SClose": "___SClose_pndqi_gg_",
+  "__SBackText": "___SBackText_pndqi_gg_",
+  "__SDescription": "___SDescription_pndqi_gg_",
+  "__STitle": "___STitle_pndqi_gg_",
+  "__SHeader": "___SHeader_pndqi_gg_",
+  "__SFooter": "___SFooter_pndqi_gg_",
+  "__SBody": "___SBody_pndqi_gg_",
+  "__SSection": "___SSection_pndqi_gg_"
 });
 
 var FullscreenModalRoot = /*#__PURE__*/function (_Component) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/fullscreen-modal",
   "description": "SEMRush FullscreenModal Component",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/src/FullscreenModal.jsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import Modal from '@semcore/modal';
-import { Flex, Box } from '@semcore/flex-box';
-import CloseIcon from '@semcore/icon/Close/l';
-import ArrowLeft from '@semcore/icon/ArrowLeft/m';
-import { Text } from '@semcore/typography';
-import fire from '@semcore/utils/lib/fire';
-
-import style from './style/fullscreen-modal.shadow.css';
-
-class FullscreenModalRoot extends Component {
-  static displayName = 'FullscreenModal';
-  static style = style;
-
-  bindHandlerClose = (trigger) => (e) => {
-    fire(this, 'onClose', trigger, e);
-  };
-
-  getCloseProps() {
-    return {
-      onClick: this.bindHandlerClose('onCloseClick'),
-    };
-  }
-
-  getBackProps() {
-    return {
-      onClick: this.bindHandlerClose('onBackClick'),
-    };
-  }
-
-  render() {
-    const SFullscreenModal = Root;
-    const { styles, Children, onClose, visible, closable, duration, disablePortal } = this.asProps;
-    const SFullscreenOverlay = Modal.Overlay;
-
-    return sstyled(styles)(
-      <Modal
-        closable={false}
-        visible={visible}
-        onClose={onClose}
-        duration={duration}
-        disablePortal={disablePortal}
-      >
-        <SFullscreenOverlay>
-          <SFullscreenModal render={Modal.Window}>
-            {closable && <FullscreenModal.Close />}
-            <Children />
-          </SFullscreenModal>
-        </SFullscreenOverlay>
-      </Modal>,
-    );
-  }
-}
-
-function Header(props) {
-  const SHeader = Root;
-  const { Children, styles, title, description } = props;
-  return sstyled(styles)(
-    <SHeader render={Box}>
-      {title && <FullscreenModal.Title children={title} />}
-      {description && <FullscreenModal.Description children={description} />}
-      <Children />
-    </SHeader>,
-  );
-}
-
-function Body(props) {
-  const SBody = Root;
-  return sstyled(props.styles)(<SBody render={Box} />);
-}
-
-function Section(props) {
-  const SSection = Root;
-  return sstyled(props.styles)(<SSection render={Box} />);
-}
-
-function Footer(props) {
-  const SFooter = Root;
-  return sstyled(props.styles)(<SFooter render={Flex} />);
-}
-
-function Close(props) {
-  const SClose = Root;
-  return sstyled(props.styles)(<SClose render={CloseIcon} />);
-}
-
-function Title(props) {
-  const STitle = Root;
-  return sstyled(props.styles)(<STitle render={Text} tag="h4" />);
-}
-
-function Description(props) {
-  const SDescription = Root;
-  return sstyled(props.styles)(<SDescription render={Text} />);
-}
-
-function Back(props) {
-  const SBack = Root;
-  const SBackText = Text;
-  const { Children, styles } = props;
-
-  return sstyled(styles)(
-    <SBack render={Box}>
-      <ArrowLeft />
-      <SBackText>
-        <Children />
-      </SBackText>
-    </SBack>,
-  );
-}
-
-const FullscreenModal = createComponent(
-  FullscreenModalRoot,
-  {
-    Header,
-    Footer,
-    Close,
-    Back,
-    Body,
-    Section,
-    Title,
-    Description,
-  },
-  { parent: Modal },
-);
-
-export default FullscreenModal;

package/src/index.d.ts

@@ -1,41 +0,0 @@
-import { ComponentProps } from 'react';
-import { ReturnEl, CProps, PropGetterFn } from '@semcore/core';
-import { IModalProps } from '@semcore/modal';
-import { Box, IBoxProps } from '@semcore/flex-box';
-import { IIconProps } from '@semcore/icon';
-import { Text } from '@semcore/typography';
-
-export interface IFullscreenModalProps extends IModalProps {
-  /** This property is responsible for the visibility of the modal window */
-  hidden?: boolean;
-  /** Function that is invoked when hiding a component */
-  onClose?: (
-    trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
-    e?: React.MouseEvent | React.KeyboardEvent,
-  ) => void;
-}
-
-export interface IFullscreenModalHeaderProps extends IBoxProps {
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-}
-
-export interface IFullscreenModalContext {
-  getBackProps: PropGetterFn;
-  getCloseProps: PropGetterFn;
-}
-
-declare const FullscreenModal: (<T>(
-  props: CProps<IFullscreenModalProps & T, IFullscreenModalContext>,
-) => ReturnEl) & {
-  Header: <T>(props: IFullscreenModalHeaderProps & T) => ReturnEl;
-  Footer: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Close: <T>(props: IIconProps & T) => ReturnEl;
-  Back: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Body: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Section: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
-  Title: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
-  Description: <T>(props: ComponentProps<typeof Text> & T) => ReturnEl;
-};
-
-export default FullscreenModal;

package/src/index.js

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

package/src/style/fullscreen-modal.shadow.css

@@ -1,129 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SFullscreenOverlay {
-  padding: 0;
-}
-
-SFullscreenModal {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: var(--white);
-  border-radius: 0;
-  padding: 0;
-}
-
-SClose,
-SBack {
-  cursor: pointer;
-  position: absolute;
-  z-index: 1;
-}
-
-SClose {
-  top: 17px;
-  right: 23px;
-  padding: 12px;
-  color: var(--gray-300);
-
-  &:hover {
-    color: var(--gray-400);
-  }
-}
-
-SBack {
-  top: 8px;
-  left: 32px;
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-  color: var(--gray-500);
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-
-  &:hover {
-    color: var(--gray-600);
-  }
-}
-
-SBackText {
-  margin-left: 4px;
-  font-size: var(--fs-200);
-  line-height: var(--lh-200);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-STitle,
-SDescription {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-STitle {
-  font-size: var(--fs-500);
-  line-height: var(--lh-500);
-  font-weight: 700;
-  font-family: FactorA-Bold, sans-serif;
-  color: var(--gray-800);
-}
-
-SDescription {
-  display: flex;
-  align-items: baseline;
-  font-size: var(--fs-100);
-  line-height: var(--lh-100);
-  color: var(--gray-500);
-
-  &::before {
-    content: '';
-    position: relative;
-    top: 4px;
-    display: block;
-    margin-left: 12px;
-    margin-right: 12px;
-    height: 24px;
-    width: 1px;
-    background-color: var(--gray-200);
-  }
-}
-
-SHeader {
-  display: flex;
-  align-items: baseline;
-  padding-left: 32px;
-  padding-bottom: 8px;
-  padding-right: 72px;
-  padding-top: 40px;
-  min-height: 76px;
-  box-shadow: inset 0 -1px 0 var(--gray-200);
-  box-sizing: border-box;
-}
-
-SFooter {
-  min-height: 52px;
-  box-shadow: inset 0 1px 1px 0 var(--gray-200);
-  box-sizing: border-box;
-}
-
-SBody {
-  display: flex;
-  height: 100%;
-  overflow: auto;
-}
-
-SSection {
-  padding-top: 24px;
-  padding-bottom: 24px;
-  padding-left: 32px;
-  padding-right: 32px;
-  flex: 1 1 auto;
-}
-
-@media (prefers-reduced-motion) {
-  SBackText {
-    transition: none;
-  }
-}