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

package/dist/lib/components/Logo/Logo.js

@@ -1,30 +1,18 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 require("core-js/modules/es.array.concat.js");
-
 var React = _interopRequireWildcard(require("react"));
-
 var _uiHelpers = require("@megafon/ui-helpers");
-
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
 var _Link = _interopRequireDefault(require("../Link/Link"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var greenHorizontalImg = function greenHorizontalImg(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 623 112",
@@ -52,7 +40,6 @@ var greenHorizontalImg = function greenHorizontalImg(props) {
     fill: "#00B956"
   }));
 };
-
 var greenVerticalImg = function greenVerticalImg(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "-213 356.4 169 128.5"
@@ -67,20 +54,18 @@ var greenVerticalImg = function greenVerticalImg(props) {
     d: "M-128.8 372.1c-17.4 0-31.5 14.1-31.5 31.5 0 15.1 10.6 27.7 24.8 30.8v-28.2c0-1.4 1.1-2.5 2.5-2.5h4c.2 0 .3-.1.3-.3v-31.1l-.1-.2zm-6 25.9c-2.2 0-3.9-1.8-3.9-3.9 0-2.2 1.8-3.9 3.9-3.9s3.9 1.8 3.9 3.9c0 2.2-1.7 3.9-3.9 3.9zm71.2 55.5v6h-8v-6h-3.9v15.7h3.9v-6.3h8v6.3h3.9v-15.7zm-65.5 1.8c-.7-1.4-2-2.1-3.2-2.1-1.3 0-2.6.7-3.2 2.1l-6.4 13.9h4.2l1.4-3.3h8.1l1.4 3.3h4.2l-6.5-13.9zm-5.9 7.5l2.4-5.7c.1-.2.2-.2.3-.2.1 0 .2 0 .3.2l2.4 5.7h-5.4zm-40.8-12.1c-1.8 0-3 1-3.9 3l-5.1 11.8-5.1-11.8c-.9-2-2-3-3.9-3-1.7 0-3.5 1.2-3.5 3.9v14.6h3.9V455l5.2 11.7c.7 1.6 1.8 2.7 3.4 2.7 1.6 0 2.7-1 3.4-2.7l5.2-11.7v14.2h3.9v-14.6c0-2.7-1.8-3.9-3.5-3.9zm10.4 15.2c-.2 0-.3-.2-.3-.3v-2.8h9.8v-3.2h-9.8v-2.4c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v11c0 1.2 1 2.3 2.3 2.3h11.6v-3.3h-9.7zm16.3 3.3v-12c0-.2.1-.3.3-.3h9.7v-3.3h-11.6c-1.4 0-2.3 1.1-2.3 2.3v13.3h3.9zm71-7.8c0-5.5-2.4-8-8.3-8h-1.4c-5.9 0-8.3 2.6-8.3 8s2.4 8 8.3 8h1.3c5.9 0 8.4-2.6 8.4-8zm-8.4 4.7h-1.3c-3.3 0-4.5-1.5-4.5-4.8 0-3.2 1.1-4.7 4.5-4.7h1.3c3.3 0 4.5 1.6 4.5 4.7 0 3.3-1.3 4.8-4.5 4.8zm-20.6-15h-7.8c-5.8 0-8.1 2.9-8.1 8.1 0 .8 0 1.5.2 2.2.6 3.6 2.7 5.9 8.2 5.9h1.7v2h3.9v-2h1.7c5.4 0 7.6-2.2 8.2-5.9.1-.7.2-1.4.2-2.2-.1-5.2-2.4-8.1-8.2-8.1zm-5.8 12.8h-1.8c-2.7 0-3.6-1-4.2-2.5-.2-.6-.2-1.4-.2-2.2 0-3.3 1.5-4.8 3.8-4.8h2.4v9.5zm9.9-2.5c-.6 1.6-1.5 2.5-4.2 2.5h-1.8v-9.5h2.4c2.3 0 3.8 1.4 3.8 4.8 0 .8 0 1.6-.2 2.2z"
   })));
 };
-
 var cn = (0, _uiHelpers.cnCreate)('mfui-logo');
