@megafon/ui-core 6.2.0 → 7.0.0-beta.1

package/dist/es/components/Modal/Modal.js

@@ -0,0 +1,278 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import { cnCreate, breakpoints } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
+import ReactModal from 'react-modal';
+import THROTTLE_TIME from "../../constants/throttleTime";
+import useResolution from "../../hooks/useResolution";
+import ModalDesktop from "./_ModalDesktop/ModalDesktop";
+import ModalMobileBottom from "./_ModalMobileBottom/ModalMobileBottom";
+import ModalMobileFullScreen from "./_ModalMobileFullScreen/ModalMobileFullScreen";
+import { changeBodyPadding, getCorrectMaxHeight } from "./utils/utils";
+import "./Modal.css";
+var MOBILE_BIG_START = breakpoints.MOBILE_BIG_START;
+var HEIGHT_TRANSITION_PROPERTY = 'height';
+export var MODAL_MOBILE_VIEWS_ENUM;
+(function (MODAL_MOBILE_VIEWS_ENUM) {
+  MODAL_MOBILE_VIEWS_ENUM["FULL_SCREEN"] = "full-screen";
+  MODAL_MOBILE_VIEWS_ENUM["BOTTOM"] = "bottom";
+})(MODAL_MOBILE_VIEWS_ENUM || (MODAL_MOBILE_VIEWS_ENUM = {}));
+export var MODAL_TRANSITIONS_STEPS_ENUM;
+(function (MODAL_TRANSITIONS_STEPS_ENUM) {
+  MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";
+  MODAL_TRANSITIONS_STEPS_ENUM["MOVE_STEP"] = "move-step";
+  MODAL_TRANSITIONS_STEPS_ENUM["MOVE_END_STEP"] = "move-end-step";
+  MODAL_TRANSITIONS_STEPS_ENUM["END_STEP"] = "end-step";
+})(MODAL_TRANSITIONS_STEPS_ENUM || (MODAL_TRANSITIONS_STEPS_ENUM = {}));
+var bodyCn = cnCreate('mfui-modal-open-body');
+var cn = cnCreate('mfui-modal');
+var Modal = function Modal(_ref) {
+  var className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    scrollBarParams = _ref.scrollBarParams,
+    isOpened = _ref.isOpened,
+    headerProps = _ref.headerProps,
+    footerProps = _ref.footerProps,
+    _ref$mobileView = _ref.mobileView,
+    mobileView = _ref$mobileView === void 0 ? MODAL_MOBILE_VIEWS_ENUM.FULL_SCREEN : _ref$mobileView,
+    isEnabledNativeScroll = _ref.isEnabledNativeScroll,
+    isSwipeDisabled = _ref.isSwipeDisabled,
+    isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
+    _ref$hideAriaApp = _ref.hideAriaApp,
+    hideAriaApp = _ref$hideAriaApp === void 0 ? false : _ref$hideAriaApp,
+    contentLabel = _ref.contentLabel,
+    _ref$isReturnFocusAft = _ref.isReturnFocusAfterClose,
+    isReturnFocusAfterClose = _ref$isReturnFocusAft === void 0 ? true : _ref$isReturnFocusAft,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    getModalContentRef = _ref.getModalContentRef,
+    getModalOverlayRef = _ref.getModalOverlayRef,
+    onAfterModalOpen = _ref.onAfterModalOpen;
+  var _ref2 = headerProps || {},
+    _ref2$isStickyHeader = _ref2.isStickyHeader,
+    isStickyHeader = _ref2$isStickyHeader === void 0 ? true : _ref2$isStickyHeader;
+  var _ref3 = footerProps || {},
+    isStickyFooter = _ref3.isStickyFooter;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isPopupOpened = _React$useState2[0],
+    setIsPopupOpened = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    scrollMaxHeight = _React$useState4[0],
+    setScrollMaxHeight = _React$useState4[1];
+  var _React$useState5 = React.useState(MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    transitionStep = _React$useState6[0],
+    setTransitionStep = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    containerWrapTransform = _React$useState8[0],
+    setContainerWrapTransform = _React$useState8[1];
+  var _React$useState9 = React.useState(undefined),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    containerWrapHeight = _React$useState10[0],
+    setContainerWrapHeight = _React$useState10[1];
+  var _React$useState11 = React.useState(''),
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    containerWrapOverflow = _React$useState12[0],
+    setContainerWrapOverflow = _React$useState12[1];
+  var overlayRef = React.useRef(null);
+  var headerRef = React.useRef(null);
+  var footerRef = React.useRef(null);
+  var containerWrapRef = React.useRef(null);
+  var containerInnerRef = React.useRef(null);
+  var containerBodyRef = React.useRef(null);
+  var resizeObserver = React.useRef(null);
+  var _useResolution = useResolution(),
+    isMobile = _useResolution.isMobile;
+  var isFullScreenView = mobileView === MODAL_MOBILE_VIEWS_ENUM.FULL_SCREEN && isMobile;
+  var isBottomView = mobileView === MODAL_MOBILE_VIEWS_ENUM.BOTTOM && isMobile;
+  var isBottomTransitionIn = transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.END_STEP && transitionStep !== MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP;
+  var isTransitionMoveStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP;
+  var isTransitionEndStep = transitionStep === MODAL_TRANSITIONS_STEPS_ENUM.END_STEP;
+  var handleChangeTransitionStep = function handleChangeTransitionStep(value) {
+    setTransitionStep(value);
+  };
+  var handleChangeContainerWrapTransform = function handleChangeContainerWrapTransform(value) {
+    setContainerWrapTransform(value);
+  };
+  var handleGetModalOverlayRef = function handleGetModalOverlayRef(node) {
+    overlayRef.current = node;
+    getModalOverlayRef === null || getModalOverlayRef === void 0 ? void 0 : getModalOverlayRef(node);
+  };
+  var handleSetScrollContentMaxHeight = React.useCallback(function () {
+    var correctMaxHeight = getCorrectMaxHeight({
+      refs: {
+        overlayNode: overlayRef.current,
+        headerNode: headerRef.current,
+        footerNode: footerRef.current,
+        containerBodyNode: containerBodyRef.current
+      },
+      props: {
+        isStickyFooter: isStickyFooter,
+        isBottomView: isBottomView,
+        isStickyHeader: isStickyHeader
+      }
+    });
+    setScrollMaxHeight(correctMaxHeight);
+  }, [isStickyFooter, isBottomView, isStickyHeader]);
+  var handleSetContainerWrapHeight = React.useCallback(function () {
+    var containerInnerNode = containerInnerRef.current;
+    if (!containerInnerNode) {
+      return;
+    }
+    setContainerWrapHeight(containerInnerNode.offsetHeight);
+  }, []);
+  var handleSetContainerWrapRef = function handleSetContainerWrapRef(node) {
+    containerWrapRef.current = node;
+    if (!containerInnerRef.current || !resizeObserver.current) {
+      return;
+    }
+    if (isMobile || window.innerWidth < MOBILE_BIG_START) {
+      resizeObserver.current.unobserve(containerInnerRef.current);
+      return;
+    }
+    resizeObserver.current.observe(containerInnerRef.current);
+  };
+  var handleSetStyles = React.useCallback(function () {
+    if (isEnabledNativeScroll && overlayRef.current) {
+      overlayRef.current.scrollTo(0, 0);
+      return;
+    }
+    handleSetScrollContentMaxHeight();
+  }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
+  var handleAfterOpen = function handleAfterOpen() {
+    handleSetStyles();
+    onAfterModalOpen === null || onAfterModalOpen === void 0 ? void 0 : onAfterModalOpen();
+  };
+  var handlePopupClose = function handlePopupClose() {
+    setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.END_STEP);
+  };
+  var handleTransitionExited = function handleTransitionExited() {
+    setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
+    isBottomView && setContainerWrapTransform('none');
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  };
+  var handleTransitionEnd = function handleTransitionEnd(e) {
+    if (isMobile || e.propertyName !== HEIGHT_TRANSITION_PROPERTY) {
+      return;
+    }
+    setContainerWrapOverflow('');
+  };
+  React.useEffect(function () {
+    setIsPopupOpened(isOpened);
+    changeBodyPadding(isOpened);
+    if (!isOpened) {
+      setContainerWrapHeight(undefined);
+    }
+  }, [isOpened]);
+  React.useEffect(function () {
+    if (isMobile || window.innerWidth < MOBILE_BIG_START || !window.ResizeObserver) {
+      return;
+    }
+    resizeObserver.current = new ResizeObserver(handleSetContainerWrapHeight);
+  }, [handleSetContainerWrapHeight, isMobile]);
+  React.useEffect(function () {
+    if (!containerInnerRef.current || !resizeObserver.current || !isMobile) {
+      return;
+    }
+    setContainerWrapHeight(undefined);
+    resizeObserver.current.unobserve(containerInnerRef.current);
+  }, [isMobile]);
+  React.useEffect(function () {
+    if (!containerWrapRef.current || !containerWrapHeight) {
+      return;
+    }
+    var isNewContainerHeightMoreCurrent = containerWrapHeight > containerWrapRef.current.offsetHeight;
+    isNewContainerHeightMoreCurrent && setContainerWrapOverflow('hidden');
+  }, [containerWrapHeight]);
+  React.useEffect(function () {
+    if (isEnabledNativeScroll) {
+      return undefined;
+    }
+    var handleThrottleResize = throttle(function () {
+      handleSetScrollContentMaxHeight();
+    }, THROTTLE_TIME.resize);
+    window.addEventListener('resize', handleThrottleResize);
+    return function () {
+      window.removeEventListener('resize', handleThrottleResize);
+    };
+  }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
+  React.useEffect(function () {
+    return function () {
+      setIsPopupOpened(false);
+      document.body.style.paddingRight = '';
+      if (!containerInnerRef.current || !resizeObserver.current) {
+        return;
+      }
+      resizeObserver.current.unobserve(containerInnerRef.current);
+    };
+  }, []);
+  var contextProps = {
+    classes: classes,
+    dataAttrs: dataAttrs,
+    scrollBarParams: _extends(_extends({}, scrollBarParams), {
+      maxHeight: scrollMaxHeight
+    }),
+    headerProps: headerProps,
+    footerProps: footerProps,
+    refs: {
+      overlayRef: overlayRef,
+      headerRef: headerRef,
+      footerRef: footerRef,
+      containerWrapRef: containerWrapRef,
+      containerInnerRef: containerInnerRef,
+      containerBodyRef: containerBodyRef
+    },
+    isEnabledNativeScroll: isEnabledNativeScroll,
+    isDisabledBackgroundClick: isDisabledBackgroundClick,
+    isMobile: isMobile,
+    isTransitionMoveStep: isTransitionMoveStep,
+    isTransitionEndStep: isTransitionEndStep,
+    containerWrapTransform: containerWrapTransform,
+    containerWrapHeight: containerWrapHeight,
+    containerWrapOverflow: containerWrapOverflow,
+    isBottomTransitionIn: isBottomTransitionIn,
+    onSetContainerWrapRef: handleSetContainerWrapRef,
+    onPopupClose: handlePopupClose,
+    onTransitionExited: handleTransitionExited,
+    onTransitionEnd: handleTransitionEnd
+  };
+  var renderContent = function renderContent() {
+    switch (true) {
+      case isFullScreenView:
+        return /*#__PURE__*/React.createElement(ModalMobileFullScreen, contextProps, children);
+      case isBottomView:
+        return /*#__PURE__*/React.createElement(ModalMobileBottom, _extends({}, contextProps, {
+          isSwipeDisabled: isSwipeDisabled,
+          onChangeTransitionStep: handleChangeTransitionStep,
+          onChangeContainerWrapTransform: handleChangeContainerWrapTransform
+        }), children);
+      default:
+        return /*#__PURE__*/React.createElement(ModalDesktop, contextProps, children);
+    }
+  };
+  return /*#__PURE__*/React.createElement(ReactModal, {
+    className: cn('modal-content', classes === null || classes === void 0 ? void 0 : classes.modalContent),
+    portalClassName: cn({
+      'full-view': isFullScreenView,
+      'bottom-view': isBottomView,
+      'transition-end': isTransitionEndStep,
+      'native-scroll': isEnabledNativeScroll
+    }, [className]),
+    overlayClassName: cn('overlay', classes === null || classes === void 0 ? void 0 : classes.overlay),
+    bodyOpenClassName: bodyCn('', classes === null || classes === void 0 ? void 0 : classes.bodyOpen),
+    isOpen: isPopupOpened,
+    ariaHideApp: hideAriaApp,
+    contentLabel: contentLabel,
+    shouldReturnFocusAfterClose: isReturnFocusAfterClose,
+    contentRef: getModalContentRef,
+    overlayRef: handleGetModalOverlayRef,
+    onRequestClose: handlePopupClose,
+    onAfterOpen: handleAfterOpen
+  }, renderContent());
+};
+export default Modal;

package/dist/es/components/Modal/_ModalContent/ModalContent.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-modal-content__container-inner{background-color:var(--base);font-family:inherit;width:100%}.mfui-modal-content__header{position:relative}.mfui-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:52px}@media screen and (min-width:768px){.mfui-modal-content__header-main{min-height:64px}}.mfui-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:32px;justify-content:center;outline:none;width:32px}@media screen and (min-width:768px){.mfui-modal-content__header-button{height:40px;width:40px}}.mfui-modal-content__header-button_back{left:16px}.mfui-modal-content__header-button_close{right:16px}.mfui-modal-content__header-button_shadow{background:var(--base);border-radius:50%;-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__header-button svg{fill:var(--content)}.mfui-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-modal-content__title{font-size:15px;font-weight:500;line-height:24px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-modal-content__footer{padding-left:16px;padding-right:16px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-main{min-height:40px}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__header-button{top:0}.mfui-modal-content__container-wrap_static-header .mfui-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_hide-header .mfui-modal-content__children{padding-top:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__container-body{padding-bottom:0}.mfui-modal-content__container-wrap_sticky-footer .mfui-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-modal-content__container-wrap_out-side-buttons .mfui-modal-content__container-body{padding-top:24px}.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__children,.mfui-modal-content__container-wrap_native-scroll .mfui-modal-content__container-body{padding:0}.mfui-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}

package/dist/es/components/Modal/_ModalContent/ModalContent.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type ModalContextPropsType from '../types';
+import './ModalContent.scss';
+interface IModalContentProps extends ModalContextPropsType {
+    children?: React.ReactNode;
+}
+declare const ModalContent: React.FC<IModalContentProps>;
+export default ModalContent;

package/dist/es/components/Modal/_ModalContent/ModalContent.js

@@ -0,0 +1,168 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { CSSTransition } from 'react-transition-group';
+import ScrollBar from "../../ScrollBar/ScrollBar";
+import "./ModalContent.css";
+var ArrowLeft24 = function ArrowLeft24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+  }));
+};
+var Cancel24 = function Cancel24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    className: "Cancel24__st0",
+    d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
+  }));
+};
+var ArrowLeft32 = function ArrowLeft32(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
+  }));
+};
+var Cancel32 = function Cancel32(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+  }));
+};
+var cn = cnCreate('mfui-modal-content');
+var ModalContent = function ModalContent(_ref) {
+  var classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    scrollBarParams = _ref.scrollBarParams,
+    _ref$headerProps = _ref.headerProps,
+    _ref$headerProps2 = _ref$headerProps === void 0 ? {} : _ref$headerProps,
+    headerTitle = _ref$headerProps2.headerTitle,
+    showBackButton = _ref$headerProps2.showBackButton,
+    hideCloseButton = _ref$headerProps2.hideCloseButton,
+    headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
+    hasHeaderShadow = _ref$headerProps2.hasHeaderShadow,
+    hasHeaderButtonsShadow = _ref$headerProps2.hasHeaderButtonsShadow,
+    _ref$headerProps2$isS = _ref$headerProps2.isStickyHeader,
+    isStickyHeaderProps = _ref$headerProps2$isS === void 0 ? true : _ref$headerProps2$isS,
+    isOutSideHeaderButtons = _ref$headerProps2.isOutSideHeaderButtons,
+    onBackButtonClick = _ref$headerProps2.onBackButtonClick,
+    _ref$footerProps = _ref.footerProps,
+    _ref$footerProps2 = _ref$footerProps === void 0 ? {} : _ref$footerProps,
+    footer = _ref$footerProps2.footer,
+    isStickyFooterProps = _ref$footerProps2.isStickyFooter,
+    hasFooterShadow = _ref$footerProps2.hasFooterShadow,
+    _ref$refs = _ref.refs,
+    headerRef = _ref$refs.headerRef,
+    footerRef = _ref$refs.footerRef,
+    containerInnerRef = _ref$refs.containerInnerRef,
+    containerBodyRef = _ref$refs.containerBodyRef,
+    isEnabledNativeScroll = _ref.isEnabledNativeScroll,
+    isDisabledBackgroundClick = _ref.isDisabledBackgroundClick,
+    isMobile = _ref.isMobile,
+    isTransitionMoveStep = _ref.isTransitionMoveStep,
+    isTransitionEndStep = _ref.isTransitionEndStep,
+    containerWrapTransform = _ref.containerWrapTransform,
+    containerWrapHeight = _ref.containerWrapHeight,
+    containerWrapOverflow = _ref.containerWrapOverflow,
+    isBottomTransitionIn = _ref.isBottomTransitionIn,
+    children = _ref.children,
+    onSetContainerWrapRef = _ref.onSetContainerWrapRef,
+    onPopupClose = _ref.onPopupClose,
+    onTransitionExited = _ref.onTransitionExited,
+    onTransitionEnd = _ref.onTransitionEnd;
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showHeaderShadow = _React$useState2[0],
+    setShowHeaderShadow = _React$useState2[1];
+  var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
+  var showHeader = showHeaderMain || !!headerAdditionalContent;
+  var isStickyHeader = showHeader && !!isStickyHeaderProps;
+  var isStaticHeader = showHeader && !isStickyHeaderProps;
+  var isStickyFooter = !!footer && !!isStickyFooterProps;
+  var isStaticFooter = !!footer && !isStickyFooterProps;
+  var isSmallIcon = isMobile || !!hasHeaderButtonsShadow;
+  var handleChangeShadowState = React.useCallback(function (e) {
+    var scrollTop = e.nativeEvent.target.scrollTop;
+    setShowHeaderShadow(scrollTop > 0);
+  }, []);
+  var renderBackButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
+    className: cn('header-button', {
+      back: true,
+      shadow: hasHeaderButtonsShadow
+    }),
+    type: "button",
+    onClick: onBackButtonClick
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(ArrowLeft24, null) : /*#__PURE__*/React.createElement(ArrowLeft32, null));
+  var renderCloseButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
+    className: cn('header-button', {
+      close: true,
+      shadow: hasHeaderButtonsShadow
+    }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
+    type: "button",
+    onClick: onPopupClose
+  }), isSmallIcon ? /*#__PURE__*/React.createElement(Cancel24, null) : /*#__PURE__*/React.createElement(Cancel32, null));
+  var renderHeader = /*#__PURE__*/React.createElement("div", {
+    className: cn('header', {
+      shadow: showHeaderShadow
+    }, classes === null || classes === void 0 ? void 0 : classes.header),
+    ref: headerRef
+  }, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
+    className: cn('header-main')
+  }, showBackButton && renderBackButton, !!headerTitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('title-area', classes === null || classes === void 0 ? void 0 : classes.titleArea)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('title', classes === null || classes === void 0 ? void 0 : classes.title)
+  }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('header-additional')
+  }, headerAdditionalContent));
+  var renderFooter = /*#__PURE__*/React.createElement("div", {
+    className: cn('footer', {
+      shadow: hasFooterShadow
+    }, classes === null || classes === void 0 ? void 0 : classes.footer),
+    ref: footerRef
+  }, footer);
+  var renderChildren = /*#__PURE__*/React.createElement("div", {
+    className: cn('children', classes === null || classes === void 0 ? void 0 : classes.children)
+  }, isStaticHeader && renderHeader, /*#__PURE__*/React.createElement("div", {
+    className: cn('children-content', classes === null || classes === void 0 ? void 0 : classes.childrenContent)
+  }, children), isStaticFooter && renderFooter);
+  var renderContainer = /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerWrap), {
+    className: cn('container-wrap', {
+      move: isTransitionMoveStep,
+      'hide-header': !showHeader,
+      'sticky-footer': isStickyFooter,
+      'static-header': isStaticHeader,
+      'transition-end': isTransitionEndStep,
+      'native-scroll': isEnabledNativeScroll,
+      'out-side-buttons': isOutSideHeaderButtons
+    }, classes === null || classes === void 0 ? void 0 : classes.containerWrap),
+    style: {
+      height: containerWrapHeight ? "".concat(containerWrapHeight, "px") : undefined,
+      transform: containerWrapTransform,
+      overflow: containerWrapOverflow
+    },
+    ref: onSetContainerWrapRef,
+    onTransitionEnd: onTransitionEnd
+  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerInner), {
+    className: cn('container-inner', classes === null || classes === void 0 ? void 0 : classes.containerInner),
+    ref: containerInnerRef
+  }), isStickyHeader && renderHeader, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.containerBody), {
+    className: cn('container-body', classes === null || classes === void 0 ? void 0 : classes.containerBody),
+    ref: containerBodyRef,
+    onScroll: hasHeaderShadow ? handleChangeShadowState : undefined
+  }), isEnabledNativeScroll ? renderChildren : /*#__PURE__*/React.createElement(ScrollBar, scrollBarParams, renderChildren)), isStickyFooter && renderFooter));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.background), {
+    className: cn('background', classes === null || classes === void 0 ? void 0 : classes.background),
+    onClick: isDisabledBackgroundClick ? undefined : onPopupClose
+  })), /*#__PURE__*/React.createElement(CSSTransition, {
+    "in": isBottomTransitionIn,
+    timeout: 190,
+    onExited: onTransitionExited
+  }, renderContainer));
+};
+export default ModalContent;

