@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba583fb2

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

@@ -1 +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,GAH4F;AAIjE,GAACD,aAAa,CAACO,IAAf,EAAqBP,aAAa,CAACQ,KAAnC,EAA0CR,aAAa,CAACS,IAAxD,EAA8DC,GAA9D,CAAkE,UAACC,CAAD,UAAOA,CAAC,CAACC,QAAF,EAAP,EAAlE,CAJiE,CAItFL,IAJsF,WAIhFC,KAJgF,WAIzEC,IAJyE;;AAM7F,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"]}
+{"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 '../../components/Calendar/CalendarDateShape';\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';\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":["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,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,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: 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/cjs/internal/Popup/Popup.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { HTMLAttributes } 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 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 declare const DUMMY_LOCATION: PopupLocation;
 export interface PopupHandlerProps {
     onMouseEnter?: (event: MouseEventType) => void;
     onMouseLeave?: (event: MouseEventType) => void;
@@ -14,29 +16,29 @@ export interface PopupHandlerProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-export interface PopupProps extends CommonProps, PopupHandlerProps {
+export interface PopupProps extends Omit<CommonProps, 'children'>, PopupHandlerProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     anchorElement: React.ReactNode | HTMLElement;
     backgroundColor?: React.CSSProperties['backgroundColor'];
     borderColor?: React.CSSProperties['borderColor'];
     children: React.ReactNode | (() => React.ReactNode);
-    hasPin: boolean;
-    hasShadow: boolean;
-    disableAnimations: boolean;
+    hasPin?: boolean;
+    hasShadow?: boolean;
+    disableAnimations?: boolean;
     margin?: number;
     maxWidth?: number | string;
     opened: boolean;
     pinOffset?: number;
     pinSize?: number;
-    popupOffset: number;
-    positions: PopupPosition[];
+    popupOffset?: number;
+    positions: Readonly<PopupPositionsType[]>;
     /**
      * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
      *
      * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
      */
-    useWrapper: boolean;
-    ignoreHover: boolean;
-    width: React.CSSProperties['width'];
+    useWrapper?: boolean;
+    ignoreHover?: boolean;
+    width?: React.CSSProperties['width'];
     /**
      * При очередном рендере пытаться сохранить первоначальную позицию попапа
      * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
@@ -47,17 +49,31 @@ export interface PopupProps extends CommonProps, PopupHandlerProps {
     tryPreserveFirstRenderedPosition?: boolean;
     withoutMobile?: boolean;
     mobileOnCloseRequest?: () => void;
+    /**
+     * Возвращает текущую позицию попапа
+     */
+    onPositionChange?: (pos: PopupPositionsType) => void;
 }
 interface PopupLocation {
     coordinates: {
         left: number;
         top: number;
     };
-    position: PopupPosition;
+    position: PopupPositionsType;
 }
 export interface PopupState {
     location: Nullable<PopupLocation>;
 }
+export declare const PopupDataTids: {
+    readonly root: "Popup__root";
+    readonly content: "PopupContent";
+    readonly contentInner: "PopupContentInner";
+    readonly popupPin: "PopupPin__root";
+};
+export declare const PopupIds: {
+    root: "Popup__root";
+};
+declare type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width'>>;
 export declare class Popup extends React.Component<PopupProps, PopupState> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -110,32 +126,27 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
          */
         ignoreHover: PropTypes.Requireable<boolean>;
     };
-    static defaultProps: {
-        popupOffset: number;
-        hasPin: boolean;
-        hasShadow: boolean;
-        disableAnimations: boolean;
-        useWrapper: boolean;
-        ignoreHover: boolean;
-        width: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
+    static readonly defaultRootNode: null;
     state: PopupState;
     private theme;
     private layoutEventsToken;
     private locationUpdateId;
     private lastPopupElement;
-    private anchorElement;
-    private anchorInstance;
     private isMobileLayout;
+    private setRootNode;
+    private refForTransition;
+    private hasAnchorElementListeners;
+    private rootId;
+    anchorElement: Nullable<Element>;
     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;

package/cjs/internal/Popup/Popup.js

@@ -1,10 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.Popup = exports.PopupPositions = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PopupPositions = exports.PopupIds = exports.PopupDataTids = exports.Popup = exports.DefaultPosition = exports.DUMMY_LOCATION = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
-var _raf = _interopRequireDefault(require("raf"));
 var _warning = _interopRequireDefault(require("warning"));
+var _globalObject = require("@skbkontur/global-object");
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _ZIndex = require("../ZIndex");
@@ -18,21 +18,47 @@ var _SSRSafe = require("../../lib/SSRSafe");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _CommonWrapper = require("../CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
-var _ResponsiveLayout = require("../../components/ResponsiveLayout");
+var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _MobilePopup = require("../MobilePopup");
+var _rootNode = require("../../lib/rootNode");
+var _callChildRef = require("../../lib/callChildRef/callChildRef");
+var _InstanceWithAnchorElement = require("../../lib/InstanceWithAnchorElement");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _isInstanceOf = require("../../lib/isInstanceOf");
 
 var _PopupPin = require("./PopupPin");
 var _PopupHelper = require("./PopupHelper");
-var _Popup = require("./Popup.styles");var _class, _class2, _temp;function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it;if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) {if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}it = o[Symbol.iterator]();return it.next.bind(it);}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
+var _Popup = require("./Popup.styles");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}function _createForOfIteratorHelperLoose(o, allowArrayLike) {var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];if (it) return (it = it.call(o)).next.bind(it);if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {if (it) o = it;var i = 0;return function () {if (i >= o.length) return { done: true };return { done: false, value: o[i++] };};}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");}function _unsupportedIterableToArray(o, minLen) {if (!o) return;if (typeof o === "string") return _arrayLikeToArray(o, minLen);var n = Object.prototype.toString.call(o).slice(8, -1);if (n === "Object" && o.constructor) n = o.constructor.name;if (n === "Map" || n === "Set") return Array.from(o);if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);}function _arrayLikeToArray(arr, len) {if (len == null || len > arr.length) len = arr.length;for (var i = 0, arr2 = new Array(len); i < len; i++) {arr2[i] = arr[i];}return arr2;}
 
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = { enter: 0, exit: 200 };
 
+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'];exports.PopupPositions = PopupPositions;
+
+var DefaultPosition = PopupPositions[0];exports.DefaultPosition = DefaultPosition;
+
+
+
 var DUMMY_LOCATION = {
-  position: 'top left',
+  position: DefaultPosition,
   coordinates: {
     top: -9999,
-    left: -9999 } };
+    left: -9999 } };exports.DUMMY_LOCATION = DUMMY_LOCATION;
+
+
+
 
 
 
