@skbkontur/react-ui 6.0.8 → 6.1.0

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

@@ -5,11 +5,21 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { memoizeGetStyles } from '../../../lib/theming/Emotion.js';
 export var getJsStyles = memoizeGetStyles(function (_a) {
     var css = _a.css;
-    return ({
+    var rootBase6_1 = function (t) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    background: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n  "], ["\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    background: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n  "])), t.menuBgDefault, t.mobilePopupContainerBorderRadius, t.mobilePopupContainerBorderRadius); };
+    return {
         root: function (t) {
-            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      padding: ", ";\n    "], ["\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      padding: ", ";\n    "])), t.mobilePopupHeaderPadding);
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        background: ", ";\n        padding: ", ";\n      "], ["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        background: ", ";\n        padding: ", ";\n      "])), t.menuBgDefault, t.mobilePopupFooterPadding);
         },
-    });
+        rootSmall6_1: function (t) {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), rootBase6_1(t), t.mobilePopupFooterPaddingSmall);
+        },
+        rootMedium6_1: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), rootBase6_1(t), t.mobilePopupFooterPaddingMedium);
+        },
+        rootLarge6_1: function (t) {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), rootBase6_1(t), t.mobilePopupFooterPaddingLarge);
+        },
+    };
 });
-var templateObject_1;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=MobilePopupFooter.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobilePopupFooter.styles.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QACjE,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,iLAAA,mGAIG,EAA0B,SACtC,KADY,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;KACF,CAAC;AATgE,CAShE,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      padding: ${t.mobilePopupHeaderPadding};\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"MobilePopupFooter.styles.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupFooter/MobilePopupFooter.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAChD,IAAM,WAAW,GAAG,UAAC,CAAQ,IAAK,OAAA,GAAG,uPAAA,8FAIrB,EAAe,oCACA,EAAkC,qCACjC,EAAkC,OACjE,KAHe,CAAC,CAAC,aAAa,EACA,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,GANhC,CAOjC,CAAC;IAEF,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,sNAAA,8GAIM,EAAe,sBAClB,EAA0B,WACtC,KAFe,CAAC,CAAC,aAAa,EAClB,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,oHAAA,YACN,EAAc,sBACL,EAA+B,WAC3C,KAFG,WAAW,CAAC,CAAC,CAAC,EACL,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;QACD,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,oHAAA,YACN,EAAc,sBACL,EAAgC,WAC5C,KAFG,WAAW,CAAC,CAAC,CAAC,EACL,CAAC,CAAC,8BAA8B,EAC3C;QACJ,CAAC;QACD,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,oHAAA,YACN,EAAc,sBACL,EAA+B,WAC3C,KAFG,WAAW,CAAC,CAAC,CAAC,EACL,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => {\n  const rootBase6_1 = (t: Theme) => css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    background: ${t.menuBgDefault};\n    border-bottom-left-radius: ${t.mobilePopupContainerBorderRadius};\n    border-bottom-right-radius: ${t.mobilePopupContainerBorderRadius};\n  `;\n\n  return {\n    root(t: Theme) {\n      return css`\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        background: ${t.menuBgDefault};\n        padding: ${t.mobilePopupFooterPadding};\n      `;\n    },\n\n    rootSmall6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding: ${t.mobilePopupFooterPaddingSmall};\n      `;\n    },\n    rootMedium6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding: ${t.mobilePopupFooterPaddingMedium};\n      `;\n    },\n    rootLarge6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding: ${t.mobilePopupFooterPaddingLarge};\n      `;\n    },\n  };\n});\n"]}

package/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { SizeProp } from '../../../lib/types/props.js';
 interface MobilePopupHeaderProps {
     /**
      * Заголовок шапки
      */
     caption?: string;
+    size?: SizeProp;
 }
 export declare class MobilePopupHeader extends React.Component<React.PropsWithChildren<MobilePopupHeaderProps>> {
     static __KONTUR_REACT_UI__: string;
@@ -14,5 +16,7 @@ export declare class MobilePopupHeader extends React.Component<React.PropsWithCh
     private theme;
     render(): React.JSX.Element;
     private renderMain;
+    private getContainerClassName6_1;
+    private getRootSizeClassName6_1;
 }
 export {};

package/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.js

