@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

package/components/Button/Button/Button.js

@@ -1,21 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["onClick", "onFocus", "onBlur", "children"];
 
 var _class, _class2, _temp;
 
 import React from 'react';
-import { isReactUIComponent } from "../../../lib/utils";
-import { isIE11, isEdge } from "../../../lib/client";
+import { globalObject } from '@skbkontur/global-object';
+import { isKonturIcon, isReactUIComponent } from "../../../lib/utils";
+import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { Spinner } from "../../Spinner";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { Link } from "../../Link";
 import { styles, activeStyles, globalClasses } from "../Button.styles";
+import { ButtonIcon, getButtonIconSizes } from "../ButtonIcon";
+import { useButtonArrow } from "../ButtonArrow";
+import { getInnerLinkTheme } from "../getInnerLinkTheme";
+import { LoadingButtonIcon } from "../LoadingButtonIcon";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var ButtonDataTids = {
-  root: 'Button__root'
+  root: 'Button__root',
+  spinner: 'Button__spinner'
 };
 export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Button, _React$Component);
@@ -38,7 +52,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
@@ -109,13 +123,23 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
+      _this2.theme = _this2.props.theme ? 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 = _objectWithoutPropertiesLoose(props, _excluded);
+
+    return /*#__PURE__*/React.createElement("span", rest, children);
+  };
+
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2, _cx7, _cx8;
+    var _cx2, _cx5, _cx6;
 
     var _this$props = this.props,
         corners = _this$props.corners,
@@ -126,9 +150,9 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         error = _this$props.error,
         warning = _this$props.warning,
         loading = _this$props.loading,
-        arrow = _this$props.arrow,
         narrow = _this$props.narrow,
         icon = _this$props.icon,
+        rightIcon = _this$props.rightIcon,
         _noPadding = _this$props._noPadding,
         _noRightPadding = _this$props._noRightPadding,
         visuallyFocused = _this$props.visuallyFocused,
@@ -137,24 +161,65 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         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;
+        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;
+        type = _this$getProps.type,
+        size = _this$getProps.size;
 
     var sizeClass = this.getSizeClassName();
     var isFocused = this.state.focusedByTab || visuallyFocused;
     var isLink = use === 'link';
+
+    var _isTheme2022 = isTheme2022(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+
+    var _useButtonArrow = useButtonArrow(_extends({}, this.props, {
+      isFocused: Boolean(isFocused)
+    }), this.theme),
+        wrapClassNameWithArrow = _useButtonArrow[0],
+        rootClassNameWithArrow = _useButtonArrow[1],
+        arrowNode = _useButtonArrow[2];
+
+    var isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);
+    var rootClassName = '';
+
+    if (_isTheme2022) {
+      var trueDisabled = disabled || loading;
+      rootClassName = cx.apply(void 0, [styles.root(this.theme), styles[use](this.theme), sizeClass, narrow && styles.narrow(), _noPadding && styles.noPadding(), _noRightPadding && styles.noRightPadding(), rootClassNameWithArrow].concat(trueDisabled ? [styles.disabled(this.theme), isUseStateWithoutOutlineInDisabledState && styles.disabledWithoutOutline(this.theme), checked && styles.checkedDisabled(this.theme), checked && styles.checkedDisabled2022(this.theme), borderless && styles.borderless2022(), use === 'backless' && !checked && styles.backlessDisabled2022(this.theme)] : [active && !checked && activeStyles[use](this.theme), isFocused && styles.focus(this.theme), checked && styles.checked2022(this.theme), checked && isFocused && styles.checkedFocused(this.theme), borderless && !checked && !isFocused && styles.borderless2022()]));
+    } else {
+      var _cx;
+
+      rootClassName = cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.simulatedPress()] = true, _cx[styles[use](this.theme)] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[styles.focus(this.theme)] = isFocused, _cx[styles.checked(this.theme)] = checked, _cx[styles.checkedFocused(this.theme)] = checked && isFocused, _cx[styles.disabled(this.theme)] = disabled || loading, _cx[styles.checkedDisabled(this.theme)] = checked && disabled, _cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[styles.narrow()] = narrow, _cx[styles.noPadding()] = _noPadding, _cx[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,
-      className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles[use](this.theme)] = true, _cx[activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[styles.focus(this.theme)] = isFocused, _cx[styles.checked(this.theme)] = checked, _cx[styles.checkedFocused(this.theme)] = checked && isFocused, _cx[styles.disabled(this.theme)] = disabled || loading, _cx[styles.checkedDisabled(this.theme)] = checked && disabled, _cx[styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[styles.narrow()] = narrow, _cx[styles.noPadding()] = _noPadding, _cx[styles.noRightPadding()] = _noRightPadding, _cx)),
+      role: role,
+      'aria-describedby': ariaDescribedby,
+      'aria-haspopup': ariaHasPopup,
+      'aria-controls': ariaControls,
+      'aria-label': ariaLabel,
+      'aria-checked': ariaChecked,
+      'aria-expanded': ariaExpanded,
+      className: rootClassName,
       style: _extends({
         textAlign: align
       }, corners),
