@skbkontur/react-ui 6.1.6 → 6.1.7-f9746.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/components/Checkbox/Checkbox.d.ts +5 -0
  2. package/components/Checkbox/Checkbox.js +42 -21
  3. package/components/Checkbox/Checkbox.js.map +1 -1
  4. package/components/Checkbox/Checkbox.mixins.d.ts +2 -0
  5. package/components/Checkbox/Checkbox.mixins.js +6 -0
  6. package/components/Checkbox/Checkbox.mixins.js.map +1 -1
  7. package/components/Checkbox/Checkbox.styles.d.ts +7 -0
  8. package/components/Checkbox/Checkbox.styles.js +23 -2
  9. package/components/Checkbox/Checkbox.styles.js.map +1 -1
  10. package/components/Radio/Radio.d.ts +4 -0
  11. package/components/Radio/Radio.js +20 -1
  12. package/components/Radio/Radio.js.map +1 -1
  13. package/components/Radio/Radio.mixins.d.ts +2 -0
  14. package/components/Radio/Radio.mixins.js +6 -0
  15. package/components/Radio/Radio.mixins.js.map +1 -1
  16. package/components/Radio/Radio.styles.d.ts +6 -0
  17. package/components/Radio/Radio.styles.js +22 -4
  18. package/components/Radio/Radio.styles.js.map +1 -1
  19. package/components/Toggle/Toggle.d.ts +5 -0
  20. package/components/Toggle/Toggle.js +46 -22
  21. package/components/Toggle/Toggle.js.map +1 -1
  22. package/components/Toggle/Toggle.mixins.d.ts +2 -0
  23. package/components/Toggle/Toggle.mixins.js +6 -0
  24. package/components/Toggle/Toggle.mixins.js.map +1 -1
  25. package/components/Toggle/Toggle.styles.d.ts +9 -0
  26. package/components/Toggle/Toggle.styles.js +29 -2
  27. package/components/Toggle/Toggle.styles.js.map +1 -1
  28. package/internal/themes/BasicTheme.d.ts +31 -0
  29. package/internal/themes/BasicTheme.js +157 -0
  30. package/internal/themes/BasicTheme.js.map +1 -1
  31. package/internal/themes/DarkTheme6_0.js +1 -0
  32. package/internal/themes/DarkTheme6_0.js.map +1 -1
  33. package/package.json +1 -1
@@ -29,6 +29,8 @@ export interface CheckboxProps extends CommonProps, Pick<AriaAttributes, 'aria-d
29
29
  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
30
30
  /** Устанавливает начальное [неопределенное состояние чекбокса](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate). */
31
31
  initialIndeterminate?: boolean;
32
+ /** Задаёт второстепенный пояснительный текст под основным текстом чекбокса. */
33
+ comment?: React.ReactNode;
32
34
  }> {
33
35
  }
34
36
  export interface CheckboxState {
@@ -91,6 +93,9 @@ export declare class Checkbox extends React.PureComponent<CheckboxProps, Checkbo
91
93
  */
92
94
  resetIndeterminate: () => void;
93
95
  private renderMain;
96
+ private getSubcaptionSizeClassName;
97
+ private renderCaption;
98
+ private renderComment;
94
99
  private handleFocus;
95
100
  private resetFocus;
96
101
  private handleBlur;
@@ -124,8 +124,8 @@ var Checkbox = /** @class */ (function (_super) {
124
124
  }
125
125
  };
126
126
  _this.renderMain = function (props) {
127
- var _a, _b, _c, _d;
128
- 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, ariaDescribedby = props["aria-describedby"], ariaLabel = props["aria-label"], rest = __rest(props, ["error", "warning", "size", "onMouseEnter", "onMouseLeave", "onMouseOver", "onValueChange", "onClick", "type", "initialIndeterminate", 'aria-describedby', 'aria-label']);
127
+ var _a, _b, _c;
128
+ 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']);
129
129
  var isIndeterminate = _this.state.indeterminate;
130
130
  var iconClass = _this.cx(_this.styles.icon(), !_this.props.checked && !isIndeterminate && _this.styles.iconUnchecked());
131
131
  var iconSize = parseInt(_this.getCheckboxBoxSize());
@@ -140,29 +140,24 @@ var Checkbox = /** @class */ (function (_super) {
140
140
  _a[_this.styles.disabled(_this.theme)] = Boolean(_this.props.disabled),
141
141
  _a));
142
142
  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 });