@@ -22,12 +22,36 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import React from 'react';
 import { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';
 import { isNonNullable } from '../../../lib/utils.js';
 import { getJsStyles } from './MobilePopupHeader.styles.js';
 var MobilePopupHeader = /** @class */ (function (_super) {
     __extends(MobilePopupHeader, _super);
     function MobilePopupHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getContainerClassName6_1 = function () {
+            switch (_this.props.size) {
+                case 'large':
+                    return _this.jsStyles.containerLarge6_1(_this.theme);
+                case 'medium':
+                    return _this.jsStyles.containerMedium6_1(_this.theme);
+                case 'small':
+                default:
+                    return _this.jsStyles.containerSmall6_1(_this.theme);
+            }
+        };
+        _this.getRootSizeClassName6_1 = function () {
+            switch (_this.props.size) {
+                case 'large':
+                    return _this.jsStyles.rootLarge6_1(_this.theme);
+                case 'medium':
+                    return _this.jsStyles.rootMedium6_1(_this.theme);
+                case 'small':
+                default:
+                    return _this.jsStyles.rootSmall6_1(_this.theme);
+            }
+        };
+        return _this;
     }
     MobilePopupHeader.prototype.render = function () {
         var _this = this;
@@ -38,17 +62,30 @@ var MobilePopupHeader = /** @class */ (function (_super) {
         }));
     };
     MobilePopupHeader.prototype.renderMain = function () {
-        var _a, _b;
-        var _c = this.props, caption = _c.caption, children = _c.children;
-        return (React.createElement("div", { className: this.cx((_a = {},
-                _a[this.jsStyles.root(this.theme)] = true,
-                _a[this.jsStyles.rootWithoutContent()] = !caption && !children,
-                _a)) },
+        var _a, _b, _c;
+        var themeGTE6_1 = isThemeGTE(this.theme, '6.1');
+        var _d = this.props, caption = _d.caption, children = _d.children;
+        if (themeGTE6_1) {
+            if (!caption && (!children || !React.isValidElement(children))) {
+                return null;
+            }
+            return (React.createElement("div", { className: this.getRootSizeClassName6_1() },
+                React.createElement("div", { className: this.getContainerClassName6_1() },
+                    caption && (React.createElement("div", { className: this.cx((_a = {},
+                            _a[this.jsStyles.caption(this.theme)] = true,
+                            _a[this.jsStyles.captionWithChildren()] = isNonNullable(children),
+                            _a)) }, caption)),
+                    React.isValidElement(children) && React.createElement("div", null, children))));
+        }
+        return (React.createElement("div", { className: this.cx((_b = {},
+                _b[this.jsStyles.root(this.theme)] = true,
+                _b[this.jsStyles.rootWithoutContent()] = !caption && !children,
+                _b)) },
             React.createElement("div", { className: this.jsStyles.container() },
-                caption && (React.createElement("div", { className: this.cx((_b = {},
-                        _b[this.jsStyles.caption(this.theme)] = true,
-                        _b[this.jsStyles.captionWithChildren()] = isNonNullable(children),
-                        _b)) }, caption)),
+                caption && (React.createElement("div", { className: this.cx((_c = {},
+                        _c[this.jsStyles.caption(this.theme)] = true,
+                        _c[this.jsStyles.captionWithChildren()] = isNonNullable(children),
+                        _c)) }, caption)),
                 React.isValidElement(children) && React.createElement("div", null, children))));
     };
     MobilePopupHeader.__KONTUR_REACT_UI__ = 'MobileMenuHeader';

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

@@ -1 +1 @@
-{"version":3,"file":"MobilePopupHeader.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAU5D;IAAuC,qCAAgE;IAAvG;;IAgDA,CAAC;IAvCQ,kCAAM,GAAb;QAAA,iBAWC;QAVC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1C,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,KAAI,CAAC,UAAU,EAAE,CAAC;QAC3B,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAEO,sCAAU,GAAlB;;QACQ,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,OAAO,aAAA,EAAE,QAAQ,cAAe,CAAC;QAEzC,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE;gBAChB,GAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;gBACtC,GAAC,IAAI,CAAC,QAAQ,CAAC,kBAAkB,EAAE,IAAG,CAAC,OAAO,IAAI,CAAC,QAAQ;oBAC3D;YAEF,6BAAK,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE;gBACtC,OAAO,IAAI,CACV,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE;wBAChB,GAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBACzC,GAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,EAAE,IAAG,aAAa,CAAC,QAAQ,CAAC;4BAC9D,IAED,OAAO,CACJ,CACP;gBACA,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,iCAAM,QAAQ,CAAO,CACpD,CACF,CACP,CAAC;IACJ,CAAC;IA9Ca,qCAAmB,GAAG,kBAAkB,AAArB,CAAsB;IACzC,6BAAW,GAAG,kBAAkB,AAArB,CAAsB;IAFpC,iBAAiB;QAD7B,qBAAqB;OACT,iBAAiB,CAgD7B;IAAD,wBAAC;CAAA,AAhDD,CAAuC,KAAK,CAAC,SAAS,GAgDrD;SAhDY,iBAAiB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\n\nimport { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../../lib/utils.js';\nimport { getJsStyles } from './MobilePopupHeader.styles.js';\n\ninterface MobilePopupHeaderProps {\n  /**\n   * Заголовок шапки\n   */\n  caption?: string;\n}\n\n@withRenderEnvironment\nexport class MobilePopupHeader extends React.Component<React.PropsWithChildren<MobilePopupHeaderProps>> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private theme!: Theme;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, children } = this.props;\n\n    return (\n      <div\n        className={this.cx({\n          [this.jsStyles.root(this.theme)]: true,\n          [this.jsStyles.rootWithoutContent()]: !caption && !children,\n        })}\n      >\n        <div className={this.jsStyles.container()}>\n          {caption && (\n            <div\n              className={this.cx({\n                [this.jsStyles.caption(this.theme)]: true,\n                [this.jsStyles.captionWithChildren()]: isNonNullable(children),\n              })}\n            >\n              {caption}\n            </div>\n          )}\n          {React.isValidElement(children) && <div>{children}</div>}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"MobilePopupHeader.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport type { ReactElement } from 'react';\n\nimport { withRenderEnvironment } from '../../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { isThemeGTE } from '../../../lib/theming/ThemeHelpers.js';\nimport type { SizeProp } from '../../../lib/types/props.js';\nimport { isNonNullable } from '../../../lib/utils.js';\nimport { getJsStyles } from './MobilePopupHeader.styles.js';\n\ninterface MobilePopupHeaderProps {\n  /**\n   * Заголовок шапки\n   */\n  caption?: string;\n  size?: SizeProp;\n}\n\n@withRenderEnvironment\nexport class MobilePopupHeader extends React.Component<React.PropsWithChildren<MobilePopupHeaderProps>> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n  public static displayName = 'MobileMenuHeader';\n\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private jsStyles!: ReturnType<typeof getJsStyles>;\n  private theme!: Theme;\n\n  public render() {\n    this.jsStyles = getJsStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain(): ReactElement | null {\n    const themeGTE6_1 = isThemeGTE(this.theme, '6.1');\n    const { caption, children } = this.props;\n\n    if (themeGTE6_1) {\n      if (!caption && (!children || !React.isValidElement(children))) {\n        return null;\n      }\n\n      return (\n        <div className={this.getRootSizeClassName6_1()}>\n          <div className={this.getContainerClassName6_1()}>\n            {caption && (\n              <div\n                className={this.cx({\n                  [this.jsStyles.caption(this.theme)]: true,\n                  [this.jsStyles.captionWithChildren()]: isNonNullable(children),\n                })}\n              >\n                {caption}\n              </div>\n            )}\n            {React.isValidElement(children) && <div>{children}</div>}\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        className={this.cx({\n          [this.jsStyles.root(this.theme)]: true,\n          [this.jsStyles.rootWithoutContent()]: !caption && !children,\n        })}\n      >\n        <div className={this.jsStyles.container()}>\n          {caption && (\n            <div\n              className={this.cx({\n                [this.jsStyles.caption(this.theme)]: true,\n                [this.jsStyles.captionWithChildren()]: isNonNullable(children),\n              })}\n            >\n              {caption}\n            </div>\n          )}\n          {React.isValidElement(children) && <div>{children}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  private getContainerClassName6_1 = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return this.jsStyles.containerLarge6_1(this.theme);\n      case 'medium':\n        return this.jsStyles.containerMedium6_1(this.theme);\n      case 'small':\n      default:\n        return this.jsStyles.containerSmall6_1(this.theme);\n    }\n  };\n\n  private getRootSizeClassName6_1 = (): string => {\n    switch (this.props.size) {\n      case 'large':\n        return this.jsStyles.rootLarge6_1(this.theme);\n      case 'medium':\n        return this.jsStyles.rootMedium6_1(this.theme);\n      case 'small':\n      default:\n        return this.jsStyles.rootSmall6_1(this.theme);\n    }\n  };\n}\n"]}

package/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.styles.d.ts

@@ -3,6 +3,12 @@ export declare const getJsStyles: import("../../../lib/theming/Emotion.js").Styl
     root(t: Theme): string;
     rootWithoutContent(): string;
     container(): string;
+    rootSmall6_1(t: Theme): string;
+    rootMedium6_1(t: Theme): string;
+    rootLarge6_1(t: Theme): string;
+    containerSmall6_1(t: Theme): string;
+    containerMedium6_1(t: Theme): string;
+    containerLarge6_1(t: Theme): string;
     caption(t: Theme): string;
     captionWithChildren(): string;
 }>;

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

@@ -5,23 +5,43 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { memoizeGetStyles } from '../../../lib/theming/Emotion.js';
 export var getJsStyles = memoizeGetStyles(function (_a) {
     var css = _a.css;
-    return ({
+    var rootBase6_1 = function (t) { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    position: relative;\n    background: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  "], ["\n    position: relative;\n    background: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  "])), t.menuBgDefault, t.mobilePopupContainerBorderRadius, t.mobilePopupContainerBorderRadius); };
+    var containerBase6_1 = function () { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: column;\n  "], ["\n    display: flex;\n    flex-direction: column;\n  "]))); };
+    return {
         root: function (t) {
-            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n      padding: ", ";\n    "], ["\n      position: relative;\n      padding: ", ";\n    "])), t.mobilePopupHeaderPadding);
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        position: relative;\n        padding: ", ";\n      "], ["\n        position: relative;\n        padding: ", ";\n      "])), t.mobilePopupHeaderPadding);
         },
         rootWithoutContent: function () {
-            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding: 8px 0 0 0;\n    "], ["\n      padding: 8px 0 0 0;\n    "])));
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        padding: 8px 0 0 0;\n      "], ["\n        padding: 8px 0 0 0;\n      "])));
         },
         container: function () {
-            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n    "], ["\n      display: flex;\n      flex-direction: column;\n    "])));
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        display: flex;\n        flex-direction: column;\n      "], ["\n        display: flex;\n        flex-direction: column;\n      "])));
+        },
+        rootSmall6_1: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        ", ";\n        padding-top: ", ";\n      "], ["\n        ", ";\n        padding-top: ", ";\n      "])), rootBase6_1(t), t.mobilePopupPaddingSmall);
+        },
+        rootMedium6_1: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        ", ";\n        padding-top: ", ";\n      "], ["\n        ", ";\n        padding-top: ", ";\n      "])), rootBase6_1(t), t.mobilePopupPaddingMedium);
+        },
+        rootLarge6_1: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        ", ";\n        padding-top: ", ";\n      "], ["\n        ", ";\n        padding-top: ", ";\n      "])), rootBase6_1(t), t.mobilePopupPaddingLarge);
+        },
+        containerSmall6_1: function (t) {
+            return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), containerBase6_1(), t.mobilePopupHeaderPaddingSmall);
+        },
+        containerMedium6_1: function (t) {
+            return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), containerBase6_1(), t.mobilePopupHeaderPaddingMedium);
+        },
+        containerLarge6_1: function (t) {
+            return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        ", ";\n        padding: ", ";\n      "], ["\n        ", ";\n        padding: ", ";\n      "])), containerBase6_1(), t.mobilePopupHeaderPaddingLarge);
         },
         caption: function (t) {
-            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "])), t.mobilePopupHeaderFontSize, t.mobilePopupHeaderLineHeight, t.mobilePopupHeaderFontWeight, t.textColorDefault);
+            return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n        font-size: ", ";\n        line-height: ", ";\n        font-weight: ", ";\n        color: ", ";\n      "], ["\n        font-size: ", ";\n        line-height: ", ";\n        font-weight: ", ";\n        color: ", ";\n      "])), t.mobilePopupHeaderFontSize, t.mobilePopupHeaderLineHeight, t.mobilePopupHeaderFontWeight, t.textColorDefault);
         },
         captionWithChildren: function () {
-            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-bottom: 8px;\n    "], ["\n      padding-bottom: 8px;\n    "])));
+            return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n        padding-bottom: 8px;\n      "], ["\n        padding-bottom: 8px;\n      "])));
         },
-    });
+    };
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 //# sourceMappingURL=MobilePopupHeader.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobilePopupHeader.styles.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QACjE,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,4HAAA,8CAEG,EAA0B,SACtC,KADY,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,kBAAkB;YAChB,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,gIAAA,6DAGT,KAAC;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,2KAAA,qBACK,EAA2B,wBACzB,EAA6B,wBAC7B,EAA6B,kBACnC,EAAkB,SAC5B,KAJc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EAC7B,CAAC,CAAC,2BAA2B,EACnC,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,mBAAmB;YACjB,OAAO,GAAG,uGAAA,oCAET,KAAC;QACJ,CAAC;KACF,CAAC;AAnCgE,CAmChE,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root(t: Theme) {\n    return css`\n      position: relative;\n      padding: ${t.mobilePopupHeaderPadding};\n    `;\n  },\n\n  rootWithoutContent() {\n    return css`\n      padding: 8px 0 0 0;\n    `;\n  },\n\n  container() {\n    return css`\n      display: flex;\n      flex-direction: column;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      font-size: ${t.mobilePopupHeaderFontSize};\n      line-height: ${t.mobilePopupHeaderLineHeight};\n      font-weight: ${t.mobilePopupHeaderFontWeight};\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  captionWithChildren() {\n    return css`\n      padding-bottom: 8px;\n    `;\n  },\n}));\n"]}
+{"version":3,"file":"MobilePopupHeader.styles.js","sourceRoot":"","sources":["../../../../internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAGnE,MAAM,CAAC,IAAM,WAAW,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAChD,IAAM,WAAW,GAAG,UAAC,CAAQ,IAAK,OAAA,GAAG,gMAAA,6CAErB,EAAe,iCACH,EAAkC,kCACjC,EAAkC,OAC9D,KAHe,CAAC,CAAC,aAAa,EACH,CAAC,CAAC,gCAAgC,EACjC,CAAC,CAAC,gCAAgC,GAJ7B,CAKjC,CAAC;IAEF,IAAM,gBAAgB,GAAG,cAAM,OAAA,GAAG,0HAAA,uDAGjC,MAH8B,CAG9B,CAAC;IAEF,OAAO;QACL,IAAI,YAAC,CAAQ;YACX,OAAO,GAAG,kIAAA,kDAEG,EAA0B,WACtC,KADY,CAAC,CAAC,wBAAwB,EACrC;QACJ,CAAC;QAED,kBAAkB;YAChB,OAAO,GAAG,0GAAA,uCAET,KAAC;QACJ,CAAC;QAED,SAAS;YACP,OAAO,GAAG,sIAAA,mEAGT,KAAC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wHAAA,YACN,EAAc,0BACD,EAAyB,WACzC,KAFG,WAAW,CAAC,CAAC,CAAC,EACD,CAAC,CAAC,uBAAuB,EACxC;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,wHAAA,YACN,EAAc,0BACD,EAA0B,WAC1C,KAFG,WAAW,CAAC,CAAC,CAAC,EACD,CAAC,CAAC,wBAAwB,EACzC;QACJ,CAAC;QAED,YAAY,YAAC,CAAQ;YACnB,OAAO,GAAG,wHAAA,YACN,EAAc,0BACD,EAAyB,WACzC,KAFG,WAAW,CAAC,CAAC,CAAC,EACD,CAAC,CAAC,uBAAuB,EACxC;QACJ,CAAC;QAED,iBAAiB,YAAC,CAAQ;YACxB,OAAO,GAAG,oHAAA,YACN,EAAkB,sBACT,EAA+B,WAC3C,KAFG,gBAAgB,EAAE,EACT,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;QAED,kBAAkB,YAAC,CAAQ;YACzB,OAAO,GAAG,sHAAA,YACN,EAAkB,sBACT,EAAgC,WAC5C,KAFG,gBAAgB,EAAE,EACT,CAAC,CAAC,8BAA8B,EAC3C;QACJ,CAAC;QAED,iBAAiB,YAAC,CAAQ;YACxB,OAAO,GAAG,sHAAA,YACN,EAAkB,sBACT,EAA+B,WAC3C,KAFG,gBAAgB,EAAE,EACT,CAAC,CAAC,6BAA6B,EAC1C;QACJ,CAAC;QAED,OAAO,YAAC,CAAQ;YACd,OAAO,GAAG,uLAAA,uBACK,EAA2B,0BACzB,EAA6B,0BAC7B,EAA6B,oBACnC,EAAkB,WAC5B,KAJc,CAAC,CAAC,yBAAyB,EACzB,CAAC,CAAC,2BAA2B,EAC7B,CAAC,CAAC,2BAA2B,EACnC,CAAC,CAAC,gBAAgB,EAC3B;QACJ,CAAC;QAED,mBAAmB;YACjB,OAAO,GAAG,6GAAA,wCAET,KAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../../lib/theming/Emotion.js';\nimport type { Theme } from '../../../lib/theming/Theme.js';\n\nexport const getJsStyles = memoizeGetStyles(({ css }: Emotion) => {\n  const rootBase6_1 = (t: Theme) => css`\n    position: relative;\n    background: ${t.menuBgDefault};\n    border-top-left-radius: ${t.mobilePopupContainerBorderRadius};\n    border-top-right-radius: ${t.mobilePopupContainerBorderRadius};\n  `;\n\n  const containerBase6_1 = () => css`\n    display: flex;\n    flex-direction: column;\n  `;\n\n  return {\n    root(t: Theme) {\n      return css`\n        position: relative;\n        padding: ${t.mobilePopupHeaderPadding};\n      `;\n    },\n\n    rootWithoutContent() {\n      return css`\n        padding: 8px 0 0 0;\n      `;\n    },\n\n    container() {\n      return css`\n        display: flex;\n        flex-direction: column;\n      `;\n    },\n\n    rootSmall6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding-top: ${t.mobilePopupPaddingSmall};\n      `;\n    },\n\n    rootMedium6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding-top: ${t.mobilePopupPaddingMedium};\n      `;\n    },\n\n    rootLarge6_1(t: Theme) {\n      return css`\n        ${rootBase6_1(t)};\n        padding-top: ${t.mobilePopupPaddingLarge};\n      `;\n    },\n\n    containerSmall6_1(t: Theme) {\n      return css`\n        ${containerBase6_1()};\n        padding: ${t.mobilePopupHeaderPaddingSmall};\n      `;\n    },\n\n    containerMedium6_1(t: Theme) {\n      return css`\n        ${containerBase6_1()};\n        padding: ${t.mobilePopupHeaderPaddingMedium};\n      `;\n    },\n\n    containerLarge6_1(t: Theme) {\n      return css`\n        ${containerBase6_1()};\n        padding: ${t.mobilePopupHeaderPaddingLarge};\n      `;\n    },\n\n    caption(t: Theme) {\n      return css`\n        font-size: ${t.mobilePopupHeaderFontSize};\n        line-height: ${t.mobilePopupHeaderLineHeight};\n        font-weight: ${t.mobilePopupHeaderFontWeight};\n        color: ${t.textColorDefault};\n      `;\n    },\n\n    captionWithChildren() {\n      return css`\n        padding-bottom: 8px;\n      `;\n    },\n  };\n});\n"]}