@@ -166,65 +231,55 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave,
       onMouseOver: onMouseOver,
+      onMouseDown: onMouseDown,
+      onMouseUp: onMouseUp,
+      onClickCapture: onClickCapture,
       tabIndex: disableFocus ? -1 : 0,
       title: this.props.title
     };
     var wrapProps = {
-      className: cx((_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[styles.wrapArrow()] = arrow === true, _cx2[styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)),
+      className: cx(globalClasses.root, (_cx2 = {}, _cx2[styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)),
       style: {
         width: width
       }
     };
-    var innerShadowNode = /*#__PURE__*/React.createElement("div", {
+    var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/React.createElement("div", {
       className: globalClasses.innerShadow
     });
     var outlineNode = null;
+    var isDisabled2022 = _isTheme2022 && (disabled || loading);
 
-    if (!isFocused || isLink) {
+    if ((!isFocused || isLink) && !isDisabled2022) {
       var _cx3;
 
       outlineNode = /*#__PURE__*/React.createElement("div", {
+        style: {
+          zIndex: _isTheme2022 && isLink ? -1 : undefined
+        },
         className: cx(styles.outline(), (_cx3 = {}, _cx3[styles.outlineWarning(this.theme)] = warning, _cx3[styles.outlineError(this.theme)] = error, _cx3[styles.outlineLink()] = isLink, _cx3[styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[styles.outlineLinkError(this.theme)] = isLink && error, _cx3))
       });
     }
 
-    var loadingNode = null;
-
-    if (loading && !icon) {
-      loadingNode = /*#__PURE__*/React.createElement("div", {
-        className: styles.loading()
-      }, this.getLoadingSpinner());
-    }
-
-    var iconNode = null;
-
-    if (icon) {
-      var _cx4;
-
-      iconNode = /*#__PURE__*/React.createElement("span", {
-        className: cx(styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[styles.iconNoRightMargin()] = !children, _cx4[styles.iconLink(this.theme)] = isLink, _cx4))
-      }, loading ? this.getLoadingSpinner() : icon);
-    }
-
-    var arrowNode = null;
-
-    if (arrow) {
-      var _cx5;
-
-      arrowNode = /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx5 = {}, _cx5[styles.arrow()] = true, _cx5[styles.arrowWarning(this.theme)] = !checked && warning, _cx5[styles.arrowError(this.theme)] = !checked && error, _cx5[styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[styles.arrowLeft()] = arrow === 'left', _cx5))
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)
-      }));
-    } // Force disable all props and features, that cannot be use with Link
-
+    var iconProps = {
+      use: use,
+      size: this.getProps().size,
+      hasChildren: !!children,
+      loading: loading || false
+    };
+    var leftIconNode = icon && /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+      position: "left",
+      icon: icon
+    }));
+    var rightIconNode = rightIcon && /*#__PURE__*/React.createElement(ButtonIcon, _extends({}, iconProps, {
+      hasBothIcons: !!icon && !!rightIcon,
+      position: "right",
+      icon: rightIcon
+    })); // Force disable all props and features, that cannot be use with Link
 
     if (isLink) {
-      var _cx6;
+      var _cx4;
 
-      rootProps.className = cx((_cx6 = {}, _cx6[styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[styles.link(this.theme)] = true, _cx6[styles.linkFocus(this.theme)] = isFocused, _cx6[styles.linkDisabled(this.theme)] = disabled || loading, _cx6));
+      rootProps.className = cx((_cx4 = {}, _cx4[styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[styles.link(this.theme)] = true, _cx4[styles.linkLineHeight()] = !isSafari || isSafari && !_isTheme2022, _cx4[styles.linkLineHeightSafariFallback()] = isSafari && _isTheme2022, _cx4[styles.linkFocus(this.theme)] = isFocused, _cx4[styles.linkDisabled(this.theme)] = disabled || loading, _cx4));
       Object.assign(wrapProps, {
         className: cx(styles.wrap(this.theme), styles.wrapLink()),
         style: {
@@ -232,7 +287,29 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
         }
       });
       rootProps.style.textAlign = undefined;
-      arrowNode = null;
+    }
+
+    var hasLoadingNode = loading && !icon && !rightIcon;
+    var loadingNode = hasLoadingNode && /*#__PURE__*/React.createElement(LoadingButtonIcon, {
+      size: size
+    });
+    var captionNode = /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.caption(), globalClasses.caption, (_cx5 = {}, _cx5[styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[styles.captionLink()] = isLink, _cx5[styles.captionDisabled()] = !checked && disabled, _cx5))
+    }, loadingNode, leftIconNode, /*#__PURE__*/React.createElement("span", {
+      className: cx(globalClasses.text, (_cx6 = {}, _cx6[styles.visibilityHidden()] = hasLoadingNode, _cx6))
+    }, children), rightIconNode);
+
+    if (_isTheme2022 && isLink && !loading) {
+      captionNode = /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: getInnerLinkTheme(this.theme)
+      }, /*#__PURE__*/React.createElement(Link, {
+        focused: isFocused,
+        disabled: disabled,
+        icon: this.renderIcon2022(icon),
+        rightIcon: this.renderIcon2022(rightIcon),
+        as: this.renderLinkRootWithoutHandlers,
+        tabIndex: -1
+      }, children));
     }
 
     return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