-
 var Logo = function Logo(_ref) {
   var className = _ref.className,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'green' : _ref$color,
-      _ref$view = _ref.view,
-      view = _ref$view === void 0 ? 'horizontal' : _ref$view,
-      _ref$target = _ref.target,
-      target = _ref$target === void 0 ? '_blank' : _ref$target,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '/' : _ref$href,
-      dataAttrs = _ref.dataAttrs;
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'green' : _ref$color,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? 'horizontal' : _ref$view,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_blank' : _ref$target,
+    _ref$href = _ref.href,
+    href = _ref$href === void 0 ? '/' : _ref$href,
+    dataAttrs = _ref.dataAttrs;
   var images = {
     'green-horizontal': greenHorizontalImg,
     'green-vertical': greenVerticalImg
@@ -99,16 +84,4 @@ var Logo = function Logo(_ref) {
     className: cn('svg')
   })));
 };
-
-Logo.propTypes = {
-  color: PropTypes.oneOf(['green']),
-  view: PropTypes.oneOf(['horizontal', 'vertical']),
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  href: PropTypes.string,
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  })
-};
-var _default = Logo;
-exports["default"] = _default;
+var _default = exports["default"] = Logo;

package/dist/lib/components/Modal/Modal.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-modal-open-body{height:100%;overflow:hidden}.mfui-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-modal__modal-content{margin:auto;position:relative}.mfui-modal_full-view .mfui-modal__overlay{display:block;padding:0}.mfui-modal_full-view .mfui-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-modal_bottom-view .mfui-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-modal_bottom-view .mfui-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-modal_native-scroll .mfui-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-modal_native-scroll .mfui-modal__overlay{width:calc(100% + 15px)}}.mfui-modal_transition-end .mfui-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}

package/dist/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import type { IScrollBarProps } from '../ScrollBar/ScrollBar';
+import './Modal.scss';
+export declare enum MODAL_MOBILE_VIEWS_ENUM {
+    FULL_SCREEN = "full-screen",
+    BOTTOM = "bottom"
+}
+export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
+    INITIAL_STEP = "initial-step",
+    MOVE_STEP = "move-step",
+    MOVE_END_STEP = "move-end-step",
+    END_STEP = "end-step"
+}
+export type ModalClassesType = {
+    bodyOpen?: string;
+    modalContent?: string;
+    overlay?: string;
+    background?: string;
+    containerWrap?: string;
+    containerInner?: string;
+    containerBody?: string;
+    header?: string;
+    headerCloseButton?: string;
+    titleArea?: string;
+    title?: string;
+    children?: string;
+    childrenContent?: string;
+    footer?: string;
+};
+export type ModalDataAttrsType = {
+    background?: Record<string, string>;
+    headerBackButton?: Record<string, string>;
+    headerCloseButton?: Record<string, string>;
+    containerWrap?: Record<string, string>;
+    containerInner?: Record<string, string>;
+    containerBody?: Record<string, string>;
+};
+export type ModalHeaderPropsType = {
+    /** Заголовок */
+    headerTitle?: string | JSX.Element | null;
+    /** Отобразить стрелку назад */
+    showBackButton?: boolean;
+    /** Скрыть крестик */
+    hideCloseButton?: boolean;
+    /** Отобразить дополнительный контент в шапке */
+    headerAdditionalContent?: JSX.Element | JSX.Element[] | string | null;
+    /** Отобразить тень у шапки */
+    hasHeaderShadow?: boolean;
+    /** Отобразить кнопки с подложкой */
+    hasHeaderButtonsShadow?: boolean;
+    /** Закрепленная шапка */
+    isStickyHeader?: boolean;
+    /** Кнопки находятся вне основной шапке */
+    isOutSideHeaderButtons?: boolean;
+    /** Обработчик для стрелки назад */
+    onBackButtonClick?: () => void;
+};
+export type ModalFooterPropsType = {
+    /** Футер */
+    footer?: JSX.Element | JSX.Element[] | string | null;
+    /** Закрепить футер */
+    isStickyFooter?: boolean;
+    /** Отобразить тень у футера */
+    hasFooterShadow?: boolean;
+};
+export interface IModalProps {
+    /** Дополнительные классы для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: ModalClassesType;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: ModalDataAttrsType;
+    /** Состояние открытости */
+    isOpened: boolean;
+    /** Настройки для кастомного компонента скролла */
+    scrollBarParams?: Omit<IScrollBarProps, 'maxHeight'>;
+    /** Настройки для шапки модального окна */
+    headerProps?: ModalHeaderPropsType;
+    /** Настройки для футера модального окна */
+    footerProps?: ModalFooterPropsType;
+    /** Вид модального окна на разрешении 767- */
+    mobileView?: MODAL_MOBILE_VIEWS_ENUM;
+    /** Включить дефолтный скролл (отключает кастомный компонент скролла) */
+    isEnabledNativeScroll?: boolean;
+    /** Отключить закрытие шторки свайпом */
+    isSwipeDisabled?: boolean;
+    /** Отключить закрытие модального окна при клике на фон */
+    isDisabledBackgroundClick?: boolean;
+    /** Восстанавливает фокус на элементе, который был сфокусирован до открытия модального окна */
+    isReturnFocusAfterClose?: boolean;
+    /** Должен ли root-элемент приложения быть скрыт */
+    hideAriaApp?: boolean;
+    /** Устанавливает aria-label */
+    contentLabel?: string;
+    /** Обработчик закрытия модального окна */
+    onClose?: () => void;
+    /** Обработчик после открытия модального окна */
+    onAfterModalOpen?: () => void;
+    /** Ref обработчик для Content */
+    getModalContentRef?: (node: HTMLDivElement) => void;
+    /** Ref обработчик для Overlay */
+    getModalOverlayRef?: (node: HTMLDivElement) => void;
+    children?: React.ReactNode;
+}
+declare const Modal: React.FC<IModalProps>;
+export default Modal;