package/internal/Popup/Popup.d.ts

@@ -56,9 +56,8 @@ export interface PopupProps extends Omit<CommonProps, 'children'>, PopupHandlerP
      */
     pinOffset?: number;
     /**
-     * Сторона пина без учёта границы.
-     * Пин представляет собой равносторонний треугольник, высота от попапа
-     * до "носика" пина будет соответствовать формуле (size* √3)/2
+     * Высота пина в px. Ширина основания = 2 × size (для top/bottom).
+     * Значения по размерам: small 8, medium 10, large 12.
      */
     pinSize?: number;
     /**
@@ -116,6 +115,7 @@ interface PopupLocation {
     };
     position: PopupPositionsType;
     isFullyVisible: boolean;
+    pinOffset: number;
 }
 export interface PopupState {
     location: Nullable<PopupLocation>;
@@ -189,6 +189,12 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private tryReuseCurrentLocation;
     private tryGetFirstFullyVisibleLocation;
     private getFallbackLocation;
+    private getMobileVerticalFallbackLocation;
+    private buildLocationForPosition;
+    private getViewportSidePadding;
+    private getMobileMaxWidth;
+    private applyMobileViewportPadding;
+    private normalizeCoordinates;
     private pickBestFallbackPosition;
     private evaluateFallbackCandidate;
     private pickBestAreaCandidate;

package/internal/Popup/Popup.js

@@ -91,6 +91,7 @@ export var DUMMY_LOCATION = {
         left: -9999,
     },
     isFullyVisible: false,
+    pinOffset: 0,
 };
 export var PopupDataTids = {
     root: 'Popup__root',
@@ -190,7 +191,9 @@ var Popup = /** @class */ (function (_super) {
             _this.state.location !== null && _this.setState({ location: null });
         };
         _this.refPopupContentElement = function (element) {
-            _this.lastPopupContentElement = element;
+            if (element) {
+                _this.lastPopupContentElement = element;
+            }
         };
         _this.handleLayoutEvent = function () {
             if (!_this.state.location) {
@@ -208,7 +211,8 @@ var Popup = /** @class */ (function (_super) {
             if (location) {
                 (_b = (_a = _this.props).onPositionChange) === null || _b === void 0 ? void 0 : _b.call(_a, location.position, location.isFullyVisible);
             }
-            if (!_this.locationEquals(_this.state.location, location)) {
+            var stateChanged = !_this.locationEquals(_this.state.location, location);
+            if (stateChanged) {
                 _this.setState({ location: location });
             }
         };
@@ -358,7 +362,7 @@ var Popup = /** @class */ (function (_super) {
         var relativeShift = this.getRelativeShift();
         var direction = PopupHelper.getPositionObject(location.position).direction;
         var rootStyle = {
-            maxWidth: maxWidth,
+            maxWidth: this.getMobileMaxWidth(maxWidth),
             top: location.coordinates.top + relativeShift.top,
             left: location.coordinates.left + relativeShift.left,
         };
@@ -375,7 +379,9 @@ var Popup = /** @class */ (function (_super) {
                             _b[_this.styles.transitionExit()] = state === 'exiting',
                             _b)))), style: rootStyle, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave },
                     _this.content(children),
-                    (!_this.isMobileLayout || _this.props.withoutMobile) && _this.renderPin(location.position))));
+                    location !== DUMMY_LOCATION &&
+                        (!_this.isMobileLayout || _this.props.withoutMobile) &&
+                        _this.renderPin(location.position))));
         }));
     };
     Popup.prototype.renderChildren = function () {
@@ -407,7 +413,10 @@ var Popup = /** @class */ (function (_super) {
         if (isNullable(x) || isNullable(y)) {
             return false;
         }
-        return (x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position);
+        return (x.coordinates.left === y.coordinates.left &&
+            x.coordinates.top === y.coordinates.top &&
+            x.position === y.position &&
+            x.pinOffset === y.pinOffset);
     };
     Popup.prototype.getOrderedPositions = function () {
         var positions = this.props.positions ? this.props.positions : PopupPinnablePositions;
@@ -452,8 +461,16 @@ var Popup = /** @class */ (function (_super) {
         }
         var position = location.position;
         var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-        var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject);
-        var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates, this.globalObject);
+        var locationAfterPadding = this.applyMobileViewportPadding({
+            coordinates: coordinates,
+            position: position,
+            isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject),
+            pinOffset: 0,
+        }, popupRect);
+        var isFullyVisible = locationAfterPadding.isFullyVisible;
+        var canBecomeVisible = !this.isMobileLayout &&
+            !isFullyVisible &&
+            PopupHelper.canBecomeFullyVisible(position, coordinates, this.globalObject);
         var shouldReuseCurrentLocation = 
         // если нужно сохранить первоначальную позицию и Попап целиком
         // находится в пределах вьюпорта (или может быть проскроллен в него)
@@ -464,27 +481,108 @@ var Popup = /** @class */ (function (_super) {
         if (!shouldReuseCurrentLocation) {
             return null;
         }
-        return { coordinates: coordinates, position: position, isFullyVisible: true };
+        return __assign(__assign({}, locationAfterPadding), { isFullyVisible: isFullyVisible || canBecomeVisible });
     };
     Popup.prototype.tryGetFirstFullyVisibleLocation = function (positions, anchorRect, popupRect) {
         for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
             var position = positions_1[_i];
             var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-            if (PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject)) {
-                return { coordinates: coordinates, position: position, isFullyVisible: true };
+            var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject);
+            if (!this.isMobileLayout && isFullyVisible) {
+                return { coordinates: coordinates, position: position, isFullyVisible: true, pinOffset: 0 };
+            }
+            if (this.isMobileLayout) {
+                var location_1 = this.buildLocationForPosition(position, anchorRect, popupRect);
+                if (location_1.isFullyVisible) {
+                    return location_1;
+                }
             }
         }
         return null;
     };
     Popup.prototype.getFallbackLocation = function (positions, anchorRect, popupRect, tryBestFallbackPosition) {
+        if (this.isMobileLayout) {
+            var mobileFallback = this.getMobileVerticalFallbackLocation(positions, anchorRect, popupRect);
+            if (mobileFallback) {
+                return mobileFallback;
+            }
+        }
         var position = tryBestFallbackPosition
             ? this.pickBestFallbackPosition(positions, anchorRect, popupRect)
             : positions[0];
         var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-        return {
+        return this.applyMobileViewportPadding({
             coordinates: coordinates,
             position: position,
             isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject),
+            pinOffset: 0,
+        }, popupRect);
+    };
+    Popup.prototype.getMobileVerticalFallbackLocation = function (positions, anchorRect, popupRect) {
+        var _this = this;
+        var _a;
+        var isFullyVisible = function (position) {
+            return _this.buildLocationForPosition(position, anchorRect, popupRect).isFullyVisible;
+        };
+        var topPosition = positions.find(function (position) { return position.startsWith('top') && isFullyVisible(position); });
+        if (topPosition) {
+            return this.buildLocationForPosition(topPosition, anchorRect, popupRect);
+        }
+        var bottomPosition = positions.find(function (position) { return position.startsWith('bottom') && isFullyVisible(position); });
+        if (bottomPosition) {
+            return this.buildLocationForPosition(bottomPosition, anchorRect, popupRect);
+        }
+        var fallbackPosition = (_a = positions.find(function (position) { return position.startsWith('bottom'); })) !== null && _a !== void 0 ? _a : positions.find(function (position) { return position.startsWith('top'); });
+        if (!fallbackPosition) {
+            return null;
+        }
+        return this.buildLocationForPosition(fallbackPosition, anchorRect, popupRect);
+    };
+    Popup.prototype.buildLocationForPosition = function (position, anchorRect, popupRect) {
+        var coordinates = this.getCoordinates(anchorRect, popupRect, position);
+        return this.applyMobileViewportPadding({
+            coordinates: coordinates,
+            position: position,
+            isFullyVisible: false,
+            pinOffset: 0,
+        }, popupRect);
+    };
+    Popup.prototype.getViewportSidePadding = function () {
+        return PopupHelper.getPopupViewportSidePadding(this.theme, this.isMobileLayout);
+    };
+    Popup.prototype.getMobileMaxWidth = function (maxWidth) {
+        var viewportSidePadding = this.getViewportSidePadding();
+        if (this.isMobileLayout && isNullable(maxWidth) && viewportSidePadding > 0) {
+            return "calc(100dvw - ".concat(viewportSidePadding * 2, "px)");
+        }
+        return maxWidth;
+    };
+    Popup.prototype.applyMobileViewportPadding = function (location, popupRect) {
+        if (!this.isMobileLayout || this.getViewportSidePadding() === 0) {
+            return location;
+        }
+        var _a = this.normalizeCoordinates(location.coordinates, popupRect), coordinates = _a.coordinates, pinOffset = _a.pinOffset;
+        return __assign(__assign({}, location), { coordinates: coordinates, pinOffset: pinOffset, isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject) });
+    };
+    Popup.prototype.normalizeCoordinates = function (coordinates, popupRect) {
+        var viewportSidePadding = this.getViewportSidePadding();
+        var normalizedLeft = coordinates.left;
+        var pinOffset = 0;
+        var viewport = PopupHelper.getViewportAbsoluteRect(this.globalObject);
+        var popupRight = normalizedLeft + popupRect.width;
+        var distanceToLeft = normalizedLeft - viewport.left;
+        var distanceToRight = viewport.left + viewport.width - popupRight;
+        if (distanceToLeft < viewportSidePadding) {
+            normalizedLeft = viewport.left + viewportSidePadding;
+            pinOffset = normalizedLeft - coordinates.left;
+        }
+        else if (distanceToRight < viewportSidePadding) {
+            normalizedLeft = viewport.left + viewport.width - viewportSidePadding - popupRect.width;
+            pinOffset = normalizedLeft - coordinates.left;
+        }
+        return {
+            coordinates: __assign(__assign({}, coordinates), { left: Math.round(normalizedLeft) }),
+            pinOffset: pinOffset,
         };
     };
     Popup.prototype.pickBestFallbackPosition = function (positions, anchorRect, popupRect) {
@@ -578,7 +676,7 @@ var Popup = /** @class */ (function (_super) {
         }
         var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
         var pinSize = this.props.pinSize;
-        return Math.max(0, this.getPinOffset(position.align) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
+        return Math.max(0, this.getPinOffset(position.align, false) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
     };
     Popup.prototype.getCoordinates = function (anchorRect, popupRect, positionName) {
         var marginFromProps = this.props.margin;
@@ -619,19 +717,23 @@ var Popup = /** @class */ (function (_super) {
                 return getDefaultCoordinates();
         }
     };
-    Popup.prototype.getPinOffset = function (align) {
+    Popup.prototype.getPinOffset = function (align, useLocationPinOffset) {
+        var _a, _b;
+        if (useLocationPinOffset === void 0) { useLocationPinOffset = true; }
         var pinOffset = this.props.pinOffset;
         var defaultPinOffset = pinOffset || parseInt(this.theme.popupPinOffsetY);
+        var pinOffsetFromState = useLocationPinOffset && this.isMobileLayout ? ((_b = (_a = this.state.location) === null || _a === void 0 ? void 0 : _a.pinOffset) !== null && _b !== void 0 ? _b : 0) : 0;
         switch (align) {
             case 'top':
             case 'bottom':
                 return defaultPinOffset;
             case 'left':
+                return (pinOffset || parseInt(this.theme.popupPinOffsetX)) + pinOffsetFromState;
             case 'right':
-                return pinOffset || parseInt(this.theme.popupPinOffsetX);
+                return (pinOffset || parseInt(this.theme.popupPinOffsetX)) + pinOffsetFromState;
             case 'center':
             case 'middle':
-                return 0;
+                return -pinOffsetFromState;
             default:
                 warning(false, "Unexpected align '".concat(align, "'. Must be one of - 'top', 'bottom', 'left', 'right', 'center', 'middle'. Returning default value."));
                 return defaultPinOffset;