@skbkontur/react-ui 3.7.2 → 3.8.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.8.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.7.2...@skbkontur/react-ui@3.8.0) (2021-10-27)
+
+
+### Bug Fixes
+
+* **ComboBox:** handle falsy values correctly ([#2563](https://github.com/skbkontur/retail-ui/issues/2563)) ([2df7e09](https://github.com/skbkontur/retail-ui/commit/2df7e09ec6fd8f4ab9e999654263acbe8d989803))
+* **ModalClose:** don't s show focus outline if it's not focus by Tab ([#2565](https://github.com/skbkontur/retail-ui/issues/2565)) ([b589014](https://github.com/skbkontur/retail-ui/commit/b58901428b7bfdf52727de1345e44d1d0cd35b8e))
+* **ThemePlayground:** computed vars are visible in the ThemeEditor ([62f191e](https://github.com/skbkontur/retail-ui/commit/62f191efa0234cc72175e05dcb543284fada7d7e))
+* **Toggle:** add toggleBgDisabledChecked, toggleBorderColorDisabled, toggleBorderColorDisabledChecked theme variables ([#2584](https://github.com/skbkontur/retail-ui/issues/2584)) ([b953719](https://github.com/skbkontur/retail-ui/commit/b953719e4cd5b0d89babe1b72f5ae497a9567889))
+
+
+### Features
+
+* **Upgrades:** abillity to customize classNames prefix ([#2561](https://github.com/skbkontur/retail-ui/issues/2561)) ([fbc9ced](https://github.com/skbkontur/retail-ui/commit/fbc9ceda8d9cb9c2be7d69a7fa199cf7c9745cee))
+
+
+
+
+
 ## [3.7.2](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.7.1...@skbkontur/react-ui@3.7.2) (2021-10-25)
 
 

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

@@ -9,6 +9,7 @@ export declare const styles: {
     close(t: Theme): string;
     closeWrapper(t: Theme): string;
     disabled(t: Theme): string;
+    focus(t: Theme): string;
     headerWrapper(): string;
     header(t: Theme): string;
     body(t: Theme): string;

package/cjs/components/Modal/Modal.styles.js

@@ -1,6 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
-var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root() {
@@ -78,7 +78,7 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   close: function close(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        outline: 2px solid ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])),
     (0, _Mixins.resetButton)(),
 
 
@@ -94,15 +94,10 @@ var styles = (0, _Emotion.memoizeStyle)({
     t.modalCloseButtonClickArea,
 
 
-
     t.modalCloseButtonHoverColor,
 
 
 
-    t.borderColorFocus,
-
-
-
     t.modalCloseIconSize,
     t.modalCloseIconSize);
 
@@ -133,14 +128,21 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  focus: function focus(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])),
+    t.modalCloseButtonHoverColor,
+    t.borderColorFocus);
+
+  },
+
   headerWrapper: function headerWrapper() {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
 
   },
 
   header: function header(t) {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])),
     t.modalHeaderFontSize,
     t.modalHeaderLineHeight,
     t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft,
@@ -151,7 +153,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   body: function body(t) {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", " ", " ", ";\n    "])),
     t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft);
 
   },
@@ -160,25 +162,25 @@ var styles = (0, _Emotion.memoizeStyle)({
     var rightPadding =
     2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
 
-    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: ", "px;\n    "])),
     rightPadding);
 
   },
 
   footer: function footer(t) {
-    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", " ", " ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", " ", " ", ";\n    "])),
     t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft);
 
   },
 
   footerWrapper: function footerWrapper() {
-    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n    "])));
 
 
   },
 
   panel: function panel(t) {
-    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])),
     t.modalFooterPanelPaddingTop,
     t.modalFooterPanelPaddingBottom,
     t.modalFooterBg);
@@ -186,7 +188,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   fixedHeader: function fixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])),
 
     t.modalFixedHeaderPaddingBottom,
     t.modalFixedHeaderBg,
@@ -205,7 +207,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   fixedFooter: function fixedFooter(t) {
-    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])),
 
 
     t.modalFixedHeaderBg,