143
- var caption = null;
144
- if (_this.props.children) {
145
- var captionClass = _this.cx((_b = {},
146
- _b[_this.styles.caption(_this.theme)] = true,
147
- _b[_this.styles.disabled(_this.theme)] = Boolean(props.disabled),
148
- _b));
149
- caption = React.createElement("span", { className: captionClass }, _this.props.children);
150
- }
151
- var box = (React.createElement("div", { className: _this.cx(_this.getBoxWrapperSizeClassName(), (_c = {},
152
- _c[_this.styles.boxWrapper(_this.theme)] = true,
153
- _c)) },
154
- React.createElement("div", { className: _this.cx(_this.styles.box(_this.theme), globalClasses.box, (_d = {},
155
- _d[_this.styles.boxChecked(_this.theme)] = _this.props.checked || isIndeterminate,
156
- _d[_this.styles.boxFocus(_this.theme)] = _this.state.focusedByTab,
157
- _d[_this.styles.boxError(_this.theme)] = _this.props.error,
158
- _d[_this.styles.boxWarning(_this.theme)] = _this.props.warning,
159
- _d[_this.styles.boxDisabled(_this.theme)] = _this.props.disabled,
160
- _d)) }, (isIndeterminate && IconSquare) || IconCheck)));
143
+ var box = (React.createElement("div", { className: _this.cx(_this.getBoxWrapperSizeClassName(), (_b = {},
144
+ _b[_this.styles.boxWrapper(_this.theme)] = true,
145
+ _b)) },
146
+ React.createElement("div", { className: _this.cx(_this.styles.box(_this.theme), globalClasses.box, (_c = {},
147
+ _c[_this.styles.boxChecked(_this.theme)] = _this.props.checked || isIndeterminate,
148
+ _c[_this.styles.boxFocus(_this.theme)] = _this.state.focusedByTab,
149
+ _c[_this.styles.boxError(_this.theme)] = _this.props.error,
150
+ _c[_this.styles.boxWarning(_this.theme)] = _this.props.warning,
151
+ _c[_this.styles.boxDisabled(_this.theme)] = _this.props.disabled,
152
+ _c)) }, (isIndeterminate && IconSquare) || IconCheck)));
161
153
  return (React.createElement("label", { "data-tid": CheckboxDataTids.root, className: rootClass, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onClick: _this.handleLabelClick },
162
154
  React.createElement(FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus },
163
155
  React.createElement("input", __assign({}, inputProps, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedby }))),
164
156
  box,
165
- caption));
157
+ _this.props.children &&
158
+ (comment ? (React.createElement("div", { className: _this.styles.captionWrapper(_this.theme) },
159
+ _this.renderCaption(Boolean(props.disabled), true),
160
+ _this.renderComment(Boolean(props.disabled)))) : (_this.renderCaption(Boolean(props.disabled), false)))));
166
161
  };
167
162
  _this.handleFocus = function (e) {
168
163
  var _a, _b;
@@ -268,6 +263,32 @@ var Checkbox = /** @class */ (function (_super) {
268
263
  var _a;
269
264
  (_a = this.input.current) === null || _a === void 0 ? void 0 : _a.blur();
270
265
  };
266
+ Checkbox.prototype.getSubcaptionSizeClassName = function () {
267
+ switch (this.size) {
268
+ case 'large':
269
+ return this.styles.subcaptionLarge(this.theme);
270
+ case 'medium':
271
+ return this.styles.subcaptionMedium(this.theme);
272
+ case 'small':
273
+ default:
274
+ return this.styles.subcaptionSmall(this.theme);
275
+ }
276
+ };
277
+ Checkbox.prototype.renderCaption = function (disabled, noGap) {
278
+ var _a;
279
+ var captionClass = this.cx((_a = {},
280
+ _a[this.styles.caption(this.theme)] = true,
281
+ _a[this.styles.disabled(this.theme)] = disabled,
282
+ _a[this.styles.captionNoGap()] = noGap,
283
+ _a));
284
+ return React.createElement("div", { className: captionClass }, this.props.children);
285
+ };
286
+ Checkbox.prototype.renderComment = function (disabled) {
287
+ var _a;
288
+ return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
289
+ _a[this.styles.subcaptionDisabled(this.theme)] = disabled,
290
+ _a)) }, this.props.comment));
291
+ };
271
292
  Checkbox.__KONTUR_REACT_UI__ = 'Checkbox';
272
293
  Checkbox.displayName = 'Checkbox';
273
294
  Checkbox = __decorate([
@@ -1 +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;AAmD3D,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,GAaH,KAAK,MAbF,EACL,OAAO,GAYL,KAAK,QAZA,EACP,IAAI,GAWF,KAAK,KAXH,EACJ,YAAY,GAUV,KAAK,aAVK,EACZ,YAAY,GASV,KAAK,aATK,EACZ,WAAW,GAQT,KAAK,YARI,EACX,aAAa,GAOX,KAAK,cAPM,EACb,OAAO,GAML,KAAK,QANA,EACP,IAAI,GAKF,KAAK,KALH,EACJ,oBAAoB,GAIlB,KAAK,qBAJa,EACA,eAAe,GAGjC,KAAK,oBAH4B,EACrB,SAAS,GAErB,KAAK,cAFgB,EACpB,IAAI,UACL,KAAK,EAdH,yKAcL,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,IAAI,OAAO,GAAG,IAAI,CAAC;YACnB,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,IAAM,YAAY,GAAG,KAAI,CAAC,EAAE;oBAC1B,GAAC,KAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,IAAI;oBACvC,GAAC,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,IAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;wBAC3D,CAAC;gBACH,OAAO,GAAG,8BAAM,SAAS,EAAE,YAAY,IAAG,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAAC;YACxE,CAAC;YAED,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,OAAO,CACF,CACT,CAAC;QACJ,CAAC,CAAC;QAEM,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;IAvSS,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;IA/Ha,4BAAmB,GAAG,UAAU,AAAb,CAAc;IACjC,oBAAW,GAAG,UAAU,AAAb,CAAc;IAF5B,QAAQ;QAHpB,qBAAqB;QACrB,QAAQ;QACR,QAAQ;OACI,QAAQ,CA2SpB;IAAD,eAAC;CAAA,AA3SD,CAA8B,KAAK,CAAC,aAAa,GA2ShD;SA3SY,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\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 '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 let caption = null;\n if (this.props.children) {\n const captionClass = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.disabled(this.theme)]: Boolean(props.disabled),\n });\n caption = <span className={captionClass}>{this.props.children}</span>;\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 {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 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"]}
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["Checkbox.tsx"],"names":[],"mappings":"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","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"]}
@@ -1,2 +1,4 @@
1
1
  export declare const checkboxSizeMixin: (fontSize: string, lineHeight: string, paddingY: string, checkboxBoxSize: string, paddingX: string) => string;
