npm - @skbkontur/react-ui - Versions diffs - 4.0.0-beta.2 → 4.0.0-beta.3 - Mend

@skbkontur/react-ui 4.0.0-beta.2 → 4.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

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

@@ -159,4 +159,4 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     private handleBlur;
     private _ref;
 }
-export declare const isButton: (child: React.ReactChild) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;
+export declare const isButton: (child: React.ReactNode) => child is React.ReactElement<ButtonProps, string | React.JSXElementConstructor<any>>;

package/cjs/components/Button/Button.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "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 _utils = require("../../lib/utils");
 var _client = require("../../lib/client");
 var _keyListener = require("../../lib/events/keyListener");
@@ -439,6 +440,7 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
     handleFocus = function (e) {
@@ -470,6 +472,5 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
    */;_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 _cx, _cx2, _cx7, _cx8;var _this$props = this.props,_this$props$corners = _this$props.corners,corners = _this$props$corners === void 0 ? 0 : _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,arrow = _this$props.arrow,narrow = _this$props.narrow,icon = _this$props.icon,_noPadding = _this$props._noPadding,_noRightPadding = _this$props._noRightPadding,_this$props$use = _this$props.use,use = _this$props$use === void 0 ? Button.defaultProps.use : _this$props$use,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;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused;var isLink = use === 'link';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, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = 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 && !checked, _cx[_Button.styles.checked(this.theme)] = checked, _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)), 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: align }, 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[_Button.styles.wrapArrow()] = arrow === true, _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;if (!isFocused || isLink) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { 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 loadingNode = null;if (loading && !icon) {loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, this.getLoadingSpinner());}var iconNode = null;if (icon) {var _cx4;iconNode = /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[_Button.styles.iconNoRightPadding()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow) {var _cx5;arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Button.styles.arrow()] = true, _cx5[_Button.styles.arrowWarning(this.theme)] = !checked && warning, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[_Button.styles.arrowLeft()] = arrow === 'left', _cx5)) }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperTop) }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperBottom) }));} // Force disable all props and features, that cannot be use with Link
