@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/cjs/internal/NativeDateInput/utils.js

@@ -0,0 +1,49 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.upMonthOfShape = exports.getShapeFromNativeDate = exports.getNativeDateFromShape = exports.getDateForNative = exports.getDateForComponent = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+
+var getDateForNative = function getDateForNative(componentDate) {
+  if (!componentDate) {
+    return undefined;
+  }
+
+  var splittedDate = componentDate.split('.');
+
+  return splittedDate[2] + "-" + splittedDate[1] + "-" + splittedDate[0];
+};exports.getDateForNative = getDateForNative;
+
+var getDateForComponent = function getDateForComponent(nativeDate) {
+  if (!nativeDate) {
+    return '';
+  }
+
+  var splittedDate = nativeDate.split('-');
+
+  return splittedDate[2] + "." + splittedDate[1] + "." + splittedDate[0];
+};exports.getDateForComponent = getDateForComponent;
+
+var getNativeDateFromShape = function getNativeDateFromShape(componentDate) {
+  if (!componentDate) {
+    return undefined;
+  }
+  var _map = [componentDate.date, componentDate.month, componentDate.year].map(function (x) {return x.toString();}),date = _map[0],month = _map[1],year = _map[2];
+
+  return year.padStart(4, '0') + "-" + month.padStart(2, '0') + "-" + date.padStart(2, '0');
+};exports.getNativeDateFromShape = getNativeDateFromShape;
+
+var upMonthOfShape = function upMonthOfShape(DateShape) {
+  if (!DateShape) {
+    return undefined;
+  }
+
+  return (0, _extends2.default)({}, DateShape, { month: DateShape.month + 1 });
+};exports.upMonthOfShape = upMonthOfShape;
+
+var getShapeFromNativeDate = function getShapeFromNativeDate(nativeDate) {
+  if (!nativeDate) {
+    return undefined;
+  }
+
+  var splittedDate = nativeDate.split('-').map(function (date) {return Number(date);});
+
+  return { year: splittedDate[0], month: splittedDate[1], date: splittedDate[2] };
+};exports.getShapeFromNativeDate = getShapeFromNativeDate;