package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-desktop__container-inner{border-radius:12px}

package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type ModalContextPropsType from '../types';
+import './ModalDesktop.scss';
+interface IModalDesktopProps extends ModalContextPropsType {
+    children?: React.ReactNode;
+}
+declare const ModalDesktop: React.FC<IModalDesktopProps>;
+export default ModalDesktop;

package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ModalContent from "../_ModalContent/ModalContent";
+import "./ModalDesktop.css";
+var cn = cnCreate('mfui-modal-desktop');
+var ModalDesktop = function ModalDesktop(_a) {
+  var _b = _a.classes,
+    _c = _b === void 0 ? {} : _b,
+    containerInner = _c.containerInner,
+    restClasses = __rest(_c, ["containerInner"]),
+    children = _a.children,
+    restProps = __rest(_a, ["classes", "children"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
+    classes: _extends(_extends({}, restClasses), {
+      containerInner: cn('container-inner', containerInner)
+    })
+  }), children));
+};
+export default ModalDesktop;

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-mobile-bottom__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-modal-mobile-bottom__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-modal-mobile-bottom__container-wrap_move{-webkit-transition:none;transition:none}.mfui-modal-mobile-bottom__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-modal-mobile-bottom__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:8px;border-top-right-radius:8px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { MODAL_TRANSITIONS_STEPS_ENUM } from '../Modal';
+import type ModalContextPropsType from '../types';
+import './ModalMobileBottom.scss';
+export interface IModalMobileBottomProps extends ModalContextPropsType {
+    isSwipeDisabled?: boolean;
+    onChangeTransitionStep: (value: MODAL_TRANSITIONS_STEPS_ENUM) => void;
+    onChangeContainerWrapTransform: (value: string) => void;
+    children?: React.ReactNode;
+}
+declare const ModalMobileBottom: React.FC<IModalMobileBottomProps>;
+export default ModalMobileBottom;