2
2
  export declare const boxWrapperSizeMixin: (labGrotesqueBaselineCompensation: string, fontSize: string, checkboxBoxSize: string, checkboxBoxOffsetY: string, checkboxPaddingX: string) => string;
3
+ export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
4
+ export declare const disabledTextColorMixin: (textColor: string) => string;
@@ -9,4 +9,10 @@ export var boxWrapperSizeMixin = function (labGrotesqueBaselineCompensation, fon
9
9
  var baselineCompensation = getLabGrotesqueBaselineCompensation(boxFontSize, labGrotesqueCompenstation, isChrome, isFirefox);
10
10
  return "\n width: ".concat(checkboxBoxSize, ";\n height: ").concat(checkboxBoxSize, ";\n margin-top: calc(").concat(checkboxBoxOffsetY, " + ").concat(baselineCompensation, "px);\n left: ").concat(checkboxPaddingX, ";\n ");
11
11
  };
12
+ export var subcaptionMixin = function (fontSize, lineHeight) {
13
+ return "\n font-size: ".concat(fontSize, ";\n line-height: ").concat(lineHeight, ";\n ");
14
+ };
15
+ export var disabledTextColorMixin = function (textColor) {
16
+ return "\n color: ".concat(textColor, ";\n ");
17
+ };
12
18
  //# sourceMappingURL=Checkbox.mixins.js.map
@@ -1 +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","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"]}
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"]}
@@ -24,4 +24,11 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
24
24
  icon(): string;
25
25
  iconUnchecked(): string;
26
26
  caption(t: Theme): string;
27
+ captionWrapper(t: Theme): string;
28
+ captionNoGap(): string;
29
+ subcaption(t: Theme): string;
30
+ subcaptionDisabled(t: Theme): string;
31
+ subcaptionSmall(t: Theme): string;
32
+ subcaptionMedium(t: Theme): string;
33
+ subcaptionLarge(t: Theme): string;
27
34
  }>;
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';
6
- import { boxWrapperSizeMixin, checkboxSizeMixin } from './Checkbox.mixins.js';
6
+ import { boxWrapperSizeMixin, checkboxSizeMixin, disabledTextColorMixin, subcaptionMixin } from './Checkbox.mixins.js';
7
7
  export var globalClasses = prefix('checkbox')({
8
8
  box: 'box',
9
9
  });
@@ -73,7 +73,28 @@ export var getStyles = memoizeGetStyles(function (_a) {
73
73
  caption: function (t) {
74
74
  return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n color: ", ";\n padding-left: ", ";\n "], ["\n color: ", ";\n padding-left: ", ";\n "])), t.checkboxTextColorDefault, t.checkboxCaptionGap);
75
75
  },
76
+ captionWrapper: function (t) {
77
+ return css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n display: inline-block;\n padding-left: ", ";\n "], ["\n display: inline-block;\n padding-left: ", ";\n "])), t.checkboxCaptionGap);
78
+ },
79
+ captionNoGap: function () {
80
+ return css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n padding-left: 0;\n "], ["\n padding-left: 0;\n "])));
81
+ },
82
+ subcaption: function (t) {
83
+ return css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n margin-top: 2px;\n color: ", ";\n "], ["\n margin-top: 2px;\n color: ", ";\n "])), t.checkboxCommentTextColor);
84
+ },
85
+ subcaptionDisabled: function (t) {
86
+ return css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), disabledTextColorMixin(t.checkboxTextColorDisabled));
87
+ },
88
+ subcaptionSmall: function (t) {
89
+ return css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeSmall, t.checkboxCommentLineHeightSmall));
90
+ },
91
+ subcaptionMedium: function (t) {
92
+ return css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeMedium, t.checkboxCommentLineHeightMedium));
93
+ },
94
+ subcaptionLarge: function (t) {
95
+ return css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", ";\n "], ["\n ", ";\n "])), subcaptionMixin(t.checkboxCommentFontSizeLarge, t.checkboxCommentLineHeightLarge));
96
+ },
76
97
  });
77
98
  });
