@skbkontur/react-ui 0.0.0-5a76463ffc → 0.0.0-60bf3b9da8

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js

@@ -4,6 +4,7 @@ import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { Popup } from "../../../internal/Popup";
 import { ComboBoxMenu } from "../../../internal/CustomComboBox";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { TokenInputDataTids } from "../TokenInput";
 export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(TokenInputMenu, _React$Component);
 
@@ -15,7 +16,6 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
     _this.menu = null;
 
     _this.getMenuRef = function () {
@@ -45,7 +45,8 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
       _this2.theme = theme;
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
         value: ThemeFactory.create({
-          popupMargin: _this2.getPopupMargin() + 'px'
+          popupMargin: _this2.getPopupMargin() + 'px',
+          popupBackground: _this2.theme.tokenInputMenuPopupBg
         }, theme)
       }, _this2.renderMain());
     });
@@ -62,12 +63,21 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
         renderNotFound = _this$props.renderNotFound,
         renderItem = _this$props.renderItem,
         onValueChange = _this$props.onValueChange,
-        renderAddButton = _this$props.renderAddButton;
+        renderAddButton = _this$props.renderAddButton,
+        anchorElement = _this$props.anchorElement,
+        menuWidth = _this$props.menuWidth,
+        menuAlign = _this$props.menuAlign;
     return /*#__PURE__*/React.createElement(Popup, {
-      opened: opened,
-      positions: ['bottom left'],
-      anchorElement: this.props.anchorElement,
-      popupOffset: 5
+      id: this.props.popupMenuId,
+      "data-tid": TokenInputDataTids.tokenInputMenu,
+      opened: !!opened,
+      positions: ['bottom left', 'top left'],
+      anchorElement: anchorElement,
+      popupOffset: menuAlign === 'left' ? 0 : 5,
+      margin: menuAlign === 'left' ? 1 : undefined,
+      hasShadow: true,
+      width: menuAlign === 'cursor' ? 'auto' : menuWidth,
+      withoutMobile: true
     }, /*#__PURE__*/React.createElement(ComboBoxMenu, {
       items: items,
       loading: loading,

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputMenu","theme","menu","getMenuRef","getPopupMargin","paddingY","parseInt","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,KAAT,QAAsB,sBAAtB;AACA,SAASC,YAAT,QAAgD,+BAAhD;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;;;;;;AAMA,WAAaC,cAAb;;;AAGUC,IAAAA,KAHV;;AAKUC,IAAAA,IALV,GAK8B,IAL9B;;;;;;;;;;;;;;;;;;;;;;;;AA6BSC,IAAAA,UA7BT,GA6BsB,oBAAkB,MAAKD,IAAvB,EA7BtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEUE,IAAAA,cAhEV,GAgE2B,YAAc;AACrC,UAAMC,QAAQ,GAAGC,QAAQ,CAAC,MAAKL,KAAL,CAAWM,kBAAZ,EAAgC,EAAhC,CAAR,IAA+C,CAAhE;AACA,UAAMC,YAAY,GAAGF,QAAQ,CAAC,MAAKL,KAAL,CAAWQ,mBAAZ,EAAiC,EAAjC,CAAR,IAAgD,CAArE;AACA,UAAMC,OAAO,GAAGJ,QAAQ,CAAC,MAAKL,KAAL,CAAWU,YAAZ,EAA0B,EAA1B,CAAR,IAAyC,CAAzD;AACA,aAAON,QAAQ,GAAGG,YAAX,GAA0BE,OAAjC;AACD,KArEH;;AAuEUE,IAAAA,OAvEV,GAuEoB,UAACC,IAAD,UAAgB,MAAKX,IAAL,GAAYW,IAA5B,EAvEpB,4DAOSC,MAPT,GAOE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAAb,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,IACE,KAAK,EAAEL,YAAY,CAACmB,MAAb,CACL,EACEC,WAAW,EAAE,MAAI,CAACZ,cAAL,KAAwB,IADvC,EADK,EAILH,KAJK,CADT,IAQG,MAAI,CAACgB,UAAL,EARH,CADF,CAYD,CAfH,CADF,CAmBD,CA3BH,QA+BUA,UA/BV,GA+BE,sBAAqB,mBAYf,KAAKC,KAZU,CAEjBC,OAFiB,eAEjBA,OAFiB,CAGjBC,aAHiB,eAGjBA,aAHiB,CAIjBC,gBAJiB,eAIjBA,gBAJiB,CAKjBC,UALiB,eAKjBA,UALiB,CAMjBC,MANiB,eAMjBA,MANiB,CAOjBC,KAPiB,eAOjBA,KAPiB,CAQjBC,cARiB,eAQjBA,cARiB,CASjBC,UATiB,eASjBA,UATiB,CAUjBC,aAViB,eAUjBA,aAViB,CAWjBC,eAXiB,eAWjBA,eAXiB,CAcnB,oBACE,oBAAC,KAAD,IAAO,MAAM,EAAEL,MAAf,EAAwB,SAAS,EAAE,CAAC,aAAD,CAAnC,EAAoD,aAAa,EAAE,KAAKL,KAAL,CAAWW,aAA9E,EAA6F,WAAW,EAAE,CAA1G,iBACE,oBAAC,YAAD,IACE,KAAK,EAAEL,KADT,EAEE,OAAO,EAAEL,OAFX,EAGE,aAAa,EAAEC,aAHjB,EAIE,aAAa,EAAEO,aAJjB,EAKE,MAAM,EAAEJ,MALV,EAME,OAAO,EAAE,KAAKX,OANhB,EAOE,gBAAgB,EAAES,gBAPpB,EAQE,UAAU,EAAEK,UARd,EASE,cAAc,EAAED,cATlB,EAUE,UAAU,EAAEH,UAVd,EAWE,eAAe,EAAEM,eAXnB,GADF,CADF,CAiBD,CA9DH,yBAAgDjC,KAAK,CAACmC,SAAtD,EAAa9B,c,CACG+B,mB,GAAsB,gB","sourcesContent":["import React from 'react';\r\n\r\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Popup } from '../../internal/Popup';\r\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\r\nimport { Menu } from '../../internal/Menu';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\r\n  anchorElement: HTMLElement;\r\n}\r\n\r\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\r\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\r\n\r\n  private theme!: Theme;\r\n\r\n  private menu: Menu | null = null;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return (\r\n            <ThemeContext.Provider\r\n              value={ThemeFactory.create(\r\n                {\r\n                  popupMargin: this.getPopupMargin() + 'px',\r\n                },\r\n                theme,\r\n              )}\r\n            >\r\n              {this.renderMain()}\r\n            </ThemeContext.Provider>\r\n          );\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  public getMenuRef = (): any | null => this.menu;\r\n\r\n  private renderMain() {\r\n    const {\r\n      loading,\r\n      maxMenuHeight,\r\n      renderTotalCount,\r\n      totalCount,\r\n      opened,\r\n      items,\r\n      renderNotFound,\r\n      renderItem,\r\n      onValueChange,\r\n      renderAddButton,\r\n    } = this.props;\r\n\r\n    return (\r\n      <Popup opened={opened!} positions={['bottom left']} anchorElement={this.props.anchorElement} popupOffset={5}>\r\n        <ComboBoxMenu\r\n          items={items}\r\n          loading={loading}\r\n          maxMenuHeight={maxMenuHeight}\r\n          onValueChange={onValueChange}\r\n          opened={opened}\r\n          refMenu={this.menuRef}\r\n          renderTotalCount={renderTotalCount}\r\n          renderItem={renderItem}\r\n          renderNotFound={renderNotFound}\r\n          totalCount={totalCount}\r\n          renderAddButton={renderAddButton}\r\n        />\r\n      </Popup>\r\n    );\r\n  }\r\n\r\n  private getPopupMargin = (): number => {\r\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\r\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\r\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\r\n    return paddingY + outlineWidth + marginY;\r\n  };\r\n\r\n  private menuRef = (node: any) => (this.menu = node);\r\n}\r\n"]}
+{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputDataTids","TokenInputMenu","menu","getMenuRef","getPopupMargin","paddingY","parseInt","theme","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","popupBackground","tokenInputMenuPopupBg","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","popupMenuId","tokenInputMenu","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { HTMLProps } from '../../typings/html';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup, PopupProps } from '../../internal/Popup';\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { Menu } from '../../internal/Menu';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: PopupProps['anchorElement'];\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  menuAlign: TokenInputMenuAlign;\n  /**\n   * Позволяет задать `id` выпадающему меню.\n   *\n   * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.\n   */\n  popupMenuId?: HTMLProps['id'];\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n\n  private theme!: Theme;\n\n  private menu: Menu | null = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: this.getPopupMargin() + 'px',\n                  popupBackground: this.theme.tokenInputMenuPopupBg,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getMenuRef = (): any | null => this.menu;\n\n  private renderMain() {\n    const {\n      loading,\n      maxMenuHeight,\n      renderTotalCount,\n      totalCount,\n      opened,\n      items,\n      renderNotFound,\n      renderItem,\n      onValueChange,\n      renderAddButton,\n      anchorElement,\n      menuWidth,\n      menuAlign,\n    } = this.props;\n\n    return (\n      <Popup\n        id={this.props.popupMenuId}\n        data-tid={TokenInputDataTids.tokenInputMenu}\n        opened={!!opened}\n        positions={['bottom left', 'top left']}\n        anchorElement={anchorElement}\n        popupOffset={menuAlign === 'left' ? 0 : 5}\n        margin={menuAlign === 'left' ? 1 : undefined}\n        hasShadow\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n        withoutMobile\n      >\n        <ComboBoxMenu\n          items={items}\n          loading={loading}\n          maxMenuHeight={maxMenuHeight}\n          onValueChange={onValueChange}\n          opened={opened}\n          refMenu={this.menuRef}\n          renderTotalCount={renderTotalCount}\n          renderItem={renderItem}\n          renderNotFound={renderNotFound}\n          totalCount={totalCount}\n          renderAddButton={renderAddButton}\n        />\n      </Popup>\n    );\n  }\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\n\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"]}

