@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,290 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Checkbox = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+
+var _keyListener = require("../../lib/events/keyListener");
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _px = require("../../internal/icons/16px");
+var _client = require("../../lib/client");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _fixFirefoxModifiedClickOnLabel = require("../../lib/events/fixFirefoxModifiedClickOnLabel");
+
+var _Checkbox = require("./Checkbox.styles");var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Checkbox = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Checkbox, _React$Component);function Checkbox() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    state = {
+      focusedByTab: false,
+      indeterminate: _this.props.initialIndeterminate || false };_this.
+
+
+    theme = void 0;_this.
+    input = /*#__PURE__*/_react.default.createRef();_this.
+
+    componentDidMount = function () {
+      if (_this.state.indeterminate && _this.input.current) {
+        _this.input.current.indeterminate = true;
+      }
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    setIndeterminate = function () {
+      _this.setState({
+        indeterminate: true });
+
+      if (_this.input.current) {
+        _this.input.current.indeterminate = true;
+      }
+    };_this.
+
+
+
+
+
+    resetIndeterminate = function () {
+      _this.setState({
+        indeterminate: false });
+
+      if (_this.input.current) {
+        _this.input.current.indeterminate = false;
+      }
+    };_this.
+
+    renderMain = function (props) {var _cx, _cx3, _cx4;var
+
+      error =
+
+
+
+
+
+
+
+
+      props.error,warning = props.warning,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,onMouseOver = props.onMouseOver,onValueChange = props.onValueChange,type = props.type,initialIndeterminate = props.initialIndeterminate,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["error", "warning", "onMouseEnter", "onMouseLeave", "onMouseOver", "onValueChange", "type", "initialIndeterminate"]);
+      var isIndeterminate = _this.state.indeterminate;
+
+      var rootClass = (0, _Emotion.cx)((_cx = {}, _cx[
+      _Checkbox.styles.root(_this.theme)] = true, _cx[
+      _Checkbox.styles.rootFallback()] = _client.isIE11 || _client.isEdge, _cx[
+      _Checkbox.styles.rootChecked(_this.theme)] = props.checked || isIndeterminate, _cx[
+      _Checkbox.styles.disabled(_this.theme)] = Boolean(props.disabled), _cx));
+
+
+      var inputProps = (0, _extends2.default)({},
+      rest, {
+        type: 'checkbox',
+        className: _Checkbox.styles.input(),
+        onChange: _this.handleChange,
+        onFocus: _this.handleFocus,
+        onBlur: _this.handleBlur,
+        onClick: _this.handleClick,
+        ref: _this.input });
+
+
+      var caption = null;
+      if (_this.props.children) {var _cx2;
+        var captionClass = (0, _Emotion.cx)((_cx2 = {}, _cx2[
+        _Checkbox.styles.caption(_this.theme)] = true, _cx2[
+        _Checkbox.styles.captionIE11()] = _client.isIE11 || _client.isEdge, _cx2[
+        _Checkbox.styles.disabled(_this.theme)] = Boolean(props.disabled), _cx2));
+
+        caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, _this.props.children);
+      }
+
+      var iconClass = (0, _Emotion.cx)((_cx3 = {}, _cx3[
+      _Checkbox.styles.icon(_this.theme)] = true, _cx3[
+      _Checkbox.styles.iconUnchecked()] = !props.checked && !isIndeterminate, _cx3));
+
+
+      var box = /*#__PURE__*/
+      _react.default.createElement("div", { className: (0, _Emotion.cx)(_Checkbox.styles.boxWrapper(_this.theme)) }, /*#__PURE__*/
+      _react.default.createElement("div", {
+        className: (0, _Emotion.cx)(_Checkbox.styles.box(_this.theme), _Checkbox.globalClasses.box, (_cx4 = {}, _cx4[
+        _Checkbox.styles.boxChecked(_this.theme)] = props.checked || isIndeterminate, _cx4[
+        _Checkbox.styles.boxFocus(_this.theme)] = _this.state.focusedByTab, _cx4[
+        _Checkbox.styles.boxError(_this.theme)] = props.error, _cx4[
+        _Checkbox.styles.boxWarning(_this.theme)] = props.warning, _cx4[
+        _Checkbox.styles.boxDisabled(_this.theme)] = props.disabled, _cx4)) },
+
+
+      isIndeterminate && /*#__PURE__*/_react.default.createElement(_px.SquareIcon, { className: iconClass }) || /*#__PURE__*/_react.default.createElement(_px.OkIcon, { className: iconClass })));
+
+
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement("label", {
+          className: rootClass,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+          onMouseOver: onMouseOver,
+          onClick: (0, _fixFirefoxModifiedClickOnLabel.fixFirefoxModifiedClickOnLabel)(_this.input) }, /*#__PURE__*/
+
+        _react.default.createElement("input", inputProps),
+        box,
+        caption));
+
+
+    };_this.
+
+    handleFocus = function (e) {
+      if (!_this.props.disabled) {
+        // focus event fires before keyDown eventlistener
+        // so we should check tabPressed in async way
+        requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
+            _this.setState({ focusedByTab: true });
+          }
+        });
+
+        if (_this.props.onFocus) {
+          _this.props.onFocus(e);
+        }
+      }
+    };_this.
+
+    handleBlur = function (e) {
+      _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
+      _this.setState({ focusedByTab: false });
+    };_this.
+
+    handleChange = function (event) {
+      var checked = event.currentTarget.checked;
+      _this.props.onValueChange == null ? void 0 : _this.props.onValueChange(checked);
+
+      _this.resetIndeterminate();
+
+      _this.props.onChange == null ? void 0 : _this.props.onChange(event);
+    };_this.
+
+    handleClick = function (e) {
+      _this.props.onClick == null ? void 0 : _this.props.onClick(e);
+      // support IE11's and old Edge's special behavior
+      // https://github.com/jquery/jquery/issues/1698
+      if (_this.state.indeterminate && (_client.isIE11 || _client.isEdge)) {
+        _this.resetIndeterminate();
+        // simulate correct behavior only if onValueChange is used
+        // because we cant simulate real native onChange event
+        if (_this.props.onValueChange && _this.input.current) {
+          var checked = !_this.input.current.checked;
+
+          if (_this.props.checked === undefined) {
+            // in case of uncontrolled mode
+            _this.input.current.checked = checked;
+          }
+
+          _this.props.onValueChange(checked);
+        }
+      }
+    };return _this;}var _proto = Checkbox.prototype;_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {if (nextProps.checked !== this.props.checked) {this.resetIndeterminate();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, _this2.props, _this2.renderMain);});} /**
+   * Программная установка фокуса чекбоксу.
+   * @public
+   */;_proto.focus = function focus() {var _this$input$current;_keyListener.keyListener.isTabPressed = true;(_this$input$current = this.input.current) == null ? void 0 : _this$input$current.focus();} /**
+   * Программное снятие фокуса с чекбокса.
+   * @public
+   */;_proto.blur = function blur() {var _this$input$current2;(_this$input$current2 = this.input.current) == null ? void 0 : _this$input$current2.blur();} /**
+   * Устанавливает чекбокс в HTML-состояние `indeterminate`.
+   * @public
+   */;return Checkbox;}(_react.default.Component);exports.Checkbox = Checkbox;Checkbox.__KONTUR_REACT_UI__ = 'Checkbox';Checkbox.propTypes = { checked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func, onBlur: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func };