package/cjs/internal/NativeDateInput/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"names":["getDateForNative","componentDate","undefined","splittedDate","split","getDateForComponent","nativeDate","getNativeDateFromShape","date","month","year","map","x","toString","padStart","upMonthOfShape","DateShape","getShapeFromNativeDate","Number"],"mappings":";;;AAGO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,aAAD,EAAqC;AACnE,MAAI,CAACA,aAAL,EAAoB;AAClB,WAAOC,SAAP;AACD;;AAED,MAAMC,YAAY,GAAGF,aAAa,CAACG,KAAd,CAAoB,GAApB,CAArB;;AAEA,SAAUD,YAAY,CAAC,CAAD,CAAtB,SAA6BA,YAAY,CAAC,CAAD,CAAzC,SAAgDA,YAAY,CAAC,CAAD,CAA5D;AACD,CARM,C;;AAUA,IAAME,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,UAAD,EAAkC;AACnE,MAAI,CAACA,UAAL,EAAiB;AACf,WAAO,EAAP;AACD;;AAED,MAAMH,YAAY,GAAGG,UAAU,CAACF,KAAX,CAAiB,GAAjB,CAArB;;AAEA,SAAUD,YAAY,CAAC,CAAD,CAAtB,SAA6BA,YAAY,CAAC,CAAD,CAAzC,SAAgDA,YAAY,CAAC,CAAD,CAA5D;AACD,CARM,C;;AAUA,IAAMI,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACN,aAAD,EAAyD;AAC7F,MAAI,CAACA,aAAL,EAAoB;AAClB,WAAOC,SAAP;AACD;AACD,aAA4B,CAACD,aAAa,CAACO,IAAf,EAAqBP,aAAa,CAACQ,KAAnC,EAA0CR,aAAa,CAACS,IAAxD,EAA8DC,GAA9D,CAAkE,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAAlE,CAA5B,CAAOL,IAAP,WAAaC,KAAb,WAAoBC,IAApB;;AAEA,SAAUA,IAAI,CAACI,QAAL,CAAc,CAAd,EAAiB,GAAjB,CAAV,SAAmCL,KAAK,CAACK,QAAN,CAAe,CAAf,EAAkB,GAAlB,CAAnC,SAA6DN,IAAI,CAACM,QAAL,CAAc,CAAd,EAAiB,GAAjB,CAA7D;AACD,CAPM,C;;AASA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,SAAD,EAA6E;AACzG,MAAI,CAACA,SAAL,EAAgB;AACd,WAAOd,SAAP;AACD;;AAED,oCAAYc,SAAZ,IAAuBP,KAAK,EAAEO,SAAS,CAACP,KAAV,GAAkB,CAAhD;AACD,CANM,C;;AAQA,IAAMQ,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACX,UAAD,EAAiE;AACrG,MAAI,CAACA,UAAL,EAAiB;AACf,WAAOJ,SAAP;AACD;;AAED,MAAMC,YAAY,GAAGG,UAAU,CAACF,KAAX,CAAiB,GAAjB,EAAsBO,GAAtB,CAA0B,UAACH,IAAD,UAAUU,MAAM,CAACV,IAAD,CAAhB,EAA1B,CAArB;;AAEA,SAAO,EAAEE,IAAI,EAAEP,YAAY,CAAC,CAAD,CAApB,EAAyBM,KAAK,EAAEN,YAAY,CAAC,CAAD,CAA5C,EAAiDK,IAAI,EAAEL,YAAY,CAAC,CAAD,CAAnE,EAAP;AACD,CARM,C","sourcesContent":["import { Nullable } from '../../typings/utility-types';\nimport { CalendarDateShape } from '../Calendar';\n\nexport const getDateForNative = (componentDate: Nullable<string>) => {\n  if (!componentDate) {\n    return undefined;\n  }\n\n  const splittedDate = componentDate.split('.');\n\n  return `${splittedDate[2]}-${splittedDate[1]}-${splittedDate[0]}`;\n};\n\nexport const getDateForComponent = (nativeDate: Nullable<string>) => {\n  if (!nativeDate) {\n    return '';\n  }\n\n  const splittedDate = nativeDate.split('-');\n\n  return `${splittedDate[2]}.${splittedDate[1]}.${splittedDate[0]}`;\n};\n\nexport const getNativeDateFromShape = (componentDate: CalendarDateShape | undefined | null) => {\n  if (!componentDate) {\n    return undefined;\n  }\n  const [date, month, year] = [componentDate.date, componentDate.month, componentDate.year].map((x) => x.toString());\n\n  return `${year.padStart(4, '0')}-${month.padStart(2, '0')}-${date.padStart(2, '0')}`;\n};\n\nexport const upMonthOfShape = (DateShape: CalendarDateShape | undefined): CalendarDateShape | undefined => {\n  if (!DateShape) {\n    return undefined;\n  }\n\n  return { ...DateShape, month: DateShape.month + 1 };\n};\n\nexport const getShapeFromNativeDate = (nativeDate: Nullable<string>): CalendarDateShape | undefined => {\n  if (!nativeDate) {\n    return undefined;\n  }\n\n  const splittedDate = nativeDate.split('-').map((date) => Number(date));\n\n  return { year: splittedDate[0], month: splittedDate[1], date: splittedDate[2] };\n};\n"]}

package/cjs/internal/PerformanceMetrics/PerformanceMetrics.js