78
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
99
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28;
79
100
  //# sourceMappingURL=Checkbox.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["Checkbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { boxWrapperSizeMixin, checkboxSizeMixin } from './Checkbox.mixins.js';\n\nexport const globalClasses = prefix('checkbox')({\n box: 'box',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n display: inline-flex;\n align-items: baseline;\n cursor: pointer;\n position: relative;\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 flex: 0 0 auto;\n }\n\n .${globalClasses.box} {\n transition:\n background ${t.transitionDuration} ${t.transitionTimingFunction},\n box-shadow ${t.transitionDuration} ${t.transitionTimingFunction};\n }\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 },\n\n rootSmall(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeSmall,\n t.checkboxLineHeightSmall,\n t.checkboxPaddingYSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n rootMedium(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeMedium,\n t.checkboxLineHeightMedium,\n t.checkboxPaddingYMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n rootLarge(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeLarge,\n t.checkboxLineHeightLarge,\n t.checkboxPaddingYLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n rootDisableTextSelect() {\n return css`\n user-select: none;\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 boxWrapper(t: Theme) {\n return css`\n position: absolute;\n box-sizing: border-box;\n padding: ${t.checkboxBorderWidth};\n\n display: inline-block; \n )};\n `;\n },\n\n boxWrapperSmall(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n boxWrapperMedium(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n boxWrapperLarge(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXLarge,\n )};\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:\n 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:\n 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:\n 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() {\n return css`\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\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"]}
1
+ {"version":3,"file":"Checkbox.styles.js","sourceRoot":"","sources":["Checkbox.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles, prefix } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { boxWrapperSizeMixin, checkboxSizeMixin, disabledTextColorMixin, subcaptionMixin } from './Checkbox.mixins.js';\n\nexport const globalClasses = prefix('checkbox')({\n box: 'box',\n});\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n root(t: Theme) {\n return css`\n display: inline-flex;\n align-items: baseline;\n cursor: pointer;\n position: relative;\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 flex: 0 0 auto;\n }\n\n .${globalClasses.box} {\n transition:\n background ${t.transitionDuration} ${t.transitionTimingFunction},\n box-shadow ${t.transitionDuration} ${t.transitionTimingFunction};\n }\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 },\n\n rootSmall(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeSmall,\n t.checkboxLineHeightSmall,\n t.checkboxPaddingYSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n rootMedium(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeMedium,\n t.checkboxLineHeightMedium,\n t.checkboxPaddingYMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n rootLarge(t: Theme) {\n return css`\n ${checkboxSizeMixin(\n t.checkboxFontSizeLarge,\n t.checkboxLineHeightLarge,\n t.checkboxPaddingYLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxPaddingXLarge,\n )};\n `;\n },\n\n rootDisableTextSelect() {\n return css`\n user-select: none;\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 boxWrapper(t: Theme) {\n return css`\n position: absolute;\n box-sizing: border-box;\n padding: ${t.checkboxBorderWidth};\n\n display: inline-block; \n )};\n `;\n },\n\n boxWrapperSmall(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeSmall,\n t.checkboxBoxSizeSmall,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXSmall,\n )};\n `;\n },\n\n boxWrapperMedium(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeMedium,\n t.checkboxBoxSizeMedium,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXMedium,\n )};\n `;\n },\n\n boxWrapperLarge(t: Theme) {\n return css`\n ${boxWrapperSizeMixin(\n t.labGrotesqueBaselineCompensation,\n t.checkboxFontSizeLarge,\n t.checkboxBoxSizeLarge,\n t.checkboxBoxOffsetY,\n t.checkboxPaddingXLarge,\n )};\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:\n 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:\n 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:\n 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() {\n return css`\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\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 captionWrapper(t: Theme) {\n return css`\n display: inline-block;\n padding-left: ${t.checkboxCaptionGap};\n `;\n },\n\n captionNoGap() {\n return css`\n padding-left: 0;\n `;\n },\n\n subcaption(t: Theme) {\n return css`\n margin-top: 2px;\n color: ${t.checkboxCommentTextColor};\n `;\n },\n\n subcaptionDisabled(t: Theme) {\n return css`\n ${disabledTextColorMixin(t.checkboxTextColorDisabled)};\n `;\n },\n\n subcaptionSmall(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeSmall, t.checkboxCommentLineHeightSmall)};\n `;\n },\n subcaptionMedium(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeMedium, t.checkboxCommentLineHeightMedium)};\n `;\n },\n subcaptionLarge(t: Theme) {\n return css`\n ${subcaptionMixin(t.checkboxCommentFontSizeLarge, t.checkboxCommentLineHeightLarge)};\n `;\n },\n}));\n"]}
@@ -27,6 +27,8 @@ export interface RadioProps<T> extends Pick<AriaAttributes, 'aria-label'>, Commo
27
27
  onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;
28
28
  /** Значение. */
29
29
  value: T;
30
+ /** Задаёт второстепенный пояснительный текст под основным текстом радиокнопки. */
31
+ comment?: React.ReactNode;
30
32
  }> {
31
33
  }