package/components/TokenInput/TokenInputMenu.d.ts

@@ -1,14 +1,25 @@
 import React from 'react';
+import { HTMLProps } from '../../typings/html';
+import { PopupProps } from '../../internal/Popup';
 import { ComboBoxMenuProps } from '../../internal/CustomComboBox';
+import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
 export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
-    anchorElement: HTMLElement;
+    anchorElement: PopupProps['anchorElement'];
+    menuWidth: TokenInputProps<string>['menuWidth'];
+    menuAlign: TokenInputMenuAlign;
+    /**
+     * Позволяет задать `id` выпадающему меню.
+     *
+     * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.
+     */
+    popupMenuId?: HTMLProps['id'];
 }
 export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
     static __KONTUR_REACT_UI__: string;
     private theme;
     private menu;
     render(): JSX.Element;
-    getMenuRef: () => any;
+    getMenuRef: () => any | null;
     private renderMain;
     private getPopupMargin;
     private menuRef;

package/components/TokenInput/TokenInputReducer/TokenInputReducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputReducer.ts"],"names":["DefaultState","TokenActions","SET_INPUT_VALUE_WIDTH","SET_INPUT_VALUE_HEIGHT","UPDATE_QUERY","SET_FOCUS_IN","SET_PREVENT_BLUR","BLUR","SET_AUTOCOMPLETE_ITEMS","SET_ACTIVE_TOKENS","REMOVE_ALL_ACTIVE_TOKENS","SET_LOADING","CLEAR_INPUT","RESET","SET_EDITING_TOKEN_INDEX","REMOVE_EDITING_TOKEN_INDEX","SET_TEMPORARY_QUERY","REMOVE_TEMPORARY_QUERY","tokenInputReducer","state","action","payload","type","inputValueWidth","inputValueHeight","inputValue","inFocus","preventBlur","autocompleteItems","activeTokens","undefined","loading","editingTokenIndex","reservedInputValue"],"mappings":"AAAA,SAA0BA,YAA1B,QAA8C,cAA9C;;;;;;;AAOA,OAAO,IAAMC,YAAY,GAAG;AAC1BC,EAAAA,qBAAqB,EAAE,uBADG;AAE1BC,EAAAA,sBAAsB,EAAE,wBAFE;AAG1BC,EAAAA,YAAY,EAAE,cAHY;AAI1BC,EAAAA,YAAY,EAAE,cAJY;AAK1BC,EAAAA,gBAAgB,EAAE,kBALQ;AAM1BC,EAAAA,IAAI,EAAE,MANoB;AAO1BC,EAAAA,sBAAsB,EAAE,wBAPE;AAQ1BC,EAAAA,iBAAiB,EAAE,mBARO;AAS1BC,EAAAA,wBAAwB,EAAE,0BATA;AAU1BC,EAAAA,WAAW,EAAE,aAVa;AAW1BC,EAAAA,WAAW,EAAE,aAXa;AAY1BC,EAAAA,KAAK,EAAE,OAZmB;AAa1BC,EAAAA,uBAAuB,EAAE,yBAbC;AAc1BC,EAAAA,0BAA0B,EAAE,4BAdF;AAe1BC,EAAAA,mBAAmB,EAAE,qBAfK;AAgB1BC,EAAAA,sBAAsB,EAAE,wBAhBE,EAArB;;;;;AAqBP,OAAO,SAASC,iBAAT;AACLC,KADK;AAELC,MAFK;AAG4B;AACjC,MAAMC,OAAO,GAAGD,MAAM,CAACC,OAAvB;AACA,UAAQD,MAAM,CAACE,IAAf;AACE,SAAKrB,YAAY,CAACC,qBAAlB,CAAyC;AACvC,eAAO,EAAEqB,eAAe,EAAEF,OAAnB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACE,sBAAlB,CAA0C;AACxC,eAAO,EAAEqB,gBAAgB,EAAEH,OAApB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACG,YAAlB,CAAgC;AAC9B,eAAO,EAAEqB,UAAU,EAAEJ,OAAd,EAAP;AACD;AACD,SAAKpB,YAAY,CAACI,YAAlB,CAAgC;AAC9B,eAAO,EAAEqB,OAAO,EAAE,IAAX,EAAP;AACD;AACD,SAAKzB,YAAY,CAACK,gBAAlB,CAAoC;AAClC,eAAO,EAAEqB,WAAW,EAAEN,OAAf,EAAP;AACD;AACD,SAAKpB,YAAY,CAACO,sBAAlB,CAA0C;AACxC,eAAO,EAAEoB,iBAAiB,EAAEP,OAArB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACQ,iBAAlB,CAAqC;AACnC,eAAO,EAAEoB,YAAY,EAAER,OAAhB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACM,IAAlB,CAAwB;AACtB,eAAO;AACLmB,UAAAA,OAAO,EAAE,KADJ;AAELC,UAAAA,WAAW,EAAE,KAFR;AAGLC,UAAAA,iBAAiB,EAAEE,SAHd;AAILD,UAAAA,YAAY,EAAE,EAJT,EAAP;;AAMD;AACD,SAAK5B,YAAY,CAACS,wBAAlB,CAA4C;AAC1C,eAAO,EAAEmB,YAAY,EAAE,EAAhB,EAAP;AACD;AACD,SAAK5B,YAAY,CAACW,WAAlB,CAA+B;AAC7B,eAAO,EAAEa,UAAU,EAAE,EAAd,EAAkBG,iBAAiB,EAAEE,SAArC,EAAP;AACD;AACD,SAAK7B,YAAY,CAACU,WAAlB,CAA+B;AAC7B,eAAO;AACLoB,UAAAA,OAAO,EAAEV,OADJ,EAAP;;AAGD;AACD,SAAKpB,YAAY,CAACY,KAAlB,CAAyB;AACvB,eAAOb,YAAP;AACD;AACD,SAAKC,YAAY,CAACa,uBAAlB,CAA2C;AACzC,eAAO,EAAEkB,iBAAiB,EAAEX,OAArB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACc,0BAAlB,CAA8C;AAC5C,eAAO,EAAEiB,iBAAiB,EAAE,CAAC,CAAtB,EAAP;AACD;AACD,SAAK/B,YAAY,CAACe,mBAAlB,CAAuC;AACrC,eAAO,EAAEiB,kBAAkB,EAAEZ,OAAtB,EAAP;AACD;AACD,SAAKpB,YAAY,CAACgB,sBAAlB,CAA0C;AACxC,eAAO,EAAEgB,kBAAkB,EAAEH,SAAtB,EAAP;AACD;AACD;AACE,aAAOX,KAAP,CAzDJ;;AA2DD","sourcesContent":["import { TokenInputState, DefaultState } from './TokenInput';\r\n\r\nexport interface TokenInputAction {\r\n  type: TokenInputActionType;\r\n  payload?: any;\r\n}\r\n\r\nexport const TokenActions = {\r\n  SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',\r\n  SET_INPUT_VALUE_HEIGHT: 'SET_INPUT_VALUE_HEIGHT',\r\n  UPDATE_QUERY: 'UPDATE_QUERY',\r\n  SET_FOCUS_IN: 'SET_FOCUS_IN',\r\n  SET_PREVENT_BLUR: 'SET_PREVENT_BLUR',\r\n  BLUR: 'BLUR',\r\n  SET_AUTOCOMPLETE_ITEMS: 'SET_AUTOCOMPLETE_ITEMS',\r\n  SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',\r\n  REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',\r\n  SET_LOADING: 'SET_LOADING',\r\n  CLEAR_INPUT: 'CLEAR_INPUT',\r\n  RESET: 'RESET',\r\n  SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',\r\n  REMOVE_EDITING_TOKEN_INDEX: 'REMOVE_EDITING_TOKEN_INDEX',\r\n  SET_TEMPORARY_QUERY: 'SET_TEMPORARY_QUERY',\r\n  REMOVE_TEMPORARY_QUERY: 'REMOVE_TEMPORARY_QUERY',\r\n};\r\n\r\nexport type TokenInputActionType = keyof typeof TokenActions;\r\n\r\nexport function tokenInputReducer<T = string>(\r\n  state: TokenInputState<T>,\r\n  action: TokenInputAction,\r\n): Pick<TokenInputState<T>, never> {\r\n  const payload = action.payload;\r\n  switch (action.type) {\r\n    case TokenActions.SET_INPUT_VALUE_WIDTH: {\r\n      return { inputValueWidth: payload };\r\n    }\r\n    case TokenActions.SET_INPUT_VALUE_HEIGHT: {\r\n      return { inputValueHeight: payload };\r\n    }\r\n    case TokenActions.UPDATE_QUERY: {\r\n      return { inputValue: payload };\r\n    }\r\n    case TokenActions.SET_FOCUS_IN: {\r\n      return { inFocus: true };\r\n    }\r\n    case TokenActions.SET_PREVENT_BLUR: {\r\n      return { preventBlur: payload };\r\n    }\r\n    case TokenActions.SET_AUTOCOMPLETE_ITEMS: {\r\n      return { autocompleteItems: payload };\r\n    }\r\n    case TokenActions.SET_ACTIVE_TOKENS: {\r\n      return { activeTokens: payload };\r\n    }\r\n    case TokenActions.BLUR: {\r\n      return {\r\n        inFocus: false,\r\n        preventBlur: false,\r\n        autocompleteItems: undefined,\r\n        activeTokens: [],\r\n      };\r\n    }\r\n    case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {\r\n      return { activeTokens: [] };\r\n    }\r\n    case TokenActions.CLEAR_INPUT: {\r\n      return { inputValue: '', autocompleteItems: undefined };\r\n    }\r\n    case TokenActions.SET_LOADING: {\r\n      return {\r\n        loading: payload,\r\n      };\r\n    }\r\n    case TokenActions.RESET: {\r\n      return DefaultState;\r\n    }\r\n    case TokenActions.SET_EDITING_TOKEN_INDEX: {\r\n      return { editingTokenIndex: payload };\r\n    }\r\n    case TokenActions.REMOVE_EDITING_TOKEN_INDEX: {\r\n      return { editingTokenIndex: -1 };\r\n    }\r\n    case TokenActions.SET_TEMPORARY_QUERY: {\r\n      return { reservedInputValue: payload };\r\n    }\r\n    case TokenActions.REMOVE_TEMPORARY_QUERY: {\r\n      return { reservedInputValue: undefined };\r\n    }\r\n    default:\r\n      return state;\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["TokenInputReducer.ts"],"names":["DefaultState","TokenActions","SET_INPUT_VALUE_WIDTH","SET_INPUT_VALUE_HEIGHT","UPDATE_QUERY","SET_FOCUS_IN","SET_PREVENT_BLUR","BLUR","SET_AUTOCOMPLETE_ITEMS","SET_ACTIVE_TOKENS","REMOVE_ALL_ACTIVE_TOKENS","SET_LOADING","CLEAR_INPUT","RESET","SET_EDITING_TOKEN_INDEX","REMOVE_EDITING_TOKEN_INDEX","SET_TEMPORARY_QUERY","REMOVE_TEMPORARY_QUERY","tokenInputReducer","state","action","payload","type","inputValueWidth","inputValueHeight","inputValue","inFocus","preventBlur","autocompleteItems","activeTokens","undefined","loading","editingTokenIndex","reservedInputValue"],"mappings":"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","sourcesContent":["import { TokenInputState, DefaultState } from './TokenInput';\n\nexport interface TokenInputAction {\n  type: TokenInputActionType;\n  payload?: any;\n}\n\nexport const TokenActions = {\n  SET_INPUT_VALUE_WIDTH: 'SET_INPUT_VALUE_WIDTH',\n  SET_INPUT_VALUE_HEIGHT: 'SET_INPUT_VALUE_HEIGHT',\n  UPDATE_QUERY: 'UPDATE_QUERY',\n  SET_FOCUS_IN: 'SET_FOCUS_IN',\n  SET_PREVENT_BLUR: 'SET_PREVENT_BLUR',\n  BLUR: 'BLUR',\n  SET_AUTOCOMPLETE_ITEMS: 'SET_AUTOCOMPLETE_ITEMS',\n  SET_ACTIVE_TOKENS: 'SET_ACTIVE_TOKENS',\n  REMOVE_ALL_ACTIVE_TOKENS: 'REMOVE_ALL_ACTIVE_TOKENS',\n  SET_LOADING: 'SET_LOADING',\n  CLEAR_INPUT: 'CLEAR_INPUT',\n  RESET: 'RESET',\n  SET_EDITING_TOKEN_INDEX: 'SET_EDITING_TOKEN_INDEX',\n  REMOVE_EDITING_TOKEN_INDEX: 'REMOVE_EDITING_TOKEN_INDEX',\n  SET_TEMPORARY_QUERY: 'SET_TEMPORARY_QUERY',\n  REMOVE_TEMPORARY_QUERY: 'REMOVE_TEMPORARY_QUERY',\n};\n\nexport type TokenInputActionType = keyof typeof TokenActions;\n\nexport function tokenInputReducer<T = string>(\n  state: TokenInputState<T>,\n  action: TokenInputAction,\n): Pick<TokenInputState<T>, never> {\n  const payload = action.payload;\n  switch (action.type) {\n    case TokenActions.SET_INPUT_VALUE_WIDTH: {\n      return { inputValueWidth: payload };\n    }\n    case TokenActions.SET_INPUT_VALUE_HEIGHT: {\n      return { inputValueHeight: payload };\n    }\n    case TokenActions.UPDATE_QUERY: {\n      return { inputValue: payload };\n    }\n    case TokenActions.SET_FOCUS_IN: {\n      return { inFocus: true };\n    }\n    case TokenActions.SET_PREVENT_BLUR: {\n      return { preventBlur: payload };\n    }\n    case TokenActions.SET_AUTOCOMPLETE_ITEMS: {\n      return { autocompleteItems: payload };\n    }\n    case TokenActions.SET_ACTIVE_TOKENS: {\n      return { activeTokens: payload };\n    }\n    case TokenActions.BLUR: {\n      return {\n        inFocus: false,\n        preventBlur: false,\n        autocompleteItems: undefined,\n        activeTokens: [],\n      };\n    }\n    case TokenActions.REMOVE_ALL_ACTIVE_TOKENS: {\n      return { activeTokens: [] };\n    }\n    case TokenActions.CLEAR_INPUT: {\n      return { inputValue: '', autocompleteItems: undefined };\n    }\n    case TokenActions.SET_LOADING: {\n      return {\n        loading: payload,\n      };\n    }\n    case TokenActions.RESET: {\n      return DefaultState;\n    }\n    case TokenActions.SET_EDITING_TOKEN_INDEX: {\n      return { editingTokenIndex: payload };\n    }\n    case TokenActions.REMOVE_EDITING_TOKEN_INDEX: {\n      return { editingTokenIndex: -1 };\n    }\n    case TokenActions.SET_TEMPORARY_QUERY: {\n      return { reservedInputValue: payload };\n    }\n    case TokenActions.REMOVE_TEMPORARY_QUERY: {\n      return { reservedInputValue: undefined };\n    }\n    default:\n      return state;\n  }\n}\n"]}

package/components/TokenInput/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAd","sourcesContent":["export * from './TokenInput';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAd","sourcesContent":["export * from './TokenInput';\n"]}

package/components/TokenInput/locale/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAAUC,iBAAiB,IAAIC,KAA/B,QAA4C,cAA5C;AACA,SAAUD,iBAAiB,IAAIE,KAA/B,QAA4C,cAA5C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAJ,CAAmC;AACvEG,EAAAA,KAAK,EAALA,KADuE;AAEvED,EAAAA,KAAK,EAALA,KAFuE,EAAnC,CAA/B","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\r\n\r\nimport  { componentsLocales as en_GB } from './locales/en';\r\nimport  { componentsLocales as ru_RU } from './locales/ru';\r\nimport { TokenInputLocale } from './types';\r\n\r\nexport * from './types';\r\n\r\nexport const TokenInputLocaleHelper = new LocaleHelper<TokenInputLocale>({\r\n  ru_RU,\r\n  en_GB,\r\n});\r\n"]}
+{"version":3,"sources":["index.ts"],"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"mappings":"AAAA,SAASA,YAAT,QAA6B,kCAA7B;;AAEA,SAASC,iBAAiB,IAAIC,KAA9B,QAA2C,cAA3C;AACA,SAASD,iBAAiB,IAAIE,KAA9B,QAA2C,cAA3C;;;AAGA,cAAc,SAAd;;AAEA,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAJ,CAAmC;AACvEG,EAAAA,KAAK,EAALA,KADuE;AAEvED,EAAAA,KAAK,EAALA,KAFuE,EAAnC,CAA/B","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { TokenInputLocale } from './types';\n\nexport * from './types';\n\nexport const TokenInputLocaleHelper = new LocaleHelper<TokenInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/components/TokenInput/locale/locales/en/en.js.map

@@ -1 +1 @@
-{"version":3,"sources":["en.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,qBAD+B;AAEjDC,EAAAA,cAAc,EAAE,KAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\r\n\r\nexport const componentsLocales: TokenInputLocale = {\r\n  addButtonComment: 'Type comma or space',\r\n  addButtonTitle: 'Add',\r\n};\r\n"]}
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,qBAD+B;AAEjDC,EAAAA,cAAc,EAAE,KAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Type comma or space',\n  addButtonTitle: 'Add',\n};\n"]}

package/components/TokenInput/locale/locales/ru/ru.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ru.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,4BAD+B;AAEjDC,EAAAA,cAAc,EAAE,UAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\r\n\r\nexport const componentsLocales: TokenInputLocale = {\r\n  addButtonComment: 'Нажмите запятую или пробел',\r\n  addButtonTitle: 'Добавить',\r\n};\r\n"]}
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","addButtonComment","addButtonTitle"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;AACjDC,EAAAA,gBAAgB,EAAE,4BAD+B;AAEjDC,EAAAA,cAAc,EAAE,UAFiC,EAA5C","sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Нажмите запятую или пробел',\n  addButtonTitle: 'Добавить',\n};\n"]}