@@ -50,19 +76,6 @@ var DUMMY_LOCATION = {
 
 
 
-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'];exports.PopupPositions = PopupPositions;var
 
 
 
@@ -110,8 +123,15 @@ var PopupPositions = [
 
 
 
+var PopupDataTids = {
+  root: 'Popup__root',
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root' };exports.PopupDataTids = PopupDataTids;
 
 
+var PopupIds = {
+  root: PopupDataTids.root };exports.PopupIds = PopupIds;var
 
 
 
@@ -123,7 +143,7 @@ var PopupPositions = [
 
 
 
-Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {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.
+Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Popup, _React$Component);function Popup() {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.
 
 
 
@@ -194,18 +214,27 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
 
 
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Popup.defaultProps);_this.
 
 
 
 
     state = { location: _this.props.opened ? DUMMY_LOCATION : null };_this.
-    theme = void 0;_this.
-    layoutEventsToken = void 0;_this.
+
+
     locationUpdateId = null;_this.
-    lastPopupElement = void 0;_this.
+
+
+
+    refForTransition = /*#__PURE__*/_react.default.createRef();_this.
+    hasAnchorElementListeners = false;_this.
+    rootId = PopupIds.root + (0, _utils.getRandomID)();_this.
+
     anchorElement = null;_this.
-    anchorInstance = void 0;_this.
-    isMobileLayout = void 0;_this.
 
 
 
@@ -295,12 +324,6 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
 
 
-    refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
-      var element = _this.extractElement(instance);
-      _this.updateAnchorElement(element);
-      _this.anchorElement = element;
-    };_this.
 
 
 
@@ -313,6 +336,41 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    updateAnchorElement = function (instance) {
+      var childDomNode = (0, _InstanceWithAnchorElement.isInstanceWithAnchorElement)(instance) ? instance.getAnchorElement() : (0, _rootNode.getRootNode)(instance);
+      var anchorElement = _this.anchorElement;
+
+      if (childDomNode !== anchorElement) {
+        _this.removeEventListeners(anchorElement);
+        _this.anchorElement = childDomNode;
+        _this.addEventListeners(childDomNode);
+      }
+    };_this.
+
+
+
+
 
 
 
@@ -372,20 +430,22 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
     calculateWidth = function (width) {
       if (typeof width === 'string' && width.includes('%')) {
-        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+        var anchorWidth = Math.floor((0, _getDOMRect.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;
+    content = function (children) {
+      var backgroundColor = _this.props.backgroundColor;
+      var width = _this.getProps().width;
 
       return /*#__PURE__*/(
-        _react.default.createElement("div", { className: _Popup.styles.content(_this.theme), "data-tid": 'PopupContent' }, /*#__PURE__*/
+        _react.default.createElement("div", { className: _Popup.styles.content(_this.theme), "data-tid": PopupDataTids.content, ref: _this.refForTransition }, /*#__PURE__*/
         _react.default.createElement("div", {
           className: _Popup.styles.contentInner(_this.theme),
           style: { backgroundColor: backgroundColor, width: _this.calculateWidth(width) },
-          "data-tid": 'PopupContentInner' },
+          "data-tid": PopupDataTids.contentInner },
 
         children)));
 
@@ -440,6 +500,10 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
 
 
+
+
+
+
 
 
 
@@ -447,17 +511,15 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
     resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
-      _this.setState({ location: null });
+      _this.state.location !== null && _this.setState({ location: null });
     };_this.
 
 
 
 
 
-    refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && (0, _reactDom.findDOMNode)(zIndex);
-      }
+    refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };_this.
 
 
@@ -485,15 +547,13 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
 
 
+
 
 
     handleLayoutEvent = function () {
       if (!_this.state.location) {
         return;
       }
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
       _this.updateLocation();
     };_this.
 
@@ -517,35 +577,52 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_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 });
       }
-    };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {/**
+    };return _this;}var _proto = Popup.prototype;_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) {/**
      * Delaying updateLocation to ensure it happens after props update
-     */if (nextProps.opened) {if (!this.state.location) {this.setState({ location: DUMMY_LOCATION });}this.delayUpdateLocation();}};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (!hadNoLocation && !this.state.location && this.props.onClose) {this.props.onClose();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();this.removeEventListeners(this.anchorElement);if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;return /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { opened: opened, withoutRenderContainer: true, onCloseRequest: this.props.mobileOnCloseRequest }, this.content(this.renderChildren()));};_proto.renderMain = function renderMain() {var location = this.state.location;var _this$props2 = this.props,anchorElement = _this$props2.anchorElement,useWrapper = _this$props2.useWrapper;var child = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {child = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {child = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: child, ref: child ? this.refAnchorElement : undefined }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.extractElement = function extractElement(instance) {if (!instance) {return null;}var element = (0, _reactDom.findDOMNode)(instance);return (0, _SSRSafe.isHTMLElement)(element) ? element : null;};_proto.updateAnchorElement = function updateAnchorElement(element) {var anchorElement = this.anchorElement;if (element !== anchorElement) {this.removeEventListeners(anchorElement);this.anchorElement = element;this.addEventListeners(element);}};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.addEventListener('mouseenter', this.handleMouseEnter);element.addEventListener('mouseleave', this.handleMouseLeave);element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isHTMLElement)(element)) {element.removeEventListener('mouseenter', this.handleMouseEnter);element.removeEventListener('mouseleave', this.handleMouseLeave);element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_proto.renderContent = function renderContent(location) {var _this3 = 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 children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation }, function (state) {var _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this3.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { ref: _this3.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this3.theme)] = true, _extends2[_Popup.styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this3.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this3.handleMouseEnter, onMouseLeave: _this3.handleMouseLeave }, _this3.content(children), !_this3.isMobileLayout && _this3.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
+     */if (props.opened) {if (!state.location) {return { location: DUMMY_LOCATION };}} else if (state.location) {return { location: DUMMY_LOCATION };}return state;};_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {var hadNoLocation = prevState.location === DUMMY_LOCATION;var hasLocation = this.state.location !== DUMMY_LOCATION;var wasClosed = prevProps.opened && !this.props.opened;if (this.isMobileLayout && prevState.location === null && this.state.location === null) {this.setState({ location: DUMMY_LOCATION });}if (this.props.opened && hadNoLocation && hasLocation && this.props.onOpen) {this.props.onOpen();}if (wasClosed && !hasLocation && this.props.onClose) {this.props.onClose();}if (this.props.opened) {this.delayUpdateLocation();}};_proto.componentWillUnmount = function componentWillUnmount() {this.cancelDelayedUpdateLocation();if (this.hasAnchorElementListeners) {this.removeEventListeners(this.anchorElement);}if (this.layoutEventsToken) {this.layoutEventsToken.remove();this.layoutEventsToken = null;}if (this.state.location && this.props.onClose) {this.props.onClose();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMobile = function renderMobile() {var opened = this.props.opened;var children = this.renderChildren();return children ? /*#__PURE__*/_react.default.createElement(_MobilePopup.MobilePopup, { opened: opened, withoutRenderContainer: true, onCloseRequest: this.props.mobileOnCloseRequest }, this.content(children)) : null;};_proto.renderMain = function renderMain() {var _this3 = this;var location = this.state.location;var anchorElement = this.props.anchorElement;var useWrapper = this.getProps().useWrapper;var anchor = null;if ((0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element)) {this.updateAnchorElement(anchorElement);} else if ( /*#__PURE__*/_react.default.isValidElement(anchorElement)) {anchor = useWrapper ? /*#__PURE__*/_react.default.createElement("span", null, anchorElement) : anchorElement;} else {anchor = /*#__PURE__*/_react.default.createElement("span", null, anchorElement);}var anchorWithRef = anchor && /*#__PURE__*/_react.default.isValidElement(anchor) && (0, _utils.isRefableElement)(anchor) ? /*#__PURE__*/_react.default.cloneElement(anchor, { ref: function ref(instance) {var _anchor;_this3.updateAnchorElement(instance);var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);} }) : null; // we need to get anchor's DOM node
+    // so we either set our own ref on it via cloning
+    // or relay on findDOMNode (inside getRootNode)
+    // which should be called within updateAnchorElement
+    // in the case when the anchor is not refable
+    var canGetAnchorNode = !!anchorWithRef || (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element);return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, { anchor: anchorWithRef || anchor, ref: canGetAnchorNode ? null : this.updateAnchorElement }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));};_proto.addEventListeners = function addEventListeners(element) {if (element && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.globalObject.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 && (0, _isInstanceOf.isInstanceOf)(element, _globalObject.globalObject.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$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.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _this4$props$id, _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId, "data-tid": PopupDataTids.root, wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
      * Box-shadow does not appear under the pin. Borders are used instead.
      * In non-ie browsers drop-shadow filter is used. It is applying
      * shadow to the pin too.
-     */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _client.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 position = _PopupHelper.PopupHelper.getPositionObject(positionName);return this.props.hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = (0, _raf.default)(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_raf.default.cancel(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}
-    if (x == null || y == null) {
-      return false;
-    }
+     */var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;var pinBorder = _client.isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;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.PopupHelper.getPositionObject(positionName);return hasPin && /*#__PURE__*/_react.default.createElement(_PopupPin.PopupPin, { popupElement: this.lastPopupElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), borderWidth: hasShadow ? 1 : 0, backgroundColor: backgroundColor || this.theme.popupBackground, borderColor: borderColor || pinBorder });};_proto.delayUpdateLocation = function delayUpdateLocation() {this.cancelDelayedUpdateLocation();this.locationUpdateId = _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(this.updateLocation);};_proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {if (this.locationUpdateId) {_globalObject.globalObject.cancelAnimationFrame == null ? void 0 : _globalObject.globalObject.cancelAnimationFrame(this.locationUpdateId);this.locationUpdateId = null;}};_proto.locationEquals = function locationEquals(x, y) {if (x === y) {return true;}if ((0, _utils.isNullable)(x) || (0, _utils.isNullable)(y)) {return false;}if (!_client.isIE11 && !_client.isEdge) {return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;}
+
+    // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
 
     return (
-      x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position);
+      x.position === y.position &&
+      Math.abs(x.coordinates.top - y.coordinates.top) <= 1 &&
+      Math.abs(x.coordinates.left - y.coordinates.left) <= 1);
 
   };_proto.
 
-  getLocation = function getLocation(popupElement, location) {var _this$props5 =
-    this.props,positions = _this$props5.positions,tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+  getLocation = function getLocation(popupElement, location) {
+    var _this$props3 = this.props,positions = _this$props3.positions,tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
 
     (0, _warning.default)(
-    anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement),
-    'Anchor element is not defined or not instance of HTMLElement');
+    anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element),
+    'Anchor element is not defined or not instance of Element');
 
 
-    if (!(anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement))) {
+    if (!(anchorElement && (0, _isInstanceOf.isInstanceOf)(anchorElement, _globalObject.globalObject.Element))) {
       return location;
     }
 
@@ -588,13 +665,13 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_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;
     }
 
