@skbkontur/react-ui 5.6.9 → 5.6.10

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.6.10](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.6.9...@skbkontur/react-ui@5.6.10) (2026-03-26)
+
+
+### Bug Fixes
+
+* **MobilePopup:** prevent mobile events on backdrop ([351667d](https://github.com/skbkontur/retail-ui/commit/351667d1798ea843fee24de9c94af74ad4acc60f))
+
+
+
+
+
 ## [5.6.9](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.6.8...@skbkontur/react-ui@5.6.9) (2026-03-25)
 
 

package/cjs/internal/MobilePopup/MobilePopup.d.ts

@@ -47,7 +47,11 @@ export declare class MobilePopup extends React.Component<MobilePopupProps> {
     render(): React.JSX.Element;
     renderMain(): React.JSX.Element;
     close: () => void;
-    private handleBackdropClick;
-    private handleBackdropMouseDown;
+    /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).
+     *  В мобильных браузерах pointerup может породить click по нижележащему элементу.
+     *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.
+     */
+    private backdropStopPropagation;
+    private backdropClick;
 }
 export {};

package/cjs/internal/MobilePopup/MobilePopup.js

@@ -111,6 +111,8 @@ MobilePopup = exports.MobilePopup = (0, _rootNode.rootNode)(_class = (_MobilePop
 
 
 
+
+
 
 
 
@@ -118,16 +120,18 @@ MobilePopup = exports.MobilePopup = (0, _rootNode.rootNode)(_class = (_MobilePop
       if (_this.props.onCloseRequest) {
         _this.props.onCloseRequest();
       }
-    };_this.
+    };
 
-    handleBackdropClick = function (event) {
+    /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).
+     *  В мобильных браузерах pointerup может породить click по нижележащему элементу.
+     *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.
+     */_this.
+    backdropStopPropagation = function (event) {
       event.preventDefault();
       event.stopPropagation();
-      _this.close();
     };_this.
 
-    handleBackdropMouseDown = function (event) {
-      // NOTE: prevent double close event from backdrop and RenderLayer
-      event.preventDefault();
-      event.stopPropagation();
-    };return _this;}(0, _inheritsLoose2.default)(MobilePopup, _React$Component);var _proto = MobilePopup.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: this.props.id, className: _MobilePopup2.jsStyles.zIndex(), priority: 'MobilePopup' }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup2.jsStyles.wrapper() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close }, /*#__PURE__*/_react.default.createElement("div", { ref: this.setRootNode, "data-tid": MobilePopupDataTids.container, className: _MobilePopup2.jsStyles.container(this.theme) }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.root, className: _MobilePopup2.jsStyles.root(this.theme) }, /*#__PURE__*/_react.default.createElement(_MobilePopupHeader.MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup2.jsStyles.content(this.theme) }, this.props.children), /*#__PURE__*/_react.default.createElement(_MobilePopupFooter.MobilePopupFooter, null, this.props.footerChildComponent)), /*#__PURE__*/_react.default.createElement("div", { onClick: this.close, className: _MobilePopup2.jsStyles.bottomIndent() }))), /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.backdrop, className: _MobilePopup2.jsStyles.bg(), onMouseDown: this.handleBackdropMouseDown, onClick: this.handleBackdropClick }), /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null))));if (this.props.withoutRenderContainer) {return content;}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return MobilePopup;}(_react.default.Component), _MobilePopup.__KONTUR_REACT_UI__ = 'MobileMenuHeader', _MobilePopup.displayName = 'MobileMenuHeader', _MobilePopup.defaultRootNode = null, _MobilePopup)) || _class;
+    backdropClick = function (event) {
+      _this.backdropStopPropagation(event);
+      _this.close();
+    };return _this;}(0, _inheritsLoose2.default)(MobilePopup, _React$Component);var _proto = MobilePopup.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: this.props.id, className: _MobilePopup2.jsStyles.zIndex(), priority: 'MobilePopup' }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup2.jsStyles.wrapper() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close }, /*#__PURE__*/_react.default.createElement("div", { ref: this.setRootNode, "data-tid": MobilePopupDataTids.container, className: _MobilePopup2.jsStyles.container(this.theme) }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.root, className: _MobilePopup2.jsStyles.root(this.theme) }, /*#__PURE__*/_react.default.createElement(_MobilePopupHeader.MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup2.jsStyles.content(this.theme) }, this.props.children), /*#__PURE__*/_react.default.createElement(_MobilePopupFooter.MobilePopupFooter, null, this.props.footerChildComponent)), /*#__PURE__*/_react.default.createElement("div", { onClick: this.close, className: _MobilePopup2.jsStyles.bottomIndent() }))), /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.backdrop, className: _MobilePopup2.jsStyles.bg(), onClick: this.backdropClick, onMouseDown: this.backdropStopPropagation, onPointerDownCapture: this.backdropStopPropagation, onPointerUpCapture: this.backdropStopPropagation }), /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null))));if (this.props.withoutRenderContainer) {return content;}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return MobilePopup;}(_react.default.Component), _MobilePopup.__KONTUR_REACT_UI__ = 'MobileMenuHeader', _MobilePopup.displayName = 'MobileMenuHeader', _MobilePopup.defaultRootNode = null, _MobilePopup)) || _class;

