@skbkontur/react-ui 3.6.0 → 3.8.0

package/cjs/components/Tabs/Tab.js

@@ -4,7 +4,7 @@ var _invariant = _interopRequireDefault(require("invariant"));
 
 var _ResizeDetector = require("../../internal/ResizeDetector");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -129,9 +129,6 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
 
     theme = void 0;_this.
     tabComponent = null;_this.
-    isArrowKeyPressed = false;_this.
-
-
 
 
 
@@ -230,7 +227,6 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
 
 
 
-
 
 
     getId = function () {return _this.props.id || _this.props.href;};_this.
@@ -239,10 +235,6 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       _this.tabComponent = instance;
     };_this.
 
-    handleKeyDownGlobal = function (e) {
-      _this.isArrowKeyPressed = (0, _identifiers.isKeyArrow)(e);
-    };_this.
-
     getTabInstance = function () {return (0, _assertThisInitialized2.default)(_this);};_this.
 
     switchTab = function (event) {
@@ -266,8 +258,6 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       }
     };_this.
 
-    handleMouseDown = function () {return _this.isArrowKeyPressed = false;};_this.
-
     handleKeyDown = function (e) {
       if (_this.props.disabled) {
         return;
@@ -299,7 +289,7 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       // focus event fires before keyDown eventlistener
       // so we should check focusKeyPressed in async way
       requestAnimationFrame(function () {
-        if (_tabListener.tabListener.isTabPressed || _this.isArrowKeyPressed) {
+        if (_keyListener.keyListener.isTabPressed || _keyListener.keyListener.isArrowPressed) {
           _this.setState({ focusedByKeyboard: true });
         }
       });
@@ -311,4 +301,4 @@ Tab = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab
       }
 
       _this.setState({ focusedByKeyboard: false });
-    };return _this;}var _proto = Tab.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {(0, _invariant.default)(this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');};_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}window.addEventListener('keydown', this.handleKeyDownGlobal);};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}window.removeEventListener('keydown', this.handleKeyDownGlobal);};_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.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,_this$props$component = _this$props.component,Component = _this$props$component === void 0 ? Tab.defaultProps.component : _this$props$component,href = _this$props.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(Component, { className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.root(this.theme)] = true, _cx[_Tab.styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onMouseDown: this.handleMouseDown, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.styles.focus(this.theme), _Tab.globalClasses.focus) })));};return Tab;}(_react.default.Component);exports.Tab = Tab;Tab.__KONTUR_REACT_UI__ = 'Tab';Tab.contextType = _TabsContext.TabsContext;Tab.propTypes = { children: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string.isRequired, onClick: _propTypes.default.func, onKeyDown: _propTypes.default.func };Tab.defaultProps = { component: 'a', href: '' };
+    };return _this;}var _proto = Tab.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {(0, _invariant.default)(this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');};_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_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.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,_this$props$component = _this$props.component,Component = _this$props$component === void 0 ? Tab.defaultProps.component : _this$props$component,href = _this$props.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(Component, { className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.root(this.theme)] = true, _cx[_Tab.styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.styles.focus(this.theme), _Tab.globalClasses.focus) })));};return Tab;}(_react.default.Component);exports.Tab = Tab;Tab.__KONTUR_REACT_UI__ = 'Tab';Tab.contextType = _TabsContext.TabsContext;Tab.propTypes = { children: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string.isRequired, onClick: _propTypes.default.func, onKeyDown: _propTypes.default.func };Tab.defaultProps = { component: 'a', href: '' };

package/cjs/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.tsx"],"names":["Tab","context","state","focusedByKeyboard","theme","tabComponent","isArrowKeyPressed","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","handleKeyDownGlobal","e","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleMouseDown","handleKeyDown","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","tabListener","isTabPressed","setState","handleBlur","UNSAFE_componentWillMount","TabsContextDefaultValue","componentDidMount","addTab","window","addEventListener","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","removeEventListener","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","styles","root","active","focus","globalClasses","React","__KONTUR_REACT_UI__","contextType","TabsContext","propTypes","PropTypes","node","bool","string","isRequired","func"],"mappings":"6VAAA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaA,G;;;;AAIJC,IAAAA,O,GAA2B,MAAKA,O;;;;;;;;;;;;;;;AAehCC,IAAAA,K,GAAkB;AACvBC,MAAAA,iBAAiB,EAAE,KADI,E;;;AAIjBC,IAAAA,K;AACAC,IAAAA,Y,GAAqD,I;AACrDC,IAAAA,iB,GAAoB,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDrBC,IAAAA,iB,GAAoB,oBAAM,MAAKF,YAAX,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDnBG,IAAAA,K,GAAQ,oBAAM,MAAKC,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAlC,E;;AAERC,IAAAA,e,GAAkB,UAACC,QAAD,EAAuC;AAC/D,YAAKR,YAAL,GAAoBQ,QAApB;AACD,K;;AAEOC,IAAAA,mB,GAAsB,UAACC,CAAD,EAAsB;AAClD,YAAKT,iBAAL,GAAyB,6BAAWS,CAAX,CAAzB;AACD,K;;AAEOC,IAAAA,c,GAAiB,iE;;AAEjBC,IAAAA,S,GAAY,UAACC,KAAD,EAA0C;AAC5D,UAAI,MAAKT,KAAL,CAAWU,QAAf,EAAyB;AACvBD,QAAAA,KAAK,CAACE,cAAN;AACA;AACD;;AAED,UAAMV,EAAE,GAAG,MAAKD,KAAL,CAAWC,EAAX,IAAiB,MAAKD,KAAL,CAAWE,IAAvC;AACA,UAAI,MAAKF,KAAL,CAAWY,OAAf,EAAwB;AACtB,cAAKZ,KAAL,CAAWY,OAAX,CAAmBH,KAAnB;AACA,YAAIA,KAAK,CAACI,gBAAV,EAA4B;AAC1B;AACD;AACF;AACD,UAAI,OAAOZ,EAAP,KAAc,QAAlB,EAA4B;AAC1B,cAAKT,OAAL,CAAagB,SAAb,CAAuBP,EAAvB;AACD;AACD,UAAI,MAAKD,KAAL,CAAWc,SAAX,KAAyB,GAAzB,IAAgC,CAAC,MAAKd,KAAL,CAAWE,IAAhD,EAAsD;AACpDO,QAAAA,KAAK,CAACE,cAAN;AACD;AACF,K;;AAEOI,IAAAA,e,GAAkB,oBAAO,MAAKlB,iBAAL,GAAyB,KAAhC,E;;AAElBmB,IAAAA,a,GAAgB,UAACV,CAAD,EAAyC;AAC/D,UAAI,MAAKN,KAAL,CAAWU,QAAf,EAAyB;AACvB;AACD;;AAED,UAAI,MAAKV,KAAL,CAAWiB,SAAf,EAA0B;AACxB,cAAKjB,KAAL,CAAWiB,SAAX,CAAqBX,CAArB;AACA,YAAIA,CAAC,CAACO,gBAAN,EAAwB;AACtB;AACD;AACF;AACD,UAAMZ,EAAE,GAAG,MAAKF,KAAL,EAAX;AACA,UAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B;AAC1B;AACD;AACD,UAAI,CAAC,6BAAWK,CAAX,CAAL,EAAoB;AAClB;AACD;AACDA,MAAAA,CAAC,CAACK,cAAF;AACA,UAAMO,KAAK,GAAG,iCAAeZ,CAAf,KAAqB,+BAAaA,CAAb,CAArB,GAAuC,CAAC,CAAxC,GAA4C,CAA1D;AACA,YAAKd,OAAL,CAAa2B,UAAb,CAAwBlB,EAAxB,EAA4BiB,KAA5B;AACD,K;;AAEOE,IAAAA,W,GAAc,YAAM;AAC1B,UAAI,MAAKpB,KAAL,CAAWU,QAAf,EAAyB;AACvB;AACD;;AAED;AACA;AACAW,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAIC,yBAAYC,YAAZ,IAA4B,MAAK1B,iBAArC,EAAwD;AACtD,gBAAK2B,QAAL,CAAc,EAAE9B,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,K;;AAEO+B,IAAAA,U,GAAa,YAAM;AACzB,UAAI,MAAKzB,KAAL,CAAWU,QAAf,EAAyB;AACvB;AACD;;AAED,YAAKc,QAAL,CAAc,EAAE9B,iBAAiB,EAAE,KAArB,EAAd;AACD,K,iDApLMgC,yB,GAAP,qCAAmC,CACjC,wBAAU,KAAKlC,OAAL,KAAiBmC,oCAA3B,EAAoD,4CAApD,EACD,C,QAEMC,iB,GAAP,6BAA2B,CACzB,IAAM3B,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKT,OAAL,CAAaqC,MAAb,CAAoB5B,EAApB,EAAwB,KAAKM,cAA7B,EACD,CACDuB,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAK1B,mBAAxC,EACD,C,QAEM2B,kB,GAAP,8BAA4B,CAC1B,IAAI,KAAKxC,OAAL,CAAayC,SAAb,KAA2B,KAAKjC,KAAL,CAAWC,EAA1C,EAA8C,CAC5C,KAAKT,OAAL,CAAa0C,YAAb,GACD,CACF,C,QAEMC,oB,GAAP,gCAA8B,CAC5B,IAAMlC,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1B,KAAKT,OAAL,CAAa4C,SAAb,CAAuBnC,EAAvB,EACD,CACD6B,MAAM,CAACO,mBAAP,CAA2B,SAA3B,EAAsC,KAAKhC,mBAA3C,EACD,C,QAEMiC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAC3C,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAAC4C,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEMC,a,GAAP,yBAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,KAAK1C,KAAL,CAAWyC,KAAZ,CADT,EAELE,OAAO,EAAED,OAAO,CAAC,KAAK1C,KAAL,CAAW2C,OAAZ,CAFX,EAGLC,OAAO,EAAEF,OAAO,CAAC,KAAK1C,KAAL,CAAW4C,OAAZ,CAHX,EAILC,OAAO,EAAEH,OAAO,CAAC,KAAK1C,KAAL,CAAW6C,OAAZ,CAJX,EAKLnC,QAAQ,EAAEgC,OAAO,CAAC,KAAK1C,KAAL,CAAWU,QAAZ,CALZ,EAAP,CAOD,C,QAIO6B,U,GAAR,sBAAqB,2BAUf,KAAKvC,KAVU,CAEjB8C,QAFiB,eAEjBA,QAFiB,CAGjBpC,QAHiB,eAGjBA,QAHiB,CAIjB+B,KAJiB,eAIjBA,KAJiB,CAKjBE,OALiB,eAKjBA,OALiB,CAMjBC,OANiB,eAMjBA,OANiB,CAOjBC,OAPiB,eAOjBA,OAPiB,qCAQjB/B,SARiB,CAQNiC,SARM,sCAQMxD,GAAG,CAACyD,YAAJ,CAAiBlC,SARvB,yBASjBZ,IATiB,eASjBA,IATiB,CAYnB,IAAI+C,QAAQ,GAAG,KAAf,CACA,IAAIC,UAAU,GAAG,KAAjB,CAEA,IAAMjD,EAAE,GAAG,KAAKF,KAAL,EAAX,CACA,IAAI,OAAOE,EAAP,KAAc,QAAlB,EAA4B,CAC1BgD,QAAQ,GAAG,KAAKzD,OAAL,CAAayC,SAAb,KAA2B,KAAKlC,KAAL,EAAtC,CACAmD,UAAU,GAAG,KAAK1D,OAAL,CAAa2D,QAA1B,CACD,CACD,IAAMC,iBAAiB,GAAGF,UAAU,GAAGG,mBAAH,GAAoBC,qBAAxD,CAEA,oBACE,6BAAC,4BAAD,EAAmB,KAAKtD,KAAxB,eACE,6BAAC,SAAD,IACE,SAAS,EAAE,gCACRuD,YAAOC,IAAP,CAAY,KAAK7D,KAAjB,CADQ,IACkB,IADlB,MAER4D,YAAOJ,QAAP,CAAgB,KAAKxD,KAArB,CAFQ,IAEsB,CAAC,CAACuD,UAFxB,MAGRE,iBAAiB,CAACP,OAAlB,CAA0B,KAAKlD,KAA/B,CAHQ,IAGgC,CAAC,CAACkD,OAHlC,MAIRO,iBAAiB,CAACR,OAAlB,CAA0B,KAAKjD,KAA/B,CAJQ,IAIgC,CAAC,CAACiD,OAJlC,MAKRQ,iBAAiB,CAACT,OAAlB,CAA0B,KAAKhD,KAA/B,CALQ,IAKgC,CAAC,CAACgD,OALlC,MAMRS,iBAAiB,CAACX,KAAlB,CAAwB,KAAK9C,KAA7B,CANQ,IAM8B,CAAC,CAAC8C,KANhC,MAORc,YAAOE,MAAP,EAPQ,IAOU,CAAC,CAACR,QAPZ,MAQRG,iBAAiB,CAACK,MAAlB,CAAyB,KAAK9D,KAA9B,CARQ,IAQ+B,CAAC,CAACsD,QARjC,MASRM,YAAO7C,QAAP,CAAgB,KAAKf,KAArB,CATQ,IASsB,CAAC,CAACe,QATxB,MAUR0C,iBAAiB,CAAC1C,QAAlB,EAVQ,IAUuB,CAAC,CAACA,QAVzB,OADb,EAaE,MAAM,EAAE,KAAKe,UAbf,EAcE,OAAO,EAAE,KAAKjB,SAdhB,EAeE,WAAW,EAAE,KAAKO,eAfpB,EAgBE,OAAO,EAAE,KAAKK,WAhBhB,EAiBE,SAAS,EAAE,KAAKJ,aAjBlB,EAkBE,QAAQ,EAAEN,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAlB5B,EAmBE,GAAG,EAAE,kCAAsBqC,SAAtB,IAAmC,IAAnC,GAA0C,KAAK5C,eAnBtD,EAoBE,IAAI,EAAED,IApBR,iBAsBE,6BAAC,8BAAD,IAAgB,QAAQ,EAAE,KAAKV,OAAL,CAAa0C,YAAvC,IAAsDY,QAAtD,CAtBF,EAuBG,KAAKrD,KAAL,CAAWC,iBAAX,iBAAgC,sCAAK,SAAS,EAAE,iBAAG6D,YAAOG,KAAP,CAAa,KAAK/D,KAAlB,CAAH,EAA6BgE,mBAAcD,KAA3C,CAAhB,GAvBnC,CADF,CADF,CA6BD,C,cA/HiDE,eAAMb,S,oBAA7CxD,G,CACGsE,mB,GAAsB,K,CADzBtE,G,CAGGuE,W,GAAcC,wB,CAHjBxE,G,CAMGyE,S,GAAY,EACxBlB,QAAQ,EAAEmB,mBAAUC,IADI,EAExBxD,QAAQ,EAAEuD,mBAAUE,IAFI,EAGxBjE,IAAI,EAAE+D,mBAAUG,MAAV,CAAiBC,UAHC,EAIxBzD,OAAO,EAAEqD,mBAAUK,IAJK,EAKxBrD,SAAS,EAAEgD,mBAAUK,IALG,E,CANf/E,G,CAcGyD,Y,GAAe,EAC3BlC,SAAS,EAAE,GADgB,EAE3BZ,IAAI,EAAE,EAFqB,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { tabListener } from '../../lib/events/tabListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Error indicator\n   */\n  error?: boolean;\n\n  /**\n   * Warning indicator\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    href: PropTypes.string.isRequired,\n    onClick: PropTypes.func,\n    onKeyDown: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n  private isArrowKeyPressed = false;\n\n  public UNSAFE_componentWillMount() {\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n    window.addEventListener('keydown', this.handleKeyDownGlobal);\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n    window.removeEventListener('keydown', this.handleKeyDownGlobal);\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      component: Component = Tab.defaultProps.component,\n      href,\n    } = this.props;\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <Component\n          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onMouseDown={this.handleMouseDown}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.props.href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private handleKeyDownGlobal = (e: KeyboardEvent) => {\n    this.isArrowKeyPressed = isKeyArrow(e);\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const id = this.props.id || this.props.href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (this.props.component === 'a' && !this.props.href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseDown = () => (this.isArrowKeyPressed = false);\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    requestAnimationFrame(() => {\n      if (tabListener.isTabPressed || this.isArrowKeyPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}
+{"version":3,"sources":["Tab.tsx"],"names":["Tab","context","state","focusedByKeyboard","theme","tabComponent","getUnderlyingNode","getId","props","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","onClick","defaultPrevented","component","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","UNSAFE_componentWillMount","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","renderMain","getIndicators","error","Boolean","warning","success","primary","children","Component","defaultProps","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","styles","root","active","focus","globalClasses","React","__KONTUR_REACT_UI__","contextType","TabsContext","propTypes","PropTypes","node","bool","string","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport invariant from 'invariant';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } from './Tab.styles';\n\nexport interface TabIndicators {\n  error: boolean;\n  warning: boolean;\n  success: boolean;\n  primary: boolean;\n  disabled: boolean;\n}\n\nexport interface TabProps<T extends string = string> extends CommonProps {\n  /**\n   * Tab content\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Component to use as a tab\n   */\n  component?: React.ComponentType<any> | string;\n\n  /**\n   * Link href\n   */\n  href?: string;\n\n  /**\n   * Tab identifier\n   */\n  id?: T;\n\n  /**\n   * Click event\n   */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n  /**\n   * Click event\n   */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  /**\n   * Disabled indicator\n   */\n  disabled?: boolean;\n\n  /**\n   * Error indicator\n   */\n  error?: boolean;\n\n  /**\n   * Warning indicator\n   */\n  warning?: boolean;\n\n  /**\n   * Success indicator\n   */\n  success?: boolean;\n\n  /**\n   * Primary indicator\n   */\n  primary?: boolean;\n\n  /**\n   * Style property\n   */\n  style?: React.CSSProperties;\n}\n\nexport interface TabState {\n  focusedByKeyboard: boolean;\n}\n\n/**\n * Tab element of Tabs component\n *\n * Can be used for creating custom tabs\n * ```js\n *\n * const RouteTab = (props) => (\n *   <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n *\n * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n *\n * Works only inside Tabs component, otherwise throws\n */\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n  public static __KONTUR_REACT_UI__ = 'Tab';\n\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public static propTypes = {\n    children: PropTypes.node,\n    disabled: PropTypes.bool,\n    href: PropTypes.string.isRequired,\n    onClick: PropTypes.func,\n    onKeyDown: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    component: 'a',\n    href: '',\n  };\n\n  public state: TabState = {\n    focusedByKeyboard: false,\n  };\n\n  private theme!: Theme;\n  private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n\n  public UNSAFE_componentWillMount() {\n    invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n  }\n\n  public componentDidMount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.addTab(id, this.getTabInstance);\n    }\n  }\n\n  public componentDidUpdate() {\n    if (this.context.activeTab === this.props.id) {\n      this.context.notifyUpdate();\n    }\n  }\n\n  public componentWillUnmount() {\n    const id = this.getId();\n    if (typeof id === 'string') {\n      this.context.removeTab(id);\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getIndicators() {\n    return {\n      error: Boolean(this.props.error),\n      warning: Boolean(this.props.warning),\n      success: Boolean(this.props.success),\n      primary: Boolean(this.props.primary),\n      disabled: Boolean(this.props.disabled),\n    };\n  }\n\n  public getUnderlyingNode = () => this.tabComponent;\n\n  private renderMain() {\n    const {\n      children,\n      disabled,\n      error,\n      warning,\n      success,\n      primary,\n      component: Component = Tab.defaultProps.component,\n      href,\n    } = this.props;\n\n    let isActive = false;\n    let isVertical = false;\n\n    const id = this.getId();\n    if (typeof id === 'string') {\n      isActive = this.context.activeTab === this.getId();\n      isVertical = this.context.vertical;\n    }\n    const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <Component\n          className={cx({\n            [styles.root(this.theme)]: true,\n            [styles.vertical(this.theme)]: !!isVertical,\n            [orientationStyles.primary(this.theme)]: !!primary,\n            [orientationStyles.success(this.theme)]: !!success,\n            [orientationStyles.warning(this.theme)]: !!warning,\n            [orientationStyles.error(this.theme)]: !!error,\n            [styles.active()]: !!isActive,\n            [orientationStyles.active(this.theme)]: !!isActive,\n            [styles.disabled(this.theme)]: !!disabled,\n            [orientationStyles.disabled()]: !!disabled,\n          })}\n          onBlur={this.handleBlur}\n          onClick={this.switchTab}\n          onFocus={this.handleFocus}\n          onKeyDown={this.handleKeyDown}\n          tabIndex={disabled ? -1 : 0}\n          ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n          href={href}\n        >\n          <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n          {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\n        </Component>\n      </CommonWrapper>\n    );\n  }\n\n  private getId = () => this.props.id || this.props.href;\n\n  private refTabComponent = (instance: React.ReactElement<any>) => {\n    this.tabComponent = instance;\n  };\n\n  private getTabInstance = () => this;\n\n  private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const id = this.props.id || this.props.href;\n    if (this.props.onClick) {\n      this.props.onClick(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n    }\n    if (typeof id === 'string') {\n      this.context.switchTab(id);\n    }\n    if (this.props.component === 'a' && !this.props.href) {\n      event.preventDefault();\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n      if (e.defaultPrevented) {\n        return;\n      }\n    }\n    const id = this.getId();\n    if (typeof id !== 'string') {\n      return;\n    }\n    if (!isKeyArrow(e)) {\n      return;\n    }\n    e.preventDefault();\n    const delta = isKeyArrowLeft(e) || isKeyArrowUp(e) ? -1 : 1;\n    this.context.shiftFocus(id, delta);\n  };\n\n  private handleFocus = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    // focus event fires before keyDown eventlistener\n    // so we should check focusKeyPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed || keyListener.isArrowPressed) {\n        this.setState({ focusedByKeyboard: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    if (this.props.disabled) {\n      return;\n    }\n\n    this.setState({ focusedByKeyboard: false });\n  };\n}\n"]}

package/cjs/components/Tabs/Tab.styles.js

@@ -12,10 +12,10 @@ var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
     var paddingTop = (0, _ThemeHelpers.is8pxTheme)(t) ? t.tabPaddingY : (0, _DimensionFunctions.shift)(t.tabPaddingY, '-1px');
     var paddingBottom = (0, _ThemeHelpers.is8pxTheme)(t) ? "calc(" + t.tabPaddingY + " - " + t.tabBorderWidth + ")" : (0, _DimensionFunctions.shift)(t.tabPaddingY, '1px');
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: ", " solid transparent;\n      box-sizing: border-box;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-left: ", ";\n      margin-right: ", ";\n      padding-bottom: ", ";\n      padding-top: ", ";\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ", " solid ", ";\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    "])),
     t.tabBorderWidth,
 
-
+    t.tabTextColorDefault,
 
 
     t.tabFontSize,

package/cjs/components/Tabs/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","css","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","ColorFunctions","red","tabTextColorDefault","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\n    const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\n    return css`\n      border-bottom: ${t.tabBorderWidth} solid transparent;\n      box-sizing: border-box;\n      color: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-size: ${t.tabFontSize};\n      line-height: ${t.tabLineHeight};\n      margin-left: ${t.tabPaddingX};\n      margin-right: ${t.tabPaddingX};\n      padding-bottom: ${paddingBottom};\n      padding-top: ${paddingTop};\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    `;\n  },\n\n  vertical(t: Theme) {\n    return css`\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n      padding-right: ${t.tabPaddingX};\n\n      &:hover {\n        border-bottom: none;\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      .${globalClasses.focus} {\n        bottom: 0;\n        left: -${t.tabBorderWidth};\n        right: 0;\n      }\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n      bottom: -${t.tabBorderWidth};\n      left: -${t.tabPaddingX};\n      position: absolute;\n      right: -${t.tabPaddingX};\n      top: 0;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Tab.styles.ts"],"names":["globalClasses","focus","styles","root","t","paddingTop","tabPaddingY","paddingBottom","tabBorderWidth","css","tabTextColorDefault","tabFontSize","tabLineHeight","tabPaddingX","tabColorHover","vertical","tabOutlineWidth","tabColorFocus","disabled","ColorFunctions","red","green","blue","active","horizontalStyles","primary","tabColorHoverPrimary","success","tabColorHoverSuccess","warning","tabColorHoverWarning","error","tabColorHoverError","verticalStyles"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const paddingTop = is8pxTheme(t) ? t.tabPaddingY : shift(t.tabPaddingY, '-1px');\n    const paddingBottom = is8pxTheme(t) ? `calc(${t.tabPaddingY} - ${t.tabBorderWidth})` : shift(t.tabPaddingY, '1px');\n    return css`\n      border-bottom: ${t.tabBorderWidth} solid transparent;\n      box-sizing: border-box;\n      color: ${t.tabTextColorDefault};\n      cursor: pointer;\n      display: inline-block;\n      font-size: ${t.tabFontSize};\n      line-height: ${t.tabLineHeight};\n      margin-left: ${t.tabPaddingX};\n      margin-right: ${t.tabPaddingX};\n      padding-bottom: ${paddingBottom};\n      padding-top: ${paddingTop};\n      position: relative;\n      text-decoration: inherit;\n      transition: border-bottom 0.2s ease-out;\n\n      &:hover {\n        outline: inherit;\n        border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      &:focus {\n        outline: inherit;\n      }\n    `;\n  },\n\n  vertical(t: Theme) {\n    return css`\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid transparent;\n      display: block;\n      margin-left: 0;\n      margin-right: 0;\n      padding-left: ${shift(t.tabPaddingX, `-${t.tabBorderWidth}`)};\n      padding-right: ${t.tabPaddingX};\n\n      &:hover {\n        border-bottom: none;\n        border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n      }\n\n      .${globalClasses.focus} {\n        bottom: 0;\n        left: -${t.tabBorderWidth};\n        right: 0;\n      }\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n      bottom: -${t.tabBorderWidth};\n      left: -${t.tabPaddingX};\n      position: absolute;\n      right: -${t.tabPaddingX};\n      top: 0;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n"]}

package/cjs/components/Toggle/Toggle.js

@@ -2,7 +2,7 @@
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _warning = _interopRequireDefault(require("warning"));
 
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
@@ -87,7 +87,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
     focus = function () {
       if (_this.input) {
-        _tabListener.tabListener.isTabPressed = true;
+        _keyListener.keyListener.isTabPressed = true;
         _this.input.focus();
       }
     };_this.
@@ -185,6 +185,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
 
 
     inputRef = function (element) {
@@ -212,7 +213,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
         _this.props.onFocus(event);
       }
 
-      if (_tabListener.tabListener.isTabPressed) {
+      if (_keyListener.keyListener.isTabPressed) {
         _this.setState({ focusByTab: true });
       }
     };_this.
@@ -224,8 +225,8 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
       _this.setState({
         focusByTab: false });
 
-    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_tabListener.tabListener.isTabPressed = true;this.focus();}} /**
+    };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}} /**
    * @public
-   */;_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, _cx4, _cx5, _cx6;var _this$props = this.props,children = _this$props.children,captionPosition = _this$props.captionPosition,warning = _this$props.warning,error = _this$props.error,loading = _this$props.loading,color = _this$props.color;var disabled = this.props.disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(_Toggle.styles.container(this.theme), (_cx = {}, _cx[_Toggle.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle.globalClasses.container] = true, _cx[_Toggle.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(_Toggle.styles.root(this.theme), (_cx2 = {}, _cx2[_Toggle.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(_Toggle.styles.caption(this.theme), (_cx3 = {}, _cx3[_Toggle.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("label", { className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.outline(this.theme), (_cx4 = {}, _cx4[_Toggle.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle.styles.isError(this.theme)] = !!error, _cx4[_Toggle.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Toggle.styles.wrapper(this.theme)) }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: _Toggle.styles.input(this.theme), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.activeBackground(), _Toggle.globalClasses.background, (_cx5 = {}, _cx5[_Toggle.styles.activeBackgroundLoading(this.theme)] = loading, _cx5)), style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.handle(this.theme), _Toggle.globalClasses.handle, (_cx6 = {}, _cx6[_Toggle.styles.handleDisabled(this.theme)] = disabled, _cx6)) }))), caption));};_proto.isUncontrolled = function isUncontrolled() {
+   */;_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, _cx4, _cx5, _cx6;var _this$props = this.props,children = _this$props.children,captionPosition = _this$props.captionPosition,warning = _this$props.warning,error = _this$props.error,loading = _this$props.loading,color = _this$props.color;var disabled = this.props.disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(_Toggle.styles.container(this.theme), (_cx = {}, _cx[_Toggle.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle.globalClasses.container] = true, _cx[_Toggle.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(_Toggle.styles.root(this.theme), (_cx2 = {}, _cx2[_Toggle.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(_Toggle.styles.caption(this.theme), (_cx3 = {}, _cx3[_Toggle.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("label", { className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.outline(this.theme), (_cx4 = {}, _cx4[_Toggle.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle.styles.isError(this.theme)] = !!error, _cx4[_Toggle.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_Toggle.styles.wrapper(this.theme)) }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: _Toggle.styles.input(this.theme), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.activeBackground(), _Toggle.globalClasses.background, (_cx5 = {}, _cx5[_Toggle.styles.activeBackgroundLoading(this.theme)] = loading, _cx5[_Toggle.styles.disabledBackground(this.theme)] = disabled, _cx5)), style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.handle(this.theme), _Toggle.globalClasses.handle, (_cx6 = {}, _cx6[_Toggle.styles.handleDisabled(this.theme)] = disabled, _cx6)) }))), caption));};_proto.isUncontrolled = function isUncontrolled() {
     return this.props.checked === undefined;
   };return Toggle;}(_react.default.Component);exports.Toggle = Toggle;Toggle.__KONTUR_REACT_UI__ = 'Toggle';Toggle.propTypes = { checked: _propTypes.default.bool, defaultChecked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, loading: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func, color: function color(props) {if (props.color && !colorWarningShown) {(0, _warning.default)(false, "[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. ");colorWarningShown = true;}} };Toggle.defaultProps = { disabled: false, loading: false, captionPosition: 'right' };

package/cjs/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","Toggle","props","theme","input","focus","tabListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","warning","error","loading","color","disabled","containerClassNames","styles","container","containerDisabled","globalClasses","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","func","defaultProps"],"mappings":"kPAAA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;;AAEA,IAAIA,iBAAiB,GAAG,KAAxB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BaC,M;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BX,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAHxBC,KAGwB,gBAFxBC,KAEwB,GAFS,IAET;;;;;;;;;;;;;;;;;;AAmBzBC,IAAAA,KAnByB,GAmBjB,YAAM;AACnB,UAAI,MAAKD,KAAT,EAAgB;AACdE,iCAAYC,YAAZ,GAA2B,IAA3B;AACA,cAAKH,KAAL,CAAWC,KAAX;AACD;AACF,KAxB+B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHxBG,IAAAA,QAzHwB,GAyHb,UAACC,OAAD,EAA+B;AAChD,YAAKL,KAAL,GAAaK,OAAb;AACD,KA3H+B;;AA6HxBC,IAAAA,YA7HwB,GA6HT,UAACC,KAAD,EAAgD;AACrE,UAAI,MAAKT,KAAL,CAAWU,aAAf,EAA8B;AAC5B,cAAKV,KAAL,CAAWU,aAAX,CAAyBD,KAAK,CAACE,MAAN,CAAaC,OAAtC;AACD;;AAED,UAAI,MAAKC,cAAL,EAAJ,EAA2B;AACzB,cAAKC,QAAL,CAAc;AACZF,UAAAA,OAAO,EAAEH,KAAK,CAACE,MAAN,CAAaC,OADV,EAAd;;AAGD;;AAED,UAAI,MAAKZ,KAAL,CAAWe,QAAf,EAAyB;AACvB,cAAKf,KAAL,CAAWe,QAAX,CAAoBN,KAApB;AACD;AACF,KA3I+B;;AA6IxBO,IAAAA,WA7IwB,GA6IV,UAACP,KAAD,EAA+C;AACnE,UAAI,MAAKT,KAAL,CAAWiB,OAAf,EAAwB;AACtB,cAAKjB,KAAL,CAAWiB,OAAX,CAAmBR,KAAnB;AACD;;AAED,UAAIL,yBAAYC,YAAhB,EAA8B;AAC5B,cAAKS,QAAL,CAAc,EAAEI,UAAU,EAAE,IAAd,EAAd;AACD;AACF,KArJ+B;;AAuJxBC,IAAAA,UAvJwB,GAuJX,UAACV,KAAD,EAA+C;AAClE,UAAI,MAAKT,KAAL,CAAWoB,MAAf,EAAuB;AACrB,cAAKpB,KAAL,CAAWoB,MAAX,CAAkBX,KAAlB;AACD;AACD,YAAKK,QAAL,CAAc;AACZI,QAAAA,UAAU,EAAE,KADA,EAAd;;AAGD,KA9J+B,CAG9B,MAAKG,KAAL,GAAa,EACXH,UAAU,EAAE,KADD,EAEXN,OAAO,EAAEZ,KAAK,CAACsB,cAFJ,EAAb,CAH8B,aAO/B,C,qCAEMC,iB,GAAP,6BAA2B,CACzB,IAAI,KAAKvB,KAAL,CAAWwB,SAAf,EAA0B,CACxBpB,yBAAYC,YAAZ,GAA2B,IAA3B,CACA,KAAKF,KAAL,GACD,CACF,C,CAED;AACF;AACA,K,QAQSsB,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACxB,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACyB,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mDACmD,KAAK1B,KADxD,CACX2B,QADW,eACXA,QADW,CACDC,eADC,eACDA,eADC,CACgBC,OADhB,eACgBA,OADhB,CACyBC,KADzB,eACyBA,KADzB,CACgCC,OADhC,eACgCA,OADhC,CACyCC,KADzC,eACyCA,KADzC,CAEnB,IAAMC,QAAQ,GAAG,KAAKjC,KAAL,CAAWiC,QAAX,IAAuBF,OAAxC,CACA,IAAMnB,OAAO,GAAG,KAAKC,cAAL,KAAwB,KAAKQ,KAAL,CAAWT,OAAnC,GAA6C,KAAKZ,KAAL,CAAWY,OAAxE,CAEA,IAAMsB,mBAAmB,GAAG,iBAAGC,eAAOC,SAAP,CAAiB,KAAKnC,KAAtB,CAAH,iBACzBkC,eAAOE,iBAAP,CAAyB,KAAKpC,KAA9B,CADyB,IACc,CAAC,CAACgC,QADhB,MAEzBK,sBAAcF,SAFW,IAEC,IAFD,MAGzBE,sBAAcD,iBAHW,IAGS,CAAC,CAACJ,QAHX,MAIzBK,sBAAcC,gBAJW,IAIQR,OAJR,OAA5B,CAOA,IAAMS,eAAe,GAAG,iBAAGL,eAAOM,IAAP,CAAY,KAAKxC,KAAjB,CAAH,mBACrBkC,eAAOO,QAAP,EADqB,IACDd,eAAe,KAAK,MADnB,OAErBO,eAAOF,QAAP,EAFqB,IAED,CAAC,CAACA,QAFD,QAAxB,CAKA,IAAIU,OAAO,GAAG,IAAd,CACA,IAAIhB,QAAJ,EAAc,UACZ,IAAMiB,YAAY,GAAG,iBAAGT,eAAOQ,OAAP,CAAe,KAAK1C,KAApB,CAAH,mBAClBkC,eAAOU,WAAP,CAAmB,KAAK5C,KAAxB,CADkB,IACe2B,eAAe,KAAK,MADnC,QAArB,CAGAe,OAAO,gBAAG,uCAAM,SAAS,EAAEC,YAAjB,IAAgCjB,QAAhC,CAAV,CACD,CAED,oBACE,6BAAC,4BAAD,EAAmB,KAAK3B,KAAxB,eACE,wCAAO,SAAS,EAAEwC,eAAlB,iBACE,sCACE,SAAS,EAAE,iBAAGL,eAAOW,OAAP,CAAe,KAAK7C,KAApB,CAAH,mBACRkC,eAAOY,SAAP,CAAiB,KAAK9C,KAAtB,CADQ,IACuB,CAAC,CAAC4B,OADzB,OAERM,eAAOa,OAAP,CAAe,KAAK/C,KAApB,CAFQ,IAEqB,CAAC,CAAC6B,KAFvB,OAGRK,eAAOc,OAAP,CAAe,KAAKhD,KAApB,CAHQ,IAGqB,CAACgC,QAAD,IAAa,CAAC,CAAC,KAAKZ,KAAL,CAAWH,UAH/C,QADb,iBAOE,uCAAM,SAAS,EAAE,iBAAGiB,eAAOe,OAAP,CAAe,KAAKjD,KAApB,CAAH,CAAjB,iBACE,wCACE,IAAI,EAAC,UADP,EAEE,OAAO,EAAEW,OAFX,EAGE,QAAQ,EAAE,KAAKJ,YAHjB,EAIE,SAAS,EAAE2B,eAAOjC,KAAP,CAAa,KAAKD,KAAlB,CAJb,EAKE,OAAO,EAAE,KAAKe,WALhB,EAME,MAAM,EAAE,KAAKG,UANf,EAOE,GAAG,EAAE,KAAKb,QAPZ,EAQE,QAAQ,EAAE2B,QARZ,GADF,eAWE,sCACE,SAAS,EAAEC,mBADb,EAEE,KAAK,EACHtB,OAAO,IAAIoB,KAAX,IAAoB,CAACC,QAArB,GACI,EACEkB,eAAe,EAAEnB,KADnB,EAEEoB,SAAS,uBAAqBpB,KAFhC,EADJ,GAKIqB,SARR,iBAWE,sCACE,SAAS,EAAE,iBAAGlB,eAAOmB,gBAAP,EAAH,EAA8BhB,sBAAciB,UAA5C,mBACRpB,eAAOqB,uBAAP,CAA+B,KAAKvD,KAApC,CADQ,IACqC8B,OADrC,QADb,EAIE,KAAK,EACHnB,OAAO,IAAIoB,KAAX,IAAoB,CAACC,QAArB,GACI,EACEkB,eAAe,EAAEnB,KADnB,EAEEoB,SAAS,uBAAqBpB,KAFhC,EADJ,GAKIqB,SAVR,GAXF,CAXF,eAoCE,sCACE,SAAS,EAAE,iBAAGlB,eAAOsB,MAAP,CAAc,KAAKxD,KAAnB,CAAH,EAA8BqC,sBAAcmB,MAA5C,mBACRtB,eAAOuB,cAAP,CAAsB,KAAKzD,KAA3B,CADQ,IAC4BgC,QAD5B,QADb,GApCF,CAPF,CADF,EAmDGU,OAnDH,CADF,CADF,CAyDD,C,QAyCO9B,c,GAAR,0BAAyB;AACvB,WAAO,KAAKb,KAAL,CAAWY,OAAX,KAAuByC,SAA9B;AACD,G,iBA9LyBM,eAAMC,S,0BAArB7D,M,CACG8D,mB,GAAsB,Q,CADzB9D,M,CAGG+D,S,GAAY,EACxBlD,OAAO,EAAEmD,mBAAUC,IADK,EAExB1C,cAAc,EAAEyC,mBAAUC,IAFF,EAGxB/B,QAAQ,EAAE8B,mBAAUC,IAHI,EAIxBlC,KAAK,EAAEiC,mBAAUC,IAJO,EAKxBjC,OAAO,EAAEgC,mBAAUC,IALK,EAMxBnC,OAAO,EAAEkC,mBAAUC,IANK,EAOxBtD,aAAa,EAAEqD,mBAAUE,IAPD,EAQxBjC,KARwB,iBAQlBhC,KARkB,EAQE,CACxB,IAAIA,KAAK,CAACgC,KAAN,IAAe,CAAClC,iBAApB,EAAuC,CACrC,sBAAQ,KAAR,kGACAA,iBAAiB,GAAG,IAApB,CACD,CACF,CAbuB,E,CAHfC,M,CAmBGmE,Y,GAAe,EAC3BjC,QAAQ,EAAE,KADiB,EAE3BF,OAAO,EAAE,KAFkB,EAG3BH,eAAe,EAAE,OAHU,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { tabListener } from '../../lib/events/tabListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение children справа или слева от переключателя\n   * @default 'right'\n   */\n  captionPosition: 'left' | 'right';\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onValueChange?: (value: boolean) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  warning?: boolean;\n  error?: boolean;\n  loading?: boolean;\n  autoFocus?: boolean;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  color?: React.CSSProperties['color'];\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color(props: ToggleProps) {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      tabListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      tabListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\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 { children, captionPosition, warning, error, loading, color } = this.props;\n    const disabled = this.props.disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper {...this.props}>\n        <label className={labelClassNames}>\n          <div\n            className={cx(styles.outline(this.theme), {\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <span className={cx(styles.wrapper(this.theme))}>\n              <input\n                type=\"checkbox\"\n                checked={checked}\n                onChange={this.handleChange}\n                className={styles.input(this.theme)}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n              />\n              <div\n                className={containerClassNames}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              >\n                <div\n                  className={cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              </div>\n              <div\n                className={cx(styles.handle(this.theme), globalClasses.handle, {\n                  [styles.handleDisabled(this.theme)]: disabled,\n                })}\n              />\n            </span>\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (tabListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}
+{"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","Toggle","props","theme","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","renderMain","children","captionPosition","warning","error","loading","color","disabled","containerClassNames","styles","container","containerDisabled","globalClasses","containerLoading","labelClassNames","root","rootLeft","caption","captionClass","captionLeft","outline","isWarning","isError","focused","wrapper","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Положение children справа или слева от переключателя\n   * @default 'right'\n   */\n  captionPosition: 'left' | 'right';\n  checked?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  onValueChange?: (value: boolean) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n  warning?: boolean;\n  error?: boolean;\n  loading?: boolean;\n  autoFocus?: boolean;\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\n  color?: React.CSSProperties['color'];\n}\n\nexport interface ToggleState {\n  checked?: boolean;\n  focusByTab?: boolean;\n}\n\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n  public static __KONTUR_REACT_UI__ = 'Toggle';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    defaultChecked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    loading: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    color(props: ToggleProps) {\n      if (props.color && !colorWarningShown) {\n        warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n        colorWarningShown = true;\n      }\n    },\n  };\n\n  public static defaultProps = {\n    disabled: false,\n    loading: false,\n    captionPosition: 'right',\n  };\n\n  private theme!: Theme;\n  private input: HTMLInputElement | null = null;\n\n  constructor(props: ToggleProps) {\n    super(props);\n\n    this.state = {\n      focusByTab: false,\n      checked: props.defaultChecked,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.props.autoFocus) {\n      keyListener.isTabPressed = true;\n      this.focus();\n    }\n  }\n\n  /**\n   * @public\n   */\n  public focus = () => {\n    if (this.input) {\n      keyListener.isTabPressed = true;\n      this.input.focus();\n    }\n  };\n\n  public render() {\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 { children, captionPosition, warning, error, loading, color } = this.props;\n    const disabled = this.props.disabled || loading;\n    const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n    const containerClassNames = cx(styles.container(this.theme), {\n      [styles.containerDisabled(this.theme)]: !!disabled,\n      [globalClasses.container]: true,\n      [globalClasses.containerDisabled]: !!disabled,\n      [globalClasses.containerLoading]: loading,\n    });\n\n    const labelClassNames = cx(styles.root(this.theme), {\n      [styles.rootLeft()]: captionPosition === 'left',\n      [styles.disabled()]: !!disabled,\n    });\n\n    let caption = null;\n    if (children) {\n      const captionClass = cx(styles.caption(this.theme), {\n        [styles.captionLeft(this.theme)]: captionPosition === 'left',\n      });\n      caption = <span className={captionClass}>{children}</span>;\n    }\n\n    return (\n      <CommonWrapper {...this.props}>\n        <label className={labelClassNames}>\n          <div\n            className={cx(styles.outline(this.theme), {\n              [styles.isWarning(this.theme)]: !!warning,\n              [styles.isError(this.theme)]: !!error,\n              [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n            })}\n          >\n            <span className={cx(styles.wrapper(this.theme))}>\n              <input\n                type=\"checkbox\"\n                checked={checked}\n                onChange={this.handleChange}\n                className={styles.input(this.theme)}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                ref={this.inputRef}\n                disabled={disabled}\n              />\n              <div\n                className={containerClassNames}\n                style={\n                  checked && color && !disabled\n                    ? {\n                        backgroundColor: color,\n                        boxShadow: `inset 0 0 0 1px ${color}`,\n                      }\n                    : undefined\n                }\n              >\n                <div\n                  className={cx(styles.activeBackground(), globalClasses.background, {\n                    [styles.activeBackgroundLoading(this.theme)]: loading,\n                    [styles.disabledBackground(this.theme)]: disabled,\n                  })}\n                  style={\n                    checked && color && !disabled\n                      ? {\n                          backgroundColor: color,\n                          boxShadow: `inset 0 0 0 1px ${color}`,\n                        }\n                      : undefined\n                  }\n                />\n              </div>\n              <div\n                className={cx(styles.handle(this.theme), globalClasses.handle, {\n                  [styles.handleDisabled(this.theme)]: disabled,\n                })}\n              />\n            </span>\n          </div>\n          {caption}\n        </label>\n      </CommonWrapper>\n    );\n  }\n\n  private inputRef = (element: HTMLInputElement) => {\n    this.input = element;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (this.props.onValueChange) {\n      this.props.onValueChange(event.target.checked);\n    }\n\n    if (this.isUncontrolled()) {\n      this.setState({\n        checked: event.target.checked,\n      });\n    }\n\n    if (this.props.onChange) {\n      this.props.onChange(event);\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n\n    if (keyListener.isTabPressed) {\n      this.setState({ focusByTab: true });\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n    this.setState({\n      focusByTab: false,\n    });\n  };\n\n  private isUncontrolled() {\n    return this.props.checked === undefined;\n  }\n}\n"]}

package/cjs/components/Toggle/Toggle.styles.d.ts

@@ -15,6 +15,7 @@ export declare const styles: {
     containerDisabled(t: Theme): string;
     focused(t: Theme): string;
     activeBackground(): string;
+    disabledBackground(t: Theme): string;
     activeBackgroundLoading(t: Theme): string;
     isWarning(t: Theme): string;
     isError(t: Theme): string;

package/cjs/components/Toggle/Toggle.styles.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = exports.globalClasses = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
 
 var globalClasses = (0, _Emotion.prefix)('toggle')({
@@ -69,8 +69,8 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
     globalClasses.containerDisabled,
-    t.toggleBorderWidth, t.toggleBorderColor,
-    t.toggleBgDisabled,
+    t.toggleBorderWidth, t.toggleBorderColorDisabledChecked,
+    t.toggleBgDisabledChecked,
 
 
     globalClasses.containerLoading,
@@ -83,9 +83,9 @@ var styles = (0, _Emotion.memoizeStyle)({
 
     globalClasses.containerDisabled, globalClasses.background,
 
-    t.toggleBgDisabled,
+    t.toggleBgDisabledChecked,
     t.toggleHeight, t.toggleHeight,
-    t.toggleBorderColor,
+    t.toggleBorderColorDisabledChecked,
 
     globalClasses.handle,
     t.toggleWidth, handleWidthWithBorders);
@@ -107,8 +107,9 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   containerDisabled: function containerDisabled(t) {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
-    t.toggleBgDisabled);
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    "])),
+    t.toggleBgDisabled,
+    t.toggleBorderColorDisabled);
 
   },
 
@@ -128,35 +129,42 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
 
+  },
+
+  disabledBackground: function disabledBackground(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ";\n      width: 0;\n    "])),
+    t.toggleBorderColorDisabled);
+
+
   },
 
   activeBackgroundLoading: function activeBackgroundLoading(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "])),
     t.toggleBgActive);
 
   },
 
   isWarning: function isWarning(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
     t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorWarning);
 
   },
 
   isError: function isError(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 0 0 1px ", ", 0 0 0 ", " ", ";\n    "])),
     t.outlineColorFocus, t.toggleOutlineWidth, t.toggleShadowColorError);
 
   },
 
   outline: function outline(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-radius: ", ";\n    "])),
     t.toggleBaseBg,
     t.toggleBorderRadius);
 
   },
 
   wrapper: function wrapper(t) {
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      height: ", ";\n      position: relative;\n      width: ", ";\n      flex: 1 0 ", ";\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    "])),
 
     t.toggleHeight,
 
@@ -171,25 +179,27 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   disabled: function disabled() {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n    "])));
 
 
   },
 
   rootLeft: function rootLeft() {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "])));
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row-reverse;\n    "])));
 
 
   },
 
   caption: function caption(t) {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 0 0 ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 0 0 ", ";\n    "])),
+    t.toggleTextColor,
     t.toggleCaptionGap);
 
   },
 
   captionLeft: function captionLeft(t) {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " 0 0;\n    "])),
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding: 0 ", " 0 0;\n    "])),
+    t.toggleTextColor,
     t.toggleCaptionGap);
 
   } });exports.styles = styles;