@@ -240,48 +317,37 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     }, this.props), /*#__PURE__*/React.createElement("span", wrapProps, /*#__PURE__*/React.createElement("button", _extends({
       "data-tid": ButtonDataTids.root,
       ref: this._ref
-    }, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/React.createElement("div", {
-      className: cx(styles.caption(), globalClasses.caption, (_cx7 = {}, _cx7[styles.captionTranslated()] = active || checked, _cx7[styles.captionLink()] = isLink, _cx7[styles.captionDisabled()] = !checked && disabled, _cx7))
-    }, iconNode, /*#__PURE__*/React.createElement("span", {
-      className: cx((_cx8 = {}, _cx8[styles.visibilityHidden()] = !!loadingNode, _cx8))
-    }, children)))));
+    }, rootProps), innerShadowNode, outlineNode, arrowNode, captionNode)));
   };
 
-  _proto.getLoadingSpinner = function getLoadingSpinner() {
-    return /*#__PURE__*/React.createElement(Spinner, {
-      caption: null,
-      dimmed: true,
-      type: "mini"
-    });
-  };
+  _proto.renderIcon2022 = function renderIcon2022(icon) {
+    if (icon && isKonturIcon(icon)) {
+      var _icon$props$size;
 
-  _proto.getSizeClassName = function getSizeClassName() {
-    var _cx9, _cx10, _cx11;
+      var sizes = getButtonIconSizes(this.theme);
+      return /*#__PURE__*/React.cloneElement(icon, {
+        size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size]
+      });
+    }
 
-    switch (this.getProps().size) {
-      case 'large':
-        return cx(styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx9));
+    return icon;
+  };
 
-      case 'medium':
-        return cx(styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx10));
+  _proto.getSizeClassName = function getSizeClassName() {
+    var _cx7, _cx8, _cx9;
 
-      case 'small':
-      default:
-        return cx(styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx11));
-    }
-  };
+    var _isTheme2022 = isTheme2022(this.theme);
 