package/cjs/internal/MobilePopup/MobilePopup.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactTransitionGroup","_ThemeContext","_RenderContainer","_HideBodyVerticalScroll","_ZIndex","_RenderLayer","_rootNode","_MobilePopup2","_MobilePopupHeader","_MobilePopupFooter","_class","_MobilePopup","MobilePopupDataTids","exports","root","container","backdrop","MobilePopup","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","close","props","onCloseRequest","handleBackdropClick","event","preventDefault","stopPropagation","handleBackdropMouseDown","_inheritsLoose2","default","_proto","prototype","render","_this2","createElement","ThemeContext","Consumer","theme","renderMain","content","ZIndex","id","className","jsStyles","zIndex","priority","Transition","in","opened","onExited","onClose","mountOnEnter","unmountOnExit","timeout","wrapper","RenderLayer","onClickOutside","ref","setRootNode","MobilePopupHeader","caption","headerChildComponent","children","MobilePopupFooter","footerChildComponent","onClick","bottomIndent","bg","onMouseDown","HideBodyVerticalScroll","withoutRenderContainer","RenderContainer","React","Component","__KONTUR_REACT_UI__","displayName","defaultRootNode"],"sources":["MobilePopup.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\nimport { MobilePopupFooter } from './MobilePopupFooter';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex id={this.props.id} className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div\n                ref={this.setRootNode}\n                data-tid={MobilePopupDataTids.container}\n                className={jsStyles.container(this.theme)}\n              >\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                  <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div\n              data-tid={MobilePopupDataTids.backdrop}\n              className={jsStyles.bg()}\n              onMouseDown={this.handleBackdropMouseDown}\n              onClick={this.handleBackdropClick}\n            />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  private handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleBackdropMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    // NOTE: prevent double close event from backdrop and RenderLayer\n    event.preventDefault();\n    event.stopPropagation();\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactTransitionGroup","_ThemeContext","_RenderContainer","_HideBodyVerticalScroll","_ZIndex","_RenderLayer","_rootNode","_MobilePopup2","_MobilePopupHeader","_MobilePopupFooter","_class","_MobilePopup","MobilePopupDataTids","exports","root","container","backdrop","MobilePopup","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","close","props","onCloseRequest","backdropStopPropagation","event","preventDefault","stopPropagation","backdropClick","_inheritsLoose2","default","_proto","prototype","render","_this2","createElement","ThemeContext","Consumer","theme","renderMain","content","ZIndex","id","className","jsStyles","zIndex","priority","Transition","in","opened","onExited","onClose","mountOnEnter","unmountOnExit","timeout","wrapper","RenderLayer","onClickOutside","ref","setRootNode","MobilePopupHeader","caption","headerChildComponent","children","MobilePopupFooter","footerChildComponent","onClick","bottomIndent","bg","onMouseDown","onPointerDownCapture","onPointerUpCapture","HideBodyVerticalScroll","withoutRenderContainer","RenderContainer","React","Component","__KONTUR_REACT_UI__","displayName","defaultRootNode"],"sources":["MobilePopup.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\nimport { MobilePopupFooter } from './MobilePopupFooter';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex id={this.props.id} className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div\n                ref={this.setRootNode}\n                data-tid={MobilePopupDataTids.container}\n                className={jsStyles.container(this.theme)}\n              >\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                  <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div\n              data-tid={MobilePopupDataTids.backdrop}\n              className={jsStyles.bg()}\n              onClick={this.backdropClick}\n              onMouseDown={this.backdropStopPropagation}\n              onPointerDownCapture={this.backdropStopPropagation}\n              onPointerUpCapture={this.backdropStopPropagation}\n            />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).\n   *  В мобильных браузерах pointerup может породить click по нижележащему элементу.\n   *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.\n   */\n  private backdropStopPropagation = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private backdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    this.backdropStopPropagation(event);\n    this.close();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/internal/MobilePopup/MobilePopup.styles.js

