npm - @skbkontur/react-ui - Versions diffs - 4.5.2 → 4.5.3-theme2022.0 - Mend

@skbkontur/react-ui 4.5.2 → 4.5.3-theme2022.0

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 (173) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [4.5.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.5.2...@skbkontur/react-ui@4.5.3) (2022-09-12)
+### Bug Fixes
+* **Select:** use input's background color  ([#2978](https://github.com/skbkontur/retail-ui/issues/2978)) ([560ad55](https://github.com/skbkontur/retail-ui/commit/560ad55f7fe1fa8459e875fdf6bec58bb4658930))
 ## [4.5.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.5.1...@skbkontur/react-ui@4.5.2) (2022-09-09)

package/LICENSE CHANGED Viewed

@@ -1,21 +1,21 @@
-MIT License
-Copyright (c) 2017 SKB Kontur
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+Copyright (c) 2017 SKB Kontur
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,8 +1,9 @@
 import React 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 declare type ButtonUse = 'default' | 'primary' | 'success' | 'danger' | 'pay' | 'link' | 'text' | 'backless';
 export interface ButtonProps extends CommonProps {
     /** @ignore */
     _noPadding?: boolean;
@@ -28,6 +29,10 @@ export interface ButtonProps extends CommonProps {
      * Убирает обводку у кнопки.
      */
     borderless?: boolean;
+    /**
+     * Убирает фон у кнопки.
+     */
+    backless?: boolean;
     /**
      * @ignore
      */
@@ -115,6 +120,7 @@ export interface ButtonProps extends CommonProps {
      * CSS-свойство `width`.
      */
     width?: number | string;
+    theme?: ThemeIn;
 }
 export interface ButtonState {
     focusedByTab: boolean;
@@ -152,6 +158,9 @@ export declare class Button extends React.Component<ButtonProps, ButtonState> {
     private getSizeClassName;
     private getSizeIconClassName;
     private getSizeWrapClassName;
+    private getLinkClassName;
+    private getRootWithArrowIconClassName;
+    private getArrowIconRootClassName;
     private handleFocus;
     private handleBlur;
     private _ref;

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

@@ -9,7 +9,11 @@ var _Spinner = require("../Spinner");
 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 _hasFakeUserAction = require("../../internal/FakeUserActions/hasFakeUserAction");
+var _px = require("../../internal/icons/16px");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _Button = require("./Button.styles");var _class, _class2, _temp;
@@ -157,6 +161,12 @@ var _Button = require("./Button.styles");var _class, _class2, _temp;
@@ -423,6 +433,74 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
@@ -470,8 +548,8 @@ Button = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
    * @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 _cx, _cx2, _cx7, _cx8;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,arrow = _this$props.arrow,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;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type;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
+   */;_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 _cx, _cx2, _cx7, _cx8;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,arrow = _this$props.arrow,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;var _this$getProps = this.getProps(),use = _this$getProps.use,type = _this$getProps.type;var sizeClass = this.getSizeClassName();var isFocused = this.state.focusedByTab || visuallyFocused || (0, _hasFakeUserAction.hasFakeUserAction)(this, 'focus');var isLink = use === 'link';var isTheme2022 = (0, _ThemeHelpers.getThemeName)(this.theme) === 'THEME_2022';var rootProps = { // By default the type attribute is 'submit'. IE8 will fire a click event
       // on this button if somewhere on the page user presses Enter while some
       // input is focused. So we set type to 'button' by default.
-      type: type, className: (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: (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[_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.iconNoRightMargin()] = !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)({ "data-tid": ButtonDataTids.root, 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.getProps().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.getProps().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.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;
+      type: type, className: (0, _Emotion.cx)((_cx = {}, _cx[_Button.styles.root(this.theme)] = true, _cx[_Button.styles.simulatedPress()] = !isTheme2022, _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 && !disabled, _cx[_Button.styles.checkedFocused(this.theme)] = checked && isFocused && !disabled, _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: (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[_Button.styles.wrapArrow()] = arrow === true && use !== 'text' && use !== 'backless', _cx2[_Button.styles.wrapArrowLeft()] = arrow === 'left' && use !== 'text' && use !== 'backless', _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.iconNoRightMargin()] = !children, _cx4[_Button.styles.iconLink(this.theme)] = isLink, _cx4)) }, loading ? this.getLoadingSpinner() : icon);}var arrowNode = null;if (arrow && use !== 'text' && use !== 'backless') {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 && !disabled, _cx5[_Button.styles.arrowError(this.theme)] = !checked && error && !disabled, _cx5[_Button.styles.arrowFocus(this.theme)] = !checked && isFocused && !disabled, _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) }));if (isTheme2022) {var sizeIcon = this.theme.btnIconSizeSmall;if (this.props.size === 'medium') {sizeIcon = this.theme.btnIconSizeMedium;} else if (this.props.size === 'large') {sizeIcon = this.theme.btnIconSizeLarge;}rootProps.className = (0, _Emotion.cx)(rootProps.className, this.getRootWithArrowIconClassName());var arrowIcon = arrow === 'left' ? /*#__PURE__*/_react.default.createElement(_px.ArrowALeftIcon, { size: parseInt(sizeIcon) }) : /*#__PURE__*/_react.default.createElement(_px.ArrowARightIcon, { size: parseInt(sizeIcon) });arrowNode = /*#__PURE__*/_react.default.createElement("div", { className: this.getArrowIconRootClassName() }, arrowIcon);}} // 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[this.getLinkClassName(isFocused, Boolean(disabled || loading))] = true, _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)({ "data-tid": ButtonDataTids.root, 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)(_Button.globalClasses.text, (_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.getProps().size) {case 'large':return (0, _Emotion.cx)(_Button.styles.sizeLarge(this.theme), (_cx9 = {}, _cx9[_Button.styles.sizeLargeIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx9[_Button.styles.sizeLargeWithIcon(this.theme)] = !!this.props.icon, _cx9));case 'medium':return (0, _Emotion.cx)(_Button.styles.sizeMedium(this.theme), (_cx10 = {}, _cx10[_Button.styles.sizeMediumIE11(this.theme)] = _client.isIE11 || _client.isEdge, _cx10[_Button.styles.sizeMediumWithIcon(this.theme)] = !!this.props.icon, _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[_Button.styles.sizeSmallWithIcon(this.theme)] = !!this.props.icon, _cx11));}};_proto.getSizeIconClassName = function getSizeIconClassName() {switch (this.getProps().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.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);}};_proto.getLinkClassName = function getLinkClassName(focused, disabled) {var _cx12, _cx13;var isBorderBottom = parseInt(this.theme.btnLinkLineBorderBottomWidth) > 0;return !isBorderBottom ? (0, _Emotion.cx)(_Button.styles.link(this.theme), (_cx12 = {}, _cx12[_Button.styles.linkFocus(this.theme)] = focused, _cx12[_Button.styles.linkDisabled(this.theme)] = disabled, _cx12)) : (0, _Emotion.cx)(_Button.styles.link(this.theme), _Button.styles.linkLine(this.theme), (_cx13 = {}, _cx13[_Button.styles.linkLineFocus(this.theme)] = focused, _cx13[_Button.styles.linkLineDisabled(this.theme)] = disabled, _cx13));};_proto.getRootWithArrowIconClassName = function getRootWithArrowIconClassName() {var _cx14;var _this$props2 = this.props,arrow = _this$props2.arrow,size = _this$props2.size;return (0, _Emotion.cx)((_cx14 = {}, _cx14[_Button.styles.withArrowIconRightSmall(this.theme)] = arrow !== 'left' && size === 'small', _cx14[_Button.styles.withArrowIconRightMedium(this.theme)] = arrow !== 'left' && size === 'medium', _cx14[_Button.styles.withArrowIconRightLarge(this.theme)] = arrow !== 'left' && size === 'large', _cx14[_Button.styles.withArrowIconLeftSmall(this.theme)] = arrow === 'left' && size === 'small', _cx14[_Button.styles.withArrowIconLeftMedium(this.theme)] = arrow === 'left' && size === 'medium', _cx14[_Button.styles.withArrowIconLeftLarge(this.theme)] = arrow === 'left' && size === 'large', _cx14));};_proto.getArrowIconRootClassName = function getArrowIconRootClassName() {var _cx15;var _this$props3 = this.props,arrow = _this$props3.arrow,size = _this$props3.size;return (0, _Emotion.cx)(_Button.styles.arrowIconRoot(), (_cx15 = {}, _cx15[_Button.styles.arrowIconRootSmall(this.theme)] = size === 'small', _cx15[_Button.styles.arrowIconRootMedium(this.theme)] = size === 'medium', _cx15[_Button.styles.arrowIconRootLarge(this.theme)] = size === 'large', _cx15[_Button.styles.arrowIconLeft()] = arrow === 'left', _cx15));};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;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","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","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","rootProps","className","styles","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","link","linkFocus","linkDisabled","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","visibilityHidden","size","sizeLarge","sizeLargeIE11","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';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\nexport type ButtonType = 'button' \| 'submit' \| 'reset';\nexport type ButtonUse = 'default' \| 'primary' \| 'success' \| 'danger' \| 'pay' \| 'link';\n\nexport interface ButtonProps extends CommonProps {\n /** @ignore /\n _noPadding?: boolean;\n\n /* @ignore /\n _noRightPadding?: boolean;\n\n /\n Применяет к кнопке стили псевдокласса `:active`.\n /\n active?: boolean;\n\n /\n CSS-свойство `text-align`.\n /\n align?: React.CSSProperties['textAlign'];\n\n /\n Превращает обычную кнопку в кнопку со стрелкой.\n /\n arrow?: boolean \| 'left';\n\n /\n Даёт кнопке фокус после окончания загрузки страницы.\n /\n autoFocus?: boolean;\n\n /\n Убирает обводку у кнопки.\n /\n borderless?: boolean;\n\n /\n @ignore\n /\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /* @ignore /\n corners?: React.CSSProperties;\n\n /\n Отключенное состояние кнопки.\n /\n disabled?: boolean;\n\n /* @ignore /\n disableFocus?: boolean;\n\n /\n Состояние валидации при ошибке.\n /\n error?: boolean;\n\n /\n Иконка слева от текста кнопки.\n /\n icon?: React.ReactElement<any>;\n\n /\n Переводит кнопку в состояние загрузки.\n /\n loading?: boolean;\n\n /\n Сужает кнопку.\n /\n narrow?: boolean;\n\n /\n HTML-событие `onblur`.\n /\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onclick`.\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onfocus`.\n /\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `keydown`.\n /\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onmouseenter`.\n /\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `mouseleave`.\n /\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onmouseover`.\n /\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n Задаёт размер кнопки.\n \n Допустимые значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n /\n size?: ButtonSize;\n\n /\n HTML-атрибут `type`.\n /\n type?: ButtonType;\n\n /\n HTML-атрибут `title`.\n /\n title?: string;\n\n /\n Стиль кнопки.\n \n Допустимые значения: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n /\n use?: ButtonUse;\n\n /* @ignore /\n visuallyFocused?: boolean;\n\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n\n /\n CSS-свойство `width`.\n /\n width?: number \| string;\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' \| 'size' \| 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading \|\| props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /\n @public\n /\n public focus() {\n this.node?.focus();\n }\n\n /\n @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab \|\| visuallyFocused;\n const isLink = use === 'link';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles[use](this.theme)]: true,\n [activeStyles[use](this.theme)]: active,\n [sizeClass]: true,\n [styles.focus(this.theme)]: isFocused,\n [styles.checked(this.theme)]: checked,\n [styles.checkedFocused(this.theme)]: checked && isFocused,\n [styles.disabled(this.theme)]: disabled \|\| loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled \|\| loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true,\n [styles.wrapArrowLeft()]: arrow === 'left',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused \|\| isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow) {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning,\n [styles.arrowError(this.theme)]: !checked && error,\n [styles.arrowFocus(this.theme)]: !checked && isFocused,\n [styles.arrowLeft()]: arrow === 'left',\n })}\n >\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperTop)} />\n <div className={cx(globalClasses.arrowHelper, globalClasses.arrowHelperBottom)} />\n </div>\n );\n }\n\n // Force disable all props and features, that cannot be use with Link\n if (isLink) {\n rootProps.className = cx({\n [styles.root(this.theme)]: true,\n [sizeClass]: true,\n [styles.link(this.theme)]: true,\n [styles.linkFocus(this.theme)]: isFocused,\n [styles.linkDisabled(this.theme)]: disabled \|\| loading,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active \|\| checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span className={cx({ [styles.visibilityHidden()]: !!loadingNode })}>{children}</span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), { [styles.sizeLargeIE11(this.theme)]: isIE11 \|\| isEdge });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), { [styles.sizeMediumIE11(this.theme)]: isIE11 \|\| isEdge });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), { [styles.sizeSmallIE11(this.theme)]: isIE11 \|\| isEdge });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n if (!this.props.disabled && !this.props.disableFocus) {\n // focus event fires before keyDown eventlistener\n // so we should check tabPressed in async way\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n this.props.onFocus?.(e);\n }\n };\n\n private handleBlur = (e: React.FocusEvent<HTMLButtonElement>) => {\n this.setState({ focusedByTab: false });\n if (!this.props.disabled && !this.props.disableFocus) {\n this.props.onBlur?.(e);\n }\n };\n\n private _ref = (node: HTMLButtonElement \| null) => {\n this.node = node;\n };\n}\n\nexport const isButton = isReactUIComponent<ButtonProps>('Button');\n"]}
1	+ {"version":3,"sources":["Button.tsx"],"names":["ButtonDataTids","root","Button","rootNode","getProps","defaultProps","state","focusedByTab","node","handleFocus","e","props","disabled","disableFocus","requestAnimationFrame","keyListener","isTabPressed","setState","onFocus","handleBlur","onBlur","_ref","componentDidMount","autoFocus","focus","getDerivedStateFromProps","loading","blur","render","theme","ThemeFactory","create","renderMain","corners","active","borderless","checked","error","warning","arrow","narrow","icon","_noPadding","_noRightPadding","visuallyFocused","align","onMouseEnter","onMouseLeave","onMouseOver","onKeyDown","onClick","width","children","use","type","sizeClass","getSizeClassName","isFocused","isLink","isTheme2022","rootProps","className","styles","simulatedPress","activeStyles","checkedFocused","checkedDisabled","noPadding","noRightPadding","style","textAlign","tabIndex","title","wrapProps","wrap","wrapArrow","wrapArrowLeft","getSizeWrapClassName","innerShadowNode","globalClasses","innerShadow","outlineNode","outline","outlineWarning","outlineError","outlineLink","outlineLinkWarning","outlineLinkError","loadingNode","getLoadingSpinner","iconNode","getSizeIconClassName","iconNoRightMargin","iconLink","arrowNode","arrowWarning","arrowError","arrowFocus","arrowLeft","arrowHelper","arrowHelperTop","arrowHelperBottom","sizeIcon","btnIconSizeSmall","size","btnIconSizeMedium","btnIconSizeLarge","getRootWithArrowIconClassName","arrowIcon","parseInt","getArrowIconRootClassName","getLinkClassName","Boolean","Object","assign","wrapLink","undefined","setRootNode","caption","captionTranslated","captionLink","captionDisabled","text","visibilityHidden","sizeLarge","sizeLargeIE11","isIE11","isEdge","sizeLargeWithIcon","sizeMedium","sizeMediumIE11","sizeMediumWithIcon","sizeSmall","sizeSmallIE11","sizeSmallWithIcon","iconLarge","iconMedium","iconSmall","wrapLarge","wrapMedium","wrapSmall","focused","isBorderBottom","btnLinkLineBorderBottomWidth","link","linkFocus","linkDisabled","linkLine","linkLineFocus","linkLineDisabled","withArrowIconRightSmall","withArrowIconRightMedium","withArrowIconRightLarge","withArrowIconLeftSmall","withArrowIconLeftMedium","withArrowIconLeftLarge","arrowIconRoot","arrowIconRootSmall","arrowIconRootMedium","arrowIconRootLarge","arrowIconLeft","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, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { hasFakeUserAction } from '../../internal/FakeUserActions/hasFakeUserAction';\nimport { ArrowALeftIcon, ArrowARightIcon } from '../../internal/icons/16px';\nimport { getThemeName } from '../../lib/theming/ThemeHelpers';\n\nimport { styles, activeStyles, globalClasses } from './Button.styles';\n\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\nexport type ButtonType = 'button' \| 'submit' \| 'reset';\nexport type ButtonUse = 'default' \| 'primary' \| 'success' \| 'danger' \| 'pay' \| 'link' \| 'text' \| 'backless';\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 Убирает фон у кнопки.\n /\n backless?: boolean;\n\n /\n @ignore\n /\n checked?: boolean;\n\n children?: React.ReactNode;\n\n /* @ignore /\n corners?: React.CSSProperties;\n\n /\n Отключенное состояние кнопки.\n /\n disabled?: boolean;\n\n /* @ignore /\n disableFocus?: boolean;\n\n /\n Состояние валидации при ошибке.\n /\n error?: boolean;\n\n /\n Иконка слева от текста кнопки.\n /\n icon?: React.ReactElement<any>;\n\n /\n Переводит кнопку в состояние загрузки.\n /\n loading?: boolean;\n\n /\n Сужает кнопку.\n /\n narrow?: boolean;\n\n /\n HTML-событие `onblur`.\n /\n onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onclick`.\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onfocus`.\n /\n onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `keydown`.\n /\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onmouseenter`.\n /\n onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `mouseleave`.\n /\n onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n HTML-событие `onmouseover`.\n /\n onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;\n\n /\n Задаёт размер кнопки.\n \n Допустимые значения: `\"small\"`, `\"medium\"`, `\"large\"`.\n /\n size?: ButtonSize;\n\n /\n HTML-атрибут `type`.\n /\n type?: ButtonType;\n\n /\n HTML-атрибут `title`.\n /\n title?: string;\n\n /\n Стиль кнопки.\n \n Допустимые значения: `\"default\"`, `\"primary\"`, `\"success\"`, `\"danger\"`, `\"pay\"`, `\"link\"`.\n /\n use?: ButtonUse;\n\n /* @ignore /\n visuallyFocused?: boolean;\n\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n\n /\n CSS-свойство `width`.\n /\n width?: number \| string;\n theme?: ThemeIn;\n}\n\nexport interface ButtonState {\n focusedByTab: boolean;\n}\n\nexport const ButtonDataTids = {\n root: 'Button__root',\n} as const;\n\ntype DefaultProps = Required<Pick<ButtonProps, 'use' \| 'size' \| 'type'>>;\n\n@rootNode\nexport class Button extends React.Component<ButtonProps, ButtonState> {\n public static __KONTUR_REACT_UI__ = 'Button';\n public static __BUTTON__ = true;\n\n public static defaultProps: DefaultProps = {\n use: 'default',\n size: 'small',\n type: 'button',\n };\n\n private getProps = createPropsGetter(Button.defaultProps);\n\n public state = {\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private node: HTMLButtonElement \| null = null;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n public static getDerivedStateFromProps(props: ButtonProps) {\n if (props.loading \|\| props.disabled) {\n return { focusedByTab: false };\n }\n return null;\n }\n\n /\n @public\n /\n public focus() {\n this.node?.focus();\n }\n\n /\n @public\n */\n public blur() {\n this.node?.blur();\n }\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const {\n corners,\n active,\n disabled,\n borderless,\n checked,\n error,\n warning,\n loading,\n arrow,\n narrow,\n icon,\n _noPadding,\n _noRightPadding,\n visuallyFocused,\n align,\n disableFocus,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n onKeyDown,\n onClick,\n width,\n children,\n } = this.props;\n const { use, type } = this.getProps();\n const sizeClass = this.getSizeClassName();\n\n const isFocused = this.state.focusedByTab \|\| visuallyFocused \|\| hasFakeUserAction(this, 'focus');\n const isLink = use === 'link';\n const isTheme2022 = getThemeName(this.theme) === 'THEME_2022';\n const rootProps = {\n // By default the type attribute is 'submit'. IE8 will fire a click event\n // on this button if somewhere on the page user presses Enter while some\n // input is focused. So we set type to 'button' by default.\n type,\n className: cx({\n [styles.root(this.theme)]: true,\n [styles.simulatedPress()]: !isTheme2022,\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 && !disabled,\n [styles.checkedFocused(this.theme)]: checked && isFocused && !disabled,\n [styles.disabled(this.theme)]: disabled \|\| loading,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n [styles.borderless()]: borderless && !disabled && !loading && !checked && !isFocused && !active,\n [styles.narrow()]: narrow,\n [styles.noPadding()]: _noPadding,\n [styles.noRightPadding()]: _noRightPadding,\n }),\n style: {\n textAlign: align,\n ...corners,\n },\n disabled: disabled \|\| loading,\n onClick,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n onKeyDown,\n onMouseEnter,\n onMouseLeave,\n onMouseOver,\n tabIndex: disableFocus ? -1 : 0,\n title: this.props.title,\n };\n\n const wrapProps = {\n className: cx({\n [styles.wrap(this.theme)]: true,\n [styles.wrapArrow()]: arrow === true && use !== 'text' && use !== 'backless',\n [styles.wrapArrowLeft()]: arrow === 'left' && use !== 'text' && use !== 'backless',\n [this.getSizeWrapClassName()]: true,\n }),\n style: {\n width,\n },\n };\n\n const innerShadowNode = <div className={globalClasses.innerShadow} />;\n\n let outlineNode = null;\n if (!isFocused \|\| isLink) {\n outlineNode = (\n <div\n className={cx(styles.outline(), {\n [styles.outlineWarning(this.theme)]: warning,\n [styles.outlineError(this.theme)]: error,\n [styles.outlineLink()]: isLink,\n [styles.outlineLinkWarning(this.theme)]: isLink && warning,\n [styles.outlineLinkError(this.theme)]: isLink && error,\n })}\n />\n );\n }\n\n let loadingNode = null;\n if (loading && !icon) {\n loadingNode = <div className={styles.loading()}>{this.getLoadingSpinner()}</div>;\n }\n\n let iconNode = null;\n if (icon) {\n iconNode = (\n <span\n className={cx(styles.icon(), this.getSizeIconClassName(), {\n [styles.iconNoRightMargin()]: !children,\n [styles.iconLink(this.theme)]: isLink,\n })}\n >\n {loading ? this.getLoadingSpinner() : icon}\n </span>\n );\n }\n\n let arrowNode = null;\n if (arrow && use !== 'text' && use !== 'backless') {\n arrowNode = (\n <div\n className={cx({\n [styles.arrow()]: true,\n [styles.arrowWarning(this.theme)]: !checked && warning && !disabled,\n [styles.arrowError(this.theme)]: !checked && error && !disabled,\n [styles.arrowFocus(this.theme)]: !checked && isFocused && !disabled,\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 if (isTheme2022) {\n let sizeIcon = this.theme.btnIconSizeSmall;\n if (this.props.size === 'medium') {\n sizeIcon = this.theme.btnIconSizeMedium;\n } else if (this.props.size === 'large') {\n sizeIcon = this.theme.btnIconSizeLarge;\n }\n rootProps.className = cx(rootProps.className, this.getRootWithArrowIconClassName());\n const arrowIcon =\n arrow === 'left' ? (\n <ArrowALeftIcon size={parseInt(sizeIcon)} />\n ) : (\n <ArrowARightIcon size={parseInt(sizeIcon)} />\n );\n arrowNode = <div className={this.getArrowIconRootClassName()}>{arrowIcon}</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 [this.getLinkClassName(isFocused, Boolean(disabled \|\| loading))]: true,\n });\n Object.assign(wrapProps, {\n className: cx(styles.wrap(this.theme), styles.wrapLink()),\n style: { width: wrapProps.style.width },\n });\n rootProps.style.textAlign = undefined;\n arrowNode = null;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <span {...wrapProps}>\n <button data-tid={ButtonDataTids.root} ref={this._ref} {...rootProps}>\n {innerShadowNode}\n {outlineNode}\n {loadingNode}\n {arrowNode}\n <div\n className={cx(styles.caption(), globalClasses.caption, {\n [styles.captionTranslated()]: active \|\| checked,\n [styles.captionLink()]: isLink,\n [styles.captionDisabled()]: !checked && disabled,\n })}\n >\n {iconNode}\n <span\n className={cx(globalClasses.text, {\n [styles.visibilityHidden()]: !!loadingNode,\n })}\n >\n {children}\n </span>\n </div>\n </button>\n </span>\n </CommonWrapper>\n );\n }\n\n private getLoadingSpinner() {\n return <Spinner caption={null} dimmed type=\"mini\" />;\n }\n\n private getSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return cx(styles.sizeLarge(this.theme), {\n [styles.sizeLargeIE11(this.theme)]: isIE11 \|\| isEdge,\n [styles.sizeLargeWithIcon(this.theme)]: !!this.props.icon,\n });\n case 'medium':\n return cx(styles.sizeMedium(this.theme), {\n [styles.sizeMediumIE11(this.theme)]: isIE11 \|\| isEdge,\n [styles.sizeMediumWithIcon(this.theme)]: !!this.props.icon,\n });\n case 'small':\n default:\n return cx(styles.sizeSmall(this.theme), {\n [styles.sizeSmallIE11(this.theme)]: isIE11 \|\| isEdge,\n [styles.sizeSmallWithIcon(this.theme)]: !!this.props.icon,\n });\n }\n }\n\n private getSizeIconClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.iconLarge(this.theme);\n case 'medium':\n return styles.iconMedium(this.theme);\n case 'small':\n default:\n return styles.iconSmall(this.theme);\n }\n }\n\n private getSizeWrapClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.wrapLarge(this.theme);\n case 'medium':\n return styles.wrapMedium(this.theme);\n case 'small':\n default:\n return styles.wrapSmall(this.theme);\n }\n }\n\n private getLinkClassName(focused: boolean, disabled: boolean): string {\n const isBorderBottom = parseInt(this.theme.btnLinkLineBorderBottomWidth) > 0;\n\n return !isBorderBottom\n ? cx(styles.link(this.theme), {\n [styles.linkFocus(this.theme)]: focused,\n [styles.linkDisabled(this.theme)]: disabled,\n })\n : cx(styles.link(this.theme), styles.linkLine(this.theme), {\n [styles.linkLineFocus(this.theme)]: focused,\n [styles.linkLineDisabled(this.theme)]: disabled,\n });\n }\n\n private getRootWithArrowIconClassName() {\n const { arrow, size } = this.props;\n return cx({\n [styles.withArrowIconRightSmall(this.theme)]: arrow !== 'left' && size === 'small',\n [styles.withArrowIconRightMedium(this.theme)]: arrow !== 'left' && size === 'medium',\n [styles.withArrowIconRightLarge(this.theme)]: arrow !== 'left' && size === 'large',\n [styles.withArrowIconLeftSmall(this.theme)]: arrow === 'left' && size === 'small',\n [styles.withArrowIconLeftMedium(this.theme)]: arrow === 'left' && size === 'medium',\n [styles.withArrowIconLeftLarge(this.theme)]: arrow === 'left' && size === 'large',\n });\n }\n\n private getArrowIconRootClassName() {\n const { arrow, size } = this.props;\n return cx(styles.arrowIconRoot(), {\n [styles.arrowIconRootSmall(this.theme)]: size === 'small',\n [styles.arrowIconRootMedium(this.theme)]: size === 'medium',\n [styles.arrowIconRootLarge(this.theme)]: size === 'large',\n [styles.arrowIconLeft()]: arrow === 'left',\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.mixins.js CHANGED Viewed

@@ -59,8 +59,7 @@ borderBottomColor,
 borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover:enabled {\n      background-color: ", ";\n      background-image: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])),
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
@@ -69,7 +68,6 @@ borderWidth)
   borderWidth, borderColor);
 };exports.buttonHoverMixin = buttonHoverMixin;
 var buttonActiveMixin = function buttonActiveMixin(
@@ -80,7 +78,9 @@ borderTopColor,
 borderWidth,
 arrowBgImage)
 {
-  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", ";\n    }\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &,\n    &:hover {\n      background-image: none;\n      background-color: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])),
   btnBackground,
   borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "",
