@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded

package/cjs/components/Toggle/Toggle.md

@@ -0,0 +1,110 @@
+### Базовый пример
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked}>
+  {checked ? 'On' : 'Off'}
+</Toggle>
+```
+
+### Тогл включенный по умолчанию
+
+```jsx harmony
+<Toggle defaultChecked>
+  Включен по умолчанию
+</Toggle>
+```
+
+### Надпись слева от переключателя
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
+  Показывать уведомления
+</Toggle>
+```
+
+### Тогл с внешним `<label/>`
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+<Gapped>
+  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
+  <label htmlFor="toggle-1">Внешний label</label>
+</Gapped>
+```
+
+### Получение фокуса после загрузки страницы
+
+```jsx harmony
+<Toggle autoFocus>
+  Сразу с фокусом
+</Toggle>
+```
+
+### Стили
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap="20px">
+  <Toggle warning>
+    Warning
+  </Toggle>
+  <Toggle error>
+    Error
+  </Toggle>
+  <Toggle loading>
+    Loading
+  </Toggle>
+  <Toggle disabled>
+    Disabled
+  </Toggle>
+</Gapped>
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Toggle size="small">
+    Маленький
+  </Toggle>
+  <Toggle size="medium">
+    Средний
+  </Toggle>
+  <Toggle size="large">
+    Большой
+  </Toggle>
+</Gapped>
+```
+
+### Кастомное действие при получении и потере фокуса
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle
+  onFocus={() => Toast.push('Я получил фокус!')}
+  onBlur={() => Toast.push('И потерял его...')}
+  >
+  С кастомными действиями при фокусе и его потере
+</Toggle>
+```
+
+### Кастомное действие при переключении
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
+  Кастомное действие при переключении
+</Toggle>
+```

package/cjs/components/Token/Token.md

@@ -0,0 +1,48 @@
+### Базовый пример
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+
+<Token>Example</Token>;
+```
+
+### Состояние валидации
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+### Размер
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <Token size="small">
+    Маленький
+  </Token>
+  <Token size="medium">
+    Средний
+  </Token>
+  <Token size="large">
+    Большой
+  </Token>
+</Gapped>
+```

package/cjs/components/TokenInput/TokenInput.md