@@ -13,16 +13,16 @@ var PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlig
 
 
 function PerformanceMetrics(props) {
-  return (
-    _react.default.createElement("div", { style: { padding: 10, width: 1200 } },
-    _react.default.createElement("div", { style: { position: 'absolute' } },
-    _react.default.createElement(_Spinner.Spinner, { type: 'mini', caption: '' })),
+  return /*#__PURE__*/(
+    _react.default.createElement("div", { style: { padding: 10, width: 1200 } }, /*#__PURE__*/
+    _react.default.createElement("div", { style: { position: 'absolute' } }, /*#__PURE__*/
+    _react.default.createElement(_Spinner.Spinner, { type: 'mini', caption: '' })), /*#__PURE__*/
 
-    _react.default.createElement("div", { style: { padding: 10 } },
-    _react.default.createElement("div", { style: PANEL_WRAPPER_STYLES },
-    _react.default.createElement(PerformanceMetricsPanel, { title: 'Case A', component: props.componentsA })),
+    _react.default.createElement("div", { style: { padding: 10 } }, /*#__PURE__*/
+    _react.default.createElement("div", { style: PANEL_WRAPPER_STYLES }, /*#__PURE__*/
+    _react.default.createElement(PerformanceMetricsPanel, { title: 'Case A', component: props.componentsA })), /*#__PURE__*/
 
-    _react.default.createElement("div", { style: PANEL_WRAPPER_STYLES },
+    _react.default.createElement("div", { style: PANEL_WRAPPER_STYLES }, /*#__PURE__*/
     _react.default.createElement(PerformanceMetricsPanel, { title: 'Case B', component: props.componentsB })))));
 
 
@@ -42,7 +42,7 @@ PerformanceMetricsPanel = /*#__PURE__*/function (_React$Component) {(0, _inherit
     state = {
       mounted: false };_this.
 
-    container = void 0;_this.
+
 
 
 
@@ -83,4 +83,4 @@ PerformanceMetricsPanel = /*#__PURE__*/function (_React$Component) {(0, _inherit
       _this.setState({
         mounted: !_this.state.mounted });
 
-    };return _this;}var _proto = PerformanceMetricsPanel.prototype;_proto.render = function render() {return _react.default.createElement("div", null, _react.default.createElement("h1", { style: { lineHeight: '2em' } }, this.props.title), _react.default.createElement("div", { style: { marginBottom: 10 } }, _react.default.createElement(_Button.Button, { onClick: this.toggleMountedState, size: 'small' }, this.state.mounted ? 'Unmount' : 'Mount')), _react.default.createElement("div", { ref: this.setContainerRef }));};_proto.componentDidMount = function componentDidMount() {if (this.state.mounted && this.container) {_reactDom.default.render(this.props.component, this.container);}};_proto.componentDidUpdate = function componentDidUpdate() {if (!this.container) {return;}if (this.state.mounted) {_reactDom.default.render(this.props.component, this.container);} else {_reactDom.default.unmountComponentAtNode(this.container);}};return PerformanceMetricsPanel;}(_react.default.Component);
+    };return _this;}var _proto = PerformanceMetricsPanel.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", { style: { lineHeight: '2em' } }, this.props.title), /*#__PURE__*/_react.default.createElement("div", { style: { marginBottom: 10 } }, /*#__PURE__*/_react.default.createElement(_Button.Button, { onClick: this.toggleMountedState, size: 'small' }, this.state.mounted ? 'Unmount' : 'Mount')), /*#__PURE__*/_react.default.createElement("div", { ref: this.setContainerRef }));};_proto.componentDidMount = function componentDidMount() {if (this.state.mounted && this.container) {_reactDom.default.render(this.props.component, this.container);}};_proto.componentDidUpdate = function componentDidUpdate() {if (!this.container) {return;}if (this.state.mounted) {_reactDom.default.render(this.props.component, this.container);} else {_reactDom.default.unmountComponentAtNode(this.container);}};return PerformanceMetricsPanel;}(_react.default.Component);

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

@@ -1 +1 @@
-{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["PANEL_WRAPPER_STYLES","width","display","verticalAlign","PerformanceMetrics","props","padding","position","componentsA","componentsB","PerformanceMetricsPanel","state","mounted","container","setContainerRef","element","toggleMountedState","setState","render","lineHeight","title","marginBottom","componentDidMount","ReactDOM","component","componentDidUpdate","unmountComponentAtNode","React","Component"],"mappings":"0QAAA;AACA;;AAEA;;AAEA;;AAEA,IAAMA,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,0CAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,0CAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,iCAAC,gBAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,0CAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,0CAAK,KAAK,EAAEN,oBAAZ;AACE,iCAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,0CAAK,KAAK,EAAER,oBAAZ;AACE,iCAAC,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;;AAGPC,IAAAA,S;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAC,IAAAA,e,GAAkB,UAACC,OAAD,EAAoC;AAC5D,YAAKF,SAAL,GAAiBE,OAAjB;AACD,K;;AAEOC,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,OACE,0CACE,qCAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,EAEE,sCAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,IACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,EAOE,sCAAK,GAAG,EAAE,KAAKE,eAAf,GAPF,CADF,CAWD,C,QAEMQ,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKC,SAA/B,EAA0C,CACxCU,kBAASL,MAAT,CAAgB,KAAKb,KAAL,CAAWmB,SAA3B,EAAsC,KAAKX,SAA3C,EACD,CACF,C,QAEMY,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKZ,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKF,KAAL,CAAWC,OAAf,EAAwB,CACtBW,kBAASL,MAAT,CAAgB,KAAKb,KAAL,CAAWmB,SAA3B,EAAsC,KAAKX,SAA3C,EACD,CAFD,MAEO,CACLU,kBAASG,sBAAT,CAAgC,KAAKb,SAArC,EACD,CACF,C,kCAnCmCc,eAAMC,S","sourcesContent":["import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport { Button } from '../../components/Button';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { Spinner } from '../../components/Spinner';\r\n\r\nconst PANEL_WRAPPER_STYLES = { width: '45%', display: 'inline-block', verticalAlign: 'top' };\r\n\r\ninterface PerformanceMetricsProps {\r\n  componentsA: React.ReactElement<any>;\r\n  componentsB: React.ReactElement<any>;\r\n}\r\n\r\nexport function PerformanceMetrics(props: PerformanceMetricsProps) {\r\n  return (\r\n    <div style={{ padding: 10, width: 1200 }}>\r\n      <div style={{ position: 'absolute' }}>\r\n        <Spinner type={'mini'} caption={''} />\r\n      </div>\r\n      <div style={{ padding: 10 }}>\r\n        <div style={PANEL_WRAPPER_STYLES}>\r\n          <PerformanceMetricsPanel title={'Case A'} component={props.componentsA} />\r\n        </div>\r\n        <div style={PANEL_WRAPPER_STYLES}>\r\n          <PerformanceMetricsPanel title={'Case B'} component={props.componentsB} />\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\ninterface PerformanceMetricsPanelProps {\r\n  title: string;\r\n  component: React.ReactElement<any>;\r\n}\r\ninterface PerformanceMetricsPanelState {\r\n  mounted: boolean;\r\n}\r\n\r\nclass PerformanceMetricsPanel extends React.Component<PerformanceMetricsPanelProps, PerformanceMetricsPanelState> {\r\n  public state = {\r\n    mounted: false,\r\n  };\r\n  private container: Nullable<HTMLElement>;\r\n\r\n  public render() {\r\n    return (\r\n      <div>\r\n        <h1 style={{ lineHeight: '2em' }}>{this.props.title}</h1>\r\n        <div style={{ marginBottom: 10 }}>\r\n          <Button onClick={this.toggleMountedState} size={'small'}>\r\n            {this.state.mounted ? 'Unmount' : 'Mount'}\r\n          </Button>\r\n        </div>\r\n        <div ref={this.setContainerRef} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  public componentDidMount() {\r\n    if (this.state.mounted && this.container) {\r\n      ReactDOM.render(this.props.component, this.container);\r\n    }\r\n  }\r\n\r\n  public componentDidUpdate(): void {\r\n    if (!this.container) {\r\n      return;\r\n    }\r\n    if (this.state.mounted) {\r\n      ReactDOM.render(this.props.component, this.container);\r\n    } else {\r\n      ReactDOM.unmountComponentAtNode(this.container);\r\n    }\r\n  }\r\n\r\n  private setContainerRef = (element: Nullable<HTMLElement>) => {\r\n    this.container = element;\r\n  };\r\n\r\n  private toggleMountedState = () => {\r\n    this.setState({\r\n      mounted: !this.state.mounted,\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["PerformanceMetrics.tsx"],"names":["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","ReactDOM","component","componentDidUpdate","unmountComponentAtNode","React","Component"],"mappings":"0QAAA;AACA;;AAEA;;AAEA;;AAEA,IAAMA,oBAAoB,GAAG,EAAEC,KAAK,EAAE,KAAT,EAAgBC,OAAO,EAAE,cAAzB,EAAyCC,aAAa,EAAE,KAAxD,EAA7B;;;;;;;AAOO,SAASC,kBAAT,CAA4BC,KAA5B,EAA4D;AACjE;AACE,0CAAK,KAAK,EAAE,EAAEC,OAAO,EAAE,EAAX,EAAeL,KAAK,EAAE,IAAtB,EAAZ;AACE,0CAAK,KAAK,EAAE,EAAEM,QAAQ,EAAE,UAAZ,EAAZ;AACE,iCAAC,gBAAD,IAAS,IAAI,EAAE,MAAf,EAAuB,OAAO,EAAE,EAAhC,GADF,CADF;;AAIE,0CAAK,KAAK,EAAE,EAAED,OAAO,EAAE,EAAX,EAAZ;AACE,0CAAK,KAAK,EAAEN,oBAAZ;AACE,iCAAC,uBAAD,IAAyB,KAAK,EAAE,QAAhC,EAA0C,SAAS,EAAEK,KAAK,CAACG,WAA3D,GADF,CADF;;AAIE,0CAAK,KAAK,EAAER,oBAAZ;AACE,iCAAC,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,uDACE,qCAAI,KAAK,EAAE,EAAEC,UAAU,EAAE,KAAd,EAAX,IAAmC,KAAKd,KAAL,CAAWe,KAA9C,CADF,eAEE,sCAAK,KAAK,EAAE,EAAEC,YAAY,EAAE,EAAhB,EAAZ,iBACE,6BAAC,cAAD,IAAQ,OAAO,EAAE,KAAKL,kBAAtB,EAA0C,IAAI,EAAE,OAAhD,IACG,KAAKL,KAAL,CAAWC,OAAX,GAAqB,SAArB,GAAiC,OADpC,CADF,CAFF,eAOE,sCAAK,GAAG,EAAE,KAAKC,eAAf,GAPF,CADF,CAWD,C,QAEMS,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKX,KAAL,CAAWC,OAAX,IAAsB,KAAKG,SAA/B,EAA0C,CACxCQ,kBAASL,MAAT,CAAgB,KAAKb,KAAL,CAAWmB,SAA3B,EAAsC,KAAKT,SAA3C,EACD,CACF,C,QAEMU,kB,GAAP,8BAAkC,CAChC,IAAI,CAAC,KAAKV,SAAV,EAAqB,CACnB,OACD,CACD,IAAI,KAAKJ,KAAL,CAAWC,OAAf,EAAwB,CACtBW,kBAASL,MAAT,CAAgB,KAAKb,KAAL,CAAWmB,SAA3B,EAAsC,KAAKT,SAA3C,EACD,CAFD,MAEO,CACLQ,kBAASG,sBAAT,CAAgC,KAAKX,SAArC,EACD,CACF,C,kCAnCmCY,eAAMC,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"]}

package/cjs/internal/Popup/Popup.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { FocusEventType, MouseEventType } from '../../typings/event-types';
+import { CommonProps } from '../CommonWrapper';
 export declare type PopupPosition = 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
 export declare const PopupPositions: PopupPosition[];
 export interface PopupHandlerProps {
@@ -11,8 +12,9 @@ export interface PopupHandlerProps {
     onFocus?: (event: FocusEventType) => void;
     onBlur?: (event: FocusEventType) => void;
     onOpen?: () => void;
+    onClose?: () => void;
 }
-export interface PopupProps extends PopupHandlerProps {
+export interface PopupProps extends CommonProps, PopupHandlerProps {
     anchorElement: React.ReactNode | HTMLElement;
     backgroundColor?: React.CSSProperties['backgroundColor'];
     borderColor?: React.CSSProperties['borderColor'];
@@ -20,15 +22,31 @@ export interface PopupProps extends PopupHandlerProps {
     hasPin: boolean;
     hasShadow: boolean;
     disableAnimations: boolean;
-    margin: number;
+    margin?: number;
     maxWidth?: number | string;
     opened: boolean;
-    pinOffset: number;
-    pinSize: number;
+    pinOffset?: number;
+    pinSize?: number;
     popupOffset: number;
     positions: PopupPosition[];
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
+     *
+     * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
+     */
     useWrapper: boolean;
     ignoreHover: boolean;
+    width: React.CSSProperties['width'];
+    /**
+     * При очередном рендере пытаться сохранить первоначальную позицию попапа
+     * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
+     *
+     * Нужен только для Tooltip. В остальных случаях позиция перестраивается автоматически.
+     * @see https://github.com/skbkontur/retail-ui/pull/1195
+     */
+    tryPreserveFirstRenderedPosition?: boolean;
+    withoutMobile?: boolean;
+    mobileOnCloseRequest?: () => void;
 }
 interface PopupLocation {
     coordinates: {
@@ -93,15 +111,13 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
         ignoreHover: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
-        margin: number;
         popupOffset: number;
-        pinSize: number;
-        pinOffset: number;
         hasPin: boolean;
         hasShadow: boolean;
         disableAnimations: boolean;
         useWrapper: boolean;
         ignoreHover: boolean;
+        width: string;
     };
     state: PopupState;
     private theme;
@@ -109,15 +125,17 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private locationUpdateId;
     private lastPopupElement;
     private anchorElement;
-    private anchorInstance;
+    private isMobileLayout;
+    private setRootNode;
+    private refForTransition;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: Readonly<PopupProps>): void;
+    static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;
     componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    private renderMobile;
     private renderMain;
-    private refAnchorElement;
-    private extractElement;
+    private renderContainerRef;
     private updateAnchorElement;
     private addEventListeners;
     private removeEventListeners;
@@ -126,6 +144,8 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private handleClick;
     private handleFocus;
     private handleBlur;
+    private calculateWidth;
+    private content;
     private renderContent;
     private resetLocation;
     private renderChildren;
@@ -139,6 +159,7 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private getLocation;
     private getPinnedPopupOffset;
     private getCoordinates;
+    private getPinOffset;
     private getHorizontalPosition;
     private getVerticalPosition;
 }