package/components/TokenInput/locale/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/Tooltip/Tooltip/Tooltip.js

@@ -1,19 +1,33 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import warning from 'warning';
 import isEqual from 'lodash.isequal';
+import { isNullable } from "../../../lib/utils";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { Popup } from "../../../internal/Popup";
+import { DefaultPosition, Popup } from "../../../internal/Popup";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { containsTargetOrRenderContainer } from "../../../lib/listenFocusOutside";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Tooltip.styles";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
+import { isElement } from "../../../lib/SSRSafe";
+import { styles } from "../Tooltip.styles";
+export var TooltipDataTids = {
+  root: 'Tooltip__root',
+  content: 'Tooltip__content',
+  crossIcon: 'Tooltip__crossIcon'
+};
 var Positions = ['right bottom', 'right middle', 'right top', 'top right', 'top center', 'top left', 'left top', 'left middle', 'left bottom', 'bottom left', 'bottom center', 'bottom right'];
-export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
+export var Tooltip = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(Tooltip, _React$PureComponent);
 
   function Tooltip() {
@@ -24,29 +38,37 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Tooltip.defaultProps);
     _this.state = {
       opened: false,
       focused: false
     };
-    _this.theme = void 0;
     _this.hoverTimeout = null;
     _this.contentElement = null;
     _this.positions = null;
     _this.clickedOutside = true;
