@skbkontur/react-ui 0.0.0-73eeccf6c9 → 0.0.0-757d1fac56

package/cjs/internal/NativeDateInput/NativeDateInput.js

@@ -0,0 +1,65 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.NativeDateInput = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+
+var _utils = require("./utils");
+var _NativeDateInput = require("./NativeDateInput.styles");
+
+
+
+
+
+
+
+
+
+var DEFAULT_MIN_DATE = '1900-01-01';
+var DEFAULT_MAX_DATE = '2099-12-31';var
+
+NativeDateInput = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(NativeDateInput, _React$Component);function NativeDateInput() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    focus = function () {
+      if (_this.input) {
+        _this.input.focus();
+      }
+    };_this.
+
+
+
+
+    click = function () {
+      if (_this.input) {
+        _this.input.click();
+      }
+    };_this.
+
+    refInput = function (element) {
+      _this.input = element;
+    };return _this;}var _proto = NativeDateInput.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement("input", { type: 'date', max: this.props.maxDate ? (0, _utils.getDateForNative)(this.props.maxDate) : DEFAULT_MAX_DATE, min: this.props.minDate ? (0, _utils.getDateForNative)(this.props.minDate) : DEFAULT_MIN_DATE, value: (0, _utils.getDateForNative)(this.props.value), onChange: function onChange(e) {if (_this2.props.onValueChange) {_this2.props.onValueChange((0, _utils.getDateForComponent)(e.target.value));}}, className: _NativeDateInput.jsStyles.inputTypeDate(), ref: this.refInput, disabled: this.props.disabled, tabIndex: -1 });} /**
+   * @public
+   */;return NativeDateInput;}(_react.default.Component);exports.NativeDateInput = NativeDateInput;NativeDateInput.__KONTUR_REACT_UI__ = 'NativeDatePicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["NativeDateInput.tsx"],"names":["DEFAULT_MIN_DATE","DEFAULT_MAX_DATE","NativeDateInput","focus","input","click","refInput","element","render","props","maxDate","minDate","value","e","onValueChange","target","jsStyles","inputTypeDate","disabled","React","Component","__KONTUR_REACT_UI__"],"mappings":"2PAAA;;;;AAIA;AACA;;;;;;;;;;AAUA,IAAMA,gBAAgB,GAAG,YAAzB;AACA,IAAMC,gBAAgB,GAAG,YAAzB,C;;AAEaC,e;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BJC,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKC,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWD,KAAX;AACD;AACF,K;;;;;AAKME,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACd,cAAKA,KAAL,CAAWC,KAAX;AACD;AACF,K;;AAEOC,IAAAA,Q,GAAW,UAACC,OAAD,EAAyC;AAC1D,YAAKH,KAAL,GAAaG,OAAb;AACD,K,6DAxCMC,M,GAAP,kBAAgB,mBACd,oBACE,wCACE,IAAI,EAAE,MADR,EAEE,GAAG,EAAE,KAAKC,KAAL,CAAWC,OAAX,GAAqB,6BAAiB,KAAKD,KAAL,CAAWC,OAA5B,CAArB,GAA4DT,gBAFnE,EAGE,GAAG,EAAE,KAAKQ,KAAL,CAAWE,OAAX,GAAqB,6BAAiB,KAAKF,KAAL,CAAWE,OAA5B,CAArB,GAA4DX,gBAHnE,EAIE,KAAK,EAAE,6BAAiB,KAAKS,KAAL,CAAWG,KAA5B,CAJT,EAKE,QAAQ,EAAE,kBAACC,CAAD,EAAO,CACf,IAAI,MAAI,CAACJ,KAAL,CAAWK,aAAf,EAA8B,CAC5B,MAAI,CAACL,KAAL,CAAWK,aAAX,CAAyB,gCAAoBD,CAAC,CAACE,MAAF,CAASH,KAA7B,CAAzB,EACD,CACF,CATH,EAUE,SAAS,EAAEI,0BAASC,aAAT,EAVb,EAWE,GAAG,EAAE,KAAKX,QAXZ,EAYE,QAAQ,EAAE,KAAKG,KAAL,CAAWS,QAZvB,EAaE,QAAQ,EAAE,CAAC,CAbb,GADF,CAiBD,C,CAED;AACF;AACA,K,0BA1BqCC,eAAMC,S,4CAA9BlB,e,CACGmB,mB,GAAsB,kB","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { getDateForNative, getDateForComponent } from './utils';\nimport { jsStyles } from './NativeDateInput.styles';\n\nexport interface NativeDateInputProps {\n  onValueChange?: (value: string) => void;\n  value: Nullable<string>;\n  minDate?: Nullable<string>;\n  maxDate?: Nullable<string>;\n  disabled?: boolean;\n}\n\nconst DEFAULT_MIN_DATE = '1900-01-01';\nconst DEFAULT_MAX_DATE = '2099-12-31';\n\nexport class NativeDateInput extends React.Component<NativeDateInputProps> {\n  public static __KONTUR_REACT_UI__ = 'NativeDatePicker';\n  private input: Nullable<HTMLInputElement>;\n\n  public render() {\n    return (\n      <input\n        type={'date'}\n        max={this.props.maxDate ? getDateForNative(this.props.maxDate) : DEFAULT_MAX_DATE}\n        min={this.props.minDate ? getDateForNative(this.props.minDate) : DEFAULT_MIN_DATE}\n        value={getDateForNative(this.props.value)}\n        onChange={(e) => {\n          if (this.props.onValueChange) {\n            this.props.onValueChange(getDateForComponent(e.target.value));\n          }\n        }}\n        className={jsStyles.inputTypeDate()}\n        ref={this.refInput}\n        disabled={this.props.disabled}\n        tabIndex={-1}\n      />\n    );\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  };\n\n  /**\n   * @public\n   */\n  public click = () => {\n    if (this.input) {\n      this.input.click();\n    }\n  };\n\n  private refInput = (element: Nullable<HTMLInputElement>) => {\n    this.input = element;\n  };\n}\n"]}