@@ -0,0 +1,277 @@
+### Базовый пример
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState([]);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
+      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString() === q,
+    ),
+  ).then(delay(500));
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+    renderToken={(item, tokenProps) => (
+      <Token key={item.toString()} {...tokenProps}>
+        {item}
+      </Token>
+    )}
+  />
+</div>;
+```
+
+### Размер
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState([]);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
+      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
+    ),
+  ).then(delay(500));
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    size={'small'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+  <TokenInput
+    size={'medium'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+  <TokenInput
+    size={'large'}
+    getItems={getItems}
+    selectedItems={selectedItems}
+    onValueChange={setSelectedItems}
+  />
+</div>;
+```
+
+### Заблокированный TokenInput с кастомными Token
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState(['aaa', 'bbb', 'ccc']);
+
+async function getItems(query) {
+  return ['aaa', 'bbb', 'ccc'].filter((s) => s.includes(query));
+};
+
+<TokenInput
+  disabled
+  type={TokenInputType.Combined}
+  getItems={getItems}
+  selectedItems={selectedItems}
+  onValueChange={setSelectedItems}
+  renderToken={(item, tokenProps) => (
+    <Token key={item.toString()} {...tokenProps} disabled={item === 'bbb' || tokenProps.disabled} >
+      {item}
+    </Token>
+  )}
+/>
+```
+
+### Ограничение количества токенов в выпадающем списке
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+const { cities } = require('../ComboBox/__mocks__/cities');
+
+const maxItems = 5;
+
+const [totalCount, setTotalCount] = React.useState(cities.length);
+const [value, setValue] = React.useState([]);
+
+const getItems = (query) => {
+  const items = cities
+    .map((x) => x.City)
+    .filter((x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query);
+  const result = items.slice(0, maxItems);
+  setTotalCount(items.length);
+
+  return Promise.resolve(result).then(delay(500));
+};
+
+const renderTotalCount = (foundCount, totalCount) => (
+  <span>
+    Показано {foundCount} из {totalCount} найденных городов
+  </span>
+);
+
+<div style={{ width: "300px" }}>
+  <TokenInput
+    type={TokenInputType.Combined}
+    selectedItems={value}
+    onValueChange={setValue}
+    getItems={getItems}
+    placeholder="Начните вводить название"
+    renderTotalCount={renderTotalCount}
+    totalCount={totalCount}
+  />
+</div>
+```
+
+### Кастомный тип элементов меню
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
+
+const [selectedItems, setSelectedItems] = React.useState([]);
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+const getGenericItems = () => [
+  { id: '111', value: 'aaa' },
+  { id: '222', value: 'bbb' },
+  { id: '333', value: 'ccc' },
+  { id: '444', value: 'ddd' },
+];
+const renderItem = (item) => item.value;
+const renderValue = (value) => value.value;
+const valueToItem = (item) => ({
+  value: item,
+});
+const getModelItems = async (query) => {
+  await delay(400);
+  return getGenericItems().filter((s) => s.value.includes(query));
+}
+
+<div style={{ width: '300px' }}>
+  <TokenInput
+    selectedItems={selectedItems}
+    renderItem={renderItem}
+    renderValue={renderValue}
+    valueToItem={valueToItem}
+    valueToString={renderValue}
+    getItems={getModelItems}
+    onValueChange={setSelectedItems}
+    placeholder="placeholder"
+    type={TokenInputType.Combined}
+    renderToken={(item, tokenProps) => (
+      <Token
+        key={item.id}
+        {...tokenProps}
+      >
+        {item.value}
+      </Token>
+    )}
+  />
+</div>;
+```
+
+### Дебаунс функции getItems
+
+Функция debounce из lodash некорректно работает с async/promise, поэтому лучше использовать кастомную функцию, как в примере ниже.
+
+```jsx harmony
+import { TokenInput } from "@skbkontur/react-ui";
+import { TokenInputType } from "@skbkontur/react-ui/components/TokenInput";
+
+const [value, setValue] = React.useState([]);
+
+function debounceAsync(callback, wait) {
+  let timeoutId = null;
+
+  return (...args) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    return new Promise((resolve) => {
+      const timeoutPromise = new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, wait);
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+
+const items = ["kon", "kod", "kof", "kor", "kos"];
+
+const getItems = async (query) => {
+  console.log("query: ", query);
+  return items.filter((item) => item.includes(query));
+};
+
+<TokenInput
+  style={{ width: "300px" }}
+  type={TokenInputType.Combined}
+  selectedItems={value}
+  onValueChange={setValue}
+  getItems={debounceAsync(getItems, 300)}
+  placeholder="Начните вводить название"
+/>
+```
+
+### Типизированная версия функции
+
+```typescript static
+function debounceAsync<T, Callback extends (...args: any[]) => Promise<T>>(
+  callback: Callback,
+  wait: number,
+): (...args: Parameters<Callback>) => Promise<T> {
+  let timeoutId: number | null = null;
+
+  return (...args: any[]) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    return new Promise<T>((resolve) => {
+      const timeoutPromise = new Promise<void>((resolve) => {
+        timeoutId = setTimeout(resolve, wait);
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+```
+
+### Локали по умолчанию
+
+```typescript static
+interface TokenInputLocale {
+  addButtonComment?: string;
+  addButtonTitle?: string;
+}
+
+const ru_RU = {
+  addButtonComment: 'Нажмите запятую',
+  addButtonTitle: 'Добавить',
+};
+
+const en_GB = {
+  addButtonComment: 'Type comma',
+  addButtonTitle: 'Add',
+};
+```

package/cjs/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SizeProp } from '../../lib/types/props';
+import type { SizeProp } from 'react-ui/lib/types/props';
 import type { PopupPositionsType, ShortPopupPositionsType } from '../../internal/Popup';
 import type { Nullable } from '../../typings/utility-types';
 import type { CommonProps } from '../../internal/CommonWrapper';

package/cjs/components/Tooltip/Tooltip.js

@@ -27,7 +27,6 @@ var _isInstanceOf = require("../../lib/isInstanceOf");
 
 var _featureFlagsContext = require("../../lib/featureFlagsContext");
 var _Emotion = require("../../lib/theming/Emotion");
-var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 
 var _Tooltip2 = require("./Tooltip.styles");var _class, _Tooltip;
 
@@ -118,7 +117,7 @@ var TooltipDataTids = exports.TooltipDataTids = {
   crossIcon: 'Tooltip__crossIcon'
 };
 
-var DefaultPositions = [
+var OldPositions = [
 'right bottom',
 'right middle',
 'right top',
@@ -375,10 +374,9 @@ Tooltip = exports.Tooltip = (0, _rootNode.rootNode)(_class = (_Tooltip = /*#__PU
 
 
 
-    getPositions = function () {return (
-        _this.props.allowedPositions ?
-        _this.props.allowedPositions.filter(function (item) {return DefaultPositions.includes(item);}) :
-        DefaultPositions);};_this.
+    getPositions = function () {
+      return _this.props.allowedPositions;
+    };_this.
 
     refContent = function (node) {
       _this.contentElement = node;
@@ -611,7 +609,7 @@ Tooltip = exports.Tooltip = (0, _rootNode.rootNode)(_class = (_Tooltip = /*#__PU
             margin: _this.theme.tooltipMarginSmall
           };
       }
-    };return _this;}(0, _inheritsLoose2.default)(Tooltip, _React$PureComponent);var _proto = Tooltip.prototype;_proto.validateProps = function validateProps(props) {(0, _warning.default)(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 : DefaultPositions;};_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();}};_proto.componentWillUnmount = function componentWillUnmount() {this.clearHoverTimeout();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;_this2.sizeVariables = _this2.getSizeVariables();return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupBackground: theme.tooltipBg, popupBorder: theme.tooltipBorder, popupBorderRadius: _this2.sizeVariables.borderRadius, popupPinSize: _this2.sizeVariables.pinSize, popupPinOffsetX: _this2.sizeVariables.pinOffsetX, popupPinOffsetY: _this2.sizeVariables.pinOffsetY, popupMargin: _this2.sizeVariables.margin }, theme) }, _this2.renderMain());});});};_proto.renderCloseButton = function renderCloseButton() {var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.getProps().trigger) : this.props.closeButton;if (!hasCross) {return null;}var icon = /*#__PURE__*/_react.default.createElement(_CloseButtonIcon.CloseButtonIcon, { tabbable: false, side: parseInt(this.theme.tooltipCloseBtnSide), color: this.theme.tooltipCloseBtnColor, colorHover: this.theme.tooltipCloseBtnHoverColor });return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tooltip2.styles.closeButton(this.theme), this.sizeVariables.closeButtonStyle), onClick: this.handleCloseButtonClick, "data-tid": TooltipDataTids.crossIcon }, icon);}; /**
+    };return _this;}(0, _inheritsLoose2.default)(Tooltip, _React$PureComponent);var _proto = Tooltip.prototype;_proto.validateProps = function validateProps(props) {(0, _warning.default)(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();}};_proto.componentWillUnmount = function componentWillUnmount() {this.clearHoverTimeout();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.featureFlags = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;_this2.sizeVariables = _this2.getSizeVariables();return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ popupBackground: theme.tooltipBg, popupBorder: theme.tooltipBorder, popupBorderRadius: _this2.sizeVariables.borderRadius, popupPinSize: _this2.sizeVariables.pinSize, popupPinOffsetX: _this2.sizeVariables.pinOffsetX, popupPinOffsetY: _this2.sizeVariables.pinOffsetY, popupMargin: _this2.sizeVariables.margin }, theme) }, _this2.renderMain());});});};_proto.renderCloseButton = function renderCloseButton() {var hasCross = this.props.closeButton === undefined ? !Tooltip.triggersWithoutCloseButton.includes(this.getProps().trigger) : this.props.closeButton;if (!hasCross) {return null;}var icon = /*#__PURE__*/_react.default.createElement(_CloseButtonIcon.CloseButtonIcon, { tabbable: false, side: parseInt(this.theme.tooltipCloseBtnSide), color: this.theme.tooltipCloseBtnColor, colorHover: this.theme.tooltipCloseBtnHoverColor });return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tooltip2.styles.closeButton(this.theme), this.sizeVariables.closeButtonStyle), onClick: this.handleCloseButtonClick, "data-tid": TooltipDataTids.crossIcon }, icon);}; /**
    * Программно открывает тултип.
    * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
    * @public
@@ -619,4 +617,4 @@ Tooltip = exports.Tooltip = (0, _rootNode.rootNode)(_class = (_Tooltip = /*#__PU
    * Программно закрывает тултип.
    * <p>Не действует если проп *trigger* `'opened'` или `'closed'`.</p>
    * @public
-   */;_proto.hide = function hide() {var trigger = this.getProps().trigger;if (trigger === 'opened' || trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getPopupAndLaye = this.getPopupAndLayerProps(),popupProps = _this$getPopupAndLaye.popupProps,_this$getPopupAndLaye2 = _this$getPopupAndLaye.layerProps,layerProps = _this$getPopupAndLaye2 === void 0 ? { active: false } : _this$getPopupAndLaye2;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,trigger = _this$getProps2.trigger;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ "data-tid": TooltipDataTids.root, anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: disableAnimations, positions: (0, _ThemeHelpers.isThemeGTE)(this.theme, '5.4') ? this.getPositions() : this.props.allowedPositions, pos: this.props.pos, ignoreHover: trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true, ref: this.popupRef, withoutMobile: true }, popupProps), content));};_proto.getPopupAndLayerProps = function getPopupAndLayerProps() {var props = this.props;var useWrapper = !!props.children && this.getProps().useWrapper;var trigger = this.getProps().trigger;switch (trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {_globalObject.globalObject.clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && (0, _isInstanceOf.isInstanceOf)(event.target, _globalObject.globalObject.Element)) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _Tooltip.__KONTUR_REACT_UI__ = 'Tooltip', _Tooltip.displayName = 'Tooltip', _Tooltip.defaultProps = { size: 'small', trigger: 'hover', disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, delayBeforeShow: DEFAULT_DELAY }, _Tooltip.delay = DEFAULT_DELAY, _Tooltip.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _Tooltip)) || _class;
+   */;_proto.hide = function hide() {var trigger = this.getProps().trigger;if (trigger === 'opened' || trigger === 'closed') {(0, _warning.default)(true, "Function 'hide' is not supported with trigger specified '" + trigger + "'");return;}this.close();};_proto.renderMain = function renderMain() {var props = this.props;var content = this.renderContent();var _this$getPopupAndLaye = this.getPopupAndLayerProps(),popupProps = _this$getPopupAndLaye.popupProps,_this$getPopupAndLaye2 = _this$getPopupAndLaye.layerProps,layerProps = _this$getPopupAndLaye2 === void 0 ? { active: false } : _this$getPopupAndLaye2;var anchorElement = props.children || props.anchorElement;var popup = this.renderPopup(anchorElement, popupProps, content);return /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, (0, _extends2.default)({}, layerProps, { getAnchorElement: this.getAnchorElement }), popup);};_proto.renderPopup = function renderPopup(anchorElement, popupProps, content) {var _this$getProps2 = this.getProps(),disableAnimations = _this$getProps2.disableAnimations,trigger = _this$getProps2.trigger;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_Popup.Popup, (0, _extends2.default)({ "data-tid": TooltipDataTids.root, anchorElement: anchorElement, hasPin: true, hasShadow: true, maxWidth: "none", opened: this.state.opened, disableAnimations: disableAnimations, positions: this.getPositions(), pos: this.props.pos, ignoreHover: trigger === 'hoverAnchor', onOpen: this.props.onOpen, onClose: this.props.onClose, tryPreserveFirstRenderedPosition: true, ref: this.popupRef, withoutMobile: true }, popupProps), content));};_proto.getPopupAndLayerProps = function getPopupAndLayerProps() {var props = this.props;var useWrapper = !!props.children && this.getProps().useWrapper;var trigger = this.getProps().trigger;switch (trigger) {case 'opened':return { layerProps: { active: true, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { opened: true, useWrapper: useWrapper } };case 'closed':return { popupProps: { opened: false, useWrapper: useWrapper } };case 'hoverAnchor':case 'hover':return { popupProps: { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };case 'manual':return { popupProps: { useWrapper: useWrapper } };case 'click':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onClick: this.handleClick, useWrapper: useWrapper } };case 'focus':return { popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, useWrapper: useWrapper } };case 'hover&focus':return { layerProps: { active: this.state.opened, onClickOutside: this.handleClickOutsideAnchor }, popupProps: { onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, useWrapper: useWrapper } };default:throw new Error('Unknown trigger specified: ' + trigger);}};_proto.clearHoverTimeout = function clearHoverTimeout() {if (this.hoverTimeout) {_globalObject.globalObject.clearTimeout(this.hoverTimeout);this.hoverTimeout = null;}};_proto.isClickOutsideContent = function isClickOutsideContent(event) {if (this.contentElement && (0, _isInstanceOf.isInstanceOf)(event.target, _globalObject.globalObject.Element)) {return !(0, _listenFocusOutside.containsTargetOrRenderContainer)(event.target)(this.contentElement);}return true;};return Tooltip;}(_react.default.PureComponent), _Tooltip.__KONTUR_REACT_UI__ = 'Tooltip', _Tooltip.displayName = 'Tooltip', _Tooltip.defaultProps = { size: 'small', trigger: 'hover', disableAnimations: _currentEnvironment.isTestEnv, useWrapper: false, delayBeforeShow: DEFAULT_DELAY }, _Tooltip.delay = DEFAULT_DELAY, _Tooltip.triggersWithoutCloseButton = ['hover', 'hoverAnchor', 'focus', 'hover&focus'], _Tooltip)) || _class;