+    _this.popupRef = /*#__PURE__*/React.createRef();
 
     _this.renderContent = function () {
       var content = _this.props.render ? _this.props.render() : null;
 
-      if (content == null) {
+      if (isNullable(content)) {
         return null;
       }
 
       return /*#__PURE__*/React.createElement("div", {
         ref: _this.refContent,
-        className: jsStyles.tooltipContent(_this.theme)
+        className: styles.tooltipContent(_this.theme),
+        "data-tid": TooltipDataTids.content
       }, content, _this.renderCloseButton());
     };
 
+    _this.getAnchorElement = function () {
+      var _this$popupRef$curren;
+
+      return (_this$popupRef$curren = _this.popupRef.current) == null ? void 0 : _this$popupRef$curren.anchorElement;
+    };
+
     _this.refContent = function (node) {
       _this.contentElement = node;
     };
@@ -64,7 +86,7 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.handleMouseEnter = function (event) {
-      var isHoverAnchor = _this.props.trigger === 'hoverAnchor';
+      var isHoverAnchor = _this.getProps().trigger === 'hoverAnchor';
 
       if (isHoverAnchor && event.target === _this.contentElement) {
         return;
@@ -72,20 +94,22 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
 
       _this.clearHoverTimeout();
 
-      _this.hoverTimeout = window.setTimeout(_this.open, Tooltip.delay);
+      _this.hoverTimeout = setTimeout(_this.open, Tooltip.delay);
     };
 
     _this.handleMouseLeave = function (event) {
-      if (_this.props.trigger === 'hover&focus' && _this.state.focused || _this.props.trigger === 'hover' && event.relatedTarget === _this.contentElement) {
+      var trigger = _this.getProps().trigger;
+
+      if (trigger === 'hover&focus' && _this.state.focused || trigger === 'hover' && event.relatedTarget === _this.contentElement) {
         return;
       }
 
       _this.clearHoverTimeout();
 
-      if (_this.props.trigger === 'hoverAnchor') {
+      if (trigger === 'hoverAnchor') {
         _this.close();
       } else {
-        _this.hoverTimeout = window.setTimeout(_this.close, Tooltip.delay);
+        _this.hoverTimeout = setTimeout(_this.close, Tooltip.delay);
       }
     };
 
@@ -98,7 +122,7 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
 
       if (_this.clickedOutside) {
         if (_this.props.onCloseRequest) {
-          _this.props.onCloseRequest();
+          _this.props.onCloseRequest(event);
         }
 
         _this.close();
@@ -114,11 +138,13 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.handleBlur = function () {
-      if (_this.props.trigger === 'hover&focus' && _this.clickedOutside) {
+      var trigger = _this.getProps().trigger;
+
+      if (trigger === 'hover&focus' && _this.clickedOutside) {
         _this.close();
       }
 
-      if (_this.props.trigger === 'focus') {
+      if (trigger === 'focus') {
         _this.close();
       }
 
@@ -141,7 +167,7 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       if (_this.props.onCloseRequest) {
-        _this.props.onCloseRequest();
+        _this.props.onCloseRequest(event);
       }
 
       _this.close();
@@ -152,16 +178,18 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
 
   var _proto = Tooltip.prototype;
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.trigger === 'closed') {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$getProps = this.getProps(),
+        trigger = _this$getProps.trigger,
+        allowedPositions = _this$getProps.allowedPositions,
+        pos = _this$getProps.pos;
+
+    if (trigger === 'closed' && this.state.opened) {
       this.close();
     }
 
-    var _this$props = this.props,
-        allowedPositions = _this$props.allowedPositions,
-        pos = _this$props.pos;
-    var posChanged = nextProps.pos !== pos;
-    var allowedChanged = !isEqual(nextProps.allowedPositions, allowedPositions);
+    var posChanged = prevProps.pos !== pos;
+    var allowedChanged = !isEqual(prevProps.allowedPositions, allowedPositions);
 
     if (posChanged || allowedChanged) {
       this.positions = null;
@@ -185,51 +213,65 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           popupBorderRadius: theme.tooltipBorderRadius,
           popupPinSize: theme.tooltipPinSize,
           popupPinOffsetX: theme.tooltipPinOffsetX,
-          popupPinOffsetY: theme.tooltipPinOffsetY
+          popupPinOffsetY: theme.tooltipPinOffsetY,
+          popupBackground: theme.tooltipBg
         }, theme)
       }, _this2.renderMain());
     });
   };
 
   _proto.renderCloseButton = function renderCloseButton() {
-    var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.props.trigger) : this.props.closeButton;
+    var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.getProps().trigger) : this.props.closeButton;
 
     if (!hasCross) {
       return null;
     }
 
+    var icon = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(CloseButtonIcon, {
+      tabbable: false,
+      side: parseInt(this.theme.tooltipCloseBtnSide),
+      color: this.theme.tooltipCloseBtnColor,
+      colorHover: this.theme.tooltipCloseBtnHoverColor
+    }) : /*#__PURE__*/React.createElement(CrossIcon, null);
     return /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.cross(this.theme),
-      onClick: this.handleCloseButtonClick
-    }, /*#__PURE__*/React.createElement(CrossIcon, null));
-  }
-  /**
-  * Программно открывает тултип.
-  * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
-  * @public
+      className: styles.cross(this.theme),
+      onClick: this.handleCloseButtonClick,
+      "data-tid": TooltipDataTids.crossIcon
+    }, icon);
+  };
+  /**
+  * Программно открывает тултип.
+  * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
+  * @public
   */
