@skbkontur/react-ui 0.0.0-d49c4902ee → 0.0.0-d560679cdd

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js

@@ -12,10 +12,18 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {};
     _this.menu = null;
     _this.getMenuRef = function () {
       return _this.menu;
     };
+    _this.handleMenuPositionChange = function (_, isFullyVisible) {
+      if (!_this.state.forceMenuLeftAlign && !isFullyVisible && _this.props.menuAlign === 'cursor') {
+        _this.setState({
+          forceMenuLeftAlign: true
+        });
+      }
+    };
     _this.getPopupMargin = function () {
       var paddingY = parseInt(_this.theme.tokenInputPaddingYSmall, 10) || 0;
       var outlineWidth = parseInt(_this.theme.controlOutlineWidth, 10) || 0;
@@ -64,20 +72,22 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
       renderItem = _this$props.renderItem,
       onValueChange = _this$props.onValueChange,
       renderAddButton = _this$props.renderAddButton,
-      anchorElement = _this$props.anchorElement,
-      menuWidth = _this$props.menuWidth,
-      menuAlign = _this$props.menuAlign;
+      anchorElementForCursor = _this$props.anchorElementForCursor,
+      anchorElementRoot = _this$props.anchorElementRoot,
+      menuWidth = _this$props.menuWidth;
+    var menuAlign = this.state.forceMenuLeftAlign ? 'left' : this.props.menuAlign;
     return /*#__PURE__*/React.createElement(Popup, {
       id: this.props.popupMenuId,
       "data-tid": TokenInputDataTids.tokenInputMenu,
       opened: !!opened,
-      positions: ['bottom left', 'top left'],
-      anchorElement: anchorElement,
+      positions: menuAlign === 'cursor' ? ['bottom left', 'top left'] : ['bottom left', 'top left', 'bottom right', 'top right'],
+      anchorElement: menuAlign === 'cursor' ? anchorElementForCursor : anchorElementRoot,
       popupOffset: menuAlign === 'left' ? parseInt(this.theme.tokenInputPopupOffset) : 8 + parseInt(this.theme.tokenInputPopupOffset),
       margin: menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme)),
       hasShadow: true,
       width: menuAlign === 'cursor' ? 'auto' : menuWidth,
-      withoutMobile: true
+      withoutMobile: true,
+      onPositionChange: this.handleMenuPositionChange
     }, /*#__PURE__*/React.createElement(ComboBoxMenu, {
       size: this.props.size,
       items: items,

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

@@ -1 +1 @@
-{"version":3,"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputDataTids","TokenInputMenu","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","menu","getMenuRef","getPopupMargin","paddingY","parseInt","theme","tokenInputPaddingYSmall","outlineWidth","controlOutlineWidth","marginY","tokenMarginYSmall","menuRef","node","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","Provider","value","create","popupMargin","popupBackground","tokenInputMenuPopupBg","renderMain","getPopupMarginSize","t","props","size","tokenInputPopupMarginLarge","tokenInputPopupMarginMedium","tokenInputPopupMarginSmall","_this$props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","id","popupMenuId","tokenInputMenu","positions","popupOffset","tokenInputPopupOffset","margin","hasShadow","width","withoutMobile","hasMargin","refMenu","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TokenInputMenu.tsx"],"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';\nimport { TokenSize } from '../Token';\n\nimport { TokenInputDataTids, TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: PopupProps['anchorElement'];\n  /** Задает шинину выпадающего меню. */\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign: TokenInputMenuAlign;\n  /** Задает id выпадающему меню.\n   Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */\n  popupMenuId?: HTMLProps['id'];\n  /** Задает размер контрола. */\n  size?: TokenSize;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n  public static displayName = '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 getPopupMarginSize(t: Theme) {\n    switch (this.props.size) {\n      case 'large':\n        return t.tokenInputPopupMarginLarge;\n      case 'medium':\n        return t.tokenInputPopupMarginMedium;\n      case 'small':\n      default:\n        return t.tokenInputPopupMarginSmall;\n    }\n  }\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={\n          menuAlign === 'left'\n            ? parseInt(this.theme.tokenInputPopupOffset)\n            : 8 + parseInt(this.theme.tokenInputPopupOffset)\n        }\n        margin={menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme))}\n        hasShadow\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n        withoutMobile\n      >\n        <ComboBoxMenu\n          size={this.props.size}\n          items={items}\n          loading={loading}\n          hasMargin={false}\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.tokenInputPaddingYSmall, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginYSmall, 10) || 0;\n\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","TokenInputDataTids","TokenInputMenu","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","state","menu","getMenuRef","handleMenuPositionChange","_","isFullyVisible","forceMenuLeftAlign","props","menuAlign","setState","getPopupMargin","paddingY","parseInt","theme","tokenInputPaddingYSmall","outlineWidth","controlOutlineWidth","marginY","tokenMarginYSmall","menuRef","node","_inheritsLoose","_proto","prototype","render","_this2","createElement","Consumer","Provider","value","create","popupMargin","popupBackground","tokenInputMenuPopupBg","renderMain","getPopupMarginSize","t","size","tokenInputPopupMarginLarge","tokenInputPopupMarginMedium","tokenInputPopupMarginSmall","_this$props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElementForCursor","anchorElementRoot","menuWidth","id","popupMenuId","tokenInputMenu","positions","anchorElement","popupOffset","tokenInputPopupOffset","margin","hasShadow","width","withoutMobile","onPositionChange","hasMargin","refMenu","Component","__KONTUR_REACT_UI__","displayName"],"sources":["TokenInputMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { HTMLProps } from '../../typings/html';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport type { PopupPositionsType, PopupProps } from '../../internal/Popup';\nimport { Popup } from '../../internal/Popup';\nimport type { ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { ComboBoxMenu } from '../../internal/CustomComboBox';\nimport type { Menu } from '../../internal/Menu';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { TokenSize } from '../Token';\n\nimport type { TokenInputMenuAlign, TokenInputProps } from './TokenInput';\nimport { TokenInputDataTids } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  /** html-элемент от которого будет позиционировано Menu в случае menuAlign cursor */\n  anchorElementForCursor: PopupProps['anchorElement'];\n  /** html-элемент от которого будет позиционировано Menu в случае menuAlign left */\n  anchorElementRoot: PopupProps['anchorElement'];\n  /** Задает ширину выпадающего меню. */\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  /** Задает выравнивание выпадающего меню. */\n  menuAlign: TokenInputMenuAlign;\n  /** Задает id выпадающему меню.\n   Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */\n  popupMenuId?: HTMLProps['id'];\n  /** Задает размер контрола. */\n  size?: TokenSize;\n}\n\ninterface TokenInputMenuState {\n  forceMenuLeftAlign?: boolean;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>, TokenInputMenuState> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n  public static displayName = 'TokenInputMenu';\n\n  public state: TokenInputMenuState = {};\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 getPopupMarginSize(t: Theme) {\n    switch (this.props.size) {\n      case 'large':\n        return t.tokenInputPopupMarginLarge;\n      case 'medium':\n        return t.tokenInputPopupMarginMedium;\n      case 'small':\n      default:\n        return t.tokenInputPopupMarginSmall;\n    }\n  }\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      anchorElementForCursor,\n      anchorElementRoot,\n      menuWidth,\n    } = this.props;\n\n    const menuAlign = this.state.forceMenuLeftAlign ? 'left' : this.props.menuAlign;\n\n    return (\n      <Popup\n        id={this.props.popupMenuId}\n        data-tid={TokenInputDataTids.tokenInputMenu}\n        opened={!!opened}\n        positions={\n          menuAlign === 'cursor'\n            ? ['bottom left', 'top left']\n            : ['bottom left', 'top left', 'bottom right', 'top right']\n        }\n        anchorElement={menuAlign === 'cursor' ? anchorElementForCursor : anchorElementRoot}\n        popupOffset={\n          menuAlign === 'left'\n            ? parseInt(this.theme.tokenInputPopupOffset)\n            : 8 + parseInt(this.theme.tokenInputPopupOffset)\n        }\n        margin={menuAlign === 'left' ? 1 : parseInt(this.getPopupMarginSize(this.theme))}\n        hasShadow\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n        withoutMobile\n        onPositionChange={this.handleMenuPositionChange}\n      >\n        <ComboBoxMenu\n          size={this.props.size}\n          items={items}\n          loading={loading}\n          hasMargin={false}\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 handleMenuPositionChange = (_: PopupPositionsType, isFullyVisible: boolean) => {\n    if (!this.state.forceMenuLeftAlign && !isFullyVisible && this.props.menuAlign === 'cursor') {\n      this.setState({ forceMenuLeftAlign: true });\n    }\n  };\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingYSmall, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginYSmall, 10) || 0;\n\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"],"mappings":"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","ignoreList":[]}