-    var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;var
+    var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
 
-    pinSize = this.props.pinSize;
+    var pinSize = this.props.pinSize;
 
     return Math.max(
     0,
@@ -602,14 +679,14 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
   };_proto.
 
-  getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {var
-    marginFromProps = this.props.margin;
+  getCoordinates = function getCoordinates(anchorRect, popupRect, positionName) {
+    var marginFromProps = this.props.margin;
     var margin =
     (0, _utils.isNonNullable)(marginFromProps) && !isNaN(marginFromProps) ?
     marginFromProps :
     parseInt(this.theme.popupMargin) || 0;
     var position = _PopupHelper.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':
@@ -637,8 +714,8 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
   };_proto.
 
-  getPinOffset = function getPinOffset(align) {var
-    pinOffset = this.props.pinOffset;
+  getPinOffset = function getPinOffset(align) {
+    var pinOffset = this.props.pinOffset;
 
     switch (align) {
       case 'top':
@@ -681,7 +758,7 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
 
   };return Popup;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = { /**
    * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
-   */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(function () {return HTMLElement;}), _propTypes.default.node]).isRequired, /**
+   */anchorElement: _propTypes.default.oneOfType([(0, _SSRSafe.safePropTypesInstanceOf)(_globalObject.globalObject.HTMLElement), _propTypes.default.node]).isRequired, /**
    * Фон попапа и пина
    */backgroundColor: _propTypes.default.string, children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]), /**
    * Показывать ли пин
@@ -704,4 +781,4 @@ Popup = (0, _ResponsiveLayout.responsiveLayout)(_class = (_temp = _class2 = /*#_
    * на котором будет отображаться пин
    */positions: _propTypes.default.array, /**
    * Игнорировать ли события hover/click
-   */ignoreHover: _propTypes.default.bool }, _class2.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' }, _temp)) || _class;exports.Popup = Popup;
+   */ignoreHover: _propTypes.default.bool }, _class2.defaultProps = { popupOffset: 0, hasPin: false, hasShadow: false, disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, ignoreHover: false, width: 'auto' }, _class2.defaultRootNode = null, _temp)) || _class) || _class;exports.Popup = Popup;