@skbkontur/react-ui 0.0.0-7feb61cdde → 0.0.0-80c5917afc

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

@@ -1 +1 @@
-{"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","responsiveLayout","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","offsetY","top","right","bottom","isMobile","isMobileLayout","getAlignRightClass","styles","rootMobile","shadow","getStyle","setRootNode","disableScrollContainer","scrollContainerMobile","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 { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\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';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\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@responsiveLayout\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 isMobileLayout!: boolean;\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    const offsetY = isTheme2022(this.theme)\n      ? {\n          top: 4,\n          right: 0,\n          bottom: 4,\n        }\n      : {};\n\n    const isMobile = this.isMobileLayout;\n    return (\n      <div\n        data-tid={MenuDataTids.root}\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.rootMobile(this.theme)]: isMobile,\n          [styles.shadow(this.theme)]: hasShadow && !isMobile,\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          offsetY={offsetY}\n        >\n          <div\n            className={cx({\n              [styles.scrollContainer(this.theme)]: true,\n              [styles.scrollContainerMobile(this.theme)]: isMobile,\n            })}\n          >\n            {this.getChildList()}\n          </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"]}
+{"version":3,"sources":["Menu.tsx"],"names":["MenuDataTids","root","Menu","responsiveLayout","rootNode","getProps","defaultProps","state","highlightedIndex","maxHeight","scrollState","unmounted","focusOnRootElement","focus","renderHeader","styles","wrapper","headerWrapper","el","header","contentWrapper","props","menuSeparatorWrapper","theme","renderMenuSeparatorWithNoMargin","renderFooter","footerWrapper","footer","ThemeFactory","create","menuSeparatorMarginY","getChildList","enableIconPadding","children","preventIconsOffset","React","Children","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","setInitialSelection","i","initialSelectedItemIndex","down","shouldRecalculateMaxHeight","prevProps","prevMaxHeight","prevHeader","prevFooter","prevChildrenCount","count","calculateMaxHeight","parsedMaxHeight","window","rootElementMaxHeight","getComputedStyle","parseFloat","calculatedMaxHeight","height","setState","refScrollContainer","scrollContainer","scrollToSelected","highlighted","HTMLElement","scrollTo","scrollToTop","scrollToBottom","handleKeyDown","event","onKeyDown","defaultPrevented","preventDefault","up","getStyle","align","maxWidth","width","minWidth","handleScrollStateChange","componentWillUnmount","componentDidMount","componentDidUpdate","render","renderMain","move","enter","reset","hasHighlightedItem","highlightItem","isEmpty","hasShadow","preventWindowScroll","offsetY","top","scrollContainerScrollBarOffsetY","right","bottom","isMobile","isMobileLayout","getAlignRightClass","mobileRoot","shadow","id","setRootNode","disableScrollContainer","scrollContainerMobile","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","open","location","onItemClick","step","activeElements","filter","isActiveElement","length","cyclicSelection","indexOf","isNonNullable","PureComponent","__KONTUR_REACT_UI__","ret","forEach","push","alignRight","isIE11","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties, HTMLAttributes } from 'react';\n\nimport { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { MenuSeparator } from '../../components/MenuSeparator';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { isHTMLElement } from '../../lib/SSRSafe';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { isNonNullable, isNullable } from '../../lib/utils';\nimport { ScrollContainer, ScrollContainerScrollState } 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';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { isIconPaddingEnabled } from '../InternalMenu/isIconPaddingEnabled';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  /**\n   * Максимальная высота применяется только для скролл контейнера\n   *\n   * Высота `header` и `footer` в нее не включены\n   */\n  maxHeight?: number | string;\n  onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  /**\n   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n  align?: 'left' | 'right';\n  /**\n   * Предотвращает выравнивание текста всех пунктов меню относительно друг друга.\n   * Так, если хотя бы у одного пункта меню есть иконка, текст в  остальных пунктах меню будет выровнен относительно пункта меню с иконкой\n   */\n  preventIconsOffset?: boolean;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  /**\n   * Циклический перебор айтемов меню (по-дефолтну включен)\n   */\n  cyclicSelection?: boolean;\n  initialSelectedItemIndex?: number;\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n  maxHeight: number | string;\n  scrollState: ScrollContainerScrollState;\n}\n\nexport const MenuDataTids = {\n  root: 'Menu__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    MenuProps,\n    | 'align'\n    | 'width'\n    | 'maxHeight'\n    | 'hasShadow'\n    | 'preventWindowScroll'\n    | 'cyclicSelection'\n    | 'initialSelectedItemIndex'\n  >\n>;\n\n@responsiveLayout\n@rootNode\nexport class Menu extends React.PureComponent<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    cyclicSelection: true,\n    initialSelectedItemIndex: -1,\n  };\n\n  private getProps = createPropsGetter(Menu.defaultProps);\n\n  public state: MenuState = {\n    highlightedIndex: -1,\n    maxHeight: this.getProps().maxHeight || 'none',\n    scrollState: 'top',\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private isMobileLayout!: boolean;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n  private setRootNode!: TSetRootNode;\n  private header: Nullable<HTMLDivElement>;\n  private footer: Nullable<HTMLDivElement>;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\n  }\n\n  public componentDidMount() {\n    this.setInitialSelection();\n    this.calculateMaxHeight();\n  }\n\n  public componentDidUpdate(prevProps: MenuProps) {\n    if (this.shouldRecalculateMaxHeight(prevProps)) {\n      this.calculateMaxHeight();\n    }\n\n    if (prevProps.maxHeight !== this.getProps().maxHeight) {\n      this.setState({\n        maxHeight: this.props.maxHeight || 'none',\n      });\n    }\n  }\n\n  public focus() {\n    this.focusOnRootElement();\n  }\n\n  private focusOnRootElement = (): void => {\n    const rootNode = getRootNode(this);\n    if (isHTMLElement(rootNode)) {\n      rootNode?.focus();\n    }\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    const offsetY = isTheme2022(this.theme)\n      ? {\n          top: `${this.theme.scrollContainerScrollBarOffsetY}`,\n          right: 0,\n          bottom: `${this.theme.scrollContainerScrollBarOffsetY}`,\n        }\n      : {};\n\n    const isMobile = this.isMobileLayout;\n    return (\n      <div\n        data-tid={MenuDataTids.root}\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.mobileRoot(this.theme)]: isMobile,\n          [styles.shadow(this.theme)]: hasShadow && !isMobile,\n        })}\n        style={this.getStyle(this.props)}\n        id={this.props.id}\n        onKeyDown={this.handleKeyDown}\n        ref={this.setRootNode}\n        tabIndex={0}\n      >\n        {this.props.header && this.renderHeader()}\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={maxHeight}\n          preventWindowScroll={preventWindowScroll}\n          onScrollStateChange={this.handleScrollStateChange}\n          disabled={this.props.disableScrollContainer}\n          offsetY={offsetY}\n        >\n          <div\n            className={cx({\n              [styles.scrollContainer(this.theme)]: true,\n              [styles.scrollContainerMobile(this.theme)]: isMobile,\n            })}\n          >\n            {this.getChildList()}\n          </div>\n        </ScrollContainer>\n        {this.props.footer && this.renderFooter()}\n      </div>\n    );\n  }\n\n  private renderHeader = () => {\n    return (\n      <div\n        className={cx({\n          [styles.wrapper()]: true,\n          [styles.headerWrapper()]: true,\n        })}\n        ref={(el) => (this.header = el)}\n      >\n        <div className={styles.contentWrapper()}>{this.props.header}</div>\n        <div className={styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'top' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return (\n      <div\n        className={cx({\n          [styles.wrapper()]: true,\n          [styles.footerWrapper()]: true,\n        })}\n        ref={(el) => (this.footer = el)}\n      >\n        <div className={styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'bottom' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n        <div className={styles.contentWrapper()}>{this.props.footer}</div>\n      </div>\n    );\n  };\n\n  private renderMenuSeparatorWithNoMargin = () => {\n    return (\n      <ThemeContext.Provider value={ThemeFactory.create({ menuSeparatorMarginY: '0' }, this.theme)}>\n        <MenuSeparator />\n      </ThemeContext.Provider>\n    );\n  };\n\n  private getChildList = () => {\n    const enableIconPadding = isIconPaddingEnabled(this.props.children, this.props.preventIconsOffset);\n\n    return React.Children.map(this.props.children, (child, index) => {\n      if (typeof child === 'string' || typeof child === 'number' || isNullable(child)) {\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 setInitialSelection = () => {\n    for (let i = this.getProps().initialSelectedItemIndex; i > -1; i--) {\n      this.down();\n    }\n  };\n\n  private shouldRecalculateMaxHeight = (prevProps: MenuProps): boolean => {\n    const { header, footer, children } = this.props;\n    const maxHeight = this.getProps().maxHeight;\n    const prevMaxHeight = prevProps.maxHeight;\n    const prevHeader = prevProps.header;\n    const prevFooter = prevProps.footer;\n    const prevChildrenCount = React.Children.count(prevProps.children);\n\n    return (\n      maxHeight !== prevMaxHeight ||\n      footer !== prevFooter ||\n      header !== prevHeader ||\n      React.Children.count(children) !== prevChildrenCount\n    );\n  };\n\n  private calculateMaxHeight = () => {\n    const maxHeight = this.getProps().maxHeight;\n    let parsedMaxHeight = maxHeight;\n    const rootNode = getRootNode(this);\n\n    if (typeof maxHeight === 'string' && typeof window !== 'undefined' && rootNode) {\n      const rootElementMaxHeight = window.getComputedStyle(rootNode).maxHeight;\n\n      if (rootElementMaxHeight) {\n        parsedMaxHeight = parseFloat(rootElementMaxHeight);\n      }\n    }\n\n    const calculatedMaxHeight =\n      typeof parsedMaxHeight === 'number'\n        ? parsedMaxHeight +\n          ((this.header && getDOMRect(this.header).height) || 0) +\n          ((this.footer && getDOMRect(this.footer).height) || 0)\n        : maxHeight;\n\n    this.setState({\n      maxHeight: calculatedMaxHeight || 'none',\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(event);\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\n      if (!this.getProps().cyclicSelection && (index < 0 || index > children.length)) {\n        return;\n      }\n\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  private handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (typeof this.props.onKeyDown === 'function') {\n      this.props.onKeyDown(event);\n    }\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (isKeyArrowUp(event)) {\n      event.preventDefault();\n      this.up();\n    } else if (isKeyArrowDown(event)) {\n      event.preventDefault();\n      this.down();\n    } else if (isKeyEnter(event)) {\n      if (this.highlighted && this.highlighted.props.onClick) {\n        this.highlighted.props.onClick(event);\n      }\n    }\n  };\n\n  private getStyle = (props: MenuProps): CSSProperties => {\n    if (props.align === 'right') {\n      return {\n        maxWidth: props.width,\n        minWidth: props.width,\n        maxHeight: this.state.maxHeight,\n      };\n    }\n\n    return {\n      width: props.width,\n      maxHeight: this.state.maxHeight,\n    };\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollContainerScrollState) => {\n    if (this.state.scrollState !== scrollState) {\n      this.setState({ scrollState });\n    }\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 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/Menu/Menu.styles.d.ts

@@ -1,11 +1,16 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
-    rootMobile(t: Theme): string;
+    mobileRoot(t: Theme): string;
     alignRight(): string;
     alignRightIE11(): string;
     alignRightIE11FixAutoWidth(): string;
     scrollContainer(t: Theme): string;
     scrollContainerMobile(t: Theme): string;
     shadow(t: Theme): string;
+    wrapper(): string;
+    headerWrapper(): string;
+    footerWrapper(): string;
+    contentWrapper(): string;
+    menuSeparatorWrapper(t: Theme): string;
 };

package/cjs/internal/Menu/Menu.styles.js

@@ -1,20 +1,19 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      overflow: auto;\n      padding: 0 ", ";\n      margin: ", " 0;\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      outline: none;\n      padding: ", " ", ";\n      margin: ", " 0;\n    "])),
     t.menuBgDefault,
     t.menuBorderRadius,
     t.menuBoxSizing,
 
-    t.menuPaddingX,
-    t.menuOffsetY,
-    t.menuBorderRadius);
+    t.menuPaddingY, t.menuPaddingX,
+    t.menuOffsetY);
 
   },
 