package/components/TokenInput/TokenInputMenu.d.ts

@@ -1,30 +1,39 @@
-import React from 'react';
-import { HTMLProps } from '../../typings/html';
-import { PopupProps } from '../../internal/Popup';
-import { ComboBoxMenuProps } from '../../internal/CustomComboBox';
-import { TokenSize } from '../Token';
-import { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
-export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
-    anchorElement: PopupProps['anchorElement'];
-    /** Задает шинину выпадающего меню. */
-    menuWidth: TokenInputProps<string>['menuWidth'];
-    /** Задает выравнивание выпадающего меню. */
-    menuAlign: TokenInputMenuAlign;
-    /** Задает id выпадающему меню.
-     Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */
-    popupMenuId?: HTMLProps['id'];
-    /** Задает размер контрола. */
-    size?: TokenSize;
-}
-export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    private theme;
-    private menu;
-    render(): React.JSX.Element;
-    getMenuRef: () => any | null;
-    private getPopupMarginSize;
-    private renderMain;
-    private getPopupMargin;
-    private menuRef;
-}
+import React from 'react';
+import type { HTMLProps } from '../../typings/html';
+import type { PopupProps } from '../../internal/Popup';
+import type { ComboBoxMenuProps } from '../../internal/CustomComboBox';
+import type { TokenSize } from '../Token';
+import type { TokenInputMenuAlign, TokenInputProps } from './TokenInput';
+export interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {
+    /** html-элемент от которого будет позиционировано Menu в случае menuAlign cursor */
+    anchorElementForCursor: PopupProps['anchorElement'];
+    /** html-элемент от которого будет позиционировано Menu в случае menuAlign left */
+    anchorElementRoot: PopupProps['anchorElement'];
+    /** Задает ширину выпадающего меню. */
+    menuWidth: TokenInputProps<string>['menuWidth'];
+    /** Задает выравнивание выпадающего меню. */
+    menuAlign: TokenInputMenuAlign;
+    /** Задает id выпадающему меню.
+     Полезно при реализации a11y. Например, помогает связать aria-controls с выпадающим меню. */
+    popupMenuId?: HTMLProps['id'];
+    /** Задает размер контрола. */
+    size?: TokenSize;
+}
+interface TokenInputMenuState {
+    forceMenuLeftAlign?: boolean;
+}
+export declare class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>, TokenInputMenuState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    state: TokenInputMenuState;
+    private theme;
+    private menu;
+    render(): React.JSX.Element;
+    getMenuRef: () => any | null;
+    private getPopupMarginSize;
+    private renderMain;
+    private handleMenuPositionChange;
+    private getPopupMargin;
+    private menuRef;
+}
+export {};

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

