@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/components/Button/Button/Button.js

@@ -1,18 +1,37 @@
 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 = {
+  rootElement: 'Button__rootElement',
+  root: 'Button__root',
+  spinner: 'Button__spinner'
+};
 export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Button, _React$Component);
 
@@ -24,6 +43,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Button.defaultProps);
     _this.state = {
       focusedByTab: false
     };
@@ -33,7 +53,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
@@ -104,13 +124,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,
@@ -121,9 +151,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,
@@ -132,20 +162,66 @@ 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;
-    var use = this.props.use || Button.defaultProps.use;
+        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,
+        id = _this$props.id;
+
+    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 = 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), use === 'text' && styles.textDisabled2022()] : [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: this.props.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)),
+      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: _extends({
         textAlign: align
       }, corners),
@@ -157,65 +233,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.iconNoRightPadding()] = !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: {
@@ -223,60 +289,75 @@ 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({
       rootNodeRef: this.setRootNode
-    }, this.props), /*#__PURE__*/React.createElement("span", wrapProps, /*#__PURE__*/React.createElement("button", _extends({
+    }, this.props), /*#__PURE__*/React.createElement("span", _extends({}, wrapProps, {
+      "data-tid": ButtonDataTids.rootElement
+    }), /*#__PURE__*/React.createElement("button", _extends({
+      id: id,
+      "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.props.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.props.size) {
+    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));
     }
   };
 
   _proto.getSizeWrapClassName = function getSizeWrapClassName() {
-    switch (this.props.size) {
+    switch (this.getProps().size) {
       case 'large':
         return styles.wrapLarge(this.theme);
 
@@ -290,7 +371,7 @@ export var Button = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (
   };
 
   return Button;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.displayName = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = {
   use: 'default',
   size: 'small',
   type: 'button'

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","styles","activeStyles","globalClasses","Button","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","defaultProps","sizeClass","getSizeClassName","isFocused","isLink","rootProps","type","className","root","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","iconNoRightPadding","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';\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\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 = {\n    use: 'default' as ButtonUse,\n    size: 'small' as ButtonSize,\n    type: 'button' as ButtonType,\n  };\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 = this.props.use || Button.defaultProps.use;\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: this.props.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.iconNoRightPadding()]: !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 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.props.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.props.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.props.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","rootElement","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","id","use","type","size","sizeClass","getSizeClassName","isFocused","isLink","_isTheme2022","Boolean","wrapClassNameWithArrow","rootClassNameWithArrow","arrowNode","isUseStateWithoutOutlineInDisabledState","includes","rootClassName","trueDisabled","noPadding","noRightPadding","disabledWithoutOutline","checkedDisabled","checkedDisabled2022","borderless2022","backlessDisabled2022","textDisabled2022","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__","displayName","__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' | 'id'>,\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  rootElement: 'Button__rootElement',\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 displayName = '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      id,\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              use === 'text' && styles.textDisabled2022(),\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} data-tid={ButtonDataTids.rootElement}>\n          <button id={id} 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' | 'id'>, 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,18 +125,27 @@ export interface ButtonProps extends CommonProps {
      * CSS-свойство `width`.
      */
     width?: number | string;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ButtonState {
     focusedByTab: boolean;
 }
+export declare const ButtonDataTids: {
+    readonly rootElement: "Button__rootElement";
+    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> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static __BUTTON__: boolean;
-    static defaultProps: {
-        use: ButtonUse;
-        size: ButtonSize;
-        type: ButtonType;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         focusedByTab: boolean;
     };
@@ -146,13 +165,14 @@ 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;
     private _ref;
 }
 export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export {};