32
34
  export interface RadioState {
@@ -76,6 +78,8 @@ export declare class Radio<T> extends React.Component<RadioProps<T>, RadioState>
76
78
  renderMain: (props: CommonWrapperRestProps<RadioProps<T>>) => React.JSX.Element;
77
79
  private _isInRadioGroup;
78
80
  private renderCaption;
81
+ private getSubcaptionSizeClassName;
82
+ private renderComment;
79
83
  private handleChange;
80
84
  private handleMouseOver;
81
85
  private handleMouseEnter;
@@ -120,7 +120,9 @@ var Radio = /** @class */ (function (_super) {
120
120
  React.createElement("input", __assign({}, inputProps))),
121
121
  React.createElement("span", __assign({}, radioProps),
122
122
  React.createElement("span", { className: _this.styles.placeholder() })),
123
- _this.props.children && _this.renderCaption()));
123
+ _this.props.children && (React.createElement("div", { className: _this.styles.captionWrapper(_this.theme) },
124
+ _this.renderCaption(),
125
+ _this.props.comment && _this.renderComment()))));
124
126
  };
125
127
  _this._isInRadioGroup = function () { return Boolean(_this.context.name); };
126
128
  _this.handleChange = function (e) {
@@ -234,6 +236,23 @@ var Radio = /** @class */ (function (_super) {
234
236
  _a));
235
237
  return React.createElement("div", { className: captionClassNames }, this.props.children);
236
238
  };
239
+ Radio.prototype.getSubcaptionSizeClassName = function () {
240
+ switch (this.size) {
241
+ case 'large':
242
+ return this.styles.subcaptionLarge(this.theme);
243
+ case 'medium':
244
+ return this.styles.subcaptionMedium(this.theme);
245
+ case 'small':
246
+ default:
247
+ return this.styles.subcaptionSmall(this.theme);
248
+ }
249
+ };
250
+ Radio.prototype.renderComment = function () {
251
+ var _a;
252
+ return (React.createElement("div", { className: this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), (_a = {},
253
+ _a[this.styles.subcaptionDisabled(this.theme)] = !!(this.props.disabled || this.context.disabled),
254
+ _a)) }, this.props.comment));
255
+ };
237
256
  var Radio_1;
238
257
  Radio.__KONTUR_REACT_UI__ = 'Radio';