@@ -1 +1 @@
-{"version":3,"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"],"sources":["TokenInputReducer.ts"],"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"],"mappings":"AAAA,SAA0BA,YAAY,QAAQ,cAAc;;;;;;;AAO5D,OAAO,IAAMC,YAAY,GAAG;EAC1BC,qBAAqB,EAAE,uBAAuB;EAC9CC,sBAAsB,EAAE,wBAAwB;EAChDC,YAAY,EAAE,cAAc;EAC5BC,YAAY,EAAE,cAAc;EAC5BC,gBAAgB,EAAE,kBAAkB;EACpCC,IAAI,EAAE,MAAM;EACZC,sBAAsB,EAAE,wBAAwB;EAChDC,iBAAiB,EAAE,mBAAmB;EACtCC,wBAAwB,EAAE,0BAA0B;EACpDC,WAAW,EAAE,aAAa;EAC1BC,WAAW,EAAE,aAAa;EAC1BC,KAAK,EAAE,OAAO;EACdC,uBAAuB,EAAE,yBAAyB;EAClDC,0BAA0B,EAAE,4BAA4B;EACxDC,mBAAmB,EAAE,qBAAqB;EAC1CC,sBAAsB,EAAE;AAC1B,CAAC;;;;AAID,OAAO,SAASC,iBAAiBA;AAC/BC,KAAyB;AACzBC,MAAwB;AACS;EACjC,IAAMC,OAAO,GAAGD,MAAM,CAACC,OAAO;EAC9B,QAAQD,MAAM,CAACE,IAAI;IACjB,KAAKrB,YAAY,CAACC,qBAAqB,CAAE;QACvC,OAAO,EAAEqB,eAAe,EAAEF,OAAO,CAAC,CAAC;MACrC;IACA,KAAKpB,YAAY,CAACE,sBAAsB,CAAE;QACxC,OAAO,EAAEqB,gBAAgB,EAAEH,OAAO,CAAC,CAAC;MACtC;IACA,KAAKpB,YAAY,CAACG,YAAY,CAAE;QAC9B,OAAO,EAAEqB,UAAU,EAAEJ,OAAO,CAAC,CAAC;MAChC;IACA,KAAKpB,YAAY,CAACI,YAAY,CAAE;QAC9B,OAAO,EAAEqB,OAAO,EAAE,IAAI,CAAC,CAAC;MAC1B;IACA,KAAKzB,YAAY,CAACK,gBAAgB,CAAE;QAClC,OAAO,EAAEqB,WAAW,EAAEN,OAAO,CAAC,CAAC;MACjC;IACA,KAAKpB,YAAY,CAACO,sBAAsB,CAAE;QACxC,OAAO,EAAEoB,iBAAiB,EAAEP,OAAO,CAAC,CAAC;MACvC;IACA,KAAKpB,YAAY,CAACQ,iBAAiB,CAAE;QACnC,OAAO,EAAEoB,YAAY,EAAER,OAAO,CAAC,CAAC;MAClC;IACA,KAAKpB,YAAY,CAACM,IAAI,CAAE;QACtB,OAAO;UACLmB,OAAO,EAAE,KAAK;UACdC,WAAW,EAAE,KAAK;UAClBC,iBAAiB,EAAEE,SAAS;UAC5BD,YAAY,EAAE;QAChB,CAAC;MACH;IACA,KAAK5B,YAAY,CAACS,wBAAwB,CAAE;QAC1C,OAAO,EAAEmB,YAAY,EAAE,EAAE,CAAC,CAAC;MAC7B;IACA,KAAK5B,YAAY,CAACW,WAAW,CAAE;QAC7B,OAAO,EAAEa,UAAU,EAAE,EAAE,EAAEG,iBAAiB,EAAEE,SAAS,CAAC,CAAC;MACzD;IACA,KAAK7B,YAAY,CAACU,WAAW,CAAE;QAC7B,OAAO;UACLoB,OAAO,EAAEV;QACX,CAAC;MACH;IACA,KAAKpB,YAAY,CAACY,KAAK,CAAE;QACvB,OAAOb,YAAY;MACrB;IACA,KAAKC,YAAY,CAACa,uBAAuB,CAAE;QACzC,OAAO,EAAEkB,iBAAiB,EAAEX,OAAO,CAAC,CAAC;MACvC;IACA,KAAKpB,YAAY,CAACc,0BAA0B,CAAE;QAC5C,OAAO,EAAEiB,iBAAiB,EAAE,CAAC,CAAC,CAAC,CAAC;MAClC;IACA,KAAK/B,YAAY,CAACe,mBAAmB,CAAE;QACrC,OAAO,EAAEiB,kBAAkB,EAAEZ,OAAO,CAAC,CAAC;MACxC;IACA,KAAKpB,YAAY,CAACgB,sBAAsB,CAAE;QACxC,OAAO,EAAEgB,kBAAkB,EAAEH,SAAS,CAAC,CAAC;MAC1C;IACA;MACE,OAAOX,KAAK;EAChB;AACF","ignoreList":[]}
+{"version":3,"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"],"sources":["TokenInputReducer.ts"],"sourcesContent":["import type { TokenInputState } from './TokenInput';\nimport { 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"],"mappings":"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","ignoreList":[]}