-  rootMobile: function rootMobile(t) {
+  mobileRoot: function mobileRoot(t) {
     return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "])),
 
 
@@ -44,13 +43,13 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   scrollContainer: function scrollContainer(t) {
     return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " 0;\n    "])),
-    t.menuPaddingY);
+    t.menuScrollContainerContentWrapperPaddingY);
 
   },
 
   scrollContainerMobile: function scrollContainerMobile(t) {
     return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " 0;\n    "])),
-    t.mobileMenuPaddingY);
+    t.mobileMenuScrollContainerContentWrapperPaddingY);
 
   },
 
@@ -59,4 +58,39 @@ var styles = (0, _Emotion.memoizeStyle)({
     t.menuBorder,
     t.menuShadow);
 
+  },
+
+  wrapper: function wrapper() {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
+
+
+
+
+
+
+
+  },
+
+  headerWrapper: function headerWrapper() {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      top: -5px;\n    "])));
+
+
+  },
+
+  footerWrapper: function footerWrapper() {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: -5px;\n    "])));
+
+
+  },
+
+  contentWrapper: function contentWrapper() {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 6px 18px 7px 8px;\n    "])));
+
+
+  },
+
+  menuSeparatorWrapper: function menuSeparatorWrapper(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    t.menuSeparatorBorderWidth);
+
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Menu.styles.ts"],"names":["styles","root","t","css","menuBgDefault","menuBorderRadius","menuBoxSizing","menuPaddingX","menuOffsetY","rootMobile","mobileMenuPaddingX","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuPaddingY","scrollContainerMobile","mobileMenuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;AAEmBF,IAAAA,CAAC,CAACG,gBAFrB;AAGgBH,IAAAA,CAAC,CAACI,aAHlB;;AAKeJ,IAAAA,CAAC,CAACK,YALjB;AAMYL,IAAAA,CAAC,CAACM,WANd;AAOmBN,IAAAA,CAAC,CAACG,gBAPrB;;AASD,GAXgC;;AAajCI,EAAAA,UAbiC,sBAatBP,CAbsB,EAaZ;AACnB,eAAOC,YAAP;;;AAGeD,IAAAA,CAAC,CAACQ,kBAHjB;;AAKD,GAnBgC;;AAqBjCC,EAAAA,UArBiC,wBAqBpB;AACX,eAAOR,YAAP;;;AAGD,GAzBgC;;AA2BjCS,EAAAA,cA3BiC,4BA2BhB;AACf,eAAOT,YAAP;;;;AAID,GAhCgC;;AAkCjCU,EAAAA,0BAlCiC,wCAkCJ;AAC3B,eAAOV,YAAP;;;;AAID,GAvCgC;;AAyCjCW,EAAAA,eAzCiC,2BAyCjBZ,CAzCiB,EAyCP;AACxB,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACa,YADf;;AAGD,GA7CgC;;AA+CjCC,EAAAA,qBA/CiC,iCA+CXd,CA/CW,EA+CD;AAC9B,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACe,kBADf;;AAGD,GAnDgC;;AAqDjCC,EAAAA,MArDiC,kBAqD1BhB,CArD0B,EAqDhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACiB,UADd;AAEgBjB,IAAAA,CAAC,CAACkB,UAFlB;;AAID,GA1DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      overflow: auto;\n      padding: 0 ${t.menuPaddingX};\n      margin: ${t.menuOffsetY} 0;\n      border-radius: ${t.menuBorderRadius};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  alignRightIE11() {\n    return css`\n      float: right;\n      width: 100%;\n    `;\n  },\n\n  alignRightIE11FixAutoWidth() {\n    return css`\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Menu.styles.ts"],"names":["styles","root","t","css","menuBgDefault","menuBorderRadius","menuBoxSizing","menuPaddingY","menuPaddingX","menuOffsetY","mobileRoot","mobileMenuPaddingX","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuScrollContainerContentWrapperPaddingY","scrollContainerMobile","mobileMenuScrollContainerContentWrapperPaddingY","shadow","menuBorder","menuShadow","wrapper","headerWrapper","footerWrapper","contentWrapper","menuSeparatorWrapper","menuSeparatorBorderWidth"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACE,aADlB;AAEmBF,IAAAA,CAAC,CAACG,gBAFrB;AAGgBH,IAAAA,CAAC,CAACI,aAHlB;;AAKaJ,IAAAA,CAAC,CAACK,YALf,EAK+BL,CAAC,CAACM,YALjC;AAMYN,IAAAA,CAAC,CAACO,WANd;;AAQD,GAVgC;;AAYjCC,EAAAA,UAZiC,sBAYtBR,CAZsB,EAYZ;AACnB,eAAOC,YAAP;;;AAGeD,IAAAA,CAAC,CAACS,kBAHjB;;AAKD,GAlBgC;;AAoBjCC,EAAAA,UApBiC,wBAoBpB;AACX,eAAOT,YAAP;;;AAGD,GAxBgC;;AA0BjCU,EAAAA,cA1BiC,4BA0BhB;AACf,eAAOV,YAAP;;;;AAID,GA/BgC;;AAiCjCW,EAAAA,0BAjCiC,wCAiCJ;AAC3B,eAAOX,YAAP;;;;AAID,GAtCgC;;AAwCjCY,EAAAA,eAxCiC,2BAwCjBb,CAxCiB,EAwCP;AACxB,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACc,yCADf;;AAGD,GA5CgC;;AA8CjCC,EAAAA,qBA9CiC,iCA8CXf,CA9CW,EA8CD;AAC9B,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACgB,+CADf;;AAGD,GAlDgC;;AAoDjCC,EAAAA,MApDiC,kBAoD1BjB,CApD0B,EAoDhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACkB,UADd;AAEgBlB,IAAAA,CAAC,CAACmB,UAFlB;;AAID,GAzDgC;;AA2DjCC,EAAAA,OA3DiC,qBA2DvB;AACR,eAAOnB,YAAP;;;;;;;;AAQD,GApEgC;;AAsEjCoB,EAAAA,aAtEiC,2BAsEjB;AACd,eAAOpB,YAAP;;;AAGD,GA1EgC;;AA4EjCqB,EAAAA,aA5EiC,2BA4EjB;AACd,eAAOrB,YAAP;;;AAGD,GAhFgC;;AAkFjCsB,EAAAA,cAlFiC,4BAkFhB;AACf,eAAOtB,YAAP;;;AAGD,GAtFgC;;AAwFjCuB,EAAAA,oBAxFiC,gCAwFZxB,CAxFY,EAwFF;AAC7B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACyB,wBADd;;AAGD,GA5FgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      outline: none;\n      padding: ${t.menuPaddingY} ${t.menuPaddingX};\n      margin: ${t.menuOffsetY} 0;\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  alignRightIE11() {\n    return css`\n      float: right;\n      width: 100%;\n    `;\n  },\n\n  alignRightIE11FixAutoWidth() {\n    return css`\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuScrollContainerContentWrapperPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n});\n"]}

