@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/cjs/components/Button/Button.js

@@ -1,4 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isButton = exports.ButtonDataTids = exports.Button = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.isButton = exports.ButtonDataTids = exports.Button = exports.BUTTON_DEFAULT_ELEMENT = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+var _warning = _interopRequireDefault(require("warning"));
+
 
 var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
@@ -12,14 +15,14 @@ var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _Link = require("../Link");
-var _Spinner = require("../Spinner");
-var _LoadingIcon = require("../../internal/icons2022/LoadingIcon");
-var _SSRSafe = require("../../lib/SSRSafe");
+
+
 
 var _Button = require("./Button.styles");
 var _ButtonIcon = require("./ButtonIcon");
 var _ButtonArrow = require("./ButtonArrow");
-var _getInnerLinkTheme = require("./getInnerLinkTheme");var _class, _class2, _temp;
+var _getInnerLinkTheme = require("./getInnerLinkTheme");
+var _LoadingButtonIcon = require("./LoadingButtonIcon");var _excluded = ["onClick", "onFocus", "onBlur", "children"],_excluded2 = ["corners", "active", "disabled", "borderless", "checked", "error", "warning", "loading", "narrow", "icon", "rightIcon", "_noPadding", "_noRightPadding", "visuallyFocused", "align", "disableFocus", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseDown", "onMouseUp", "onKeyDown", "onClick", "onClickCapture", "width", "children", "tabIndex", "component", "className", "data-tid", "use", "size", "aria-describedby", "aria-haspopup", "aria-controls", "aria-label", "aria-checked", "aria-expanded", "role"];var _class, _class2, _temp;
 
 
 
@@ -150,6 +153,57 @@ var _getInnerLinkTheme = require("./getInnerLinkTheme");var _class, _class2, _te
 
 
 
+var BUTTON_DEFAULT_ELEMENT = 'button';exports.BUTTON_DEFAULT_ELEMENT = BUTTON_DEFAULT_ELEMENT;
+
+
+
+
+
+
+
+
+
+
+var ButtonDataTids = {
+  rootElement: 'Button__rootElement',
+  root: 'Button__root',
+  spinner: 'Button__spinner' };exports.ButtonDataTids = ButtonDataTids;
+
+
+
+
+var ButtonLink = function ButtonLink(_ref) {var focused = _ref.focused,disabled = _ref.disabled,icon = _ref.icon,rightIcon = _ref.rightIcon,as = _ref.as,tabIndex = _ref.tabIndex,children = _ref.children;return /*#__PURE__*/(
+    _react.default.createElement(_Link.Link, { focused: focused, disabled: disabled, icon: icon, rightIcon: rightIcon, as: as, tabIndex: tabIndex },
+    children));};var
+
+
+
+
+Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Button.defaultProps);_this.
+
+    state = {
+      focusedByTab: false };_this.
+
+
+
+    node = null;_this.
 
 
 
@@ -184,14 +238,11 @@ var _getInnerLinkTheme = require("./getInnerLinkTheme");var _class, _class2, _te
 
 
 
-var ButtonDataTids = {
-  root: 'Button__root' };exports.ButtonDataTids = ButtonDataTids;var
 
 
 
 
 
-Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -201,14 +252,10 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
-    getProps = (0, _createPropsGetter.createPropsGetter)(Button.defaultProps);_this.
 
-    state = {
-      focusedByTab: false };_this.
 
 
 
-    node = null;_this.
 
 
 