package/components/TokenInput/TokenInputReducer.d.ts

@@ -1,25 +1,25 @@
-import { TokenInputState } from './TokenInput';
-export interface TokenInputAction {
-    type: TokenInputActionType;
-    payload?: any;
-}
-export declare const TokenActions: {
-    SET_INPUT_VALUE_WIDTH: string;
-    SET_INPUT_VALUE_HEIGHT: string;
-    UPDATE_QUERY: string;
-    SET_FOCUS_IN: string;
-    SET_PREVENT_BLUR: string;
-    BLUR: string;
-    SET_AUTOCOMPLETE_ITEMS: string;
-    SET_ACTIVE_TOKENS: string;
-    REMOVE_ALL_ACTIVE_TOKENS: string;
-    SET_LOADING: string;
-    CLEAR_INPUT: string;
-    RESET: string;
-    SET_EDITING_TOKEN_INDEX: string;
-    REMOVE_EDITING_TOKEN_INDEX: string;
-    SET_TEMPORARY_QUERY: string;
-    REMOVE_TEMPORARY_QUERY: string;
-};
-export type TokenInputActionType = keyof typeof TokenActions;
-export declare function tokenInputReducer<T = string>(state: TokenInputState<T>, action: TokenInputAction): Pick<TokenInputState<T>, never>;
+import type { TokenInputState } from './TokenInput';
+export interface TokenInputAction {
+    type: TokenInputActionType;
+    payload?: any;
+}
+export declare const TokenActions: {
+    SET_INPUT_VALUE_WIDTH: string;
+    SET_INPUT_VALUE_HEIGHT: string;
+    UPDATE_QUERY: string;
+    SET_FOCUS_IN: string;
+    SET_PREVENT_BLUR: string;
+    BLUR: string;
+    SET_AUTOCOMPLETE_ITEMS: string;
+    SET_ACTIVE_TOKENS: string;
+    REMOVE_ALL_ACTIVE_TOKENS: string;
+    SET_LOADING: string;
+    CLEAR_INPUT: string;
+    RESET: string;
+    SET_EDITING_TOKEN_INDEX: string;
+    REMOVE_EDITING_TOKEN_INDEX: string;
+    SET_TEMPORARY_QUERY: string;
+    REMOVE_TEMPORARY_QUERY: string;
+};
+export type TokenInputActionType = keyof typeof TokenActions;
+export declare function tokenInputReducer<T = string>(state: TokenInputState<T>, action: TokenInputAction): Pick<TokenInputState<T>, never>;

