@vkontakte/vkui 5.2.3 → 5.3.0

package/dist/cjs/components/ModalRoot/ModalRootDesktop.js

@@ -1,19 +1,22 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "ModalRootDesktop", {
+    enumerable: true,
+    get: function() {
+        return ModalRootDesktop;
+    }
 });
-exports.ModalRootDesktop = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var React = _interopRequireWildcard(require("react"));
+var _assertThisInitialized = require("@swc/helpers/lib/_assert_this_initialized.js").default;
+var _classCallCheck = require("@swc/helpers/lib/_class_call_check.js").default;
+var _createClass = require("@swc/helpers/lib/_create_class.js").default;
+var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
+var _inherits = require("@swc/helpers/lib/_inherits.js").default;
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
+var _createSuper = require("@swc/helpers/lib/_create_super.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
 var _withContext = require("../../hoc/withContext");
@@ -23,227 +26,225 @@ var _getNavId = require("../../lib/getNavId");
 var _platform = require("../../lib/platform");
 var _supportEvents = require("../../lib/supportEvents");
 var _warnOnce = require("../../lib/warnOnce");
-var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
-var _FocusTrap = require("../FocusTrap/FocusTrap");
-var _ModalRootContext = require("./ModalRootContext");
+var _configProviderContext = require("../ConfigProvider/ConfigProviderContext");
+var _focusTrap = require("../FocusTrap/FocusTrap");
+var _modalRootContext = require("./ModalRootContext");
 var _useModalManager = require("./useModalManager");
-var _excluded = ["id"];
-var warn = (0, _warnOnce.warnOnce)('ModalRoot');
-var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ModalRootDesktopComponent, _React$Component);
-  var _super = (0, _createSuper2.default)(ModalRootDesktopComponent);
-  function ModalRootDesktopComponent(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, ModalRootDesktopComponent);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskElementRef", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskAnimationFrame", undefined);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "modalRootContext", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "restoreFocusTo", undefined);
-    _this.maskElementRef = /*#__PURE__*/React.createRef();
-    _this.modalRootContext = {
-      updateModalHeight: function updateModalHeight() {
-        return undefined;
-      },
-      registerModal: function registerModal(_ref) {
-        var _this$getModalState;
-        var id = _ref.id,
-          data = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-        return Object.assign((_this$getModalState = _this.getModalState(id)) !== null && _this$getModalState !== void 0 ? _this$getModalState : {}, data);
-      },
-      onClose: function onClose() {
-        return _this.props.onExit();
-      },
-      isInsideModal: true
-    };
-    return _this;
-  }
-  (0, _createClass2.default)(ModalRootDesktopComponent, [{
-    key: "timeout",
-    get: function get() {
-      return this.props.platform === _platform.Platform.IOS ? 400 : 320;
-    }
-  }, {
-    key: "modals",
-    get: function get() {
-      return React.Children.toArray(this.props.children);
-    }
-  }, {
-    key: "getModalState",
-    value: function getModalState(id) {
-      if (id === null) {
-        return undefined;
-      }
-      return this.props.getModalState(id);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      // transition phase 2: animate exiting modal
-      if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
-        this.closeModal(this.props.exitingModal);
-      }
-
-      // transition phase 3: animate entering modal
-      if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
-        this.openModal(prevProps);
-      }
-
-      // focus restoration
-      if (this.props.activeModal && !prevProps.activeModal) {
-        var _this$props$document$, _this$props$document;
-        this.restoreFocusTo = (_this$props$document$ = (_this$props$document = this.props.document) === null || _this$props$document === void 0 ? void 0 : _this$props$document.activeElement) !== null && _this$props$document$ !== void 0 ? _this$props$document$ : undefined;
-      }
-      if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
-        this.restoreFocusTo.focus();
-        this.restoreFocusTo = undefined;
-      }
-    }
-  }, {
-    key: "openModal",
-    value: function openModal(prevProps) {
-      var _this2 = this;
-      var enteringModal = this.props.enteringModal;
-      if (!enteringModal) {
-        return;
-      }
-      var enteringState = this.getModalState(enteringModal);
-      this.props.onEnter();
-
-      // Анимация открытия модального окна
-      if (!prevProps.exitingModal) {
-        requestAnimationFrame(function () {
-          if (_this2.props.enteringModal === enteringModal) {
-            _this2.waitTransitionFinish(enteringState, function () {
-              return _this2.props.onEntered(enteringModal);
-            });
-            _this2.animateModalOpacity(enteringState, true);
-          }
-        });
-        return;
-      }
-
-      // Переход между модальными окнами без анимации
-      if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
-        enteringState.innerElement.style.transition = 'none';
-        enteringState.innerElement.style.opacity = '1';
-      }
-      this.props.onEntered(enteringModal);
-    }
-  }, {
-    key: "closeModal",
-    value: function closeModal(id) {
-      var _this3 = this;
-      var prevModalState = this.getModalState(id);
-      if (!prevModalState) {
-        return;
-      }
-
-      // Анимация закрытия модального окна
-      if (!this.props.activeModal) {
-        requestAnimationFrame(function () {
-          _this3.waitTransitionFinish(prevModalState, function () {
-            return _this3.props.onExited(id);
-          });
-          _this3.animateModalOpacity(prevModalState, false);
-          _this3.setMaskOpacity(prevModalState, 0);
-        });
-        return;
-      }
-
-      // Переход между модальными окнами без анимации
-      this.props.onExited(id);
-    }
-  }, {
-    key: "waitTransitionFinish",
-    value: function waitTransitionFinish(modalState, eventHandler) {
-      if (_supportEvents.transitionEvent.supported) {
-        var _modalState$innerElem2;
-        var onceHandler = function onceHandler() {
-          var _modalState$innerElem;
-          modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem = modalState.innerElement) === null || _modalState$innerElem === void 0 ? void 0 : _modalState$innerElem.removeEventListener(_supportEvents.transitionEvent.name, onceHandler);
-          eventHandler();
+var warn = (0, _warnOnce.warnOnce)("ModalRoot");
+var ModalRootDesktopComponent = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(ModalRootDesktopComponent, _React_Component);
+    var _super = _createSuper(ModalRootDesktopComponent);
+    function ModalRootDesktopComponent(props) {
+        _classCallCheck(this, ModalRootDesktopComponent);
+        var _this;
+        _this = _super.call(this, props);
+        _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
+        _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
+        _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
+        _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
+        _this.maskElementRef = /*#__PURE__*/ _react.createRef();
+        var _this_getModalState;
+        _this.modalRootContext = {
+            updateModalHeight: function() {
+                return undefined;
+            },
+            registerModal: function(_param) {
+                var id = _param.id, data = _objectWithoutProperties(_param, [
+                    "id"
+                ]);
+                return Object.assign((_this_getModalState = _this.getModalState(id)) !== null && _this_getModalState !== void 0 ? _this_getModalState : {}, data);
+            },
+            onClose: function() {
+                return _this.props.onExit();
+            },
+            isInsideModal: true
         };
-        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem2 = modalState.innerElement) === null || _modalState$innerElem2 === void 0 ? void 0 : _modalState$innerElem2.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
-      } else {
-        setTimeout(eventHandler, this.timeout);
-      }
-    }
-
-    /* Анимирует сдвиг модалки */
-  }, {
-    key: "animateModalOpacity",
-    value: function animateModalOpacity(modalState, display) {
-      if (modalState !== null && modalState !== void 0 && modalState.innerElement) {
-        modalState.innerElement.style.transition = '';
-        modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? "".concat(this.timeout, "ms") : '';
-        modalState.innerElement.style.opacity = display ? '1' : '0';
-      }
+        return _this;
     }
-
-    /* Устанавливает прозрачность для полупрозрачной подложки */
-  }, {
-    key: "setMaskOpacity",
-    value: function setMaskOpacity(modalState) {
-      var _this$props$history,
-        _this4 = this;
-      var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      if (forceOpacity === null && ((_this$props$history = this.props.history) === null || _this$props$history === void 0 ? void 0 : _this$props$history[0]) !== modalState.id) {
-        return;
-      }
-      if (this.maskAnimationFrame) {
-        cancelAnimationFrame(this.maskAnimationFrame);
-      }
-      this.maskAnimationFrame = requestAnimationFrame(function () {
-        if (_this4.maskElementRef.current) {
-          var _modalState$translate = modalState.translateY,
-            translateY = _modalState$translate === void 0 ? 0 : _modalState$translate,
-            _modalState$translate2 = modalState.translateYCurrent,
-            translateYCurrent = _modalState$translate2 === void 0 ? 0 : _modalState$translate2;
-          var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
-          _this4.maskElementRef.current.style.opacity = (0, _math.clamp)(opacity, 0, 100).toString();
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$configPro,
-        _this5 = this;
-      var _this$props = this.props,
-        exitingModal = _this$props.exitingModal,
-        activeModal = _this$props.activeModal;
-      if (!activeModal && !exitingModal) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(_ModalRootContext.ModalRootContext.Provider, {
-        value: this.modalRootContext
-      }, /*#__PURE__*/React.createElement("div", {
-        className: (0, _vkjs.classNames)("vkuiModalRoot", ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === _ConfigProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", "vkuiModalRoot--desktop")
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "vkuiModalRoot__mask",
-        ref: this.maskElementRef,
-        onClick: this.props.onExit
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "vkuiModalRoot__viewport"
-      }, this.modals.map(function (Modal) {
-        var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
-        if (modalId !== activeModal && modalId !== exitingModal) {
-          return null;
+    _createClass(ModalRootDesktopComponent, [
+        {
+            key: "timeout",
+            get: function get() {
+                return this.props.platform === _platform.Platform.IOS ? 400 : 320;
+            }
+        },
+        {
+            key: "modals",
+            get: function get() {
+                return _react.Children.toArray(this.props.children);
+            }
+        },
+        {
+            key: "getModalState",
+            value: function getModalState(id) {
+                if (id === null) {
+                    return undefined;
+                }
+                return this.props.getModalState(id);
+            }
+        },
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate(prevProps) {
+                // transition phase 2: animate exiting modal
+                if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
+                    this.closeModal(this.props.exitingModal);
+                }
+                // transition phase 3: animate entering modal
+                if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+                    this.openModal(prevProps);
+                }
+                // focus restoration
+                if (this.props.activeModal && !prevProps.activeModal) {
+                    var _this_props_document;
+                    var _this_props_document_activeElement;
+                    this.restoreFocusTo = (_this_props_document_activeElement = (_this_props_document = this.props.document) === null || _this_props_document === void 0 ? void 0 : _this_props_document.activeElement) !== null && _this_props_document_activeElement !== void 0 ? _this_props_document_activeElement : undefined;
+                }
+                if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+                    this.restoreFocusTo.focus();
+                    this.restoreFocusTo = undefined;
+                }
+            }
+        },
+        {
+            key: "openModal",
+            value: function openModal(prevProps) {
+                var _this = this;
+                var enteringModal = this.props.enteringModal;
+                if (!enteringModal) {
+                    return;
+                }
+                var enteringState = this.getModalState(enteringModal);
+                this.props.onEnter();
+                // Анимация открытия модального окна
+                if (!prevProps.exitingModal) {
+                    requestAnimationFrame(function() {
+                        if (_this.props.enteringModal === enteringModal) {
+                            _this.waitTransitionFinish(enteringState, function() {
+                                return _this.props.onEntered(enteringModal);
+                            });
+                            _this.animateModalOpacity(enteringState, true);
+                        }
+                    });
+                    return;
+                }
+                // Переход между модальными окнами без анимации
+                if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
+                    enteringState.innerElement.style.transition = "none";
+                    enteringState.innerElement.style.opacity = "1";
+                }
+                this.props.onEntered(enteringModal);
+            }
+        },
+        {
+            key: "closeModal",
+            value: function closeModal(id) {
+                var _this = this;
+                var prevModalState = this.getModalState(id);
+                if (!prevModalState) {
+                    return;
+                }
+                // Анимация закрытия модального окна
+                if (!this.props.activeModal) {
+                    requestAnimationFrame(function() {
+                        _this.waitTransitionFinish(prevModalState, function() {
+                            return _this.props.onExited(id);
+                        });
+                        _this.animateModalOpacity(prevModalState, false);
+                        _this.setMaskOpacity(prevModalState, 0);
+                    });
+                    return;
+                }
+                // Переход между модальными окнами без анимации
+                this.props.onExited(id);
+            }
+        },
+        {
+            key: "waitTransitionFinish",
+            value: function waitTransitionFinish(modalState, eventHandler) {
+                if (_supportEvents.transitionEvent.supported) {
+                    var _modalState_innerElement;
+                    var onceHandler = function() {
+                        var _modalState_innerElement;
+                        modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.removeEventListener(_supportEvents.transitionEvent.name, onceHandler);
+                        eventHandler();
+                    };
+                    modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
+                } else {
+                    setTimeout(eventHandler, this.timeout);
+                }
+            }
+        },
+        {
+            /* Анимирует сдвиг модалки */ key: "animateModalOpacity",
+            value: function animateModalOpacity(modalState, display) {
+                if (modalState === null || modalState === void 0 ? void 0 : modalState.innerElement) {
+                    modalState.innerElement.style.transition = "";
+                    modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+                    modalState.innerElement.style.opacity = display ? "1" : "0";
+                }
+            }
+        },
+        {
+            /* Устанавливает прозрачность для полупрозрачной подложки */ key: "setMaskOpacity",
+            value: function setMaskOpacity(modalState) {
+                var forceOpacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
+                var _this = this;
+                var _this_props_history;
+                if (forceOpacity === null && ((_this_props_history = this.props.history) === null || _this_props_history === void 0 ? void 0 : _this_props_history[0]) !== modalState.id) {
+                    return;
+                }
+                if (this.maskAnimationFrame) {
+                    cancelAnimationFrame(this.maskAnimationFrame);
+                }
+                this.maskAnimationFrame = requestAnimationFrame(function() {
+                    if (_this.maskElementRef.current) {
+                        var _modalState_translateY = modalState.translateY, translateY = _modalState_translateY === void 0 ? 0 : _modalState_translateY, _modalState_translateYCurrent = modalState.translateYCurrent, translateYCurrent = _modalState_translateYCurrent === void 0 ? 0 : _modalState_translateYCurrent;
+                        var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
+                        _this.maskElementRef.current.style.opacity = (0, _math.clamp)(opacity, 0, 100).toString();
+                    }
+                });
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                var _this = this;
+                var _this_props_configProvider;
+                var _this_props = this.props, exitingModal = _this_props.exitingModal, activeModal = _this_props.activeModal;
+                if (!activeModal && !exitingModal) {
+                    return null;
+                }
+                return /*#__PURE__*/ _react.createElement(_modalRootContext.ModalRootContext.Provider, {
+                    value: this.modalRootContext
+                }, /*#__PURE__*/ _react.createElement("div", {
+                    className: (0, _vkjs.classNames)("vkuiModalRoot", ((_this_props_configProvider = this.props.configProvider) === null || _this_props_configProvider === void 0 ? void 0 : _this_props_configProvider.webviewType) === _configProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", "vkuiModalRoot--desktop")
+                }, /*#__PURE__*/ _react.createElement("div", {
+                    className: "vkuiModalRoot__mask",
+                    ref: this.maskElementRef,
+                    onClick: this.props.onExit
+                }), /*#__PURE__*/ _react.createElement("div", {
+                    className: "vkuiModalRoot__viewport"
+                }, this.modals.map(function(Modal) {
+                    var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
+                    if (modalId !== activeModal && modalId !== exitingModal) {
+                        return null;
+                    }
+                    var key = "modal-".concat(modalId);
+                    return /*#__PURE__*/ _react.createElement(_focusTrap.FocusTrap, {
+                        restoreFocus: false,
+                        onClose: _this.props.onExit,
+                        timeout: _this.timeout,
+                        key: key,
+                        className: "vkuiModalRoot__modal"
+                    }, Modal);
+                }))));
+            }
         }
-        var key = "modal-".concat(modalId);
-        return /*#__PURE__*/React.createElement(_FocusTrap.FocusTrap, {
-          restoreFocus: false,
-          onClose: _this5.props.onExit,
-          timeout: _this5.timeout,
-          key: key,
-          className: "vkuiModalRoot__modal"
-        }, Modal);
-      }))));
-    }
-  }]);
-  return ModalRootDesktopComponent;
-}(React.Component);
-var ModalRootDesktop = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)()(ModalRootDesktopComponent))), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
-exports.ModalRootDesktop = ModalRootDesktop;
+    ]);
+    return ModalRootDesktopComponent;
+}(_react.Component);
+var ModalRootDesktop = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)()(ModalRootDesktopComponent))), _configProviderContext.ConfigProviderContext, "configProvider");
+
 //# sourceMappingURL=ModalRootDesktop.js.map