239
258
  Radio.displayName = 'Radio';
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.tsx"],"names":[],"mappings":"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","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 { RadioGroupContext } from '../RadioGroup/RadioGroupContext.js';\nimport type { RadioGroupContextType } from '../RadioGroup/RadioGroupContext.js';\nimport { getStyles, globalClasses } from './Radio.styles.js';\n\nexport interface RadioProps<T>\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер радиокнопки. */\n size?: SizeProp;\n\n /** Задаёт состояние фокуса. */\n focused?: boolean;\n\n /** Событие изменения `value`. */\n onValueChange?: (value: T) => void;\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 /** Значение. */\n value: T;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\nexport const RadioDataTids = {\n root: 'Radio__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;\n\n/** Радиокнопка позволяет выбрать одно значение из нескольких. Подходит при небольшом количестве вариантов — 2–5.\n *\n * Для создания группы радиокнопок используйте специальный контейнер — компонент [RadioGroup](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n public static displayName = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static defaultProps: DefaultProps = {\n focused: false,\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n private size!: SizeProp;\n\n private inputEl = React.createRef<HTMLInputElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\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 keyListener!: KeyListener;\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 getCircleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.circleLarge(this.theme);\n case 'medium':\n return this.styles.circleMedium(this.theme);\n case 'small':\n default:\n return this.styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.checkedLarge(this.theme);\n case 'medium':\n return this.styles.checkedMedium(this.theme);\n case 'small':\n default:\n return this.styles.checkedSmall(this.theme);\n }\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\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 * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /** Программно снимает фокус с радиокнопки.\n * @public\n */\n public blur(): void {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>): React.JSX.Element => {\n const {\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n size,\n focused,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const radioProps = {\n className: this.cx({\n [this.styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [this.styles.checked(this.theme)]: this.props.checked,\n [this.getCheckedSizeClassName()]: this.props.checked,\n [this.styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n [this.styles.error(this.theme)]: error,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n [globalClasses.circle]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: this.styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n };\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: this.props.checked,\n }),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onClick: fixFirefoxModifiedClickOnLabel(this.inputEl),\n };\n\n if (this._isInRadioGroup()) {\n const checked = this.props.value === this.context.activeItem;\n inputProps.checked = checked;\n inputProps.name = this.context.name;\n inputProps.suppressHydrationWarning = true;\n labelProps.className = this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: checked,\n });\n radioProps.className = this.cx(radioProps.className, {\n [this.styles.checked(this.theme)]: checked,\n [this.getCheckedSizeClassName()]: checked,\n [this.styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label data-tid={RadioDataTids.root} {...labelProps}>\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} />\n </FocusControlWrapper>\n <span {...radioProps}>\n <span className={this.styles.placeholder()} />\n </span>\n {this.props.children && this.renderCaption()}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderCaption() {\n const captionClassNames = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={captionClassNames}>{this.props.children}</div>;\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.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.isArrowPressed || this.keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByKeyboard: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n}\n"]}
1
+ {"version":3,"file":"Radio.js","sourceRoot":"","sources":["Radio.tsx"],"names":[],"mappings":"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","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 { RadioGroupContext } from '../RadioGroup/RadioGroupContext.js';\nimport type { RadioGroupContextType } from '../RadioGroup/RadioGroupContext.js';\nimport { getStyles, globalClasses } from './Radio.styles.js';\n\nexport interface RadioProps<T>\n extends\n Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /** Переводит контрол в состояние ошибки. */\n error?: boolean;\n\n /** Переводит контрол в состояние предупреждения. */\n warning?: boolean;\n\n /** Размер радиокнопки. */\n size?: SizeProp;\n\n /** Задаёт состояние фокуса. */\n focused?: boolean;\n\n /** Событие изменения `value`. */\n onValueChange?: (value: T) => void;\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 /** Значение. */\n value: T;\n\n /** Задаёт второстепенный пояснительный текст под основным текстом радиокнопки. */\n comment?: React.ReactNode;\n }\n > {}\n\nexport interface RadioState {\n focusedByKeyboard: boolean;\n}\n\nexport const RadioDataTids = {\n root: 'Radio__root',\n} as const;\n\ntype DefaultProps = Required<Pick<RadioProps<any>, 'focused'>>;\n\n/** Радиокнопка позволяет выбрать одно значение из нескольких. Подходит при небольшом количестве вариантов — 2–5.\n *\n * Для создания группы радиокнопок используйте специальный контейнер — компонент [RadioGroup](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_input-data-radiogroup--docs).\n */\n@withRenderEnvironment\n@rootNode\n@withSize\nexport class Radio<T> extends React.Component<RadioProps<T>, RadioState> {\n public static __KONTUR_REACT_UI__ = 'Radio';\n public static displayName = 'Radio';\n\n public state = {\n focusedByKeyboard: false,\n };\n\n public static defaultProps: DefaultProps = {\n focused: false,\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n private size!: SizeProp;\n\n private inputEl = React.createRef<HTMLInputElement>();\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\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 keyListener!: KeyListener;\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 getCircleSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.circleLarge(this.theme);\n case 'medium':\n return this.styles.circleMedium(this.theme);\n case 'small':\n default:\n return this.styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.size) {\n case 'large':\n return this.styles.checkedLarge(this.theme);\n case 'medium':\n return this.styles.checkedMedium(this.theme);\n case 'small':\n default:\n return this.styles.checkedSmall(this.theme);\n }\n }\n\n public componentDidMount() {\n this.keyListener = new KeyListener(this.globalObject);\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 * @public\n */\n public focus(): void {\n this.keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /** Программно снимает фокус с радиокнопки.\n * @public\n */\n public blur(): void {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>): React.JSX.Element => {\n const {\n disabled = this.context.disabled,\n warning = this.context.warning,\n error = this.context.error,\n size,\n focused,\n onMouseOver,\n onMouseEnter,\n onMouseLeave,\n onValueChange,\n ...rest\n } = props;\n\n const radioProps = {\n className: this.cx({\n [this.styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [this.styles.checked(this.theme)]: this.props.checked,\n [this.getCheckedSizeClassName()]: this.props.checked,\n [this.styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n [this.styles.error(this.theme)]: error,\n [this.styles.warning(this.theme)]: warning,\n [this.styles.disabled(this.theme)]: disabled,\n [this.styles.checkedDisabled(this.theme)]: this.props.checked && disabled,\n [globalClasses.circle]: true,\n }),\n };\n\n let value: string | number | undefined;\n if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {\n value = this.props.value;\n }\n\n const inputProps = {\n ...rest,\n type: 'radio',\n className: this.styles.input(),\n disabled,\n tabIndex: this.props.tabIndex,\n value,\n ref: this.inputEl,\n onChange: this.handleChange,\n onFocus: this.handleFocus,\n onBlur: this.handleBlur,\n };\n\n const labelProps = {\n className: this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: this.props.checked,\n }),\n onMouseOver: this.handleMouseOver,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n onClick: fixFirefoxModifiedClickOnLabel(this.inputEl),\n };\n\n if (this._isInRadioGroup()) {\n const checked = this.props.value === this.context.activeItem;\n inputProps.checked = checked;\n inputProps.name = this.context.name;\n inputProps.suppressHydrationWarning = true;\n labelProps.className = this.cx(this.styles.root(this.theme), this.getRootSizeClassName(), {\n [this.styles.rootChecked(this.theme)]: checked,\n });\n radioProps.className = this.cx(radioProps.className, {\n [this.styles.checked(this.theme)]: checked,\n [this.getCheckedSizeClassName()]: checked,\n [this.styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label data-tid={RadioDataTids.root} {...labelProps}>\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input {...inputProps} />\n </FocusControlWrapper>\n <span {...radioProps}>\n <span className={this.styles.placeholder()} />\n </span>\n {this.props.children && (\n <div className={this.styles.captionWrapper(this.theme)}>\n {this.renderCaption()}\n {this.props.comment && this.renderComment()}\n </div>\n )}\n </label>\n );\n };\n\n private _isInRadioGroup = () => Boolean(this.context.name);\n\n private renderCaption() {\n const captionClassNames = this.cx({\n [this.styles.caption(this.theme)]: true,\n [this.styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n });\n\n return <div className={captionClassNames}>{this.props.children}</div>;\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 renderComment() {\n return (\n <div\n className={this.cx(this.styles.subcaption(this.theme), this.getSubcaptionSizeClassName(), {\n [this.styles.subcaptionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n })}\n >\n {this.props.comment}\n </div>\n );\n }\n\n private handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n this.props.onValueChange?.(this.props.value);\n\n if (this._isInRadioGroup()) {\n this.context.onSelect(this.props.value);\n }\n\n this.props.onChange?.(e);\n };\n\n private handleMouseOver: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseOver?.(e);\n };\n\n private handleMouseEnter: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseEnter?.(e);\n };\n\n private handleMouseLeave: React.MouseEventHandler<HTMLLabelElement> = (e) => {\n this.props.onMouseLeave?.(e);\n };\n\n private handleFocus = (e: React.FocusEvent<any>) => {\n if (!this.context.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.isArrowPressed || this.keyListener.isTabPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n\n if (this.props.onFocus) {\n this.props.onFocus(e);\n }\n }\n };\n\n private resetFocus = () => this.setState({ focusedByKeyboard: false });\n\n private handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(e);\n };\n}\n"]}
@@ -3,3 +3,5 @@ export declare const circleSizeMixin: (labGrotesqueBaselineCompensation: string,
3
3
  export declare const radioCheckedMixin: (bulletSize: string) => string;
4
4
  export declare const afterOutlineMixin: (radioOutlineWidth: string) => string;
5
5
  export declare const outlineColorMixin: (shadow: string, borderColor: string) => string;
6
+ export declare const subcaptionMixin: (fontSize: string, lineHeight: string) => string;
7
+ export declare const disabledTextColorMixin: (textColor: string) => string;
@@ -21,4 +21,10 @@ export var afterOutlineMixin = function (radioOutlineWidth) {
21
21
  export var outlineColorMixin = function (shadow, borderColor) {
22
22
  return "\n box-shadow: ".concat(shadow, ";\n border-color: ").concat(borderColor, ";\n ");
23
23
  };
24
+ export var subcaptionMixin = function (fontSize, lineHeight) {
25
+ return "\n font-size: ".concat(fontSize, ";\n line-height: ").concat(lineHeight, ";\n ");
26
+ };
27
+ export var disabledTextColorMixin = function (textColor) {
28
+ return "\n color: ".concat(textColor, ";\n ");
29
+ };
24
30
  //# sourceMappingURL=Radio.mixins.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.mixins.js","sourceRoot":"","sources":["Radio.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,cAAc,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,SAAiB;IACtG,OAAO,2BACQ,QAAQ,iCACN,UAAU,6BACd,QAAQ,gDAER,SAAS,iBAErB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,SAAiB,EACjB,4BAAoC,EACpC,kBAA0B;IAE1B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,aAAa,EACb,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,IAAM,UAAU,GAAG,eAAQ,SAAS,oBAAU,4BAA4B,MAAG,CAAC;IAC9E,IAAM,aAAa,GAAG,eAAQ,kBAAkB,gBAAM,4BAA4B,gBAAM,oBAAoB,QAAK,CAAC;IAClH,IAAM,aAAa,GAAG,4BAA4B,CAAC;IACnD,OAAO,wBACK,UAAU,2BACX,UAAU,4BACT,aAAa,cAAI,aAAa,YACzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,UAAkB;IAClD,OAAO,2CAEO,UAAU,6BACX,UAAU,iBAEtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,iBAAyB;IACzD,OAAO,kEAGG,iBAAiB,6BACd,iBAAiB,2BACnB,iBAAiB,4BAChB,iBAAiB,kCACX,iBAAiB,0FAIlC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAc,EAAE,WAAmB;IACnE,OAAO,4BACS,MAAM,kCACJ,WAAW,UAC5B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { isChrome, isFirefox } from '../../lib/client.js';\nimport { getLabGrotesqueBaselineCompensation } from '../../lib/styles/getLabGrotesqueBaselineCompensation.js';\n\nexport const radioSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, radioSize: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n padding: ${paddingY} 0;\n &::before {\n width: ${radioSize};\n }\n `;\n};\n\nexport const circleSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n radioSize: string,\n radioBorderWidthCompensation: string,\n radioCircleOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const radioFontSize = parseInt(fontSize);\n\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n radioFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n const circleSize = `calc(${radioSize} - 2 * ${radioBorderWidthCompensation})`;\n const circleOffsetY = `calc(${radioCircleOffsetY} + ${radioBorderWidthCompensation} + ${baselineCompensation}px)`;\n const circleMarginX = radioBorderWidthCompensation;\n return `\n height: ${circleSize};\n width: ${circleSize};\n margin: ${circleOffsetY} ${circleMarginX} 0;\n `;\n};\n\nexport const radioCheckedMixin = (bulletSize: string): string => {\n return `\n &::before {\n height: ${bulletSize};\n width: ${bulletSize};\n }\n `;\n};\n\nexport const afterOutlineMixin = (radioOutlineWidth: string): string => {\n return `\n content: ' ';\n position: absolute;\n top: -${radioOutlineWidth};\n bottom: -${radioOutlineWidth};\n left: -${radioOutlineWidth};\n right: -${radioOutlineWidth};\n border-width: ${radioOutlineWidth};\n border-style: solid;\n border-radius: 50%;\n box-sizing: border-box;\n `;\n};\n\nexport const outlineColorMixin = (shadow: string, borderColor: string): string => {\n return `\n box-shadow: ${shadow};\n border-color: ${borderColor};\n `;\n};\n"]}
1
+ {"version":3,"file":"Radio.mixins.js","sourceRoot":"","sources":["Radio.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,cAAc,GAAG,UAAC,QAAgB,EAAE,UAAkB,EAAE,QAAgB,EAAE,SAAiB;IACtG,OAAO,2BACQ,QAAQ,iCACN,UAAU,6BACd,QAAQ,gDAER,SAAS,iBAErB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,eAAe,GAAG,UAC7B,gCAAwC,EACxC,QAAgB,EAChB,SAAiB,EACjB,4BAAoC,EACpC,kBAA0B;IAE1B,IAAM,yBAAyB,GAAG,QAAQ,CAAC,gCAAgC,CAAC,CAAC;IAC7E,IAAM,aAAa,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEzC,IAAM,oBAAoB,GAAG,mCAAmC,CAC9D,aAAa,EACb,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,IAAM,UAAU,GAAG,eAAQ,SAAS,oBAAU,4BAA4B,MAAG,CAAC;IAC9E,IAAM,aAAa,GAAG,eAAQ,kBAAkB,gBAAM,4BAA4B,gBAAM,oBAAoB,QAAK,CAAC;IAClH,IAAM,aAAa,GAAG,4BAA4B,CAAC;IACnD,OAAO,wBACK,UAAU,2BACX,UAAU,4BACT,aAAa,cAAI,aAAa,YACzC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,UAAkB;IAClD,OAAO,2CAEO,UAAU,6BACX,UAAU,iBAEtB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,iBAAyB;IACzD,OAAO,kEAGG,iBAAiB,6BACd,iBAAiB,2BACnB,iBAAiB,4BAChB,iBAAiB,kCACX,iBAAiB,0FAIlC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,MAAc,EAAE,WAAmB;IACnE,OAAO,4BACS,MAAM,kCACJ,WAAW,UAC5B,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 radioSizeMixin = (fontSize: string, lineHeight: string, paddingY: string, radioSize: string): string => {\n return `\n font-size: ${fontSize};\n line-height: ${lineHeight};\n padding: ${paddingY} 0;\n &::before {\n width: ${radioSize};\n }\n `;\n};\n\nexport const circleSizeMixin = (\n labGrotesqueBaselineCompensation: string,\n fontSize: string,\n radioSize: string,\n radioBorderWidthCompensation: string,\n radioCircleOffsetY: string,\n): string => {\n const labGrotesqueCompenstation = parseInt(labGrotesqueBaselineCompensation);\n const radioFontSize = parseInt(fontSize);\n\n const baselineCompensation = getLabGrotesqueBaselineCompensation(\n radioFontSize,\n labGrotesqueCompenstation,\n isChrome,\n isFirefox,\n );\n const circleSize = `calc(${radioSize} - 2 * ${radioBorderWidthCompensation})`;\n const circleOffsetY = `calc(${radioCircleOffsetY} + ${radioBorderWidthCompensation} + ${baselineCompensation}px)`;\n const circleMarginX = radioBorderWidthCompensation;\n return `\n height: ${circleSize};\n width: ${circleSize};\n margin: ${circleOffsetY} ${circleMarginX} 0;\n `;\n};\n\nexport const radioCheckedMixin = (bulletSize: string): string => {\n return `\n &::before {\n height: ${bulletSize};\n width: ${bulletSize};\n }\n `;\n};\n\nexport const afterOutlineMixin = (radioOutlineWidth: string): string => {\n return `\n content: ' ';\n position: absolute;\n top: -${radioOutlineWidth};\n bottom: -${radioOutlineWidth};\n left: -${radioOutlineWidth};\n right: -${radioOutlineWidth};\n border-width: ${radioOutlineWidth};\n border-style: solid;\n border-radius: 50%;\n box-sizing: border-box;\n `;\n};\n\nexport const outlineColorMixin = (shadow: string, borderColor: string): string => {\n return `\n box-shadow: ${shadow};\n border-color: ${borderColor};\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"]}
@@ -25,4 +25,10 @@ export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGet
25
25
  caption(t: Theme): string;
26
26
  captionDisabled(t: Theme): string;
27
27
  placeholder(): string;
28
+ captionWrapper(t: Theme): string;
29
+ subcaption(t: Theme): string;
30
+ subcaptionDisabled(t: Theme): string;
31
+ subcaptionSmall(t: Theme): string;
32
+ subcaptionMedium(t: Theme): string;
33
+ subcaptionLarge(t: Theme): string;
28
34
  }>;