package/dist/es/components/Modal/_ModalMobileBottom/ModalMobileBottom.js

@@ -0,0 +1,114 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import * as React from 'react';
+import { cnCreate } from '@megafon/ui-helpers';
+import ModalContent from "../_ModalContent/ModalContent";
+import { MODAL_TRANSITIONS_STEPS_ENUM } from "../Modal";
+import "./ModalMobileBottom.css";
+var HALF_DIVIDER = 2;
+var cn = cnCreate('mfui-modal-mobile-bottom');
+var ModalMobileBottom = function ModalMobileBottom(_a) {
+  var _b = _a.classes,
+    _c = _b === void 0 ? {} : _b,
+    containerWrap = _c.containerWrap,
+    containerInner = _c.containerInner,
+    restClasses = __rest(_c, ["containerWrap", "containerInner"]),
+    isSwipeDisabled = _a.isSwipeDisabled,
+    children = _a.children,
+    onChangeTransitionStep = _a.onChangeTransitionStep,
+    onChangeContainerWrapTransform = _a.onChangeContainerWrapTransform,
+    restProps = __rest(_a, ["classes", "isSwipeDisabled", "children", "onChangeTransitionStep", "onChangeContainerWrapTransform"]);
+  var _restProps$refs = restProps.refs,
+    containerWrapRef = _restProps$refs.containerWrapRef,
+    containerInnerRef = _restProps$refs.containerInnerRef,
+    isTransitionMoveStep = restProps.isTransitionMoveStep,
+    isTransitionEndStep = restProps.isTransitionEndStep;
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    initialTouchPosition = _React$useState2[0],
+    setInitialTouchPosition = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    initialContainerWrapHeight = _React$useState4[0],
+    setInitialContainerWrapHeight = _React$useState4[1];
+  var animationFrameId = React.useRef(0);
+  var offsetHeightCenter = React.useMemo(function () {
+    var _a;
+    return initialTouchPosition && containerInnerRef.current ? ((_a = containerInnerRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) / HALF_DIVIDER : 0;
+  }, [containerInnerRef, initialTouchPosition]);
+  var handleWindowTouchMove = React.useCallback(function (e) {
+    if (animationFrameId) {
+      window.cancelAnimationFrame(animationFrameId.current);
+    }
+    var containerWrapNode = containerWrapRef.current;
+    animationFrameId.current = window.requestAnimationFrame(function () {
+      onChangeTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.MOVE_STEP);
+      if (!containerWrapNode || e.target !== containerWrapNode) {
+        return;
+      }
+      if (!initialContainerWrapHeight) {
+        setInitialContainerWrapHeight(containerWrapNode.clientHeight);
+      }
+      if (!initialTouchPosition) {
+        setInitialTouchPosition(e.touches[0].clientY);
+        return;
+      }
+      var positionsDiff = initialTouchPosition - e.touches[0].clientY;
+      var positionsDiffAbs = Math.abs(positionsDiff);
+      var isMoveToTop = positionsDiff > 0;
+      var newContainerWrapHeight = initialContainerWrapHeight - positionsDiffAbs;
+      var isMoveAboveInitialContainer = isMoveToTop && newContainerWrapHeight < containerWrapNode.offsetHeight;
+      if (isMoveAboveInitialContainer) {
+        return;
+      }
+      onChangeContainerWrapTransform("translateY(".concat(positionsDiffAbs, "px)"));
+      animationFrameId.current = 0;
+    });
+  }, [containerWrapRef, initialContainerWrapHeight, initialTouchPosition, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  var handleWindowTouchEnd = React.useCallback(function (e) {
+    var _a;
+    var containerWrapNode = containerWrapRef.current;
+    if (!containerWrapNode || !isTransitionMoveStep || e.target !== containerWrapNode) {
+      return;
+    }
+    window.cancelAnimationFrame(animationFrameId.current);
+    var containerCenterPosition = containerWrapNode.offsetTop + offsetHeightCenter;
+    var isMoreHalfClosed = ((_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientY) > containerCenterPosition;
+    setInitialTouchPosition(null);
+    onChangeContainerWrapTransform(isMoreHalfClosed ? 'translateY(100%)' : 'none');
+    onChangeTransitionStep(isMoreHalfClosed ? MODAL_TRANSITIONS_STEPS_ENUM.MOVE_END_STEP : MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP);
+  }, [containerWrapRef, isTransitionMoveStep, offsetHeightCenter, onChangeContainerWrapTransform, onChangeTransitionStep]);
+  React.useEffect(function () {
+    if (isSwipeDisabled) {
+      return undefined;
+    }
+    window.addEventListener('touchmove', handleWindowTouchMove);
+    window.addEventListener('touchend', handleWindowTouchEnd);
+    return function () {
+      window.removeEventListener('touchmove', handleWindowTouchMove);
+      window.removeEventListener('touchend', handleWindowTouchEnd);
+    };
+  }, [handleWindowTouchEnd, handleWindowTouchMove, isSwipeDisabled]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(ModalContent, _extends({}, restProps, {
+    classes: _extends(_extends({}, restClasses), {
+      containerWrap: cn('container-wrap', {
+        move: isTransitionMoveStep,
+        'transition-end': isTransitionEndStep
+      }, containerWrap),
+      containerInner: cn('container-inner', containerInner)
+    })
+  }), children));
+};
+export default ModalMobileBottom;

package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-mobile-full-screen{width:100%}.mfui-modal-mobile-full-screen__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-modal-mobile-full-screen__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-modal-mobile-full-screen__scroll-root{height:100%}.mfui-modal-mobile-full-screen__scroll-init{height:100vh}.mfui-modal-mobile-full-screen__scroll-content{height:100%}.mfui-modal-mobile-full-screen__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-modal-mobile-full-screen__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-modal-mobile-full-screen__container-wrap{height:100%}

package/dist/es/components/Modal/_ModalMobileFullScreen/ModalMobileFullScreen.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type ModalContextPropsType from '../types';
+import './ModalMobileFullScreen.scss';
+interface IModalMobileFullScreenProps extends ModalContextPropsType {
+    children?: React.ReactNode;
+}
+declare const ModalMobileFullScreen: React.FC<IModalMobileFullScreenProps>;
+export default ModalMobileFullScreen;