package/cjs/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Checkbox.tsx"],"names":["Checkbox","state","focusedByTab","indeterminate","props","initialIndeterminate","theme","input","React","createRef","componentDidMount","current","setIndeterminate","setState","resetIndeterminate","renderMain","error","warning","onMouseEnter","onMouseLeave","onMouseOver","onValueChange","type","rest","isIndeterminate","rootClass","styles","root","rootFallback","isIE11","isEdge","rootChecked","checked","disabled","Boolean","inputProps","className","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","onClick","handleClick","ref","caption","children","captionClass","captionIE11","iconClass","icon","iconUnchecked","box","boxWrapper","globalClasses","boxChecked","boxFocus","boxError","boxWarning","boxDisabled","e","requestAnimationFrame","keyListener","isTabPressed","event","currentTarget","undefined","UNSAFE_componentWillReceiveProps","nextProps","render","focus","blur","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","func"],"mappings":"kcAAA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA,6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDaA,Q;;;;;;;;;;;;;;;AAeJC,IAAAA,K,GAAQ;AACbC,MAAAA,YAAY,EAAE,KADD;AAEbC,MAAAA,aAAa,EAAE,MAAKC,KAAL,CAAWC,oBAAX,IAAmC,KAFrC,E;;;AAKPC,IAAAA,K;AACAC,IAAAA,K,gBAAQC,eAAMC,SAAN,E;;AAETC,IAAAA,iB,GAAoB,YAAM;AAC/B,UAAI,MAAKT,KAAL,CAAWE,aAAX,IAA4B,MAAKI,KAAL,CAAWI,OAA3C,EAAoD;AAClD,cAAKJ,KAAL,CAAWI,OAAX,CAAmBR,aAAnB,GAAmC,IAAnC;AACD;AACF,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCMS,IAAAA,gB,GAAmB,YAAM;AAC9B,YAAKC,QAAL,CAAc;AACZV,QAAAA,aAAa,EAAE,IADH,EAAd;;AAGA,UAAI,MAAKI,KAAL,CAAWI,OAAf,EAAwB;AACtB,cAAKJ,KAAL,CAAWI,OAAX,CAAmBR,aAAnB,GAAmC,IAAnC;AACD;AACF,K;;;;;;AAMMW,IAAAA,kB,GAAqB,YAAM;AAChC,YAAKD,QAAL,CAAc;AACZV,QAAAA,aAAa,EAAE,KADH,EAAd;;AAGA,UAAI,MAAKI,KAAL,CAAWI,OAAf,EAAwB;AACtB,cAAKJ,KAAL,CAAWI,OAAX,CAAmBR,aAAnB,GAAmC,KAAnC;AACD;AACF,K;;AAEOY,IAAAA,U,GAAa,UAACX,KAAD,EAAkD;;AAEnEY,MAAAA,KAFmE;;;;;;;;;AAWjEZ,MAAAA,KAXiE,CAEnEY,KAFmE,CAGnEC,OAHmE,GAWjEb,KAXiE,CAGnEa,OAHmE,CAInEC,YAJmE,GAWjEd,KAXiE,CAInEc,YAJmE,CAKnEC,YALmE,GAWjEf,KAXiE,CAKnEe,YALmE,CAMnEC,WANmE,GAWjEhB,KAXiE,CAMnEgB,WANmE,CAOnEC,aAPmE,GAWjEjB,KAXiE,CAOnEiB,aAPmE,CAQnEC,IARmE,GAWjElB,KAXiE,CAQnEkB,IARmE,CASnEjB,oBATmE,GAWjED,KAXiE,CASnEC,oBATmE,CAUhEkB,IAVgE,+CAWjEnB,KAXiE;AAYrE,UAAMoB,eAAe,GAAG,MAAKvB,KAAL,CAAWE,aAAnC;;AAEA,UAAMsB,SAAS,GAAG;AACfC,uBAAOC,IAAP,CAAY,MAAKrB,KAAjB,CADe,IACW,IADX;AAEfoB,uBAAOE,YAAP,EAFe,IAESC,kBAAUC,cAFnB;AAGfJ,uBAAOK,WAAP,CAAmB,MAAKzB,KAAxB,CAHe,IAGkBF,KAAK,CAAC4B,OAAN,IAAiBR,eAHnC;AAIfE,uBAAOO,QAAP,CAAgB,MAAK3B,KAArB,CAJe,IAIe4B,OAAO,CAAC9B,KAAK,CAAC6B,QAAP,CAJtB,OAAlB;;;AAOA,UAAME,UAAU;AACXZ,MAAAA,IADW;AAEdD,QAAAA,IAAI,EAAE,UAFQ;AAGdc,QAAAA,SAAS,EAAEV,iBAAOnB,KAAP,EAHG;AAId8B,QAAAA,QAAQ,EAAE,MAAKC,YAJD;AAKdC,QAAAA,OAAO,EAAE,MAAKC,WALA;AAMdC,QAAAA,MAAM,EAAE,MAAKC,UANC;AAOdC,QAAAA,OAAO,EAAE,MAAKC,WAPA;AAQdC,QAAAA,GAAG,EAAE,MAAKtC,KARI,GAAhB;;;AAWA,UAAIuC,OAAO,GAAG,IAAd;AACA,UAAI,MAAK1C,KAAL,CAAW2C,QAAf,EAAyB;AACvB,YAAMC,YAAY,GAAG;AAClBtB,yBAAOoB,OAAP,CAAe,MAAKxC,KAApB,CADkB,IACW,IADX;AAElBoB,yBAAOuB,WAAP,EAFkB,IAEKpB,kBAAUC,cAFf;AAGlBJ,yBAAOO,QAAP,CAAgB,MAAK3B,KAArB,CAHkB,IAGY4B,OAAO,CAAC9B,KAAK,CAAC6B,QAAP,CAHnB,QAArB;;AAKAa,QAAAA,OAAO,gBAAG,uCAAM,SAAS,EAAEE,YAAjB,IAAgC,MAAK5C,KAAL,CAAW2C,QAA3C,CAAV;AACD;;AAED,UAAMG,SAAS,GAAG;AACfxB,uBAAOyB,IAAP,CAAY,MAAK7C,KAAjB,CADe,IACW,IADX;AAEfoB,uBAAO0B,aAAP,EAFe,IAEU,CAAChD,KAAK,CAAC4B,OAAP,IAAkB,CAACR,eAF7B,QAAlB;;;AAKA,UAAM6B,GAAG;AACP,4CAAK,SAAS,EAAE,iBAAG3B,iBAAO4B,UAAP,CAAkB,MAAKhD,KAAvB,CAAH,CAAhB;AACE;AACE,QAAA,SAAS,EAAE,iBAAGoB,iBAAO2B,GAAP,CAAW,MAAK/C,KAAhB,CAAH,EAA2BiD,wBAAcF,GAAzC;AACR3B,yBAAO8B,UAAP,CAAkB,MAAKlD,KAAvB,CADQ,IACwBF,KAAK,CAAC4B,OAAN,IAAiBR,eADzC;AAERE,yBAAO+B,QAAP,CAAgB,MAAKnD,KAArB,CAFQ,IAEsB,MAAKL,KAAL,CAAWC,YAFjC;AAGRwB,yBAAOgC,QAAP,CAAgB,MAAKpD,KAArB,CAHQ,IAGsBF,KAAK,CAACY,KAH5B;AAIRU,yBAAOiC,UAAP,CAAkB,MAAKrD,KAAvB,CAJQ,IAIwBF,KAAK,CAACa,OAJ9B;AAKRS,yBAAOkC,WAAP,CAAmB,MAAKtD,KAAxB,CALQ,IAKyBF,KAAK,CAAC6B,QAL/B,QADb;;;AASIT,MAAAA,eAAe,iBAAI,6BAAC,cAAD,IAAY,SAAS,EAAE0B,SAAvB,GAApB,iBAA6D,6BAAC,UAAD,IAAQ,SAAS,EAAEA,SAAnB,GAThE,CADF,CADF;;;;;AAgBA;AACE;AACE,UAAA,SAAS,EAAEzB,SADb;AAEE,UAAA,YAAY,EAAEP,YAFhB;AAGE,UAAA,YAAY,EAAEC,YAHhB;AAIE,UAAA,WAAW,EAAEC,WAJf;AAKE,UAAA,OAAO,EAAE,oEAA+B,MAAKb,KAApC,CALX;;AAOE,8CAAW4B,UAAX,CAPF;AAQGkB,QAAAA,GARH;AASGP,QAAAA,OATH,CADF;;;AAaD,K;;AAEON,IAAAA,W,GAAc,UAACqB,CAAD,EAA8B;AAClD,UAAI,CAAC,MAAKzD,KAAL,CAAW6B,QAAhB,EAA0B;AACxB;AACA;AACA6B,QAAAA,qBAAqB,CAAC,YAAM;AAC1B,cAAIC,yBAAYC,YAAhB,EAA8B;AAC5B,kBAAKnD,QAAL,CAAc,EAAEX,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,SAJoB,CAArB;;AAMA,YAAI,MAAKE,KAAL,CAAWmC,OAAf,EAAwB;AACtB,gBAAKnC,KAAL,CAAWmC,OAAX,CAAmBsB,CAAnB;AACD;AACF;AACF,K;;AAEOnB,IAAAA,U,GAAa,UAACmB,CAAD,EAA2C;AAC9D,YAAKzD,KAAL,CAAWqC,MAAX,0BAAKrC,KAAL,CAAWqC,MAAX,CAAoBoB,CAApB;AACA,YAAKhD,QAAL,CAAc,EAAEX,YAAY,EAAE,KAAhB,EAAd;AACD,K;;AAEOoC,IAAAA,Y,GAAe,UAAC2B,KAAD,EAAgD;AACrE,UAAMjC,OAAO,GAAGiC,KAAK,CAACC,aAAN,CAAoBlC,OAApC;AACA,YAAK5B,KAAL,CAAWiB,aAAX,0BAAKjB,KAAL,CAAWiB,aAAX,CAA2BW,OAA3B;;AAEA,YAAKlB,kBAAL;;AAEA,YAAKV,KAAL,CAAWiC,QAAX,0BAAKjC,KAAL,CAAWiC,QAAX,CAAsB4B,KAAtB;AACD,K;;AAEOrB,IAAAA,W,GAAc,UAACiB,CAAD,EAA2C;AAC/D,YAAKzD,KAAL,CAAWuC,OAAX,0BAAKvC,KAAL,CAAWuC,OAAX,CAAqBkB,CAArB;AACA;AACA;AACA,UAAI,MAAK5D,KAAL,CAAWE,aAAX,KAA6B0B,kBAAUC,cAAvC,CAAJ,EAAoD;AAClD,cAAKhB,kBAAL;AACA;AACA;AACA,YAAI,MAAKV,KAAL,CAAWiB,aAAX,IAA4B,MAAKd,KAAL,CAAWI,OAA3C,EAAoD;AAClD,cAAMqB,OAAO,GAAG,CAAC,MAAKzB,KAAL,CAAWI,OAAX,CAAmBqB,OAApC;;AAEA,cAAI,MAAK5B,KAAL,CAAW4B,OAAX,KAAuBmC,SAA3B,EAAsC;AACpC;AACA,kBAAK5D,KAAL,CAAWI,OAAX,CAAmBqB,OAAnB,GAA6BA,OAA7B;AACD;;AAED,gBAAK5B,KAAL,CAAWiB,aAAX,CAAyBW,OAAzB;AACD;AACF;AACF,K,sDA3LMoC,gC,GAAP,0CAAwCC,SAAxC,EAAkE,CAChE,IAAIA,SAAS,CAACrC,OAAV,KAAsB,KAAK5B,KAAL,CAAW4B,OAArC,EAA8C,CAC5C,KAAKlB,kBAAL,GACD,CACF,C,QAEMwD,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAAChE,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACF,KAAxB,EAAgC,MAAI,CAACW,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,CAED;AACF;AACA;AACA,K,QACSwD,K,GAAP,iBAAe,yBACbR,yBAAYC,YAAZ,GAA2B,IAA3B,CACA,4BAAKzD,KAAL,CAAWI,OAAX,yCAAoB4D,KAApB,GACD,C,CAED;AACF;AACA;AACA,K,QACSC,I,GAAP,gBAAc,0BACZ,6BAAKjE,KAAL,CAAWI,OAAX,0CAAoB6D,IAApB,GACD,C,CAED;AACF;AACA;AACA,K,mBAlE8BhE,eAAMiE,S,8BAAvBzE,Q,CACG0E,mB,GAAsB,U,CADzB1E,Q,CAGG2E,S,GAAY,EACxB3C,OAAO,EAAE4C,mBAAUC,IADK,EAExB5C,QAAQ,EAAE2C,mBAAUC,IAFI,EAGxB7D,KAAK,EAAE4D,mBAAUC,IAHO,EAIxB5D,OAAO,EAAE2D,mBAAUC,IAJK,EAKxBxD,aAAa,EAAEuD,mBAAUE,IALD,EAMxBrC,MAAM,EAAEmC,mBAAUE,IANM,EAOxB5D,YAAY,EAAE0D,mBAAUE,IAPA,EAQxB3D,YAAY,EAAEyD,mBAAUE,IARA,EASxB1D,WAAW,EAAEwD,mBAAUE,IATC,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { OkIcon, SquareIcon } from '../../internal/icons/16px';\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel';\n\nimport { styles, globalClasses } from './Checkbox.styles';\n\nexport interface CheckboxProps\n  extends CommonProps,\n    Override<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      {\n        /**\n         * Контент `label`\n         */\n        children?: React.ReactNode;\n        /**\n         * Cостояние валидации при ошибке.\n         */\n        error?: boolean;\n        /**\n         * Cостояние валидации при предупреждении.\n         */\n        warning?: boolean;\n        /**\n         * HTML-событие `mouseenter`.\n         */\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `mouseleave`.\n         */\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * HTML-событие `mouseover`.\n         */\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n        /**\n         * Функция, вызываемая при изменении `value`.\n         */\n        onValueChange?: (value: boolean) => void;\n        /**\n         * HTML-событие `onblur`.\n         */\n        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n        /**\n         * [Неопределённое состояние](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) чекбокса из HTML.\n         */\n        initialIndeterminate?: boolean;\n      }\n    > {}\n\nexport interface CheckboxState {\n  focusedByTab: boolean;\n  indeterminate: boolean;\n}\n\nexport class Checkbox extends React.Component<CheckboxProps, CheckboxState> {\n  public static __KONTUR_REACT_UI__ = 'Checkbox';\n\n  public static propTypes = {\n    checked: PropTypes.bool,\n    disabled: PropTypes.bool,\n    error: PropTypes.bool,\n    warning: PropTypes.bool,\n    onValueChange: PropTypes.func,\n    onBlur: PropTypes.func,\n    onMouseEnter: PropTypes.func,\n    onMouseLeave: PropTypes.func,\n    onMouseOver: PropTypes.func,\n  };\n\n  public state = {\n    focusedByTab: false,\n    indeterminate: this.props.initialIndeterminate || false,\n  };\n\n  private theme!: Theme;\n  private input = React.createRef<HTMLInputElement>();\n\n  public componentDidMount = () => {\n    if (this.state.indeterminate && this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n  };\n\n  public UNSAFE_componentWillReceiveProps(nextProps: CheckboxProps) {\n    if (nextProps.checked !== this.props.checked) {\n      this.resetIndeterminate();\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Программная установка фокуса чекбоксу.\n   * @public\n   */\n  public focus() {\n    keyListener.isTabPressed = true;\n    this.input.current?.focus();\n  }\n\n  /**\n   * Программное снятие фокуса с чекбокса.\n   * @public\n   */\n  public blur() {\n    this.input.current?.blur();\n  }\n\n  /**\n   * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n   * @public\n   */\n  public setIndeterminate = () => {\n    this.setState({\n      indeterminate: true,\n    });\n    if (this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n  };\n\n  /**\n   * Снимает с чекбокса HTML-состояние `indeterminate`.\n   * @public\n   */\n  public resetIndeterminate = () => {\n    this.setState({\n      indeterminate: false,\n    });\n    if (this.input.current) {\n      this.input.current.indeterminate = false;\n    }\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<CheckboxProps>) => {\n    const {\n      error,\n      warning,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onValueChange,\n      type,\n      initialIndeterminate,\n      ...rest\n    } = props;\n    const isIndeterminate = this.state.indeterminate;\n\n    const rootClass = cx({\n      [styles.root(this.theme)]: true,\n      [styles.rootFallback()]: isIE11 || isEdge,\n      [styles.rootChecked(this.theme)]: props.checked || isIndeterminate,\n      [styles.disabled(this.theme)]: Boolean(props.disabled),\n    });\n\n    const inputProps = {\n      ...rest,\n      type: 'checkbox',\n      className: styles.input(),\n      onChange: this.handleChange,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onClick: this.handleClick,\n      ref: this.input,\n    };\n\n    let caption = null;\n    if (this.props.children) {\n      const captionClass = cx({\n        [styles.caption(this.theme)]: true,\n        [styles.captionIE11()]: isIE11 || isEdge,\n        [styles.disabled(this.theme)]: Boolean(props.disabled),\n      });\n      caption = <span className={captionClass}>{this.props.children}</span>;\n    }\n\n    const iconClass = cx({\n      [styles.icon(this.theme)]: true,\n      [styles.iconUnchecked()]: !props.checked && !isIndeterminate,\n    });\n\n    const box = (\n      <div className={cx(styles.boxWrapper(this.theme))}>\n        <div\n          className={cx(styles.box(this.theme), globalClasses.box, {\n            [styles.boxChecked(this.theme)]: props.checked || isIndeterminate,\n            [styles.boxFocus(this.theme)]: this.state.focusedByTab,\n            [styles.boxError(this.theme)]: props.error,\n            [styles.boxWarning(this.theme)]: props.warning,\n            [styles.boxDisabled(this.theme)]: props.disabled,\n          })}\n        >\n          {(isIndeterminate && <SquareIcon className={iconClass} />) || <OkIcon className={iconClass} />}\n        </div>\n      </div>\n    );\n\n    return (\n      <label\n        className={rootClass}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onMouseOver={onMouseOver}\n        onClick={fixFirefoxModifiedClickOnLabel(this.input)}\n      >\n        <input {...inputProps} />\n        {box}\n        {caption}\n      </label>\n    );\n  };\n\n  private handleFocus = (e: React.FocusEvent<any>) => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n\n      if (this.props.onFocus) {\n        this.props.onFocus(e);\n      }\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    this.props.onBlur?.(e);\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = event.currentTarget.checked;\n    this.props.onValueChange?.(checked);\n\n    this.resetIndeterminate();\n\n    this.props.onChange?.(event);\n  };\n\n  private handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    this.props.onClick?.(e);\n    // support IE11's and old Edge's special behavior\n    // https://github.com/jquery/jquery/issues/1698\n    if (this.state.indeterminate && (isIE11 || isEdge)) {\n      this.resetIndeterminate();\n      // simulate correct behavior only if onValueChange is used\n      // because we cant simulate real native onChange event\n      if (this.props.onValueChange && this.input.current) {\n        const checked = !this.input.current.checked;\n\n        if (this.props.checked === undefined) {\n          // in case of uncontrolled mode\n          this.input.current.checked = checked;\n        }\n\n        this.props.onValueChange(checked);\n      }\n    }\n  };\n}\n"]}