package/dist/cjs/components/ModalRoot/ModalRootDesktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalRootDesktop.js","names":["warn","warnOnce","ModalRootDesktopComponent","props","undefined","maskElementRef","React","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","platform","Platform","IOS","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","openModal","activeModal","restoreFocusTo","document","activeElement","focus","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","innerElement","style","transition","opacity","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","timeout","display","transitionDelay","delayEnter","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","clamp","toString","classNames","configProvider","webviewType","WebviewType","VKAPPS","modals","map","Modal","modalId","getNavId","key","Component","ModalRootDesktop","withContext","withPlatform","withDOM","withModalManager","ConfigProviderContext"],"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { withContext } from '../../hoc/withContext';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasPlatform } from '../../types';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalsStateEntry } from './types';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n  children?: React.ReactNode;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<\n  ModalRootProps & DOMProps & ModalTransitionProps\n> {\n  constructor(props: ModalRootProps & ModalTransitionProps) {\n    super(props);\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id) ?? {}, data),\n      onClose: () => this.props.onExit(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement | undefined = undefined;\n\n  private get timeout() {\n    return this.props.platform === Platform.IOS ? 400 : 320;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string | null) {\n    if (id === null) {\n      return undefined;\n    }\n    return this.props.getModalState(id);\n  }\n\n  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n      this.openModal(prevProps);\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = (this.props.document?.activeElement ?? undefined) as\n        | HTMLElement\n        | undefined;\n    }\n    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = undefined;\n    }\n  }\n\n  openModal(prevProps: ModalRootProps & ModalTransitionProps) {\n    const { enteringModal } = this.props;\n    if (!enteringModal) {\n      return;\n    }\n\n    const enteringState = this.getModalState(enteringModal);\n    this.props.onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () => this.props.onEntered(enteringModal));\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    if (enteringState?.innerElement) {\n      enteringState.innerElement.style.transition = 'none';\n      enteringState.innerElement.style.opacity = '1';\n    }\n\n    this.props.onEntered(enteringModal);\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!this.props.activeModal) {\n      requestAnimationFrame(() => {\n        this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n        this.animateModalOpacity(prevModalState, false);\n        this.setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    this.props.onExited(id);\n  }\n\n  waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);\n        eventHandler();\n      };\n\n      modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдвиг модалки */\n  animateModalOpacity(modalState: ModalsStateEntry | undefined, display: boolean) {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay =\n        display && this.props.delayEnter ? `${this.timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number | null = null) {\n    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (this.maskAnimationFrame) {\n      cancelAnimationFrame(this.maskAnimationFrame);\n    }\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          className={classNames(\n            styles['ModalRoot'],\n            this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n              styles['ModalRoot--vkapps'],\n            styles['ModalRoot--desktop'],\n          )}\n        >\n          <div\n            className={styles['ModalRoot__mask']}\n            ref={this.maskElementRef}\n            onClick={this.props.onExit}\n          />\n          <div className={styles['ModalRoot__viewport']}>\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (modalId !== activeModal && modalId !== exitingModal) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <FocusTrap\n                  restoreFocus={false}\n                  onClose={this.props.onExit}\n                  timeout={this.timeout}\n                  key={key}\n                  className={styles['ModalRoot__modal']}\n                >\n                  {Modal}\n                </FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))),\n  ConfigProviderContext,\n  'configProvider',\n);\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { withContext } from '../../hoc/withContext';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasPlatform } from '../../types';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalsStateEntry } from './types';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n  children?: React.ReactNode;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<\n  ModalRootProps & DOMProps & ModalTransitionProps\n> {\n  constructor(props: ModalRootProps & ModalTransitionProps) {\n    super(props);\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id) ?? {}, data),\n      onClose: () => this.props.onExit(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement | undefined = undefined;\n\n  private get timeout() {\n    return this.props.platform === Platform.IOS ? 400 : 320;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string | null) {\n    if (id === null) {\n      return undefined;\n    }\n    return this.props.getModalState(id);\n  }\n\n  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n      this.openModal(prevProps);\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = (this.props.document?.activeElement ?? undefined) as\n        | HTMLElement\n        | undefined;\n    }\n    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = undefined;\n    }\n  }\n\n  openModal(prevProps: ModalRootProps & ModalTransitionProps) {\n    const { enteringModal } = this.props;\n    if (!enteringModal) {\n      return;\n    }\n\n    const enteringState = this.getModalState(enteringModal);\n    this.props.onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () => this.props.onEntered(enteringModal));\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    if (enteringState?.innerElement) {\n      enteringState.innerElement.style.transition = 'none';\n      enteringState.innerElement.style.opacity = '1';\n    }\n\n    this.props.onEntered(enteringModal);\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!this.props.activeModal) {\n      requestAnimationFrame(() => {\n        this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n        this.animateModalOpacity(prevModalState, false);\n        this.setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    this.props.onExited(id);\n  }\n\n  waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);\n        eventHandler();\n      };\n\n      modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдвиг модалки */\n  animateModalOpacity(modalState: ModalsStateEntry | undefined, display: boolean) {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay =\n        display && this.props.delayEnter ? `${this.timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number | null = null) {\n    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (this.maskAnimationFrame) {\n      cancelAnimationFrame(this.maskAnimationFrame);\n    }\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          className={classNames(\n            styles['ModalRoot'],\n            this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n              styles['ModalRoot--vkapps'],\n            styles['ModalRoot--desktop'],\n          )}\n        >\n          <div\n            className={styles['ModalRoot__mask']}\n            ref={this.maskElementRef}\n            onClick={this.props.onExit}\n          />\n          <div className={styles['ModalRoot__viewport']}>\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (modalId !== activeModal && modalId !== exitingModal) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <FocusTrap\n                  restoreFocus={false}\n                  onClose={this.props.onExit}\n                  timeout={this.timeout}\n                  key={key}\n                  className={styles['ModalRoot__modal']}\n                >\n                  {Modal}\n                </FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))),\n  ConfigProviderContext,\n  'configProvider',\n);\n"],"names":["ModalRootDesktop","warn","warnOnce","ModalRootDesktopComponent","props","maskElementRef","maskAnimationFrame","undefined","modalRootContext","restoreFocusTo","React","createRef","updateModalHeight","registerModal","Object","id","data","assign","getModalState","onClose","onExit","isInsideModal","timeout","platform","Platform","IOS","modals","Children","toArray","children","componentDidUpdate","prevProps","exitingModal","closeModal","enteringModal","openModal","activeModal","document","activeElement","focus","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","innerElement","style","transition","opacity","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","display","transitionDelay","delayEnter","forceOpacity","history","cancelAnimationFrame","current","translateY","translateYCurrent","clamp","toString","render","ModalRootContext","Provider","value","div","className","classNames","configProvider","webviewType","WebviewType","VKAPPS","ref","onClick","map","Modal","modalId","getNavId","key","FocusTrap","restoreFocus","Component","withContext","withPlatform","withDOM","withModalManager","ConfigProviderContext"],"mappings":"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"}

