@skbkontur/react-ui 0.0.0-77c9412271 → 0.0.0-7b43e31fde

package/cjs/components/Button/ArrowLeftIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowLeftIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowALeftIcon16Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light");
+var _ArrowALeftIcon20Light = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light");
+var _ArrowALeftIcon24Regular = require("../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowLeftIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon16Light.ArrowALeftIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon20Light.ArrowALeftIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowALeftIcon24Regular.ArrowALeftIcon24Regular, null);} },
+
+'ArrowLeftIcon');exports.ArrowLeftIcon = ArrowLeftIcon;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowLeftIcon.tsx"],"names":["ArrowLeftIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,aAAa,GAAG;AAC3B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,4CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,4CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,gDAAD,OAAN,EAHT,EAD2B;;AAM3B,eAN2B,CAAtB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowALeftIcon16Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon16Light';\nimport { ArrowALeftIcon20Light } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon20Light';\nimport { ArrowALeftIcon24Regular } from '../../internal/icons2022/ArrowALeftIcon/ArrowALeftIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowLeftIcon = iconSizer(\n  {\n    small: () => <ArrowALeftIcon16Light />,\n    medium: () => <ArrowALeftIcon20Light />,\n    large: () => <ArrowALeftIcon24Regular />,\n  },\n  'ArrowLeftIcon',\n);\n"]}

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

@@ -0,0 +1,3 @@
+export declare const ArrowRightIcon: import("../../lib/forwardRefAndName").ReactUIIconWithRef<SVGSVGElement, Omit<import("../../internal/icons2022/BaseIcon").IconProps, "size"> & {
+    size?: number | "small" | "medium" | "large" | undefined;
+}>;

package/cjs/components/Button/ArrowRightIcon.js

