@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/Button/Button.js

@@ -1,225 +1,379 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var tabListener_1 = tslib_1.__importDefault(require("../../lib/events/tabListener"));
-var Corners_1 = tslib_1.__importDefault(require("./Corners"));
-require("../ensureOldIEClassName");
-var Emotion_1 = require("../../lib/theming/Emotion");
-var Button_module_less_1 = tslib_1.__importDefault(require("./Button.module.css"));
-var Button_styles_1 = tslib_1.__importDefault(require("./Button.styles"));
-var ThemeConsumer_1 = require("../ThemeConsumer");
-var Button = /** @class */function (_super) {
-  tslib_1.__extends(Button, _super);
-  function Button() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.state = {
-      focusedByTab: false };
-
-    _this.node = null;
-    _this.handleFocus = function (e) {
-      if (!_this.props.disabled && !_this.props.disableFocus) {
-        // focus event fires before keyDown eventlistener
-        // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (tabListener_1["default"].isTabPressed) {
-            _this.setState({ focusedByTab: true });
-          }
-        });
-        if (_this.props.onFocus) {
-          _this.props.onFocus(e);
-        }
-      }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    _this.handleBlur = function (e) {
-      _this.setState({ focusedByTab: false });
-      if (!_this.props.disabled && !_this.props.disableFocus) {
-        if (_this.props.onBlur) {
-          _this.props.onBlur(e);
-        }
-      }
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this._ref = function (node) {
-      _this.node = node;
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    return _this;
-  }
-  Button.prototype.componentDidMount = function () {
-    if (this.props.autoFocus) {
-      tabListener_1["default"].isTabPressed = true;
-      this.focus();
-    }
-  };
-  /**
-   * @public
-   */
-  Button.prototype.focus = function () {
-    if (this.node) {
-      this.node.focus();
-    }
-  };
-  /**
-   * @public
-   */
-  Button.prototype.blur = function () {
-    if (this.node) {
-      this.node.blur();
-    }
-  };
-  Button.prototype.render = function () {
-    var _this = this;
-    return React.createElement(ThemeConsumer_1.ThemeConsumer, null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
-    });
-  };
-  Button.prototype.renderMain = function () {
-    var _a, _b, _c, _d, _e;
-    var _f = this.props.corners,corners = _f === void 0 ? 0 : _f;
-    var sizeClass = this.getSizeClassName();
-    var isError = !!this.props.error;
-    var isWarning = !!this.props.warning;
-    var rootProps = {
-      // 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: this.props.type,
-      className: Emotion_1.cx((_a = {},
-      _a[Button_module_less_1["default"].root] = true,
-      _a[Button_styles_1["default"].root(this.theme)] = true,
-      _a[Emotion_1.cx(Button_styles_1["default"][this.props.use] && Button_styles_1["default"][this.props.use](this.theme)) ||
-      Button_styles_1["default"]["default"](this.theme)] = true,
-      _a[Button_module_less_1["default"].active] = !!this.props.active,
-      _a[Button_module_less_1["default"].checked] = !!this.props.checked,
-      _a[Button_styles_1["default"].checked(this.theme)] = !!this.props.checked,
-      _a[Button_module_less_1["default"].disabled] = !!this.props.disabled || !!this.props.loading,
-      _a[Button_styles_1["default"].disabled(this.theme)] = !!this.props.disabled || !!this.props.loading,
-      _a[Button_module_less_1["default"].errorRoot] = isError,
-      _a[Button_module_less_1["default"].warningRoot] = isWarning,
-      _a[Button_module_less_1["default"].error] = isError,
-      _a[Button_module_less_1["default"].warning] = isWarning,
-      _a[Button_module_less_1["default"].narrow] = !!this.props.narrow,
-      _a[Button_module_less_1["default"].noPadding] = !!this.props._noPadding,
-      _a[Button_module_less_1["default"].noRightPadding] = !!this.props._noRightPadding,
-      _a[Button_module_less_1["default"].buttonWithIcon] = !!this.props.icon,
-      _a[sizeClass] = true,
-      _a[Button_module_less_1["default"].focus] = this.state.focusedByTab || !!this.props.visuallyFocused,
-      _a[Button_styles_1["default"].focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused,
-      _a[Button_module_less_1["default"].borderless] = !!this.props.borderless,
-      _a)),
-      style: {
-        borderTopLeftRadius: corners & Corners_1["default"].TOP_LEFT ? 0 : undefined,
-        borderTopRightRadius: corners & Corners_1["default"].TOP_RIGHT ? 0 : undefined,
-        borderBottomRightRadius: corners & Corners_1["default"].BOTTOM_RIGHT ? 0 : undefined,
-        borderBottomLeftRadius: corners & Corners_1["default"].BOTTOM_LEFT ? 0 : undefined,
-        textAlign: this.props.align },
-
-      disabled: this.props.disabled || this.props.loading,
-      onClick: this.props.onClick,
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur,
-      onKeyDown: this.props.onKeyDown,
-      onMouseEnter: this.props.onMouseEnter,
-      onMouseLeave: this.props.onMouseLeave,
-      onMouseOver: this.props.onMouseOver,
-      tabIndex: this.props.disableFocus ? -1 : 0 };
-
-    var wrapProps = {
-      className: Emotion_1.cx((_b = {},
-      _b[Button_module_less_1["default"].wrap] = true,
-      _b[Button_styles_1["default"].wrap(this.theme)] = true,
-      _b[Button_module_less_1["default"].wrap_arrow] = !!this.props.arrow,
-      _b[Button_module_less_1["default"].wrap_arrow_left] = this.props.arrow === 'left',
-      _b)),
-      style: {
-        width: this.props.width } };
-
-
-    var error = null;
-    if (this.props.error) {
-      error = React.createElement("div", { className: Emotion_1.cx(Button_module_less_1["default"].error, Button_styles_1["default"].error(this.theme)) });
-    } else
-    if (this.props.warning) {
-      error = React.createElement("div", { className: Emotion_1.cx(Button_module_less_1["default"].warning, Button_styles_1["default"].warning(this.theme)) });
-    }
-    var loading = null;
-    if (this.props.loading) {
-      loading = React.createElement("div", { className: Button_module_less_1["default"].loading });
-    }
-    var icon = this.props.icon;
-    if (this.props.icon) {
-      icon = React.createElement("span", { className: Button_module_less_1["default"].icon }, this.props.icon);
-    }
-    var arrow = null;
-    if (this.props.arrow) {
-      arrow = React.createElement("div", { className: Emotion_1.cx((_c = {},
-        _c[Button_module_less_1["default"].arrow] = true,
-        _c[Button_module_less_1["default"].arrow_left] = this.props.arrow === 'left',
-        _c[Button_module_less_1["default"].arrow_loading || ''] = !!this.props.loading,
-        _c[Button_module_less_1["default"].arrow_warning || ''] = isWarning,
-        _c[Button_module_less_1["default"].arrow_error || ''] = isError,
-        _c[Button_styles_1["default"].arrow_warning(this.theme)] = isWarning,
-        _c[Button_styles_1["default"].arrow_error(this.theme)] = isError,
-        _c)) });
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
     }
-    // Force disable all props and features, that cannot be use with Link
-    if (this.props.use === 'link') {
-      rootProps.className = Emotion_1.cx((_d = {},
-      _d[Button_module_less_1["default"].root] = true,
-      _d[Button_styles_1["default"].root(this.theme)] = true,
-      _d[Button_module_less_1["default"].link] = true,
-      _d[Button_styles_1["default"].link(this.theme)] = true,
-      _d[Button_module_less_1["default"].disabled] = !!this.props.disabled,
-      _d[Button_styles_1["default"].disabled(this.theme)] = !!this.props.disabled,
-      _d[Button_module_less_1["default"].buttonWithIcon] = !!this.props.icon,
-      _d[sizeClass] = true,
-      _d[Button_module_less_1["default"].focus] = this.state.focusedByTab || !!this.props.visuallyFocused,
-      _d[Button_styles_1["default"].focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused,
-      _d));
-      Object.assign(wrapProps, {
-        className: Emotion_1.cx(Button_module_less_1["default"].wrap, (_e = {},
-        _e[Button_module_less_1["default"].wrap_link] = this.props.use === 'link',
-        _e)),
-        style: { width: wrapProps.style.width } });
-
-      rootProps.style.textAlign = undefined;
-      loading = null;
-      arrow = null;
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import warning from 'warning';
+import { isKonturIcon } from '../../lib/utils.js';
+import { isSafari } from '../../lib/client.js';
+import { KeyListener } from '../../lib/events/keyListener.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { Link } from '../Link/index.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles, getActiveStyles, globalClasses } from './Button.styles.js';
+import { ButtonIcon, getButtonIconSizes } from './ButtonIcon.js';
+import { useButtonArrow } from './ButtonArrow.js';
+import { getInnerLinkTheme } from './getInnerLinkTheme.js';
+import { LoadingButtonIcon } from './LoadingButtonIcon.js';
+export var BUTTON_DEFAULT_COMPONENT = 'button';
+export var ButtonDataTids = {
+    rootElement: 'Button__rootElement',
+    root: 'Button__root',
+    spinner: 'Button__spinner',
+};
+var SpanComponent = function (_a) {
+    var children = _a.children, rest = __rest(_a, ["children"]);
+    return React.createElement("span", __assign({}, rest), children);
+};
+/** Кнопка запускает действие, сценарий или позволяет перейти на другую страницу. */
+var Button = /** @class */ (function (_super) {
+    __extends(Button, _super);
+    function Button() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Button_1.defaultProps);
+        _this.state = {
+            focusedByTab: false,
+        };
+        _this.node = null;
+        _this.renderMain = function (props) {
+            var _a, _b, _c, _d, _e;
+            var corners = props.corners, active = props.active, disabled = props.disabled, borderless = props.borderless, checked = props.checked, error = props.error, warning = props.warning, loading = props.loading, narrow = props.narrow, arrow = props.arrow, icon = props.icon, rightIcon = props.rightIcon, _noPadding = props._noPadding, _noRightPadding = props._noRightPadding, visuallyFocused = props.visuallyFocused, align = props.align, disableFocus = props.disableFocus, width = props.width, tabIndex = props.tabIndex, _component = props.component, useProp = props.use, theme = props.theme, rest = __rest(props, ["corners", "active", "disabled", "borderless", "checked", "error", "warning", "loading", "narrow", "arrow", "icon", "rightIcon", "_noPadding", "_noRightPadding", "visuallyFocused", "align", "disableFocus", "width", "tabIndex", "component", "use", "theme"]);
+            var _f = _this.getProps(), use = _f.use, component = _f.component, children = _f.children;
+            var sizeClass = _this.getSizeClassName();
+            var isFocused = _this.state.focusedByTab || visuallyFocused;
+            var isLink = use === 'link';
+            var _g = useButtonArrow(__assign(__assign({}, _this.props), { isFocused: Boolean(isFocused), size: _this.size }), _this.theme, _this.styles, _this.cx), rootClassNameWithArrow = _g[0], arrowNode = _g[1];
+            var isUseStateWithoutOutlineInDisabledState = !['default', 'backless', 'outline'].includes(use);
+            var nonInteractive = disabled || loading;
+            var _h = _this.getUseStyle(), style = _h.style, styleActive = _h.styleActive;
+            var rootClassName = _this.cx.apply(_this, __spreadArray([_this.styles.root(_this.theme),
+                style,
+                sizeClass,
+                narrow && _this.styles.narrow(),
+                _noPadding && _this.styles.noPadding(),
+                _noRightPadding && _this.styles.noRightPadding(),
+                rootClassNameWithArrow], (nonInteractive
+                ? [
+                    _this.styles.disabled(_this.theme),
+                    isUseStateWithoutOutlineInDisabledState && _this.styles.disabledWithoutOutline(_this.theme),
+                    checked && _this.styles.checkedDisabled(_this.theme),
+                    borderless && _this.styles.borderless(),
+                    (use === 'backless' || use === 'outline') && _this.styles.backlessDisabled(_this.theme),
+                    use === 'text' && _this.styles.textDisabled(),
+                    globalClasses.disabled,
+                ]
+                : [
+                    active && !checked && styleActive,
+                    isFocused && _this.styles.focus(_this.theme),
+                    checked && _this.styles.checked(_this.theme),
+                    checked && isFocused && _this.styles.checkedFocused(_this.theme),
+                    borderless && !checked && !isFocused && _this.styles.borderless(),
+                ]), false));
+            var rootProps = __assign(__assign({}, rest), { className: rootClassName, style: __assign({ textAlign: align }, corners), onFocus: _this.handleFocus, onBlur: _this.handleBlur, tabIndex: _this.getTabIndex({ disableFocus: disableFocus, disabled: nonInteractive, tabIndex: tabIndex }) });
+            var wrapProps = {
+                className: _this.cx(globalClasses.root, (_a = {},
+                    _a[_this.styles.wrap(_this.theme)] = true,
+                    _a[_this.getSizeWrapClassName()] = true,
+                    _a)),
+                style: {
+                    width: width,
+                },
+            };
+            var buttonOnlyProps = component === 'button' ? { disabled: nonInteractive } : {};
+            var innerShadowNode = null;
+            var outlineNode = null;
+            if ((!isFocused || isLink) && !nonInteractive) {
+                outlineNode = (React.createElement("div", { className: _this.cx(_this.styles.outlineDefault(), (_b = {},
+                        _b[_this.styles.outlineWarning(_this.theme)] = warning,
+                        _b[_this.styles.outlineError(_this.theme)] = error,
+                        _b[_this.styles.outlineLink()] = isLink,
+                        _b[_this.styles.outlineLinkWarning(_this.theme)] = isLink && warning,
+                        _b[_this.styles.outlineLinkError(_this.theme)] = isLink && error,
+                        _b)) }));
+            }
+            var iconProps = {
+                use: use,
+                size: _this.size,
+                hasChildren: !!children,
+                loading: loading || false,
+            };
+            var leftIconNode = icon && React.createElement(ButtonIcon, __assign({}, iconProps, { position: "left", icon: icon }));
+            var rightIconNode = rightIcon && (React.createElement(ButtonIcon, __assign({}, iconProps, { hasBothIcons: !!icon && !!rightIcon, position: "right", icon: rightIcon })));
+            // Force disable all props and features, that cannot be use with Link
+            if (isLink) {
+                rootProps.className = _this.cx((_c = {},
+                    _c[_this.styles.root(_this.theme)] = true,
+                    _c[sizeClass] = true,
+                    _c[_this.styles.link(_this.theme)] = true,
+                    _c[_this.styles.linkLineHeight()] = !isSafari,
+                    _c[_this.styles.linkLineHeightSafariFallback()] = isSafari,
+                    _c[_this.styles.linkFocus(_this.theme)] = isFocused,
+                    _c[_this.styles.linkDisabled(_this.theme)] = nonInteractive,
+                    _c));
+                Object.assign(wrapProps, {
+                    className: _this.cx(_this.styles.wrap(_this.theme), _this.styles.wrapLink()),
+                    style: { width: wrapProps.style.width },
+                });
+                rootProps.style.textAlign = undefined;
+            }
+            var hasLoadingNode = loading && !icon && !rightIcon;
+            var loadingNode = hasLoadingNode && React.createElement(LoadingButtonIcon, { size: _this.size });
+            var captionNode = (React.createElement("div", { className: _this.cx(_this.styles.caption(), globalClasses.caption, (_d = {},
+                    _d[_this.styles.captionLink()] = isLink,
+                    _d[_this.styles.captionDisabled()] = !checked && disabled,
+                    _d)) },
+                loadingNode,
+                leftIconNode,
+                React.createElement("span", { className: _this.cx(globalClasses.text, (_e = {},
+                        _e[_this.styles.visibilityHidden()] = hasLoadingNode,
+                        _e)) }, children),
+                rightIconNode));
+            if (isLink && !loading) {
+                captionNode = (React.createElement(ThemeContext.Provider, { value: getInnerLinkTheme(_this.theme) }, React.createElement(Link, { focused: isFocused, disabled: disabled, icon: _this.renderIcon2022(icon), rightIcon: _this.renderIcon2022(rightIcon), tabIndex: -1, component: SpanComponent }, children)));
+            }
+            var Root = component;
+            return (React.createElement("span", __assign({}, wrapProps, { "data-tid": ButtonDataTids.root }),
+                React.createElement(Root, __assign({ "data-tid": ButtonDataTids.rootElement, ref: _this._ref }, rootProps, buttonOnlyProps),
+                    innerShadowNode,
+                    outlineNode,
+                    arrowNode,
+                    captionNode)));
+        };
+        _this.handleFocus = function (e) {
+            var _a, _b, _c, _d;
+            if (!_this.props.disabled && !_this.props.disableFocus) {
+                // focus event fires before keyDown eventlistener
+                // so we should check tabPressed in async way
+                (_b = (_a = _this.globalObject).requestAnimationFrame) === null || _b === void 0 ? void 0 : _b.call(_a, function () {
+                    if (_this.keyListener.isTabPressed) {
+                        _this.setState({ focusedByTab: true });
+                    }
+                });
+                (_d = (_c = _this.props).onFocus) === null || _d === void 0 ? void 0 : _d.call(_c, e);
+            }
+        };
+        _this.handleBlur = function (e) {
+            var _a, _b;
+            _this.setState({ focusedByTab: false });
+            if (!_this.props.disabled && !_this.props.disableFocus) {
+                (_b = (_a = _this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }
+        };
+        _this._ref = function (node) {
+            _this.node = node;
+        };
+        return _this;
     }
-    return React.createElement("span", tslib_1.__assign({}, wrapProps),
-    React.createElement("button", tslib_1.__assign({ ref: this._ref }, rootProps),
-    error,
-    loading,
-    arrow,
-    React.createElement("div", { className: Button_module_less_1["default"].caption },
-    icon,
-    this.props.children)));
-  };
-  Button.prototype.getSizeClassName = function () {
-    switch (this.props.size) {
-      case 'large':
-        return Emotion_1.cx(Button_module_less_1["default"].sizeLarge, Button_styles_1["default"].sizeLarge(this.theme));
-      case 'medium':
-        return Emotion_1.cx(Button_module_less_1["default"].sizeMedium, Button_styles_1["default"].sizeMedium(this.theme));
-      case 'small':
-      default:
-        return Emotion_1.cx(Button_module_less_1["default"].sizeSmall, Button_styles_1["default"].sizeSmall(this.theme));}
-
-  };
-  Button.__KONTUR_REACT_UI__ = 'Button';
-  Button.__BUTTON__ = true;
-  Button.TOP_LEFT = Corners_1["default"].TOP_LEFT;
-  Button.TOP_RIGHT = Corners_1["default"].TOP_RIGHT;
-  Button.BOTTOM_RIGHT = Corners_1["default"].BOTTOM_RIGHT;
-  Button.BOTTOM_LEFT = Corners_1["default"].BOTTOM_LEFT;
-  Button.defaultProps = {
-    use: 'default',
-    size: 'small',
-    type: 'button' };
-
-  return Button;
-}(React.Component);
-exports["default"] = Button;
-exports.isButton = function (child) {
-  return React.isValidElement(child) ? child.type.hasOwnProperty('__BUTTON__') : false;
-};
+    Button_1 = Button;
+    Button.prototype.componentDidMount = function () {
+        this.keyListener = new KeyListener(this.globalObject);
+        if (this.props.autoFocus) {
+            this.keyListener.isTabPressed = true;
+            this.focus();
+        }
+        warning(this.props.use !== 'link', '[Button]: `use="link"` has been deprecated. Please, use `<Link component="button" />` instead.');
+        warning(this.props.use !== 'primary', '[Button]: `use="primary"` has been deprecated. Please, use `use="accent"` instead.');
+        warning(this.props.use !== 'backless', '[Button]: `use="backless"` has been deprecated. Please, use `use="outline"` instead.');
+    };
+    Button.getDerivedStateFromProps = function (props) {
+        if (props.loading || props.disabled) {
+            return { focusedByTab: false };
+        }
+        return null;
+    };
+    /** Программно устанавливает фокус на кнопке. Появляется фокусная рамка, элемент получает клавиатурные события и воспринимается как текущий элемент для чтения скринридерами.
+     * @public
+     */
+    Button.prototype.focus = function () {
+        var _a;
+        (_a = this.node) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    /** Программно снимает фокус с кнопки.
+     * @public
+     */
+    Button.prototype.blur = function () {
+        var _a;
+        (_a = this.node) === null || _a === void 0 ? void 0 : _a.blur();
+    };
+    Button.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        this.activeStyles = getActiveStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = _this.props.theme ? ThemeFactory.create(_this.props.theme, theme) : theme;
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.props), _this.renderMain));
+        }));
+    };
+    Button.prototype.getTabIndex = function (_a) {
+        var disableFocus = _a.disableFocus, disabled = _a.disabled, _b = _a.tabIndex, tabIndex = _b === void 0 ? 0 : _b;
+        if (disableFocus || disabled) {
+            return -1;
+        }
+        return tabIndex;
+    };
+    Button.prototype.renderIcon2022 = function (icon) {
+        var _a;
+        if ((icon === null || icon === void 0 ? void 0 : icon.props) && isKonturIcon(icon)) {
+            var iconProps = icon.props;
+            var sizes = getButtonIconSizes(this.theme);
+            return React.cloneElement(icon, { size: (_a = iconProps.size) !== null && _a !== void 0 ? _a : sizes[this.size] });
+        }
+        return icon;
+    };
+    Button.prototype.getUseStyle = function () {
+        var style;
+        var styleActive;
+        var _a = this, styles = _a.styles, activeStyles = _a.activeStyles;
+        switch (this.props.use) {
+            case 'primary':
+            case 'accent':
+                style = styles.accent(this.theme);
+                styleActive = activeStyles.accent(this.theme);
+                break;
+            case 'backless':
+            case 'outline':
+                style = styles.outline(this.theme);
+                styleActive = activeStyles.outline(this.theme);
+                break;
+            case 'fill':
+                style = styles.fill(this.theme);
+                styleActive = activeStyles.fill(this.theme);
+                break;
+            case 'success':
+                style = styles.success(this.theme);
+                styleActive = activeStyles.success(this.theme);
+                break;
+            case 'danger':
+                style = styles.danger(this.theme);
+                styleActive = activeStyles.danger(this.theme);
+                break;
+            case 'pay':
+                style = styles.pay(this.theme);
+                styleActive = activeStyles.pay(this.theme);
+                break;
+            case 'text':
+                style = styles.text(this.theme);
+                styleActive = activeStyles.text(this.theme);
+                break;
+            default:
+                style = styles.default(this.theme);
+                styleActive = activeStyles.default(this.theme);
+        }
+        return { style: style, styleActive: styleActive };
+    };
+    Button.prototype.getSizeClassName = function () {
+        var _a, _b, _c;
+        var _d = this.getProps(), icon = _d.icon, rightIcon = _d.rightIcon, children = _d.children;
+        switch (this.size) {
+            case 'large': {
+                var commonClasses = (_a = {},
+                    _a[this.styles.sizeLargeWithIcon(this.theme)] = !!icon,
+                    _a[this.styles.sizeLargeWithRightIcon(this.theme)] = !!rightIcon,
+                    _a[this.styles.sizeLargeWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _a);
+                return this.cx(this.styles.sizeLarge(this.theme), commonClasses);
+            }
+            case 'medium': {
+                var commonClasses = (_b = {},
+                    _b[this.styles.sizeMediumWithIcon(this.theme)] = !!icon,
+                    _b[this.styles.sizeMediumWithRightIcon(this.theme)] = !!rightIcon,
+                    _b[this.styles.sizeMediumWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _b);
+                return this.cx(this.styles.sizeMedium(this.theme), commonClasses);
+            }
+            case 'small':
+            default: {
+                var commonClasses = (_c = {},
+                    _c[this.styles.sizeSmallWithIcon(this.theme)] = !!icon,
+                    _c[this.styles.sizeSmallWithRightIcon(this.theme)] = !!rightIcon,
+                    _c[this.styles.sizeSmallWithIconWithoutText(this.theme)] = (!!icon || !!rightIcon) && !children,
+                    _c);
+                return this.cx(this.styles.sizeSmall(this.theme), commonClasses);
+            }
+        }
+    };
+    Button.prototype.getSizeWrapClassName = function () {
+        switch (this.size) {
+            case 'large':
+                return this.styles.wrapLarge(this.theme);
+            case 'medium':
+                return this.styles.wrapMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.wrapSmall(this.theme);
+        }
+    };
+    var Button_1;
+    Button.__KONTUR_REACT_UI__ = 'Button';
+    Button.displayName = 'Button';
+    Button.__BUTTON__ = true;
+    Button.defaultProps = {
+        use: 'default',
+        // 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 = Button_1 = __decorate([
+        withRenderEnvironment,
+        withSize,
+        rootNode
+    ], Button);
+    return Button;
+}(React.Component));
+export { Button };
+//# sourceMappingURL=Button.js.map