package/cjs/components/Toggle/Toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColor","toggleBgDisabled","toggleBorderRadius","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","disabled","rootLeft","caption","toggleCaptionGap","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n      width: ${handleSize} !important; // override root active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n        background: ${t.toggleBgDisabled};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabled};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  outline(t: Theme) {\n    return css`\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      display: inline-block;\n      height: ${t.toggleHeight};\n      position: relative;\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      padding: 0 0 0 ${t.toggleCaptionGap};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Toggle.styles.ts"],"names":["globalClasses","handle","container","containerDisabled","containerLoading","background","styles","root","t","handleWidthWithBorders","toggleHeight","handleActiveWidth","toggleBorderWidth","toggleHandleActiveWidthIncrement","css","toggleBgHover","toggleWidth","handleSize","toggleBg","toggleHandleBorderRadius","handleDisabled","toggleDisabledHandleBg","input","toggleBgChecked","toggleBorderColorDisabledChecked","toggleBgDisabledChecked","toggleBorderColor","toggleBorderRadius","toggleBgDisabled","toggleBorderColorDisabled","focused","outlineColorFocus","toggleOutlineWidth","toggleFocusShadowColor","activeBackground","disabledBackground","activeBackgroundLoading","toggleBgActive","isWarning","toggleShadowColorWarning","isError","toggleShadowColorError","outline","toggleBaseBg","wrapper","disabled","rootLeft","caption","toggleTextColor","toggleCaptionGap","captionLeft"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const globalClasses = prefix('toggle')({\n  handle: 'handle',\n  container: 'container',\n  containerDisabled: 'container-disabled',\n  containerLoading: 'container-loading',\n  background: 'background',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    const handleActiveWidth = `calc(${handleWidthWithBorders} - 2 * ${t.toggleBorderWidth} + ${t.toggleHandleActiveWidthIncrement})`;\n    return css`\n      display: inline-flex;\n      cursor: pointer;\n\n      &:hover .${globalClasses.handle} {\n        background: ${t.toggleBgHover};\n      }\n      &:active .${globalClasses.handle} {\n        width: ${handleActiveWidth};\n      }\n      &:active input:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders})\n          translateX(-${t.toggleHandleActiveWidthIncrement});\n      }\n    `;\n  },\n\n  handle(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleBg};\n      border-radius: ${t.toggleHandleBorderRadius};\n      bottom: ${t.toggleBorderWidth};\n      box-shadow: 0 ${t.toggleBorderWidth} 0 0 rgba(0, 0, 0, 0.15), 0 0 0 ${t.toggleBorderWidth} rgba(0, 0, 0, 0.15);\n      height: ${handleSize};\n      left: ${t.toggleBorderWidth};\n      position: absolute;\n      top: ${t.toggleBorderWidth};\n      transition: 0.2s ease-in;\n      width: ${handleSize};\n    `;\n  },\n\n  handleDisabled(t: Theme) {\n    const handleSize = `calc(${t.toggleHeight} - 2 * ${t.toggleBorderWidth})`;\n    return css`\n      background: ${t.toggleDisabledHandleBg} !important; // override root hover/active styles\n      width: ${handleSize} !important; // override root active styles\n    `;\n  },\n\n  input(t: Theme) {\n    const handleWidthWithBorders = t.toggleHeight;\n    return css`\n      position: absolute;\n      opacity: 0;\n\n      &:focus {\n        outline: none;\n      }\n      &:checked ~ .${globalClasses.container} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBgChecked};\n        background: ${t.toggleBgChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerDisabled} {\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColorDisabledChecked};\n        background: ${t.toggleBgDisabledChecked};\n        transition: background 0s 0.2s;\n      }\n      &:checked ~ .${globalClasses.containerLoading} {\n        background: ${t.toggleBorderColor};\n        box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      }\n      &:checked ~ .${globalClasses.container} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgChecked};\n      }\n      &:checked ~ .${globalClasses.containerDisabled} .${globalClasses.background} {\n        width: 70%;\n        background: ${t.toggleBgDisabledChecked};\n        border-radius: calc(${t.toggleHeight} * 0.5) 0 0 calc(${t.toggleHeight} * 0.5);\n        box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabledChecked};\n      }\n      &:checked ~ .${globalClasses.handle} {\n        transform: translateX(${t.toggleWidth}) translateX(-${handleWidthWithBorders});\n      }\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      border-radius: ${t.toggleBorderRadius};\n      box-shadow: inset 0 0 0 ${t.toggleBorderWidth} ${t.toggleBorderColor};\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      width: 100%;\n      /* fixes overflow issue in Safari: https://bugs.webkit.org/show_bug.cgi?id=98538 */\n      z-index: 0;\n    `;\n  },\n\n  containerDisabled(t: Theme) {\n    return css`\n      background: ${t.toggleBgDisabled};\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleFocusShadowColor};\n    `;\n  },\n\n  activeBackground() {\n    return css`\n      background: inherit;\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      transition: 0.2s ease-in;\n      width: 10px;\n    `;\n  },\n\n  disabledBackground(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.toggleBorderColorDisabled};\n      width: 0;\n    `;\n  },\n\n  activeBackgroundLoading(t: Theme) {\n    return css`\n      background: ${t.toggleBgActive};\n    `;\n  },\n\n  isWarning(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorWarning};\n    `;\n  },\n\n  isError(t: Theme) {\n    return css`\n      box-shadow: 0 0 0 1px ${t.outlineColorFocus}, 0 0 0 ${t.toggleOutlineWidth} ${t.toggleShadowColorError};\n    `;\n  },\n\n  outline(t: Theme) {\n    return css`\n      background: ${t.toggleBaseBg};\n      border-radius: ${t.toggleBorderRadius};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      display: inline-block;\n      height: ${t.toggleHeight};\n      position: relative;\n      width: ${t.toggleWidth};\n      flex: 1 0 ${t.toggleWidth};\n\n      &::after {\n        content: '';\n        display: inline-block;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n    `;\n  },\n\n  rootLeft() {\n    return css`\n      flex-direction: row-reverse;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 0 0 ${t.toggleCaptionGap};\n    `;\n  },\n\n  captionLeft(t: Theme) {\n    return css`\n      color: ${t.toggleTextColor};\n      padding: 0 ${t.toggleCaptionGap} 0 0;\n    `;\n  },\n});\n"]}

package/cjs/components/Token/Token.styles.js

@@ -27,12 +27,16 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      margin: ", " ", ";\n      user-select: text;\n      cursor: text;\n      color: ", ";\n\n      .", " {\n        visibility: hidden;\n      }\n    "])),
     t.tokenPaddingYDisabled, t.tokenPaddingXDisabled,
     t.tokenMarginYDisabled, t.tokenMarginXDisabled,
 
 
-    t.tokenTextColorDisabled);
+    t.tokenTextColorDisabled,
+
+    globalClasses.removeIcon);
+
+
 
   },
 
@@ -125,14 +129,9 @@ function (colors, _ref) {var _extends2;var name = _ref.name,color = _ref.color;r
 
 {
   defaultDisabled: function defaultDisabled(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n\n        .", " {\n          fill: ", ";\n          opacity: 1;\n        }\n      "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        background-color: ", ";\n        box-shadow: ", ";\n      "])),
     t.tokenDisabledBg,
-    t.tokenShadowDisabled,
-
-    globalClasses.removeIcon,
-    t.tokenTextColorDisabled);
-
-
+    t.tokenShadowDisabled);
 
   },
   defaultDisabledWarning: function defaultDisabledWarning(t) {