@@ -97,6 +97,7 @@ arrowBgImage)
 };exports.buttonActiveMixin = buttonActiveMixin;
 var buttonSizeMixin = function buttonSizeMixin(

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"+ZAAA;AACA;;AAEA,yC;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AACpBC,QADoB;AAEpBC,QAFoB;AAGpBC,QAHoB;AAIpBC,sBAJoB;AAKpBC,gBALoB;AAMT,KADXA,gBACW,cADXA,gBACW,GADQ,CACR;AACX,MAAIC,UAAU,GAAGJ,QAAjB;AACA,MAAIK,aAAa,GAAGL,QAApB;AACA,MAAMM,MAAM,GAAGC,QAAQ,CAACL,sBAAD,CAAR,IAAoC,CAAnD;;AAEA,MAAMM,OAAO,GAAG,SAAVA,OAAU,CAACC,GAAD,EAAcC,MAAd,EAA8BJ,MAA9B,EAAiD;AAC/D,WAAO,CAAC,+BAAMG,GAAN,OAAc,CAACH,MAAf,CAAD,EAA2B,+BAAMI,MAAN,OAAiBJ,MAAjB,CAA3B,CAAP;AACD,GAFD;;AAIA,MAAIP,QAAQ,KAAK,MAAb,IAAuBO,MAA3B,EAAmC;AACHE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BC,MAA5B,CADJ,CAChCF,UADgC,eACpBC,aADoB;AAElC;AACD,MAAIF,gBAAgB,IAAIG,MAAxB,EAAgC;AACAE,IAAAA,OAAO,CAACJ,UAAD,EAAaC,aAAb,EAA4BF,gBAA5B,CADP,CAC7BC,UAD6B,gBACjBC,aADiB;AAE/B;;AAED,SAAUD,UAAV,SAAwBH,QAAxB,SAAoCI,aAApC;AACD,CAvBD;;AAyBO,IAAMM,cAAc,GAAG,SAAjBA,cAAiB;AAC5BC,aAD4B;AAE5BC,kBAF4B;AAG5BC,gBAH4B;AAI5BC,KAJ4B;AAK5BC,WAL4B;AAM5BC,iBAN4B;AAO5BC,WAP4B;AAQzB;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOM,YAAP;AACsBD,EAAAA,WAAW,eAAeP,aADhD;AAEsBO,EAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,eAFjC;AAGWC,EAAAA,KAHX;AAIsBG,EAAAA,WAJtB,EAIqCF,WAJrC,EAImDC,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,KAJpE;;AAMKI,wBAAcC,WANnB;AAOkBJ,EAAAA,WAPlB,EAOuCF,WAPvC;;;AAUD,CApBM,C;;AAsBA,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAmB;AAC9BX,aAD8B;AAE9BC,kBAF8B;AAG9BC,gBAH8B;AAI9BE,WAJ8B;AAK9BC,iBAL8B;AAM9BC,WAN8B;AAO3B;AACH,MAAMC,WAAW,GAAGN,kBAAkB,KAAKC,gBAA3C;AACA,aAAOM,YAAP~~;;AAEwBD~~,EAAAA,WAAW,eAAeP,~~aAFlD~~;~~AAGwBO~~,EAAAA,WAAW,wBAAsBN,kBAAtB,UAA6CC,gBAA7C,~~eAHnC~~;~~AAIwBI~~,EAAAA,~~WAJxB~~,~~EAIuCF~~,~~WAJvC~~,~~EAIqDC~~,iBAAiB,YAAUC,WAAV,aAA6BD,iBAA7B,~~KAJtE~~;;~~AAMOI~~,wBAAcC,~~WANrB~~;~~AAOoBJ~~,EAAAA,~~WAPpB~~,~~EAOuCF~~,~~WAPvC;;;;AAWD~~,~~CApBM~~,C;;~~AAsBA~~,IAAMQ,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BZ,aAD+B;AAE/Ba,SAF+B;AAG/BT,WAH+B;AAI/BU,cAJ+B;AAK/BR,WAL+B;AAM/BS,YAN+B;AAO5B;AACH,aAAOP,YAAP~~;;AAEsBR~~,EAAAA,~~aAFtB~~;~~AAGsBM~~,EAAAA,~~WAHtB~~,~~EAGqCF~~,~~WAHrC~~,~~EAGmDU~~,cAAc,aAAWR,WAAX,aAA8BQ,cAA9B,~~KAHjE~~;;~~AAKKL~~,wBAAcO,~~WALnB~~;~~AAMkBH~~,EAAAA,~~SANlB~~;;;~~AASKJ~~,wBAAcC,~~WATnB~~;~~AAUkBJ~~,EAAAA,~~WAVlB~~,~~EAUqCF~~,~~WAVrC~~;;~~AAYQK~~,wBAAcQ,~~cAZtB~~;~~AAa0BF~~,EAAAA,~~YAb1B;;;;AAiBD~~,~~CAzBM~~,C;;~~AA2BA~~,IAAMG,eAAe,GAAG,SAAlBA,eAAkB;AAC7B/B,QAD6B;AAE7BgC,UAF6B;AAG7B9B,QAH6B;AAI7BD,QAJ6B;AAK7BE,sBAL6B;AAM1B;AACH,aAAOkB,YAAP;AACerB,EAAAA,QADf;;AAGaD,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,CAH1B;AAIiB6B,EAAAA,UAJjB;;AAMD,CAbM,C;;AAeA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB;AACjCjC,QADiC;AAEjCE,QAFiC;AAGjCD,QAHiC;AAIjCE,sBAJiC;AAK9B;AACH,aAAOkB,YAAP;AACatB,EAAAA,aAAa,CAACC,QAAD,EAAWC,QAAX,EAAqBC,QAArB,EAA+BC,sBAA/B,EAAuD,CAAvD,CAD1B;;;AAID,CAVM,C;;AAYA,IAAM+B,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BC,UAD+B;AAE/BC,YAF+B;AAG/BC,YAH+B;AAI/BC,UAJ+B;AAK5B;AACH,aAAOjB,YAAP;AACKC,wBAAcC,WADnB;AAEQD,wBAAcQ,cAFtB;AAG2BK,EAAAA,UAH3B,EAGyCA,UAHzC,EAG2DG,UAH3D,EAG0ED,YAH1E,EAGgGD,YAHhG;;;AAMQd,wBAAciB,iBANtB;AAO2BJ,EAAAA,UAP3B,EAO0CA,UAP1C,EAO4DG,UAP5D,EAO2ED,YAP3E,EAOiGD,YAPjG;;;;;;AAaaD,EAAAA,UAbb;AAceA,EAAAA,UAdf;AAecA,EAAAA,UAfd;;AAiBQb,wBAAciB,iBAjBtB;AAkBgBJ,EAAAA,UAlBhB;;;;AAsBD,CA5BM,C","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n fontSize: string,\n paddingY: string,\n paddingX: string,\n fontFamilyCompensation: string,\n additionalOffset = 0,\n): string => {\n let paddingTop = paddingY;\n let paddingBottom = paddingY;\n const offset = parseInt(fontFamilyCompensation) \|\| 0;\n\n const shiftUp = (top: string, bottom: string, offset: number) => {\n return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n };\n\n if (fontSize === '16px' && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n }\n if (additionalOffset && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n }\n\n return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n color: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n color: ${color};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n }\n `;\n};\n\nexport const buttonHoverMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n ~~&:hover:enabled {\n~~ background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n ~~}\n~~ }\n `;\n};\n\nexport const buttonActiveMixin = (\n btnBackground: string,\n btnShadow: string,\n borderColor: string,\n borderTopColor: string,\n borderWidth: string,\n arrowBgImage: string,\n) => {\n return css`\n background-image: none;\n background-color: ${btnBackground};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n .${globalClasses.innerShadow} {\n box-shadow: ${btnShadow};\n }\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n &.${globalClasses.arrowHelperTop} {\n background-image: ${arrowBgImage};\n }\n }\n `;\n};\n\nexport const buttonSizeMixin = (\n fontSize: string,\n lineHeight: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n font-size: ${fontSize};\n box-sizing: border-box;\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n line-height: ${lineHeight};\n `;\n};\n\nexport const buttonSizeMixinIE11 = (\n fontSize: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n line-height: normal;\n `;\n};\n\nexport const arrowOutlineMixin = (\n insetWidth: string,\n outlineColor: string,\n outlineWidth: string,\n insetColor: string,\n) => {\n return css`\n .${globalClasses.arrowHelper} {\n &.${globalClasses.arrowHelperTop} {\n box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n &.${globalClasses.arrowHelperBottom} {\n box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n // don't hide inner outline\n // and keep the middle-line fix\n &:before {\n top: ${insetWidth};\n right: ${insetWidth};\n left: ${insetWidth};\n }\n &.${globalClasses.arrowHelperBottom}:before {\n bottom: ${insetWidth};\n }\n }\n `;\n};\n"]}
1	+ {"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n fontSize: string,\n paddingY: string,\n paddingX: string,\n fontFamilyCompensation: string,\n additionalOffset = 0,\n): string => {\n let paddingTop = paddingY;\n let paddingBottom = paddingY;\n const offset = parseInt(fontFamilyCompensation) \|\| 0;\n\n const shiftUp = (top: string, bottom: string, offset: number) => {\n return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n };\n\n if (fontSize === '16px' && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n }\n if (additionalOffset && offset) {\n [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n }\n\n return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n color: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n color: ${color};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n }\n `;\n};\n\nexport const buttonHoverMixin = (\n btnBackground: string,\n btnBackgroundStart: string,\n btnBackgroundEnd: string,\n borderColor: string,\n borderBottomColor: string,\n borderWidth: string,\n) => {\n const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n return css`\n background-color: ${hasGradient ? `initial` : btnBackground};\n background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n }\n `;\n};\n\nexport const buttonActiveMixin = (\n btnBackground: string,\n btnShadow: string,\n borderColor: string,\n borderTopColor: string,\n borderWidth: string,\n arrowBgImage: string,\n) => {\n return css`\n &,\n &:hover {\n background-image: none;\n background-color: ${btnBackground};\n box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n .${globalClasses.innerShadow} {\n box-shadow: ${btnShadow};\n }\n\n .${globalClasses.arrowHelper} {\n box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n &.${globalClasses.arrowHelperTop} {\n background-image: ${arrowBgImage};\n }\n }\n }\n `;\n};\n\nexport const buttonSizeMixin = (\n fontSize: string,\n lineHeight: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n font-size: ${fontSize};\n box-sizing: border-box;\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n line-height: ${lineHeight};\n `;\n};\n\nexport const buttonSizeMixinIE11 = (\n fontSize: string,\n paddingX: string,\n paddingY: string,\n fontFamilyCompensation: string,\n) => {\n return css`\n padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n line-height: normal;\n `;\n};\n\nexport const arrowOutlineMixin = (\n insetWidth: string,\n outlineColor: string,\n outlineWidth: string,\n insetColor: string,\n) => {\n return css`\n .${globalClasses.arrowHelper} {\n &.${globalClasses.arrowHelperTop} {\n box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n &.${globalClasses.arrowHelperBottom} {\n box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n }\n\n // don't hide inner outline\n // and keep the middle-line fix\n &:before {\n top: ${insetWidth};\n right: ${insetWidth};\n left: ${insetWidth};\n }\n &.${globalClasses.arrowHelperBottom}:before {\n bottom: ${insetWidth};\n }\n }\n `;\n};\n"]}

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

