@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1,11 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["id"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
@@ -20,222 +12,158 @@ import { ConfigProviderContext, WebviewType } from '../ConfigProvider/ConfigProv
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { ModalRootContext } from './ModalRootContext';
 import { withModalManager } from './useModalManager';
-import "./ModalRoot.module.css";
-var warn = warnOnce('ModalRoot');
-var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalRootDesktopComponent, _React$Component);
-  var _super = _createSuper(ModalRootDesktopComponent);
-  function ModalRootDesktopComponent(props) {
-    var _this;
-    _classCallCheck(this, ModalRootDesktopComponent);
-    _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();
-    _this.modalRootContext = {
-      updateModalHeight: function updateModalHeight() {
-        return undefined;
-      },
-      registerModal: function registerModal(_ref) {
-        var _this$getModalState;
-        var id = _ref.id,
-          data = _objectWithoutProperties(_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;
-  }
-  _createClass(ModalRootDesktopComponent, [{
-    key: "timeout",
-    get: function get() {
-      return this.props.platform === Platform.IOS ? 400 : 320;
+import styles from './ModalRoot.module.css';
+const warn = warnOnce('ModalRoot');
+class ModalRootDesktopComponent extends React.Component {
+    constructor(props){
+        super(props);
+        this.maskElementRef = /*#__PURE__*/ React.createRef();
+        this.modalRootContext = {
+            updateModalHeight: ()=>undefined,
+            registerModal: ({ id , ...data })=>Object.assign(this.getModalState(id) ?? {}, data),
+            onClose: ()=>this.props.onExit(),
+            isInsideModal: true
+        };
     }
-  }, {
-    key: "modals",
-    get: function get() {
-      return React.Children.toArray(this.props.children);
+    maskElementRef;
+    maskAnimationFrame = undefined;
+    modalRootContext;
+    restoreFocusTo = undefined;
+    get timeout() {
+        return this.props.platform === Platform.IOS ? 400 : 320;
     }
-  }, {
-    key: "getModalState",
-    value: function getModalState(id) {
-      if (id === null) {
-        return undefined;
-      }
-      return this.props.getModalState(id);
+    get modals() {
+        return React.Children.toArray(this.props.children);
     }
-  }, {
-    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;
-      }
+    getModalState(id) {
+        if (id === null) {
+            return undefined;
+        }
+        return this.props.getModalState(id);
     }
-  }, {
-    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);
+    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) {
+            this.restoreFocusTo = this.props.document?.activeElement ?? undefined;
+        }
+        if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+            this.restoreFocusTo.focus();
+            this.restoreFocusTo = undefined;
+        }
+    }
+    openModal(prevProps) {
+        const { enteringModal  } = this.props;
+        if (!enteringModal) {
+            return;
+        }
+        const enteringState = this.getModalState(enteringModal);
+        this.props.onEnter();
+        // Анимация открытия модального окна
+        if (!prevProps.exitingModal) {
+            requestAnimationFrame(()=>{
+                if (this.props.enteringModal === enteringModal) {
+                    this.waitTransitionFinish(enteringState, ()=>this.props.onEntered(enteringModal));
+                    this.animateModalOpacity(enteringState, true);
+                }
             });
-            _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);
+            return;
+        }
+        // Переход между модальными окнами без анимации
+        if (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);
+    closeModal(id) {
+        const prevModalState = this.getModalState(id);
+        if (!prevModalState) {
+            return;
+        }
+        // Анимация закрытия модального окна
+        if (!this.props.activeModal) {
+            requestAnimationFrame(()=>{
+                this.waitTransitionFinish(prevModalState, ()=>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 (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(transitionEvent.name, onceHandler);
-          eventHandler();
-        };
-        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem2 = modalState.innerElement) === null || _modalState$innerElem2 === void 0 ? void 0 : _modalState$innerElem2.addEventListener(transitionEvent.name, onceHandler);
-      } else {
-        setTimeout(eventHandler, this.timeout);
-      }
+    waitTransitionFinish(modalState, eventHandler) {
+        if (transitionEvent.supported) {
+            const onceHandler = ()=>{
+                modalState?.innerElement?.removeEventListener(transitionEvent.name, onceHandler);
+                eventHandler();
+            };
+            modalState?.innerElement?.addEventListener(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';
-      }
+    /* Анимирует сдвиг модалки */ animateModalOpacity(modalState, display) {
+        if (modalState?.innerElement) {
+            modalState.innerElement.style.transition = '';
+            modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? `${this.timeout}ms` : '';
+            modalState.innerElement.style.opacity = display ? '1' : '0';
+        }
     }
-
-    /* Устанавливает прозрачность для полупрозрачной подложки */
-  }, {
-    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 = clamp(opacity, 0, 100).toString();
+    /* Устанавливает прозрачность для полупрозрачной подложки */ setMaskOpacity(modalState, forceOpacity = null) {
+        if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {
+            return;
         }
-      });
+        if (this.maskAnimationFrame) {
+            cancelAnimationFrame(this.maskAnimationFrame);
+        }
+        this.maskAnimationFrame = requestAnimationFrame(()=>{
+            if (this.maskElementRef.current) {
+                const { translateY =0 , translateYCurrent =0  } = modalState;
+                const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
+                this.maskElementRef.current.style.opacity = 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.Provider, {
-        value: this.modalRootContext
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames("vkuiModalRoot", ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === 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 = getNavId(Modal.props, warn);
-        if (modalId !== activeModal && modalId !== exitingModal) {
-          return null;
+    render() {
+        const { exitingModal , activeModal  } = this.props;
+        if (!activeModal && !exitingModal) {
+            return null;
         }
-        var key = "modal-".concat(modalId);
-        return /*#__PURE__*/React.createElement(FocusTrap, {
-          restoreFocus: false,
-          onClose: _this5.props.onExit,
-          timeout: _this5.timeout,
-          key: key,
-          className: "vkuiModalRoot__modal"
-        }, Modal);
-      }))));
+        return /*#__PURE__*/ React.createElement(ModalRootContext.Provider, {
+            value: this.modalRootContext
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: classNames(styles['ModalRoot'], this.props.configProvider?.webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'], styles['ModalRoot--desktop'])
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: styles['ModalRoot__mask'],
+            ref: this.maskElementRef,
+            onClick: this.props.onExit
+        }), /*#__PURE__*/ React.createElement("div", {
+            className: styles['ModalRoot__viewport']
+        }, this.modals.map((Modal)=>{
+            const modalId = getNavId(Modal.props, warn);
+            if (modalId !== activeModal && modalId !== exitingModal) {
+                return null;
+            }
+            const key = `modal-${modalId}`;
+            return /*#__PURE__*/ React.createElement(FocusTrap, {
+                restoreFocus: false,
+                onClose: this.props.onExit,
+                timeout: this.timeout,
+                key: key,
+                className: styles['ModalRoot__modal']
+            }, Modal);
+        }))));
     }
-  }]);
-  return ModalRootDesktopComponent;
-}(React.Component);
-export var ModalRootDesktop = withContext(withPlatform(withDOM(withModalManager()(ModalRootDesktopComponent))), ConfigProviderContext, 'configProvider');
+}
+export const ModalRootDesktop = withContext(withPlatform(withDOM(withModalManager()(ModalRootDesktopComponent))), ConfigProviderContext, 'configProvider');
+
 //# sourceMappingURL=ModalRootDesktop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalRootDesktop.js","names":["React","classNames","clamp","withContext","withPlatform","withDOM","getNavId","Platform","transitionEvent","warnOnce","ConfigProviderContext","WebviewType","FocusTrap","ModalRootContext","withModalManager","warn","ModalRootDesktopComponent","props","undefined","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","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","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","timeout","display","transitionDelay","delayEnter","forceOpacity","history","maskAnimationFrame","cancelAnimationFrame","current","translateY","translateYCurrent","toString","configProvider","webviewType","VKAPPS","modals","map","Modal","modalId","key","Component","ModalRootDesktop"],"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":["React","classNames","clamp","withContext","withPlatform","withDOM","getNavId","Platform","transitionEvent","warnOnce","ConfigProviderContext","WebviewType","FocusTrap","ModalRootContext","withModalManager","styles","warn","ModalRootDesktopComponent","Component","constructor","props","maskElementRef","createRef","modalRootContext","updateModalHeight","undefined","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","maskAnimationFrame","restoreFocusTo","timeout","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","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","display","transitionDelay","delayEnter","forceOpacity","history","cancelAnimationFrame","current","translateY","translateYCurrent","toString","render","Provider","value","div","className","configProvider","webviewType","VKAPPS","ref","onClick","map","Modal","modalId","key","restoreFocus","ModalRootDesktop"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-export var MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
-export var PERCENT_OPENED = 0;
-export var PERCENT_CLOSED = 100;
+export const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
+export const PERCENT_OPENED = 0;
+export const PERCENT_CLOSED = 100;
+
 //# sourceMappingURL=constants.js.map

package/dist/cssm/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":"AAAA,OAAO,IAAMA,iCAAiC,GAAG,EAAE;AAEnD,OAAO,IAAMC,cAAc,GAAG,CAAC;AAC/B,OAAO,IAAMC,cAAc,GAAG,GAAG"}
+{"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":"AAAA,OAAO,MAAMA,oCAAoC,GAAG;AAEpD,OAAO,MAAMC,iBAAiB,EAAE;AAChC,OAAO,MAAMC,iBAAiB,IAAI"}

package/dist/cssm/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 {

package/dist/cssm/components/ModalRoot/types.js

@@ -1,6 +1,7 @@
 export var ModalType;
-(function (ModalType) {
-  ModalType["PAGE"] = "page";
-  ModalType["CARD"] = "card";
+(function(ModalType) {
+    ModalType["PAGE"] = 'page';
+    ModalType["CARD"] = 'card';
 })(ModalType || (ModalType = {}));
+
 //# sourceMappingURL=types.js.map

package/dist/cssm/components/ModalRoot/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["ModalType"],"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["export enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"mappings":"AAAA,WAAYA,SAAS;AAGpB,WAHWA,SAAS;EAATA,SAAS;EAATA,SAAS;AAAA,GAATA,SAAS,KAATA,SAAS"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["export enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"names":["ModalType","PAGE","CARD"],"mappings":"WAAO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}