package/dist/cjs/components/ModalRoot/constants.js

@@ -1,13 +1,26 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MODAL_PAGE_DEFAULT_PERCENT_HEIGHT: function() {
+        return MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
+    },
+    PERCENT_OPENED: function() {
+        return PERCENT_OPENED;
+    },
+    PERCENT_CLOSED: function() {
+        return PERCENT_CLOSED;
+    }
 });
-exports.PERCENT_OPENED = exports.PERCENT_CLOSED = exports.MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = void 0;
 var MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
-exports.MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
 var PERCENT_OPENED = 0;
-exports.PERCENT_OPENED = PERCENT_OPENED;
 var PERCENT_CLOSED = 100;
-exports.PERCENT_CLOSED = PERCENT_CLOSED;
+
 //# sourceMappingURL=constants.js.map

package/dist/cjs/components/ModalRoot/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":["MODAL_PAGE_DEFAULT_PERCENT_HEIGHT","PERCENT_OPENED","PERCENT_CLOSED"],"sources":["../../../../src/components/ModalRoot/constants.ts"],"sourcesContent":["export const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;\n\nexport const PERCENT_OPENED = 0;\nexport const PERCENT_CLOSED = 100;\n"],"mappings":";;;;;;AAAO,IAAMA,iCAAiC,GAAG,EAAE;AAAC;AAE7C,IAAMC,cAAc,GAAG,CAAC;AAAC;AACzB,IAAMC,cAAc,GAAG,GAAG;AAAC"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/constants.ts"],"sourcesContent":["export const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;\n\nexport const PERCENT_OPENED = 0;\nexport const PERCENT_CLOSED = 100;\n"],"names":["MODAL_PAGE_DEFAULT_PERCENT_HEIGHT","PERCENT_OPENED","PERCENT_CLOSED"],"mappings":";;;;;;;;;;;IAAaA,iCAAiC;eAAjCA;;IAEAC,cAAc;eAAdA;;IACAC,cAAc;eAAdA;;;AAHN,IAAMF,oCAAoC;AAE1C,IAAMC,iBAAiB;AACvB,IAAMC,iBAAiB"}

package/dist/cjs/components/ModalRoot/types.d.ts

@@ -2,8 +2,8 @@ export declare enum ModalType {
     PAGE = "page",
     CARD = "card"
 }
-export declare type TranslateRange = [number, number];
-export declare type ModalsState = {
+export type TranslateRange = [number, number];
+export type ModalsState = {
     [index: string]: ModalsStateEntry;
 };
 export interface ModalElements {