-    if (isLink) {var _cx6;rootProps.className = (0, _Emotion.cx)((_cx6 = {}, _cx6[_Button.styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[_Button.styles.link(this.theme)] = true, _cx6[_Button.styles.linkFocus(this.theme)] = isFocused, _cx6[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx6));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;arrowNode = null;}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)({ ref: this._ref }, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx7 = {}, _cx7[_Button.styles.captionTranslated()] = active || checked, _cx7[_Button.styles.captionLink()] = isLink, _cx7[_Button.styles.captionDisabled()] = !checked && disabled, _cx7)) }, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)((_cx8 = {}, _cx8[_Button.styles.visibilityHidden()] = !!loadingNode, _cx8)) }, children)))));};_proto.getLoadingSpinner = function getLoadingSpinner() {return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });};_proto.getSizeClassName = function getSizeClassName() {var _cx9, _cx10, _cx11;switch (this.props.size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.props.size) {case 'large':return _Button.styles.iconLarge(this.theme);case 'medium':return _Button.styles.iconMedium(this.theme);case 'small':default:return _Button.styles.iconSmall(this.theme);}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.props.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.TOP_LEFT = _Corners.Corners.TOP_LEFT, _class2.TOP_RIGHT = _Corners.Corners.TOP_RIGHT, _class2.BOTTOM_RIGHT = _Corners.Corners.BOTTOM_RIGHT, _class2.BOTTOM_LEFT = _Corners.Corners.BOTTOM_LEFT, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = function isButton(child) {var _child$type; // @ts-ignore
-  return (child == null ? void 0 : (_child$type = child.type) == null ? void 0 : _child$type.__KONTUR_REACT_UI__) === 'Button';};exports.isButton = isButton;
+      type: this.props.type, className: (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = 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)), 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: align }, 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[_Button.styles.wrapArrow()] = arrow === true, _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left', _cx2[this.getSizeWrapClassName()] = true, _cx2)), style: { width: width } };var innerShadowNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.globalClasses.innerShadow });var outlineNode = null;if (!isFocused || isLink) {var _cx3;outlineNode = /*#__PURE__*/_react.default.createElement("div", { 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 loadingNode = null;if (loading && !icon) {loadingNode = /*#__PURE__*/_react.default.createElement("div", { className: _Button.styles.loading() }, this.getLoadingSpinner());}var iconNode = null;if (icon) {var _cx4;iconNode = /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Button.styles.icon(), this.getSizeIconClassName(), (_cx4 = {}, _cx4[_Button.styles.iconNoRightPadding()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow) {var _cx5;arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Button.styles.arrow()] = true, _cx5[_Button.styles.arrowWarning(this.theme)] = !checked && warning, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused, _cx5[_Button.styles.arrowLeft()] = arrow === 'left', _cx5)) }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperTop) }), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.globalClasses.arrowHelper, _Button.globalClasses.arrowHelperBottom) }));} // Force disable all props and features, that cannot be use with Link
+    if (isLink) {var _cx6;rootProps.className = (0, _Emotion.cx)((_cx6 = {}, _cx6[_Button.styles.root(this.theme)] = true, _cx6[sizeClass] = true, _cx6[_Button.styles.link(this.theme)] = true, _cx6[_Button.styles.linkFocus(this.theme)] = isFocused, _cx6[_Button.styles.linkDisabled(this.theme)] = disabled || loading, _cx6));Object.assign(wrapProps, { className: (0, _Emotion.cx)(_Button.styles.wrap(this.theme), _Button.styles.wrapLink()), style: { width: wrapProps.style.width } });rootProps.style.textAlign = undefined;arrowNode = null;}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)({ ref: this._ref }, rootProps), innerShadowNode, outlineNode, loadingNode, arrowNode, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Button.styles.caption(), _Button.globalClasses.caption, (_cx7 = {}, _cx7[_Button.styles.captionTranslated()] = active || checked, _cx7[_Button.styles.captionLink()] = isLink, _cx7[_Button.styles.captionDisabled()] = !checked && disabled, _cx7)) }, iconNode, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)((_cx8 = {}, _cx8[_Button.styles.visibilityHidden()] = !!loadingNode, _cx8)) }, children)))));};_proto.getLoadingSpinner = function getLoadingSpinner() {return /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, type: "mini" });};_proto.getSizeClassName = function getSizeClassName() {var _cx9, _cx10, _cx11;switch (this.props.size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10));case 'small':default:return (0, _Emotion.cx)(_Button.styles.sizeSmall(this.theme), (_cx11 = {}, _cx11[_Button.styles.sizeSmallIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.props.size) {case 'large':return _Button.styles.iconLarge(this.theme);case 'medium':return _Button.styles.iconMedium(this.theme);case 'small':default:return _Button.styles.iconSmall(this.theme);}};_proto.getSizeWrapClassName = function getSizeWrapClassName() {switch (this.props.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.TOP_LEFT = _Corners.Corners.TOP_LEFT, _class2.TOP_RIGHT = _Corners.Corners.TOP_RIGHT, _class2.BOTTOM_RIGHT = _Corners.Corners.BOTTOM_RIGHT, _class2.BOTTOM_LEFT = _Corners.Corners.BOTTOM_LEFT, _class2.defaultProps = { use: 'default', size: 'small', type: 'button' }, _temp)) || _class;exports.Button = Button;var isButton = (0, _utils.isReactUIComponent)('Button');exports.isButton = isButton;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Button.tsx"],"names":["Button","rootNode","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","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","use","defaultProps","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","sizeClass","getSizeClassName","isFocused","isLink","rootProps","type","className","styles","root","activeStyles","checkedDisabled","noPadding","noRightPadding","style","borderTopLeftRadius","Corners","TOP_LEFT","undefined","borderTopRightRadius","TOP_RIGHT","borderBottomRightRadius","BOTTOM_RIGHT","borderBottomLeftRadius","BOTTOM_LEFT","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","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","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","React","Component","__KONTUR_REACT_UI__","__BUTTON__","isButton","child"],"mappings":"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","sourcesContent":["import React from 'react';\n\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';\nimport { Corners } from './Corners';\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?: number;\n\n /\n Отключенное состояние кнопки.\n /\n disabled?: boolean;\n\n /* @ignore /\n disableFocus?: boolean;\n\n /\n Cостояние валидации при ошибке.\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 Cостояние валидации при предупреждении.\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 public static TOP_LEFT = Corners.TOP_LEFT;\n public static TOP_RIGHT = Corners.TOP_RIGHT;\n public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;\n public static BOTTOM_LEFT = Corners.BOTTOM_LEFT;\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 = 0,\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 use = Button.defaultProps.use,\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 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 && !checked,\n [styles.checked(this.theme)]: checked,\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 borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,\n borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,\n borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,\n borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,\n textAlign: align,\n },\n disabled: disabled \|\| loading,\n onClick: onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown: onKeyDown,\n onMouseEnter: onMouseEnter,\n onMouseLeave: onMouseLeave,\n onMouseOver: 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: 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 = (child: React.ReactChild): child is React.ReactElement<ButtonProps> => {\n // @ts-ignore\n return child?.type?.__KONTUR_REACT_UI__ === 'Button';\n};\n"]}
1	+ {"version":3,"sources":["Button.tsx"],"names":["Button","rootNode","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","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","use","defaultProps","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","sizeClass","getSizeClassName","isFocused","isLink","rootProps","type","className","styles","root","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","borderTopLeftRadius","Corners","TOP_LEFT","undefined","borderTopRightRadius","TOP_RIGHT","borderBottomRightRadius","BOTTOM_RIGHT","borderBottomLeftRadius","BOTTOM_LEFT","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","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","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeMedium","sizeMediumIE11","sizeSmall","sizeSmallIE11","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","React","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';\nimport { Corners } from './Corners';\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?: number;\n\n /\n Отключенное состояние кнопки.\n /\n disabled?: boolean;\n\n /* @ignore /\n disableFocus?: boolean;\n\n /\n Cостояние валидации при ошибке.\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 Cостояние валидации при предупреждении.\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 public static TOP_LEFT = Corners.TOP_LEFT;\n public static TOP_RIGHT = Corners.TOP_RIGHT;\n public static BOTTOM_RIGHT = Corners.BOTTOM_RIGHT;\n public static BOTTOM_LEFT = Corners.BOTTOM_LEFT;\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 = 0,\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 use = Button.defaultProps.use,\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 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 borderTopLeftRadius: corners & Corners.TOP_LEFT ? 0 : undefined,\n borderTopRightRadius: corners & Corners.TOP_RIGHT ? 0 : undefined,\n borderBottomRightRadius: corners & Corners.BOTTOM_RIGHT ? 0 : undefined,\n borderBottomLeftRadius: corners & Corners.BOTTOM_LEFT ? 0 : undefined,\n textAlign: align,\n },\n disabled: disabled \|\| loading,\n onClick: onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown: onKeyDown,\n onMouseEnter: onMouseEnter,\n onMouseLeave: onMouseLeave,\n onMouseOver: 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: 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"]}

package/cjs/components/Button/Button.styles.d.ts CHANGED Viewed

@@ -36,6 +36,7 @@ export declare const styles: {
     danger(t: Theme): string;
     pay(t: Theme): string;
     checked(t: Theme): string;
+    checkedFocused(t: Theme): string;
     checkedDisabled(t: Theme): string;
     caption(): string;
     captionLink(): string;

package/cjs/components/Button/Button.styles.js CHANGED Viewed

@@ -3,7 +3,7 @@
 var _Mixins = require("../../lib/styles/Mixins");
 var _client = require("../../lib/client");
-var _Button = require("./Button.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59;
+var _Button = require("./Button.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53, _templateObject54, _templateObject55, _templateObject56, _templateObject57, _templateObject58, _templateObject59, _templateObject60;
@@ -518,10 +518,20 @@ var styles = (0, _Emotion.memoizeStyle)({
     checkedStyles);
+  },
+  checkedFocused: function checkedFocused(t) {
+    return (0, _Emotion.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover {\n        box-shadow: inset 0 0 0 ", " ", ",\n          0 0 0 ", " ", ";\n        border-color: ", ";\n      }\n    "])),
+    t.btnInsetWidth, t.btnOutlineColorFocus,
+    t.btnFocusShadowWidth, t.btnBorderColorFocus,
+    t.btnBorderColorFocus);
   },
   checkedDisabled: function checkedDisabled(t) {
-    return (0, _Emotion.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 ", " ", ";\n      background-color: ", ";\n      color: ", ";\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: none;\n        }\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 ", " ", ";\n      background-color: ", ";\n      color: ", ";\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: none;\n        }\n      }\n    "])),
     t.btnBorderWidth, t.btnCheckedDisabledBorderColor,
     t.btnCheckedDisabledBg,
     t.btnCheckedDisabledColor,
@@ -541,7 +551,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   caption: function caption() {
-    return (0, _Emotion.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
+    return (0, _Emotion.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: nowrap;\n      display: inline-block;\n      width: 100%;\n      vertical-align: top;\n    "])));
@@ -551,26 +561,26 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   captionLink: function captionLink() {
-    return (0, _Emotion.css)(_templateObject32 || (_templateObject32 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline;\n      transform: none !important; // override root:active style\n    "])));
+    return (0, _Emotion.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline;\n      transform: none !important; // override root:active style\n    "])));
   },
   captionTranslated: function captionTranslated() {
-    return (0, _Emotion.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transform: translateY(1px);\n    "])));
+    return (0, _Emotion.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transform: translateY(1px);\n    "])));
   },
   captionDisabled: function captionDisabled() {
-    return (0, _Emotion.css)(_templateObject34 || (_templateObject34 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transform: none !important; // override root:active style\n    "])));
+    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transform: none !important; // override root:active style\n    "])));
   },
   wrap: function wrap(t) {
-    return (0, _Emotion.css)(_templateObject35 || (_templateObject35 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-sizing: border-box;\n      display: inline-block;\n      line-height: normal;\n      padding: ", ";\n    "])),
@@ -579,100 +589,100 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   wrapSmall: function wrapSmall(t) {
-    return (0, _Emotion.css)(_templateObject36 || (_templateObject36 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
     t.btnHeightSmall);
   },
   wrapMedium: function wrapMedium(t) {
-    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
     t.btnHeightMedium);
   },
   wrapLarge: function wrapLarge(t) {
-    return (0, _Emotion.css)(_templateObject38 || (_templateObject38 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
     t.btnHeightLarge);
   },
   narrow: function narrow() {
-    return (0, _Emotion.css)(_templateObject39 || (_templateObject39 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 5px;\n      padding-right: 5px;\n    "])));
+    return (0, _Emotion.css)(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 5px;\n      padding-right: 5px;\n    "])));
   },
   noPadding: function noPadding() {
-    return (0, _Emotion.css)(_templateObject40 || (_templateObject40 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 0;\n      padding-right: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 0;\n      padding-right: 0;\n    "])));
   },
   noRightPadding: function noRightPadding() {
-    return (0, _Emotion.css)(_templateObject41 || (_templateObject41 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: 0;\n    "])));
   },
   iconNoRightPadding: function iconNoRightPadding() {
-    return (0, _Emotion.css)(_templateObject42 || (_templateObject42 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: 0;\n    "])));
   },
   iconLink: function iconLink(t) {
-    return (0, _Emotion.css)(_templateObject43 || (_templateObject43 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", ";\n    "])),
     t.btnLinkIconMarginRight);
   },
   wrapLink: function wrapLink() {
-    return (0, _Emotion.css)(_templateObject44 || (_templateObject44 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
   },
   wrapArrow: function wrapArrow() {
-    return (0, _Emotion.css)(_templateObject45 || (_templateObject45 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: 10px;\n    "])));
+    return (0, _Emotion.css)(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: 10px;\n    "])));
   },
   wrapArrowLeft: function wrapArrowLeft() {
-    return (0, _Emotion.css)(_templateObject46 || (_templateObject46 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: 0;\n      margin-left: 10px;\n    "])));
+    return (0, _Emotion.css)(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-right: 0;\n      margin-left: 10px;\n    "])));
   },
   icon: function icon() {
-    return (0, _Emotion.css)(_templateObject47 || (_templateObject47 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
+    return (0, _Emotion.css)(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
   },
   iconSmall: function iconSmall(t) {
-    return (0, _Emotion.css)(_templateObject48 || (_templateObject48 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
     t.btnIconSizeSmall,
     t.btnIconGapSmall);
   },
   iconMedium: function iconMedium(t) {
-    return (0, _Emotion.css)(_templateObject49 || (_templateObject49 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
     t.btnIconSizeMedium,
     t.btnIconGapMedium);
   },
   iconLarge: function iconLarge(t) {
-    return (0, _Emotion.css)(_templateObject50 || (_templateObject50 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteralLoose2.default)(["\n      width: ", ";\n      padding-right: ", ";\n    "])),
     t.btnIconSizeLarge,
     t.btnIconGapLarge);
   },
   borderless: function borderless() {
-    return (0, _Emotion.css)(_templateObject51 || (_templateObject51 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover,\n      &:active {\n        box-shadow: none;\n        .", ", .", " {\n          box-shadow: none;\n        }\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover,\n      &:active {\n        box-shadow: none;\n        .", ", .", " {\n          box-shadow: none;\n        }\n      }\n    "])),
@@ -685,7 +695,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   loading: function loading() {
-    return (0, _Emotion.css)(_templateObject52 || (_templateObject52 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
+    return (0, _Emotion.css)(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      border-radius: inherit;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10;\n    "])));
@@ -700,7 +710,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   visibilityHidden: function visibilityHidden() {
-    return (0, _Emotion.css)(_templateObject53 || (_templateObject53 = (0, _taggedTemplateLiteralLoose2.default)(["\n      visibility: hidden;\n    "])));
+    return (0, _Emotion.css)(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteralLoose2.default)(["\n      visibility: hidden;\n    "])));
   } });exports.styles = styles;
@@ -708,7 +718,7 @@ var styles = (0, _Emotion.memoizeStyle)({
 var activeStyles = (0, _Emotion.memoizeStyle)({
   default: function _default(t) {
-    return (0, _Emotion.css)(_templateObject54 || (_templateObject54 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
     (0, _Button.buttonActiveMixin)(
@@ -724,7 +734,7 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   },
   primary: function primary(t) {
-    return (0, _Emotion.css)(_templateObject55 || (_templateObject55 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
     (0, _Button.buttonActiveMixin)(
@@ -740,7 +750,7 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   },
   success: function success(t) {
-    return (0, _Emotion.css)(_templateObject56 || (_templateObject56 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
     (0, _Button.buttonActiveMixin)(
@@ -756,7 +766,7 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   },
   danger: function danger(t) {
-    return (0, _Emotion.css)(_templateObject57 || (_templateObject57 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
     (0, _Button.buttonActiveMixin)(
@@ -772,7 +782,7 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   },
   pay: function pay(t) {
-    return (0, _Emotion.css)(_templateObject58 || (_templateObject58 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        ", ";\n      }\n    "])),
     (0, _Button.buttonActiveMixin)(
@@ -788,7 +798,7 @@ var activeStyles = (0, _Emotion.memoizeStyle)({
   },
   link: function link(t) {
-    return (0, _Emotion.css)(_templateObject59 || (_templateObject59 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject60 || (_templateObject60 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &,\n      &:hover {\n        color: ", ";\n      }\n    "])),
     t.linkActiveColor);