@@ -0,0 +1,15 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ArrowRightIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+
+var _ArrowARightIcon16Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light");
+var _ArrowARightIcon20Light = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light");
+var _ArrowARightIcon24Regular = require("../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular");
+var _iconSizer = require("../../internal/icons2022/iconSizer"); /* eslint-disable react/display-name */
+
+var ArrowRightIcon = (0, _iconSizer.iconSizer)(
+{
+  small: function small() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon16Light.ArrowARightIcon16Light, null);},
+  medium: function medium() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon20Light.ArrowARightIcon20Light, null);},
+  large: function large() {return /*#__PURE__*/_react.default.createElement(_ArrowARightIcon24Regular.ArrowARightIcon24Regular, null);} },
+
+'ArrowRightIcon');exports.ArrowRightIcon = ArrowRightIcon;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ArrowRightIcon.tsx"],"names":["ArrowRightIcon","small","medium","large"],"mappings":";AACA;;AAEA;AACA;AACA;AACA,+D,CANA;;AAQO,IAAMA,cAAc,GAAG;AAC5B;AACEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,8CAAD,OAAN,EADT;AAEEC,EAAAA,MAAM,EAAE,uCAAM,6BAAC,8CAAD,OAAN,EAFV;AAGEC,EAAAA,KAAK,EAAE,sCAAM,6BAAC,kDAAD,OAAN,EAHT,EAD4B;;AAM5B,gBAN4B,CAAvB,C","sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\n\nimport { ArrowARightIcon16Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon16Light';\nimport { ArrowARightIcon20Light } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon20Light';\nimport { ArrowARightIcon24Regular } from '../../internal/icons2022/ArrowARightIcon/ArrowARightIcon24Regular';\nimport { iconSizer } from '../../internal/icons2022/iconSizer';\n\nexport const ArrowRightIcon = iconSizer(\n  {\n    small: () => <ArrowARightIcon16Light />,\n    medium: () => <ArrowARightIcon20Light />,\n    large: () => <ArrowARightIcon24Regular />,\n  },\n  'ArrowRightIcon',\n);\n"]}

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

@@ -1,85 +1,149 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type ButtonSize = 'small' | 'medium' | 'large';
 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'> {
     /** @ignore */
     _noPadding?: boolean;
     /** @ignore */
     _noRightPadding?: boolean;
     /**
-     * Визуально нажатое состояние.
+     * Применяет к кнопке стили псевдокласса `:active`.
      */
     active?: boolean;
-    /** `type TextAlignProperty = "inherit" | "initial" | "unset" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"` */
+    /**
+     * CSS-свойство `text-align`.
+     */
     align?: React.CSSProperties['textAlign'];
     /**
-     * Кнопка со стрелкой.
-     *
-     * `type ButtonArrow = boolean | "left"`
+     * Превращает обычную кнопку в кнопку со стрелкой.
      */
     arrow?: boolean | 'left';
+    /**
+     * Даёт кнопке фокус после окончания загрузки страницы.
+     */
     autoFocus?: boolean;
+    /**
+     * Убирает обводку у кнопки.
+     */
     borderless?: boolean;
+    /**
+     * @ignore
+     */
     checked?: boolean;
     children?: React.ReactNode;
     /** @ignore */
-    corners?: number;
+    corners?: React.CSSProperties;
+    /**
+     * Отключенное состояние кнопки.
+     */
     disabled?: boolean;
     /** @ignore */
     disableFocus?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    focused?: boolean;
     /**
      * Иконка слева от текста кнопки.
      */
     icon?: React.ReactElement<any>;
+    /**
+     * Переводит кнопку в состояние загрузки.
+     */
     loading?: boolean;
+    /**
+     * Сужает кнопку.
+     */
     narrow?: boolean;
+    /**
+     * HTML-событие `onblur`.
+     */
     onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onclick`.
+     */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onfocus`.
+     */
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `keydown`.
+     */
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseenter`.
+     */
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `mouseleave`.
+     */
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * HTML-событие `onmouseover`.
+     */
     onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
-    /** `type ButtonSize = "small" | "medium" | "large"` */
+    /**
+     * Задаёт размер кнопки.
+     *
+     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
+     */
     size?: ButtonSize;
-    /** `type ButtonType = "button" | "submit" | "reset"` */
+    /**
+     * HTML-атрибут `type`.
+     */
     type?: ButtonType;
     /**
-     * Вариант использования. Влияет на цвет кнопки.
+     * HTML-атрибут `title`.
+     */
+    title?: string;
+    /**
+     * Стиль кнопки.
      *
-     * `type ButtonUse = "default" | "primary" | "success" | "danger" | "pay" | "link"`
+     * **Допустимые значения**: `"default"`, `"primary"`, `"success"`, `"danger"`, `"pay"`, `"link"`, `"text"`, `"backless"`.
      */
     use?: ButtonUse;
     /** @ignore */
     visuallyFocused?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
+    /**
+     * CSS-свойство `width`.
+     */
     width?: number | string;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ButtonState {
     focusedByTab: boolean;
 }
+export declare const ButtonDataTids: {
+    readonly root: "Button__root";
+};
+declare type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
 export declare class Button extends React.Component<ButtonProps, ButtonState> {
     static __KONTUR_REACT_UI__: string;
     static __BUTTON__: boolean;
-    static TOP_LEFT: number;
-    static TOP_RIGHT: number;
-    static BOTTOM_RIGHT: number;
-    static BOTTOM_LEFT: number;
-    static defaultProps: {
-        use: string;
-        size: string;
-        type: string;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         focusedByTab: boolean;
     };
     private theme;
     private node;
+    private setRootNode;
     componentDidMount(): void;
+    static getDerivedStateFromProps(props: ButtonProps): {
+        focusedByTab: boolean;
+    } | null;
     /**
      * @public
      */
@@ -90,10 +154,12 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     blur(): void;
     render(): JSX.Element;
     private renderMain;
+    private renderIcon2022;
     private getSizeClassName;
-    private getSizeIconClassName;
+    private getSizeWrapClassName;
     private handleFocus;
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export {};

package/cjs/components/Button/Button.js

@@ -1,14 +1,25 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isButton = exports.Button = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isButton = exports.ButtonDataTids = exports.Button = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _Link = require("../Link");
+var _Spinner = require("../Spinner");
+var _LoadingIcon = require("../../internal/icons2022/LoadingIcon");
+var _SSRSafe = require("../../lib/SSRSafe");
 
 var _Button = require("./Button.styles");
-var _Corners = require("./Corners");var
+var _ButtonIcon = require("./ButtonIcon");
+var _ButtonArrow = require("./ButtonArrow");
+var _getInnerLinkTheme = require("./getInnerLinkTheme");var _class, _class2, _temp;
 
 
 
@@ -104,7 +115,6 @@ var _Corners = require("./Corners");var
 
 
 
-Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -118,11 +128,86 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var ButtonDataTids = {
+  root: 'Button__root' };exports.ButtonDataTids = ButtonDataTids;var
+
+
+
+
+
+Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Button, _React$Component);function Button() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Button.defaultProps);_this.
+
     state = {
       focusedByTab: false };_this.
 
 
-    theme = void 0;_this.
+
     node = null;_this.
 
 
@@ -288,6 +373,134 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -313,8 +526,8 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
       if (!_this.props.disabled && !_this.props.disableFocus) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (_tabListener.tabListener.isTabPressed) {
+        _SSRSafe.globalThat.requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
         });
@@ -331,12 +544,13 @@ Button = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
     _ref = function (node) {
       _this.node = node;
-    };return _this;}var _proto = Button.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_tabListener.tabListener.isTabPressed = true;this.focus();}} /**
-   * @public
-   */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null ? void 0 : _this$node.focus();} /**
-   * @public
-   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;var _this$props$corners = this.props.corners,corners = _this$props$corners === void 0 ? 0 : _this$props$corners;var sizeClass = this.getSizeClassName();var isError = !!this.props.error;var isWarning = !!this.props.warning;var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
+    };return _this;}var _proto = Button.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}};Button.getDerivedStateFromProps = function getDerivedStateFromProps(props) {if (props.loading || props.disabled) {return { focusedByTab: false };}return null;} /**
+   * @public
+   */;_proto.focus = function focus() {var _this$node;(_this$node = this.node) == null ? void 0 : _this$node.focus();} /**
+   * @public
+   */;_proto.blur = function blur() {var _this$node2;(_this$node2 = this.node) == null ? void 0 : _this$node2.blur();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx2, _cx5, _cx6;var _this$props = this.props,corners = _this$props.corners,active = _this$props.active,disabled = _this$props.disabled,borderless = _this$props.borderless,checked = _this$props.checked,error = _this$props.error,warning = _this$props.warning,loading = _this$props.loading,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,visuallyFocused = _this$props.visuallyFocused,align = _this$props.align,disableFocus = _this$props.disableFocus,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,onMouseOver = _this$props.onMouseOver,onKeyDown = _this$props.onKeyDown,onClick = _this$props.onClick,width = _this$props.width,children = _this$props.children,ariaDescribedby = _this$props['aria-describedby'],ariaHasPopup = _this$props['aria-haspopup'],ariaControls = _this$props['aria-controls'],ariaLabel = _this$props['aria-label'],ariaChecked = _this$props['aria-checked'],ariaExpanded = _this$props['aria-expanded'],role = _this$props.role;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type,size = _this$getProps.size;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme); // eslint-disable-next-line react-hooks/rules-of-hooks
+    var _useButtonArrow = (0, _ButtonArrow.useButtonArrow)((0, _extends2.default)({}, this.props, { isFocused: Boolean(isFocused) }), this.theme),wrapClassNameWithArrow = _useButtonArrow[0],rootClassNameWithArrow = _useButtonArrow[1],arrowNode = _useButtonArrow[2];var rootClassName = '';if (_isTheme2022) {var trueDisabled = disabled || loading;rootClassName = _Emotion.cx.apply(void 0, [_Button.styles.root(this.theme), _Button.styles[use](this.theme), sizeClass, narrow && _Button.styles.narrow(), _noPadding && _Button.styles.noPadding(), _noRightPadding && _Button.styles.noRightPadding(), rootClassNameWithArrow].concat(trueDisabled ? [_Button.styles.disabled(this.theme), checked && _Button.styles.checkedDisabled(this.theme), checked && _Button.styles.checkedDisabled2022(this.theme), borderless && _Button.styles.borderless2022()] : [active && !checked && _Button.activeStyles[use](this.theme), isFocused && _Button.styles.focus(this.theme), checked && _Button.styles.checked2022(this.theme), checked && isFocused && _Button.styles.checkedFocused(this.theme), borderless && !checked && !isFocused && _Button.styles.borderless2022()]));} else {var _cx;rootClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles.simulatedPress()] = true, _cx[_Button.styles[use](this.theme)] = true, _cx[_Button.activeStyles[use](this.theme)] = active, _cx[sizeClass] = true, _cx[_Button.styles.focus(this.theme)] = isFocused, _cx[_Button.styles.checked(this.theme)] = checked, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused, _cx[_Button.styles.disabled(this.theme)] = disabled || loading, _cx[_Button.styles.checkedDisabled(this.theme)] = checked && disabled, _cx[_Button.styles.borderless()] = borderless && !disabled && !loading && !checked && !isFocused && !active, _cx[_Button.styles.narrow()] = narrow, _cx[_Button.styles.noPadding()] = _noPadding, _cx[_Button.styles.noRightPadding()] = _noRightPadding, _cx));}var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
       // on this button if somewhere on the page user presses Enter while some
       // input is focused. So we set type to 'button' by default.
-      type: this.props.type, className: (0, _classnames.default)((_cn = {}, _cn[_Button.jsStyles.root(this.theme)] = true, _cn[_Button.jsStyles[this.props.use] && _Button.jsStyles[this.props.use](this.theme) || _Button.jsStyles.default(this.theme)] = true, _cn[_Button.jsStyles.active(this.theme)] = !!this.props.active, _cn[_Button.jsStyles.validationRoot(this.theme)] = isError || isWarning, _cn[_Button.jsStyles.narrow()] = !!this.props.narrow, _cn[_Button.jsStyles.noPadding()] = !!this.props._noPadding, _cn[_Button.jsStyles.noRightPadding()] = !!this.props._noRightPadding, _cn[sizeClass] = true, _cn[_Button.jsStyles.borderless(this.theme)] = !!this.props.borderless, _cn[_Button.jsStyles.focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused, _cn[_Button.jsStyles.checked(this.theme)] = !!this.props.checked, _cn[_Button.jsStyles.disabled(this.theme)] = !!this.props.disabled || !!this.props.loading, _cn[_Button.jsStyles.fallback(this.theme)] = _client.isIE11 || _client.isEdge, _cn)), style: { borderTopLeftRadius: corners & _Corners.Corners.TOP_LEFT ? 0 : undefined, borderTopRightRadius: corners & _Corners.Corners.TOP_RIGHT ? 0 : undefined, borderBottomRightRadius: corners & _Corners.Corners.BOTTOM_RIGHT ? 0 : undefined, borderBottomLeftRadius: corners & _Corners.Corners.BOTTOM_LEFT ? 0 : undefined, textAlign: this.props.align }, disabled: this.props.disabled || this.props.loading, onClick: this.props.onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.props.onKeyDown, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave, onMouseOver: this.props.onMouseOver, tabIndex: this.props.disableFocus ? -1 : 0 };var wrapProps = { className: (0, _classnames.default)((_cn2 = {}, _cn2[_Button.jsStyles.wrap(this.theme)] = true, _cn2[_Button.jsStyles.wrapArrow()] = this.props.arrow === true, _cn2[_Button.jsStyles.wrapArrowLeft()] = this.props.arrow === 'left', _cn2)), style: { width: this.props.width } };var error = null;if (this.props.error) {error = /*#__PURE__*/_react.default.createElement("div", { className: _Button.jsStyles.error(this.theme) });} else if (this.props.warning) {error = /*#__PURE__*/_react.default.createElement("div", { className: _Button.jsStyles.warning(this.theme) });}var loading = null;if (this.props.loading) {loading = /*#__PURE__*/_react.default.createElement("div", { className: _Button.jsStyles.loading() });}var icon = this.props.icon;if (this.props.icon) {icon = /*#__PURE__*/_react.default.createElement("span", { className: (0, _classnames.default)(_Button.jsStyles.icon(), this.getSizeIconClassName()) }, this.props.icon);}var arrow = null;if (this.props.arrow) {var _cn3;arrow = /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)((_cn3 = {}, _cn3[_Button.jsStyles.arrowWarning(this.theme)] = isWarning, _cn3[_Button.jsStyles.arrowError(this.theme)] = isError, _cn3[_Button.jsStyles.arrow()] = true, _cn3[_Button.jsStyles.arrowLeft(this.theme)] = this.props.arrow === 'left', _cn3)) });} // Force disable all props and features, that cannot be use with Link
-    if (this.props.use === 'link') {var _cn4, _cn5;rootProps.className = (0, _classnames.default)((_cn4 = {}, _cn4[_Button.jsStyles.root(this.theme)] = true, _cn4[sizeClass] = true, _cn4[_Button.jsStyles.focus(this.theme)] = this.state.focusedByTab || !!this.props.visuallyFocused, _cn4[_Button.jsStyles.link(this.theme)] = true, _cn4[_Button.jsStyles.disabled(this.theme)] = !!this.props.disabled, _cn4));Object.assign(wrapProps, { className: (0, _classnames.default)(_Button.jsStyles.wrap(this.theme), (_cn5 = {}, _cn5[_Button.jsStyles.wrapLink(this.theme)] = this.props.use === 'link', _cn5)), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;loading = null;arrow = null;}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ ref: this._ref }, rootProps), error, loading, arrow, /*#__PURE__*/_react.default.createElement("div", { className: _Button.jsStyles.caption() }, icon, this.props.children))));};_proto.getSizeClassName = function getSizeClassName() {var _cn6, _cn7, _cn8;switch (this.props.size) {case 'large':return (0, _classnames.default)(_Button.jsStyles.sizeLarge(this.theme), (_cn6 = {}, _cn6[_Button.jsStyles.sizeLargeLoading(this.theme)] = this.props.loading, _cn6));case 'medium':return (0, _classnames.default)(_Button.jsStyles.sizeMedium(this.theme), (_cn7 = {}, _cn7[_Button.jsStyles.sizeMediumLoading(this.theme)] = this.props.loading, _cn7));case 'small':default:return (0, _classnames.default)(_Button.jsStyles.sizeSmall(this.theme), (_cn8 = {}, _cn8[_Button.jsStyles.sizeSmallLoading(this.theme)] = this.props.loading, _cn8));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.props.size) {case 'large':return _Button.jsStyles.iconLarge(this.theme);case 'medium':return _Button.jsStyles.iconMedium(this.theme);case 'small':default:return _Button.jsStyles.iconSmall(this.theme);}};return Button;}(_react.default.Component);exports.Button = Button;Button.__KONTUR_REACT_UI__ = 'Button';Button.__BUTTON__ = true;Button.TOP_LEFT = _Corners.Corners.TOP_LEFT;Button.TOP_RIGHT = _Corners.Corners.TOP_RIGHT;Button.BOTTOM_RIGHT = _Corners.Corners.BOTTOM_RIGHT;Button.BOTTOM_LEFT = _Corners.Corners.BOTTOM_LEFT;Button.defaultProps = { use: 'default', size: 'small', type: 'button' };var isButton = function isButton(child) {return /*#__PURE__*/_react.default.isValidElement(child) ? Object.prototype.hasOwnProperty.call(child.type, '__BUTTON__') : false;};exports.isButton = isButton;
+      type: type, role: role, 'aria-describedby': ariaDescribedby, 'aria-haspopup': ariaHasPopup, 'aria-controls': ariaControls, 'aria-label': ariaLabel, 'aria-checked': ariaChecked, 'aria-expanded': ariaExpanded, className: rootClassName, style: (0, _extends2.default)({ textAlign: align }, corners), disabled: disabled || loading, onClick: onClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: onKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, tabIndex: disableFocus ? -1 : 0, title: this.props.title };var wrapProps = { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Button.styles.wrap(this.theme)] = true, _cx2[wrapClassNameWithArrow] = true, _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = _isTheme2022 ? null : /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;var isDisabled2022 = _isTheme2022 && (disabled || loading);if ((!isFocused || isLink) && !isDisabled2022) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { style: { zIndex: _isTheme2022 && isLink ? -1 : undefined }, className: (0, _Emotion.cx)(_Button.styles.outline(), (_cx3 = {}, _cx3[_Button.styles.outlineWarning(this.theme)] = warning, _cx3[_Button.styles.outlineError(this.theme)] = error, _cx3[_Button.styles.outlineLink()] = isLink, _cx3[_Button.styles.outlineLinkWarning(this.theme)] = isLink && warning, _cx3[_Button.styles.outlineLinkError(this.theme)] = isLink && error, _cx3)) });}var iconNode = icon && /*#__PURE__*/_react.default.createElement(_ButtonIcon.ButtonIcon, { icon: icon, size: size, hasChildren: Boolean(children), disabled: disabled || false, loading: loading || false, use: use });var loadingNode = null;if (loading && !icon) {var loadingIcon = _isTheme2022 ? /*#__PURE__*/_react.default.createElement(_LoadingIcon.LoadingIcon, { size: size }) : /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, loadingIcon);} // Force disable all props and features, that cannot be use with Link
+    if (isLink) {var _cx4;rootProps.className = (0, _Emotion.cx)((_cx4 = {}, _cx4[_Button.styles.root(this.theme)] = true, _cx4[sizeClass] = true, _cx4[_Button.styles.link(this.theme)] = true, _cx4[_Button.styles.linkLineHeight()] = !_client.isSafari || _client.isSafari && !_isTheme2022, _cx4[_Button.styles.linkLineHeightSafariFallback()] = _client.isSafari && _isTheme2022, _cx4[_Button.styles.linkFocus(this.theme)] = isFocused, _cx4[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx4));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;}var captionNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx5 = {}, _cx5[_Button.styles.captionTranslated()] = (active || checked) && !loading && !_isTheme2022, _cx5[_Button.styles.captionLink()] = isLink, _cx5[_Button.styles.captionDisabled()] = !checked && disabled, _cx5)) }, loadingNode, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.globalClasses.text, (_cx6 = {}, _cx6[_Button.styles.visibilityHidden()] = !!loadingNode, _cx6)) }, children));if (_isTheme2022 && isLink && !loading) {captionNode = /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _getInnerLinkTheme.getInnerLinkTheme)(this.theme) }, /*#__PURE__*/_react.default.createElement(_Link.Link, { focused: isFocused, disabled: disabled, icon: this.renderIcon2022(icon), as: "span", tabIndex: -1 }, children));}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("span", wrapProps, /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({ "data-tid": ButtonDataTids.root, ref: this._ref }, rootProps), innerShadowNode, outlineNode, arrowNode, captionNode)));};_proto.renderIcon2022 = function renderIcon2022(icon) {if (icon && (0, _utils.isKonturIcon)(icon)) {var _icon$props$size;var sizes = (0, _ButtonIcon.getButtonIconSizes)(this.theme);return /*#__PURE__*/_react.default.cloneElement(icon, { size: (_icon$props$size = icon.props.size) != null ? _icon$props$size : sizes[this.getProps().size] });}return icon;};_proto.getSizeClassName = function getSizeClassName() {var _cx7, _cx8, _cx9;var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(this.theme);switch (this.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx7 = {}, _cx7[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx7[_Button.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx7[_Button.styles.sizeLargeWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx7));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx8 = {}, _cx8[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx8[_Button.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _cx8[_Button.styles.sizeMediumWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx8));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9[_Button.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx9[_Button.styles.sizeSmallWithIconWithoutText(this.theme)] = _isTheme2022 && !!this.props.icon && !this.props.children, _cx9));}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.getProps().size) {case 'large':return _Button.styles.wrapLarge(this.theme);case 'medium':return _Button.styles.wrapMedium(this.theme);case 'small':default:return _Button.styles.wrapSmall(this.theme);}};return Button;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Button', _class2.__BUTTON__ = true, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;