@skbkontur/react-ui 4.2.2 → 4.4.0

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

@@ -1 +1 @@
-{"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","rootNode","state","highlightedIndex","unmounted","getChildList","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","getAlignRightClass","styles","shadow","hasShadow","getStyle","setRootNode","maxHeight","preventWindowScroll","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isNonNullable","Component","__KONTUR_REACT_UI__","defaultProps","align","width","ret","forEach","push","maxWidth","minWidth","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { MenuItem, MenuItemProps } from '../../components/MenuItem';\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';\nimport { addIconPaddingIfPartOfMenu } from '../InternalMenu/addIconPaddingIfPartOfMenu';\nimport { isIE11 } from '../../lib/client';\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   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n  align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\nexport const MenuDataTids = {\n  root: 'Menu__root',\n} as const;\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    align: 'left',\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    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        data-tid={MenuDataTids.root}\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={getStyle(this.props)}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n          disabled={this.props.disableScrollContainer}\n        >\n          <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private getChildList = () => {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    return React.Children.map(this.props.children, (child, index) => {\n      if (!child) {\n        return child;\n      }\n\n      if (typeof child === 'string' || typeof child === 'number') {\n        return child;\n      }\n\n      const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n      if (isActiveElement(modifiedChild)) {\n        const highlight = this.state.highlightedIndex === index;\n\n        let ref = modifiedChild.ref;\n        if (highlight && typeof modifiedChild.ref !== 'string') {\n          ref = this.refHighlighted.bind(this, modifiedChild.ref);\n        }\n\n        return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n          ref,\n          state: highlight ? 'hover' : modifiedChild.props.state,\n          onClick: this.select.bind(this, index, false),\n          onMouseEnter: this.highlight.bind(this, index),\n          onMouseLeave: this.unhighlight,\n        });\n      }\n\n      return modifiedChild;\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(isNonNullable).length;\n  }\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\nconst getStyle = (props: MenuProps): CSSProperties => {\n  if (props.align === 'right') {\n    return {\n      maxWidth: props.width,\n      minWidth: props.width,\n      maxHeight: props.maxHeight,\n    };\n  }\n\n  return {\n    width: props.width,\n    maxHeight: props.maxHeight,\n  };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n  if (props.align === 'right') {\n    return cx({\n      [styles.alignRight()]: !isIE11,\n      [styles.alignRightIE11()]: isIE11,\n      [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n    });\n  }\n\n  return null;\n};\n"]}
+{"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","rootNode","getProps","defaultProps","state","highlightedIndex","unmounted","getChildList","enableIconPadding","React","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","HTMLElement","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","hasShadow","maxHeight","preventWindowScroll","getAlignRightClass","styles","shadow","getStyle","setRootNode","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","indexOf","isNonNullable","Component","__KONTUR_REACT_UI__","align","width","ret","forEach","push","maxWidth","minWidth","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { MenuItem, MenuItemProps } from '../../components/MenuItem';\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';\nimport { addIconPaddingIfPartOfMenu } from '../InternalMenu/addIconPaddingIfPartOfMenu';\nimport { isIE11 } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\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   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n  align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\nexport const MenuDataTids = {\n  root: 'Menu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps: DefaultProps = {\n    align: 'left',\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  private getProps = createPropsGetter(Menu.defaultProps);\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    if (this.isEmpty()) {\n      return null;\n    }\n    const { hasShadow, maxHeight, preventWindowScroll } = this.getProps();\n\n    return (\n      <div\n        data-tid={MenuDataTids.root}\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: hasShadow,\n        })}\n        style={getStyle(this.props)}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={maxHeight}\n          preventWindowScroll={preventWindowScroll}\n          disabled={this.props.disableScrollContainer}\n        >\n          <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private getChildList = () => {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    return React.Children.map(this.props.children, (child, index) => {\n      if (!child) {\n        return child;\n      }\n\n      if (typeof child === 'string' || typeof child === 'number') {\n        return child;\n      }\n\n      const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n      if (isActiveElement(modifiedChild)) {\n        const highlight = this.state.highlightedIndex === index;\n\n        let ref = modifiedChild.ref;\n        if (highlight && typeof modifiedChild.ref !== 'string') {\n          ref = this.refHighlighted.bind(this, modifiedChild.ref);\n        }\n\n        return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n          ref,\n          state: highlight ? 'hover' : modifiedChild.props.state,\n          onClick: this.select.bind(this, index, false),\n          onMouseEnter: this.highlight.bind(this, index),\n          onMouseLeave: this.unhighlight,\n        });\n      }\n\n      return modifiedChild;\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      const rootNode = getRootNode(this.highlighted);\n      // TODO: Remove this check once IF-647 is resolved\n      if (rootNode instanceof HTMLElement) {\n        this.scrollContainer.scrollTo(rootNode);\n      }\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(isNonNullable).length;\n  }\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\nconst getStyle = (props: MenuProps): CSSProperties => {\n  if (props.align === 'right') {\n    return {\n      maxWidth: props.width,\n      minWidth: props.width,\n      maxHeight: props.maxHeight,\n    };\n  }\n\n  return {\n    width: props.width,\n    maxHeight: props.maxHeight,\n  };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n  if (props.align === 'right') {\n    return cx({\n      [styles.alignRight()]: !isIE11,\n      [styles.alignRightIE11()]: isIE11,\n      [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n    });\n  }\n\n  return null;\n};\n"]}