package/components/TokenInput/index.d.ts

@@ -1 +1 @@
-export * from './TokenInput';
+export * from './TokenInput';

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

@@ -1 +1 @@
-{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"sources":["index.ts"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAY,CAAmB;EACvEG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["LocaleHelper","componentsLocales","en_GB","ru_RU","TokenInputLocaleHelper"],"sources":["index.ts"],"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 type { TokenInputLocale } from './types';\n\nexport * from './types';\n\nexport const TokenInputLocaleHelper = new LocaleHelper<TokenInputLocale>({\n  ru_RU,\n  en_GB,\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,kCAAkC;;AAE/D,SAASC,iBAAiB,IAAIC,KAAK,QAAQ,cAAc;AACzD,SAASD,iBAAiB,IAAIE,KAAK,QAAQ,cAAc;;;AAGzD,cAAc,SAAS;;AAEvB,OAAO,IAAMC,sBAAsB,GAAG,IAAIJ,YAAY,CAAmB;EACvEG,KAAK,EAALA,KAAK;EACLD,KAAK,EAALA;AACF,CAAC,CAAC","ignoreList":[]}

package/components/TokenInput/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
-import { TokenInputLocale } from './types';
-export * from './types';
-export declare const TokenInputLocaleHelper: LocaleHelper<TokenInputLocale>;
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import type { TokenInputLocale } from './types';
+export * from './types';
+export declare const TokenInputLocaleHelper: LocaleHelper<TokenInputLocale>;

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

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","addButtonComment","addButtonTitle"],"sources":["en.ts"],"sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Type comma',\n  addButtonTitle: 'Add',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;EACjDC,gBAAgB,EAAE,YAAY;EAC9BC,cAAc,EAAE;AAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","addButtonComment","addButtonTitle"],"sources":["en.ts"],"sourcesContent":["import type { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Type comma',\n  addButtonTitle: 'Add',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;EACjDC,gBAAgB,EAAE,YAAY;EAC9BC,cAAc,EAAE;AAClB,CAAC","ignoreList":[]}

package/components/TokenInput/locale/locales/en.d.ts

@@ -1,2 +1,2 @@
-import { TokenInputLocale } from '../types';
-export declare const componentsLocales: TokenInputLocale;
+import type { TokenInputLocale } from '../types';
+export declare const componentsLocales: TokenInputLocale;

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

@@ -1 +1 @@
-{"version":3,"names":["componentsLocales","addButtonComment","addButtonTitle"],"sources":["ru.ts"],"sourcesContent":["import { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Нажмите запятую',\n  addButtonTitle: 'Добавить',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;EACjDC,gBAAgB,EAAE,iBAAiB;EACnCC,cAAc,EAAE;AAClB,CAAC","ignoreList":[]}
+{"version":3,"names":["componentsLocales","addButtonComment","addButtonTitle"],"sources":["ru.ts"],"sourcesContent":["import type { TokenInputLocale } from '../types';\n\nexport const componentsLocales: TokenInputLocale = {\n  addButtonComment: 'Нажмите запятую',\n  addButtonTitle: 'Добавить',\n};\n"],"mappings":";;AAEA,OAAO,IAAMA,iBAAmC,GAAG;EACjDC,gBAAgB,EAAE,iBAAiB;EACnCC,cAAc,EAAE;AAClB,CAAC","ignoreList":[]}

package/components/TokenInput/locale/locales/ru.d.ts

@@ -1,2 +1,2 @@
-import { TokenInputLocale } from '../types';
-export declare const componentsLocales: TokenInputLocale;
+import type { TokenInputLocale } from '../types';
+export declare const componentsLocales: TokenInputLocale;

package/components/TokenInput/locale/types.d.ts

@@ -1,4 +1,4 @@
-export interface TokenInputLocale {
-    addButtonComment: string;
-    addButtonTitle: string;
-}
+export interface TokenInputLocale {
+    addButtonComment: string;
+    addButtonTitle: string;
+}

package/components/Tooltip/Tooltip/Tooltip.js

@@ -17,6 +17,7 @@ import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
 import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { cx } from "../../../lib/theming/Emotion";
 import { styles } from "../Tooltip.styles";
 var DEFAULT_DELAY = 100;
 export var TooltipDataTids = {
@@ -27,12 +28,10 @@ export var TooltipDataTids = {
 var OldPositions = ['right bottom', 'right middle', 'right top', 'top right', 'top center', 'top left', 'left top', 'left middle', 'left bottom', 'bottom left', 'bottom center', 'bottom right'];
 
 /**
- * `Tooltip` — это подсказка, которую пользователь открывает сам, кликом по элементу.
+ * `Tooltip` — это подсказка, которая объясняет состояние контрола или даёт контекстную справку.
  *
- * `Tooltip` используется для коротких поясняющих текстов, если необходимо дать разъяснение к деталям интерфейса, упомянутой информации или помочь с заполнением полей.
- * Если эти подробности не нужны постоянно, но могут помочь пользователю в момент когда он испытывает трудности.
- *
- * Для подсказки, всплывающей по наведению используйте Hint.
+ * Открывается по клику, фокусом на элемент или по наведению. В отличие от `Hint`, `Tooltip` может содержать
+ * изображения, кнопки, ссылки и прочие интерактивные элементы.
  */
 export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React$PureComponent) {
   function Tooltip() {
@@ -57,7 +56,7 @@ export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React
       return /*#__PURE__*/(
         React.createElement("div", {
           ref: _this.refContent,
-          className: styles.tooltipContent(_this.theme),
+          className: cx(styles.tooltipContent(_this.theme), _this.sizeVariables.contentStyle),
           "data-tid": TooltipDataTids.content
         }, content, _this.renderCloseButton())
       );
@@ -146,16 +145,68 @@ export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React
       }
       _this.close();
     };
+    _this.getSizeVariables = function () {
+      switch (_this.props.size) {
+        case 'small':
+          return {
+            closeButtonStyle: styles.closeButtonSmall(_this.theme),
+            contentStyle: styles.tooltipContentSmall(_this.theme),
+            borderRadius: _this.theme.tooltipBorderRadiusSmall,
+            pinSize: _this.theme.tooltipPinSizeSmall,
+            pinOffsetX: _this.theme.tooltipPinOffsetXSmall,
+            pinOffsetY: _this.theme.tooltipPinOffsetYSmall,
+            margin: _this.theme.tooltipMarginSmall
+          };
+        case 'medium':
+          return {
+            closeButtonStyle: styles.closeButtonMedium(_this.theme),
+            contentStyle: styles.tooltipContentMedium(_this.theme),
+            borderRadius: _this.theme.tooltipBorderRadiusMedium,
+            pinSize: _this.theme.tooltipPinSizeMedium,
+            pinOffsetX: _this.theme.tooltipPinOffsetXMedium,
+            pinOffsetY: _this.theme.tooltipPinOffsetYMedium,
+            margin: _this.theme.tooltipMarginMedium
+          };
+        case 'large':
+          return {
+            closeButtonStyle: styles.closeButtonLarge(_this.theme),
+            contentStyle: styles.tooltipContentLarge(_this.theme),
+            borderRadius: _this.theme.tooltipBorderRadiusLarge,
+            pinSize: _this.theme.tooltipPinSizeLarge,
+            pinOffsetX: _this.theme.tooltipPinOffsetXLarge,
+            pinOffsetY: _this.theme.tooltipPinOffsetYLarge,
+            margin: _this.theme.tooltipMarginLarge
+          };
+        default:
+          console.error("Can't get size variables: invalid value in size prop '" + _this.props.size + "'. Returning default");
+          return {
+            closeButtonStyle: styles.closeButtonSmall(_this.theme),
+            contentStyle: styles.tooltipContentSmall(_this.theme),
+            borderRadius: _this.theme.tooltipBorderRadiusSmall,
+            pinSize: _this.theme.tooltipPinSizeSmall,
+            pinOffsetX: _this.theme.tooltipPinOffsetXSmall,
+            pinOffsetY: _this.theme.tooltipPinOffsetYSmall,
+            margin: _this.theme.tooltipMarginSmall
+          };
+      }
+    };
     return _this;
   }
   _inheritsLoose(Tooltip, _React$PureComponent);
   var _proto = Tooltip.prototype;
+  _proto.validateProps = function validateProps(props) {
+    warning(props.children || props.anchorElement, "[Tooltip]: you must provide either 'children' or 'anchorElement' prop for Tooltip to work properly");
+  };
   _proto.getAllowedPositions = function getAllowedPositions() {
     return this.props.allowedPositions ? this.props.allowedPositions : OldPositions;
   };
+  _proto.componentDidMount = function componentDidMount() {
+    this.validateProps(this.getProps());
+  };
   _proto.componentDidUpdate = function componentDidUpdate() {
     var _this$getProps = this.getProps(),
       trigger = _this$getProps.trigger;
+    this.validateProps(this.getProps());
     if (trigger === 'closed' && this.state.opened) {
       this.close();
     }
@@ -169,15 +220,16 @@ export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React
       _this2.featureFlags = getFullReactUIFlagsContext(flags);
       return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
         _this2.theme = theme;
+        _this2.sizeVariables = _this2.getSizeVariables();
         return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
           value: ThemeFactory.create({
-            popupMargin: theme.tooltipMargin,
+            popupBackground: theme.tooltipBg,
             popupBorder: theme.tooltipBorder,
-            popupBorderRadius: theme.tooltipBorderRadius,
-            popupPinSize: theme.tooltipPinSize,
-            popupPinOffsetX: theme.tooltipPinOffsetX,
-            popupPinOffsetY: theme.tooltipPinOffsetY,
-            popupBackground: theme.tooltipBg
+            popupBorderRadius: _this2.sizeVariables.borderRadius,
+            popupPinSize: _this2.sizeVariables.pinSize,
+            popupPinOffsetX: _this2.sizeVariables.pinOffsetX,
+            popupPinOffsetY: _this2.sizeVariables.pinOffsetY,
+            popupMargin: _this2.sizeVariables.margin
           }, theme)
         }, _this2.renderMain());
       });
@@ -195,7 +247,7 @@ export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React
       colorHover: this.theme.tooltipCloseBtnHoverColor
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: styles.cross(this.theme),
+      className: cx(styles.closeButton(this.theme), this.sizeVariables.closeButtonStyle),
       onClick: this.handleCloseButtonClick,
       "data-tid": TooltipDataTids.crossIcon
     }, icon);
@@ -354,13 +406,8 @@ export var Tooltip = rootNode(_class = (_Tooltip = /*#__PURE__*/function (_React
     return true;
   };
   return Tooltip;
-}(React.PureComponent), _Tooltip.__KONTUR_REACT_UI__ = 'Tooltip', _Tooltip.displayName = 'Tooltip', _Tooltip.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 = {
+}(React.PureComponent), _Tooltip.__KONTUR_REACT_UI__ = 'Tooltip', _Tooltip.displayName = 'Tooltip', _Tooltip.defaultProps = {
+  size: 'small',
   trigger: 'hover',
   disableAnimations: isTestEnv,
   useWrapper: false,