@@ -224,25 +226,25 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   headerAddPadding: function headerAddPadding() {
-    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: 22px;\n    "])));
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: 22px;\n    "])));
 
 
   },
 
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: ", ";\n    "])),
     t.modalPaddingTop);
 
   },
 
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0;\n    "])));
 
 
   },
 
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: ", ";\n    "])),
     t.modalPaddingBottom);
 
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","borderColorFocus","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"4QAAA;;AAEA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;;AAOD,GATgC;;AAWjCC,EAAAA,EAXiC,cAW9BC,CAX8B,EAWpB;AACX,eAAOF,YAAP;;;;;;AAMgBE,IAAAA,CAAC,CAACC,WANlB;AAOaD,IAAAA,CAAC,CAACE,gBAPf;;AASD,GArBgC;;AAuBjCC,EAAAA,SAvBiC,uBAuBrB;AACV,eAAOL,YAAP;;;;;;;;;;;;;;;AAeD,GAvCgC;;AAyCjCM,EAAAA,MAzCiC,kBAyC1BJ,CAzC0B,EAyChB;AACf,eAAOF,YAAP;;;;;AAKgBE,IAAAA,CAAC,CAACK,SALlB;;AAOD,GAjDgC;;AAmDjCC,EAAAA,eAnDiC,2BAmDjBN,CAnDiB,EAmDP;AACxB,eAAOF,YAAP;;;;;;;;;AASkCE,IAAAA,CAAC,CAACO,sBATpC;;;;;AAcD,GAlEgC;;AAoEjCC,EAAAA,QApEiC,sBAoEtB;AACT,eAAOV,YAAP;;;AAGD,GAxEgC;;AA0EjCW,EAAAA,KA1EiC,iBA0E3BT,CA1E2B,EA0EjB;AACd,QAAMU,OAAO,GAAGC,QAAQ,CAACX,CAAC,CAACY,uBAAH,CAAxB;AACA,eAAOd,YAAP;AACI,8BADJ;;;AAIWY,IAAAA,OAJX;AAKSA,IAAAA,OALT;;;;AASWV,IAAAA,CAAC,CAACa,qBATb;;;AAYab,IAAAA,CAAC,CAACc,yBAZf;AAaad,IAAAA,CAAC,CAACc,yBAbf;;;;AAiBad,IAAAA,CAAC,CAACe,0BAjBf;;;;AAqByBf,IAAAA,CAAC,CAACgB,gBArB3B;;;;AAyBahB,IAAAA,CAAC,CAACiB,kBAzBf;AA0BcjB,IAAAA,CAAC,CAACiB,kBA1BhB;;;;AA8BD,GA1GgC;;AA4GjCC,EAAAA,YA5GiC,wBA4GpBlB,CA5GoB,EA4GV;AACrB,QAAMU,OAAO,GAAGC,QAAQ,CAACX,CAAC,CAACY,uBAAH,CAAxB;AACA,QAAMO,aAAa,GAAGR,QAAQ,CAACX,CAAC,CAACoB,6BAAH,CAA9B;AACA,QAAMC,SAAS,GAAGV,QAAQ,CAACX,CAAC,CAACsB,0BAAH,CAA1B;AACA,QAAMC,WAAW,GAAGZ,QAAQ,CAACX,CAAC,CAACwB,2BAAH,CAA5B;AACA,QAAMC,UAAU,GAAGd,QAAQ,CAACX,CAAC,CAACiB,kBAAH,CAAR,GAAiC,IAAIP,OAArC,GAA+Ca,WAAlE;AACA,QAAMG,UAAU,GAAGf,QAAQ,CAACX,CAAC,CAACiB,kBAAH,CAAR,GAAiCP,OAAjC,GAA2CS,aAA3C,GAA2DE,SAA9E;AACA,eAAOvB,YAAP;;;AAGW2B,IAAAA,UAAU,GAAGJ,SAHxB;AAIYK,IAAAA,UAJZ;;AAMD,GAzHgC;;AA2HjCC,EAAAA,QA3HiC,oBA2HxB3B,CA3HwB,EA2Hd;AACjB,eAAOF,YAAP;;;AAGWE,IAAAA,CAAC,CAAC4B,6BAHb;;AAKD,GAjIgC;;AAmIjCC,EAAAA,aAnIiC,2BAmIjB;AACd,eAAO/B,YAAP;;;AAGD,GAvIgC;;AAyIjCgC,EAAAA,MAzIiC,kBAyI1B9B,CAzI0B,EAyIhB;AACf,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAAC+B,mBADjB;AAEiB/B,IAAAA,CAAC,CAACgC,qBAFnB;AAGahC,IAAAA,CAAC,CAACiC,qBAHf,EAGwCjC,CAAC,CAACkC,iBAH1C,EAG+DlC,CAAC,CAACmC,wBAHjE,EAG6FnC,CAAC,CAACoC,gBAH/F;;;AAMWpC,IAAAA,CAAC,CAACqC,oBANb;;AAQD,GAlJgC;;AAoJjCC,EAAAA,IApJiC,gBAoJ5BtC,CApJ4B,EAoJlB;AACb,eAAOF,YAAP;AACeE,IAAAA,CAAC,CAACkC,iBADjB,EACsClC,CAAC,CAACuC,sBADxC,EACkEvC,CAAC,CAACoC,gBADpE;;AAGD,GAxJgC;;AA0JjCI,EAAAA,eA1JiC,2BA0JjBxC,CA1JiB,EA0JP;AACxB,QAAMyC,YAAY;AAChB,QAAI9B,QAAQ,CAACX,CAAC,CAACY,uBAAH,CAAZ,GAA0CD,QAAQ,CAACX,CAAC,CAACiB,kBAAH,CAAlD,GAA2EN,QAAQ,CAACX,CAAC,CAAC0C,mBAAH,CADrF;;AAGA,eAAO5C,YAAP;AACmB2C,IAAAA,YADnB;;AAGD,GAjKgC;;AAmKjCE,EAAAA,MAnKiC,kBAmK1B3C,CAnK0B,EAmKhB;AACf,eAAOF,YAAP;AACaE,IAAAA,CAAC,CAAC4C,qBADf,EACwC5C,CAAC,CAACkC,iBAD1C,EAC+DlC,CAAC,CAAC6C,wBADjE,EAC6F7C,CAAC,CAACoC,gBAD/F;;AAGD,GAvKgC;;AAyKjCU,EAAAA,aAzKiC,2BAyKjB;AACd,eAAOhD,YAAP;;;AAGD,GA7KgC;;AA+KjCiD,EAAAA,KA/KiC,iBA+K3B/C,CA/K2B,EA+KjB;AACd,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAACgD,0BADnB;AAEoBhD,IAAAA,CAAC,CAACiD,6BAFtB;AAGgBjD,IAAAA,CAAC,CAACkD,aAHlB;;AAKD,GArLgC;;AAuLjCC,EAAAA,WAvLiC,uBAuLrBnD,CAvLqB,EAuLX;AACpB,eAAOF,YAAP;;AAEoBE,IAAAA,CAAC,CAACoD,6BAFtB;AAGgBpD,IAAAA,CAAC,CAACqD,kBAHlB;;;;;;;;;;AAakBrD,IAAAA,CAAC,CAACsD,sBAbpB;;;AAgBD,GAxMgC;;AA0MjCC,EAAAA,WA1MiC,uBA0MrBvD,CA1MqB,EA0MX;AACpB,eAAOF,YAAP;;;AAGgBE,IAAAA,CAAC,CAACqD,kBAHlB;;;;;;;;;;AAakBrD,IAAAA,CAAC,CAACwD,sBAbpB;;;AAgBD,GA3NgC;;AA6NjCC,EAAAA,gBA7NiC,8BA6Nd;AACjB,eAAO3D,YAAP;;;AAGD,GAjOgC;;AAmOjC4D,EAAAA,iBAnOiC,6BAmOf1D,CAnOe,EAmOL;AAC1B,eAAOF,YAAP;AACiBE,IAAAA,CAAC,CAAC2D,eADnB;;AAGD,GAvOgC;;AAyOjCC,EAAAA,kBAzOiC,gCAyOZ;AACnB,eAAO9D,YAAP;;;AAGD,GA7OgC;;AA+OjC+D,EAAAA,sBA/OiC,kCA+OV7D,CA/OU,EA+OA;AAC/B,eAAOF,YAAP;AACoBE,IAAAA,CAAC,CAAC8D,kBADtB;;AAGD,GAnPgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.bgDefault};\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:focus,\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      &:focus {\n        outline: 2px solid ${t.borderColorFocus};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.bgDefault};\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n});\n"]}