package/cjs/internal/MobilePopup/MobilePopup.js

@@ -137,7 +137,7 @@ MobilePopup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defa
       _this.contentDiv = contentDiv;
     };_this.
 
-    handleScrollMenu = function (e) {
+    handleScrollMenu = function () {
       if (_this.contentDiv) {
         var isScrolled = _this.contentDiv.scrollTop > 0;
 

package/cjs/internal/MobilePopup/MobilePopup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopup.tsx"],"names":["MobilePopupDataTids","root","container","MobilePopup","state","isScrolled","close","props","onCloseRequest","refContent","contentDiv","handleScrollMenu","e","scrollTop","setState","render","theme","renderMain","content","opened","onClose","appear","exit","jsStyles","containerOpened","rootFullHeight","useFullHeight","undefined","caption","headerChildComponent","stopPropagation","children","bg","bgShowed","withoutRenderContainer","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps {\n  /**\n   * Хэндлер, вызываемый при закрытии меню\n   */\n  onClose?: () => void;\n  caption?: string;\n  /**\n   * Компонент, закрепленный сверху меню (под холдером)\n   */\n  headerChildComponent?: React.ReactNode;\n  useFullHeight?: boolean;\n  withoutRenderContainer?: boolean;\n  /**\n   * Хэндлер, вызываемый при клике по вуали или заголовку\n   */\n  onCloseRequest?: () => void;\n  opened: boolean;\n}\n\ninterface MobilePopupState {\n  isScrolled: boolean;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n} as const;\n\nexport class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private contentDiv: Nullable<HTMLDivElement>;\n  private theme!: Theme;\n\n  public state: MobilePopupState = {\n    isScrolled: false,\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  public renderMain() {\n    const content = (\n      <ZIndex priority={'MobilePopup'}>\n        <Transition\n          in={this.props.opened}\n          onExited={this.props.onClose}\n          mountOnEnter\n          unmountOnExit\n          appear\n          timeout={{ appear: 0, exit: 250 }}\n        >\n          {(state) => (\n            <>\n              <div\n                data-tid={MobilePopupDataTids.container}\n                className={cx({\n                  [jsStyles.container(this.theme)]: true,\n                  [jsStyles.containerOpened()]: state === 'entered',\n                })}\n              >\n                <div\n                  data-tid={MobilePopupDataTids.root}\n                  className={cx({\n                    [jsStyles.root(this.theme)]: true,\n                    [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,\n                  })}\n                  onClick={this.props.useFullHeight ? undefined : this.close}\n                >\n                  <MobilePopupHeader\n                    caption={this.props.caption}\n                    onClose={this.close}\n                    withShadow={this.state.isScrolled}\n                  >\n                    {this.props.headerChildComponent}\n                  </MobilePopupHeader>\n                  <div\n                    onClick={(e) => e.stopPropagation()}\n                    className={jsStyles.content(this.theme)}\n                    onScroll={this.handleScrollMenu}\n                    ref={this.refContent}\n                  >\n                    {this.props.children}\n                  </div>\n                </div>\n              </div>\n              <div\n                onClick={this.close}\n                className={cx({\n                  [jsStyles.bg()]: true,\n                  [jsStyles.bgShowed()]: state === 'entered',\n                })}\n              />\n              <HideBodyVerticalScroll />\n            </>\n          )}\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  private refContent = (contentDiv: HTMLDivElement) => {\n    this.contentDiv = contentDiv;\n  };\n\n  private handleScrollMenu = (e: React.UIEvent<HTMLDivElement>) => {\n    if (this.contentDiv) {\n      const isScrolled = this.contentDiv.scrollTop > 0;\n\n      if (isScrolled !== this.state.isScrolled) {\n        this.setState({ isScrolled });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["MobilePopup.tsx"],"names":["MobilePopupDataTids","root","container","MobilePopup","state","isScrolled","close","props","onCloseRequest","refContent","contentDiv","handleScrollMenu","scrollTop","setState","render","theme","renderMain","content","opened","onClose","appear","exit","jsStyles","containerOpened","rootFullHeight","useFullHeight","undefined","caption","headerChildComponent","e","stopPropagation","children","bg","bgShowed","withoutRenderContainer","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps {\n  /**\n   * Хэндлер, вызываемый при закрытии меню\n   */\n  onClose?: () => void;\n  caption?: string;\n  /**\n   * Компонент, закрепленный сверху меню (под холдером)\n   */\n  headerChildComponent?: React.ReactNode;\n  useFullHeight?: boolean;\n  withoutRenderContainer?: boolean;\n  /**\n   * Хэндлер, вызываемый при клике по вуали или заголовку\n   */\n  onCloseRequest?: () => void;\n  opened: boolean;\n}\n\ninterface MobilePopupState {\n  isScrolled: boolean;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n} as const;\n\nexport class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private contentDiv: Nullable<HTMLDivElement>;\n  private theme!: Theme;\n\n  public state: MobilePopupState = {\n    isScrolled: false,\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  public renderMain() {\n    const content = (\n      <ZIndex priority={'MobilePopup'}>\n        <Transition\n          in={this.props.opened}\n          onExited={this.props.onClose}\n          mountOnEnter\n          unmountOnExit\n          appear\n          timeout={{ appear: 0, exit: 250 }}\n        >\n          {(state) => (\n            <>\n              <div\n                data-tid={MobilePopupDataTids.container}\n                className={cx({\n                  [jsStyles.container(this.theme)]: true,\n                  [jsStyles.containerOpened()]: state === 'entered',\n                })}\n              >\n                <div\n                  data-tid={MobilePopupDataTids.root}\n                  className={cx({\n                    [jsStyles.root(this.theme)]: true,\n                    [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,\n                  })}\n                  onClick={this.props.useFullHeight ? undefined : this.close}\n                >\n                  <MobilePopupHeader\n                    caption={this.props.caption}\n                    onClose={this.close}\n                    withShadow={this.state.isScrolled}\n                  >\n                    {this.props.headerChildComponent}\n                  </MobilePopupHeader>\n                  <div\n                    onClick={(e) => e.stopPropagation()}\n                    className={jsStyles.content(this.theme)}\n                    onScroll={this.handleScrollMenu}\n                    ref={this.refContent}\n                  >\n                    {this.props.children}\n                  </div>\n                </div>\n              </div>\n              <div\n                onClick={this.close}\n                className={cx({\n                  [jsStyles.bg()]: true,\n                  [jsStyles.bgShowed()]: state === 'entered',\n                })}\n              />\n              <HideBodyVerticalScroll />\n            </>\n          )}\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  private refContent = (contentDiv: HTMLDivElement) => {\n    this.contentDiv = contentDiv;\n  };\n\n  private handleScrollMenu = () => {\n    if (this.contentDiv) {\n      const isScrolled = this.contentDiv.scrollTop > 0;\n\n      if (isScrolled !== this.state.isScrolled) {\n        this.setState({ isScrolled });\n      }\n    }\n  };\n}\n"]}

package/cjs/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader.js

@@ -64,6 +64,6 @@ MobilePopupHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose
       e.stopPropagation();
     };_this.
 
-    wrapperClickHandler = function (e) {
+    wrapperClickHandler = function () {
       _this.props.onClose();
     };return _this;}var _proto = MobilePopupHeader.prototype;_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.renderMain = function renderMain() {var _cx, _cx2, _cx3;var _this$props = this.props,caption = _this$props.caption,children = _this$props.children,withShadow = _this$props.withShadow;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_MobilePopupHeader.jsStyles.root(this.theme)] = true, _cx[_MobilePopupHeader.jsStyles.withShadow(this.theme)] = withShadow, _cx)), onClick: this.rootClickHandler }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopupHeader.jsStyles.container() }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopupHeader.jsStyles.closeWrapper(), onClick: this.wrapperClickHandler }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopupHeader.jsStyles.closeHolder() })), /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_MobilePopupHeader.jsStyles.childrenWithoutCaption()] = !caption, _cx2)) }, children), caption && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_MobilePopupHeader.jsStyles.caption(this.theme)] = true, _cx3)) }, caption)));};return MobilePopupHeader;}(_react.default.Component);exports.MobilePopupHeader = MobilePopupHeader;MobilePopupHeader.__KONTUR_REACT_UI__ = 'MobileMenuHeader';

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

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopupHeader.tsx"],"names":["MobilePopupHeader","rootClickHandler","e","stopPropagation","wrapperClickHandler","props","onClose","render","theme","renderMain","caption","children","withShadow","jsStyles","root","container","closeWrapper","closeHolder","isValidElement","childrenWithoutCaption","React","Component","__KONTUR_REACT_UI__"],"mappings":"6PAAA;;;AAGA;AACA;;AAEA,+D;;;;;;;;AAQaA,iB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDHC,IAAAA,gB,GAAmB,UAACC,CAAD,EAAyB;AAClDA,MAAAA,CAAC,CAACC,eAAF;AACD,K;;AAEOC,IAAAA,mB,GAAsB,UAACF,CAAD,EAAyB;AACrD,YAAKG,KAAL,CAAWC,OAAX;AACD,K,+DAjDMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,qBACnB,kBAA0C,KAAKJ,KAA/C,CAAQK,OAAR,eAAQA,OAAR,CAAiBC,QAAjB,eAAiBA,QAAjB,CAA2BC,UAA3B,eAA2BA,UAA3B,CAEA,oBACE,sCACE,SAAS,EAAE,gCACRC,4BAASC,IAAT,CAAc,KAAKN,KAAnB,CADQ,IACoB,IADpB,MAERK,4BAASD,UAAT,CAAoB,KAAKJ,KAAzB,CAFQ,IAE0BI,UAF1B,OADb,EAKE,OAAO,EAAE,KAAKX,gBALhB,iBAOE,sCAAK,SAAS,EAAEY,4BAASE,SAAT,EAAhB,iBACE,sCAAK,SAAS,EAAEF,4BAASG,YAAT,EAAhB,EAAyC,OAAO,EAAE,KAAKZ,mBAAvD,iBACE,sCAAK,SAAS,EAAES,4BAASI,WAAT,EAAhB,GADF,CADF,EAIG,4BAAMC,cAAN,CAAqBP,QAArB,kBACC,sCAAK,SAAS,EAAE,kCAAME,4BAASM,sBAAT,EAAN,IAA0C,CAACT,OAA3C,QAAhB,IAAwEC,QAAxE,CALJ,EAOGD,OAAO,iBACN,sCACE,SAAS,EAAE,kCACRG,4BAASH,OAAT,CAAiB,KAAKF,KAAtB,CADQ,IACuB,IADvB,QADb,IAKGE,OALH,CARJ,CAPF,CADF,CA2BD,C,4BA9CoCU,eAAMC,S,gDAAhCrB,iB,CACGsB,mB,GAAsB,kB","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../../lib/theming/Theme';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { jsStyles } from './MobilePopupHeader.styles';\n\ninterface MobilePopupHeaderProps {\n  caption?: string;\n  onClose: () => void;\n  withShadow?: boolean;\n}\n\nexport class MobilePopupHeader extends React.Component<MobilePopupHeaderProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, children, withShadow } = this.props;\n\n    return (\n      <div\n        className={cx({\n          [jsStyles.root(this.theme)]: true,\n          [jsStyles.withShadow(this.theme)]: withShadow,\n        })}\n        onClick={this.rootClickHandler}\n      >\n        <div className={jsStyles.container()}>\n          <div className={jsStyles.closeWrapper()} onClick={this.wrapperClickHandler}>\n            <div className={jsStyles.closeHolder()} />\n          </div>\n          {React.isValidElement(children) && (\n            <div className={cx({ [jsStyles.childrenWithoutCaption()]: !caption })}>{children}</div>\n          )}\n          {caption && (\n            <div\n              className={cx({\n                [jsStyles.caption(this.theme)]: true,\n              })}\n            >\n              {caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private rootClickHandler = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  private wrapperClickHandler = (e: React.MouseEvent) => {\n    this.props.onClose();\n  };\n}\n"]}
+{"version":3,"sources":["MobilePopupHeader.tsx"],"names":["MobilePopupHeader","rootClickHandler","e","stopPropagation","wrapperClickHandler","props","onClose","render","theme","renderMain","caption","children","withShadow","jsStyles","root","container","closeWrapper","closeHolder","isValidElement","childrenWithoutCaption","React","Component","__KONTUR_REACT_UI__"],"mappings":"6PAAA;;;AAGA;AACA;;AAEA,+D;;;;;;;;AAQaA,iB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgDHC,IAAAA,gB,GAAmB,UAACC,CAAD,EAAyB;AAClDA,MAAAA,CAAC,CAACC,eAAF;AACD,K;;AAEOC,IAAAA,mB,GAAsB,YAAM;AAClC,YAAKC,KAAL,CAAWC,OAAX;AACD,K,+DAjDMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,qBACnB,kBAA0C,KAAKJ,KAA/C,CAAQK,OAAR,eAAQA,OAAR,CAAiBC,QAAjB,eAAiBA,QAAjB,CAA2BC,UAA3B,eAA2BA,UAA3B,CAEA,oBACE,sCACE,SAAS,EAAE,gCACRC,4BAASC,IAAT,CAAc,KAAKN,KAAnB,CADQ,IACoB,IADpB,MAERK,4BAASD,UAAT,CAAoB,KAAKJ,KAAzB,CAFQ,IAE0BI,UAF1B,OADb,EAKE,OAAO,EAAE,KAAKX,gBALhB,iBAOE,sCAAK,SAAS,EAAEY,4BAASE,SAAT,EAAhB,iBACE,sCAAK,SAAS,EAAEF,4BAASG,YAAT,EAAhB,EAAyC,OAAO,EAAE,KAAKZ,mBAAvD,iBACE,sCAAK,SAAS,EAAES,4BAASI,WAAT,EAAhB,GADF,CADF,EAIG,4BAAMC,cAAN,CAAqBP,QAArB,kBACC,sCAAK,SAAS,EAAE,kCAAME,4BAASM,sBAAT,EAAN,IAA0C,CAACT,OAA3C,QAAhB,IAAwEC,QAAxE,CALJ,EAOGD,OAAO,iBACN,sCACE,SAAS,EAAE,kCACRG,4BAASH,OAAT,CAAiB,KAAKF,KAAtB,CADQ,IACuB,IADvB,QADb,IAKGE,OALH,CARJ,CAPF,CADF,CA2BD,C,4BA9CoCU,eAAMC,S,gDAAhCrB,iB,CACGsB,mB,GAAsB,kB","sourcesContent":["import React from 'react';\n\nimport { Theme } from '../../../lib/theming/Theme';\nimport { cx } from '../../../lib/theming/Emotion';\nimport { ThemeContext } from '../../../lib/theming/ThemeContext';\n\nimport { jsStyles } from './MobilePopupHeader.styles';\n\ninterface MobilePopupHeaderProps {\n  caption?: string;\n  onClose: () => void;\n  withShadow?: boolean;\n}\n\nexport class MobilePopupHeader extends React.Component<MobilePopupHeaderProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, children, withShadow } = this.props;\n\n    return (\n      <div\n        className={cx({\n          [jsStyles.root(this.theme)]: true,\n          [jsStyles.withShadow(this.theme)]: withShadow,\n        })}\n        onClick={this.rootClickHandler}\n      >\n        <div className={jsStyles.container()}>\n          <div className={jsStyles.closeWrapper()} onClick={this.wrapperClickHandler}>\n            <div className={jsStyles.closeHolder()} />\n          </div>\n          {React.isValidElement(children) && (\n            <div className={cx({ [jsStyles.childrenWithoutCaption()]: !caption })}>{children}</div>\n          )}\n          {caption && (\n            <div\n              className={cx({\n                [jsStyles.caption(this.theme)]: true,\n              })}\n            >\n              {caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  private rootClickHandler = (e: React.MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  private wrapperClickHandler = () => {\n    this.props.onClose();\n  };\n}\n"]}

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","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"]}
+{"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

@@ -20,24 +20,24 @@ export interface PopupProps extends CommonProps, PopupHandlerProps {
     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;
+    popupOffset?: number;
     positions: Readonly<PopupPositionsType[]>;
     /**
      * Явно указывает, что вложенные элементы должны быть обёрнуты в `<span/>`. <br/> Используется для корректного позиционирования тултипа при двух и более вложенных элементах.
      *
      * _Примечание_: при **двух и более** вложенных элементах обёртка будет добавлена автоматически.
      */
-    useWrapper: boolean;
-    ignoreHover: boolean;
-    width: React.CSSProperties['width'];
+    useWrapper?: boolean;
+    ignoreHover?: boolean;
+    width?: React.CSSProperties['width'];
     /**
      * При очередном рендере пытаться сохранить первоначальную позицию попапа
      * (в числе числе, когда он выходит за пределы экрана, но может быть проскролен в него).
@@ -64,6 +64,7 @@ export declare const PopupDataTids: {
     readonly contentInner: "PopupContentInner";
     readonly popupPin: "PopupPin__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: {
@@ -116,15 +117,8 @@ 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;
@@ -134,7 +128,7 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private isMobileLayout;
     private setRootNode;
     private refForTransition;
-    anchorElement: Nullable<HTMLElement>;
+    anchorElement: Nullable<Element>;
     componentDidMount(): void;
     static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;
     componentDidUpdate(prevProps: PopupProps, prevState: PopupState): void;

package/cjs/internal/Popup/Popup.js

@@ -4,6 +4,7 @@ var _reactTransitionGroup = require("react-transition-group");
 var _raf = _interopRequireDefault(require("raf"));
 var _warning = _interopRequireDefault(require("warning"));
 
+var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _ZIndex = require("../ZIndex");
@@ -22,6 +23,7 @@ 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 _PopupPin = require("./PopupPin");
 var _PopupHelper = require("./PopupHelper");
@@ -121,6 +123,13 @@ var PopupDataTids = {
 
 
 
+
+
+
+
+
+
+
 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.
 
 
@@ -195,6 +204,8 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Popup.defaultProps);_this.
 
 
 
@@ -322,6 +333,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
 
 
     updateAnchorElement = function (instance) {
@@ -348,6 +360,12 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
+
+
+
+
+
 
 
 
@@ -387,13 +405,15 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
     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;
+      var backgroundColor = _this.props.backgroundColor;
+      var width = _this.getProps().width;
 
       return /*#__PURE__*/(
         _react.default.createElement("div", { className: _Popup.styles.content(_this.theme), "data-tid": PopupDataTids.content, ref: _this.refForTransition }, /*#__PURE__*/
@@ -460,6 +480,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
 
 
     resetLocation = function () {
@@ -500,6 +521,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
 
 
     handleLayoutEvent = function () {
@@ -534,22 +556,22 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
       }
     };return _this;}var _proto = Popup.prototype;_proto.componentDidMount = function componentDidMount() {this.updateLocation();this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);};Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {/**
      * Delaying updateLocation to ensure it happens after props update
-     */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();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 _this$props2 = this.props,anchorElement = _this$props2.anchorElement,useWrapper = _this$props2.useWrapper;var anchor = null;if ((0, _SSRSafe.isHTMLElement)(anchorElement)) {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
+     */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();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, _SSRSafe.isElement)(anchorElement)) {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, _SSRSafe.isHTMLElement)(anchorElement);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, _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 _this4 = this;var _this$props3 = this.props,disableAnimations = _this$props3.disableAnimations,maxWidth = _this$props3.maxWidth,hasShadow = _this$props3.hasShadow,ignoreHover = _this$props3.ignoreHover,opened = _this$props3.opened;var 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 _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { "data-tid": 'Popup__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.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) {/**
+    var canGetAnchorNode = !!anchorWithRef || (0, _SSRSafe.isElement)(anchorElement);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, _SSRSafe.isElement)(element)) {// @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+      element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _SSRSafe.isElement)(element)) {// @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+      element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+      element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);}};_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 _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { "data-tid": 'Popup__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.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 ((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);
-
-    }
+     */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 = (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 ((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. Иначе есть вероятность
     // уйти в бесконечный ререндер
@@ -562,15 +584,12 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
   };_proto.
 
   getLocation = function getLocation(popupElement, location) {
-    var _this$props5 = this.props,positions = _this$props5.positions,tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+    var _this$props3 = this.props,positions = _this$props3.positions,tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     var anchorElement = this.anchorElement;
 
-    (0, _warning.default)(
-    anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement),
-    'Anchor element is not defined or not instance of HTMLElement');
-
+    (0, _warning.default)(anchorElement && (0, _SSRSafe.isElement)(anchorElement), 'Anchor element is not defined or not instance of Element');
 
-    if (!(anchorElement && (0, _SSRSafe.isHTMLElement)(anchorElement))) {
+    if (!(anchorElement && (0, _SSRSafe.isElement)(anchorElement))) {
       return location;
     }
 
@@ -613,7 +632,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
   };_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;
     }
 
@@ -634,7 +653,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
     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':