@@ -4,10 +4,18 @@ export declare const globalClasses: {
     arrowHelperTop: string;
     arrowHelperBottom: string;
     caption: string;
+    text: string;
     innerShadow: string;
 };
 export declare const styles: {
     root(t: Theme): string;
+    withArrowIconRightSmall(t: Theme): string;
+    withArrowIconRightMedium(t: Theme): string;
+    withArrowIconRightLarge(t: Theme): string;
+    withArrowIconLeftSmall(t: Theme): string;
+    withArrowIconLeftMedium(t: Theme): string;
+    withArrowIconLeftLarge(t: Theme): string;
+    simulatedPress(): string;
     outline(): string;
     outlineWarning(t: Theme): string;
     outlineError(t: Theme): string;
@@ -20,9 +28,15 @@ export declare const styles: {
     sizeMediumIE11(t: Theme): string;
     sizeLarge(t: Theme): string;
     sizeLargeIE11(t: Theme): string;
+    sizeSmallWithIcon(t: Theme): string;
+    sizeMediumWithIcon(t: Theme): string;
+    sizeLargeWithIcon(t: Theme): string;
     link(t: Theme): string;
     linkFocus(t: Theme): string;
     linkDisabled(t: Theme): string;
+    linkLine(t: Theme): string;
+    linkLineFocus(t: Theme): string;
+    linkLineDisabled(t: Theme): string;
     focus(t: Theme): string;
     disabled(t: Theme): string;
     arrowWarning(t: Theme): string;
@@ -30,11 +44,18 @@ export declare const styles: {
     arrowFocus(t: Theme): string;
     arrow(): string;
     arrowLeft(): string;
+    arrowIconRoot(): string;
+    arrowIconRootSmall(t: Theme): string;
+    arrowIconRootMedium(t: Theme): string;
+    arrowIconRootLarge(t: Theme): string;
+    arrowIconLeft(): string;
     default(t: Theme): string;
     primary(t: Theme): string;
     success(t: Theme): string;
     danger(t: Theme): string;
     pay(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
     checked(t: Theme): string;
     checkedFocused(t: Theme): string;
     checkedDisabled(t: Theme): string;
@@ -69,4 +90,6 @@ export declare const activeStyles: {
     danger(t: Theme): string;
     pay(t: Theme): string;
     link(t: Theme): string;
+    text(t: Theme): string;
+    backless(t: Theme): string;
 };