package/cjs/internal/NativeDateInput/NativeDateInput.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const jsStyles: {
+    inputTypeDate(): string;
+};

package/cjs/internal/NativeDateInput/NativeDateInput.styles.js

@@ -0,0 +1,19 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var styles = {
+  inputTypeDate: function inputTypeDate() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    "])));
+
+
+
+
+
+
+
+
+
+
+  } };
+
+
+var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["NativeDateInput.styles.ts"],"names":["styles","inputTypeDate","css","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,aADa,2BACG;AACd,eAAOC,YAAP;;;;;;;;;;;AAWD,GAbY,EAAf;;;AAgBO,IAAMC,QAAQ,GAAG,2BAAaH,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nconst styles = {\n  inputTypeDate() {\n    return css`\n      width: 0px;\n      height: 0px;\n      padding: 0px;\n      margin: 0px;\n      line-height: 0px;\n      transform: scale(0);\n      border: none;\n      overflow: hidden;\n      opacity: 0;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/cjs/internal/NativeDateInput/index.d.ts

@@ -0,0 +1 @@
+export * from './NativeDateInput';

package/cjs/internal/NativeDateInput/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _NativeDateInput = require("./NativeDateInput");Object.keys(_NativeDateInput).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _NativeDateInput[key]) return;exports[key] = _NativeDateInput[key];});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './NativeDateInput';\n"]}

package/cjs/internal/NativeDateInput/utils.d.ts

@@ -0,0 +1,7 @@
+import { Nullable } from '../../typings/utility-types';
+import { CalendarDateShape } from '../Calendar';
+export declare const getDateForNative: (componentDate: Nullable<string>) => string | undefined;
+export declare const getDateForComponent: (nativeDate: Nullable<string>) => string;
+export declare const getNativeDateFromShape: (componentDate: CalendarDateShape | undefined | null) => string | undefined;
+export declare const upMonthOfShape: (DateShape: CalendarDateShape | undefined) => CalendarDateShape | undefined;
+export declare const getShapeFromNativeDate: (nativeDate: Nullable<string>) => CalendarDateShape | undefined;

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

@@ -42,7 +42,7 @@ PerformanceMetricsPanel = /*#__PURE__*/function (_React$Component) {(0, _inherit
     state = {
       mounted: false };_this.
 
-    container = void 0;_this.
+
 
 
 

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,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,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,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { FocusEventType, MouseEventType } from '../../typings/event-types';
-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[];
+import { CommonProps } from '../CommonWrapper';
+export declare const PopupPositions: readonly ["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 declare const DefaultPosition: "top left";
+export declare type PopupPositionsType = typeof PopupPositions[number];
 export interface PopupHandlerProps {
     onMouseEnter?: (event: MouseEventType) => void;
     onMouseLeave?: (event: MouseEventType) => void;
@@ -13,7 +15,7 @@ export interface PopupHandlerProps {
     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'];
@@ -27,20 +29,41 @@ export interface PopupProps extends PopupHandlerProps {
     pinOffset?: number;
     pinSize?: number;
     popupOffset: number;
-    positions: PopupPosition[];
+    positions: Readonly<PopupPositionsType[]>;
+    /**
+     * Явно указывает, что вложенные элементы должны быть обёрнуты в `<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: {
         left: number;
         top: number;
     };
-    position: PopupPosition;
+    position: PopupPositionsType;
 }
 export interface PopupState {
     location: Nullable<PopupLocation>;
 }
+export declare const PopupDataTids: {
+    readonly content: "PopupContent";
+    readonly contentInner: "PopupContentInner";
+    readonly popupPin: "PopupPin__root";
+};
 export declare class Popup extends React.Component<PopupProps, PopupState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -100,22 +123,25 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
         disableAnimations: boolean;
         useWrapper: boolean;
         ignoreHover: boolean;
+        width: string;
     };
+    static readonly defaultRootNode: null;
     state: PopupState;
     private theme;
     private layoutEventsToken;
     private locationUpdateId;
     private lastPopupElement;
-    private anchorElement;
-    private anchorInstance;
+    private isMobileLayout;
+    private setRootNode;
+    private refForTransition;
+    anchorElement: Nullable<HTMLElement>;
     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 updateAnchorElement;
     private addEventListeners;
     private removeEventListeners;
@@ -124,6 +150,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;
@@ -137,6 +165,7 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private getLocation;
     private getPinnedPopupOffset;
     private getCoordinates;
+    private getPinOffset;
     private getHorizontalPosition;
     private getVerticalPosition;
 }