@skbkontur/react-ui 4.22.2 → 4.22.3

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 (84) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/cjs/components/Checkbox/Checkbox.d.ts +1 -0
  3. package/cjs/components/Checkbox/Checkbox.js +7 -2
  4. package/cjs/components/Checkbox/Checkbox.js.map +1 -1
  5. package/cjs/components/CurrencyInput/CurrencyInput.d.ts +1 -0
  6. package/cjs/components/CurrencyInput/CurrencyInput.js +9 -5
  7. package/cjs/components/CurrencyInput/CurrencyInput.js.map +1 -1
  8. package/cjs/components/DateInput/DateInput.d.ts +1 -0
  9. package/cjs/components/DateInput/DateInput.js +8 -3
  10. package/cjs/components/DateInput/DateInput.js.map +1 -1
  11. package/cjs/components/FileUploader/FileUploader.js +4 -1
  12. package/cjs/components/FileUploader/FileUploader.js.map +1 -1
  13. package/cjs/components/Input/Input.d.ts +1 -0
  14. package/cjs/components/Input/Input.js +8 -6
  15. package/cjs/components/Input/Input.js.map +1 -1
  16. package/cjs/components/Radio/Radio.d.ts +1 -0
  17. package/cjs/components/Radio/Radio.js +7 -2
  18. package/cjs/components/Radio/Radio.js.map +1 -1
  19. package/cjs/components/Toggle/Toggle.d.ts +1 -0
  20. package/cjs/components/Toggle/Toggle.js +8 -7
  21. package/cjs/components/Toggle/Toggle.js.map +1 -1
  22. package/cjs/internal/CommonWrapper/CommonWrapper.js +9 -2
  23. package/cjs/internal/CommonWrapper/CommonWrapper.js.map +1 -1
  24. package/cjs/internal/FocusControlWrapper/FocusControlWrapper.d.ts +17 -0
  25. package/cjs/internal/FocusControlWrapper/FocusControlWrapper.js +46 -0
  26. package/cjs/internal/FocusControlWrapper/FocusControlWrapper.js.map +1 -0
  27. package/cjs/internal/FocusControlWrapper/FocusControlWrapper.stories.d.ts +5 -0
  28. package/cjs/internal/FocusControlWrapper/index.d.ts +1 -0
  29. package/cjs/internal/FocusControlWrapper/index.js +1 -0
  30. package/cjs/internal/FocusControlWrapper/index.js.map +1 -0
  31. package/cjs/internal/FocusControlWrapper/useFocusControl.d.ts +12 -0
  32. package/cjs/internal/FocusControlWrapper/useFocusControl.js +34 -0
  33. package/cjs/internal/FocusControlWrapper/useFocusControl.js.map +1 -0
  34. package/cjs/internal/InputLikeText/InputLikeText.d.ts +1 -0
  35. package/cjs/internal/InputLikeText/InputLikeText.js +25 -13
  36. package/cjs/internal/InputLikeText/InputLikeText.js.map +1 -1
  37. package/cjs/{components/DateInput/helpers/SelectionHelpers.js.map → lib/dom/selectionHelpers.js.map} +1 -1
  38. package/components/Checkbox/Checkbox/Checkbox.js +12 -5
  39. package/components/Checkbox/Checkbox/Checkbox.js.map +1 -1
  40. package/components/Checkbox/Checkbox.d.ts +1 -0
  41. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js +11 -6
  42. package/components/CurrencyInput/CurrencyInput/CurrencyInput.js.map +1 -1
  43. package/components/CurrencyInput/CurrencyInput.d.ts +1 -0
  44. package/components/DateInput/DateInput/DateInput.js +13 -6
  45. package/components/DateInput/DateInput/DateInput.js.map +1 -1
  46. package/components/DateInput/DateInput.d.ts +1 -0
  47. package/components/FileUploader/FileUploader/FileUploader.js +7 -2
  48. package/components/FileUploader/FileUploader/FileUploader.js.map +1 -1
  49. package/components/Input/Input/Input.js +11 -6
  50. package/components/Input/Input/Input.js.map +1 -1
  51. package/components/Input/Input.d.ts +1 -0
  52. package/components/Radio/Radio/Radio.js +12 -5
  53. package/components/Radio/Radio/Radio.js.map +1 -1
  54. package/components/Radio/Radio.d.ts +1 -0
  55. package/components/Toggle/Toggle/Toggle.js +12 -7
  56. package/components/Toggle/Toggle/Toggle.js.map +1 -1
  57. package/components/Toggle/Toggle.d.ts +1 -0
  58. package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js +17 -6
  59. package/internal/CommonWrapper/CommonWrapper/CommonWrapper.js.map +1 -1
  60. package/internal/FocusControlWrapper/FocusControlWrapper/FocusControlWrapper.js +33 -0
  61. package/internal/FocusControlWrapper/FocusControlWrapper/FocusControlWrapper.js.map +1 -0
  62. package/internal/FocusControlWrapper/FocusControlWrapper/package.json +6 -0
  63. package/internal/FocusControlWrapper/FocusControlWrapper.d.ts +17 -0
  64. package/internal/FocusControlWrapper/FocusControlWrapper.stories.d.ts +5 -0
  65. package/internal/FocusControlWrapper/index/index.js +1 -0
  66. package/internal/FocusControlWrapper/index/index.js.map +1 -0
  67. package/internal/FocusControlWrapper/index/package.json +6 -0
  68. package/internal/FocusControlWrapper/index.d.ts +1 -0
  69. package/internal/FocusControlWrapper/package.json +6 -0
  70. package/internal/FocusControlWrapper/useFocusControl/package.json +6 -0
  71. package/internal/FocusControlWrapper/useFocusControl/useFocusControl.js +33 -0
  72. package/internal/FocusControlWrapper/useFocusControl/useFocusControl.js.map +1 -0
  73. package/internal/FocusControlWrapper/useFocusControl.d.ts +12 -0
  74. package/internal/InputLikeText/InputLikeText/InputLikeText.js +34 -8
  75. package/internal/InputLikeText/InputLikeText/InputLikeText.js.map +1 -1
  76. package/internal/InputLikeText/InputLikeText.d.ts +1 -0
  77. package/lib/dom/selectionHelpers/package.json +6 -0
  78. package/{components/DateInput/helpers/SelectionHelpers/SelectionHelpers.js.map → lib/dom/selectionHelpers/selectionHelpers.js.map} +1 -1
  79. package/package.json +3 -3
  80. package/components/DateInput/helpers/SelectionHelpers/package.json +0 -6
  81. /package/cjs/{components/DateInput/helpers/SelectionHelpers.d.ts → lib/dom/selectionHelpers.d.ts} +0 -0
  82. /package/cjs/{components/DateInput/helpers/SelectionHelpers.js → lib/dom/selectionHelpers.js} +0 -0
  83. /package/{components/DateInput/helpers/SelectionHelpers/SelectionHelpers.js → lib/dom/selectionHelpers/selectionHelpers.js} +0 -0
  84. /package/{components/DateInput/helpers/SelectionHelpers.d.ts → lib/dom/selectionHelpers.d.ts} +0 -0
@@ -15,6 +15,7 @@ var _client = require("../../lib/client");
15
15
  var _RadioGroupContext = require("../RadioGroup/RadioGroupContext");
16
16
  var _createPropsGetter = require("../../lib/createPropsGetter");
17
17
 
18
+ var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
18
19
 
19
20
  var _Radio = require("./Radio.styles");var _excluded = ["disabled", "warning", "error", "size", "focused", "onMouseOver", "onMouseEnter", "onMouseLeave", "onValueChange"];var _class, _class2, _temp;
20
21
 
@@ -246,7 +247,9 @@ Radio = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
246
247
 
247
248
  return /*#__PURE__*/(
248
249
  _react.default.createElement("label", (0, _extends2.default)({ "data-tid": RadioDataTids.root }, labelProps), /*#__PURE__*/
249
- _react.default.createElement("input", inputProps), /*#__PURE__*/
250
+ _react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: _this.resetFocus }, /*#__PURE__*/
251
+ _react.default.createElement("input", inputProps)), /*#__PURE__*/
252
+
250
253
  _react.default.createElement("span", radioProps, /*#__PURE__*/
251
254
  _react.default.createElement("span", { className: _Radio.styles.placeholder() })),
252
255
 
@@ -305,9 +308,11 @@ Radio = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
305
308
  }
306
309
  };_this.
307
310
 