package/cjs/components/Checkbox/Checkbox.md

@@ -0,0 +1,104 @@
+Базовый пример чекбокса.
+
+```jsx harmony
+const [checked, setChecked] = React.useState(false);
+
+<Checkbox checked={checked} onValueChange={setChecked}>
+  Обычный чекбокс
+</Checkbox>;
+```
+
+У чекбокса есть несколько состояний.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+const CheckboxWithState = ({children, ...props}) => {
+  const [checked, setChecked] = React.useState(false);
+
+  return (
+    <Checkbox checked={checked} onValueChange={setChecked} {...props}>
+      {children}
+    </Checkbox>
+  )
+};
+
+<Gapped vertical>
+  <CheckboxWithState>
+    Обычный чекбокс
+  </CheckboxWithState>
+  <CheckboxWithState error>
+    Чекбокс в состоянии ошибки
+  </CheckboxWithState>
+  <CheckboxWithState warning>
+    Чекбокс в состоянии предупреждения
+  </CheckboxWithState>
+</Gapped>
+```
+
+Пример использования методов чекбокса `focus()` и `blur()`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    ref={el => checkboxInstance = el}
+    checked={checked}
+    onValueChange={setChecked}
+    >
+    Пример чекбокса с программным фокусом
+  </Checkbox>
+  <Gapped gap={12}>
+    <Button
+      onClick={() => {
+        checkboxInstance.focus();
+      }}
+    >
+      Дать фокус
+    </Button>
+    <Button
+      onClick={() => {
+        checkboxInstance.blur();
+      }}
+    >
+      Забрать фокус
+    </Button>
+  </Gapped>
+</Gapped>
+```
+
+Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния [`indeterminate`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate) из HTML.
+
+Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
+
+```jsx harmony
+import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
+
+const [checked, setChecked] = React.useState(false);
+
+let checkboxInstance = React.useRef(null);
+
+<Gapped vertical>
+  <Checkbox
+    initialIndeterminate
+    checked={checked}
+    onValueChange={setChecked}
+    ref={el => checkboxInstance = el}
+  >
+    Неопределённый чекбокс
+  </Checkbox>
+  <Gapped>
+    <Button onClick={() => checkboxInstance.setIndeterminate()}>
+      Перевести в неопределённое состояние
+    </Button>
+    <Button onClick={() => checkboxInstance.resetIndeterminate()}>
+      Сбросить неопределённое состояние
+    </Button>
+  </Gapped>
+</Gapped>
+```

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

