@skbkontur/react-ui 0.0.0-957e78b437 → 0.0.0-959e646d91

package/cjs/components/Autocomplete/__creevey__/Autocomplete.creevey.mts

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const commonTests = () => {
+  test('focus and type text', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElement = context.webdriver.findElement({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const mobileHintsTests = () => {
+  test('noInputValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'noInputValue');
+  });
+
+  test('nothingWasFound', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('abc')
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'nothingWasFound');
+  });
+
+  test('updateValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('one')
+      .perform();
+    await delay(200);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'updateValue');
+  });
+};
+
+const sizeTests = () => {
+  test('focus and type text small', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text medium', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text large', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[2]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const menuPosTests = () => {
+  test('focus and type text menu top', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+  test('focus and type text menu bottom', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+kind('Autocomplete', () => {
+  story('Simple', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focused', async (context) => {
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).perform();
+      await delay(1000);
+      await context.matchImage(await autocompleteElement.takeScreenshot());
+    });
+
+    commonTests();
+  });
+
+  story('WithRenderItem', () => {
+    commonTests();
+  });
+
+  story('WithBigRenderItemWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedMenuSize', () => {
+    commonTests();
+  });
+
+  story('WithPercentageWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedWidth', () => {
+    commonTests();
+  });
+
+  story('WithZeroWidth', () => {
+    commonTests();
+  });
+
+  story('MobileHints', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileHintsEN', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileWithTitle', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
+        flaky: {
+          in: ['firefox2022'],
+          tests: ['opened top with portal', 'opened bottom with portal'],
+        },
+      },
+    });
+
+    test('opened top with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+
+    test('opened bottom with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .click(autocompleteElement)
+        .sendKeys('o')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+  });
+
+  story('Size', () => {
+    sizeTests();
+  });
+
+  story('WithDisabledPortal', () => {
+    commonTests();
+    menuPosTests();
+  });
+
+  story('MenuPos', () => {
+    menuPosTests();
+  });
+});

package/cjs/components/Autocomplete/__docs__/Autocomplete.mdx

@@ -0,0 +1,26 @@
+import * as AutocompleteStories from './Autocomplete.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+import { Autocomplete } from '../Autocomplete';
+import { Button, Group, Gapped } from '@skbkontur/react-ui';
+
+<Meta of={AutocompleteStories} />
+
+# Autocomplete
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/cjs/components/Button/Button.d.ts

@@ -11,96 +11,54 @@ export interface ButtonInnerProps extends CommonProps {
     _noPadding?: boolean;
     /** @ignore */
     _noRightPadding?: boolean;
-    /**
-     * Применяет к кнопке стили псевдокласса `:active`.
-     */
+    /** Применяет к кнопке стили псевдокласса `:active`. */
     active?: boolean;
-    /**
-     * CSS-свойство `text-align`.
-     */
+    /** Задаёт выравнивание тексту в кнопке. */
     align?: React.CSSProperties['textAlign'];
-    /**
-     * Превращает обычную кнопку в кнопку со стрелкой.
-     */
+    /** Превращает обычную кнопку в кнопку со стрелкой. */
     arrow?: boolean | 'left';
-    /**
-     * Даёт кнопке фокус после окончания загрузки страницы.
-     */
+    /** Устанавливает фокус на контроле после окончания загрузки страницы.*/
     autoFocus?: boolean;
-    /**
-     * Убирает обводку у кнопки.
-     */
+    /** Убирает обводку у кнопки. */
     borderless?: boolean;
-    /**
-     * @ignore
-     */
+    /** @ignore */
     checked?: boolean;
+    /** @ignore */
     children?: React.ReactNode;
     /** @ignore */
     corners?: React.CSSProperties;
-    /**
-     * Отключенное состояние кнопки.
-     */
+    /** Делает компонент недоступным. */
     disabled?: boolean;
     /** @ignore */
     disableFocus?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Иконка слева от текста кнопки.
-     */
+    /** Добавляет иконку слева от текста кнопки. */
     icon?: React.ReactElement;
-    /**
-     * Иконка справа от текста кнопки.
-     */
+    /** Добавляет иконку справа от текста кнопки. */
     rightIcon?: React.ReactElement;
-    /**
-     * Переводит кнопку в состояние загрузки.
-     */
+    /** Переводит кнопку в состояние загрузки. */
     loading?: boolean;
-    /**
-     * Сужает кнопку.
-     */
+    /** Сужает кнопку. */
     narrow?: boolean;
-    /**
-     * Задаёт размер кнопки.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
+    /** Задаёт размер кнопки. */
     size?: SizeProp;
-    /**
-     * HTML-атрибут `type`.
-     */
+    /** Задаёт HTML-атрибут `type`. */
     type?: ButtonType;
-    /**
-     * HTML-атрибут `title`.
-     */
+    /** Задаёт HTML-атрибут `title`. */
     title?: string;
-    /**
-     * Стиль кнопки.
-     *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
-     *
+    /** Задаёт стиль кнопки.
      * **Вариант `link` устарел.**
      * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`.
      */
     use?: ButtonUse;
     /** @ignore */
     visuallyFocused?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
-    /**
-     * CSS-свойство `width`.
-     */
+    /** Задаёт ширину кнопки. */
     width?: number | string;
-    /**
-     * Обычный объект с переменными темы.
-     * Он будет объединён с темой из контекста.
-     */
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
     theme?: ThemeIn;
 }
 export declare const BUTTON_DEFAULT_COMPONENT = "button";