package/dist/lib/components/Modal/Modal.js

@@ -0,0 +1,287 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = exports.MODAL_MOBILE_VIEWS_ENUM = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _reactModal = _interopRequireDefault(require("react-modal"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _useResolution2 = _interopRequireDefault(require("../../hooks/useResolution"));
+var _ModalDesktop = _interopRequireDefault(require("./_ModalDesktop/ModalDesktop"));
+var _ModalMobileBottom = _interopRequireDefault(require("./_ModalMobileBottom/ModalMobileBottom"));
+var _ModalMobileFullScreen = _interopRequireDefault(require("./_ModalMobileFullScreen/ModalMobileFullScreen"));
+var _utils = require("./utils/utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START;
+var HEIGHT_TRANSITION_PROPERTY = 'height';
+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 || (exports.MODAL_MOBILE_VIEWS_ENUM = MODAL_MOBILE_VIEWS_ENUM = {}));
+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 || (exports.MODAL_TRANSITIONS_STEPS_ENUM = MODAL_TRANSITIONS_STEPS_ENUM = {}));
+var bodyCn = (0, _uiHelpers.cnCreate)('mfui-modal-open-body');
+var cn = (0, _uiHelpers.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 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isPopupOpened = _React$useState2[0],
+    setIsPopupOpened = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    scrollMaxHeight = _React$useState4[0],
+    setScrollMaxHeight = _React$useState4[1];
+  var _React$useState5 = React.useState(MODAL_TRANSITIONS_STEPS_ENUM.INITIAL_STEP),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    transitionStep = _React$useState6[0],
+    setTransitionStep = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    containerWrapTransform = _React$useState8[0],
+    setContainerWrapTransform = _React$useState8[1];
+  var _React$useState9 = React.useState(undefined),
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    containerWrapHeight = _React$useState10[0],
+    setContainerWrapHeight = _React$useState10[1];
+  var _React$useState11 = React.useState(''),
+    _React$useState12 = (0, _slicedToArray2["default"])(_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 = (0, _useResolution2["default"])(),
+    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 = (0, _utils.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);
+    (0, _utils.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 = (0, _lodash["default"])(function () {
+      handleSetScrollContentMaxHeight();
+    }, _throttleTime["default"].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: (0, _extends2["default"])((0, _extends2["default"])({}, 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["default"], contextProps, children);
+      case isBottomView:
+        return /*#__PURE__*/React.createElement(_ModalMobileBottom["default"], (0, _extends2["default"])({}, contextProps, {
+          isSwipeDisabled: isSwipeDisabled,
+          onChangeTransitionStep: handleChangeTransitionStep,
+          onChangeContainerWrapTransform: handleChangeContainerWrapTransform
+        }), children);
+      default:
+        return /*#__PURE__*/React.createElement(_ModalDesktop["default"], contextProps, children);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_reactModal["default"], {
+    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());
+};
+var _default = exports["default"] = Modal;

package/dist/lib/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/lib/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;