@@ -0,0 +1,23 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    box: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    rootChecked(t: Theme): string;
+    rootFallback(): string;
+    rootWrapperIE11(): string;
+    boxWrapper(t: Theme): string;
+    box(t: Theme): string;
+    input(): string;
+    boxWarning(t: Theme): string;
+    boxError(t: Theme): string;
+    boxChecked(t: Theme): string;
+    boxFocus(t: Theme): string;
+    boxDisabled(t: Theme): string;
+    disabled(t: Theme): string;
+    icon(t: Theme): string;
+    iconUnchecked(): string;
+    caption(t: Theme): string;
+    captionIE11(): string;
+};

package/cjs/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,195 @@
+"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 _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+
+var globalClasses = (0, _Emotion.prefix)('checkbox')({
+  box: 'box' });exports.globalClasses = globalClasses;
+
+
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "], ["\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " 0;\n\n      &:hover .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n\n      &:active .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ", ";\n        flex: 0 0 auto;\n      }\n    "])),
+
+
+
+
+    t.checkboxLineHeight,
+    t.checkboxFontSize,
+    t.checkboxPaddingY,
+
+    globalClasses.box,
+    t.checkboxHoverBg,
+    t.checkboxShadowHover,
+
+
+    globalClasses.box,
+    t.checkboxShadowActive,
+    t.checkboxActiveBg,
+
+
+
+
+
+
+
+
+    t.checkboxBoxSize);
+
+
+
+  },
+
+  rootChecked: function rootChecked(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:hover .", " {\n        box-shadow: ", ";\n        background: ", ";\n      }\n\n      &:active .", " {\n        background: ", ";\n        box-shadow: ", ";\n      }\n    "])),
+    globalClasses.box,
+    t.checkboxCheckedHoverShadow,
+    t.checkboxCheckedHoverBg,
+
+
+    globalClasses.box,
+    t.checkboxCheckedActiveBg,
+    t.checkboxCheckedActiveShadow);
+
+
+  },
+
+  rootFallback: function rootFallback() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    "])));
+
+
+
+
+
+
+
+  },
+
+  rootWrapperIE11: function rootWrapperIE11() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline;\n    "])));
+
+
+  },
+
+  boxWrapper: function boxWrapper(t) {
+    var labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);
+    var fontSize = parseInt(t.checkboxFontSize);
+    var baselineCompensation =
+    fontSize < 16 && !_client.isChrome ?
+    labGrotesqueCompenstation :
+    fontSize === 16 && _client.isChrome ?
+    -labGrotesqueCompenstation :
+    0;
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      width: ", ";\n      height: ", ";\n      box-sizing: border-box;\n      padding: ", ";\n      margin-top: calc(", " + ", "px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    "])),
+
+    t.checkboxBoxSize,
+    t.checkboxBoxSize,
+
+    t.checkboxBorderWidth,
+    t.checkboxBoxOffsetY, baselineCompensation);
+
+
+
+
+
+  },
+
+  box: function box(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n      height: 100%;\n    "])),
+    t.checkboxTextColorDefault,
+    t.checkboxShadow,
+    t.checkboxBg,
+    t.checkboxBorderRadius);
+
+
+  },
+
+  input: function input() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    "])));
+
+
+
+
+
+
+
+  },
+
+  boxWarning: function boxWarning(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])),
+    t.checkboxOutlineColorFocus,
+    t.checkboxOutlineWidth, t.checkboxBorderColorWarning);
+
+  },
+
+  boxError: function boxError(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])),
+    t.checkboxOutlineColorFocus,
+    t.checkboxOutlineWidth, t.checkboxBorderColorError);
+
+  },
+
+  boxChecked: function boxChecked(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    "])),
+    t.checkboxCheckedBg,
+    t.checkboxCheckedColor,
+    t.checkboxCheckedShadow);
+
+  },
+
+  boxFocus: function boxFocus(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: inset 0 0 0 1px ", ",\n        0 0 0 ", " ", " !important; // override hover and active\n    "])),
+    t.checkboxOutlineColorFocus,
+    t.checkboxOutlineWidth, t.checkboxBorderColorFocus);
+
+  },
+
+  boxDisabled: function boxDisabled(t) {
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: ", " !important; // override hover and active\n      background: ", " !important; // override hover and active\n      color: ", ";\n    "])),
+    t.checkboxShadowDisabled,
+    t.checkboxBgDisabled,
+    t.checkboxTextColorDisabled);
+
+  },
+
+  disabled: function disabled(t) {
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: default;\n    "])),
+    t.checkboxTextColorDisabled);
+
+
+  },
+
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0px;\n      bottom: 0px;\n      right: 0px;\n      left: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    "])));
+
+
+
+
+
+
+
+
+
+
+
+
+
+  },
+
+  iconUnchecked: function iconUnchecked() {
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: transparent;\n    "])));
+
+
+  },
+
+  caption: function caption(t) {
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      padding-left: ", ";\n    "])),
+    t.checkboxTextColorDefault,
+    t.checkboxCaptionGap);
+
+  },
+
+  captionIE11: function captionIE11() {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: table-cell;\n    "])));
+
+
+  } });exports.styles = styles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Checkbox.styles.ts"],"names":["globalClasses","box","styles","root","t","css","checkboxLineHeight","checkboxFontSize","checkboxPaddingY","checkboxHoverBg","checkboxShadowHover","checkboxShadowActive","checkboxActiveBg","checkboxBoxSize","rootChecked","checkboxCheckedHoverShadow","checkboxCheckedHoverBg","checkboxCheckedActiveBg","checkboxCheckedActiveShadow","rootFallback","rootWrapperIE11","boxWrapper","labGrotesqueCompenstation","parseInt","labGrotesqueBaselineCompensation","fontSize","baselineCompensation","isChrome","checkboxBorderWidth","checkboxBoxOffsetY","checkboxTextColorDefault","checkboxShadow","checkboxBg","checkboxBorderRadius","input","boxWarning","checkboxOutlineColorFocus","checkboxOutlineWidth","checkboxBorderColorWarning","boxError","checkboxBorderColorError","boxChecked","checkboxCheckedBg","checkboxCheckedColor","checkboxCheckedShadow","boxFocus","checkboxBorderColorFocus","boxDisabled","checkboxShadowDisabled","checkboxBgDisabled","checkboxTextColorDisabled","disabled","icon","iconUnchecked","caption","checkboxCaptionGap","captionIE11"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isChrome } from '../../lib/client';\n\nexport const globalClasses = prefix('checkbox')({\n  box: 'box',\n});\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-flex;\n      align-items: baseline;\n      cursor: pointer;\n      position: relative;\n      line-height: ${t.checkboxLineHeight};\n      font-size: ${t.checkboxFontSize};\n      padding: ${t.checkboxPaddingY} 0;\n\n      &:hover .${globalClasses.box} {\n        background: ${t.checkboxHoverBg};\n        box-shadow: ${t.checkboxShadowHover};\n      }\n\n      &:active .${globalClasses.box} {\n        box-shadow: ${t.checkboxShadowActive};\n        background: ${t.checkboxActiveBg};\n      }\n\n      &::before {\n        // non-breaking space.\n        // makes a correct space for absolutely positioned box,\n        // and also height and baseline for checkbox without caption.\n        content: '\\\\00A0';\n        display: inline-block;\n        width: ${t.checkboxBoxSize};\n        flex: 0 0 auto;\n      }\n    `;\n  },\n\n  rootChecked(t: Theme) {\n    return css`\n      &:hover .${globalClasses.box} {\n        box-shadow: ${t.checkboxCheckedHoverShadow};\n        background: ${t.checkboxCheckedHoverBg};\n      }\n\n      &:active .${globalClasses.box} {\n        background: ${t.checkboxCheckedActiveBg};\n        box-shadow: ${t.checkboxCheckedActiveShadow};\n      }\n    `;\n  },\n\n  rootFallback() {\n    return css`\n      display: inline-table;\n\n      & > * {\n        // fix root's :active state in IE11 that gets blocked by nested elements\n        pointer-events: none;\n      }\n    `;\n  },\n\n  rootWrapperIE11() {\n    return css`\n      display: inline;\n    `;\n  },\n\n  boxWrapper(t: Theme) {\n    const labGrotesqueCompenstation = parseInt(t.labGrotesqueBaselineCompensation);\n    const fontSize = parseInt(t.checkboxFontSize);\n    const baselineCompensation =\n      fontSize < 16 && !isChrome\n        ? labGrotesqueCompenstation\n        : fontSize === 16 && isChrome\n        ? -labGrotesqueCompenstation\n        : 0;\n    return css`\n      position: absolute;\n      width: ${t.checkboxBoxSize};\n      height: ${t.checkboxBoxSize};\n      box-sizing: border-box;\n      padding: ${t.checkboxBorderWidth};\n      margin-top: calc(${t.checkboxBoxOffsetY} + ${baselineCompensation}px);\n\n      // fix position in ie11\n      display: inline-block;\n      left: 0;\n    `;\n  },\n\n  box(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      box-shadow: ${t.checkboxShadow};\n      background: ${t.checkboxBg};\n      border-radius: ${t.checkboxBorderRadius};\n      height: 100%;\n    `;\n  },\n\n  input() {\n    return css`\n      display: inline-block;\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n      z-index: -1;\n    `;\n  },\n\n  boxWarning(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorWarning} !important; // override hover and active\n    `;\n  },\n\n  boxError(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorError} !important; // override hover and active\n    `;\n  },\n\n  boxChecked(t: Theme) {\n    return css`\n      background: ${t.checkboxCheckedBg};\n      color: ${t.checkboxCheckedColor};\n      box-shadow: ${t.checkboxCheckedShadow};\n    `;\n  },\n\n  boxFocus(t: Theme) {\n    return css`\n      box-shadow: inset 0 0 0 1px ${t.checkboxOutlineColorFocus},\n        0 0 0 ${t.checkboxOutlineWidth} ${t.checkboxBorderColorFocus} !important; // override hover and active\n    `;\n  },\n\n  boxDisabled(t: Theme) {\n    return css`\n      box-shadow: ${t.checkboxShadowDisabled} !important; // override hover and active\n      background: ${t.checkboxBgDisabled} !important; // override hover and active\n      color: ${t.checkboxTextColorDisabled};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDisabled};\n      cursor: default;\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0px;\n      bottom: 0px;\n      right: 0px;\n      left: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n\n      svg {\n        margin: -12.5% 0 0 0;\n      }\n    `;\n  },\n\n  iconUnchecked() {\n    return css`\n      color: transparent;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.checkboxTextColorDefault};\n      padding-left: ${t.checkboxCaptionGap};\n    `;\n  },\n\n  captionIE11() {\n    return css`\n      display: table-cell;\n    `;\n  },\n});\n"]}

package/cjs/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/cjs/components/Checkbox/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _Checkbox = require("./Checkbox");Object.keys(_Checkbox).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Checkbox[key]) return;exports[key] = _Checkbox[key];});