@@ -44,7 +44,8 @@ var styles = {
   },
 
   bg: function bg() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 50%;\n    "])));
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    "])));
+
 
 
 

package/cjs/internal/MobilePopup/MobilePopup.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","styles","root","t","css","_taggedTemplateLiteralLoose2","default","mobilePopupContainerBorderRadius","mobilePopupContainerBottomPadding","menuBgDefault","wrapper","content","bgDefault","container","mobilePopupTopPadding","mobilePopupOuterIndentY","bg","bottomIndent","zIndex","jsStyles","exports","memoizeStyle"],"sources":["MobilePopup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"sRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAG9D,IAAMC,MAAM,GAAG;EACbC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;;;IAMSH,CAAC,CAACI,gCAAgC;;IAEjCJ,CAAC,CAACK,iCAAiC;IACvCL,CAAC,CAACM,aAAa;;EAEjC,CAAC;;EAEDC,OAAO,WAAAA,QAAA,EAAG;IACR,WAAON,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;;;;EAQZ,CAAC;;EAEDK,OAAO,WAAAA,QAACR,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACYH,CAAC,CAACS,SAAS;;EAEnC,CAAC;;EAEDC,SAAS,WAAAA,UAACV,CAAQ,EAAE;IAClB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAEDH,CAAC,CAACW,qBAAqB;IACtBX,CAAC,CAACY,uBAAuB;IACxBZ,CAAC,CAACY,uBAAuB;;;EAGtC,CAAC;;EAEDC,EAAE,WAAAA,GAAA,EAAG;IACH,WAAOZ,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;;;;EAUZ,CAAC;;EAEDW,YAAY,WAAAA,aAAA,EAAG;IACb,WAAOb,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDY,MAAM,WAAAA,OAAA,EAAG;IACP,WAAOd,YAAG,EAAAJ,gBAAA,KAAAA,gBAAA,OAAAK,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC;;AAEM,IAAMa,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,qBAAY,EAACpB,MAAM,CAAC","ignoreList":[]}
+{"version":3,"names":["_Emotion","require","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","styles","root","t","css","_taggedTemplateLiteralLoose2","default","mobilePopupContainerBorderRadius","mobilePopupContainerBottomPadding","menuBgDefault","wrapper","content","bgDefault","container","mobilePopupTopPadding","mobilePopupOuterIndentY","bg","bottomIndent","zIndex","jsStyles","exports","memoizeStyle"],"sources":["MobilePopup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"sRAAA,IAAAA,QAAA,GAAAC,OAAA,8BAA8D,IAAAC,eAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA,EAAAC,gBAAA;;;AAG9D,IAAMC,MAAM,GAAG;EACbC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,WAAOC,YAAG,EAAAV,eAAA,KAAAA,eAAA,OAAAW,4BAAA,CAAAC,OAAA;;;;;;IAMSH,CAAC,CAACI,gCAAgC;;IAEjCJ,CAAC,CAACK,iCAAiC;IACvCL,CAAC,CAACM,aAAa;;EAEjC,CAAC;;EAEDC,OAAO,WAAAA,QAAA,EAAG;IACR,WAAON,YAAG,EAAAT,gBAAA,KAAAA,gBAAA,OAAAU,4BAAA,CAAAC,OAAA;;;;;;;;EAQZ,CAAC;;EAEDK,OAAO,WAAAA,QAACR,CAAQ,EAAE;IAChB,WAAOC,YAAG,EAAAR,gBAAA,KAAAA,gBAAA,OAAAS,4BAAA,CAAAC,OAAA;IACYH,CAAC,CAACS,SAAS;;EAEnC,CAAC;;EAEDC,SAAS,WAAAA,UAACV,CAAQ,EAAE;IAClB,WAAOC,YAAG,EAAAP,gBAAA,KAAAA,gBAAA,OAAAQ,4BAAA,CAAAC,OAAA;;IAEDH,CAAC,CAACW,qBAAqB;IACtBX,CAAC,CAACY,uBAAuB;IACxBZ,CAAC,CAACY,uBAAuB;;;EAGtC,CAAC;;EAEDC,EAAE,WAAAA,GAAA,EAAG;IACH,WAAOZ,YAAG,EAAAN,gBAAA,KAAAA,gBAAA,OAAAO,4BAAA,CAAAC,OAAA;;;;;;;;;;;EAWZ,CAAC;;EAEDW,YAAY,WAAAA,aAAA,EAAG;IACb,WAAOb,YAAG,EAAAL,gBAAA,KAAAA,gBAAA,OAAAM,4BAAA,CAAAC,OAAA;;;EAGZ,CAAC;;EAEDY,MAAM,WAAAA,OAAA,EAAG;IACP,WAAOd,YAAG,EAAAJ,gBAAA,KAAAA,gBAAA,OAAAK,4BAAA,CAAAC,OAAA;;;EAGZ;AACF,CAAC;;AAEM,IAAMa,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,qBAAY,EAACpB,MAAM,CAAC","ignoreList":[]}

package/internal/MobilePopup/MobilePopup/MobilePopup.js

@@ -28,15 +28,18 @@ export var MobilePopup = rootNode(_class = (_MobilePopup = /*#__PURE__*/function
         _this.props.onCloseRequest();
       }
     };
-    _this.handleBackdropClick = function (event) {
+
+    /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).
+     *  В мобильных браузерах pointerup может породить click по нижележащему элементу.
+     *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.
+     */
+    _this.backdropStopPropagation = function (event) {
       event.preventDefault();
       event.stopPropagation();
-      _this.close();
     };
-    _this.handleBackdropMouseDown = function (event) {
-      // NOTE: prevent double close event from backdrop and RenderLayer
-      event.preventDefault();
-      event.stopPropagation();
+    _this.backdropClick = function (event) {
+      _this.backdropStopPropagation(event);
+      _this.close();
     };
     return _this;
   }
@@ -81,8 +84,10 @@ export var MobilePopup = rootNode(_class = (_MobilePopup = /*#__PURE__*/function
     }))), /*#__PURE__*/React.createElement("div", {
       "data-tid": MobilePopupDataTids.backdrop,
       className: jsStyles.bg(),
-      onMouseDown: this.handleBackdropMouseDown,
-      onClick: this.handleBackdropClick
+      onClick: this.backdropClick,
+      onMouseDown: this.backdropStopPropagation,
+      onPointerDownCapture: this.backdropStopPropagation,
+      onPointerUpCapture: this.backdropStopPropagation
     }), /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null))));
     if (this.props.withoutRenderContainer) {
       return content;

package/internal/MobilePopup/MobilePopup/MobilePopup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Transition","ThemeContext","RenderContainer","HideBodyVerticalScroll","ZIndex","RenderLayer","rootNode","jsStyles","MobilePopupHeader","MobilePopupFooter","MobilePopupDataTids","root","container","backdrop","MobilePopup","_class","_MobilePopup","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","close","props","onCloseRequest","handleBackdropClick","event","preventDefault","stopPropagation","handleBackdropMouseDown","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","renderMain","content","id","className","zIndex","priority","opened","onExited","onClose","mountOnEnter","unmountOnExit","timeout","wrapper","onClickOutside","ref","setRootNode","caption","headerChildComponent","children","footerChildComponent","onClick","bottomIndent","bg","onMouseDown","withoutRenderContainer","Component","__KONTUR_REACT_UI__","displayName","defaultRootNode"],"sources":["MobilePopup.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\nimport { MobilePopupFooter } from './MobilePopupFooter';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex id={this.props.id} className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div\n                ref={this.setRootNode}\n                data-tid={MobilePopupDataTids.container}\n                className={jsStyles.container(this.theme)}\n              >\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                  <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div\n              data-tid={MobilePopupDataTids.backdrop}\n              className={jsStyles.bg()}\n              onMouseDown={this.handleBackdropMouseDown}\n              onClick={this.handleBackdropClick}\n            />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  private handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.close();\n  };\n\n  private handleBackdropMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    // NOTE: prevent double close event from backdrop and RenderLayer\n    event.preventDefault();\n    event.stopPropagation();\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Transition","ThemeContext","RenderContainer","HideBodyVerticalScroll","ZIndex","RenderLayer","rootNode","jsStyles","MobilePopupHeader","MobilePopupFooter","MobilePopupDataTids","root","container","backdrop","MobilePopup","_class","_MobilePopup","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","close","props","onCloseRequest","backdropStopPropagation","event","preventDefault","stopPropagation","backdropClick","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","theme","renderMain","content","id","className","zIndex","priority","opened","onExited","onClose","mountOnEnter","unmountOnExit","timeout","wrapper","onClickOutside","ref","setRootNode","caption","headerChildComponent","children","footerChildComponent","onClick","bottomIndent","bg","onMouseDown","onPointerDownCapture","onPointerUpCapture","withoutRenderContainer","Component","__KONTUR_REACT_UI__","displayName","defaultRootNode"],"sources":["MobilePopup.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode';\nimport { rootNode } from '../../lib/rootNode';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\nimport { MobilePopupFooter } from './MobilePopupFooter';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Подвал всплывающего окна\n   */\n  footerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n  children?: React.ReactNode;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n  backdrop: 'MobilePopup__backdrop',\n} as const;\n\n@rootNode\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex id={this.props.id} className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div\n                ref={this.setRootNode}\n                data-tid={MobilePopupDataTids.container}\n                className={jsStyles.container(this.theme)}\n              >\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                  <MobilePopupFooter>{this.props.footerChildComponent}</MobilePopupFooter>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div\n              data-tid={MobilePopupDataTids.backdrop}\n              className={jsStyles.bg()}\n              onClick={this.backdropClick}\n              onMouseDown={this.backdropStopPropagation}\n              onPointerDownCapture={this.backdropStopPropagation}\n              onPointerUpCapture={this.backdropStopPropagation}\n            />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).\n   *  В мобильных браузерах pointerup может породить click по нижележащему элементу.\n   *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.\n   */\n  private backdropStopPropagation = (event: React.SyntheticEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n  };\n\n  private backdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    this.backdropStopPropagation(event);\n    this.close();\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/internal/MobilePopup/MobilePopup.d.ts