-  _proto.getSizeIconClassName = function getSizeIconClassName() {
     switch (this.getProps().size) {
       case 'large':
-        return styles.iconLarge(this.theme);
+        return cx(styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[styles.sizeLargeIE11(this.theme)] = isIE11 || isEdge, _cx7[styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));
 
       case 'medium':
-        return styles.iconMedium(this.theme);
+        return cx(styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[styles.sizeMediumIE11(this.theme)] = isIE11 || isEdge, _cx8[styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));
 
       case 'small':
       default:
-        return styles.iconSmall(this.theme);
+        return cx(styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[styles.sizeSmallIE11(this.theme)] = isIE11 || isEdge, _cx9[styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));
     }
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Button.tsx"],"names":["React","isReactUIComponent","isIE11","isEdge","keyListener","ThemeContext","Spinner","CommonWrapper","cx","rootNode","createPropsGetter","styles","activeStyles","globalClasses","ButtonDataTids","root","Button","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isReactUIComponent } from '../../lib/utils';\nimport { isIE11, isEdge } from '../../lib/client';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'submit' | 'reset';\nexport type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';\n\nexport interface ButtonProps 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<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\"`.\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\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 = 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      arrow,\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    } = this.props;\n    const { use, type } = this.getProps();\n    const sizeClass = this.getSizeClassName();\n\n    const isFocused = this.state.focusedByTab || visuallyFocused;\n    const isLink = use === 'link';\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      className: cx({\n        [styles.root(this.theme)]: 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      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        [styles.wrapArrow()]: arrow === true,\n        [styles.wrapArrowLeft()]: arrow === 'left',\n        [this.getSizeWrapClassName()]: true,\n      }),\n      style: {\n        width,\n      },\n    };\n\n    const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n    let outlineNode = null;\n    if (!isFocused || isLink) {\n      outlineNode = (\n        <div\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    let loadingNode = null;\n    if (loading && !icon) {\n      loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n    }\n\n    let iconNode = null;\n    if (icon) {\n      iconNode = (\n        <span\n          className={cx(styles.icon(), this.getSizeIconClassName(), {\n            [styles.iconNoRightMargin()]: !children,\n            [styles.iconLink(this.theme)]: isLink,\n          })}\n        >\n          {loading ? this.getLoadingSpinner() : icon}\n        </span>\n      );\n    }\n\n    let arrowNode = null;\n    if (arrow) {\n      arrowNode = (\n        <div\n          className={cx({\n            [styles.arrow()]: true,\n            [styles.arrowWarning(this.theme)]: !checked && warning,\n            [styles.arrowError(this.theme)]: !checked && error,\n            [styles.arrowFocus(this.theme)]: !checked && isFocused,\n            [styles.arrowLeft()]: arrow === 'left',\n          })}\n        >\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n          <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n        </div>\n      );\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.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      arrowNode = null;\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            {loadingNode}\n            {arrowNode}\n            <div\n              className={cx(styles.caption(), globalClasses.caption, {\n                [styles.captionTranslated()]: active || checked,\n                [styles.captionLink()]: isLink,\n                [styles.captionDisabled()]: !checked && disabled,\n              })}\n            >\n              {iconNode}\n              <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n            </div>\n          </button>\n        </span>\n      </CommonWrapper>\n    );\n  }\n\n  private getLoadingSpinner() {\n    return <Spinner caption={null} dimmed type=\"mini\" />;\n  }\n\n  private getSizeClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 || isEdge });\n      case 'medium':\n        return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 || isEdge });\n      case 'small':\n      default:\n        return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 || isEdge });\n    }\n  }\n\n  private getSizeIconClassName() {\n    switch (this.getProps().size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\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      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":["React","globalObject","isKonturIcon","isReactUIComponent","isIE11","isEdge","isSafari","keyListener","ThemeContext","CommonWrapper","cx","rootNode","ThemeFactory","createPropsGetter","isTheme2022","Link","styles","activeStyles","globalClasses","ButtonIcon","getButtonIconSizes","useButtonArrow","getInnerLinkTheme","LoadingButtonIcon","ButtonDataTids","root","spinner","Button","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","create","renderMain","renderLinkRootWithoutHandlers","onClick","children","rest","corners","active","borderless","checked","error","warning","narrow","icon","rightIcon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onMouseDown","onMouseUp","onKeyDown","onClickCapture","width","ariaDescribedby","ariaHasPopup","ariaControls","ariaLabel","ariaChecked","ariaExpanded","role","use","type","size","sizeClass","getSizeClassName","isFocused","isLink","_isTheme2022","Boolean","wrapClassNameWithArrow","rootClassNameWithArrow","arrowNode","isUseStateWithoutOutlineInDisabledState","includes","rootClassName","trueDisabled","noPadding","noRightPadding","disabledWithoutOutline","checkedDisabled","checkedDisabled2022","borderless2022","backlessDisabled2022","checked2022","checkedFocused","simulatedPress","rootProps","className","style","textAlign","tabIndex","title","wrapProps","wrap","getSizeWrapClassName","innerShadowNode","innerShadow","outlineNode","isDisabled2022","zIndex","undefined","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","iconProps","hasChildren","leftIconNode","rightIconNode","link","linkLineHeight","linkLineHeightSafariFallback","linkFocus","linkDisabled","Object","assign","wrapLink","hasLoadingNode","loadingNode","captionNode","caption","captionTranslated","captionLink","captionDisabled","text","visibilityHidden","renderIcon2022","setRootNode","sizes","cloneElement","sizeLarge","sizeLargeIE11","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';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { HTMLProps } from '../../typings/html';\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';\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\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    Pick<HTMLProps['button'], 'onClickCapture' | 'onMouseUp' | 'onMouseDown'> {\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   * 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?: 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  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  spinner: 'Button__spinner',\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 renderLinkRootWithoutHandlers(props: LinkProps) {\n    const { onClick, onFocus, onBlur, children, ...rest } = props;\n    return <span {...rest}>{children}</span>;\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      '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    const isUseStateWithoutOutlineInDisabledState = !['default', 'backless'].includes(use);\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              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            ]\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      onMouseDown,\n      onMouseUp,\n      onClickCapture,\n      tabIndex: disableFocus ? -1 : 0,\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 && (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 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)]: 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    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          <Link\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          </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      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<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"]}

