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

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 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)
+
+
+### Bug Fixes
+
+* **Hint,Tooltip,Tab:** process children with imperative handles correctly ([#2939](https://github.com/skbkontur/retail-ui/issues/2939)) ([7958543](https://github.com/skbkontur/retail-ui/commit/7958543d80982f5cce9831d19e6feaa9f15c1cc1))
+* **ZIndex:** update zIndex style if priority/delta props are updated ([#2942](https://github.com/skbkontur/retail-ui/issues/2942)) ([93a667a](https://github.com/skbkontur/retail-ui/commit/93a667a9619a280b0ab0e050a61a9de7a9f7e0a9))
+
+
+
+
+
+## [4.5.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.5.0...@skbkontur/react-ui@4.5.1) (2022-08-29)
+
+
+### Bug Fixes
+
+* **Radio:** fix text gap when radio is inside table ([#2983](https://github.com/skbkontur/retail-ui/issues/2983)) ([e546e4d](https://github.com/skbkontur/retail-ui/commit/e546e4d69b0896e36319e636310f988ebb854106))
+
+
+
+
+
 # [4.5.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.4.0...@skbkontur/react-ui@4.5.0) (2022-08-24)
 
 

package/LICENSE

@@ -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/README.md

@@ -54,7 +54,7 @@ children. Ранее для этого использовался метод fin
 Теперь получение DOM-ноды реализовано в библиотеке через ref, из-за чего появились некоторые
 требования к компонентам, передаваемым в Hint, Tooltip, Popup или Tab:
 
-- при передаче функциональных компонентов, они должны использовать `React.ForwardRef`;
+- при передаче функциональных компонентов, они должны использовать `React.ForwardRef`:
 
 ```js static
 import { Hint } from '@skbkontur/react-ui';
@@ -63,7 +63,7 @@ const CustomFunctionComponent = React.forwardRef(
   (props, ref) => <div ref={ref}>children text</div>
 );
 
-export const withFunctionChildren = () => (
+export const WithFunctionChildren = () => (
   <React.StrictMode>
     <Hint pos="top" text="Something will never be changed" manual opened>
       <CustomFunctionComponent />
@@ -72,7 +72,30 @@ export const withFunctionChildren = () => (
 );
 ```
 
-- при передаче классовых компонентов, их инстанс должен реализовывать метод `getRootNode`, возвращающий DOM-ноду.
+- при использовании хука `useImperativeHandle`, возвращаемый объект должен реализовывать метод `getRootNode`, возвращающий DOM-ноду:
+
+```js static
+import { Hint } from '@skbkontur/react-ui';
+
+const ImperativeHandleComponent = React.forwardRef(function FN(_, ref) {
+  const rootNode = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => ({
+    foo: 'bar',
+    getRootNode: () => rootNode.current,
+  }));
+  return <div ref={rootNode}>children text</div>;
+});
+
+export const WithImperativeHandleChildren = () => (
+  <React.StrictMode>
+    <Hint pos="top" text="Something will never be changed" manual opened>
+      <ImperativeHandleComponent />
+    </Hint>
+  </React.StrictMode>
+);
+```
+
+- при передаче классовых компонентов, их инстанс должен реализовывать метод `getRootNode`, возвращающий DOM-ноду:
 
 ```js static
 import { Hint } from '@skbkontur/react-ui';
@@ -89,7 +112,7 @@ class CustomClassComponent extends React.Component {
   }
 }
 
-export const withClassChildren = () => (
+export const WithClassChildren = () => (
   <React.StrictMode>
     <Hint pos="top" text="Something will never be changed" manual opened>
       <CustomClassComponent />

package/cjs/components/Autocomplete/Autocomplete.md

@@ -1,7 +1,21 @@
 ```jsx harmony
-let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
 
 const [value, setValue] = React.useState('Kappa');
 
 <Autocomplete source={items} value={value} onValueChange={setValue} />;
 ```
+
+Очистить значение в `Autocomplete` можно только с помощью пустой строки
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('Kappa');
+
+<Group>
+  <Autocomplete source={items} value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue('')}>Очистить</Button>
+</Group>
+```

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

@@ -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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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":"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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    &: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"]}
+{"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"]}