311
+ resetFocus = function () {return _this.setState({ focusedByKeyboard: false });};_this.
312
+
308
313
  handleBlur = function (e) {
314
+ _this.resetFocus();
309
315
  _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
310
- _this.setState({ focusedByKeyboard: false });
311
316
  };return _this;}var _proto = Radio.prototype;_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.getProps().size) {case 'large':return _Radio.styles.rootLarge(this.theme);case 'medium':return _Radio.styles.rootMedium(this.theme);case 'small':default:return _Radio.styles.rootSmall(this.theme);}};_proto.getCircleSizeClassName = function getCircleSizeClassName() {switch (this.getProps().size) {case 'large':return _Radio.styles.circleLarge(this.theme);case 'medium':return _Radio.styles.circleMedium(this.theme);case 'small':default:return _Radio.styles.circleSmall(this.theme);}};_proto.getCheckedSizeClassName = function getCheckedSizeClassName() {switch (this.getProps().size) {case 'large':return _Radio.styles.checkedLarge(this.theme);case 'medium':return _Radio.styles.checkedMedium(this.theme);case 'small':default:return _Radio.styles.checkedSmall(this.theme);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});} /**
312
317
  * @public
313
318
  */;_proto.focus = function focus() {var _this$inputEl$current;_keyListener.keyListener.isTabPressed = true;(_this$inputEl$current = this.inputEl.current) == null ? void 0 : _this$inputEl$current.focus();} /**
@@ -1 +1 @@
1
- {"version":3,"sources":["Radio.tsx"],"names":["RadioDataTids","root","Radio","rootNode","state","focusedByKeyboard","getProps","defaultProps","context","inputEl","React","createRef","renderMain","props","disabled","warning","error","size","focused","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","styles","circle","theme","getCircleSizeClassName","checked","getCheckedSizeClassName","focus","checkedDisabled","globalClasses","value","inputProps","type","input","tabIndex","ref","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","labelProps","getRootSizeClassName","rootChecked","rootIE11","isIE11","isEdge","handleMouseOver","handleMouseEnter","handleMouseLeave","onClick","_isInRadioGroup","activeItem","name","suppressHydrationWarning","placeholder","children","renderCaption","Boolean","e","onSelect","globalObject","requestAnimationFrame","keyListener","isArrowPressed","isTabPressed","setState","rootLarge","rootMedium","rootSmall","circleLarge","circleMedium","circleSmall","checkedLarge","checkedMedium","checkedSmall","render","setRootNode","current","blur","captionClassNames","caption","captionDisabled","captionIE11","Component","__KONTUR_REACT_UI__","displayName","contextType","RadioGroupContext"],"mappings":";;AAEA;AACA;;;AAGA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA,uC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,IAAI,EAAE,aADqB,EAAtB,C;;;;;AAMP;AACA;AACA,G;;AAEaC,K,OADZC,kB;;;;AAKQC,IAAAA,K,GAAQ;AACbC,MAAAA,iBAAiB,EAAE,KADN,E;;;;;;;;AASPC,IAAAA,Q,GAAW,0CAAkBJ,KAAK,CAACK,YAAxB,C;;;AAGZC,IAAAA,O,GAAoC,MAAKA,O;;AAExCC,IAAAA,O,gBAAUC,eAAMC,SAAN,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEXC,IAAAA,U,GAAa,UAACC,KAAD,EAAkD;AACpE;;;;;;;;;;;AAWIA,MAAAA,KAXJ,CACEC,QADF,CACEA,QADF,gCACa,MAAKN,OAAL,CAAaM,QAD1B,oCAWID,KAXJ,CAEEE,OAFF,CAEEA,OAFF,+BAEY,MAAKP,OAAL,CAAaO,OAFzB,iCAWIF,KAXJ,CAGEG,KAHF,CAGEA,KAHF,6BAGU,MAAKR,OAAL,CAAaQ,KAHvB,gBAIEC,IAJF,GAWIJ,KAXJ,CAIEI,IAJF,CAKEC,OALF,GAWIL,KAXJ,CAKEK,OALF,CAMEC,WANF,GAWIN,KAXJ,CAMEM,WANF,CAOEC,YAPF,GAWIP,KAXJ,CAOEO,YAPF,CAQEC,YARF,GAWIR,KAXJ,CAQEQ,YARF,CASEC,aATF,GAWIT,KAXJ,CASES,aATF,CAUKC,IAVL,+CAWIV,KAXJ;;AAaA,UAAMW,UAAU,GAAG;AACjBC,QAAAA,SAAS,EAAE;AACRC,sBAAOC,MAAP,CAAc,MAAKC,KAAnB,CADQ,IACoB,IADpB;AAER,cAAKC,sBAAL,EAFQ,IAEwB,IAFxB;AAGRH,sBAAOI,OAAP,CAAe,MAAKF,KAApB,CAHQ,IAGqB,MAAKf,KAAL,CAAWiB,OAHhC;AAIR,cAAKC,uBAAL,EAJQ,IAIyB,MAAKlB,KAAL,CAAWiB,OAJpC;AAKRJ,sBAAOM,KAAP,CAAa,MAAKJ,KAAlB,CALQ,IAKmB,MAAKtB,QAAL,GAAgBY,OAAhB,IAA2B,MAAKd,KAAL,CAAWC,iBALzD;AAMRqB,sBAAOV,KAAP,CAAa,MAAKY,KAAlB,CANQ,IAMmBZ,KANnB;AAORU,sBAAOX,OAAP,CAAe,MAAKa,KAApB,CAPQ,IAOqBb,OAPrB;AAQRW,sBAAOZ,QAAP,CAAgB,MAAKc,KAArB,CARQ,IAQsBd,QARtB;AASRY,sBAAOO,eAAP,CAAuB,MAAKL,KAA5B,CATQ,IAS6B,MAAKf,KAAL,CAAWiB,OAAX,IAAsBhB,QATnD;AAURoB,6BAAcP,MAVN,IAUe,IAVf,OADM,EAAnB;;;;AAeA,UAAIQ,KAAJ;AACA,UAAI,OAAO,MAAKtB,KAAL,CAAWsB,KAAlB,KAA4B,QAA5B,IAAwC,OAAO,MAAKtB,KAAL,CAAWsB,KAAlB,KAA4B,QAAxE,EAAkF;AAChFA,QAAAA,KAAK,GAAG,MAAKtB,KAAL,CAAWsB,KAAnB;AACD;;AAED,UAAMC,UAAU;AACXb,MAAAA,IADW;AAEdc,QAAAA,IAAI,EAAE,OAFQ;AAGdZ,QAAAA,SAAS,EAAEC,cAAOY,KAAP,EAHG;AAIdxB,QAAAA,QAAQ,EAARA,QAJc;AAKdyB,QAAAA,QAAQ,EAAE,MAAK1B,KAAL,CAAW0B,QALP;AAMdJ,QAAAA,KAAK,EAALA,KANc;AAOdK,QAAAA,GAAG,EAAE,MAAK/B,OAPI;AAQdgC,QAAAA,QAAQ,EAAE,MAAKC,YARD;AASdC,QAAAA,OAAO,EAAE,MAAKC,WATA;AAUdC,QAAAA,MAAM,EAAE,MAAKC,UAVC,GAAhB;;;AAaA,UAAMC,UAAU,GAAG;AACjBtB,QAAAA,SAAS,EAAE,iBAAGC,cAAOzB,IAAP,CAAY,MAAK2B,KAAjB,CAAH,EAA4B,MAAKoB,oBAAL,EAA5B;AACRtB,sBAAOuB,WAAP,CAAmB,MAAKrB,KAAxB,CADQ,IACyB,MAAKf,KAAL,CAAWiB,OADpC;AAERJ,sBAAOwB,QAAP,EAFQ,IAEYC,kBAAUC,cAFtB,QADM;;AAKjBjC,QAAAA,WAAW,EAAE,MAAKkC,eALD;AAMjBjC,QAAAA,YAAY,EAAE,MAAKkC,gBANF;AAOjBjC,QAAAA,YAAY,EAAE,MAAKkC,gBAPF;AAQjBC,QAAAA,OAAO,EAAE,oEAA+B,MAAK/C,OAApC,CARQ,EAAnB;;;AAWA,UAAI,MAAKgD,eAAL,EAAJ,EAA4B;AAC1B,YAAM3B,OAAO,GAAG,MAAKjB,KAAL,CAAWsB,KAAX,KAAqB,MAAK3B,OAAL,CAAakD,UAAlD;AACAtB,QAAAA,UAAU,CAACN,OAAX,GAAqBA,OAArB;AACAM,QAAAA,UAAU,CAACuB,IAAX,GAAkB,MAAKnD,OAAL,CAAamD,IAA/B;AACAvB,QAAAA,UAAU,CAACwB,wBAAX,GAAsC,IAAtC;AACAb,QAAAA,UAAU,CAACtB,SAAX,GAAuB,iBAAGC,cAAOzB,IAAP,CAAY,MAAK2B,KAAjB,CAAH,EAA4B,MAAKoB,oBAAL,EAA5B;AACpBtB,sBAAOuB,WAAP,CAAmB,MAAKrB,KAAxB,CADoB,IACaE,OADb;AAEpBJ,sBAAOwB,QAAP,EAFoB,IAEAC,kBAAUC,cAFV,QAAvB;;AAIA5B,QAAAA,UAAU,CAACC,SAAX,GAAuB,iBAAGD,UAAU,CAACC,SAAd;AACpBC,sBAAOI,OAAP,CAAe,MAAKF,KAApB,CADoB,IACSE,OADT;AAEpB,cAAKC,uBAAL,EAFoB,IAEaD,OAFb;AAGpBJ,sBAAOO,eAAP,CAAuB,MAAKL,KAA5B,CAHoB,IAGiBE,OAAO,IAAIhB,QAH5B,QAAvB;;AAKD;;AAED;AACE,uEAAO,YAAUd,aAAa,CAACC,IAA/B,IAAyC8C,UAAzC;AACE,8CAAWX,UAAX,CADF;AAEE,6CAAUZ,UAAV;AACE,+CAAM,SAAS,EAAEE,cAAOmC,WAAP,EAAjB,GADF,CAFF;;AAKG,cAAKhD,KAAL,CAAWiD,QAAX,IAAuB,MAAKC,aAAL,EAL1B,CADF;;;AASD,K;;AAEON,IAAAA,e,GAAkB,oBAAMO,OAAO,CAAC,MAAKxD,OAAL,CAAamD,IAAd,CAAb,E;;;;;;;;;;;;AAYlBjB,IAAAA,Y,GAA2D,UAACuB,CAAD,EAAO;AACxE,YAAKpD,KAAL,CAAWS,aAAX,0BAAKT,KAAL,CAAWS,aAAX,CAA2B,MAAKT,KAAL,CAAWsB,KAAtC;;AAEA,UAAI,MAAKsB,eAAL,EAAJ,EAA4B;AAC1B,cAAKjD,OAAL,CAAa0D,QAAb,CAAsB,MAAKrD,KAAL,CAAWsB,KAAjC;AACD;;AAED,YAAKtB,KAAL,CAAW4B,QAAX,0BAAK5B,KAAL,CAAW4B,QAAX,CAAsBwB,CAAtB;AACD,K;;AAEOZ,IAAAA,e,GAA6D,UAACY,CAAD,EAAO;AAC1E,YAAKpD,KAAL,CAAWM,WAAX,0BAAKN,KAAL,CAAWM,WAAX,CAAyB8C,CAAzB;AACD,K;;AAEOX,IAAAA,gB,GAA8D,UAACW,CAAD,EAAO;AAC3E,YAAKpD,KAAL,CAAWO,YAAX,0BAAKP,KAAL,CAAWO,YAAX,CAA0B6C,CAA1B;AACD,K;;AAEOV,IAAAA,gB,GAA8D,UAACU,CAAD,EAAO;AAC3E,YAAKpD,KAAL,CAAWQ,YAAX,0BAAKR,KAAL,CAAWQ,YAAX,CAA0B4C,CAA1B;AACD,K;;AAEOrB,IAAAA,W,GAAc,UAACqB,CAAD,EAA8B;AAClD,UAAI,CAAC,MAAKzD,OAAL,CAAaM,QAAlB,EAA4B;AAC1B;AACA;AACAqD,mCAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,cAAIC,yBAAYC,cAAZ,IAA8BD,yBAAYE,YAA9C,EAA4D;AAC1D,kBAAKC,QAAL,CAAc,EAAEnE,iBAAiB,EAAE,IAArB,EAAd;AACD;AACF,SAJD;;AAMA,YAAI,MAAKQ,KAAL,CAAW8B,OAAf,EAAwB;AACtB,gBAAK9B,KAAL,CAAW8B,OAAX,CAAmBsB,CAAnB;AACD;AACF;AACF,K;;AAEOnB,IAAAA,U,GAAa,UAACmB,CAAD,EAA2C;AAC9D,YAAKpD,KAAL,CAAWgC,MAAX,0BAAKhC,KAAL,CAAWgC,MAAX,CAAoBoB,CAApB;AACA,YAAKO,QAAL,CAAc,EAAEnE,iBAAiB,EAAE,KAArB,EAAd;AACD,K,mDA5MO2C,oB,GAAR,gCAA+B,CAC7B,QAAQ,KAAK1C,QAAL,GAAgBW,IAAxB,GACE,KAAK,OAAL,CACE,OAAOS,cAAO+C,SAAP,CAAiB,KAAK7C,KAAtB,CAAP,CACF,KAAK,QAAL,CACE,OAAOF,cAAOgD,UAAP,CAAkB,KAAK9C,KAAvB,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOF,cAAOiD,SAAP,CAAiB,KAAK/C,KAAtB,CAAP,CAPJ,CASD,C,QAEOC,sB,GAAR,kCAAiC,CAC/B,QAAQ,KAAKvB,QAAL,GAAgBW,IAAxB,GACE,KAAK,OAAL,CACE,OAAOS,cAAOkD,WAAP,CAAmB,KAAKhD,KAAxB,CAAP,CACF,KAAK,QAAL,CACE,OAAOF,cAAOmD,YAAP,CAAoB,KAAKjD,KAAzB,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOF,cAAOoD,WAAP,CAAmB,KAAKlD,KAAxB,CAAP,CAPJ,CASD,C,QAEOG,uB,GAAR,mCAAkC,CAChC,QAAQ,KAAKzB,QAAL,GAAgBW,IAAxB,GACE,KAAK,OAAL,CACE,OAAOS,cAAOqD,YAAP,CAAoB,KAAKnD,KAAzB,CAAP,CACF,KAAK,QAAL,CACE,OAAOF,cAAOsD,aAAP,CAAqB,KAAKpD,KAA1B,CAAP,CACF,KAAK,OAAL,CACA,QACE,OAAOF,cAAOuD,YAAP,CAAoB,KAAKrD,KAAzB,CAAP,CAPJ,CASD,C,QAEMsD,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACtD,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBACE,6BAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACuD,WAAjC,IAAkD,MAAI,CAACtE,KAAvD,GACG,MAAI,CAACD,UADR,CADF,CAKD,CARH,CADF,CAYD,C,CAED;AACF;AACA,K,QACSoB,K,GAAP,iBAAe,2BACbqC,yBAAYE,YAAZ,GAA2B,IAA3B,CACA,8BAAK9D,OAAL,CAAa2E,OAAb,2CAAsBpD,KAAtB,GACD,C,CAED;AACF;AACA,K,QACSqD,I,GAAP,gBAAc,4BACZ,+BAAK5E,OAAL,CAAa2E,OAAb,4CAAsBC,IAAtB,GACD,C,QAyFOtB,a,GAAR,yBAAwB,UACtB,IAAMuB,iBAAiB,GAAG,kCACvB5D,cAAO6D,OAAP,CAAe,KAAK3D,KAApB,CADuB,IACM,IADN,OAEvBF,cAAO8D,eAAP,CAAuB,KAAK5D,KAA5B,CAFuB,IAEc,CAAC,EAAE,KAAKf,KAAL,CAAWC,QAAX,IAAuB,KAAKN,OAAL,CAAaM,QAAtC,CAFf,OAGvBY,cAAO+D,WAAP,EAHuB,IAGAtC,kBAAUC,cAHV,QAA1B,CAMA,oBAAO,sCAAK,SAAS,EAAEkC,iBAAhB,IAAoC,KAAKzE,KAAL,CAAWiD,QAA/C,CAAP,CACD,C,gBAvL2BpD,eAAMgF,S,WACpBC,mB,GAAsB,O,UACtBC,W,GAAc,O,UAMdrF,Y,GAA6B,EACzCW,OAAO,EAAE,KADgC,EAEzCD,IAAI,EAAE,OAFmC,E,UAO7B4E,W,GAAcC,oC","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Override } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel';\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { RadioGroupContext, RadioGroupContextType } from '../RadioGroup/RadioGroupContext';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles, globalClasses } from './Radio.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type RadioSize = SizeProp;\n\nexport interface RadioProps<T>\n extends Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /**\n * Размер\n */\n size?: SizeProp;\n /**\n * Состояние фокуса.\n */\n focused?: boolean;\n /**\n * Функция, вызываемая при изменении `value`.\n */\n onValueChange?: (value: T) => void;\n /**\n * HTML-событие `onmouseenter`\n */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `mouseleave`\n */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `onmouseover`\n */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-атрибут `value`.\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' | 'size'>>;\n\n/**\n * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.\n */\n@rootNode\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 size: 'small',\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n\n private inputEl = React.createRef<HTMLInputElement>();\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n private getRootSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.rootLarge(this.theme);\n case 'medium':\n return styles.rootMedium(this.theme);\n case 'small':\n default:\n return styles.rootSmall(this.theme);\n }\n }\n\n private getCircleSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.circleLarge(this.theme);\n case 'medium':\n return styles.circleMedium(this.theme);\n case 'small':\n default:\n return styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.checkedLarge(this.theme);\n case 'medium':\n return styles.checkedMedium(this.theme);\n case 'small':\n default:\n return styles.checkedSmall(this.theme);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public focus() {\n keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\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: cx({\n [styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [styles.checked(this.theme)]: this.props.checked,\n [this.getCheckedSizeClassName()]: this.props.checked,\n [styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n [styles.error(this.theme)]: error,\n [styles.warning(this.theme)]: warning,\n [styles.disabled(this.theme)]: disabled,\n [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: 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: cx(styles.root(this.theme), this.getRootSizeClassName(), {\n [styles.rootChecked(this.theme)]: this.props.checked,\n [styles.rootIE11()]: isIE11 || isEdge,\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 = cx(styles.root(this.theme), this.getRootSizeClassName(), {\n [styles.rootChecked(this.theme)]: checked,\n [styles.rootIE11()]: isIE11 || isEdge,\n });\n radioProps.className = cx(radioProps.className, {\n [styles.checked(this.theme)]: checked,\n [this.getCheckedSizeClassName()]: checked,\n [styles.checkedDisabled(this.theme)]: checked && disabled,\n });\n }\n\n return (\n <label data-tid={RadioDataTids.root} {...labelProps}>\n <input {...inputProps} />\n <span {...radioProps}>\n <span className={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 = cx({\n [styles.caption(this.theme)]: true,\n [styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n [styles.captionIE11()]: isIE11 || isEdge,\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 globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isArrowPressed || 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 handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n this.props.onBlur?.(e);\n this.setState({ focusedByKeyboard: false });\n };\n}\n"]}
1
+ {"version":3,"sources":["Radio.tsx"],"names":["RadioDataTids","root","Radio","rootNode","state","focusedByKeyboard","getProps","defaultProps","context","inputEl","React","createRef","renderMain","props","disabled","warning","error","size","focused","onMouseOver","onMouseEnter","onMouseLeave","onValueChange","rest","radioProps","className","styles","circle","theme","getCircleSizeClassName","checked","getCheckedSizeClassName","focus","checkedDisabled","globalClasses","value","inputProps","type","input","tabIndex","ref","onChange","handleChange","onFocus","handleFocus","onBlur","handleBlur","labelProps","getRootSizeClassName","rootChecked","rootIE11","isIE11","isEdge","handleMouseOver","handleMouseEnter","handleMouseLeave","onClick","_isInRadioGroup","activeItem","name","suppressHydrationWarning","resetFocus","placeholder","children","renderCaption","Boolean","e","onSelect","globalObject","requestAnimationFrame","keyListener","isArrowPressed","isTabPressed","setState","rootLarge","rootMedium","rootSmall","circleLarge","circleMedium","circleSmall","checkedLarge","checkedMedium","checkedSmall","render","setRootNode","current","blur","captionClassNames","caption","captionDisabled","captionIE11","Component","__KONTUR_REACT_UI__","displayName","contextType","RadioGroupContext"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Override } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { fixFirefoxModifiedClickOnLabel } from '../../lib/events/fixFirefoxModifiedClickOnLabel';\nimport { isEdge, isIE11 } from '../../lib/client';\nimport { RadioGroupContext, RadioGroupContextType } from '../RadioGroup/RadioGroupContext';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { styles, globalClasses } from './Radio.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type RadioSize = SizeProp;\n\nexport interface RadioProps<T>\n extends Pick<AriaAttributes, 'aria-label'>,\n CommonProps,\n Override<\n React.InputHTMLAttributes<HTMLInputElement>,\n {\n /**\n * Состояние валидации при ошибке.\n */\n error?: boolean;\n /**\n * Состояние валидации при предупреждении.\n */\n warning?: boolean;\n /**\n * Размер\n */\n size?: SizeProp;\n /**\n * Состояние фокуса.\n */\n focused?: boolean;\n /**\n * Функция, вызываемая при изменении `value`.\n */\n onValueChange?: (value: T) => void;\n /**\n * HTML-событие `onmouseenter`\n */\n onMouseEnter?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `mouseleave`\n */\n onMouseLeave?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-событие `onmouseover`\n */\n onMouseOver?: React.MouseEventHandler<HTMLLabelElement>;\n /**\n * HTML-атрибут `value`.\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' | 'size'>>;\n\n/**\n * Радио-кнопки используются, когда может быть выбран только один вариант из нескольких.\n */\n@rootNode\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 size: 'small',\n };\n\n private getProps = createPropsGetter(Radio.defaultProps);\n\n public static contextType = RadioGroupContext;\n public context: RadioGroupContextType<T> = this.context;\n\n private inputEl = React.createRef<HTMLInputElement>();\n private setRootNode!: TSetRootNode;\n private theme!: Theme;\n\n private getRootSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.rootLarge(this.theme);\n case 'medium':\n return styles.rootMedium(this.theme);\n case 'small':\n default:\n return styles.rootSmall(this.theme);\n }\n }\n\n private getCircleSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.circleLarge(this.theme);\n case 'medium':\n return styles.circleMedium(this.theme);\n case 'small':\n default:\n return styles.circleSmall(this.theme);\n }\n }\n\n private getCheckedSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.checkedLarge(this.theme);\n case 'medium':\n return styles.checkedMedium(this.theme);\n case 'small':\n default:\n return styles.checkedSmall(this.theme);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n {this.renderMain}\n </CommonWrapper>\n );\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public focus() {\n keyListener.isTabPressed = true;\n this.inputEl.current?.focus();\n }\n\n /**\n * @public\n */\n public blur() {\n this.inputEl.current?.blur();\n }\n\n public renderMain = (props: CommonWrapperRestProps<RadioProps<T>>) => {\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: cx({\n [styles.circle(this.theme)]: true,\n [this.getCircleSizeClassName()]: true,\n [styles.checked(this.theme)]: this.props.checked,\n [this.getCheckedSizeClassName()]: this.props.checked,\n [styles.focus(this.theme)]: this.getProps().focused || this.state.focusedByKeyboard,\n [styles.error(this.theme)]: error,\n [styles.warning(this.theme)]: warning,\n [styles.disabled(this.theme)]: disabled,\n [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: 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: cx(styles.root(this.theme), this.getRootSizeClassName(), {\n [styles.rootChecked(this.theme)]: this.props.checked,\n [styles.rootIE11()]: isIE11 || isEdge,\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 = cx(styles.root(this.theme), this.getRootSizeClassName(), {\n [styles.rootChecked(this.theme)]: checked,\n [styles.rootIE11()]: isIE11 || isEdge,\n });\n radioProps.className = cx(radioProps.className, {\n [styles.checked(this.theme)]: checked,\n [this.getCheckedSizeClassName()]: checked,\n [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={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 = cx({\n [styles.caption(this.theme)]: true,\n [styles.captionDisabled(this.theme)]: !!(this.props.disabled || this.context.disabled),\n [styles.captionIE11()]: isIE11 || isEdge,\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 globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isArrowPressed || 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"]}
@@ -122,6 +122,7 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
122
122
  private inputRef;
123
123
  private handleChange;
124
124
  private handleFocus;
125
+ private resetFocus;
125
126
  private handleBlur;
126
127
  private isUncontrolled;
127
128
  }
@@ -12,6 +12,7 @@ var _createPropsGetter = require("../../lib/createPropsGetter");
12
12
  var _currentEnvironment = require("../../lib/currentEnvironment");
13
13
  var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
14
14
 
15
+ var _FocusControlWrapper = require("../../internal/FocusControlWrapper");
15
16
 
16
17
  var _Toggle = require("./Toggle.styles");var _class, _class2, _temp;
17
18
 
@@ -373,6 +374,8 @@ Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
373
374
 
374
375
 
375
376
 
377
+
378
+
376
379
 
377
380
 
378
381
 
@@ -406,15 +409,13 @@ Toggle = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
406
409
  }
407
410
  };_this.
408
411
 
409
- handleBlur = function (event) {
410
- if (_this.props.onBlur) {
411
- _this.props.onBlur(event);
412
- }
413
- _this.setState({
414
- focusByTab: false });
412
+ resetFocus = function () {return _this.setState({ focusByTab: false });};_this.
415
413
 
414
+ handleBlur = function (event) {
415
+ _this.resetFocus();
416
+ _this.props.onBlur == null ? void 0 : _this.props.onBlur(event);
416
417
  };_this.state = { focusByTab: false, checked: props.defaultChecked };return _this;}var _proto = Toggle.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {_keyListener.keyListener.isTabPressed = true;this.focus();}} /**
417
418
  * @public
418
- */;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getContainerSizeClassName = function getContainerSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.containerLarge(this.theme);case 'medium':return _Toggle.styles.containerMedium(this.theme);case 'small':default:return _Toggle.styles.containerSmall(this.theme);}};_proto.getHandleSizeClassName = function getHandleSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.handleLarge(this.theme);case 'medium':return _Toggle.styles.handleMedium(this.theme);case 'small':default:return _Toggle.styles.handleSmall(this.theme);}};_proto.getButtonSizeClassName = function getButtonSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.buttonLarge(this.theme);case 'medium':return _Toggle.styles.buttonMedium(this.theme);case 'small':default:return _Toggle.styles.buttonSmall(this.theme);}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.rootLarge(this.theme);case 'medium':return _Toggle.styles.rootMedium(this.theme);case 'small':default:return _Toggle.styles.rootSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.inputLarge(this.theme);case 'medium':return _Toggle.styles.inputMedium(this.theme);case 'small':default:return _Toggle.styles.inputSmall(this.theme);}};_proto.getActiveHandleSizeClassName = function getActiveHandleSizeClassName() {if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {return '';}switch (this.getProps().size) {case 'large':return _Toggle.styles.activeHandleLarge(this.theme);case 'medium':return _Toggle.styles.activeHandleMedium(this.theme);case 'small':default:return _Toggle.styles.activeHandleSmall(this.theme);}};_proto.getCaptionSizeClassName = function getCaptionSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.captionLarge(this.theme);case 'medium':return _Toggle.styles.captionMedium(this.theme);case 'small':default:return _Toggle.styles.captionSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx4, _cx5, _cx6, _cx7;var _this$props = this.props,children = _this$props.children,warning = _this$props.warning,error = _this$props.error,color = _this$props.color,id = _this$props.id,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps = this.getProps(),loading = _this$getProps.loading,captionPosition = _this$getProps.captionPosition,disableAnimations = _this$getProps.disableAnimations;var disabled = this.getProps().disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(this.getContainerSizeClassName(), (_cx = {}, _cx[_Toggle.styles.container(this.theme)] = true, _cx[_Toggle.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle.globalClasses.container] = true, _cx[_Toggle.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), (_cx2 = {}, _cx2[_Toggle.styles.root(this.theme)] = true, _cx2[_Toggle.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2[_Toggle.globalClasses.disabled] = !!disabled, _cx2[_Toggle.styles.disableAnimation()] = disableAnimations, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[_Toggle.styles.caption(this.theme)] = true, _cx3[_Toggle.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[_Toggle.styles.disabledCaption(this.theme)] = !!disabled, _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[_Toggle.styles.button(this.theme)] = true, _cx4[_Toggle.styles.buttonRight()] = captionPosition === 'left', _cx4[_Toggle.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle.styles.isError(this.theme)] = !!error, _cx4[_Toggle.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: (0, _Emotion.cx)(this.getInputSizeClassName(), (0, _ThemeHelpers.isTheme2022)(this.theme) && _Toggle.styles.input2022(this.theme), (_cx5 = {}, _cx5[_Toggle.styles.input(this.theme)] = true, _cx5)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby }), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, !(0, _ThemeHelpers.isTheme2022)(this.theme) && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.activeBackground(), _Toggle.globalClasses.background, (_cx6 = {}, _cx6[_Toggle.styles.activeBackgroundLoading(this.theme)] = loading, _cx6[_Toggle.styles.disabledBackground(this.theme)] = disabled, _cx6)), style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getHandleSizeClassName(), _Toggle.globalClasses.handle, (_cx7 = {}, _cx7[_Toggle.styles.handle(this.theme)] = true, _cx7[_Toggle.styles.handleDisabled(this.theme)] = disabled, _cx7)) })), caption));};_proto.isUncontrolled = function isUncontrolled() {
419
+ */;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getContainerSizeClassName = function getContainerSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.containerLarge(this.theme);case 'medium':return _Toggle.styles.containerMedium(this.theme);case 'small':default:return _Toggle.styles.containerSmall(this.theme);}};_proto.getHandleSizeClassName = function getHandleSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.handleLarge(this.theme);case 'medium':return _Toggle.styles.handleMedium(this.theme);case 'small':default:return _Toggle.styles.handleSmall(this.theme);}};_proto.getButtonSizeClassName = function getButtonSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.buttonLarge(this.theme);case 'medium':return _Toggle.styles.buttonMedium(this.theme);case 'small':default:return _Toggle.styles.buttonSmall(this.theme);}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.rootLarge(this.theme);case 'medium':return _Toggle.styles.rootMedium(this.theme);case 'small':default:return _Toggle.styles.rootSmall(this.theme);}};_proto.getInputSizeClassName = function getInputSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.inputLarge(this.theme);case 'medium':return _Toggle.styles.inputMedium(this.theme);case 'small':default:return _Toggle.styles.inputSmall(this.theme);}};_proto.getActiveHandleSizeClassName = function getActiveHandleSizeClassName() {if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {return '';}switch (this.getProps().size) {case 'large':return _Toggle.styles.activeHandleLarge(this.theme);case 'medium':return _Toggle.styles.activeHandleMedium(this.theme);case 'small':default:return _Toggle.styles.activeHandleSmall(this.theme);}};_proto.getCaptionSizeClassName = function getCaptionSizeClassName() {switch (this.getProps().size) {case 'large':return _Toggle.styles.captionLarge(this.theme);case 'medium':return _Toggle.styles.captionMedium(this.theme);case 'small':default:return _Toggle.styles.captionSmall(this.theme);}};_proto.renderMain = function renderMain() {var _cx, _cx2, _cx4, _cx5, _cx6, _cx7;var _this$props = this.props,children = _this$props.children,warning = _this$props.warning,error = _this$props.error,color = _this$props.color,id = _this$props.id,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps = this.getProps(),loading = _this$getProps.loading,captionPosition = _this$getProps.captionPosition,disableAnimations = _this$getProps.disableAnimations;var disabled = this.getProps().disabled || loading;var checked = this.isUncontrolled() ? this.state.checked : this.props.checked;var containerClassNames = (0, _Emotion.cx)(this.getContainerSizeClassName(), (_cx = {}, _cx[_Toggle.styles.container(this.theme)] = true, _cx[_Toggle.styles.containerDisabled(this.theme)] = !!disabled, _cx[_Toggle.globalClasses.container] = true, _cx[_Toggle.globalClasses.containerDisabled] = !!disabled, _cx[_Toggle.globalClasses.containerLoading] = loading, _cx));var labelClassNames = (0, _Emotion.cx)(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), (_cx2 = {}, _cx2[_Toggle.styles.root(this.theme)] = true, _cx2[_Toggle.styles.rootLeft()] = captionPosition === 'left', _cx2[_Toggle.styles.disabled()] = !!disabled, _cx2[_Toggle.globalClasses.disabled] = !!disabled, _cx2[_Toggle.styles.disableAnimation()] = disableAnimations, _cx2));var caption = null;if (children) {var _cx3;var captionClass = (0, _Emotion.cx)(this.getCaptionSizeClassName(), (_cx3 = {}, _cx3[_Toggle.styles.caption(this.theme)] = true, _cx3[_Toggle.styles.captionLeft(this.theme)] = captionPosition === 'left', _cx3[_Toggle.styles.disabledCaption(this.theme)] = !!disabled, _cx3));caption = /*#__PURE__*/_react.default.createElement("span", { className: captionClass }, children);}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("label", { "data-tid": ToggleDataTids.root, className: labelClassNames }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getButtonSizeClassName(), (_cx4 = {}, _cx4[_Toggle.styles.button(this.theme)] = true, _cx4[_Toggle.styles.buttonRight()] = captionPosition === 'left', _cx4[_Toggle.styles.isWarning(this.theme)] = !!warning, _cx4[_Toggle.styles.isError(this.theme)] = !!error, _cx4[_Toggle.styles.focused(this.theme)] = !disabled && !!this.state.focusByTab, _cx4)) }, /*#__PURE__*/_react.default.createElement(_FocusControlWrapper.FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus }, /*#__PURE__*/_react.default.createElement("input", { type: "checkbox", checked: checked, onChange: this.handleChange, className: (0, _Emotion.cx)(this.getInputSizeClassName(), (0, _ThemeHelpers.isTheme2022)(this.theme) && _Toggle.styles.input2022(this.theme), (_cx5 = {}, _cx5[_Toggle.styles.input(this.theme)] = true, _cx5)), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: this.inputRef, disabled: disabled, id: id, role: "switch", "aria-label": ariaLabel, "aria-describedby": ariaDescribedby })), /*#__PURE__*/_react.default.createElement("div", { className: containerClassNames, style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined }, !(0, _ThemeHelpers.isTheme2022)(this.theme) && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Toggle.styles.activeBackground(), _Toggle.globalClasses.background, (_cx6 = {}, _cx6[_Toggle.styles.activeBackgroundLoading(this.theme)] = loading, _cx6[_Toggle.styles.disabledBackground(this.theme)] = disabled, _cx6)), style: checked && color && !disabled ? { backgroundColor: color, boxShadow: "inset 0 0 0 1px " + color } : undefined })), /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(this.getHandleSizeClassName(), _Toggle.globalClasses.handle, (_cx7 = {}, _cx7[_Toggle.styles.handle(this.theme)] = true, _cx7[_Toggle.styles.handleDisabled(this.theme)] = disabled, _cx7)) })), caption));};_proto.isUncontrolled = function isUncontrolled() {
419
420
  return this.props.checked === undefined;
420
421
  };return Toggle;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toggle', _class2.displayName = 'Toggle', _class2.propTypes = { checked: _propTypes.default.bool, defaultChecked: _propTypes.default.bool, disabled: _propTypes.default.bool, error: _propTypes.default.bool, loading: _propTypes.default.bool, warning: _propTypes.default.bool, onValueChange: _propTypes.default.func, color: function color(props) {if (props.color && !colorWarningShown) {(0, _warning.default)(false, "[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. ");colorWarningShown = true;}} }, _class2.defaultProps = { disabled: false, loading: false, captionPosition: 'right', disableAnimations: _currentEnvironment.isTestEnv, size: 'small' }, _temp)) || _class;exports.Toggle = Toggle;