@@ -47,7 +47,11 @@ export declare class MobilePopup extends React.Component<MobilePopupProps> {
     render(): React.JSX.Element;
     renderMain(): React.JSX.Element;
     close: () => void;
-    private handleBackdropClick;
-    private handleBackdropMouseDown;
+    /** Не даём событию дойти до document (`RenderLayer` / «клик сквозь» вуаль).
+     *  В мобильных браузерах pointerup может породить click по нижележащему элементу.
+     *  Гасим его на вуали, а закрытие остаётся на обычном click по backdrop.
+     */
+    private backdropStopPropagation;
+    private backdropClick;
 }
 export {};

package/internal/MobilePopup/MobilePopup.styles/MobilePopup.styles.js

@@ -15,7 +15,7 @@ var styles = {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      right: ", ";\n      z-index: 100000;\n    "])), t.mobilePopupTopPadding, t.mobilePopupOuterIndentY, t.mobilePopupOuterIndentY);
   },
   bg: function bg() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 50%;\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    "])));
   },
   bottomIndent: function bottomIndent() {
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: 80px;\n    "])));

package/internal/MobilePopup/MobilePopup.styles/MobilePopup.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","mobilePopupContainerBorderRadius","mobilePopupContainerBottomPadding","menuBgDefault","wrapper","_templateObject2","content","_templateObject3","bgDefault","container","_templateObject4","mobilePopupTopPadding","mobilePopupOuterIndentY","bg","_templateObject5","bottomIndent","_templateObject6","zIndex","_templateObject7","jsStyles"],"sources":["MobilePopup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"gOAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,IAAMC,MAAM,GAAG;EACbC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;IAMSF,CAAC,CAACG,gCAAgC;;IAEjCH,CAAC,CAACI,iCAAiC;IACvCJ,CAAC,CAACK,aAAa;;EAEjC,CAAC;;EAEDC,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;;;;;;;;EAQZ,CAAC;;EAEDM,OAAO,WAAAA,QAACR,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;IACYF,CAAC,CAACU,SAAS;;EAEnC,CAAC;;EAEDC,SAAS,WAAAA,UAACX,CAAQ,EAAE;IAClB,OAAOJ,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;IAEDF,CAAC,CAACa,qBAAqB;IACtBb,CAAC,CAACc,uBAAuB;IACxBd,CAAC,CAACc,uBAAuB;;;EAGtC,CAAC;;EAEDC,EAAE,WAAAA,GAAA,EAAG;IACH,OAAOnB,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;;;;;;;;;EAUZ,CAAC;;EAEDe,YAAY,WAAAA,aAAA,EAAG;IACb,OAAOrB,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;;;EAGZ,CAAC;;EAEDiB,MAAM,WAAAA,OAAA,EAAG;IACP,OAAOvB,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;;;EAGZ;AACF,CAAC;;AAED,OAAO,IAAMmB,QAAQ,GAAGxB,YAAY,CAACC,MAAM,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","mobilePopupContainerBorderRadius","mobilePopupContainerBottomPadding","menuBgDefault","wrapper","_templateObject2","content","_templateObject3","bgDefault","container","_templateObject4","mobilePopupTopPadding","mobilePopupOuterIndentY","bg","_templateObject5","bottomIndent","_templateObject6","zIndex","_templateObject7","jsStyles"],"sources":["MobilePopup.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      touch-action: none;\n      background: #333333;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"],"mappings":"gOAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,IAAMC,MAAM,GAAG;EACbC,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;IAMSF,CAAC,CAACG,gCAAgC;;IAEjCH,CAAC,CAACI,iCAAiC;IACvCJ,CAAC,CAACK,aAAa;;EAEjC,CAAC;;EAEDC,OAAO,WAAAA,QAAA,EAAG;IACR,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAL,2BAAA;;;;;;;;EAQZ,CAAC;;EAEDM,OAAO,WAAAA,QAACR,CAAQ,EAAE;IAChB,OAAOJ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;IACYF,CAAC,CAACU,SAAS;;EAEnC,CAAC;;EAEDC,SAAS,WAAAA,UAACX,CAAQ,EAAE;IAClB,OAAOJ,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;;IAEDF,CAAC,CAACa,qBAAqB;IACtBb,CAAC,CAACc,uBAAuB;IACxBd,CAAC,CAACc,uBAAuB;;;EAGtC,CAAC;;EAEDC,EAAE,WAAAA,GAAA,EAAG;IACH,OAAOnB,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAd,2BAAA;;;;;;;;;;;EAWZ,CAAC;;EAEDe,YAAY,WAAAA,aAAA,EAAG;IACb,OAAOrB,GAAG,CAAAsB,gBAAA,KAAAA,gBAAA,GAAAhB,2BAAA;;;EAGZ,CAAC;;EAEDiB,MAAM,WAAAA,OAAA,EAAG;IACP,OAAOvB,GAAG,CAAAwB,gBAAA,KAAAA,gBAAA,GAAAlB,2BAAA;;;EAGZ;AACF,CAAC;;AAED,OAAO,IAAMmB,QAAQ,GAAGxB,YAAY,CAACC,MAAM,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/react-ui",
-  "version": "5.6.9",
+  "version": "5.6.10",
   "description": "UI Components",
   "main": "cjs/index.js",
   "module": "index.js",