@@ -526,7 +573,7 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        _SSRSafe.globalThat.requestAnimationFrame(function () {
+        _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
           if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
@@ -544,13 +591,13 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
     _ref = function (node) {
       _this.node = node;
-    };return _this;}var _proto = Button.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}};Button.getDerivedStateFromProps = function getDerivedStateFromProps(props) {if (props.loading || props.disabled) {return { focusedByTab: false };}return null;} /**
+    };return _this;}var _proto = Button.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}(0, _warning.default)(this.props.use !== 'link', "[Button]: Use 'Link' has been deprecated. Please, use Link with 'component=button' prop instead.");};Button.getDerivedStateFromProps = function getDerivedStateFromProps(props) {if (props.loading || props.disabled) {return { focusedByTab: false };}return null;} /**
    * @public
    */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null ? void 0 : _this$node.focus();} /**
    * @public
-   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _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 _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx2, _cx5, _cx6;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,width = _this$props.width,children = _this$props.children,ariaDescribedby = _this$props['aria-describedby'],ariaHasPopup = _this$props['aria-haspopup'],ariaControls = _this$props['aria-controls'],ariaLabel = _this$props['aria-label'],ariaChecked = _this$props['aria-checked'],ariaExpanded = _this$props['aria-expanded'],role = _this$props.role;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type,size = _this$getProps.size;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
-    var _useButtonArrow = (0, _ButtonArrow.useButtonArrow)((0, _extends2.default)({}, this.props, { isFocused: Boolean(isFocused) }), this.theme),wrapClassNameWithArrow = _useButtonArrow[0],rootClassNameWithArrow = _useButtonArrow[1],arrowNode = _useButtonArrow[2];var rootClassName = '';if (_isTheme2022) {var trueDisabled = disabled || loading;rootClassName = _Emotion.cx.apply(void 0, [_Button.styles.root(this.theme), _Button.styles[use](this.theme), sizeClass, narrow && _Button.styles.narrow(), _noPadding && _Button.styles.noPadding(), _noRightPadding && _Button.styles.noRightPadding(), rootClassNameWithArrow].concat(trueDisabled ? [_Button.styles.disabled(this.theme), checked && _Button.styles.checkedDisabled(this.theme), checked && _Button.styles.checkedDisabled2022(this.theme), borderless && _Button.styles.borderless2022()] : [active && !checked && _Button.activeStyles[use](this.theme), isFocused && _Button.styles.focus(this.theme), checked && _Button.styles.checked2022(this.theme), checked && isFocused && _Button.styles.checkedFocused(this.theme), borderless && !checked && !isFocused && _Button.styles.borderless2022()]));} else {var _cx;rootClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles.simulatedPress()] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx));}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: type, role: role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, className: rootClassName, style: (0, _extends2.default)({ textAlign: align }, corners), disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;var isDisabled2022 = _isTheme2022 && (disabled || loading);if ((!isFocused || isLink) && !isDisabled2022) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { style: { zIndex: _isTheme2022 && isLink ? -1 : undefined }, className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var iconNode = icon && /*#__PURE__*/_react.default.createElement(_ButtonIcon.ButtonIcon, { icon: icon, size: size, hasChildren: Boolean(children), disabled: disabled || false, loading: loading || false, use: use });var loadingNode = null;if (loading && !icon) {var loadingIcon = _isTheme2022 ? /*#__PURE__*/_react.default.createElement(_LoadingIcon.LoadingIcon, { size: size }) : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, loadingIcon);} // Force disable all props and features, that cannot be use with Link
-    if (isLink) {var _cx4;rootProps.className = (0, _Emotion.cx)((_cx4 = {}, _cx4[_Button.styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[_Button.styles.link(this.theme)] = true, _cx4[_Button.styles.linkLineHeight()] = !_client.isSafari || _client.isSafari && !_isTheme2022, _cx4[_Button.styles.linkLineHeightSafariFallback()] = _client.isSafari && _isTheme2022, _cx4[_Button.styles.linkFocus(this.theme)] = isFocused, _cx4[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx4));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;}var captionNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx5 = {}, _cx5[_Button.styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[_Button.styles.captionLink()] = isLink, _cx5[_Button.styles.captionDisabled()] = !checked && disabled, _cx5)) }, loadingNode, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.globalClasses.text, (_cx6 = {}, _cx6[_Button.styles.visibilityHidden()] = !!loadingNode, _cx6)) }, children));if (_isTheme2022 && isLink && !loading) {captionNode = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getInnerLinkTheme.getInnerLinkTheme)(this.theme) }, /*#__PURE__*/_react.default.createElement(_Link.Link, { focused: isFocused, disabled: disabled, icon: this.renderIcon2022(icon), as: "span", tabIndex: -1 }, children));}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps), innerShadowNode, outlineNode, arrowNode, captionNode)));};_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 _cx7, _cx8, _cx9;var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme);switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx7[_Button.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[_Button.styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx8[_Button.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[_Button.styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9[_Button.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[_Button.styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;
+   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _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 _this2.renderMain();});};_proto.renderLinkRootWithoutHandlers = function renderLinkRootWithoutHandlers(props) {var onClick = props.onClick,onFocus = props.onFocus,onBlur = props.onBlur,children = props.children,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);return /*#__PURE__*/_react.default.createElement("span", rest, children);};_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.renderMain = function renderMain() {var _cx2, _cx5, _cx6;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,narrow = _this$props.narrow,icon = _this$props.icon,rightIcon = _this$props.rightIcon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onMouseDown = _this$props.onMouseDown,onMouseUp = _this$props.onMouseUp,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,onClickCapture = _this$props.onClickCapture,width = _this$props.width,children = _this$props.children,tabIndex = _this$props.tabIndex,_this$props$component = _this$props.component,component = _this$props$component === void 0 ? BUTTON_DEFAULT_ELEMENT : _this$props$component,className = _this$props.className,dataTid = _this$props['data-tid'],useProp = _this$props.use,sizeProp = _this$props.size,ariaDescribedby = _this$props['aria-describedby'],ariaHasPopup = _this$props['aria-haspopup'],ariaControls = _this$props['aria-controls'],ariaLabel = _this$props['aria-label'],ariaChecked = _this$props['aria-checked'],ariaExpanded = _this$props['aria-expanded'],role = _this$props.role,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, _excluded2);var _this$getProps = this.getProps(),use = _this$getProps.use,size = _this$getProps.size;var sizeClass = this.getSizeClassName();var Root = component;var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _useButtonArrow = (0, _ButtonArrow.useButtonArrow)((0, _extends2.default)({}, this.props, { isFocused: Boolean(isFocused) }), this.theme),wrapClassNameWithArrow = _useButtonArrow[0],rootClassNameWithArrow = _useButtonArrow[1],arrowNode = _useButtonArrow[2];var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);var rootClassName = '';var trueDisabled = disabled || loading;if (_isTheme2022) {rootClassName = _Emotion.cx.apply(void 0, [_Button.styles.root(this.theme), _Button.styles[use](this.theme), sizeClass, _Button.styles.disableTextSelect(), narrow && _Button.styles.narrow(), _noPadding && _Button.styles.noPadding(), _noRightPadding && _Button.styles.noRightPadding(), rootClassNameWithArrow, _Button.globalClasses.customComponent].concat(trueDisabled ? [_Button.styles.disabled(this.theme), isUseStateWithoutOutlineInDisabledState && _Button.styles.disabledWithoutOutline(this.theme), checked && _Button.styles.checkedDisabled(this.theme), checked && _Button.styles.checkedDisabled2022(this.theme), borderless && _Button.styles.borderless2022(), use === 'backless' && !checked && _Button.styles.backlessDisabled2022(this.theme), use === 'text' && _Button.styles.textDisabled2022(), _Button.globalClasses.disabled] : [active && !checked && _Button.activeStyles[use](this.theme), isFocused && _Button.styles.focus(this.theme), checked && _Button.styles.checked2022(this.theme), checked && isFocused && _Button.styles.checkedFocused(this.theme), borderless && !checked && !isFocused && _Button.styles.borderless2022()]));} else {var _cx;rootClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles.simulatedPress()] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.styles.disableTextSelect()] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.globalClasses.customComponent] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = trueDisabled, _cx[_Button.globalClasses.disabled] = trueDisabled, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx));}var rootProps = { role: role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, className: rootClassName, style: (0, _extends2.default)({ textAlign: align }, corners), disabled: trueDisabled, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClickCapture: onClickCapture, tabIndex: this.getTabIndex({ disableFocus: disableFocus, disabled: trueDisabled, tabIndex: tabIndex }), title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)(_Button.globalClasses.root, (_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;var isDisabled2022 = _isTheme2022 && trueDisabled;if ((!isFocused || isLink) && !isDisabled2022) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { style: { zIndex: _isTheme2022 && isLink ? -1 : undefined }, className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var iconProps = { use: use, size: this.getProps().size, hasChildren: !!children, loading: loading || false };var leftIconNode = icon && /*#__PURE__*/_react.default.createElement(_ButtonIcon.ButtonIcon, (0, _extends2.default)({}, iconProps, { position: "left", icon: icon }));var rightIconNode = rightIcon && /*#__PURE__*/_react.default.createElement(_ButtonIcon.ButtonIcon, (0, _extends2.default)({}, iconProps, { hasBothIcons: !!icon && !!rightIcon, position: "right", icon: rightIcon })); // Force disable all props and features, that cannot be use with Link
+    if (isLink) {var _cx4;rootProps.className = (0, _Emotion.cx)((_cx4 = {}, _cx4[_Button.styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[_Button.styles.link(this.theme)] = true, _cx4[_Button.styles.linkLineHeight()] = !_client.isSafari || _client.isSafari && !_isTheme2022, _cx4[_Button.styles.linkLineHeightSafariFallback()] = _client.isSafari && _isTheme2022, _cx4[_Button.styles.linkFocus(this.theme)] = isFocused, _cx4[_Button.styles.linkDisabled(this.theme)] = trueDisabled, _cx4));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;}var hasLoadingNode = loading && !icon && !rightIcon;var loadingNode = hasLoadingNode && /*#__PURE__*/_react.default.createElement(_LoadingButtonIcon.LoadingButtonIcon, { size: size });var captionNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx5 = {}, _cx5[_Button.styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[_Button.styles.captionLink()] = isLink, _cx5[_Button.styles.captionDisabled()] = !checked && disabled, _cx5)) }, loadingNode, leftIconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.globalClasses.text, (_cx6 = {}, _cx6[_Button.styles.visibilityHidden()] = hasLoadingNode, _cx6)) }, children), rightIconNode);if (_isTheme2022 && isLink && !loading) {captionNode = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getInnerLinkTheme.getInnerLinkTheme)(this.theme) }, /*#__PURE__*/_react.default.createElement(ButtonLink, { focused: isFocused, disabled: disabled, icon: this.renderIcon2022(icon), rightIcon: this.renderIcon2022(rightIcon), as: this.renderLinkRootWithoutHandlers, tabIndex: -1 }, children));}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, wrapProps, { "data-tid": ButtonDataTids.rootElement }), /*#__PURE__*/_react.default.createElement(Root, (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps, rest), innerShadowNode, outlineNode, arrowNode, captionNode)));};_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 _cx7, _cx8, _cx9;var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme);switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx7[_Button.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[_Button.styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx8[_Button.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[_Button.styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9[_Button.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[_Button.styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.displayName = 'Button', _class2.__BUTTON__ = true, _class2.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' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;

package/cjs/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","globalThat","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","ThemeFactory","create","renderMain","corners","active","borderless","checked","error","warning","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","ariaDescribedby","ariaHasPopup","ariaControls","ariaLabel","ariaChecked","ariaExpanded","role","use","type","size","sizeClass","getSizeClassName","isFocused","isLink","_isTheme2022","Boolean","wrapClassNameWithArrow","rootClassNameWithArrow","arrowNode","rootClassName","trueDisabled","cx","styles","noPadding","noRightPadding","checkedDisabled","checkedDisabled2022","borderless2022","activeStyles","checked2022","checkedFocused","simulatedPress","rootProps","className","style","textAlign","tabIndex","title","wrapProps","wrap","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","isDisabled2022","zIndex","undefined","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","iconNode","loadingNode","loadingIcon","link","linkLineHeight","isSafari","linkLineHeightSafariFallback","linkFocus","linkDisabled","Object","assign","wrapLink","captionNode","caption","captionTranslated","captionLink","captionDisabled","text","visibilityHidden","renderIcon2022","setRootNode","sizes","React","cloneElement","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeLargeWithIcon","sizeLargeWithIconWithoutText","sizeMedium","sizeMediumIE11","sizeMediumWithIcon","sizeMediumWithIconWithoutText","sizeSmall","sizeSmallIE11","sizeSmallWithIcon","sizeSmallWithIconWithoutText","wrapLarge","wrapMedium","wrapSmall","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\n\nimport { isKonturIcon, isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge, isSafari } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { Link } from '../Link';\nimport { Spinner } from '../Spinner';\nimport { LoadingIcon } from '../../internal/icons2022/LoadingIcon';\nimport { globalThat } from '../../lib/SSRSafe';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\nimport { ButtonIcon, getButtonIconSizes } from './ButtonIcon';\nimport { useButtonArrow } from './ButtonArrow';\nimport { getInnerLinkTheme } from './getInnerLinkTheme';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';\n\nexport interface ButtonProps\n  extends CommonProps,\n    Pick<\n      AriaAttributes,\n      'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded'\n    >,\n    Pick<HTMLAttributes<unknown>, 'role'> {\n  /** @ignore */\n  _noPadding?: boolean;\n\n  /** @ignore */\n  _noRightPadding?: boolean;\n\n  /**\n   * Применяет к кнопке стили псевдокласса `:active`.\n   */\n  active?: boolean;\n\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: React.CSSProperties['textAlign'];\n\n  /**\n   * Превращает обычную кнопку в кнопку со стрелкой.\n   */\n  arrow?: boolean | 'left';\n\n  /**\n   * Даёт кнопке фокус после окончания загрузки страницы.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Убирает обводку у кнопки.\n   */\n  borderless?: boolean;\n\n  /**\n   * @ignore\n   */\n  checked?: boolean;\n\n  children?: React.ReactNode;\n\n  /** @ignore */\n  corners?: React.CSSProperties;\n\n  /**\n   * Отключенное состояние кнопки.\n   */\n  disabled?: boolean;\n\n  /** @ignore */\n  disableFocus?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Иконка слева от текста кнопки.\n   */\n  icon?: React.ReactElement<any>;\n\n  /**\n   * Переводит кнопку в состояние загрузки.\n   */\n  loading?: boolean;\n\n  /**\n   * Сужает кнопку.\n   */\n  narrow?: boolean;\n\n  /**\n   * HTML-событие `onblur`.\n   */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onfocus`.\n   */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `keydown`.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * HTML-событие `onmouseover`.\n   */\n  onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n  /**\n   * Задаёт размер кнопки.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: ButtonSize;\n\n  /**\n   * HTML-атрибут `type`.\n   */\n  type?: ButtonType;\n\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: string;\n\n  /**\n   * Стиль кнопки.\n   *\n   * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`, `\"text\"`, `\"backless\"`.\n   */\n  use?: ButtonUse;\n\n  /** @ignore */\n  visuallyFocused?: boolean;\n\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n}\n\nexport interface ButtonState {\n  focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n  root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n  public static __KONTUR_REACT_UI__ = 'Button';\n  public static __BUTTON__ = true;\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    size: 'small',\n    type: 'button',\n  };\n\n  private getProps = createPropsGetter(Button.defaultProps);\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private node: HTMLButtonElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  public static getDerivedStateFromProps(props: ButtonProps) {\n    if (props.loading || props.disabled) {\n      return { focusedByTab: false };\n    }\n    return null;\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    this.node?.focus();\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    this.node?.blur();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      corners,\n      active,\n      disabled,\n      borderless,\n      checked,\n      error,\n      warning,\n      loading,\n      narrow,\n      icon,\n      _noPadding,\n      _noRightPadding,\n      visuallyFocused,\n      align,\n      disableFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onKeyDown,\n      onClick,\n      width,\n      children,\n      'aria-describedby': ariaDescribedby,\n      'aria-haspopup': ariaHasPopup,\n      'aria-controls': ariaControls,\n      'aria-label': ariaLabel,\n      'aria-checked': ariaChecked,\n      'aria-expanded': ariaExpanded,\n      role,\n    } = this.props;\n    const { use, type, size } = this.getProps();\n    const sizeClass = this.getSizeClassName();\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\n    const _isTheme2022 = isTheme2022(this.theme);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [wrapClassNameWithArrow, rootClassNameWithArrow, arrowNode] = useButtonArrow(\n      { ...this.props, isFocused: Boolean(isFocused) },\n      this.theme,\n    );\n\n    let rootClassName = '';\n    if (_isTheme2022) {\n      const trueDisabled = disabled || loading;\n      rootClassName = cx(\n        styles.root(this.theme),\n        styles[use](this.theme),\n        sizeClass,\n        narrow && styles.narrow(),\n        _noPadding && styles.noPadding(),\n        _noRightPadding && styles.noRightPadding(),\n        rootClassNameWithArrow,\n        ...(trueDisabled\n          ? [\n              styles.disabled(this.theme),\n              checked && styles.checkedDisabled(this.theme),\n              checked && styles.checkedDisabled2022(this.theme),\n              borderless && styles.borderless2022(),\n            ]\n          : [\n              active && !checked && activeStyles[use](this.theme),\n              isFocused && styles.focus(this.theme),\n              checked && styles.checked2022(this.theme),\n              checked && isFocused && styles.checkedFocused(this.theme),\n              borderless && !checked && !isFocused && styles.borderless2022(),\n            ]),\n      );\n    } else {\n      rootClassName = cx({\n        [styles.root(this.theme)]: true,\n        [styles.simulatedPress()]: true,\n        [styles[use](this.theme)]: true,\n        [activeStyles[use](this.theme)]: active,\n        [sizeClass]: true,\n        [styles.focus(this.theme)]: isFocused,\n        [styles.checked(this.theme)]: checked,\n        [styles.checkedFocused(this.theme)]: checked && isFocused,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [styles.checkedDisabled(this.theme)]: checked && disabled,\n        [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n        [styles.narrow()]: narrow,\n        [styles.noPadding()]: _noPadding,\n        [styles.noRightPadding()]: _noRightPadding,\n      });\n    }\n\n    const rootProps = {\n      // By default the type attribute is 'submit'. IE8 will fire a click event\n      // on this button if somewhere on the page user presses Enter while some\n      // input is focused. So we set type to 'button' by default.\n      type,\n      role,\n      'aria-describedby': ariaDescribedby,\n      'aria-haspopup': ariaHasPopup,\n      'aria-controls': ariaControls,\n      'aria-label': ariaLabel,\n      'aria-checked': ariaChecked,\n      'aria-expanded': ariaExpanded,\n      className: rootClassName,\n      style: {\n        textAlign: align,\n        ...corners,\n      },\n      disabled: disabled || loading,\n      onClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      tabIndex: disableFocus ? -1 : 0,\n      title: this.props.title,\n    };\n\n    const wrapProps = {\n      className: cx({\n        [styles.wrap(this.theme)]: true,\n        [wrapClassNameWithArrow]: true,\n        [this.getSizeWrapClassName()]: true,\n      }),\n      style: {\n        width,\n      },\n    };\n\n    const innerShadowNode = _isTheme2022 ? null : <div className={globalClasses.innerShadow} />;\n\n    let outlineNode = null;\n    const isDisabled2022 = _isTheme2022 && (disabled || loading);\n    if ((!isFocused || isLink) && !isDisabled2022) {\n      outlineNode = (\n        <div\n          style={{ zIndex: _isTheme2022 && isLink ? -1 : undefined }}\n          className={cx(styles.outline(), {\n            [styles.outlineWarning(this.theme)]: warning,\n            [styles.outlineError(this.theme)]: error,\n            [styles.outlineLink()]: isLink,\n            [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n            [styles.outlineLinkError(this.theme)]: isLink && error,\n          })}\n        />\n      );\n    }\n\n    const iconNode = icon && (\n      <ButtonIcon\n        icon={icon}\n        size={size}\n        hasChildren={Boolean(children)}\n        disabled={disabled || false}\n        loading={loading || false}\n        use={use}\n      />\n    );\n    let loadingNode = null;\n    if (loading && !icon) {\n      const loadingIcon = _isTheme2022 ? <LoadingIcon size={size} /> : <Spinner caption={null} dimmed type=\"mini\" />;\n      loadingNode = <div className={styles.loading()}>{loadingIcon}</div>;\n    }\n\n    // Force disable all props and features, that cannot be use with Link\n    if (isLink) {\n      rootProps.className = cx({\n        [styles.root(this.theme)]: true,\n        [sizeClass]: true,\n        [styles.link(this.theme)]: true,\n        [styles.linkLineHeight()]: !isSafari || (isSafari && !_isTheme2022),\n        [styles.linkLineHeightSafariFallback()]: isSafari && _isTheme2022,\n        [styles.linkFocus(this.theme)]: isFocused,\n        [styles.linkDisabled(this.theme)]: disabled || loading,\n      });\n      Object.assign(wrapProps, {\n        className: cx(styles.wrap(this.theme), styles.wrapLink()),\n        style: { width: wrapProps.style.width },\n      });\n      rootProps.style.textAlign = undefined;\n    }\n\n    let captionNode = (\n      <div\n        className={cx(styles.caption(), globalClasses.caption, {\n          [styles.captionTranslated()]: (active || checked) && !loading && !_isTheme2022,\n          [styles.captionLink()]: isLink,\n          [styles.captionDisabled()]: !checked && disabled,\n        })}\n      >\n        {loadingNode}\n        {iconNode}\n        <span\n          className={cx(globalClasses.text, {\n            [styles.visibilityHidden()]: !!loadingNode,\n          })}\n        >\n          {children}\n        </span>\n      </div>\n    );\n    if (_isTheme2022 && isLink && !loading) {\n      captionNode = (\n        <ThemeContext.Provider value={getInnerLinkTheme(this.theme)}>\n          <Link focused={isFocused} disabled={disabled} icon={this.renderIcon2022(icon)} as=\"span\" tabIndex={-1}>\n            {children}\n          </Link>\n        </ThemeContext.Provider>\n      );\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span {...wrapProps}>\n          <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n            {innerShadowNode}\n            {outlineNode}\n            {arrowNode}\n            {captionNode}\n          </button>\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private renderIcon2022(icon: React.ReactElement | undefined) {\n    if (icon && isKonturIcon(icon)) {\n      const sizes = getButtonIconSizes(this.theme);\n      return React.cloneElement(icon, { size: icon.props.size ?? sizes[this.getProps().size] });\n    }\n\n    return icon;\n  }\n\n  private getSizeClassName() {\n    const _isTheme2022 = isTheme2022(this.theme);\n    switch (this.getProps().size) {\n      case 'large':\n        return cx(styles.sizeLarge(this.theme), {\n          [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeLargeWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeLargeWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n      case 'medium':\n        return cx(styles.sizeMedium(this.theme), {\n          [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeMediumWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeMediumWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n      case 'small':\n      default:\n        return cx(styles.sizeSmall(this.theme), {\n          [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeSmallWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeSmallWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n    }\n  }\n\n  private getSizeWrapClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.wrapLarge(this.theme);\n      case 'medium':\n        return styles.wrapMedium(this.theme);\n      case 'small':\n      default:\n        return styles.wrapSmall(this.theme);\n    }\n  }\n\n  private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n    if (!this.props.disabled && !this.props.disableFocus) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalThat.requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n      this.props.onFocus?.(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n    this.setState({ focusedByTab: false });\n    if (!this.props.disabled && !this.props.disableFocus) {\n      this.props.onBlur?.(e);\n    }\n  };\n\n  private _ref = (node: HTMLButtonElement | null) => {\n    this.node = node;\n  };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
+{"version":3,"sources":["Button.tsx"],"names":["BUTTON_DEFAULT_ELEMENT","ButtonDataTids","rootElement","root","spinner","ButtonLink","focused","disabled","icon","rightIcon","as","tabIndex","children","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disableFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","use","getDerivedStateFromProps","loading","blur","render","theme","ThemeFactory","create","renderMain","renderLinkRootWithoutHandlers","onClick","rest","getTabIndex","corners","active","borderless","checked","error","warning","narrow","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onMouseDown","onMouseUp","onKeyDown","onClickCapture","width","component","className","dataTid","useProp","sizeProp","size","ariaDescribedby","ariaHasPopup","ariaControls","ariaLabel","ariaChecked","ariaExpanded","role","sizeClass","getSizeClassName","Root","isFocused","isLink","_isTheme2022","Boolean","wrapClassNameWithArrow","rootClassNameWithArrow","arrowNode","isUseStateWithoutOutlineInDisabledState","includes","rootClassName","trueDisabled","cx","styles","disableTextSelect","noPadding","noRightPadding","globalClasses","customComponent","disabledWithoutOutline","checkedDisabled","checkedDisabled2022","borderless2022","backlessDisabled2022","textDisabled2022","activeStyles","checked2022","checkedFocused","simulatedPress","rootProps","style","textAlign","title","wrapProps","wrap","getSizeWrapClassName","innerShadowNode","innerShadow","outlineNode","isDisabled2022","zIndex","undefined","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","iconProps","hasChildren","leftIconNode","rightIconNode","link","linkLineHeight","isSafari","linkLineHeightSafariFallback","linkFocus","linkDisabled","Object","assign","wrapLink","hasLoadingNode","loadingNode","captionNode","caption","captionTranslated","captionLink","captionDisabled","text","visibilityHidden","renderIcon2022","setRootNode","sizes","React","cloneElement","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeLargeWithIcon","sizeLargeWithIconWithoutText","sizeMedium","sizeMediumIE11","sizeMediumWithIcon","sizeMediumWithIconWithoutText","sizeSmall","sizeSmallIE11","sizeSmallWithIcon","sizeSmallWithIconWithoutText","wrapLarge","wrapMedium","wrapSmall","Component","__KONTUR_REACT_UI__","displayName","__BUTTON__","type","isButton"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\nimport warning from 'warning';\n\nimport { ButtonLinkAllowedValues } from '../../typings/button-link';\nimport { isKonturIcon, isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge, isSafari } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { Link, LinkProps } from '../Link';\nimport { SizeProp } from '../../lib/types/props';\nimport { PolymorphicPropsWithoutRef } from '../../typings/react-ref';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\nimport { ButtonIcon, ButtonIconProps, getButtonIconSizes } from './ButtonIcon';\nimport { useButtonArrow } from './ButtonArrow';\nimport { getInnerLinkTheme } from './getInnerLinkTheme';\nimport { LoadingButtonIcon } from './LoadingButtonIcon';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ButtonSize = SizeProp;\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';\n\ninterface ButtonInnerProps extends CommonProps {\n  /** @ignore */\n  _noPadding?: boolean;\n\n  /** @ignore */\n  _noRightPadding?: boolean;\n\n  /**\n   * Применяет к кнопке стили псевдокласса `:active`.\n   */\n  active?: boolean;\n\n  /**\n   * CSS-свойство `text-align`.\n   */\n  align?: React.CSSProperties['textAlign'];\n\n  /**\n   * Превращает обычную кнопку в кнопку со стрелкой.\n   */\n  arrow?: boolean | 'left';\n\n  /**\n   * Даёт кнопке фокус после окончания загрузки страницы.\n   */\n  autoFocus?: boolean;\n\n  /**\n   * Убирает обводку у кнопки.\n   */\n  borderless?: boolean;\n\n  /**\n   * @ignore\n   */\n  checked?: boolean;\n\n  children?: React.ReactNode;\n\n  /** @ignore */\n  corners?: React.CSSProperties;\n\n  /**\n   * Отключенное состояние кнопки.\n   */\n  disabled?: boolean;\n\n  /** @ignore */\n  disableFocus?: boolean;\n\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n\n  /**\n   * Иконка слева от текста кнопки.\n   */\n  icon?: React.ReactElement;\n\n  /**\n   * Иконка справа от текста кнопки.\n   */\n  rightIcon?: React.ReactElement;\n\n  /**\n   * Переводит кнопку в состояние загрузки.\n   */\n  loading?: boolean;\n\n  /**\n   * Сужает кнопку.\n   */\n  narrow?: boolean;\n\n  /**\n   * Задаёт размер кнопки.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n\n  /**\n   * HTML-атрибут `type`.\n   */\n  type?: ButtonType;\n\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: string;\n\n  /**\n   * Стиль кнопки.\n   *\n   * **Допустимые значения**: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`, `\"text\"`, `\"backless\"`.\n   *\n   * **Вариант `link` устарел.**\n   * Если нужна кнопка, выглядящая как ссылка, используйте `Link component=button`.\n   */\n  use?: ButtonUse;\n\n  /** @ignore */\n  visuallyFocused?: boolean;\n\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n\n  /**\n   * CSS-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n}\n\nexport const BUTTON_DEFAULT_ELEMENT = 'button';\n\nexport type ButtonProps<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_ELEMENT> = PolymorphicPropsWithoutRef<\n  ButtonInnerProps,\n  C\n>;\n\nexport interface ButtonState {\n  focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n  rootElement: 'Button__rootElement',\n  root: 'Button__root',\n  spinner: 'Button__spinner',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;\n\nconst ButtonLink = ({ focused, disabled, icon, rightIcon, as, tabIndex, children }: LinkProps) => (\n  <Link focused={focused} disabled={disabled} icon={icon} rightIcon={rightIcon} as={as} tabIndex={tabIndex}>\n    {children}\n  </Link>\n);\n\n@rootNode\nexport class Button<C extends ButtonLinkAllowedValues = typeof BUTTON_DEFAULT_ELEMENT> extends React.Component<\n  ButtonProps<C>,\n  ButtonState\n> {\n  public static __KONTUR_REACT_UI__ = 'Button';\n  public static displayName = 'Button';\n  public static __BUTTON__ = true;\n\n  public static defaultProps: DefaultProps = {\n    use: 'default',\n    size: 'small',\n    // By default the type attribute is 'submit'. IE8 will fire a click event\n    // on this button if somewhere on the page user presses Enter while some\n    // input is focused. So we set type to 'button' by default.\n    type: 'button',\n  };\n\n  private getProps = createPropsGetter(Button.defaultProps);\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private node: HTMLElement | null = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n    warning(\n      this.props.use !== 'link',\n      `[Button]: Use 'Link' has been deprecated. Please, use Link with 'component=button' prop instead.`,\n    );\n  }\n\n  public static getDerivedStateFromProps(props: ButtonProps) {\n    if (props.loading || props.disabled) {\n      return { focusedByTab: false };\n    }\n    return null;\n  }\n\n  /**\n   * @public\n   */\n  public focus() {\n    this.node?.focus();\n  }\n\n  /**\n   * @public\n   */\n  public blur() {\n    this.node?.blur();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderLinkRootWithoutHandlers(props: LinkProps) {\n    const { onClick, onFocus, onBlur, children, ...rest } = props;\n    return <span {...rest}>{children}</span>;\n  }\n\n  private getTabIndex({\n    disableFocus,\n    disabled,\n    tabIndex = 0,\n  }: Pick<ButtonProps, 'disableFocus' | 'disabled' | 'tabIndex'>) {\n    if (disableFocus || disabled) {\n      return -1;\n    }\n\n    return tabIndex;\n  }\n\n  private renderMain() {\n    const {\n      corners,\n      active,\n      disabled,\n      borderless,\n      checked,\n      error,\n      warning,\n      loading,\n      narrow,\n      icon,\n      rightIcon,\n      _noPadding,\n      _noRightPadding,\n      visuallyFocused,\n      align,\n      disableFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onMouseDown,\n      onMouseUp,\n      onKeyDown,\n      onClick,\n      onClickCapture,\n      width,\n      children,\n      tabIndex,\n      component = BUTTON_DEFAULT_ELEMENT,\n      className, //exclude from rest to prevent class override\n      'data-tid': dataTid, //exclude from rest to prevent data-tid override on root\n      use: useProp,\n      size: sizeProp,\n      'aria-describedby': ariaDescribedby,\n      'aria-haspopup': ariaHasPopup,\n      'aria-controls': ariaControls,\n      'aria-label': ariaLabel,\n      'aria-checked': ariaChecked,\n      'aria-expanded': ariaExpanded,\n      role,\n      ...rest\n    } = this.props;\n    const { use, size } = this.getProps();\n\n    const sizeClass = this.getSizeClassName();\n\n    const Root = component;\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\n    const _isTheme2022 = isTheme2022(this.theme);\n\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [wrapClassNameWithArrow, rootClassNameWithArrow, arrowNode] = useButtonArrow(\n      { ...this.props, isFocused: Boolean(isFocused) },\n      this.theme,\n    );\n    const isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);\n    let rootClassName = '';\n    const trueDisabled = disabled || loading;\n    if (_isTheme2022) {\n      rootClassName = cx(\n        styles.root(this.theme),\n        styles[use](this.theme),\n        sizeClass,\n        styles.disableTextSelect(),\n        narrow && styles.narrow(),\n        _noPadding && styles.noPadding(),\n        _noRightPadding && styles.noRightPadding(),\n        rootClassNameWithArrow,\n        globalClasses.customComponent,\n        ...(trueDisabled\n          ? [\n              styles.disabled(this.theme),\n              isUseStateWithoutOutlineInDisabledState && styles.disabledWithoutOutline(this.theme),\n              checked && styles.checkedDisabled(this.theme),\n              checked && styles.checkedDisabled2022(this.theme),\n              borderless && styles.borderless2022(),\n              use === 'backless' && !checked && styles.backlessDisabled2022(this.theme),\n              use === 'text' && styles.textDisabled2022(),\n              globalClasses.disabled,\n            ]\n          : [\n              active && !checked && activeStyles[use](this.theme),\n              isFocused && styles.focus(this.theme),\n              checked && styles.checked2022(this.theme),\n              checked && isFocused && styles.checkedFocused(this.theme),\n              borderless && !checked && !isFocused && styles.borderless2022(),\n            ]),\n      );\n    } else {\n      rootClassName = cx({\n        [styles.root(this.theme)]: true,\n        [styles.simulatedPress()]: true,\n        [styles[use](this.theme)]: true,\n        [styles.disableTextSelect()]: true,\n        [activeStyles[use](this.theme)]: active,\n        [sizeClass]: true,\n        [globalClasses.customComponent]: true,\n        [styles.focus(this.theme)]: isFocused,\n        [styles.checked(this.theme)]: checked,\n        [styles.checkedFocused(this.theme)]: checked && isFocused,\n        [styles.disabled(this.theme)]: trueDisabled,\n        [globalClasses.disabled]: trueDisabled,\n        [styles.checkedDisabled(this.theme)]: checked && disabled,\n        [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n        [styles.narrow()]: narrow,\n        [styles.noPadding()]: _noPadding,\n        [styles.noRightPadding()]: _noRightPadding,\n      });\n    }\n\n    const rootProps = {\n      role,\n      'aria-describedby': ariaDescribedby,\n      'aria-haspopup': ariaHasPopup,\n      'aria-controls': ariaControls,\n      'aria-label': ariaLabel,\n      'aria-checked': ariaChecked,\n      'aria-expanded': ariaExpanded,\n      className: rootClassName,\n      style: {\n        textAlign: align,\n        ...corners,\n      },\n      disabled: trueDisabled,\n      onClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onKeyDown,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onMouseDown,\n      onMouseUp,\n      onClickCapture,\n      tabIndex: this.getTabIndex({ disableFocus, disabled: trueDisabled, tabIndex }),\n      title: this.props.title,\n    };\n\n    const wrapProps = {\n      className: cx(globalClasses.root, {\n        [styles.wrap(this.theme)]: true,\n        [wrapClassNameWithArrow]: true,\n        [this.getSizeWrapClassName()]: true,\n      }),\n      style: {\n        width,\n      },\n    };\n\n    const innerShadowNode = _isTheme2022 ? null : <div className={globalClasses.innerShadow} />;\n\n    let outlineNode = null;\n    const isDisabled2022 = _isTheme2022 && trueDisabled;\n    if ((!isFocused || isLink) && !isDisabled2022) {\n      outlineNode = (\n        <div\n          style={{ zIndex: _isTheme2022 && isLink ? -1 : undefined }}\n          className={cx(styles.outline(), {\n            [styles.outlineWarning(this.theme)]: warning,\n            [styles.outlineError(this.theme)]: error,\n            [styles.outlineLink()]: isLink,\n            [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n            [styles.outlineLinkError(this.theme)]: isLink && error,\n          })}\n        />\n      );\n    }\n\n    const iconProps: Omit<ButtonIconProps, 'position'> = {\n      use,\n      size: this.getProps().size,\n      hasChildren: !!children,\n      loading: loading || false,\n    };\n    const leftIconNode = icon && <ButtonIcon {...iconProps} position=\"left\" icon={icon} />;\n    const rightIconNode = rightIcon && (\n      <ButtonIcon {...iconProps} hasBothIcons={!!icon && !!rightIcon} position=\"right\" icon={rightIcon} />\n    );\n\n    // Force disable all props and features, that cannot be use with Link\n    if (isLink) {\n      rootProps.className = cx({\n        [styles.root(this.theme)]: true,\n        [sizeClass]: true,\n        [styles.link(this.theme)]: true,\n        [styles.linkLineHeight()]: !isSafari || (isSafari && !_isTheme2022),\n        [styles.linkLineHeightSafariFallback()]: isSafari && _isTheme2022,\n        [styles.linkFocus(this.theme)]: isFocused,\n        [styles.linkDisabled(this.theme)]: trueDisabled,\n      });\n      Object.assign(wrapProps, {\n        className: cx(styles.wrap(this.theme), styles.wrapLink()),\n        style: { width: wrapProps.style.width },\n      });\n\n      rootProps.style.textAlign = undefined;\n    }\n\n    const hasLoadingNode = loading && !icon && !rightIcon;\n    const loadingNode = hasLoadingNode && <LoadingButtonIcon size={size} />;\n\n    let captionNode = (\n      <div\n        className={cx(styles.caption(), globalClasses.caption, {\n          [styles.captionTranslated()]: (active || checked) && !loading && !_isTheme2022,\n          [styles.captionLink()]: isLink,\n          [styles.captionDisabled()]: !checked && disabled,\n        })}\n      >\n        {loadingNode}\n        {leftIconNode}\n        <span\n          className={cx(globalClasses.text, {\n            [styles.visibilityHidden()]: hasLoadingNode,\n          })}\n        >\n          {children}\n        </span>\n        {rightIconNode}\n      </div>\n    );\n    if (_isTheme2022 && isLink && !loading) {\n      captionNode = (\n        <ThemeContext.Provider value={getInnerLinkTheme(this.theme)}>\n          {\n            <ButtonLink\n              focused={isFocused}\n              disabled={disabled}\n              icon={this.renderIcon2022(icon)}\n              rightIcon={this.renderIcon2022(rightIcon)}\n              as={this.renderLinkRootWithoutHandlers}\n              tabIndex={-1}\n            >\n              {children}\n            </ButtonLink>\n          }\n        </ThemeContext.Provider>\n      );\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <span {...wrapProps} data-tid={ButtonDataTids.rootElement}>\n          <Root data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps} {...rest}>\n            {innerShadowNode}\n            {outlineNode}\n            {arrowNode}\n            {captionNode}\n          </Root>\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private renderIcon2022(icon: React.ReactElement | undefined) {\n    if (icon && isKonturIcon(icon)) {\n      const sizes = getButtonIconSizes(this.theme);\n      return React.cloneElement(icon, { size: icon.props.size ?? sizes[this.getProps().size] });\n    }\n\n    return icon;\n  }\n\n  private getSizeClassName() {\n    const _isTheme2022 = isTheme2022(this.theme);\n    switch (this.getProps().size) {\n      case 'large':\n        return cx(styles.sizeLarge(this.theme), {\n          [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeLargeWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeLargeWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n      case 'medium':\n        return cx(styles.sizeMedium(this.theme), {\n          [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeMediumWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeMediumWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n      case 'small':\n      default:\n        return cx(styles.sizeSmall(this.theme), {\n          [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge,\n          [styles.sizeSmallWithIcon(this.theme)]: !!this.props.icon,\n          [styles.sizeSmallWithIconWithoutText(this.theme)]: _isTheme2022 && !!this.props.icon && !this.props.children,\n        });\n    }\n  }\n\n  private getSizeWrapClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.wrapLarge(this.theme);\n      case 'medium':\n        return styles.wrapMedium(this.theme);\n      case 'small':\n      default:\n        return styles.wrapSmall(this.theme);\n    }\n  }\n\n  private handleFocus = (e: React.FocusEvent) => {\n    if (!this.props.disabled && !this.props.disableFocus) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n      this.props.onFocus?.(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent) => {\n    this.setState({ focusedByTab: false });\n    if (!this.props.disabled && !this.props.disableFocus) {\n      this.props.onBlur?.(e);\n    }\n  };\n\n  private _ref = (node: HTMLElement | null) => {\n    this.node = node;\n  };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}

package/cjs/components/Button/Button.md

@@ -43,13 +43,17 @@ const bgStyle = {
 </Gapped>
 ```
 
-Пример кнопки с иконкой.
+В кнопку можно передать иконку. Иконка может находиться как слева от текста кнопки, так и справа и даже в обоих позициях одновременно.
 
 ```jsx harmony
-import PrintIcon from '@skbkontur/react-icons/Print';
-import { Button } from '@skbkontur/react-ui';
+import { Button, Gapped } from '@skbkontur/react-ui';
+import { XIcon16Regular } from '@skbkontur/icons/XIcon16Regular';
 
-<Button icon={<PrintIcon />}>Напечатать</Button>;
+<Gapped gap={5}>
+  <Button icon={<XIcon16Regular />}>Закрыть</Button>
+  <Button icon={<XIcon16Regular />} rightIcon={<XIcon16Regular />}>Закрыть</Button>
+  <Button rightIcon={<XIcon16Regular />}>Закрыть</Button>
+</Gapped>
 ```
 
 У кнопки есть 3 стандартных размера.
@@ -59,30 +63,29 @@ import { Button } from '@skbkontur/react-ui';
   style={{
     display: "flex",
     alignItems: "end",
-    justifyContent: "space-between",
-    width: "330px"
-  }}>
+    gap: '10px',
+  }}
+>
   <Button size="small">Маленькая</Button>
   <Button size="medium">Средняя</Button>
   <Button size="large">Большая</Button>
 </div>
 ```
 
-Кнопки в виде стрелок.
+Кнопки могут принимать вид стрелок. В таком случае иконка привязывается к краю кнопки.
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
 
-<Gapped gap={25}>
-  <Gapped gap={5}>
-    <Button arrow="left" size="medium">
-      Назад
-    </Button>
-    <Button arrow size="medium">
-      Далее
-    </Button>
-  </Gapped>
-</Gapped>;
+
+<Gapped gap={5}>
+  <Button arrow="left" size="medium">
+    Назад
+  </Button>
+  <Button arrow size="medium">
+    Далее
+  </Button>
+</Gapped>
 ```
 
 Кнопка в состоянии загрузки.
@@ -91,12 +94,11 @@ import { Gapped, Button } from '@skbkontur/react-ui';
 
 Кнопка на время нахождения в состоянии загрузки отключается.
 
-Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет - весь контент кнопки заменяется на спиннер.
+Если в кнопке есть иконка, на время загрузки иконка заменяется на спиннер, если иконки нет — весь контент кнопки заменяется на спиннер. Когда иконки две — заменяется только левая.
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
-import BookmarkIcon from '@skbkontur/react-icons/Bookmark';
+import { MinusCircleIcon16Light } from '@skbkontur/icons/MinusCircleIcon16Light';
 
 const [loading, setLoading] = React.useState(false);
 
@@ -116,16 +118,22 @@ const handleClick = () => {
 
 <Gapped>
   <Button width={150} onClick={handleClick} loading={loading}>
-    Сохранить
+    Удалить
+  </Button>
+  <Button icon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
   </Button>
-  <Button icon={<BookmarkIcon />} width={150} onClick={handleClick} loading={loading}>
-    Сохранить
+  <Button rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
+  </Button>
+  <Button icon={<MinusCircleIcon16Light />} rightIcon={<MinusCircleIcon16Light />} width={150} onClick={handleClick} loading={loading}>
+    Удалить
   </Button>
 </Gapped>
 
 ```
 
-Пример кнопки с пропом `theme`
+Пример кнопки с пропом `theme`.
 
 ```jsx harmony
 import { Button, Gapped } from '@skbkontur/react-ui';
@@ -136,3 +144,108 @@ import { Button, Gapped } from '@skbkontur/react-ui';
   <Button>Ok</Button>
 </Gapped>
 ```
+
+
+Пример кастомизации кнопки-ссылки.
+
+```jsx harmony
+import { Toast } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  btnLinkLineBorderBottomWidth: '0',
+  btnLinkHoverTextDecoration: 'underline'
+}
+
+const underlineOnHoverStyles = {
+  btnLinkLineBorderBottomColor: 'transparent',
+}
+
+const differentColorStyles = {
+  btnLinkColor: 'blue',
+  btnLinkHoverColor: 'blue',
+  btnLinkActiveColor: 'blue',
+}
+
+const stringify = (styles) => {
+    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+}
+
+const copyStyles = (styles) => {
+  navigator.clipboard.writeText(stringify(styles));
+  Toast.push('Copied');
+}
+
+const tableStyle = {
+  borderCollapse: 'collapse',
+  width: '100%',
+};
+
+const tdStyle = {
+  border: '1px solid',
+  padding: '8px',
+};
+
+const renderExampleRow = (title, styles, index) => {
+    return (
+        <tr>
+          <td style={tdStyle}>{title}</td>
+          <td style={tdStyle}><Button use={'link'} theme={styles}>Button-link</Button></td>
+          <td style={tdStyle}>
+            <div style={{display: 'flex'}}>
+              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+            </div>
+          </td>
+        </tr>
+    )
+}
+
+<table style={tableStyle}>
+  <tr style={{textAlign: 'left'}}>
+    <th style={tdStyle}></th>
+    <th style={tdStyle}>Пример</th>
+    <th style={tdStyle}>Переменные темы</th>
+  </tr>
+  {renderExampleRow('Ссылка с подчеркиванием через text-decoration', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
+  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
+</table>
+```
+
+Кнопка может рендерить ссылку в качестве корневого элемента, c помощью пропа `component`.
+
+Кнопка принимает все пропы переданного в `component` компонента.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button component='a' href='/'>Ссылка, но выглядит как кнопка</Button>
+```
+
+
+Кнопка может быть узкой.
+
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+
+<Button narrow>
+  Создать отчет
+</Button>
+```
+
+
+У кнопки есть состояния валидации.
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={5}>
+  <Button warning>
+    Warning
+  </Button>
+  <Button error>
+    Error
+  </Button>
+</Gapped>
+```

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

@@ -1,5 +1,5 @@
 export declare const buttonUseMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
-export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
+export declare const buttonHoverMixin: (btnBackground: string, btnBackgroundStart: string, btnBackgroundEnd: string, color: string, borderColor: string, borderBottomColor: string, borderWidth: string) => string;
 export declare const buttonActiveMixin: (btnBackground: string, btnShadow: string, borderColor: string, borderTopColor: string, borderWidth: string, arrowBgImage: string) => string;
 export declare const buttonSizeMixin: (fontSize: string, lineHeight: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;
 export declare const buttonSizeMixinIE11: (fontSize: string, paddingX: string, paddingY: string, fontFamilyCompensation: string) => string;

package/cjs/components/Button/Button.mixins.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = exports.arrowOutlineMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.buttonUseMixin = exports.buttonSizeMixinIE11 = exports.buttonSizeMixin = exports.buttonHoverMixin = exports.buttonActiveMixin = exports.arrowOutlineMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 var _DimensionFunctions = require("../../lib/styles/DimensionFunctions");
 
 var _Button = require("./Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -38,7 +38,7 @@ borderBottomColor,
 borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n\n    :hover,\n    :enabled {\n      .", " svg,\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 0 ", ";\n    }\n\n    :enabled:hover,\n    :enabled {\n      .", " svg {\n        color: ", ";\n      }\n    }\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   color,
@@ -50,7 +50,6 @@ borderWidth)
 
 
 
-  _Button.globalClasses.icon,
   _Button.globalClasses.arrow,
   color);
 
@@ -62,15 +61,17 @@ var buttonHoverMixin = function buttonHoverMixin(
 btnBackground,
 btnBackgroundStart,
 btnBackgroundEnd,
+color,
 borderColor,
 borderBottomColor,
 borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n    color: ", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
+  color,
 
   _Button.globalClasses.arrowHelper,
   borderWidth, borderColor);