package/components/Button/Button.d.ts

@@ -1,9 +1,15 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { HTMLProps } from '../../typings/html';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ButtonSize = 'small' | 'medium' | 'large';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type ButtonSize = SizeProp;
 export declare type ButtonType = 'button' | 'submit' | 'reset';
-export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link';
-export interface ButtonProps extends CommonProps {
+export declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
+export interface ButtonProps extends CommonProps, Pick<AriaAttributes, 'aria-haspopup' | 'aria-describedby' | 'aria-controls' | 'aria-label' | 'aria-checked' | 'aria-expanded'>, Pick<HTMLAttributes<unknown>, 'role'>, Pick<HTMLProps['button'], 'onClickCapture' | 'onMouseUp' | 'onMouseDown'> {
     /** @ignore */
     _noPadding?: boolean;
     /** @ignore */
@@ -48,7 +54,11 @@ export interface ButtonProps extends CommonProps {
     /**
      * Иконка слева от текста кнопки.
      */
-    icon?: React.ReactElement<any>;
+    icon?: React.ReactElement;
+    /**
+     * Иконка справа от текста кнопки.
+     */
+    rightIcon?: React.ReactElement;
     /**
      * Переводит кнопку в состояние загрузки.
      */
@@ -90,7 +100,7 @@ export interface ButtonProps extends CommonProps {
      *
      * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
      */
-    size?: ButtonSize;
+    size?: SizeProp;
     /**
      * HTML-атрибут `type`.
      */
@@ -102,7 +112,7 @@ export interface ButtonProps extends CommonProps {
     /**
      * Стиль кнопки.
      *
-     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`.
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
      */
     use?: ButtonUse;
     /** @ignore */
@@ -115,12 +125,18 @@ export interface ButtonProps extends CommonProps {
      * CSS-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ButtonState {
     focusedByTab: boolean;
 }
 export declare const ButtonDataTids: {
     readonly root: "Button__root";
+    readonly spinner: "Button__spinner";
 };
 declare type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
 export declare class Button extends React.Component<ButtonProps, ButtonState> {
@@ -147,10 +163,10 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
      */
     blur(): void;
     render(): JSX.Element;
+    private renderLinkRootWithoutHandlers;
     private renderMain;
-    private getLoadingSpinner;
+    private renderIcon2022;
     private getSizeClassName;
-    private getSizeIconClassName;
     private getSizeWrapClassName;
     private handleFocus;
     private handleBlur;