-  ;
+
 
   _proto.show = function show() {
-    if (this.state.opened) return;
+    if (this.state.opened) {
+      return;
+    }
+
+    var trigger = this.getProps().trigger;
 
-    if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {
-      warning(true, "Function 'show' is not supported with trigger specified '" + this.props.trigger + "'");
+    if (trigger === 'opened' || trigger === 'closed') {
+      warning(true, "Function 'show' is not supported with trigger specified '" + trigger + "'");
       return;
     }
 
     this.open();
   }
-  /**
-  * Программно закрывает тултип.
-  * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
-  * @public
+  /**
+  * Программно закрывает тултип.
+  * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
+  * @public
   */
   ;
 
   _proto.hide = function hide() {
-    if (this.props.trigger === 'opened' || this.props.trigger === 'closed') {
-      warning(true, "Function 'hide' is not supported with trigger specified '" + this.props.trigger + "'");
+    var trigger = this.getProps().trigger;
+
+    if (trigger === 'opened' || trigger === 'closed') {
+      warning(true, "Function 'hide' is not supported with trigger specified '" + trigger + "'");
       return;
     }
 
@@ -240,37 +282,52 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     var props = this.props;
     var content = this.renderContent();
 
-    var _this$getProps = this.getProps(),
-        popupProps = _this$getProps.popupProps,
-        _this$getProps$layerP = _this$getProps.layerProps,
-        layerProps = _this$getProps$layerP === void 0 ? {
+    var _this$getPopupAndLaye = this.getPopupAndLayerProps(),
+        popupProps = _this$getPopupAndLaye.popupProps,
+        _this$getPopupAndLaye2 = _this$getPopupAndLaye.layerProps,
+        layerProps = _this$getPopupAndLaye2 === void 0 ? {
       active: false
-    } : _this$getProps$layerP;
+    } : _this$getPopupAndLaye2;
 
     var anchorElement = props.children || props.anchorElement;
     var popup = this.renderPopup(anchorElement, popupProps, content);
-    return /*#__PURE__*/React.createElement(RenderLayer, layerProps, popup);
+    return /*#__PURE__*/React.createElement(RenderLayer, _extends({}, layerProps, {
+      getAnchorElement: this.getAnchorElement
+    }), popup);
   };
 
   _proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {
-    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(Popup, _extends({
+    var _this$getProps2 = this.getProps(),
+        disableAnimations = _this$getProps2.disableAnimations,
+        trigger = _this$getProps2.trigger;
+
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(Popup, _extends({
+      "data-tid": TooltipDataTids.root,
       anchorElement: anchorElement,
       hasPin: true,
       hasShadow: true,
       maxWidth: "none",
       opened: this.state.opened,
-      disableAnimations: this.props.disableAnimations,
+      disableAnimations: disableAnimations,
       positions: this.getPositions(),
-      ignoreHover: this.props.trigger === 'hoverAnchor',
+      ignoreHover: trigger === 'hoverAnchor',
       onOpen: this.props.onOpen,
-      onClose: this.props.onClose
+      onClose: this.props.onClose,
+      tryPreserveFirstRenderedPosition: true,
+      ref: this.popupRef,
+      withoutMobile: true
     }, popupProps), content));
   };
 
   _proto.getPositions = function getPositions() {
     if (!this.positions) {
-      var allowedPositions = this.props.allowedPositions;
-      var index = allowedPositions.indexOf(this.props.pos);
+      var _this$getProps3 = this.getProps(),
+          allowedPositions = _this$getProps3.allowedPositions,
+          pos = _this$getProps3.pos;
+
+      var index = allowedPositions.indexOf(pos);
 
       if (index === -1) {
         throw new Error('Unexpected position passed to Tooltip. Expected one of: ' + allowedPositions.join(', '));
@@ -282,11 +339,12 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
     return this.positions;
   };
 
-  _proto.getProps = function getProps() {
+  _proto.getPopupAndLayerProps = function getPopupAndLayerProps() {
     var props = this.props;
-    var useWrapper = !!props.children && props.useWrapper;
+    var useWrapper = !!props.children && this.getProps().useWrapper;
+    var trigger = this.getProps().trigger;
 
-    switch (props.trigger) {
+    switch (trigger) {
       case 'opened':
         return {
           layerProps: {
@@ -361,7 +419,7 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         };
 
       default:
-        throw new Error('Unknown trigger specified: ' + props.trigger);
+        throw new Error('Unknown trigger specified: ' + trigger);
     }
   };
 
@@ -373,7 +431,7 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.isClickOutsideContent = function isClickOutsideContent(event) {
-    if (this.contentElement && event.target instanceof Element) {
+    if (this.contentElement && isElement(event.target)) {
       return !containsTargetOrRenderContainer(event.target)(this.contentElement);
     }
 
@@ -381,22 +439,16 @@ export var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   return Tooltip;
-}(React.PureComponent);
-Tooltip.__KONTUR_REACT_UI__ = 'Tooltip';
-Tooltip.propTypes = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Tooltip', _class2.propTypes = {
   children: function children(props, propName, componentName) {
     var children = props[propName];
     warning(children || props.anchorElement, "[" + componentName + "]: you must provide either 'children' or 'anchorElement' prop for " + componentName + " to work properly");
     warning(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");
   }
-};
-Tooltip.defaultProps = {
-  pos: 'top left',
+}, _class2.defaultProps = {
+  pos: DefaultPosition,
   trigger: 'hover',
   allowedPositions: Positions,
   disableAnimations: isTestEnv,
-  useWrapper: true,
-  closeOnChildrenMouseLeave: false
-};
-Tooltip.delay = 100;
-Tooltip.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'];
+  useWrapper: false
+}, _class2.delay = 100, _class2.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _temp)) || _class;