@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2dd5039746

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

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopupHeader.tsx"],"names":["React","cx","ThemeContext","jsStyles","MobilePopupHeader","rootClickHandler","e","stopPropagation","wrapperClickHandler","props","onClose","render","theme","renderMain","caption","children","withShadow","root","container","closeWrapper","closeHolder","isValidElement","childrenWithoutCaption","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;;AAGA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;;AAEA,SAASC,QAAT,QAAyB,4BAAzB;;;;;;;;AAQA,WAAaC,iBAAb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDUC,IAAAA,gBAhDV,GAgD6B,UAACC,CAAD,EAAyB;AAClDA,MAAAA,CAAC,CAACC,eAAF;AACD,KAlDH;;AAoDUC,IAAAA,mBApDV,GAoDgC,UAACF,CAAD,EAAyB;AACrD,YAAKG,KAAL,CAAWC,OAAX;AACD,KAtDH,+DAKSC,MALT,GAKE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAdH,QAgBUA,UAhBV,GAgBE,sBAAqB,qBACnB,kBAA0C,KAAKJ,KAA/C,CAAQK,OAAR,eAAQA,OAAR,CAAiBC,QAAjB,eAAiBA,QAAjB,CAA2BC,UAA3B,eAA2BA,UAA3B,CAEA,oBACE,6BACE,SAAS,EAAEf,EAAE,gBACVE,QAAQ,CAACc,IAAT,CAAc,KAAKL,KAAnB,CADU,IACkB,IADlB,MAEVT,QAAQ,CAACa,UAAT,CAAoB,KAAKJ,KAAzB,CAFU,IAEwBI,UAFxB,OADf,EAKE,OAAO,EAAE,KAAKX,gBALhB,iBAOE,6BAAK,SAAS,EAAEF,QAAQ,CAACe,SAAT,EAAhB,iBACE,6BAAK,SAAS,EAAEf,QAAQ,CAACgB,YAAT,EAAhB,EAAyC,OAAO,EAAE,KAAKX,mBAAvD,iBACE,6BAAK,SAAS,EAAEL,QAAQ,CAACiB,WAAT,EAAhB,GADF,CADF,EAIG,aAAApB,KAAK,CAACqB,cAAN,CAAqBN,QAArB,kBACC,6BAAK,SAAS,EAAEd,EAAE,kBAAIE,QAAQ,CAACmB,sBAAT,EAAJ,IAAwC,CAACR,OAAzC,QAAlB,IAAwEC,QAAxE,CALJ,EAOGD,OAAO,iBACN,6BACE,SAAS,EAAEb,EAAE,kBACVE,QAAQ,CAACW,OAAT,CAAiB,KAAKF,KAAtB,CADU,IACqB,IADrB,QADf,IAKGE,OALH,CARJ,CAPF,CADF,CA2BD,CA9CH,4BAAuCd,KAAK,CAACuB,SAA7C,EAAanB,iB,CACGoB,mB,GAAsB,kB","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../../lib/theming/Theme';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { jsStyles } from './MobilePopupHeader.styles';\n\ninterface MobilePopupHeaderProps {\n  caption?: string;\n  onClose: () => void;\n  withShadow?: boolean;\n}\n\nexport class MobilePopupHeader extends React.Component<MobilePopupHeaderProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private theme!: Theme;\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  private renderMain() {\n    const { caption, children, withShadow } = this.props;\n\n    return (\n      <div\n        className={cx({\n          [jsStyles.root(this.theme)]: true,\n          [jsStyles.withShadow(this.theme)]: withShadow,\n        })}\n        onClick={this.rootClickHandler}\n      >\n        <div className={jsStyles.container()}>\n          <div className={jsStyles.closeWrapper()} onClick={this.wrapperClickHandler}>\n            <div className={jsStyles.closeHolder()} />\n          </div>\n          {React.isValidElement(children) && (\n            <div className={cx({ [jsStyles.childrenWithoutCaption()]: !caption })}>{children}</div>\n          )}\n          {caption && (\n            <div\n              className={cx({\n                [jsStyles.caption(this.theme)]: true,\n              })}\n            >\n              {caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private rootClickHandler = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  private wrapperClickHandler = (e: React.MouseEvent) => {\n    this.props.onClose();\n  };\n}\n"]}
+{"version":3,"sources":["MobilePopupHeader.tsx"],"names":["React","isNonNullable","cx","ThemeContext","jsStyles","MobilePopupHeader","render","theme","renderMain","props","caption","children","root","rootWithoutContent","container","captionWithChildren","isValidElement","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,aAAT,QAA8B,oBAA9B;;AAEA,SAASC,EAAT,QAAmB,8BAAnB;AACA,SAASC,YAAT,QAA6B,mCAA7B;;AAEA,SAASC,QAAT,QAAyB,4BAAzB;;;;;;;;;AASA,WAAaC,iBAAb;;;;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAdH;;AAgBUA,EAAAA,UAhBV,GAgBE,sBAAqB;AACnB,sBAA8B,KAAKC,KAAnC,CAAQC,OAAR,eAAQA,OAAR,CAAiBC,QAAjB,eAAiBA,QAAjB;;AAEA;AACE;AACE,QAAA,SAAS,EAAET,EAAE;AACVE,QAAAA,QAAQ,CAACQ,IAAT,CAAc,KAAKL,KAAnB,CADU,IACkB,IADlB;AAEVH,QAAAA,QAAQ,CAACS,kBAAT,EAFU,IAEsB,CAACH,OAAD,IAAY,CAACC,QAFnC,OADf;;;AAME,mCAAK,SAAS,EAAEP,QAAQ,CAACU,SAAT,EAAhB;AACGJ,MAAAA,OAAO;AACN;AACE,QAAA,SAAS,EAAER,EAAE;AACVE,QAAAA,QAAQ,CAACM,OAAT,CAAiB,KAAKH,KAAtB,CADU,IACqB,IADrB;AAEVH,QAAAA,QAAQ,CAACW,mBAAT,EAFU,IAEuBd,aAAa,CAACU,QAAD,CAFpC,QADf;;;AAMGD,MAAAA,OANH,CAFJ;;;AAWG,mBAAAV,KAAK,CAACgB,cAAN,CAAqBL,QAArB,kBAAkC,iCAAMA,QAAN,CAXrC,CANF,CADF;;;;AAsBD,GAzCH,4BAAuCX,KAAK,CAACiB,SAA7C,EAAaZ,iB,CACGa,mB,GAAsB,kB","sourcesContent":["import React from 'react';\n\nimport { isNonNullable } from '../../../lib/utils';\nimport { Theme } from '../../../lib/theming/Theme';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { jsStyles } from './MobilePopupHeader.styles';\n\ninterface MobilePopupHeaderProps {\n  /**\n   * Заголовок шапки\n   */\n  caption?: string;\n}\n\nexport class MobilePopupHeader extends React.Component<MobilePopupHeaderProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private theme!: Theme;\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  private renderMain() {\n    const { caption, children } = this.props;\n\n    return (\n      <div\n        className={cx({\n          [jsStyles.root(this.theme)]: true,\n          [jsStyles.rootWithoutContent()]: !caption && !children,\n        })}\n      >\n        <div className={jsStyles.container()}>\n          {caption && (\n            <div\n              className={cx({\n                [jsStyles.caption(this.theme)]: true,\n                [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"]}

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

@@ -1,15 +1,14 @@
 import React from 'react';
 interface MobilePopupHeaderProps {
+    /**
+     * Заголовок шапки
+     */
     caption?: string;
-    onClose: () => void;
-    withShadow?: boolean;
 }
 export declare class MobilePopupHeader extends React.Component<MobilePopupHeaderProps> {
     static __KONTUR_REACT_UI__: string;
     private theme;
     render(): JSX.Element;
     private renderMain;
-    private rootClickHandler;
-    private wrapperClickHandler;
 }
 export {};

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

@@ -1,29 +1,23 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { css, memoizeStyle } from "../../../../lib/theming/Emotion";
 var styles = {
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      background: ", ";\n      padding: ", ";\n      border-radius: ", ";\n    "])), t.menuBgDefault, t.mobilePopupHeaderPadding, t.mobilePopupHeaderBorderRadius);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n      padding: ", ";\n    "])), t.mobilePopupHeaderPadding);
   },