package/cjs/internal/MobilePopup/MobilePopup.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-interface MobilePopupProps {
+import React, { HTMLAttributes } from 'react';
+interface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     /**
      * Функция, вызываемая при закрытии всплывающего окна
      */

package/cjs/internal/MobilePopup/MobilePopup.js

@@ -91,4 +91,4 @@ MobilePopup = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defa
       if (_this.props.onCloseRequest) {
         _this.props.onCloseRequest();
       }
-    };return _this;}var _proto = MobilePopup.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 content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { className: _MobilePopup.jsStyles.zIndex(), priority: 'MobilePopup' }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.wrapper() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.container, className: _MobilePopup.jsStyles.container(this.theme) }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.root, className: _MobilePopup.jsStyles.root(this.theme) }, /*#__PURE__*/_react.default.createElement(_MobilePopupHeader.MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.content(this.theme) }, this.props.children)), /*#__PURE__*/_react.default.createElement("div", { onClick: this.close, className: _MobilePopup.jsStyles.bottomIndent() }))), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.bg() }), /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null))));if (this.props.withoutRenderContainer) {return content;}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return MobilePopup;}(_react.default.Component);exports.MobilePopup = MobilePopup;MobilePopup.__KONTUR_REACT_UI__ = 'MobileMenuHeader';
+    };return _this;}var _proto = MobilePopup.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 content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: this.props.id, className: _MobilePopup.jsStyles.zIndex(), priority: 'MobilePopup' }, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { in: this.props.opened, onExited: this.props.onClose, mountOnEnter: true, unmountOnExit: true, timeout: 0 }, /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.wrapper() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.close }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.container, className: _MobilePopup.jsStyles.container(this.theme) }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": MobilePopupDataTids.root, className: _MobilePopup.jsStyles.root(this.theme) }, /*#__PURE__*/_react.default.createElement(_MobilePopupHeader.MobilePopupHeader, { caption: this.props.caption }, this.props.headerChildComponent), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.content(this.theme) }, this.props.children)), /*#__PURE__*/_react.default.createElement("div", { onClick: this.close, className: _MobilePopup.jsStyles.bottomIndent() }))), /*#__PURE__*/_react.default.createElement("div", { className: _MobilePopup.jsStyles.bg() }), /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null))));if (this.props.withoutRenderContainer) {return content;}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return MobilePopup;}(_react.default.Component);exports.MobilePopup = MobilePopup;MobilePopup.__KONTUR_REACT_UI__ = 'MobileMenuHeader';

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

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopup.tsx"],"names":["MobilePopupDataTids","root","container","MobilePopup","close","props","onCloseRequest","render","theme","renderMain","content","jsStyles","zIndex","opened","onClose","wrapper","caption","headerChildComponent","children","bottomIndent","bg","withoutRenderContainer","React","Component","__KONTUR_REACT_UI__"],"mappings":"qRAAA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B;AAEjCC,EAAAA,SAAS,EAAE,wBAFsB,EAA5B,C;;;AAKMC,W;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CJC,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKC,KAAL,CAAWC,cAAf,EAA+B;AAC7B,cAAKD,KAAL,CAAWC,cAAX;AACD;AACF,K,yDA3CMC,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,QAEMA,U,GAAP,sBAAoB,CAClB,IAAMC,OAAO,gBACX,6BAAC,cAAD,IAAQ,SAAS,EAAEC,sBAASC,MAAT,EAAnB,EAAsC,QAAQ,EAAE,aAAhD,iBACE,6BAAC,gCAAD,IAAY,EAAE,EAAE,KAAKP,KAAL,CAAWQ,MAA3B,EAAmC,QAAQ,EAAE,KAAKR,KAAL,CAAWS,OAAxD,EAAiE,YAAY,MAA7E,EAA8E,aAAa,MAA3F,EAA4F,OAAO,EAAE,CAArG,iBACE,sCAAK,SAAS,EAAEH,sBAASI,OAAT,EAAhB,iBACE,6BAAC,wBAAD,IAAa,cAAc,EAAE,KAAKX,KAAlC,iBACE,sCAAK,YAAUJ,mBAAmB,CAACE,SAAnC,EAA8C,SAAS,EAAES,sBAAST,SAAT,CAAmB,KAAKM,KAAxB,CAAzD,iBACE,sCAAK,YAAUR,mBAAmB,CAACC,IAAnC,EAAyC,SAAS,EAAEU,sBAASV,IAAT,CAAc,KAAKO,KAAnB,CAApD,iBACE,6BAAC,oCAAD,IAAmB,OAAO,EAAE,KAAKH,KAAL,CAAWW,OAAvC,IAAiD,KAAKX,KAAL,CAAWY,oBAA5D,CADF,eAEE,sCAAK,SAAS,EAAEN,sBAASD,OAAT,CAAiB,KAAKF,KAAtB,CAAhB,IAA+C,KAAKH,KAAL,CAAWa,QAA1D,CAFF,CADF,eAKE,sCAAK,OAAO,EAAE,KAAKd,KAAnB,EAA0B,SAAS,EAAEO,sBAASQ,YAAT,EAArC,GALF,CADF,CADF,eAUE,sCAAK,SAAS,EAAER,sBAASS,EAAT,EAAhB,GAVF,eAWE,6BAAC,8CAAD,OAXF,CADF,CADF,CADF,CAoBA,IAAI,KAAKf,KAAL,CAAWgB,sBAAf,EAAuC,CACrC,OAAOX,OAAP,CACD,CAED,oBAAO,6BAAC,gCAAD,QAAkBA,OAAlB,CAAP,CACD,C,sBA1C8BY,eAAMC,S,oCAA1BpB,W,CACGqB,mB,GAAsB,kB","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 { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: 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> {\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  public renderMain() {\n    const content = (\n      <ZIndex className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div data-tid={MobilePopupDataTids.container} className={jsStyles.container(this.theme)}>\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div className={jsStyles.bg()} />\n            <HideBodyVerticalScroll />\n          </div>\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"]}
+{"version":3,"sources":["MobilePopup.tsx"],"names":["MobilePopupDataTids","root","container","MobilePopup","close","props","onCloseRequest","render","theme","renderMain","content","id","jsStyles","zIndex","opened","onClose","wrapper","caption","headerChildComponent","children","bottomIndent","bg","withoutRenderContainer","React","Component","__KONTUR_REACT_UI__"],"mappings":"qRAAA;AACA;;;AAGA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B;AAEjCC,EAAAA,SAAS,EAAE,wBAFsB,EAA5B,C;;;AAKMC,W;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CJC,IAAAA,K,GAAQ,YAAM;AACnB,UAAI,MAAKC,KAAL,CAAWC,cAAf,EAA+B;AAC7B,cAAKD,KAAL,CAAWC,cAAX;AACD;AACF,K,yDA3CMC,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,QAEMA,U,GAAP,sBAAoB,CAClB,IAAMC,OAAO,gBACX,6BAAC,cAAD,IAAQ,EAAE,EAAE,KAAKL,KAAL,CAAWM,EAAvB,EAA2B,SAAS,EAAEC,sBAASC,MAAT,EAAtC,EAAyD,QAAQ,EAAE,aAAnE,iBACE,6BAAC,gCAAD,IAAY,EAAE,EAAE,KAAKR,KAAL,CAAWS,MAA3B,EAAmC,QAAQ,EAAE,KAAKT,KAAL,CAAWU,OAAxD,EAAiE,YAAY,MAA7E,EAA8E,aAAa,MAA3F,EAA4F,OAAO,EAAE,CAArG,iBACE,sCAAK,SAAS,EAAEH,sBAASI,OAAT,EAAhB,iBACE,6BAAC,wBAAD,IAAa,cAAc,EAAE,KAAKZ,KAAlC,iBACE,sCAAK,YAAUJ,mBAAmB,CAACE,SAAnC,EAA8C,SAAS,EAAEU,sBAASV,SAAT,CAAmB,KAAKM,KAAxB,CAAzD,iBACE,sCAAK,YAAUR,mBAAmB,CAACC,IAAnC,EAAyC,SAAS,EAAEW,sBAASX,IAAT,CAAc,KAAKO,KAAnB,CAApD,iBACE,6BAAC,oCAAD,IAAmB,OAAO,EAAE,KAAKH,KAAL,CAAWY,OAAvC,IAAiD,KAAKZ,KAAL,CAAWa,oBAA5D,CADF,eAEE,sCAAK,SAAS,EAAEN,sBAASF,OAAT,CAAiB,KAAKF,KAAtB,CAAhB,IAA+C,KAAKH,KAAL,CAAWc,QAA1D,CAFF,CADF,eAKE,sCAAK,OAAO,EAAE,KAAKf,KAAnB,EAA0B,SAAS,EAAEQ,sBAASQ,YAAT,EAArC,GALF,CADF,CADF,eAUE,sCAAK,SAAS,EAAER,sBAASS,EAAT,EAAhB,GAVF,eAWE,6BAAC,8CAAD,OAXF,CADF,CADF,CADF,CAoBA,IAAI,KAAKhB,KAAL,CAAWiB,sBAAf,EAAuC,CACrC,OAAOZ,OAAP,CACD,CAED,oBAAO,6BAAC,gCAAD,QAAkBA,OAAlB,CAAP,CACD,C,sBA1C8Ba,eAAMC,S,oCAA1BrB,W,CACGsB,mB,GAAsB,kB","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps extends Pick<HTMLAttributes<HTMLDivElement>, 'id'> {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: 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> {\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  public renderMain() {\n    const content = (\n      <ZIndex id={this.props.id} className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div data-tid={MobilePopupDataTids.container} className={jsStyles.container(this.theme)}>\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div className={jsStyles.bg()} />\n            <HideBodyVerticalScroll />\n          </div>\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"]}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { FocusEventType, MouseEventType } from '../../typings/event-types';
@@ -16,7 +16,7 @@ export interface PopupHandlerProps {
     onOpen?: () => void;
     onClose?: () => void;
 }
-export interface PopupProps extends Omit<CommonProps, 'children'>, PopupHandlerProps {
+export interface PopupProps extends Omit<CommonProps, 'children'>, PopupHandlerProps, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     anchorElement: React.ReactNode | HTMLElement;
     backgroundColor?: React.CSSProperties['backgroundColor'];
     borderColor?: React.CSSProperties['borderColor'];
@@ -65,10 +65,14 @@ export interface PopupState {
     location: Nullable<PopupLocation>;
 }
 export declare const PopupDataTids: {
+    readonly root: "Popup__root";
     readonly content: "PopupContent";
     readonly contentInner: "PopupContentInner";
     readonly popupPin: "PopupPin__root";
 };
+export declare const PopupIds: {
+    root: "Popup__root";
+};
 declare type DefaultProps = Required<Pick<PopupProps, 'popupOffset' | 'hasPin' | 'hasShadow' | 'disableAnimations' | 'useWrapper' | 'ignoreHover' | 'width'>>;
 export declare class Popup extends React.Component<PopupProps, PopupState> {
     static __KONTUR_REACT_UI__: string;
@@ -134,6 +138,7 @@ export declare class Popup extends React.Component<PopupProps, PopupState> {
     private setRootNode;
     private refForTransition;
     private hasAnchorElementListeners;
+    private rootId;
     anchorElement: Nullable<Element>;
     componentDidMount(): void;
     static getDerivedStateFromProps(props: Readonly<PopupProps>, state: PopupState): PopupState;

package/cjs/internal/Popup/Popup.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PopupPositions = exports.PopupDataTids = exports.Popup = exports.DefaultPosition = exports.DUMMY_LOCATION = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PopupPositions = exports.PopupIds = exports.PopupDataTids = exports.Popup = exports.DefaultPosition = exports.DUMMY_LOCATION = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactTransitionGroup = require("react-transition-group");
 var _raf = _interopRequireDefault(require("raf"));
@@ -115,14 +115,22 @@ var DUMMY_LOCATION = {
 
 
 
+
+
+
 
 
 
 
 var PopupDataTids = {
+  root: 'Popup__root',
   content: 'PopupContent',
   contentInner: 'PopupContentInner',
-  popupPin: 'PopupPin__root' };exports.PopupDataTids = PopupDataTids;var
+  popupPin: 'PopupPin__root' };exports.PopupDataTids = PopupDataTids;
+
+
+var PopupIds = {
+  root: PopupDataTids.root };exports.PopupIds = PopupIds;var
 
 
 
@@ -223,6 +231,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
     refForTransition = /*#__PURE__*/_react.default.createRef();_this.
     hasAnchorElementListeners = false;_this.
+    rootId = PopupIds.root + (0, _utils.getRandomID)();_this.
 
     anchorElement = null;_this.
 
@@ -496,6 +505,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
 
 
 
+
 
 
     resetLocation = function () {
@@ -586,7 +596,7 @@ Popup = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class
       element.addEventListener('click', this.handleClick);element.addEventListener('focusin', this.handleFocus);element.addEventListener('focusout', this.handleBlur);this.hasAnchorElementListeners = true;}};_proto.removeEventListeners = function removeEventListeners(element) {if (element && (0, _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);this.hasAnchorElementListeners = false;}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$props = this.props,maxWidth = _this$props.maxWidth,opened = _this$props.opened;var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,disableAnimations = _this$getProps.disableAnimations,ignoreHover = _this$getProps.ignoreHover;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _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.props.withoutMobile) && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
+      element.removeEventListener('click', this.handleClick);element.removeEventListener('focusin', this.handleFocus);element.removeEventListener('focusout', this.handleBlur);this.hasAnchorElementListeners = false;}};_proto.renderContent = function renderContent(location) {var _this4 = this;var _this$props = this.props,maxWidth = _this$props.maxWidth,opened = _this$props.opened;var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,disableAnimations = _this$getProps.disableAnimations,ignoreHover = _this$getProps.ignoreHover;var children = this.renderChildren();var _PopupHelper$getPosit = _PopupHelper.PopupHelper.getPositionObject(location.position),direction = _PopupHelper$getPosit.direction;var rootStyle = (0, _extends3.default)({}, location.coordinates, { maxWidth: maxWidth });var shouldFallbackShadow = _client.isIE11 || _client.isEdge || _client.isSafari;return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, { timeout: TRANSITION_TIMEOUT, appear: !disableAnimations, in: Boolean(opened && children), mountOnEnter: true, unmountOnExit: true, enter: !disableAnimations, exit: !disableAnimations, onExited: this.resetLocation, nodeRef: this.refForTransition }, function (state) {var _this4$props$id, _extends2, _ref;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends3.default)({}, _this4.props, { rootNodeRef: _this4.setRootNode }), /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId, "data-tid": PopupDataTids.root, wrapperRef: _this4.refPopupElement, priority: 'Popup', className: (0, _Emotion.cx)((0, _extends3.default)((_extends2 = {}, _extends2[_Popup.styles.popup(_this4.theme)] = true, _extends2[_Popup.styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[_Popup.styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[_Popup.styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[_Popup.styles["transition-enter-" + direction](_this4.theme)] = true, _ref[_Popup.styles.transitionEnter()] = state === 'entering', _ref[_Popup.styles.transitionEnterActive()] = state === 'entered', _ref[_Popup.styles.transitionExit()] = state === 'exiting', _ref))), style: rootStyle, onMouseEnter: _this4.handleMouseEnter, onMouseLeave: _this4.handleMouseLeave }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));});};_proto.renderChildren = function renderChildren() {return (0, _utils.isFunction)(this.props.children) ? this.props.children() : this.props.children;};_proto.renderPin = function renderPin(positionName) {/**
      * Box-shadow does not appear under the pin. Borders are used instead.
      * In non-ie browsers drop-shadow filter is used. It is applying
      * shadow to the pin too.