@@ -124,8 +82,6 @@ export declare class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DE
         focusedByTab: boolean;
     };
     private theme;
-    private emotion;
-    private styles;
     private node;
     private setRootNode;
     componentDidMount(): void;
@@ -150,5 +106,4 @@ export declare class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DE
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps<"button">, string | React.JSXElementConstructor<any>>;
 export {};

package/cjs/components/Button/Button.js

@@ -1,8 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.isButton = exports.ButtonDataTids = exports.Button = exports.BUTTON_DEFAULT_COMPONENT = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ButtonDataTids = exports.Button = exports.BUTTON_DEFAULT_COMPONENT = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
 
-
 var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _keyListener = require("../../lib/events/keyListener");
@@ -85,48 +84,6 @@ var _LoadingButtonIcon = require("./LoadingButtonIcon");var _class, _Button;var
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -195,8 +152,6 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
     };_this.
 
 
-
-
     node = null;_this.
 
 
@@ -259,15 +214,7 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
 
 
-
-
-
-
-
-
-
-
-    renderMain = function (props) {var _this$emotion, _this$emotion$cx, _this$emotion$cx4, _this$emotion$cx5;
+    renderMain = function (props) {var _cx, _cx4, _cx5;
       var
         corners =
 
@@ -303,37 +250,35 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
       var _useButtonArrow = (0, _ButtonArrow.useButtonArrow)((0, _extends2.default)({},
         _this.props, { isFocused: Boolean(isFocused) }),
-        _this.theme,
-        _this.emotion
+        _this.theme
         ),rootClassNameWithArrow = _useButtonArrow[0],arrowNode = _useButtonArrow[1];
       var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
 
       var trueDisabled = disabled || loading;
-      var styles = _this.styles;
-      var rootClassName = (_this$emotion = _this.emotion).cx.apply(_this$emotion, [
-      styles.root(_this.theme),
-      styles[use](_this.theme),
+      var rootClassName = _Emotion.cx.apply(void 0, [
+      _Button2.styles.root(_this.theme),
+      _Button2.styles[use](_this.theme),
       sizeClass,
-      narrow && styles.narrow(),
-      _noPadding && styles.noPadding(),
-      _noRightPadding && styles.noRightPadding(),
+      narrow && _Button2.styles.narrow(),
+      _noPadding && _Button2.styles.noPadding(),
+      _noRightPadding && _Button2.styles.noRightPadding(),
       rootClassNameWithArrow].concat(
         trueDisabled ?
         [
-        styles.disabled(_this.theme),
-        isUseStateWithoutOutlineInDisabledState && styles.disabledWithoutOutline(_this.theme),
-        checked && styles.checkedDisabled(_this.theme),
-        borderless && styles.borderless(),
-        use === 'backless' && styles.backlessDisabled(_this.theme),
-        use === 'text' && styles.textDisabled(),
+        _Button2.styles.disabled(_this.theme),
+        isUseStateWithoutOutlineInDisabledState && _Button2.styles.disabledWithoutOutline(_this.theme),
+        checked && _Button2.styles.checkedDisabled(_this.theme),
+        borderless && _Button2.styles.borderless(),
+        use === 'backless' && _Button2.styles.backlessDisabled(_this.theme),
+        use === 'text' && _Button2.styles.textDisabled(),
         _Button2.globalClasses.disabled] :
 
         [
-        active && !checked && (0, _Button2.getActiveStyles)(_this.emotion)[use](_this.theme),
-        isFocused && styles.focus(_this.theme),
-        checked && styles.checked(_this.theme),
-        checked && isFocused && styles.checkedFocused(_this.theme),
-        borderless && !checked && !isFocused && styles.borderless()])
+        active && !checked && _Button2.activeStyles[use](_this.theme),
+        isFocused && _Button2.styles.focus(_this.theme),
+        checked && _Button2.styles.checked(_this.theme),
+        checked && isFocused && _Button2.styles.checkedFocused(_this.theme),
+        borderless && !checked && !isFocused && _Button2.styles.borderless()])
 
       );
 
@@ -351,9 +296,9 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
 
       var wrapProps = {
-        className: _this.emotion.cx(_Button2.globalClasses.root, (_this$emotion$cx = {}, _this$emotion$cx[
-        styles.wrap(_this.theme)] = true, _this$emotion$cx[
-        _this.getSizeWrapClassName()] = true, _this$emotion$cx)
+        className: (0, _Emotion.cx)(_Button2.globalClasses.root, (_cx = {}, _cx[
+        _Button2.styles.wrap(_this.theme)] = true, _cx[
+        _this.getSizeWrapClassName()] = true, _cx)
         ),
         style: {
           width: width
@@ -363,15 +308,15 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
       var innerShadowNode = null;
 
       var outlineNode = null;
-      if ((!isFocused || isLink) && !trueDisabled) {var _this$emotion$cx2;
+      if ((!isFocused || isLink) && !trueDisabled) {var _cx2;
         outlineNode = /*#__PURE__*/
         _react.default.createElement("div", {
-          className: _this.emotion.cx(styles.outline(), (_this$emotion$cx2 = {}, _this$emotion$cx2[
-          styles.outlineWarning(_this.theme)] = warning, _this$emotion$cx2[
-          styles.outlineError(_this.theme)] = error, _this$emotion$cx2[
-          styles.outlineLink()] = isLink, _this$emotion$cx2[
-          styles.outlineLinkWarning(_this.theme)] = isLink && warning, _this$emotion$cx2[
-          styles.outlineLinkError(_this.theme)] = isLink && error, _this$emotion$cx2)
+          className: (0, _Emotion.cx)(_Button2.styles.outline(), (_cx2 = {}, _cx2[
+          _Button2.styles.outlineWarning(_this.theme)] = warning, _cx2[
+          _Button2.styles.outlineError(_this.theme)] = error, _cx2[
+          _Button2.styles.outlineLink()] = isLink, _cx2[
+          _Button2.styles.outlineLinkWarning(_this.theme)] = isLink && warning, _cx2[
+          _Button2.styles.outlineLinkError(_this.theme)] = isLink && error, _cx2)
           ) }
         );
 
@@ -389,18 +334,18 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
 
       // Force disable all props and features, that cannot be use with Link
-      if (isLink) {var _this$emotion$cx3;
-        rootProps.className = _this.emotion.cx((_this$emotion$cx3 = {}, _this$emotion$cx3[
-        styles.root(_this.theme)] = true, _this$emotion$cx3[
-        sizeClass] = true, _this$emotion$cx3[
-        styles.link(_this.theme)] = true, _this$emotion$cx3[
-        styles.linkLineHeight()] = !_client.isSafari, _this$emotion$cx3[
-        styles.linkLineHeightSafariFallback()] = _client.isSafari, _this$emotion$cx3[
-        styles.linkFocus(_this.theme)] = isFocused, _this$emotion$cx3[
-        styles.linkDisabled(_this.theme)] = trueDisabled, _this$emotion$cx3)
+      if (isLink) {var _cx3;
+        rootProps.className = (0, _Emotion.cx)((_cx3 = {}, _cx3[
+        _Button2.styles.root(_this.theme)] = true, _cx3[
+        sizeClass] = true, _cx3[
+        _Button2.styles.link(_this.theme)] = true, _cx3[
+        _Button2.styles.linkLineHeight()] = !_client.isSafari, _cx3[
+        _Button2.styles.linkLineHeightSafariFallback()] = _client.isSafari, _cx3[
+        _Button2.styles.linkFocus(_this.theme)] = isFocused, _cx3[
+        _Button2.styles.linkDisabled(_this.theme)] = trueDisabled, _cx3)
         );
         Object.assign(wrapProps, {
-          className: _this.emotion.cx(styles.wrap(_this.theme), styles.wrapLink()),
+          className: (0, _Emotion.cx)(_Button2.styles.wrap(_this.theme), _Button2.styles.wrapLink()),
           style: { width: wrapProps.style.width }
         });
 
@@ -412,16 +357,16 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
       var captionNode = /*#__PURE__*/
       _react.default.createElement("div", {
-        className: _this.emotion.cx(styles.caption(), _Button2.globalClasses.caption, (_this$emotion$cx4 = {}, _this$emotion$cx4[
-        styles.captionLink()] = isLink, _this$emotion$cx4[
-        styles.captionDisabled()] = !checked && disabled, _this$emotion$cx4)
+        className: (0, _Emotion.cx)(_Button2.styles.caption(), _Button2.globalClasses.caption, (_cx4 = {}, _cx4[
+        _Button2.styles.captionLink()] = isLink, _cx4[
+        _Button2.styles.captionDisabled()] = !checked && disabled, _cx4)
         ) },
 
       loadingNode,
       leftIconNode, /*#__PURE__*/
       _react.default.createElement("span", {
-        className: _this.emotion.cx(_Button2.globalClasses.text, (_this$emotion$cx5 = {}, _this$emotion$cx5[
-        styles.visibilityHidden()] = hasLoadingNode, _this$emotion$cx5)
+        className: (0, _Emotion.cx)(_Button2.globalClasses.text, (_cx5 = {}, _cx5[
+        _Button2.styles.visibilityHidden()] = hasLoadingNode, _cx5)
         ) },
 
       children
@@ -504,8 +449,6 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
 
 
 
-
-
 
 
 
@@ -539,7 +482,7 @@ Button = exports.Button = (0, _rootNode.rootNode)(_class = (_Button = /*#__PURE_
    * @public
    */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null || _this$node.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null || _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;_this2.styles = (0, _Button2.getStyles)(_this2.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});});};_proto.getTabIndex = function getTabIndex(_ref2) {var disableFocus = _ref2.disableFocus,disabled = _ref2.disabled,_ref2$tabIndex = _ref2.tabIndex,tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;if (disableFocus || disabled) {return -1;}return tabIndex;};_proto.renderIcon2022 = function renderIcon2022(icon) {if (icon && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;var sizes = (0, _ButtonIcon.getButtonIconSizes)(this.theme);return /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size] });}return icon;};_proto.getSizeClassName = function getSizeClassName() {var _this$emotion$cx6, _this$emotion$cx7, _this$emotion$cx8;var styles = this.styles;switch (this.getProps().size) {case 'large':return this.emotion.cx(styles.sizeLarge(this.theme), (_this$emotion$cx6 = {}, _this$emotion$cx6[styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx6[styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx6[styles.sizeLargeWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _this$emotion$cx6));case 'medium':return this.emotion.cx(styles.sizeMedium(this.theme), (_this$emotion$cx7 = {}, _this$emotion$cx7[styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx7[styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx7[styles.sizeMediumWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _this$emotion$cx7));case 'small':default:return this.emotion.cx(styles.sizeSmall(this.theme), (_this$emotion$cx8 = {}, _this$emotion$cx8[styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _this$emotion$cx8[styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _this$emotion$cx8[styles.sizeSmallWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _this$emotion$cx8));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {var styles = this.styles;switch (this.getProps().size) {case 'large':return styles.wrapLarge(this.theme);case 'medium':return styles.wrapMedium(this.theme);case 'small':default:return styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _Button.__KONTUR_REACT_UI__ = 'Button', _Button.displayName = 'Button', _Button.__BUTTON__ = true, _Button.defaultProps = { use: 'default', size: 'small', // By default the type attribute is 'submit'. IE8 will fire a click event
+   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null || _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});};_proto.getTabIndex = function getTabIndex(_ref2) {var disableFocus = _ref2.disableFocus,disabled = _ref2.disabled,_ref2$tabIndex = _ref2.tabIndex,tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;if (disableFocus || disabled) {return -1;}return tabIndex;};_proto.renderIcon2022 = function renderIcon2022(icon) {if (icon && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;var sizes = (0, _ButtonIcon.getButtonIconSizes)(this.theme);return /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size] });}return icon;};_proto.getSizeClassName = function getSizeClassName() {var _cx6, _cx7, _cx8;switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button2.styles.sizeLarge(this.theme), (_cx6 = {}, _cx6[_Button2.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx6[_Button2.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx6[_Button2.styles.sizeLargeWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _cx6));case 'medium':return (0, _Emotion.cx)(_Button2.styles.sizeMedium(this.theme), (_cx7 = {}, _cx7[_Button2.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx7[_Button2.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx7[_Button2.styles.sizeMediumWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _cx7));case 'small':default:return (0, _Emotion.cx)(_Button2.styles.sizeSmall(this.theme), (_cx8 = {}, _cx8[_Button2.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx8[_Button2.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx8[_Button2.styles.sizeSmallWithIconWithoutText(this.theme)] = !!this.props.icon && !this.props.children, _cx8));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button2.styles.wrapLarge(this.theme);case 'medium':return _Button2.styles.wrapMedium(this.theme);case 'small':default:return _Button2.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _Button.__KONTUR_REACT_UI__ = 'Button', _Button.displayName = 'Button', _Button.__BUTTON__ = true, _Button.defaultProps = { use: 'default', size: 'small', // By default the type attribute is 'submit'. IE8 will fire a click event
   // on this button if somewhere on the page user presses Enter while some
   // input is focused. So we set type to 'button' by default.
-  type: 'button', component: BUTTON_DEFAULT_COMPONENT }, _Button)) || _class;var isButton = exports.isButton = (0, _utils.isReactUIComponent)('Button');
+  type: 'button', component: BUTTON_DEFAULT_COMPONENT }, _Button)) || _class;