-  withShadow: function withShadow(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.mobilePopupHeaderShadow);
+  rootWithoutContent: function rootWithoutContent() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: 8px 0 0 0;\n    "])));
   },
   container: function container() {
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-direction: column;\n    "])));
   },
   caption: function caption(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      justify-content: center;\n      padding-top: 12px;\n      padding-bottom: 12px;\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "])), t.mobilePopupHeaderFontSize, t.mobilePopupHeaderLineHeight, t.mobilePopupHeaderFontWeight, t.textColorDefault);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n      color: ", ";\n    "])), t.mobilePopupHeaderFontSize, t.mobilePopupHeaderLineHeight, t.mobilePopupHeaderFontWeight, t.textColorDefault);
   },
-  childrenWithoutCaption: function childrenWithoutCaption() {
+  captionWithChildren: function captionWithChildren() {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 8px;\n    "])));
-  },
-  closeWrapper: function closeWrapper() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: 24px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    "])));
-  },
-  closeHolder: function closeHolder() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background-color: rgba(0, 0, 0, 0.1);\n      height: 4px;\n      width: 10%;\n      border-radius: 4px;\n    "])));
   }
 };
 export var jsStyles = memoizeStyle(styles);

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

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopupHeader.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","mobilePopupHeaderPadding","mobilePopupHeaderBorderRadius","withShadow","mobilePopupHeaderShadow","container","caption","mobilePopupHeaderFontSize","mobilePopupHeaderLineHeight","mobilePopupHeaderFontWeight","textColorDefault","childrenWithoutCaption","closeWrapper","closeHolder","jsStyles"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,8BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;AAEgBI,IAAAA,CAAC,CAACC,aAFlB;AAGaD,IAAAA,CAAC,CAACE,wBAHf;AAImBF,IAAAA,CAAC,CAACG,6BAJrB;;AAMD,GARY;;AAUbC,EAAAA,UAVa,sBAUFJ,CAVE,EAUQ;AACnB,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACK,uBADlB;;AAGD,GAdY;;AAgBbC,EAAAA,SAhBa,uBAgBD;AACV,WAAOV,GAAP;;;;AAID,GArBY;;AAuBbW,EAAAA,OAvBa,mBAuBLP,CAvBK,EAuBK;AAChB,WAAOJ,GAAP;;;;;AAKeI,IAAAA,CAAC,CAACQ,yBALjB;AAMiBR,IAAAA,CAAC,CAACS,2BANnB;AAOiBT,IAAAA,CAAC,CAACU,2BAPnB;AAQWV,IAAAA,CAAC,CAACW,gBARb;;AAUD,GAlCY;;AAoCbC,EAAAA,sBApCa,oCAoCY;AACvB,WAAOhB,GAAP;;;AAGD,GAxCY;;AA0CbiB,EAAAA,YA1Ca,0BA0CE;AACb,WAAOjB,GAAP;;;;;;AAMD,GAjDY;;AAmDbkB,EAAAA,WAnDa,yBAmDC;AACZ,WAAOlB,GAAP;;;;;;AAMD,GA1DY,EAAf;;;AA6DA,OAAO,IAAMmB,QAAQ,GAAGlB,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      position: relative;\n      background: ${t.menuBgDefault};\n      padding: ${t.mobilePopupHeaderPadding};\n      border-radius: ${t.mobilePopupHeaderBorderRadius};\n    `;\n  },\n\n  withShadow(t: Theme) {\n    return css`\n      box-shadow: ${t.mobilePopupHeaderShadow};\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      display: flex;\n      justify-content: center;\n      padding-top: 12px;\n      padding-bottom: 12px;\n      font-size: ${t.mobilePopupHeaderFontSize};\n      line-height: ${t.mobilePopupHeaderLineHeight};\n      font-weight: ${t.mobilePopupHeaderFontWeight};\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  childrenWithoutCaption() {\n    return css`\n      padding-bottom: 8px;\n    `;\n  },\n\n  closeWrapper() {\n    return css`\n      height: 24px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    `;\n  },\n\n  closeHolder() {\n    return css`\n      background-color: rgba(0, 0, 0, 0.1);\n      height: 4px;\n      width: 10%;\n      border-radius: 4px;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}
+{"version":3,"sources":["MobilePopupHeader.styles.ts"],"names":["css","memoizeStyle","styles","root","t","mobilePopupHeaderPadding","rootWithoutContent","container","caption","mobilePopupHeaderFontSize","mobilePopupHeaderLineHeight","mobilePopupHeaderFontWeight","textColorDefault","captionWithChildren","jsStyles"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,8BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;AAEaI,IAAAA,CAAC,CAACC,wBAFf;;AAID,GANY;;AAQbC,EAAAA,kBARa,gCAQQ;AACnB,WAAON,GAAP;;;AAGD,GAZY;;AAcbO,EAAAA,SAda,uBAcD;AACV,WAAOP,GAAP;;;;AAID,GAnBY;;AAqBbQ,EAAAA,OArBa,mBAqBLJ,CArBK,EAqBK;AAChB,WAAOJ,GAAP;AACeI,IAAAA,CAAC,CAACK,yBADjB;AAEiBL,IAAAA,CAAC,CAACM,2BAFnB;AAGiBN,IAAAA,CAAC,CAACO,2BAHnB;AAIWP,IAAAA,CAAC,CAACQ,gBAJb;;AAMD,GA5BY;;AA8BbC,EAAAA,mBA9Ba,iCA8BS;AACpB,WAAOb,GAAP;;;AAGD,GAlCY,EAAf;;;AAqCA,OAAO,IAAMc,QAAQ,GAAGb,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../../lib/theming/Emotion';\nimport { Theme } from '../../../lib/theming/Theme';\n\nconst styles = {\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\nexport const jsStyles = memoizeStyle(styles);\n"]}

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

@@ -1,10 +1,8 @@
 import { Theme } from '../../../lib/theming/Theme';
 export declare const jsStyles: {
     root(t: Theme): string;
-    withShadow(t: Theme): string;
+    rootWithoutContent(): string;
     container(): string;
     caption(t: Theme): string;
-    childrenWithoutCaption(): string;
-    closeWrapper(): string;
-    closeHolder(): string;
+    captionWithChildren(): string;
 };

package/internal/PerformanceMetrics/PerformanceMetrics/PerformanceMetrics.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["React","ReactDOM","Button","Spinner","PANEL_WRAPPER_STYLES","width","display","verticalAlign","PerformanceMetrics","props","padding","position","componentsA","componentsB","PerformanceMetricsPanel","state","mounted","setContainerRef","element","container","toggleMountedState","setState","render","lineHeight","title","marginBottom","componentDidMount","component","componentDidUpdate","unmountComponentAtNode","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,IAAMC,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOA,OAAO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,iCAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,iCAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,wBAAC,OAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,iCAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,iCAAK,KAAK,EAAEN,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,iCAAK,KAAK,EAAER,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACI,WAA3D,GADF,CAJF,CAJF,CADF;;;;;AAeD,C;;;;;;;;;;AAUKC,uB;AACGC,IAAAA,K,GAAQ;AACbC,MAAAA,OAAO,EAAE,KADI,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCPC,IAAAA,e,GAAkB,UAACC,OAAD,EAAoC;AAC5D,YAAKC,SAAL,GAAiBD,OAAjB;AACD,K;;AAEOE,IAAAA,kB,GAAqB,YAAM;AACjC,YAAKC,QAAL,CAAc;AACZL,QAAAA,OAAO,EAAE,CAAC,MAAKD,KAAL,CAAWC,OADT,EAAd;;AAGD,K,qEAvCMM,M,GAAP,kBAAgB,CACd,oBACE,8CACE,4BAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,eAEE,6BAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,eAOE,6BAAK,GAAG,EAAE,KAAKC,eAAf,GAPF,CADF,CAWD,C,QAEMS,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKG,SAA/B,EAA0C,CACxClB,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKR,SAA3C,EACD,CACF,C,QAEMS,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKT,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKJ,KAAL,CAAWC,OAAf,EAAwB,CACtBf,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKR,SAA3C,EACD,CAFD,MAEO,CACLlB,QAAQ,CAAC4B,sBAAT,CAAgC,KAAKV,SAArC,EACD,CACF,C,kCAnCmCnB,KAAK,CAAC8B,S","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components/Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { Spinner } from '../../components/Spinner';\n\nconst PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlign: 'top' };\n\ninterface PerformanceMetricsProps {\n  componentsA: React.ReactElement<any>;\n  componentsB: React.ReactElement<any>;\n}\n\nexport function PerformanceMetrics(props: PerformanceMetricsProps) {\n  return (\n    <div style={{ padding: 10, width: 1200 }}>\n      <div style={{ position: 'absolute' }}>\n        <Spinner type={'mini'} caption={''} />\n      </div>\n      <div style={{ padding: 10 }}>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case A'} component={props.componentsA} />\n        </div>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case B'} component={props.componentsB} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\ninterface PerformanceMetricsPanelProps {\n  title: string;\n  component: React.ReactElement<any>;\n}\ninterface PerformanceMetricsPanelState {\n  mounted: boolean;\n}\n\nclass PerformanceMetricsPanel extends React.Component<PerformanceMetricsPanelProps, PerformanceMetricsPanelState> {\n  public state = {\n    mounted: false,\n  };\n  private container: Nullable<HTMLElement>;\n\n  public render() {\n    return (\n      <div>\n        <h1 style={{ lineHeight: '2em' }}>{this.props.title}</h1>\n        <div style={{ marginBottom: 10 }}>\n          <Button onClick={this.toggleMountedState} size={'small'}>\n            {this.state.mounted ? 'Unmount' : 'Mount'}\n          </Button>\n        </div>\n        <div ref={this.setContainerRef} />\n      </div>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.state.mounted && this.container) {\n      ReactDOM.render(this.props.component, this.container);\n    }\n  }\n\n  public componentDidUpdate(): void {\n    if (!this.container) {\n      return;\n    }\n    if (this.state.mounted) {\n      ReactDOM.render(this.props.component, this.container);\n    } else {\n      ReactDOM.unmountComponentAtNode(this.container);\n    }\n  }\n\n  private setContainerRef = (element: Nullable<HTMLElement>) => {\n    this.container = element;\n  };\n\n  private toggleMountedState = () => {\n    this.setState({\n      mounted: !this.state.mounted,\n    });\n  };\n}\n"]}
+{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["React","ReactDOM","Button","Spinner","PANEL_WRAPPER_STYLES","width","display","verticalAlign","PerformanceMetrics","props","padding","position","componentsA","componentsB","PerformanceMetricsPanel","state","mounted","setContainerRef","element","container","toggleMountedState","setState","render","lineHeight","title","marginBottom","componentDidMount","component","componentDidUpdate","unmountComponentAtNode","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;;AAEA,SAASC,OAAT,QAAwB,0BAAxB;;AAEA,IAAMC,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOA,OAAO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,iCAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,iCAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,wBAAC,OAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,iCAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,iCAAK,KAAK,EAAEN,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,iCAAK,KAAK,EAAER,oBAAZ;AACE,wBAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACI,WAA3D,GADF,CAJF,CAJF,CADF;;;;;AAeD,C;;;;;;;;;;AAUKC,uB;AACGC,IAAAA,K,GAAsC;AAC3CC,MAAAA,OAAO,EAAE,KADkC,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCrCC,IAAAA,e,GAAkB,UAACC,OAAD,EAAoC;AAC5D,YAAKC,SAAL,GAAiBD,OAAjB;AACD,K;;AAEOE,IAAAA,kB,GAAqB,YAAM;AACjC,YAAKC,QAAL,CAAc;AACZL,QAAAA,OAAO,EAAE,CAAC,MAAKD,KAAL,CAAWC,OADT,EAAd;;AAGD,K,qEAvCMM,M,GAAP,kBAAgB,CACd,oBACE,8CACE,4BAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,eAEE,6BAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,iBACE,oBAAC,MAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,eAOE,6BAAK,GAAG,EAAE,KAAKC,eAAf,GAPF,CADF,CAWD,C,QAEMS,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKG,SAA/B,EAA0C,CACxClB,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKR,SAA3C,EACD,CACF,C,QAEMS,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKT,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKJ,KAAL,CAAWC,OAAf,EAAwB,CACtBf,QAAQ,CAACqB,MAAT,CAAgB,KAAKb,KAAL,CAAWkB,SAA3B,EAAsC,KAAKR,SAA3C,EACD,CAFD,MAEO,CACLlB,QAAQ,CAAC4B,sBAAT,CAAgC,KAAKV,SAArC,EACD,CACF,C,kCAnCmCnB,KAAK,CAAC8B,S","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components/Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { Spinner } from '../../components/Spinner';\n\nconst PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlign: 'top' };\n\ninterface PerformanceMetricsProps {\n  componentsA: React.ReactElement<any>;\n  componentsB: React.ReactElement<any>;\n}\n\nexport function PerformanceMetrics(props: PerformanceMetricsProps) {\n  return (\n    <div style={{ padding: 10, width: 1200 }}>\n      <div style={{ position: 'absolute' }}>\n        <Spinner type={'mini'} caption={''} />\n      </div>\n      <div style={{ padding: 10 }}>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case A'} component={props.componentsA} />\n        </div>\n        <div style={PANEL_WRAPPER_STYLES}>\n          <PerformanceMetricsPanel title={'Case B'} component={props.componentsB} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\ninterface PerformanceMetricsPanelProps {\n  title: string;\n  component: React.ReactElement<any>;\n}\ninterface PerformanceMetricsPanelState {\n  mounted: boolean;\n}\n\nclass PerformanceMetricsPanel extends React.Component<PerformanceMetricsPanelProps, PerformanceMetricsPanelState> {\n  public state: PerformanceMetricsPanelState = {\n    mounted: false,\n  };\n  private container: Nullable<HTMLElement>;\n\n  public render() {\n    return (\n      <div>\n        <h1 style={{ lineHeight: '2em' }}>{this.props.title}</h1>\n        <div style={{ marginBottom: 10 }}>\n          <Button onClick={this.toggleMountedState} size={'small'}>\n            {this.state.mounted ? 'Unmount' : 'Mount'}\n          </Button>\n        </div>\n        <div ref={this.setContainerRef} />\n      </div>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.state.mounted && this.container) {\n      ReactDOM.render(this.props.component, this.container);\n    }\n  }\n\n  public componentDidUpdate(): void {\n    if (!this.container) {\n      return;\n    }\n    if (this.state.mounted) {\n      ReactDOM.render(this.props.component, this.container);\n    } else {\n      ReactDOM.unmountComponentAtNode(this.container);\n    }\n  }\n\n  private setContainerRef = (element: Nullable<HTMLElement>) => {\n    this.container = element;\n  };\n\n  private toggleMountedState = () => {\n    this.setState({\n      mounted: !this.state.mounted,\n    });\n  };\n}\n"]}

package/internal/Popup/Popup/Popup.js

@@ -48,13 +48,14 @@ import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import raf from 'raf';
 import warning from 'warning';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
 import { isFunction, isNonNullable, isNullable, isRefableElement } from "../../../lib/utils";
 import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { isElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
@@ -63,6 +64,7 @@ import { MobilePopup } from "../../MobilePopup";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { isInstanceWithAnchorElement } from "../../../lib/InstanceWithAnchorElement";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
 import { styles } from "../Popup.styles";
@@ -73,7 +75,7 @@ var TRANSITION_TIMEOUT = {
 };
 export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
 export var DefaultPosition = PopupPositions[0];
-var DUMMY_LOCATION = {
+export var DUMMY_LOCATION = {
   position: DefaultPosition,
   coordinates: {
     top: -9999,
@@ -96,11 +98,13 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Popup.defaultProps);
     _this.state = {
       location: _this.props.opened ? DUMMY_LOCATION : null
     };
     _this.locationUpdateId = null;
     _this.refForTransition = /*#__PURE__*/React.createRef();
+    _this.hasAnchorElementListeners = false;
     _this.anchorElement = null;
 
     _this.updateAnchorElement = function (instance) {
@@ -148,16 +152,18 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
     _this.calculateWidth = function (width) {
       if (typeof width === 'string' && width.includes('%')) {
-        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+        var anchorWidth = Math.floor(getDOMRect(_this.anchorElement).width);
+        return _this.anchorElement ? anchorWidth * parseFloat(width) / 100 : 0;
       }
 
       return width;
     };
 
     _this.content = function (children) {
-      var _this$props = _this.props,
-          backgroundColor = _this$props.backgroundColor,
-          width = _this$props.width;
+      var backgroundColor = _this.props.backgroundColor;
+
+      var width = _this.getProps().width;
+
       return /*#__PURE__*/React.createElement("div", {
         className: styles.content(_this.theme),
         "data-tid": PopupDataTids.content,
@@ -201,6 +207,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
       var location = _this.getLocation(popupElement, _this.state.location);
 
+      if (location) {
+        _this.props.onPositionChange == null ? void 0 : _this.props.onPositionChange(location == null ? void 0 : location.position);
+      }
+
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({
           location: location
@@ -216,6 +226,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   _proto.componentDidMount = function componentDidMount() {
     this.updateLocation();
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+
+    if (!this.hasAnchorElementListeners) {
+      this.addEventListeners(this.anchorElement);
+    }
   };
 
   Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
@@ -263,7 +277,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.cancelDelayedUpdateLocation();
-    this.removeEventListeners(this.anchorElement);
+
+    if (this.hasAnchorElementListeners) {
+      this.removeEventListeners(this.anchorElement);
+    }
 
     if (this.layoutEventsToken) {
       this.layoutEventsToken.remove();
@@ -298,12 +315,11 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     var _this3 = this;
 
     var location = this.state.location;
-    var _this$props2 = this.props,
-        anchorElement = _this$props2.anchorElement,
-        useWrapper = _this$props2.useWrapper;
+    var anchorElement = this.props.anchorElement;
+    var useWrapper = this.getProps().useWrapper;
     var anchor = null;
 
-    if (isHTMLElement(anchorElement)) {
+    if (isElement(anchorElement)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
       anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
@@ -326,7 +342,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     // which should be called within updateAnchorElement
     // in the case when the anchor is not refable
 
-    var canGetAnchorNode = !!anchorWithRef || isHTMLElement(anchorElement);
+    var canGetAnchorNode = !!anchorWithRef || isElement(anchorElement);
     return /*#__PURE__*/React.createElement(RenderContainer, {
       anchor: anchorWithRef || anchor,
       ref: canGetAnchorNode ? null : this.updateAnchorElement
@@ -334,34 +350,45 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.addEventListeners = function addEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.addEventListener('mouseenter', this.handleMouseEnter);
-      element.addEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isElement(element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.addEventListener('click', this.handleClick);
       element.addEventListener('focusin', this.handleFocus);
       element.addEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = true;
     }
   };
 
   _proto.removeEventListeners = function removeEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.removeEventListener('mouseenter', this.handleMouseEnter);
-      element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isElement(element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.removeEventListener('click', this.handleClick);
       element.removeEventListener('focusin', this.handleFocus);
       element.removeEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = false;
     }
   };
 
   _proto.renderContent = function renderContent(location) {
     var _this4 = this;
 
-    var _this$props3 = this.props,
-        disableAnimations = _this$props3.disableAnimations,
-        maxWidth = _this$props3.maxWidth,
-        hasShadow = _this$props3.hasShadow,
-        ignoreHover = _this$props3.ignoreHover,
-        opened = _this$props3.opened;
+    var _this$props = this.props,
+        maxWidth = _this$props.maxWidth,
+        opened = _this$props.opened;
+
+    var _this$getProps = this.getProps(),
+        hasShadow = _this$getProps.hasShadow,
+        disableAnimations = _this$getProps.disableAnimations,
+        ignoreHover = _this$getProps.ignoreHover;
+
     var children = this.renderChildren();
 
     var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
@@ -395,7 +422,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
         style: rootStyle,
         onMouseEnter: _this4.handleMouseEnter,
         onMouseLeave: _this4.handleMouseLeave
-      }, _this4.content(children), !_this4.isMobileLayout && _this4.renderPin(location.position)));
+      }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
     });
   };
 
@@ -411,13 +438,17 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     */
     var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
     var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
-    var _this$props4 = this.props,
-        pinSize = _this$props4.pinSize,
-        hasShadow = _this$props4.hasShadow,
-        backgroundColor = _this$props4.backgroundColor,
-        borderColor = _this$props4.borderColor;
+    var _this$props2 = this.props,
+        pinSize = _this$props2.pinSize,
+        backgroundColor = _this$props2.backgroundColor,
+        borderColor = _this$props2.borderColor;
+
+    var _this$getProps2 = this.getProps(),
+        hasShadow = _this$getProps2.hasShadow,
+        hasPin = _this$getProps2.hasPin;
+
     var position = PopupHelper.getPositionObject(positionName);
-    return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
+    return hasPin && /*#__PURE__*/React.createElement(PopupPin, {
       popupElement: this.lastPopupElement,
       popupPosition: positionName,
       size: pinSize || parseInt(this.theme.popupPinSize),
@@ -459,13 +490,13 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.getLocation = function getLocation(popupElement, location) {
-    var _this$props5 = this.props,
-        positions = _this$props5.positions,
-        tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+    var _this$props3 = this.props,
+        positions = _this$props3.positions,
+        tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
-    warning(anchorElement && isHTMLElement(anchorElement), 'Anchor element is not defined or not instance of HTMLElement');
+    warning(anchorElement && isElement(anchorElement), 'Anchor element is not defined or not instance of Element');
 
-    if (!(anchorElement && isHTMLElement(anchorElement))) {
+    if (!(anchorElement && isElement(anchorElement))) {
       return location;
     }
 
@@ -514,7 +545,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.props.hasPin || /center|middle/.test(position.align)) {
+    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
       return 0;
     }
 
@@ -527,7 +558,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     var marginFromProps = this.props.margin;
     var margin = isNonNullable(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;
     var position = PopupHelper.getPositionObject(positionName);
-    var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+    var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
     switch (position.direction) {
       case 'top':