package/cjs/components/Modal/ModalClose.js

@@ -3,21 +3,41 @@
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
 
 
 var _Modal = require("./Modal.styles");
 
 function ModalClose(_ref) {var _cx;var disableClose = _ref.disableClose,requestClose = _ref.requestClose;
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);var _React$useState =
+  _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
 
   return /*#__PURE__*/(
     _react.default.createElement("button", {
       className: (0, _Emotion.cx)((_cx = {}, _cx[
       _Modal.styles.close(theme)] = true, _cx[
-      _Modal.styles.disabled(theme)] = disableClose, _cx)),
+      _Modal.styles.disabled(theme)] = disableClose, _cx[
+      _Modal.styles.focus(theme)] = focusedByTab, _cx)),
 
       onClick: requestClose,
-      "data-tid": "modal-close" }, /*#__PURE__*/
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-tid": "modal-close",
+      tabIndex: disableClose ? -1 : 0 }, /*#__PURE__*/
 
     _react.default.createElement(_CrossIcon.CrossIcon, null)));
 

package/cjs/components/Modal/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","styles","close","disabled"],"mappings":"8JAAA;;AAEA;AACA;AACA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRC,oBAAOC,KAAP,CAAaH,KAAb,CADQ,IACc,IADd;AAERE,oBAAOE,QAAP,CAAgBJ,KAAhB,CAFQ,IAEiBF,YAFjB,OADb;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,iCAAC,oBAAD,OARF,CADF;;;AAYD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <button\n      className={cx({\n        [styles.close(theme)]: true,\n        [styles.disabled(theme)]: disableClose,\n      })}\n      onClick={requestClose}\n      data-tid=\"modal-close\"\n    >\n      <CrossIcon />\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","React","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","keyListener","isTabPressed","handleBlur","styles","close","disabled","focus"],"mappings":"8JAAA;;AAEA;AACA;AACA;AACA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd,CADqE;AAE7BC,iBAAMC,QAAN,CAAe,KAAf,CAF6B,CAE9DC,YAF8D,sBAEhDC,eAFgD;;AAIrE,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BJ,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBL,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE;AACE,MAAA,SAAS,EAAE;AACRM,oBAAOC,KAAP,CAAaZ,KAAb,CADQ,IACc,IADd;AAERW,oBAAOE,QAAP,CAAgBb,KAAhB,CAFQ,IAEiBF,YAFjB;AAGRa,oBAAOG,KAAP,CAAad,KAAb,CAHQ,IAGcI,YAHd,OADb;;AAME,MAAA,OAAO,EAAEL,YANX;AAOE,MAAA,OAAO,EAAEO,WAPX;AAQE,MAAA,MAAM,EAAEI,UARV;AASE,kBAAS,aATX;AAUE,MAAA,QAAQ,EAAEZ,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAVhC;;AAYE,iCAAC,oBAAD,OAZF,CADF;;;AAgBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\n  const theme = useContext(ThemeContext);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  return (\n    <button\n      className={cx({\n        [styles.close(theme)]: true,\n        [styles.disabled(theme)]: disableClose,\n        [styles.focus(theme)]: focusedByTab,\n      })}\n      onClick={requestClose}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      data-tid=\"modal-close\"\n      tabIndex={disableClose ? -1 : 0}\n    >\n      <CrossIcon />\n    </button>\n  );\n}\n"]}

package/cjs/components/Toggle/Toggle.js

@@ -185,6 +185,7 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
 
 
+
 
 
     inputRef = function (element) {
@@ -226,6 +227,6 @@ Toggle = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
 
     };_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","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","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                  })}\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"]}
+{"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,26 +179,26 @@ 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      color: ", ";\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      color: ", ";\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);
 

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