@@ -1 +1 @@
1
- {"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","getContainerSizeClassName","size","styles","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","warning","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool","func","isTestEnv"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ToggleSize = SizeProp;\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n children?: React.ReactNode;\n /**\n * Положение `children` относительно переключателя.\n * @default 'right'\n */\n captionPosition?: 'left' | 'right';\n /**\n * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n */\n checked?: boolean;\n /**\n * Делает `тогл` включенным по умолчанию.\n */\n defaultChecked?: boolean;\n /**\n * Отключает `тогл`.\n */\n disabled?: boolean;\n /**\n * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n */\n onValueChange?: (value: boolean) => void;\n /**\n * Событие вызывающееся при клике на `тогл`.\n */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Состояние валидации при предупреждении.\n * @default false\n */\n warning?: boolean;\n /**\n * Состояние валидации при ошибке.\n * @default false\n */\n error?: boolean;\n /**\n * Добавляет стили для состояния `loading` и отключает `тогл`.\n */\n loading?: boolean;\n /**\n * Если true, выставляет фокус на `тогле` после загрузки страницы.\n */\n autoFocus?: boolean;\n /** Размер */\n size?: SizeProp;\n /**\n * Событие вызывающееся, когда `тогл` получает фокус.\n */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /**\n * Событие вызывающееся, когда `тогл` теряет фокус.\n */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /**\n * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n */\n color?: React.CSSProperties['color'];\n /**\n * HTML-атрибут `id` для передачи во внутренний `<input />`.\n */\n id?: string;\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<\n Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n size: 'small',\n };\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private theme!: Theme;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /**\n * @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.containerLarge(this.theme);\n case 'medium':\n return styles.containerMedium(this.theme);\n case 'small':\n default:\n return styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.handleLarge(this.theme);\n case 'medium':\n return styles.handleMedium(this.theme);\n case 'small':\n default:\n return styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.buttonLarge(this.theme);\n case 'medium':\n return styles.buttonMedium(this.theme);\n case 'small':\n default:\n return styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.rootLarge(this.theme);\n case 'medium':\n return styles.rootMedium(this.theme);\n case 'small':\n default:\n return styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.inputLarge(this.theme);\n case 'medium':\n return styles.inputMedium(this.theme);\n case 'small':\n default:\n return styles.inputSmall(this.theme);\n }\n }\n\n private getActiveHandleSizeClassName() {\n if (isTheme2022(this.theme)) {\n return '';\n }\n switch (this.getProps().size) {\n case 'large':\n return styles.activeHandleLarge(this.theme);\n case 'medium':\n return styles.activeHandleMedium(this.theme);\n case 'small':\n default:\n return styles.activeHandleSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n color,\n id,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled || loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(this.getContainerSizeClassName(), {\n [styles.container(this.theme)]: true,\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), {\n [styles.root(this.theme)]: true,\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(this.getCaptionSizeClassName(), {\n [styles.caption(this.theme)]: true,\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={cx(this.getButtonSizeClassName(), {\n [styles.button(this.theme)]: true,\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={cx(this.getInputSizeClassName(), isTheme2022(this.theme) && styles.input2022(this.theme), {\n [styles.input(this.theme)]: true,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n {!isTheme2022(this.theme) && (\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n )}\n </div>\n <div\n className={cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [styles.handle(this.theme)]: true,\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onBlur) {\n this.props.onBlur(event);\n }\n this.setState({\n focusByTab: false,\n });\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
1
+ {"version":3,"sources":["Toggle.tsx"],"names":["colorWarningShown","ToggleDataTids","root","Toggle","rootNode","props","getProps","defaultProps","input","focus","keyListener","isTabPressed","inputRef","element","handleChange","event","onValueChange","target","checked","isUncontrolled","setState","onChange","handleFocus","onFocus","focusByTab","resetFocus","handleBlur","onBlur","state","defaultChecked","componentDidMount","autoFocus","render","theme","renderMain","getContainerSizeClassName","size","styles","containerLarge","containerMedium","containerSmall","getHandleSizeClassName","handleLarge","handleMedium","handleSmall","getButtonSizeClassName","buttonLarge","buttonMedium","buttonSmall","getRootSizeClassName","rootLarge","rootMedium","rootSmall","getInputSizeClassName","inputLarge","inputMedium","inputSmall","getActiveHandleSizeClassName","activeHandleLarge","activeHandleMedium","activeHandleSmall","getCaptionSizeClassName","captionLarge","captionMedium","captionSmall","children","warning","error","color","id","ariaDescribedby","ariaLabel","loading","captionPosition","disableAnimations","disabled","containerClassNames","container","containerDisabled","globalClasses","containerLoading","labelClassNames","rootLeft","disableAnimation","caption","captionClass","captionLeft","disabledCaption","setRootNode","button","buttonRight","isWarning","isError","focused","input2022","backgroundColor","boxShadow","undefined","activeBackground","background","activeBackgroundLoading","disabledBackground","handle","handleDisabled","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","bool","func","isTestEnv"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport warning from 'warning';\n\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\nimport { FocusControlWrapper } from '../../internal/FocusControlWrapper';\n\nimport { styles, globalClasses } from './Toggle.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type ToggleSize = SizeProp;\n\nlet colorWarningShown = false;\n\nexport interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {\n children?: React.ReactNode;\n /**\n * Положение `children` относительно переключателя.\n * @default 'right'\n */\n captionPosition?: 'left' | 'right';\n /**\n * Состояние `тогла`, если `true` - `тогл` будет включён, иначе выключен.\n * @default false\n */\n checked?: boolean;\n /**\n * Делает `тогл` включенным по умолчанию.\n */\n defaultChecked?: boolean;\n /**\n * Отключает `тогл`.\n */\n disabled?: boolean;\n /**\n * Событие вызывающееся, когда значение `тогла` меняется, передаёт текущее значение тогла в переданную функцию.\n */\n onValueChange?: (value: boolean) => void;\n /**\n * Событие вызывающееся при клике на `тогл`.\n */\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n /**\n * Состояние валидации при предупреждении.\n * @default false\n */\n warning?: boolean;\n /**\n * Состояние валидации при ошибке.\n * @default false\n */\n error?: boolean;\n /**\n * Добавляет стили для состояния `loading` и отключает `тогл`.\n */\n loading?: boolean;\n /**\n * Если true, выставляет фокус на `тогле` после загрузки страницы.\n */\n autoFocus?: boolean;\n /** Размер */\n size?: SizeProp;\n /**\n * Событие вызывающееся, когда `тогл` получает фокус.\n */\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n /**\n * Событие вызывающееся, когда `тогл` теряет фокус.\n */\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n /**\n * @deprecated используйте переменную темы `toggleBgChecked` вместо этого пропа.\n */\n color?: React.CSSProperties['color'];\n /**\n * HTML-атрибут `id` для передачи во внутренний `<input />`.\n */\n id?: string;\n /**\n * Не показывать анимацию\n */\n disableAnimations?: boolean;\n}\n\nexport interface ToggleState {\n checked?: boolean;\n focusByTab?: boolean;\n}\n\nexport const ToggleDataTids = {\n root: 'Toggle__root',\n} as const;\n\ntype DefaultProps = Required<\n Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>\n>;\n\n/**\n * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.\n */\n@rootNode\nexport class Toggle extends React.Component<ToggleProps, ToggleState> {\n public static __KONTUR_REACT_UI__ = 'Toggle';\n public static displayName = 'Toggle';\n\n public static propTypes = {\n checked: PropTypes.bool,\n defaultChecked: PropTypes.bool,\n disabled: PropTypes.bool,\n error: PropTypes.bool,\n loading: PropTypes.bool,\n warning: PropTypes.bool,\n onValueChange: PropTypes.func,\n color: (props: ToggleProps) => {\n if (props.color && !colorWarningShown) {\n warning(false, `[Toggle]: prop 'color' is deprecated. Please, use theme variable 'toggleBgChecked' instead. `);\n colorWarningShown = true;\n }\n },\n };\n\n public static defaultProps: DefaultProps = {\n disabled: false,\n loading: false,\n captionPosition: 'right',\n disableAnimations: isTestEnv,\n size: 'small',\n };\n\n private getProps = createPropsGetter(Toggle.defaultProps);\n\n private theme!: Theme;\n private input: HTMLInputElement | null = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: ToggleProps) {\n super(props);\n\n this.state = {\n focusByTab: false,\n checked: props.defaultChecked,\n };\n }\n\n public componentDidMount() {\n if (this.props.autoFocus) {\n keyListener.isTabPressed = true;\n this.focus();\n }\n }\n\n /**\n * @public\n */\n public focus = () => {\n if (this.input) {\n keyListener.isTabPressed = true;\n this.input.focus();\n }\n };\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private getContainerSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.containerLarge(this.theme);\n case 'medium':\n return styles.containerMedium(this.theme);\n case 'small':\n default:\n return styles.containerSmall(this.theme);\n }\n }\n\n private getHandleSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.handleLarge(this.theme);\n case 'medium':\n return styles.handleMedium(this.theme);\n case 'small':\n default:\n return styles.handleSmall(this.theme);\n }\n }\n\n private getButtonSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.buttonLarge(this.theme);\n case 'medium':\n return styles.buttonMedium(this.theme);\n case 'small':\n default:\n return styles.buttonSmall(this.theme);\n }\n }\n\n private getRootSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.rootLarge(this.theme);\n case 'medium':\n return styles.rootMedium(this.theme);\n case 'small':\n default:\n return styles.rootSmall(this.theme);\n }\n }\n\n private getInputSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.inputLarge(this.theme);\n case 'medium':\n return styles.inputMedium(this.theme);\n case 'small':\n default:\n return styles.inputSmall(this.theme);\n }\n }\n\n private getActiveHandleSizeClassName() {\n if (isTheme2022(this.theme)) {\n return '';\n }\n switch (this.getProps().size) {\n case 'large':\n return styles.activeHandleLarge(this.theme);\n case 'medium':\n return styles.activeHandleMedium(this.theme);\n case 'small':\n default:\n return styles.activeHandleSmall(this.theme);\n }\n }\n\n private getCaptionSizeClassName() {\n switch (this.getProps().size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n }\n\n private renderMain() {\n const {\n children,\n warning,\n error,\n color,\n id,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { loading, captionPosition, disableAnimations } = this.getProps();\n const disabled = this.getProps().disabled || loading;\n const checked = this.isUncontrolled() ? this.state.checked : this.props.checked;\n\n const containerClassNames = cx(this.getContainerSizeClassName(), {\n [styles.container(this.theme)]: true,\n [styles.containerDisabled(this.theme)]: !!disabled,\n [globalClasses.container]: true,\n [globalClasses.containerDisabled]: !!disabled,\n [globalClasses.containerLoading]: loading,\n });\n\n const labelClassNames = cx(this.getRootSizeClassName(), this.getActiveHandleSizeClassName(), {\n [styles.root(this.theme)]: true,\n [styles.rootLeft()]: captionPosition === 'left',\n [styles.disabled()]: !!disabled,\n [globalClasses.disabled]: !!disabled,\n [styles.disableAnimation()]: disableAnimations,\n });\n\n let caption = null;\n if (children) {\n const captionClass = cx(this.getCaptionSizeClassName(), {\n [styles.caption(this.theme)]: true,\n [styles.captionLeft(this.theme)]: captionPosition === 'left',\n [styles.disabledCaption(this.theme)]: !!disabled,\n });\n caption = <span className={captionClass}>{children}</span>;\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <label data-tid={ToggleDataTids.root} className={labelClassNames}>\n <div\n className={cx(this.getButtonSizeClassName(), {\n [styles.button(this.theme)]: true,\n [styles.buttonRight()]: captionPosition === 'left',\n [styles.isWarning(this.theme)]: !!warning,\n [styles.isError(this.theme)]: !!error,\n [styles.focused(this.theme)]: !disabled && !!this.state.focusByTab,\n })}\n >\n <FocusControlWrapper onBlurWhenDisabled={this.resetFocus}>\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={this.handleChange}\n className={cx(this.getInputSizeClassName(), isTheme2022(this.theme) && styles.input2022(this.theme), {\n [styles.input(this.theme)]: true,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={this.inputRef}\n disabled={disabled}\n id={id}\n role=\"switch\"\n aria-label={ariaLabel}\n aria-describedby={ariaDescribedby}\n />\n </FocusControlWrapper>\n <div\n className={containerClassNames}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n >\n {!isTheme2022(this.theme) && (\n <div\n className={cx(styles.activeBackground(), globalClasses.background, {\n [styles.activeBackgroundLoading(this.theme)]: loading,\n [styles.disabledBackground(this.theme)]: disabled,\n })}\n style={\n checked && color && !disabled\n ? {\n backgroundColor: color,\n boxShadow: `inset 0 0 0 1px ${color}`,\n }\n : undefined\n }\n />\n )}\n </div>\n <div\n className={cx(this.getHandleSizeClassName(), globalClasses.handle, {\n [styles.handle(this.theme)]: true,\n [styles.handleDisabled(this.theme)]: disabled,\n })}\n />\n </div>\n {caption}\n </label>\n </CommonWrapper>\n );\n }\n\n private inputRef = (element: HTMLInputElement) => {\n this.input = element;\n };\n\n private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(event.target.checked);\n }\n\n if (this.isUncontrolled()) {\n this.setState({\n checked: event.target.checked,\n });\n }\n\n if (this.props.onChange) {\n this.props.onChange(event);\n }\n };\n\n private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (this.props.onFocus) {\n this.props.onFocus(event);\n }\n\n if (keyListener.isTabPressed) {\n this.setState({ focusByTab: true });\n }\n };\n\n private resetFocus = () => this.setState({ focusByTab: false });\n\n private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n this.resetFocus();\n this.props.onBlur?.(event);\n };\n\n private isUncontrolled() {\n return this.props.checked === undefined;\n }\n}\n"]}
@@ -34,6 +34,14 @@ CommonWrapper = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
34
34
 
35
35
 
36
36
 
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
37
45
 
38
46
 
39
47
 
@@ -59,5 +67,4 @@ CommonWrapper = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
59
67
 
60
68
  var originalRef = (_this$child = _this.child) == null ? void 0 : _this$child.ref;
61
69
  originalRef && (0, _callChildRef.callChildRef)(originalRef, instance);
62
- };return _this;}var _proto = CommonWrapper.prototype;_proto.render = function render() {// eslint-disable-next-line @typescript-eslint/no-unused-vars
63
- var _extractCommonProps = (0, _extractCommonProps2.extractCommonProps)(this.props),_extractCommonProps$ = _extractCommonProps[0],className = _extractCommonProps$.className,style = _extractCommonProps$.style,children = _extractCommonProps$.children,rootNodeRef = _extractCommonProps$.rootNodeRef,dataProps = (0, _objectWithoutPropertiesLoose2.default)(_extractCommonProps$, _excluded),rest = (0, _extends2.default)({}, _extractCommonProps[1]);this.child = (0, _utils.isFunction)(children) ? children(rest) : children;return /*#__PURE__*/_react.default.isValidElement(this.child) ? /*#__PURE__*/_react.default.cloneElement(this.child, (0, _extends2.default)({ ref: (0, _utils.isRefableElement)(this.child) ? this.ref : null, className: (0, _Emotion.cx)(this.child.props.className, className), style: (0, _extends2.default)({}, this.child.props.style, style) }, (0, _getCommonVisualStateDataAttributes.getCommonVisualStateDataAttributes)(rest), dataProps)) : this.child;};return CommonWrapper;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'CommonWrapper', _class2.displayName = 'CommonWrapper', _temp)) || _class;exports.CommonWrapper = CommonWrapper;
70
+ };return _this;}var _proto = CommonWrapper.prototype;_proto.render = function render() {var _this2 = this;var _extractCommonProps = (0, _extractCommonProps2.extractCommonProps)(this.props),_extractCommonProps$ = _extractCommonProps[0],className = _extractCommonProps$.className,style = _extractCommonProps$.style,children = _extractCommonProps$.children,rootNodeRef = _extractCommonProps$.rootNodeRef,dataProps = (0, _objectWithoutPropertiesLoose2.default)(_extractCommonProps$, _excluded),rest = (0, _extends2.default)({}, _extractCommonProps[1]);this.child = (0, _utils.isFunction)(children) ? children(rest) : children;var getChildProps = function getChildProps(child) {var childProps = (0, _extends2.default)({}, (0, _getCommonVisualStateDataAttributes.getCommonVisualStateDataAttributes)(rest), dataProps);(0, _utils.isRefableElement)(child) && (childProps.ref = _this2.ref);var classNames = (0, _Emotion.cx)(child.props.className, className);classNames && (childProps.className = classNames);var styles = (0, _extends2.default)({}, child.props.style, style);Object.keys(styles).length && (childProps.style = styles);return childProps;};return /*#__PURE__*/_react.default.isValidElement(this.child) ? /*#__PURE__*/_react.default.cloneElement(this.child, getChildProps(this.child)) : this.child;};return CommonWrapper;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'CommonWrapper', _class2.displayName = 'CommonWrapper', _temp)) || _class;exports.CommonWrapper = CommonWrapper;
@@ -1 +1 @@
1
- {"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","rootNode","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","className","style","children","dataProps","rest","isValidElement","React","cloneElement","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"+cAAA;;AAEA;AACA;;AAEA;AACA;;;AAGA;AACA,0F;;;;;AAKaA,a,OADZC,kB;;;;;;;;AASSC,IAAAA,oB,GAAwD,I;;;;;;;;;;;;;;;;;;;;AAoBxDC,IAAAA,G,GAAM,UAACC,QAAD,EAA6C;AACzD,YAAKC,WAAL,CAAiBD,QAAjB;AACA,YAAKE,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyB,2BAAYH,QAAZ,CAAzB;;AAEA;AACA;AACA,qCAAKF,oBAAL,2CAA2BM,MAA3B;AACA,YAAKN,oBAAL,GAA4B,IAA5B;;AAEA,UAAIE,QAAQ,IAAI,sCAAuBA,QAAvB,CAAhB,EAAkD;AAChD,cAAKF,oBAAL,GAA4BE,QAAQ,CAACK,yBAArC,oBAA4BL,QAAQ,CAACK,yBAAT,CAAqC,UAACC,IAAD,EAAU;AACzE,gBAAKL,WAAL,CAAiBK,IAAjB;AACA,gBAAKJ,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyBG,IAAzB;AACD,SAH2B,CAA5B;AAID;;AAED,UAAMC,WAAW,kBAAI,MAAKC,KAAT,qBAAG,YAA0CT,GAA9D;AACAQ,MAAAA,WAAW,IAAI,gCAAaA,WAAb,EAA0BP,QAA1B,CAAf;AACD,K,2DApCDS,M,GAAA,kBAAS,CACP;AACA,8BAAiF,6CAAmB,KAAKP,KAAxB,CAAjF,+CAASQ,SAAT,wBAASA,SAAT,CAAoBC,KAApB,wBAAoBA,KAApB,CAA2BC,QAA3B,wBAA2BA,QAA3B,CAAqCT,WAArC,wBAAqCA,WAArC,CAAqDU,SAArD,gFAAuEC,IAAvE,sDACA,KAAKN,KAAL,GAAa,uBAAWI,QAAX,IAAuBA,QAAQ,CAACE,IAAD,CAA/B,GAAwCF,QAArD,CACA,OAAO,4BAAMG,cAAN,CAA6D,KAAKP,KAAlE,iBACHQ,eAAMC,YAAN,CAAmB,KAAKT,KAAxB,2BACET,GAAG,EAAE,6BAAiB,KAAKS,KAAtB,IAA+B,KAAKT,GAApC,GAA0C,IADjD,EAEEW,SAAS,EAAE,iBAAG,KAAKF,KAAL,CAAWN,KAAX,CAAiBQ,SAApB,EAA+BA,SAA/B,CAFb,EAGEC,KAAK,6BACA,KAAKH,KAAL,CAAWN,KAAX,CAAiBS,KADjB,EAEAA,KAFA,CAHP,IAOK,4EAAmCG,IAAnC,CAPL,EAQKD,SARL,EADG,GAWH,KAAKL,KAXT,CAYD,C,wBA1BsEQ,eAAME,S,WAG/DC,mB,GAAsB,e,UACtBC,W,GAAc,e","sourcesContent":["import React from 'react';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, isInstanceWithRootNode, rootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';\nimport { extractCommonProps } from './extractCommonProps';\nimport { getCommonVisualStateDataAttributes } from './getCommonVisualStateDataAttributes';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n public static displayName = 'CommonWrapper';\n\n private child: React.ReactNode;\n private setRootNode!: TSetRootNode;\n private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n render() {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n this.child = isFunction(children) ? children(rest) : children;\n return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n ? React.cloneElement(this.child, {\n ref: isRefableElement(this.child) ? this.ref : null,\n className: cx(this.child.props.className, className),\n style: {\n ...this.child.props.style,\n ...style,\n },\n ...getCommonVisualStateDataAttributes(rest),\n ...dataProps,\n })\n : this.child;\n }\n\n private ref = (instance: Nullable<React.ReactInstance>) => {\n this.setRootNode(instance);\n this.props.rootNodeRef?.(getRootNode(instance));\n\n // refs are called when instances change,\n // so we have to renew or remove old subscription\n this.rootNodeSubscription?.remove();\n this.rootNodeSubscription = null;\n\n if (instance && isInstanceWithRootNode(instance)) {\n this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n this.setRootNode(node);\n this.props.rootNodeRef?.(node);\n });\n }\n\n const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n originalRef && callChildRef(originalRef, instance);\n };\n}\n"]}
1
+ {"version":3,"sources":["CommonWrapper.tsx"],"names":["CommonWrapper","rootNode","rootNodeSubscription","ref","instance","setRootNode","props","rootNodeRef","remove","addRootNodeChangeListener","node","originalRef","child","render","className","style","children","dataProps","rest","getChildProps","childProps","classNames","styles","Object","keys","length","isValidElement","React","cloneElement","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"+cAAA;;AAEA;AACA;;AAEA;AACA;;;AAGA;AACA,0F;;;;;AAKaA,a,OADZC,kB;;;;;;;;AASSC,IAAAA,oB,GAAwD,I;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxDC,IAAAA,G,GAAM,UAACC,QAAD,EAA6C;AACzD,YAAKC,WAAL,CAAiBD,QAAjB;AACA,YAAKE,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyB,2BAAYH,QAAZ,CAAzB;;AAEA;AACA;AACA,qCAAKF,oBAAL,2CAA2BM,MAA3B;AACA,YAAKN,oBAAL,GAA4B,IAA5B;;AAEA,UAAIE,QAAQ,IAAI,sCAAuBA,QAAvB,CAAhB,EAAkD;AAChD,cAAKF,oBAAL,GAA4BE,QAAQ,CAACK,yBAArC,oBAA4BL,QAAQ,CAACK,yBAAT,CAAqC,UAACC,IAAD,EAAU;AACzE,gBAAKL,WAAL,CAAiBK,IAAjB;AACA,gBAAKJ,KAAL,CAAWC,WAAX,0BAAKD,KAAL,CAAWC,WAAX,CAAyBG,IAAzB;AACD,SAH2B,CAA5B;AAID;;AAED,UAAMC,WAAW,kBAAI,MAAKC,KAAT,qBAAG,YAA0CT,GAA9D;AACAQ,MAAAA,WAAW,IAAI,gCAAaA,WAAb,EAA0BP,QAA1B,CAAf;AACD,K,2DA5CDS,M,GAAA,kBAAS,mBACP,0BAAiF,6CAAmB,KAAKP,KAAxB,CAAjF,+CAASQ,SAAT,wBAASA,SAAT,CAAoBC,KAApB,wBAAoBA,KAApB,CAA2BC,QAA3B,wBAA2BA,QAA3B,CAAqCT,WAArC,wBAAqCA,WAArC,CAAqDU,SAArD,gFAAuEC,IAAvE,sDACA,KAAKN,KAAL,GAAa,uBAAWI,QAAX,IAAuBA,QAAQ,CAACE,IAAD,CAA/B,GAAwCF,QAArD,CAEA,IAAMG,aAAa,GAAG,SAAhBA,aAAgB,CAACP,KAAD,EAAuE,CAC3F,IAAMQ,UAAmC,8BACpC,4EAAmCF,IAAnC,CADoC,EAEpCD,SAFoC,CAAzC,CAKA,6BAAiBL,KAAjB,MAA4BQ,UAAU,CAACjB,GAAX,GAAiB,MAAI,CAACA,GAAlD,EAEA,IAAMkB,UAAkB,GAAG,iBAAGT,KAAK,CAACN,KAAN,CAAYQ,SAAf,EAA0BA,SAA1B,CAA3B,CACAO,UAAU,KAAKD,UAAU,CAACN,SAAX,GAAuBO,UAA5B,CAAV,CAEA,IAAMC,MAA2B,8BAAQV,KAAK,CAACN,KAAN,CAAYS,KAApB,EAA8BA,KAA9B,CAAjC,CACAQ,MAAM,CAACC,IAAP,CAAYF,MAAZ,EAAoBG,MAApB,KAA+BL,UAAU,CAACL,KAAX,GAAmBO,MAAlD,EAEA,OAAOF,UAAP,CACD,CAfD,CAiBA,OAAO,4BAAMM,cAAN,CAA6D,KAAKd,KAAlE,iBACHe,eAAMC,YAAN,CAAmB,KAAKhB,KAAxB,EAA+BO,aAAa,CAAC,KAAKP,KAAN,CAA5C,CADG,GAEH,KAAKA,KAFT,CAGD,C,wBAlCsEe,eAAME,S,WAG/DC,mB,GAAsB,e,UACtBC,W,GAAc,e","sourcesContent":["import React from 'react';\n\nimport { isFunction, isRefableElement } from '../../lib/utils';\nimport { cx } from '../../lib/theming/Emotion';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRootNode, isInstanceWithRootNode, rootNode, TRootNodeSubscription, TSetRootNode } from '../../lib/rootNode';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nimport type { CommonProps, CommonPropsRootNodeRef, CommonWrapperProps } from './types';\nimport { extractCommonProps } from './extractCommonProps';\nimport { getCommonVisualStateDataAttributes } from './getCommonVisualStateDataAttributes';\n\nexport type CommonPropsWithRootNodeRef = CommonProps & CommonPropsRootNodeRef;\n\n@rootNode\nexport class CommonWrapper<P extends CommonPropsWithRootNodeRef> extends React.Component<\n CommonWrapperProps<P> & CommonPropsRootNodeRef\n> {\n public static __KONTUR_REACT_UI__ = 'CommonWrapper';\n public static displayName = 'CommonWrapper';\n\n private child: React.ReactNode;\n private setRootNode!: TSetRootNode;\n private rootNodeSubscription: Nullable<TRootNodeSubscription> = null;\n\n render() {\n const [{ className, style, children, rootNodeRef, ...dataProps }, { ...rest }] = extractCommonProps(this.props);\n this.child = isFunction(children) ? children(rest) : children;\n\n const getChildProps = (child: React.ReactElement<CommonProps & React.RefAttributes<any>>) => {\n const childProps: Record<string, unknown> = {\n ...getCommonVisualStateDataAttributes(rest),\n ...dataProps,\n };\n\n isRefableElement(child) && (childProps.ref = this.ref);\n\n const classNames: string = cx(child.props.className, className);\n classNames && (childProps.className = classNames);\n\n const styles: React.CSSProperties = { ...child.props.style, ...style };\n Object.keys(styles).length && (childProps.style = styles);\n\n return childProps;\n };\n\n return React.isValidElement<CommonProps & React.RefAttributes<any>>(this.child)\n ? React.cloneElement(this.child, getChildProps(this.child))\n : this.child;\n }\n\n private ref = (instance: Nullable<React.ReactInstance>) => {\n this.setRootNode(instance);\n this.props.rootNodeRef?.(getRootNode(instance));\n\n // refs are called when instances change,\n // so we have to renew or remove old subscription\n this.rootNodeSubscription?.remove();\n this.rootNodeSubscription = null;\n\n if (instance && isInstanceWithRootNode(instance)) {\n this.rootNodeSubscription = instance.addRootNodeChangeListener?.((node) => {\n this.setRootNode(node);\n this.props.rootNodeRef?.(node);\n });\n }\n\n const originalRef = (this.child as React.RefAttributes<any>)?.ref;\n originalRef && callChildRef(originalRef, instance);\n };\n}\n"]}
@@ -0,0 +1,17 @@
1
+ import { PropsWithChildren } from 'react';
2
+ interface Props {
3
+ /**
4
+ * Использовать только когда на children нет пропса disabled
5
+ */
6
+ disabled?: boolean;
7
+ /**
8
+ * Событие вызывается когда элемент потеряет фокус, и при этом он задисэйблен
9
+ */
10
+ onBlurWhenDisabled(): void | undefined;
11
+ }
12
+ export declare function FocusControlWrapper({ disabled, children, onBlurWhenDisabled, ...rest }: PropsWithChildren<Props>): JSX.Element | null;
13
+ export declare namespace FocusControlWrapper {
14
+ var __KONTUR_REACT_UI__: string;
15
+ var displayName: string;
16
+ }
17
+ export {};
@@ -0,0 +1,46 @@
1
+ "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.FocusControlWrapper = FocusControlWrapper;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
2
+
3
+ var _CommonWrapper = require("../CommonWrapper");
4
+
5
+ var _useFocusControl2 = require("./useFocusControl");var _excluded = ["disabled", "children", "onBlurWhenDisabled"];
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+ function FocusControlWrapper(_ref) {var disabled = _ref.disabled,children = _ref.children,onBlurWhenDisabled = _ref.onBlurWhenDisabled,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
20
+ var isValidChildren = children && /*#__PURE__*/(0, _react.isValidElement)(children);
21
+
22
+ var _useFocusControl = (0, _useFocusControl2.useFocusControl)({
23
+ disabled: disabled != null ? disabled : isValidChildren ? children.props.disabled : undefined,
24
+ onFocus: isValidChildren ? children.props.onFocus : undefined,
25
+ onBlur: isValidChildren ? children.props.onBlur : undefined,
26
+ onBlurWhenDisabled: onBlurWhenDisabled }),handleFocus = _useFocusControl.handleFocus,handleBlur = _useFocusControl.handleBlur;
27
+
28
+
29
+ if (!isValidChildren) {
30
+ return null;
31
+ }
32
+
33
+ return /*#__PURE__*/(
34
+ _react.default.createElement(_CommonWrapper.CommonWrapper, rest,
35
+ _react.default.Children.only( /*#__PURE__*/
36
+ (0, _react.cloneElement)(children, {
37
+ onFocus: handleFocus,
38
+ onBlur: handleBlur }))));
39
+
40
+
41
+
42
+
43
+ }
44
+
45
+ FocusControlWrapper.__KONTUR_REACT_UI__ = 'FocusControlWrapper';
46
+ FocusControlWrapper.displayName = 'FocusControlWrapper';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["FocusControlWrapper.tsx"],"names":["FocusControlWrapper","disabled","children","onBlurWhenDisabled","rest","isValidChildren","props","undefined","onFocus","onBlur","handleFocus","handleBlur","React","Children","only","__KONTUR_REACT_UI__","displayName"],"mappings":"iZAAA;;AAEA;;AAEA,qD;;;;;;;;;;;;;;AAcO,SAASA,mBAAT,OAA4G,KAA7EC,QAA6E,QAA7EA,QAA6E,CAAnEC,QAAmE,QAAnEA,QAAmE,CAAzDC,kBAAyD,QAAzDA,kBAAyD,CAAlCC,IAAkC;AACjH,MAAMC,eAAe,GAAGH,QAAQ,iBAAI,2BAAeA,QAAf,CAApC;;AAEA,yBAAoC,uCAAgB;AAClDD,IAAAA,QAAQ,EAAEA,QAAF,WAAEA,QAAF,GAAeI,eAAe,GAAGH,QAAQ,CAACI,KAAT,CAAeL,QAAlB,GAA6BM,SADjB;AAElDC,IAAAA,OAAO,EAAEH,eAAe,GAAGH,QAAQ,CAACI,KAAT,CAAeE,OAAlB,GAA4BD,SAFF;AAGlDE,IAAAA,MAAM,EAAEJ,eAAe,GAAGH,QAAQ,CAACI,KAAT,CAAeG,MAAlB,GAA2BF,SAHA;AAIlDJ,IAAAA,kBAAkB,EAAlBA,kBAJkD,EAAhB,CAApC,CAAQO,WAAR,oBAAQA,WAAR,CAAqBC,UAArB,oBAAqBA,UAArB;;;AAOA,MAAI,CAACN,eAAL,EAAsB;AACpB,WAAO,IAAP;AACD;;AAED;AACE,iCAAC,4BAAD,EAAmBD,IAAnB;AACGQ,mBAAMC,QAAN,CAAeC,IAAf;AACC,6BAAaZ,QAAb,EAAuB;AACrBM,MAAAA,OAAO,EAAEE,WADY;AAErBD,MAAAA,MAAM,EAAEE,UAFa,EAAvB,CADD,CADH,CADF;;;;;AAUD;;AAEDX,mBAAmB,CAACe,mBAApB,GAA0C,qBAA1C;AACAf,mBAAmB,CAACgB,WAApB,GAAkC,qBAAlC","sourcesContent":["import React, { PropsWithChildren, isValidElement, cloneElement } from 'react';\n\nimport { CommonWrapper } from '../CommonWrapper';\n\nimport { useFocusControl } from './useFocusControl';\n\ninterface Props {\n /**\n * Использовать только когда на children нет пропса disabled\n */\n disabled?: boolean;\n\n /**\n * Событие вызывается когда элемент потеряет фокус, и при этом он задисэйблен\n */\n onBlurWhenDisabled(): void | undefined;\n}\n\nexport function FocusControlWrapper({ disabled, children, onBlurWhenDisabled, ...rest }: PropsWithChildren<Props>) {\n const isValidChildren = children && isValidElement(children);\n\n const { handleFocus, handleBlur } = useFocusControl({\n disabled: disabled ?? (isValidChildren ? children.props.disabled : undefined),\n onFocus: isValidChildren ? children.props.onFocus : undefined,\n onBlur: isValidChildren ? children.props.onBlur : undefined,\n onBlurWhenDisabled,\n });\n\n if (!isValidChildren) {\n return null;\n }\n\n return (\n <CommonWrapper {...rest}>\n {React.Children.only(\n cloneElement(children, {\n onFocus: handleFocus,\n onBlur: handleBlur,\n }),\n )}\n </CommonWrapper>\n );\n}\n\nFocusControlWrapper.__KONTUR_REACT_UI__ = 'FocusControlWrapper';\nFocusControlWrapper.displayName = 'FocusControlWrapper';\n"]}
@@ -0,0 +1,5 @@
1
+ import type { Meta } from '@storybook/react';
2
+ import type { Story } from '../../typings/stories';
3
+ declare const _default: Meta<import("@storybook/react").Args>;
4
+ export default _default;
5
+ export declare const Input: Story;
@@ -0,0 +1 @@
1
+ export * from './FocusControlWrapper';
@@ -0,0 +1 @@
1
+ "use strict";exports.__esModule = true;var _FocusControlWrapper = require("./FocusControlWrapper");Object.keys(_FocusControlWrapper).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _FocusControlWrapper[key]) return;exports[key] = _FocusControlWrapper[key];});
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './FocusControlWrapper';\n"]}
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ interface Props {
3
+ disabled?: boolean;
4
+ onFocus?: React.FocusEventHandler;
5
+ onBlur?: React.FocusEventHandler;
6
+ onBlurWhenDisabled?(): void;
7
+ }
8
+ export declare function useFocusControl({ disabled, onFocus, onBlur, onBlurWhenDisabled }: Props): {
9
+ handleFocus: (e: React.FocusEvent) => void;
10
+ handleBlur: (e: React.FocusEvent) => void;
11
+ };
12
+ export {};
@@ -0,0 +1,34 @@
1
+ "use strict";exports.__esModule = true;exports.useFocusControl = useFocusControl;var _react = require("react");
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+ function useFocusControl(_ref) {var disabled = _ref.disabled,onFocus = _ref.onFocus,onBlur = _ref.onBlur,onBlurWhenDisabled = _ref.onBlurWhenDisabled;
11
+ var _useState = (0, _react.useState)(false),isFocused = _useState[0],setFocused = _useState[1];
12
+
13
+ (0, _react.useEffect)(function () {
14
+ if (disabled && isFocused && onBlurWhenDisabled) {
15
+ // force calling custom blur event, try "fix" bug in react https://github.com/facebook/react/issues/9142
16
+ onBlurWhenDisabled();
17
+ }
18
+ }, [disabled, isFocused]);
19
+
20
+ var handleFocus = function handleFocus(e) {
21
+ setFocused(true);
22
+ onFocus == null ? void 0 : onFocus(e);
23
+ };
24
+
25
+ var handleBlur = function handleBlur(e) {
26
+ setFocused(false);
27
+ onBlur == null ? void 0 : onBlur(e);
28
+ };
29
+
30
+ return {
31
+ handleFocus: handleFocus,
32
+ handleBlur: handleBlur };
33
+
34
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["useFocusControl.tsx"],"names":["useFocusControl","disabled","onFocus","onBlur","onBlurWhenDisabled","isFocused","setFocused","handleFocus","e","handleBlur"],"mappings":"iFAAA;;;;;;;;;AASO,SAASA,eAAT,OAAmF,KAAxDC,QAAwD,QAAxDA,QAAwD,CAA9CC,OAA8C,QAA9CA,OAA8C,CAArCC,MAAqC,QAArCA,MAAqC,CAA7BC,kBAA6B,QAA7BA,kBAA6B;AACxF,kBAAgC,qBAAkB,KAAlB,CAAhC,CAAOC,SAAP,gBAAkBC,UAAlB;;AAEA,wBAAU,YAAM;AACd,QAAIL,QAAQ,IAAII,SAAZ,IAAyBD,kBAA7B,EAAiD;AAC/C;AACAA,MAAAA,kBAAkB;AACnB;AACF,GALD,EAKG,CAACH,QAAD,EAAWI,SAAX,CALH;;AAOA,MAAME,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAyB;AAC3CF,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAJ,IAAAA,OAAO,QAAP,YAAAA,OAAO,CAAGM,CAAH,CAAP;AACD,GAHD;;AAKA,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACD,CAAD,EAAyB;AAC1CF,IAAAA,UAAU,CAAC,KAAD,CAAV;AACAH,IAAAA,MAAM,QAAN,YAAAA,MAAM,CAAGK,CAAH,CAAN;AACD,GAHD;;AAKA,SAAO;AACLD,IAAAA,WAAW,EAAXA,WADK;AAELE,IAAAA,UAAU,EAAVA,UAFK,EAAP;;AAID","sourcesContent":["import React, { useEffect, useState } from 'react';\n\ninterface Props {\n disabled?: boolean;\n onFocus?: React.FocusEventHandler;\n onBlur?: React.FocusEventHandler;\n onBlurWhenDisabled?(): void;\n}\n\nexport function useFocusControl({ disabled, onFocus, onBlur, onBlurWhenDisabled }: Props) {\n const [isFocused, setFocused] = useState<boolean>(false);\n\n useEffect(() => {\n if (disabled && isFocused && onBlurWhenDisabled) {\n // force calling custom blur event, try \"fix\" bug in react https://github.com/facebook/react/issues/9142\n onBlurWhenDisabled();\n }\n }, [disabled, isFocused]);\n\n const handleFocus = (e: React.FocusEvent) => {\n setFocused(true);\n onFocus?.(e);\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n setFocused(false);\n onBlur?.(e);\n };\n\n return {\n handleFocus,\n handleBlur,\n };\n}\n"]}
@@ -72,6 +72,7 @@ export declare class InputLikeText extends React.Component<InputLikeTextProps, I
72
72
  private handleMouseDragStart;
73
73
  private handleMouseDragEnd;
74
74
  private handleFocus;
75
+ private resetFocus;
75
76
  private handleBlur;
76
77
  private hiddenInputRef;
77
78
  private innerRef;