@skbkontur/react-ui 3.10.0-fileuploader.1 → 3.11.0-latest

package/internal/Menu/Menu/Menu.js

@@ -1,14 +1,17 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { ScrollContainer } from "../../../components/ScrollContainer";
 import { isMenuItem } from "../../../components/MenuItem";
 import { isMenuHeader } from "../../../components/MenuHeader";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { styles } from "../Menu.styles";
 import { isActiveElement } from "../isActiveElement";
-export var Menu = /*#__PURE__*/function (_React$Component) {
+export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Menu, _React$Component);
 
   function Menu() {
@@ -26,6 +29,7 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
     _this.scrollContainer = void 0;
     _this.highlighted = void 0;
     _this.unmounted = false;
+    _this.setRootNode = void 0;
 
     _this.refScrollContainer = function (scrollContainer) {
       _this.scrollContainer = scrollContainer;
@@ -33,7 +37,7 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
 
     _this.scrollToSelected = function () {
       if (_this.scrollContainer && _this.highlighted) {
-        _this.scrollContainer.scrollTo(ReactDOM.findDOMNode(_this.highlighted));
+        _this.scrollContainer.scrollTo(getRootNode(_this.highlighted));
       }
     };
 
@@ -142,7 +146,8 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
       style: {
         width: this.props.width,
         maxHeight: this.props.maxHeight
-      }
+      },
+      ref: this.setRootNode
     }, /*#__PURE__*/React.createElement(ScrollContainer, {
       ref: this.refScrollContainer,
       maxHeight: this.props.maxHeight,
@@ -287,14 +292,12 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
   };
 
   return Menu;
-}(React.Component);
-Menu.__KONTUR_REACT_UI__ = 'Menu';
-Menu.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = {
   width: 'auto',
   maxHeight: 300,
   hasShadow: true,
   preventWindowScroll: true
-};
+}, _temp)) || _class;
 
 function isExist(value) {
   return value !== null && value !== undefined;

package/internal/Menu/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Menu.tsx"],"names":["React","ReactDOM","ScrollContainer","isMenuItem","isMenuHeader","ThemeContext","cx","styles","isActiveElement","Menu","state","highlightedIndex","theme","scrollContainer","highlighted","unmounted","refScrollContainer","scrollToSelected","scrollTo","findDOMNode","scrollToTop","scrollToBottom","highlight","index","setState","unhighlight","componentWillUnmount","render","renderMain","up","move","down","enter","event","select","reset","hasHighlightedItem","highlightItem","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","isEmpty","root","shadow","hasShadow","width","maxHeight","preventWindowScroll","map","child","cloneElement","_enableIconPadding","ref","refHighlighted","bind","onClick","onMouseEnter","onMouseLeave","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","value","undefined","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={{ width: this.props.width, maxHeight: this.props.maxHeight }}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n        >\n          <div className={styles.scrollContainer(this.theme)}>\n            {React.Children.map(this.props.children, (child, index) => {\n              if (!child) {\n                return child;\n              }\n              if (typeof child === 'string' || typeof child === 'number') {\n                return child;\n              }\n\n              if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n                child = React.cloneElement(child, {\n                  _enableIconPadding: true,\n                });\n              }\n              if (isActiveElement(child)) {\n                const highlight = this.state.highlightedIndex === index;\n\n                let ref = child.ref;\n                if (highlight && typeof child.ref !== 'string') {\n                  ref = this.refHighlighted.bind(this, child.ref);\n                }\n\n                return React.cloneElement<MenuItemProps, MenuItem>(child, {\n                  ref,\n                  state: highlight ? 'hover' : child.props.state,\n                  onClick: this.select.bind(this, index, false),\n                  onMouseEnter: this.highlight.bind(this, index),\n                  onMouseLeave: this.unhighlight,\n                });\n              }\n              return child;\n            })}\n          </div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      this.scrollContainer.scrollTo(ReactDOM.findDOMNode(this.highlighted) as HTMLElement);\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          window.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\n      if (index < 0) {\n        index = children.length - 1;\n      } else if (index > children.length) {\n        index = 0;\n      }\n\n      const child = children[index];\n      if (isActiveElement(child)) {\n        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isExist).length;\n  }\n}\n\nfunction isExist(value: any): value is any {\n  return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n"]}
+{"version":3,"sources":["Menu.tsx"],"names":["React","ScrollContainer","isMenuItem","isMenuHeader","ThemeContext","cx","getRootNode","rootNode","styles","isActiveElement","Menu","state","highlightedIndex","theme","scrollContainer","highlighted","unmounted","setRootNode","refScrollContainer","scrollToSelected","scrollTo","scrollToTop","scrollToBottom","highlight","index","setState","unhighlight","componentWillUnmount","render","renderMain","up","move","down","enter","event","select","reset","hasHighlightedItem","highlightItem","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","isEmpty","root","shadow","hasShadow","width","maxHeight","preventWindowScroll","map","child","cloneElement","_enableIconPadding","ref","refHighlighted","bind","onClick","onMouseEnter","onMouseLeave","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","value","undefined","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n  private setRootNode!: TSetRootNode;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={{ width: this.props.width, maxHeight: this.props.maxHeight }}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n        >\n          <div className={styles.scrollContainer(this.theme)}>\n            {React.Children.map(this.props.children, (child, index) => {\n              if (!child) {\n                return child;\n              }\n              if (typeof child === 'string' || typeof child === 'number') {\n                return child;\n              }\n\n              if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n                child = React.cloneElement(child, {\n                  _enableIconPadding: true,\n                });\n              }\n              if (isActiveElement(child)) {\n                const highlight = this.state.highlightedIndex === index;\n\n                let ref = child.ref;\n                if (highlight && typeof child.ref !== 'string') {\n                  ref = this.refHighlighted.bind(this, child.ref);\n                }\n\n                return React.cloneElement<MenuItemProps, MenuItem>(child, {\n                  ref,\n                  state: highlight ? 'hover' : child.props.state,\n                  onClick: this.select.bind(this, index, false),\n                  onMouseEnter: this.highlight.bind(this, index),\n                  onMouseLeave: this.unhighlight,\n                });\n              }\n              return child;\n            })}\n          </div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          window.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\n      if (index < 0) {\n        index = children.length - 1;\n      } else if (index > children.length) {\n        index = 0;\n      }\n\n      const child = children[index];\n      if (isActiveElement(child)) {\n        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isExist).length;\n  }\n}\n\nfunction isExist(value: any): value is any {\n  return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n"]}

package/internal/Menu/Menu.d.ts

@@ -25,6 +25,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private scrollContainer;
     private highlighted;
     private unmounted;
+    private setRootNode;
     componentWillUnmount(): void;
     render(): JSX.Element;
     /**

package/internal/Popup/Popup/Popup.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
+var _class, _class2, _temp;
+
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it;
 
@@ -46,7 +48,6 @@ function _arrayLikeToArray(arr, len) {
 }
 
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
 import raf from 'raf';
@@ -54,13 +55,15 @@ import warning from 'warning';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction, isNonNullable } from "../../../lib/utils";
+import { isFunction, isNonNullable, isRefableElement } from "../../../lib/utils";
 import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
 import { styles } from "../Popup.styles";
@@ -69,15 +72,16 @@ var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
 };
+export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
+export var DefaultPosition = PopupPositions[0];
 var DUMMY_LOCATION = {
-  position: 'top left',
+  position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
-export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
-export var Popup = /*#__PURE__*/function (_React$Component) {
+export var Popup = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
   function Popup() {
@@ -96,16 +100,11 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     _this.locationUpdateId = null;
     _this.lastPopupElement = void 0;
     _this.anchorElement = null;
-    _this.anchorInstance = void 0;
-
-    _this.refAnchorElement = function (instance) {
-      _this.anchorInstance = instance;
-
-      var element = _this.extractElement(instance);
+    _this.setRootNode = void 0;
+    _this.refForTransition = /*#__PURE__*/React.createRef();
 
-      _this.updateAnchorElement(element);
-
-      _this.anchorElement = element;
+    _this.renderContainerRef = function (childInstance) {
+      _this.updateAnchorElement(childInstance);
     };
 
     _this.handleMouseEnter = function (event) {
@@ -149,15 +148,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     _this.resetLocation = function () {
       _this.cancelDelayedUpdateLocation();
 
-      _this.setState({
+      _this.state.location !== null && _this.setState({
         location: null
       });
     };
 
-    _this.refPopupElement = function (zIndex) {
-      if (zIndex) {
-        _this.lastPopupElement = zIndex && findDOMNode(zIndex);
-      }
+    _this.refPopupElement = function (element) {
+      _this.lastPopupElement = element;
     };
 
     _this.handleLayoutEvent = function () {
@@ -165,10 +162,6 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      if (_this.anchorInstance) {
-        _this.updateAnchorElement(_this.extractElement(_this.anchorInstance));
-      }
-
       _this.updateLocation();
     };
 
@@ -198,32 +191,41 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
   };
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+  Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
     /**
     * Delaying updateLocation to ensure it happens after props update
     */
-    if (nextProps.opened) {
-      if (!this.state.location) {
-        this.setState({
+    if (props.opened) {
+      if (!state.location) {
+        return {
           location: DUMMY_LOCATION
-        });
+        };
       }
-
-      this.delayUpdateLocation();
+    } 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 (hadNoLocation && hasLocation && this.props.onOpen) {
       this.props.onOpen();
     }
 
-    if (!hadNoLocation && !this.state.location && this.props.onClose) {
+    if (wasClosed && !hasLocation && this.props.onClose) {
       this.props.onClose();
     }
+
+    if (this.props.opened) {
+      this.delayUpdateLocation();
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -250,42 +252,52 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
     var location = this.state.location;
     var _this$props = this.props,
         anchorElement = _this$props.anchorElement,
         useWrapper = _this$props.useWrapper;
-    var child = null;
+    var anchor = null;
 
     if (isHTMLElement(anchorElement)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
-      child = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
+      anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
     } else {
-      child = /*#__PURE__*/React.createElement("span", null, anchorElement);
+      anchor = /*#__PURE__*/React.createElement("span", null, anchorElement);
     }
 
-    return /*#__PURE__*/React.createElement(RenderContainer, {
-      anchor: child,
-      ref: child ? this.refAnchorElement : undefined
-    }, location && this.renderContent(location));
-  };
+    var anchorWithRef = anchor && /*#__PURE__*/React.isValidElement(anchor) && isRefableElement(anchor) ? /*#__PURE__*/React.cloneElement(anchor, {
+      ref: function ref(instance) {
+        var _anchor;
 
-  _proto.extractElement = function extractElement(instance) {
-    if (!instance) {
-      return null;
-    }
+        _this3.updateAnchorElement(instance);
 
-    var element = findDOMNode(instance);
-    return isHTMLElement(element) ? element : null;
+        var originalRef = (_anchor = anchor) == null ? void 0 : _anchor.ref;
+        originalRef && 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 with RenderContainer's ref
+    // in the case when the anchor is not refable
+
+    return /*#__PURE__*/React.createElement(RenderContainer, {
+      anchor: anchorWithRef || anchor,
+      ref: anchorWithRef ? null : this.renderContainerRef
+    }, location && this.renderContent(location));
   };
 
-  _proto.updateAnchorElement = function updateAnchorElement(element) {
+  _proto.updateAnchorElement = function updateAnchorElement(childInstance) {
+    var childDomNode = getRootNode(childInstance);
     var anchorElement = this.anchorElement;
 
-    if (element !== anchorElement) {
+    if (childDomNode !== anchorElement) {
       this.removeEventListeners(anchorElement);
-      this.anchorElement = element;
-      this.addEventListeners(element);
+      this.anchorElement = childDomNode;
+      this.addEventListeners(childDomNode);
+      this.setRootNode(childDomNode);
     }
   };
 
@@ -310,7 +322,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderContent = function renderContent(location) {
-    var _this3 = this;
+    var _this4 = this;
 
     var _this$props2 = this.props,
         backgroundColor = _this$props2.backgroundColor,
@@ -338,28 +350,30 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       unmountOnExit: true,
       enter: !disableAnimations,
       exit: !disableAnimations,
-      onExited: this.resetLocation
+      onExited: this.resetLocation,
+      nodeRef: this.refForTransition
     }, function (state) {
       var _extends2, _ref;
 
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this3.props, /*#__PURE__*/React.createElement(ZIndex, {
-        ref: _this3.refPopupElement,
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this4.props, /*#__PURE__*/React.createElement(ZIndex, {
+        wrapperRef: _this4.refPopupElement,
         priority: 'Popup',
-        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this3.theme)] = true, _extends2[styles.shadow(_this3.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this3.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this3.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
+        className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this4.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
-        onMouseEnter: _this3.handleMouseEnter,
-        onMouseLeave: _this3.handleMouseLeave
+        onMouseEnter: _this4.handleMouseEnter,
+        onMouseLeave: _this4.handleMouseLeave
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.content(_this3.theme),
-        "data-tid": 'PopupContent'
+        className: styles.content(_this4.theme),
+        "data-tid": 'PopupContent',
+        ref: _this4.refForTransition
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles.contentInner(_this3.theme),
+        className: styles.contentInner(_this4.theme),
         style: {
           backgroundColor: backgroundColor,
-          width: _this3.calculateWidth(width)
+          width: _this4.calculateWidth(width)
         },
         "data-tid": 'PopupContentInner'
-      }, children)), _this3.renderPin(location.position)));
+      }, children)), _this4.renderPin(location.position)));
     });
   };
 
@@ -413,7 +427,13 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
       return false;
     }
 
-    return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    if (!isIE11 && !isEdge) {
+      return x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position;
+    } // Для ie/edge обновляем позицию только при разнице минимум в 1. Иначе есть вероятность
+    // уйти в бесконечный ререндер
+
+
+    return 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) {
@@ -571,9 +591,7 @@ export var Popup = /*#__PURE__*/function (_React$Component) {
   };
 
   return Popup;
-}(React.Component);
-Popup.__KONTUR_REACT_UI__ = 'Popup';
-Popup.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = {
   /**
   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
   */
@@ -634,8 +652,7 @@ Popup.propTypes = {
   * Игнорировать ли события hover/click
   */
   ignoreHover: PropTypes.bool
-};
-Popup.defaultProps = {
+}, _class2.defaultProps = {
   popupOffset: 0,
   hasPin: false,
   hasShadow: false,
@@ -643,4 +660,4 @@ Popup.defaultProps = {
   useWrapper: false,
   ignoreHover: false,
   width: 'auto'
-};
+}, _temp)) || _class;