@skbkontur/react-ui 6.4.6 → 6.4.7-9ac75.0

package/components/Checkbox/Checkbox.js

@@ -45,13 +45,14 @@ import React from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { cx } from '../../lib/cx.js';
 import { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel.js';
 import { KeyListener } from '../../lib/events/keyListener.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { getStyles, globalClasses } from './Checkbox.styles.js';
+import { styles, globalClasses } from './Checkbox.css.js';
 import { CheckedIcon } from './CheckedIcon.js';
 import { IndeterminateIcon } from './IndeterminateIcon.js';
 export var CheckboxDataTids = {
@@ -127,35 +128,35 @@ var Checkbox = /** @class */ (function (_super) {
             var _a, _b, _c;
             var error = props.error, warning = props.warning, size = props.size, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, onMouseOver = props.onMouseOver, onValueChange = props.onValueChange, onClick = props.onClick, type = props.type, initialIndeterminate = props.initialIndeterminate, comment = props.comment, ariaDescribedby = props["aria-describedby"], ariaLabel = props["aria-label"], rest = __rest(props, ["error", "warning", "size", "onMouseEnter", "onMouseLeave", "onMouseOver", "onValueChange", "onClick", "type", "initialIndeterminate", "comment", 'aria-describedby', 'aria-label']);
             var isIndeterminate = _this.state.indeterminate;
-            var iconClass = _this.cx(_this.styles.icon(), !_this.props.checked && !isIndeterminate && _this.styles.iconUnchecked());
+            var iconClass = cx(styles.icon, !_this.props.checked && !isIndeterminate && styles.iconUnchecked);
             var iconSize = parseInt(_this.getCheckboxBoxSize());
             var IconCheck = (React.createElement("span", { className: iconClass },
                 React.createElement(CheckedIcon, { size: iconSize })));
             var IconSquare = (React.createElement("span", { className: iconClass },
                 React.createElement(IndeterminateIcon, { size: iconSize })));
-            var rootClass = _this.cx(_this.getRootSizeClassName(), (_a = {},
-                _a[_this.styles.root(_this.theme)] = true,
-                _a[_this.styles.rootChecked(_this.theme)] = props.checked || isIndeterminate,
-                _a[_this.styles.rootDisableTextSelect()] = _this.state.isShiftPressed,
-                _a[_this.styles.disabled(_this.theme)] = Boolean(_this.props.disabled),
+            var rootClass = cx(_this.getRootSizeClassName(), (_a = {},
+                _a[styles.root] = true,
+                _a[styles.rootChecked] = props.checked || isIndeterminate,
+                _a[styles.rootDisableTextSelect] = _this.state.isShiftPressed,
+                _a[styles.disabled] = Boolean(_this.props.disabled),
                 _a));
-            var inputProps = __assign(__assign({}, rest), { type: 'checkbox', className: _this.styles.input(), onChange: _this.handleChange, onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleInputClick, ref: _this.input });
-            var box = (React.createElement("div", { className: _this.cx(_this.getBoxWrapperSizeClassName(), (_b = {},
-                    _b[_this.styles.boxWrapper(_this.theme)] = true,
+            var inputProps = __assign(__assign({}, rest), { type: 'checkbox', className: styles.input, onChange: _this.handleChange, onFocus: _this.handleFocus, onBlur: _this.handleBlur, onClick: _this.handleInputClick, ref: _this.input });
+            var box = (React.createElement("div", { className: cx(_this.getBoxWrapperSizeClassName(), (_b = {},
+                    _b[styles.boxWrapper] = true,
                     _b)) },
-                React.createElement("div", { className: _this.cx(_this.styles.box(_this.theme), globalClasses.box, (_c = {},
-                        _c[_this.styles.boxChecked(_this.theme)] = _this.props.checked || isIndeterminate,
-                        _c[_this.styles.boxFocus(_this.theme)] = _this.state.focusedByTab,
-                        _c[_this.styles.boxError(_this.theme)] = _this.props.error,
-                        _c[_this.styles.boxWarning(_this.theme)] = _this.props.warning,
-                        _c[_this.styles.boxDisabled(_this.theme)] = _this.props.disabled,
+                React.createElement("div", { className: cx(styles.box, globalClasses.box, (_c = {},
+                        _c[styles.boxChecked] = _this.props.checked || isIndeterminate,
+                        _c[styles.boxFocus] = _this.state.focusedByTab,
+                        _c[styles.boxError] = _this.props.error,
+                        _c[styles.boxWarning] = _this.props.warning,
+                        _c[styles.boxDisabled] = _this.props.disabled,
                         _c)) }, (isIndeterminate && IconSquare) || IconCheck)));
             return (React.createElement("label", { "data-tid": CheckboxDataTids.root, className: rootClass, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onClick: _this.handleLabelClick },
                 React.createElement(FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus },
                     React.createElement("input", __assign({}, inputProps, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedby }))),
                 box,
                 _this.props.children &&
-                    (comment ? (React.createElement("div", { className: _this.styles.captionWrapper(_this.theme) },
+                    (comment ? (React.createElement("div", { className: styles.captionWrapper },
                         _this.renderCaption(Boolean(props.disabled), true),
                         _this.renderComment(Boolean(props.disabled)))) : (_this.renderCaption(Boolean(props.disabled), false)))));
         };
@@ -203,23 +204,23 @@ var Checkbox = /** @class */ (function (_super) {
     Checkbox.prototype.getRootSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return this.styles.rootLarge(this.theme);
+                return styles.rootLarge;
             case 'medium':
-                return this.styles.rootMedium(this.theme);
+                return styles.rootMedium;
             case 'small':
             default:
-                return this.styles.rootSmall(this.theme);
+                return styles.rootSmall;
         }
     };
     Checkbox.prototype.getBoxWrapperSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return this.styles.boxWrapperLarge(this.theme);
+                return styles.boxWrapperLarge;
             case 'medium':
-                return this.styles.boxWrapperMedium(this.theme);
+                return styles.boxWrapperMedium;
             case 'small':
             default:
-                return this.styles.boxWrapperSmall(this.theme);
+                return styles.boxWrapperSmall;
         }
     };
     Checkbox.prototype.getCheckboxBoxSize = function () {
@@ -240,7 +241,6 @@ var Checkbox = /** @class */ (function (_super) {
     };
     Checkbox.prototype.render = function () {
         var _this = this;
-        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = theme;
             return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, _this.getProps()), _this.renderMain));
@@ -266,27 +266,27 @@ var Checkbox = /** @class */ (function (_super) {
     Checkbox.prototype.getSubcaptionSizeClassName = function () {
         switch (this.size) {
             case 'large':
-                return this.styles.subcaptionLarge(this.theme);
+                return styles.subcaptionLarge;
             case 'medium':
-                return this.styles.subcaptionMedium(this.theme);
+                return styles.subcaptionMedium;
             case 'small':
             default:
-                return this.styles.subcaptionSmall(this.theme);
+                return styles.subcaptionSmall;
         }
     };
     Checkbox.prototype.renderCaption = function (disabled, noGap) {
         var _a;
-        var captionClass = this.cx((_a = {},
-            _a[this.styles.caption(this.theme)] = true,
-            _a[this.styles.disabled(this.theme)] = disabled,
-            _a[this.styles.captionNoGap()] = noGap,
+        var captionClass = cx((_a = {},
+            _a[styles.caption] = true,
+            _a[styles.disabled] = disabled,
+            _a[styles.captionNoGap] = noGap,
             _a));
         return React.createElement("div", { className: captionClass }, this.props.children);
     };
     Checkbox.prototype.renderComment = function (disabled) {
         var _a;
-        return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
-                _a[this.styles.subcaptionDisabled(this.theme)] = disabled,
+        return (React.createElement("div", { className: cx(styles.subcaption, this.getSubcaptionSizeClassName(), (_a = {},
+                _a[styles.subcaptionDisabled] = disabled,
                 _a)) }, this.props.comment));
     };
     Checkbox.__KONTUR_REACT_UI__ = 'Checkbox';

package/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,8BAA8B,EAAE,MAAM,oDAAoD,CAAC;AACpG,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAsD3D,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,IAAI,EAAE,gBAAgB;CACd,CAAC;AAEX;;GAEG;AAIH;IAA8B,4BAAiD;IAA/E;;QAwCS,WAAK,GAAG;YACb,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,KAAI,CAAC,KAAK,CAAC,oBAAoB,IAAI,KAAK;YACvD,cAAc,EAAE,KAAK;SACtB,CAAC;QAQM,WAAK,GAAG,KAAK,CAAC,SAAS,EAAoB,CAAC;QAC5C,cAAQ,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAGjC,sBAAgB,GAAG,UAAC,CAAgB;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,KAAI,CAAC,QAAQ,CAAC,cAAM,OAAA,CAAC;oBACnB,cAAc,EAAE,IAAI;iBACrB,CAAC,EAFkB,CAElB,CAAC,CAAC;YACN,CAAC;QACH,CAAC,CAAC;QAEM,wBAAkB,GAAG,UAAC,CAAgB;YAC5C,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,KAAI,CAAC,QAAQ,CAAC;oBACZ,cAAc,EAAE,KAAK;iBACtB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEK,uBAAiB,GAAG;;YACzB,KAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,KAAI,CAAC,YAAY,CAAC,CAAC;YACtD,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACnD,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1C,CAAC;YAED,MAAA,KAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,gBAAgB,CAAC,SAAS,EAAE,KAAI,CAAC,gBAAgB,CAAC,CAAC;YAC/E,MAAA,KAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,gBAAgB,CAAC,OAAO,EAAE,KAAI,CAAC,kBAAkB,CAAC,CAAC;QACjF,CAAC,CAAC;QAEK,0BAAoB,GAAG;;YAC5B,MAAA,KAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,mBAAmB,CAAC,SAAS,EAAE,KAAI,CAAC,gBAAgB,CAAC,CAAC;YAClF,MAAA,KAAI,CAAC,YAAY,CAAC,QAAQ,0CAAE,mBAAmB,CAAC,OAAO,EAAE,KAAI,CAAC,kBAAkB,CAAC,CAAC;QACpF,CAAC,CAAC;QA6CF;;;WAGG;QACI,sBAAgB,GAAG;YACxB,KAAI,CAAC,QAAQ,CAAC;gBACZ,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;YACH,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACI,wBAAkB,GAAG;YAC1B,KAAI,CAAC,QAAQ,CAAC;gBACZ,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;YACH,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3C,CAAC;QACH,CAAC,CAAC;QAEM,gBAAU,GAAG,UAAC,KAA4C;;YAE9D,IAAA,KAAK,GAcH,KAAK,MAdF,EACL,OAAO,GAaL,KAAK,QAbA,EACP,IAAI,GAYF,KAAK,KAZH,EACJ,YAAY,GAWV,KAAK,aAXK,EACZ,YAAY,GAUV,KAAK,aAVK,EACZ,WAAW,GAST,KAAK,YATI,EACX,aAAa,GAQX,KAAK,cARM,EACb,OAAO,GAOL,KAAK,QAPA,EACP,IAAI,GAMF,KAAK,KANH,EACJ,oBAAoB,GAKlB,KAAK,qBALa,EACpB,OAAO,GAIL,KAAK,QAJA,EACa,eAAe,GAGjC,KAAK,oBAH4B,EACrB,SAAS,GAErB,KAAK,cAFgB,EACpB,IAAI,UACL,KAAK,EAfH,oLAeL,CADQ,CACC;YACV,IAAM,eAAe,GAAG,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC;YAEjD,IAAM,SAAS,GAAG,KAAI,CAAC,EAAE,CACvB,KAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAClB,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,eAAe,IAAI,KAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CACvE,CAAC;YAEF,IAAM,QAAQ,GAAG,QAAQ,CAAC,KAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YACrD,IAAM,SAAS,GAAG,CAChB,8BAAM,SAAS,EAAE,SAAS;gBACxB,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,GAAI,CAC1B,CACR,CAAC;YACF,IAAM,UAAU,GAAG,CACjB,8BAAM,SAAS,EAAE,SAAS;gBACxB,oBAAC,iBAAiB,IAAC,IAAI,EAAE,QAAQ,GAAI,CAChC,CACR,CAAC;YAEF,IAAM,SAAS,GAAG,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,oBAAoB,EAAE;gBACnD,GAAC,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;gBACpC,GAAC,KAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAK,CAAC,OAAO,IAAI,eAAe;gBACvE,GAAC,KAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAG,KAAI,CAAC,KAAK,CAAC,cAAc;gBAChE,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBAChE,CAAC;YAEH,IAAM,UAAU,yBACX,IAAI,KACP,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAC9B,QAAQ,EAAE,KAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,KAAI,CAAC,WAAW,EACzB,MAAM,EAAE,KAAI,CAAC,UAAU,EACvB,OAAO,EAAE,KAAI,CAAC,gBAAgB,EAC9B,GAAG,EAAE,KAAI,CAAC,KAAK,GAChB,CAAC;YAEF,IAAM,GAAG,GAAG,CACV,6BACE,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,0BAA0B,EAAE;oBAClD,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;wBAC1C;gBAEF,6BACE,SAAS,EAAE,KAAI,CAAC,EAAE,CAAC,KAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAI,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,GAAG;wBAC/D,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,eAAe;wBAC3E,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,YAAY;wBAC3D,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,KAAK;wBACpD,GAAC,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,OAAO;wBACxD,GAAC,KAAI,CAAC,MAAM,CAAC,WAAW,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,KAAI,CAAC,KAAK,CAAC,QAAQ;4BAC1D,IAED,CAAC,eAAe,IAAI,UAAU,CAAC,IAAI,SAAS,CACzC,CACF,CACP,CAAC;YAEF,OAAO,CACL,2CACY,gBAAgB,CAAC,IAAI,EAC/B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAI,CAAC,gBAAgB;gBAE9B,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,KAAI,CAAC,UAAU;oBACtD,0CAAW,UAAU,kBAAc,SAAS,sBAAoB,eAAe,IAAI,CAC/D;gBACrB,GAAG;gBACH,KAAI,CAAC,KAAK,CAAC,QAAQ;oBAClB,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,6BAAK,SAAS,EAAE,KAAI,CAAC,MAAM,CAAC,cAAc,CAAC,KAAI,CAAC,KAAK,CAAC;wBACnD,KAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC;wBACjD,KAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CACxC,CACP,CAAC,CAAC,CAAC,CACF,KAAI,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,CACnD,CAAC,CACE,CACT,CAAC;QACJ,CAAC,CAAC;QAoCM,iBAAW,GAAG,UAAC,CAAwB;;YAC7C,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACzB,iDAAiD;gBACjD,6CAA6C;gBAC7C,MAAA,MAAA,KAAI,CAAC,YAAY,EAAC,qBAAqB,mDAAG;oBACxC,IAAI,KAAI,CAAC,WAAW,CAAC,YAAY,EAAE,CAAC;wBAClC,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;oBACxC,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;oBACvB,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACxB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAEM,gBAAU,GAAG,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,EAAtC,CAAsC,CAAC;QAE1D,gBAAU,GAAG,UAAC,CAAqC;;YACzD,KAAI,CAAC,UAAU,EAAE,CAAC;YAClB,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,MAAM,mDAAG,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC;QAEM,kBAAY,GAAG,UAAC,KAA0C;;YAChE,IAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;YAC5C,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,aAAa,mDAAG,OAAO,CAAC,CAAC;YAEpC,KAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,QAAQ,mDAAG,KAAK,CAAC,CAAC;QAC/B,CAAC,CAAC;QAEM,sBAAgB,GAAG,UAAC,CAAqC;YAC/D,IAAM,4BAA4B,GAAG,8BAA8B,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;YAChF,4BAA4B,CAAC,CAAC,CAAC,CAAC;YAChC,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,KAAK,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAC1D,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;QAEM,sBAAgB,GAAG,UAAC,CAAqC;;YAC/D,MAAA,MAAA,KAAI,CAAC,KAAK,EAAC,OAAO,mDAAG,CAAC,CAAC,CAAC;QAC1B,CAAC,CAAC;;IACJ,CAAC;IAzUS,uCAAoB,GAA5B;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC5C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEO,6CAA0B,GAAlC;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClD,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,qCAAkB,GAA1B;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC;YACzC,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC;YAC1C,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC;QAC3C,CAAC;IACH,CAAC;IAoDM,qCAAkB,GAAzB,UAA0B,SAAwB;QAChD,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YAC7C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAEM,yBAAM,GAAb;QAAA,iBAeC;QAdC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,OAAO,CACL,oBAAC,aAAa,aAAC,WAAW,EAAE,KAAI,CAAC,WAAW,IAAM,KAAI,CAAC,QAAQ,EAAE,GAC9D,KAAI,CAAC,UAAU,CACF,CACjB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAED;;;OAGG;IACI,wBAAK,GAAZ;;QACE,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,IAAI,CAAC;QACrC,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;IAC9B,CAAC;IAED;;;OAGG;IACI,uBAAI,GAAX;;QACE,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,IAAI,EAAE,CAAC;IAC7B,CAAC;IAgIO,6CAA0B,GAAlC;QACE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACjD,KAAK,QAAQ;gBACX,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClD,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAEO,gCAAa,GAArB,UAAsB,QAAiB,EAAE,KAAc;;QACrD,IAAM,YAAY,GAAG,IAAI,CAAC,EAAE;YAC1B,GAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI;YACvC,GAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;YAC5C,GAAC,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,IAAG,KAAK;gBACnC,CAAC;QAEH,OAAO,6BAAK,SAAS,EAAE,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAC;IACnE,CAAC;IAEO,gCAAa,GAArB,UAAsB,QAAiB;;QACrC,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,0BAA0B,EAAE;gBACtF,GAAC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,QAAQ;oBACtD,IAED,IAAI,CAAC,KAAK,CAAC,OAAO,CACf,CACP,CAAC;IACJ,CAAC;IA/Ra,4BAAmB,GAAG,UAAU,AAAb,CAAc;IACjC,oBAAW,GAAG,UAAU,AAAb,CAAc;IAF5B,QAAQ;QAHpB,qBAAqB;QACrB,QAAQ;QACR,QAAQ;OACI,QAAQ,CA6UpB;IAAD,eAAC;CAAA,AA7UD,CAA8B,KAAK,CAAC,aAAa,GA6UhD;SA7UY,QAAQ","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { getStyles, globalClasses } from './Checkbox.styles.js';\nimport { CheckedIcon } from './CheckedIcon.js';\nimport { IndeterminateIcon } from './IndeterminateIcon.js';\n\nexport interface CheckboxProps\n  extends\n    CommonProps,\n    Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Override<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      {\n        /** @ignore */\n        children?: React.ReactNode;\n\n        /** Переводит контрол в состояние ошибки. */\n        error?: boolean;\n\n        /** Переводит контрол в состояние предупреждения. */\n        warning?: boolean;\n\n        /** Размер чекбокса. */\n        size?: SizeProp;\n\n        /** HTML-событие `onmouseenter`.\n         * @ignore */\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** HTML-событие `onmouseleave`.\n         * @ignore */\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** HTML-событие `onmouseover`.\n         * @ignore */\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** Событие изменения value. */\n        onValueChange?: (value: boolean) => void;\n\n        /** HTML-событие `onblur`.\n         * @ignore */\n        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n        /** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */\n        initialIndeterminate?: boolean;\n\n        /** Задаёт второстепенный пояснительный текст под основным текстом чекбокса. */\n        comment?: React.ReactNode;\n      }\n    > {}\n\nexport interface CheckboxState {\n  focusedByTab: boolean;\n  indeterminate: boolean;\n  isShiftPressed: boolean;\n}\n\nexport const CheckboxDataTids = {\n  root: 'Checkbox__root',\n} as const;\n\n/**\n * Чекбокс используется для управления параметром с двумя состояниями.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {\n  public static __KONTUR_REACT_UI__ = 'Checkbox';\n  public static displayName = 'Checkbox';\n\n  private getRootSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.rootLarge(this.theme);\n      case 'medium':\n        return this.styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.rootSmall(this.theme);\n    }\n  }\n\n  private getBoxWrapperSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.boxWrapperLarge(this.theme);\n      case 'medium':\n        return this.styles.boxWrapperMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.boxWrapperSmall(this.theme);\n    }\n  }\n\n  private getCheckboxBoxSize() {\n    switch (this.size) {\n      case 'large':\n        return this.theme.checkboxBoxSizeLarge;\n      case 'medium':\n        return this.theme.checkboxBoxSizeMedium;\n      case 'small':\n      default:\n        return this.theme.checkboxBoxSizeSmall;\n    }\n  }\n\n  public state = {\n    focusedByTab: false,\n    indeterminate: this.props.initialIndeterminate || false,\n    isShiftPressed: false,\n  };\n  private size!: SizeProp;\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private input = React.createRef<HTMLInputElement>();\n  private getProps = createPropsGetter({});\n  private keyListener!: KeyListener;\n\n  private handleShiftPress = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState(() => ({\n        isShiftPressed: true,\n      }));\n    }\n  };\n\n  private handleShiftRelease = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState({\n        isShiftPressed: false,\n      });\n    }\n  };\n\n  public componentDidMount = () => {\n    this.keyListener = new KeyListener(this.globalObject);\n    if (this.state.indeterminate && this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n\n    this.globalObject.document?.addEventListener('keydown', this.handleShiftPress);\n    this.globalObject.document?.addEventListener('keyup', this.handleShiftRelease);\n  };\n\n  public componentWillUnmount = () => {\n    this.globalObject.document?.removeEventListener('keydown', this.handleShiftPress);\n    this.globalObject.document?.removeEventListener('keyup', this.handleShiftRelease);\n  };\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: CheckboxProps) {\n    if (prevProps.checked !== this.props.checked) {\n      this.resetIndeterminate();\n    }\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Программно устанавливает фокус на чекбокс.\n   * @public\n   */\n  public focus(): void {\n    this.keyListener.isTabPressed = true;\n    this.input.current?.focus();\n  }\n\n  /**\n   * Программно снимает фокус с чекбокса.\n   * @public\n   */\n  public blur(): void {\n    this.input.current?.blur();\n  }\n\n  /**\n   * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n   * @public\n   */\n  public setIndeterminate = (): void => {\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 = (): void => {\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      size,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onValueChange,\n      onClick,\n      type,\n      initialIndeterminate,\n      comment,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n      ...rest\n    } = props;\n    const isIndeterminate = this.state.indeterminate;\n\n    const iconClass = this.cx(\n      this.styles.icon(),\n      !this.props.checked && !isIndeterminate && this.styles.iconUnchecked(),\n    );\n\n    const iconSize = parseInt(this.getCheckboxBoxSize());\n    const IconCheck = (\n      <span className={iconClass}>\n        <CheckedIcon size={iconSize} />\n      </span>\n    );\n    const IconSquare = (\n      <span className={iconClass}>\n        <IndeterminateIcon size={iconSize} />\n      </span>\n    );\n\n    const rootClass = this.cx(this.getRootSizeClassName(), {\n      [this.styles.root(this.theme)]: true,\n      [this.styles.rootChecked(this.theme)]: props.checked || isIndeterminate,\n      [this.styles.rootDisableTextSelect()]: this.state.isShiftPressed,\n      [this.styles.disabled(this.theme)]: Boolean(this.props.disabled),\n    });\n\n    const inputProps = {\n      ...rest,\n      type: 'checkbox',\n      className: this.styles.input(),\n      onChange: this.handleChange,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      onClick: this.handleInputClick,\n      ref: this.input,\n    };\n\n    const box = (\n      <div\n        className={this.cx(this.getBoxWrapperSizeClassName(), {\n          [this.styles.boxWrapper(this.theme)]: true,\n        })}\n      >\n        <div\n          className={this.cx(this.styles.box(this.theme), globalClasses.box, {\n            [this.styles.boxChecked(this.theme)]: this.props.checked || isIndeterminate,\n            [this.styles.boxFocus(this.theme)]: this.state.focusedByTab,\n            [this.styles.boxError(this.theme)]: this.props.error,\n            [this.styles.boxWarning(this.theme)]: this.props.warning,\n            [this.styles.boxDisabled(this.theme)]: this.props.disabled,\n          })}\n        >\n          {(isIndeterminate && IconSquare) || IconCheck}\n        </div>\n      </div>\n    );\n\n    return (\n      <label\n        data-tid={CheckboxDataTids.root}\n        className={rootClass}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onMouseOver={onMouseOver}\n        onClick={this.handleLabelClick}\n      >\n        <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n          <input {...inputProps} aria-label={ariaLabel} aria-describedby={ariaDescribedby} />\n        </FocusControlWrapper>\n        {box}\n        {this.props.children &&\n          (comment ? (\n            <div className={this.styles.captionWrapper(this.theme)}>\n              {this.renderCaption(Boolean(props.disabled), true)}\n              {this.renderComment(Boolean(props.disabled))}\n            </div>\n          ) : (\n            this.renderCaption(Boolean(props.disabled), false)\n          ))}\n      </label>\n    );\n  };\n\n  private getSubcaptionSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return this.styles.subcaptionLarge(this.theme);\n      case 'medium':\n        return this.styles.subcaptionMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.subcaptionSmall(this.theme);\n    }\n  }\n\n  private renderCaption(disabled: boolean, noGap: boolean) {\n    const captionClass = this.cx({\n      [this.styles.caption(this.theme)]: true,\n      [this.styles.disabled(this.theme)]: disabled,\n      [this.styles.captionNoGap()]: noGap,\n    });\n\n    return <div className={captionClass}>{this.props.children}</div>;\n  }\n\n  private renderComment(disabled: boolean) {\n    return (\n      <div\n        className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n          [this.styles.subcaptionDisabled(this.theme)]: disabled,\n        })}\n      >\n        {this.props.comment}\n      </div>\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      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.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 resetFocus = () => this.setState({ focusedByTab: false });\n\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    this.resetFocus();\n    this.props.onBlur?.(e);\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 handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    const handleModifierClickInFirefox = fixFirefoxModifiedClickOnLabel(this.input);\n    handleModifierClickInFirefox(e);\n    if (this.props.onClick && e.target !== this.input.current) {\n      e.stopPropagation();\n    }\n  };\n\n  private handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    this.props.onClick?.(e);\n  };\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport type { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { cx } from '../../lib/cx.js';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel.js';\nimport { KeyListener } from '../../lib/events/keyListener.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withSize } from '../../lib/size/SizeDecorator.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { Override } from '../../typings/utility-types.js';\nimport { styles, globalClasses } from './Checkbox.css.js';\nimport { CheckedIcon } from './CheckedIcon.js';\nimport { IndeterminateIcon } from './IndeterminateIcon.js';\n\nexport interface CheckboxProps\n  extends\n    CommonProps,\n    Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Override<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      {\n        /** @ignore */\n        children?: React.ReactNode;\n\n        /** Переводит контрол в состояние ошибки. */\n        error?: boolean;\n\n        /** Переводит контрол в состояние предупреждения. */\n        warning?: boolean;\n\n        /** Размер чекбокса. */\n        size?: SizeProp;\n\n        /** HTML-событие `onmouseenter`.\n         * @ignore */\n        onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** HTML-событие `onmouseleave`.\n         * @ignore */\n        onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** HTML-событие `onmouseover`.\n         * @ignore */\n        onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n\n        /** Событие изменения value. */\n        onValueChange?: (value: boolean) => void;\n\n        /** HTML-событие `onblur`.\n         * @ignore */\n        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;\n\n        /** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */\n        initialIndeterminate?: boolean;\n\n        /** Задаёт второстепенный пояснительный текст под основным текстом чекбокса. */\n        comment?: React.ReactNode;\n      }\n    > {}\n\nexport interface CheckboxState {\n  focusedByTab: boolean;\n  indeterminate: boolean;\n  isShiftPressed: boolean;\n}\n\nexport const CheckboxDataTids = {\n  root: 'Checkbox__root',\n} as const;\n\n/**\n * Чекбокс используется для управления параметром с двумя состояниями.\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {\n  public static __KONTUR_REACT_UI__ = 'Checkbox';\n  public static displayName = 'Checkbox';\n\n  private getRootSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return styles.rootLarge;\n      case 'medium':\n        return styles.rootMedium;\n      case 'small':\n      default:\n        return styles.rootSmall;\n    }\n  }\n\n  private getBoxWrapperSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return styles.boxWrapperLarge;\n      case 'medium':\n        return styles.boxWrapperMedium;\n      case 'small':\n      default:\n        return styles.boxWrapperSmall;\n    }\n  }\n\n  private getCheckboxBoxSize() {\n    switch (this.size) {\n      case 'large':\n        return this.theme.checkboxBoxSizeLarge;\n      case 'medium':\n        return this.theme.checkboxBoxSizeMedium;\n      case 'small':\n      default:\n        return this.theme.checkboxBoxSizeSmall;\n    }\n  }\n\n  public state = {\n    focusedByTab: false,\n    indeterminate: this.props.initialIndeterminate || false,\n    isShiftPressed: false,\n  };\n  private size!: SizeProp;\n\n  private globalObject!: GlobalObject;\n  private theme!: Theme;\n  private input = React.createRef<HTMLInputElement>();\n  private getProps = createPropsGetter({});\n  private keyListener!: KeyListener;\n\n  private handleShiftPress = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState(() => ({\n        isShiftPressed: true,\n      }));\n    }\n  };\n\n  private handleShiftRelease = (e: KeyboardEvent) => {\n    if (e.key === 'Shift') {\n      this.setState({\n        isShiftPressed: false,\n      });\n    }\n  };\n\n  public componentDidMount = () => {\n    this.keyListener = new KeyListener(this.globalObject);\n    if (this.state.indeterminate && this.input.current) {\n      this.input.current.indeterminate = true;\n    }\n\n    this.globalObject.document?.addEventListener('keydown', this.handleShiftPress);\n    this.globalObject.document?.addEventListener('keyup', this.handleShiftRelease);\n  };\n\n  public componentWillUnmount = () => {\n    this.globalObject.document?.removeEventListener('keydown', this.handleShiftPress);\n    this.globalObject.document?.removeEventListener('keyup', this.handleShiftRelease);\n  };\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate(prevProps: CheckboxProps) {\n    if (prevProps.checked !== this.props.checked) {\n      this.resetIndeterminate();\n    }\n  }\n\n  public render(): React.JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Программно устанавливает фокус на чекбокс.\n   * @public\n   */\n  public focus(): void {\n    this.keyListener.isTabPressed = true;\n    this.input.current?.focus();\n  }\n\n  /**\n   * Программно снимает фокус с чекбокса.\n   * @public\n   */\n  public blur(): void {\n    this.input.current?.blur();\n  }\n\n  /**\n   * Устанавливает чекбокс в HTML-состояние `indeterminate`.\n   * @public\n   */\n  public setIndeterminate = (): void => {\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 = (): void => {\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      size,\n      onMouseEnter,\n      onMouseLeave,\n      onMouseOver,\n      onValueChange,\n      onClick,\n      type,\n      initialIndeterminate,\n      comment,\n      'aria-describedby': ariaDescribedby,\n      'aria-label': ariaLabel,\n      ...rest\n    } = props;\n    const isIndeterminate = this.state.indeterminate;\n\n    const iconClass = cx(styles.icon, !this.props.checked && !isIndeterminate && styles.iconUnchecked);\n\n    const iconSize = parseInt(this.getCheckboxBoxSize());\n    const IconCheck = (\n      <span className={iconClass}>\n        <CheckedIcon size={iconSize} />\n      </span>\n    );\n    const IconSquare = (\n      <span className={iconClass}>\n        <IndeterminateIcon size={iconSize} />\n      </span>\n    );\n\n    const rootClass = cx(this.getRootSizeClassName(), {\n      [styles.root]: true,\n      [styles.rootChecked]: props.checked || isIndeterminate,\n      [styles.rootDisableTextSelect]: this.state.isShiftPressed,\n      [styles.disabled]: Boolean(this.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.handleInputClick,\n      ref: this.input,\n    };\n\n    const box = (\n      <div\n        className={cx(this.getBoxWrapperSizeClassName(), {\n          [styles.boxWrapper]: true,\n        })}\n      >\n        <div\n          className={cx(styles.box, globalClasses.box, {\n            [styles.boxChecked]: this.props.checked || isIndeterminate,\n            [styles.boxFocus]: this.state.focusedByTab,\n            [styles.boxError]: this.props.error,\n            [styles.boxWarning]: this.props.warning,\n            [styles.boxDisabled]: this.props.disabled,\n          })}\n        >\n          {(isIndeterminate && IconSquare) || IconCheck}\n        </div>\n      </div>\n    );\n\n    return (\n      <label\n        data-tid={CheckboxDataTids.root}\n        className={rootClass}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onMouseOver={onMouseOver}\n        onClick={this.handleLabelClick}\n      >\n        <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n          <input {...inputProps} aria-label={ariaLabel} aria-describedby={ariaDescribedby} />\n        </FocusControlWrapper>\n        {box}\n        {this.props.children &&\n          (comment ? (\n            <div className={styles.captionWrapper}>\n              {this.renderCaption(Boolean(props.disabled), true)}\n              {this.renderComment(Boolean(props.disabled))}\n            </div>\n          ) : (\n            this.renderCaption(Boolean(props.disabled), false)\n          ))}\n      </label>\n    );\n  };\n\n  private getSubcaptionSizeClassName() {\n    switch (this.size) {\n      case 'large':\n        return styles.subcaptionLarge;\n      case 'medium':\n        return styles.subcaptionMedium;\n      case 'small':\n      default:\n        return styles.subcaptionSmall;\n    }\n  }\n\n  private renderCaption(disabled: boolean, noGap: boolean) {\n    const captionClass = cx({\n      [styles.caption]: true,\n      [styles.disabled]: disabled,\n      [styles.captionNoGap]: noGap,\n    });\n\n    return <div className={captionClass}>{this.props.children}</div>;\n  }\n\n  private renderComment(disabled: boolean) {\n    return (\n      <div\n        className={cx(styles.subcaption, this.getSubcaptionSizeClassName(), {\n          [styles.subcaptionDisabled]: disabled,\n        })}\n      >\n        {this.props.comment}\n      </div>\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      this.globalObject.requestAnimationFrame?.(() => {\n        if (this.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 resetFocus = () => this.setState({ focusedByTab: false });\n\n  private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    this.resetFocus();\n    this.props.onBlur?.(e);\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 handleLabelClick = (e: React.MouseEvent<HTMLLabelElement>) => {\n    const handleModifierClickInFirefox = fixFirefoxModifiedClickOnLabel(this.input);\n    handleModifierClickInFirefox(e);\n    if (this.props.onClick && e.target !== this.input.current) {\n      e.stopPropagation();\n    }\n  };\n\n  private handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    this.props.onClick?.(e);\n  };\n}\n"]}

package/components/Checkbox/Checkbox.mixins.d.ts

@@ -1,4 +1,19 @@
-export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string, paddingX: string) => string;
-export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string, checkboxPaddingX: string) => string;
-export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
-export declare const disabledTextColorMixin: (textColor: string) => string;
+/** Размер корня; ширину `::before` (`checkboxBoxSize`) задаёт отдельное вложенное правило. */
+export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, paddingX: string) => {
+    lineHeight: string;
+    fontSize: string;
+    padding: string;
+};
+export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string, checkboxPaddingX: string) => {
+    width: string;
+    height: string;
+    marginTop: string;
+    left: string;
+};
+export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => {
+    fontSize: string;
+    lineHeight: string;
+};
+export declare const disabledTextColorMixin: (textColor: string) => {
+    color: string;
+};

package/components/Checkbox/Checkbox.mixins.js

@@ -1,18 +1,19 @@
-import { isChrome, isFirefox } from '../../lib/client.js';
-import { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';
-export var checkboxSizeMixin = function (fontSize, lineHeight, paddingY, checkboxBoxSize, paddingX) {
-    return "\n    line-height: ".concat(lineHeight, ";\n    font-size: ").concat(fontSize, ";\n    padding: ").concat(paddingY, " ").concat(paddingX, ";\n\n    &::before {\n      width: ").concat(checkboxBoxSize, ";\n    }\n  ");
-};
+import { getLabGrotesqueBaselineCompensationCss } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';
+/** Размер корня; ширину `::before` (`checkboxBoxSize`) задаёт отдельное вложенное правило. */
+export var checkboxSizeMixin = function (fontSize, lineHeight, paddingY, paddingX) { return ({
+    lineHeight: lineHeight,
+    fontSize: fontSize,
+    padding: "".concat(paddingY, " ").concat(paddingX),
+}); };
 export var boxWrapperSizeMixin = function (labGrotesqueBaselineCompensation, fontSize, checkboxBoxSize, checkboxBoxOffsetY, checkboxPaddingX) {
-    var labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);
-    var boxFontSize = parseInt(fontSize);
-    var baselineCompensation = getLabGrotesqueBaselineCompensation(boxFontSize, labGrotesqueCompenstation, isChrome, isFirefox);
-    return "\n    width: ".concat(checkboxBoxSize, ";\n    height: ").concat(checkboxBoxSize, ";\n    margin-top: calc(").concat(checkboxBoxOffsetY, " + ").concat(baselineCompensation, "px);\n    left: ").concat(checkboxPaddingX, ";\n  ");
-};
-export var subcaptionMixin = function (fontSize, lineHeight) {
-    return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n  ");
-};
-export var disabledTextColorMixin = function (textColor) {
-    return "\n    color: ".concat(textColor, ";\n  ");
+    var baselineCompensation = getLabGrotesqueBaselineCompensationCss(fontSize, labGrotesqueBaselineCompensation);
+    return {
+        width: checkboxBoxSize,
+        height: checkboxBoxSize,
+        marginTop: "calc(".concat(checkboxBoxOffsetY, " + ").concat(baselineCompensation, ")"),
+        left: checkboxPaddingX,
+    };
 };
+export var subcaptionMixin = function (fontSize, lineHeight) { return ({ fontSize: fontSize, lineHeight: lineHeight }); };
+export var disabledTextColorMixin = function (textColor) { return ({ color: textColor }); };
 //# sourceMappingURL=Checkbox.mixins.js.map

package/components/Checkbox/Checkbox.mixins.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mixins.js","sourceRoot":"","sources":["Checkbox.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,mCAAmC,EAAE,MAAM,yDAAyD,CAAC;AAE9G,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,QAAgB,EAChB,UAAkB,EAClB,QAAgB,EAChB,eAAuB,EACvB,QAAgB;IAEhB,OAAO,6BACU,UAAU,+BACZ,QAAQ,6BACV,QAAQ,cAAI,QAAQ,gDAGpB,eAAe,iBAE3B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UACjC,gCAAwC,EACxC,QAAgB,EAChB,eAAuB,EACvB,kBAA0B,EAC1B,gBAAwB;IAExB,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,WAAW,EACX,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IAEF,OAAO,uBACI,eAAe,4BACd,eAAe,qCACN,kBAAkB,gBAAM,oBAAoB,6BACvD,gBAAgB,UACzB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB;IAClE,OAAO,2BACQ,QAAQ,iCACN,UAAU,UAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,SAAiB;IACtD,OAAO,uBACI,SAAS,UACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const checkboxSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingY: string,\n  checkboxBoxSize: string,\n  paddingX: string,\n): string => {\n  return `\n    line-height: ${lineHeight};\n    font-size: ${fontSize};\n    padding: ${paddingY} ${paddingX};\n\n    &::before {\n      width: ${checkboxBoxSize};\n    }\n  `;\n};\n\nexport const boxWrapperSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  checkboxBoxSize: string,\n  checkboxBoxOffsetY: string,\n  checkboxPaddingX: string,\n): string => {\n  const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n  const boxFontSize = parseInt(fontSize);\n  const baselineCompensation = getLabGrotesqueBaselineCompensation(\n    boxFontSize,\n    labGrotesqueCompenstation,\n    isChrome,\n    isFirefox,\n  );\n\n  return `\n    width: ${checkboxBoxSize};\n    height: ${checkboxBoxSize};\n    margin-top: calc(${checkboxBoxOffsetY} + ${baselineCompensation}px);\n    left: ${checkboxPaddingX};\n  `;\n};\n\nexport const subcaptionMixin = (fontSize: string, lineHeight: string): string => {\n  return `\n    font-size: ${fontSize};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const disabledTextColorMixin = (textColor: string): string => {\n  return `\n    color: ${textColor};\n  `;\n};\n"]}
+{"version":3,"file":"Checkbox.mixins.js","sourceRoot":"","sources":["Checkbox.mixins.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sCAAsC,EAAE,MAAM,yDAAyD,CAAC;AAEjH,8FAA8F;AAC9F,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,QAAgB,IAAK,OAAA,CAAC;IAC9G,UAAU,YAAA;IACV,QAAQ,UAAA;IACR,OAAO,EAAE,UAAG,QAAQ,cAAI,QAAQ,CAAE;CACnC,CAAC,EAJ6G,CAI7G,CAAC;AAEH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UACjC,gCAAwC,EACxC,QAAgB,EAChB,eAAuB,EACvB,kBAA0B,EAC1B,gBAAwB;IAExB,IAAM,oBAAoB,GAAG,sCAAsC,CAAC,QAAQ,EAAE,gCAAgC,CAAC,CAAC;IAEhH,OAAO;QACL,KAAK,EAAE,eAAe;QACtB,MAAM,EAAE,eAAe;QACvB,SAAS,EAAE,eAAQ,kBAAkB,gBAAM,oBAAoB,MAAG;QAClE,IAAI,EAAE,gBAAgB;KACvB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,QAAgB,EAAE,UAAkB,IAAK,OAAA,CAAC,EAAE,QAAQ,UAAA,EAAE,UAAU,YAAA,EAAE,CAAC,EAA1B,CAA0B,CAAC;AAEpG,MAAM,CAAC,IAAM,sBAAsB,GAAG,UAAC,SAAiB,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAtB,CAAsB,CAAC","sourcesContent":["import { getLabGrotesqueBaselineCompensationCss } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\n/** Размер корня; ширину `::before` (`checkboxBoxSize`) задаёт отдельное вложенное правило. */\nexport const checkboxSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, paddingX: string) => ({\n  lineHeight,\n  fontSize,\n  padding: `${paddingY} ${paddingX}`,\n});\n\nexport const boxWrapperSizeMixin = (\n  labGrotesqueBaselineCompensation: string,\n  fontSize: string,\n  checkboxBoxSize: string,\n  checkboxBoxOffsetY: string,\n  checkboxPaddingX: string,\n) => {\n  const baselineCompensation = getLabGrotesqueBaselineCompensationCss(fontSize, labGrotesqueBaselineCompensation);\n\n  return {\n    width: checkboxBoxSize,\n    height: checkboxBoxSize,\n    marginTop: `calc(${checkboxBoxOffsetY} + ${baselineCompensation})`,\n    left: checkboxPaddingX,\n  };\n};\n\nexport const subcaptionMixin = (fontSize: string, lineHeight: string) => ({ fontSize, lineHeight });\n\nexport const disabledTextColorMixin = (textColor: string) => ({ color: textColor });\n"]}

package/components/DateInput/DateFragmentsView.css.d.ts

@@ -0,0 +1,10 @@
+export declare const root: string;
+export declare const mask: string;
+export declare const delimiterFilled: string;
+export declare const selected: string;
+export declare const styles: {
+    root: string;
+    selected: string;
+    mask: string;
+    delimiterFilled: string;
+};

package/components/DateInput/DateFragmentsView.css.js

@@ -0,0 +1,6 @@
+
+export var delimiterFilled = 'react-ui-DateFragmentsView__delimiterFilled';
+export var mask = 'react-ui-DateFragmentsView__mask';
+export var root = 'react-ui-DateFragmentsView__root';
+export var selected = 'react-ui-DateFragmentsView__selected';
+export var styles = {root:'react-ui-DateFragmentsView__root',selected:'react-ui-DateFragmentsView__selected',mask:'react-ui-DateFragmentsView__mask',delimiterFilled:'react-ui-DateFragmentsView__delimiterFilled'};

package/components/DateInput/DateFragmentsView.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFragmentsView.css.js","sourceRoot":"","sources":["DateFragmentsView.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAE9C,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAE3D,MAAM,CAAC,IAAM,eAAe,GAAG,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAE3D,uDAAuD;AACvD,MAAM,CAAC,IAAM,QAAQ,GAAG,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;AAElD,sFAAsF;AACtF,aAAa,CAAC,mCAAmC,EAAE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,EAAnB,CAAmB,EAAE,cAAc,CAAC,CAAC;AACzG,aAAa,CAAC,qCAAqC,EAAE,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAd,CAAc,EAAE,cAAc,CAAC,CAAC;AAEtG,MAAM,CAAC,IAAM,MAAM,GAAG,EAAE,IAAI,MAAA,EAAE,QAAQ,UAAA,EAAE,IAAI,MAAA,EAAE,eAAe,iBAAA,EAAE,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { t, whenThemeSets } from '../../lib/theming/vanilla.js';\n\nexport const root = style({ cursor: 'text' });\n\nexport const mask = style({ color: t.dateInputMaskColor });\n\nexport const delimiterFilled = style({ color: 'inherit' });\n\n// порядок вызова в cx(...): модификаторы после базовых\nexport const selected = style({ cursor: 'text' });\n\n// цвета выделения пусты по умолчанию — правило действует, только когда их задала тема\nwhenThemeSets('dateInputComponentSelectedBgColor', selected, (v) => ({ background: v }), ' ::selection');\nwhenThemeSets('dateInputComponentSelectedTextColor', selected, (v) => ({ color: v }), ' ::selection');\n\nexport const styles = { root, selected, mask, delimiterFilled };\n"]}

package/components/DateInput/DateFragmentsView.d.ts

@@ -9,15 +9,10 @@ interface DateFragmentViewProps {
 }
 export declare class DateFragmentsView extends React.Component<DateFragmentViewProps> {
     private globalObject;
-    private emotion;
-    private cx;
-    private styles;
-    private theme;
     private rootNode;
     isFragment: (el: HTMLElement | EventTarget) => boolean;
     getRootNode: () => HTMLSpanElement | null;
     render(): React.JSX.Element;
-    private renderMain;
     private renderSeparator;
     private renderDateComponent;
     private rootRef;

package/components/DateInput/DateFragmentsView.js

@@ -21,11 +21,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { MaskCharLowLine } from '../../internal/MaskCharLowLine/index.js';
+import { cx } from '../../lib/cx.js';
 import { InternalDateValidator } from '../../lib/date/InternalDateValidator.js';
 import { InternalDateComponentType } from '../../lib/date/types.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { getStyles } from './DateFragmentsView.styles.js';
+import { styles } from './DateFragmentsView.css.js';
 var DateFragmentsView = /** @class */ (function (_super) {
     __extends(DateFragmentsView, _super);
     function DateFragmentsView() {
@@ -46,19 +46,11 @@ var DateFragmentsView = /** @class */ (function (_super) {
         return _this;
     }
     DateFragmentsView.prototype.render = function () {
-        var _this = this;
-        this.styles = getStyles(this.emotion);
-        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
-            _this.theme = theme;
-            return _this.renderMain();
-        }));
-    };
-    DateFragmentsView.prototype.renderMain = function () {
         var _a;
         var _this = this;
-        return (React.createElement("span", { ref: this.rootRef, className: this.cx((_a = {},
-                _a[this.styles.root()] = true,
-                _a[this.styles.selected(this.theme)] = true,
+        return (React.createElement("span", { ref: this.rootRef, className: cx((_a = {},
+                _a[styles.root] = true,
+                _a[styles.selected] = true,
                 _a)) }, this.props.fragments.map(function (fragment, index) {
             return fragment.type === InternalDateComponentType.Separator
                 ? _this.renderSeparator(fragment, index)
@@ -67,9 +59,9 @@ var DateFragmentsView = /** @class */ (function (_super) {
     };
     DateFragmentsView.prototype.renderSeparator = function (fragment, index) {
         var _a;
-        var separatorClassName = this.cx((_a = {},
-            _a[this.styles.mask(this.theme)] = true,
-            _a[this.styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null,
+        var separatorClassName = cx((_a = {},
+            _a[styles.mask] = true,
+            _a[styles.delimiterFilled] = this.props.fragments[index + 1].value !== null,
             _a));
         return (React.createElement("span", { key: index, className: separatorClassName }, fragment.value));
     };
@@ -95,7 +87,7 @@ var DateFragmentsView = /** @class */ (function (_super) {
         };
         return (React.createElement("span", { key: index, "data-fragment": "", onMouseUp: handleMouseUp },
             valueMask,
-            React.createElement("span", { "data-tid": "DateFragmentsView__placeholder", className: this.styles.mask(this.theme) }, Array(lengthMask)
+            React.createElement("span", { "data-tid": "DateFragmentsView__placeholder", className: styles.mask }, Array(lengthMask)
                 .fill('')
                 .map(function (_, i) { return (React.createElement(MaskCharLowLine, { key: i })); }))));
     };

package/components/DateInput/DateFragmentsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFragmentsView.js","sourceRoot":"","sources":["DateFragmentsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine/index.js';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator.js';\nimport { InternalDateComponentType } from '../../lib/date/types.js';\nimport type { InternalDateFragment } from '../../lib/date/types.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { getStyles } from './DateFragmentsView.styles.js';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\n@withRenderEnvironment\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = (): HTMLSpanElement | null => this.rootNode;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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    return (\n      <span\n        ref={this.rootRef}\n        className={this.cx({\n          [this.styles.root()]: true,\n          [this.styles.selected(this.theme)]: true,\n        })}\n      >\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const separatorClassName = this.cx({\n      [this.styles.mask(this.theme)]: true,\n      [this.styles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (this.globalObject.document?.activeElement?.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span data-tid=\"DateFragmentsView__placeholder\" className={this.styles.mask(this.theme)}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}
+{"version":3,"file":"DateFragmentsView.js","sourceRoot":"","sources":["DateFragmentsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine/index.js';\nimport { cx } from '../../lib/cx.js';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator.js';\nimport { InternalDateComponentType } from '../../lib/date/types.js';\nimport type { InternalDateFragment } from '../../lib/date/types.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { styles } from './DateFragmentsView.css.js';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\n@withRenderEnvironment\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private globalObject!: GlobalObject;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = (): HTMLSpanElement | null => this.rootNode;\n\n  public render(): React.JSX.Element {\n    return (\n      <span\n        ref={this.rootRef}\n        className={cx({\n          [styles.root]: true,\n          [styles.selected]: true,\n        })}\n      >\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const separatorClassName = cx({\n      [styles.mask]: true,\n      [styles.delimiterFilled]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (this.globalObject.document?.activeElement?.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span data-tid=\"DateFragmentsView__placeholder\" className={styles.mask}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}

package/components/DateInput/DateInput.css.d.ts

@@ -0,0 +1,16 @@
+export declare const icon: string;
+export declare const iconSmall: string;
+export declare const iconMedium: string;
+export declare const iconLarge: string;
+export declare const iconDisabled: string;
+export declare const value: string;
+export declare const valueVisible: string;
+export declare const styles: {
+    icon: string;
+    iconSmall: string;
+    iconMedium: string;
+    iconLarge: string;
+    iconDisabled: string;
+    value: string;
+    valueVisible: string;
+};

package/components/DateInput/DateInput.css.js

@@ -0,0 +1,9 @@
+
+export var icon = 'react-ui-DateInput__icon';
+export var iconDisabled = 'react-ui-DateInput__iconDisabled';
+export var iconLarge = 'react-ui-DateInput__iconLarge';
+export var iconMedium = 'react-ui-DateInput__iconMedium';
+export var iconSmall = 'react-ui-DateInput__iconSmall';
+export var styles = {icon:'react-ui-DateInput__icon',iconSmall:'react-ui-DateInput__iconSmall',iconMedium:'react-ui-DateInput__iconMedium',iconLarge:'react-ui-DateInput__iconLarge',iconDisabled:'react-ui-DateInput__iconDisabled',value:'react-ui-DateInput__value',valueVisible:'react-ui-DateInput__valueVisible'};
+export var value = 'react-ui-DateInput__value';
+export var valueVisible = 'react-ui-DateInput__valueVisible';

package/components/DateInput/DateInput.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.css.js","sourceRoot":"","sources":["DateInput.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,OAAO,EAAE,CAAC,EAAE,MAAM,8BAA8B,CAAC;AAEjD,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC;IACxB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,CAAC,CAAC,kBAAkB;CAC5B,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAEnE,MAAM,CAAC,IAAM,UAAU,GAAG,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,mBAAmB,EAAE,CAAC,CAAC;AAErE,MAAM,CAAC,IAAM,SAAS,GAAG,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC;AAEnE,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC;IAChC,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,CAAC,CAAC,iBAAiB;CAC3B,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;AAErD,MAAM,CAAC,IAAM,YAAY,GAAG,KAAK,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;AAE7D,MAAM,CAAC,IAAM,MAAM,GAAG;IACpB,IAAI,MAAA;IACJ,SAAS,WAAA;IACT,UAAU,YAAA;IACV,SAAS,WAAA;IACT,YAAY,cAAA;IACZ,KAAK,OAAA;IACL,YAAY,cAAA;CACb,CAAC","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { t } from '../../lib/theming/vanilla.js';\n\nexport const icon = style({\n  cursor: 'pointer',\n  color: t.dateInputIconColor,\n});\n\nexport const iconSmall = style({ fontSize: t.inputFontSizeSmall });\n\nexport const iconMedium = style({ fontSize: t.inputFontSizeMedium });\n\nexport const iconLarge = style({ fontSize: t.inputFontSizeLarge });\n\nexport const iconDisabled = style({\n  cursor: 'default',\n  color: t.textColorDisabled,\n});\n\nexport const value = style({ visibility: 'hidden' });\n\nexport const valueVisible = style({ visibility: 'visible' });\n\nexport const styles = {\n  icon,\n  iconSmall,\n  iconMedium,\n  iconLarge,\n  iconDisabled,\n  value,\n  valueVisible,\n};\n"]}

package/components/DateInput/DateInput.d.ts

@@ -67,10 +67,6 @@ export declare class DateInput extends React.Component<DateInputProps, DateInput
     private locale;
     private blurEvent;
     private globalObject;
-    private emotion;
-    private cx;
-    private styles;
-    private theme;
     getRootNode: TGetRootNode;
     private setRootNode;
     private conditionalHandler;
@@ -82,7 +78,6 @@ export declare class DateInput extends React.Component<DateInputProps, DateInput
     focus(): void;
     blink(): void;
     render(): React.JSX.Element;
-    private renderMain;
     private renderIcon;
     private handleFocus;
     private resetFocus;

package/components/DateInput/DateInput.js

@@ -37,6 +37,7 @@ import { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js
 import { InputLikeText } from '../../internal/InputLikeText/index.js';
 import { ConditionalHandler } from '../../lib/ConditionalHandler.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { cx } from '../../lib/cx.js';
 import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from '../../lib/date/constants.js';
 import { InternalDateComponentType } from '../../lib/date/types.js';
 import { locale } from '../../lib/locale/decorators.js';
@@ -44,11 +45,10 @@ import { REACT_MAJOR_VERSION } from '../../lib/react-is.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { rootNode } from '../../lib/rootNode/index.js';
 import { withSize } from '../../lib/size/SizeDecorator.js';
-import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';
 import { CalendarIcon } from './CalendarIcon.js';
 import { DateFragmentsView } from './DateFragmentsView.js';
-import { getStyles } from './DateInput.styles.js';
+import { styles } from './DateInput.css.js';
 import { Actions, extractAction } from './helpers/DateInputKeyboardActions.js';
 import { InternalDateMediator } from './helpers/InternalDateMediator.js';
 export var DateInputDataTids = {
@@ -104,14 +104,13 @@ var DateInput = /** @class */ (function (_super) {
             var _b = _this.props, withIcon = _b.withIcon, _c = _b.disabled, disabled = _c === void 0 ? false : _c;
             var size = _this.size;
             if (withIcon) {
-                var theme = _this.theme;
                 var icon = React.createElement(CalendarIcon, { size: size });
-                var iconStyles = _this.cx((_a = {},
-                    _a[_this.styles.icon(theme)] = true,
-                    _a[_this.styles.iconSmall(theme)] = size === 'small',
-                    _a[_this.styles.iconMedium(theme)] = size === 'medium',
-                    _a[_this.styles.iconLarge(theme)] = size === 'large',
-                    _a[_this.styles.iconDisabled(theme)] = disabled,
+                var iconStyles = cx((_a = {},
+                    _a[styles.icon] = true,
+                    _a[styles.iconSmall] = size === 'small',
+                    _a[styles.iconMedium] = size === 'medium',
+                    _a[styles.iconLarge] = size === 'large',
+                    _a[styles.iconDisabled] = disabled,
                     _a));
                 return (React.createElement("span", { className: iconStyles, "data-tid": DateInputDataTids.icon }, icon));
             }
@@ -340,14 +339,6 @@ var DateInput = /** @class */ (function (_super) {
         }
     };
     DateInput.prototype.render = function () {
-        var _this = this;
-        this.styles = getStyles(this.emotion);
-        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
-            _this.theme = theme;
-            return _this.renderMain();
-        }));
-    };
-    DateInput.prototype.renderMain = function () {
         var _a;
         var _b = this.state, focused = _b.focused, selected = _b.selected, inputMode = _b.inputMode, valueFormatted = _b.valueFormatted;
         var showValue = Boolean(focused || valueFormatted);
@@ -355,7 +346,7 @@ var DateInput = /** @class */ (function (_super) {
         return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
             React.createElement(FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus },
                 React.createElement(InputLikeText, { "data-tid": DateInputDataTids.root, id: this.props.id, width: width, ref: this.inputLikeTextRef, size: this.size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.props.onClick, onKeyDown: this.handleKeyDown, onMouseDownCapture: this.handleMouseDownCapture, onPaste: this.handlePaste, rightIcon: this.renderIcon(), onDoubleClickCapture: this.handleDoubleClick, onMouseDragStart: this.handleMouseDragStart, onMouseDragEnd: this.handleMouseDragEnd, value: this.iDateMediator.getInternalString(), inputMode: 'numeric', takeContentWidth: true, "aria-describedby": this.props['aria-describedby'], "aria-label": this.props['aria-label'], "aria-labelledby": this.props['aria-labelledby'] },
-                    React.createElement("span", { className: this.cx(this.styles.value(), (_a = {}, _a[this.styles.valueVisible()] = showValue, _a)) },
+                    React.createElement("span", { className: cx(styles.value, (_a = {}, _a[styles.valueVisible] = showValue, _a)) },
                         React.createElement(DateFragmentsView, { ref: this.dateFragmentsViewRef, fragments: this.iDateMediator.getFragments(), onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode }))))));
     };
     var DateInput_1;