@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-9216939ede

package/cjs/components/Spinner/Spinner.md

@@ -4,7 +4,7 @@ import { Gapped, Spinner } from '@skbkontur/react-ui';
 const reactNodeCaption = (
   <div>
     <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
-    агрузка ...
+    агрузка
   </div>
 );
 

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

@@ -6,8 +6,11 @@ export declare const styles: {
     captionColor(t: Theme): string;
     inline(): string;
     mini(t: Theme): string;
+    small(t: Theme): string;
     normal(t: Theme): string;
+    medium(t: Theme): string;
     big(t: Theme): string;
+    large(t: Theme): string;
     spinner(): string;
     inner(): string;
 };

package/cjs/components/Spinner/Spinner.styles.js

@@ -1,7 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 var _AnimationKeyframes = require("../../lib/theming/AnimationKeyframes");
-var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _client = require("../../lib/client");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 var styles = (0, _Emotion.memoizeStyle)({
   circle: function circle(t) {
@@ -54,8 +54,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  small: function small(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.spinnerCaptionMarginSmall,
+    t.spinnerFontSizeSmall,
+    t.spinnerLineHeightSmall);
+
+  },
+
   normal: function normal(t) {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
 
     t.spinnerFontSizeMedium,
     t.spinnerLineHeightMedium,
@@ -63,8 +71,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  medium: function medium(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])),
+    t.spinnerCaptionMarginMedium,
+    t.spinnerFontSizeMedium,
+    t.spinnerLineHeightMedium);
+
+  },
+
   big: function big(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])),
 
     t.spinnerFontSizeLarge,
     t.spinnerLineHeightLarge,
@@ -72,8 +88,16 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
+  large: function large(t) {
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: ", ";\n    "])),
+    t.spinnerFontSizeLarge,
+    t.spinnerLineHeightLarge,
+    t.spinnerCaptionMarginLarge);
+
+  },
+
   spinner: function spinner() {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    "])));
 
 
 
@@ -81,7 +105,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   inner: function inner() {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n    "])));
 
 
   } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.styles.ts"],"names":["styles","circle","t","css","spinnerColor","isIE11","AnimationKeyframes","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","spinner","inner"],"mappings":"4QAAA;;AAEA;AACA,0C;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,YADd;;AAGI,KAACC,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGMD,2CAAmBE,mBAAnB,EAHN;AAIMF,2CAAmBG,mBAAnB,EAJN;AAKMH,2CAAmBF,YAAnB,CAAgCF,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCQ,EAAAA,iBAdiC,6BAcfR,CAde,EAcL;AAC1B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,yCAmBH;AAC5B,eAAOT,YAAP;AACI,KAACE,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGID,2CAAmBE,mBAAnB,EAHJ;AAIIF,2CAAmBG,mBAAnB,EAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCI,EAAAA,YA9BiC,wBA8BpBX,CA9BoB,EA8BV;AACrB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACY,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,oBAoCxB;AACP,eAAOZ,YAAP;;;;AAID,GAzCgC;;AA2CjCa,EAAAA,IA3CiC,gBA2C5Bd,CA3C4B,EA2ClB;AACb,eAAOC,YAAP;AACiBD,IAAAA,CAAC,CAACe,sBADnB;AAEef,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAjDgC;;AAmDjCC,EAAAA,MAnDiC,kBAmD1BlB,CAnD0B,EAmDhB;AACf,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACmB,qBAFjB;AAGiBnB,IAAAA,CAAC,CAACoB,uBAHnB;AAIgBpB,IAAAA,CAAC,CAACqB,uBAJlB;;AAMD,GA1DgC;;AA4DjCC,EAAAA,GA5DiC,eA4D7BtB,CA5D6B,EA4DnB;AACZ,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACuB,oBAFjB;AAGiBvB,IAAAA,CAAC,CAACwB,sBAHnB;AAIgBxB,IAAAA,CAAC,CAACyB,sBAJlB;;AAMD,GAnEgC;;AAqEjCC,EAAAA,OArEiC,qBAqEvB;AACR,eAAOzB,YAAP;;;;;AAKD,GA3EgC;;AA6EjC0B,EAAAA,KA7EiC,mBA6EzB;AACN,eAAO1B,YAAP;;;AAGD,GAjFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { AnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const styles = memoizeStyle({\n  circle(t: Theme) {\n    return css`\n      stroke: ${t.spinnerColor};\n\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `}\n    `;\n  },\n  circleDimmedColor(t: Theme) {\n    return css`\n      stroke: ${t.spinnerDimmedColor};\n    `;\n  },\n  circleWithoutColorAnimation() {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\n    `;\n  },\n\n  inline() {\n    return css`\n      font-size: inherit;\n      line-height: inherit;\n    `;\n  },\n\n  mini(t: Theme) {\n    return css`\n      margin-left: ${t.spinnerCaptionGapSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  normal(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n      margin-top: ${t.spinnerCaptionGapMedium};\n    `;\n  },\n\n  big(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin-top: ${t.spinnerCaptionGapLarge};\n    `;\n  },\n\n  spinner() {\n    return css`\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Spinner.styles.ts"],"names":["styles","circle","t","css","spinnerColor","isIE11","AnimationKeyframes","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","inline","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","small","spinnerCaptionMarginSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","medium","spinnerCaptionMarginMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","large","spinnerCaptionMarginLarge","spinner","inner"],"mappings":"4QAAA;;AAEA;AACA,0C;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,YADd;;AAGI,KAACC,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGMD,2CAAmBE,mBAAnB,EAHN;AAIMF,2CAAmBG,mBAAnB,EAJN;AAKMH,2CAAmBF,YAAnB,CAAgCF,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCQ,EAAAA,iBAdiC,6BAcfR,CAde,EAcL;AAC1B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACS,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,yCAmBH;AAC5B,eAAOT,YAAP;AACI,KAACE,cAAD;;AAEeC,2CAAmBC,mBAAnB,EAFf;AAGID,2CAAmBE,mBAAnB,EAHJ;AAIIF,2CAAmBG,mBAAnB,EAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCI,EAAAA,YA9BiC,wBA8BpBX,CA9BoB,EA8BV;AACrB,eAAOC,YAAP;AACWD,IAAAA,CAAC,CAACY,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,oBAoCxB;AACP,eAAOZ,YAAP;;;;AAID,GAzCgC;;AA2CjCa,EAAAA,IA3CiC,gBA2C5Bd,CA3C4B,EA2ClB;AACb,eAAOC,YAAP;AACiBD,IAAAA,CAAC,CAACe,sBADnB;AAEef,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAjDgC;;AAmDjCC,EAAAA,KAnDiC,iBAmD3BlB,CAnD2B,EAmDjB;AACd,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACmB,yBADd;AAEenB,IAAAA,CAAC,CAACgB,oBAFjB;AAGiBhB,IAAAA,CAAC,CAACiB,sBAHnB;;AAKD,GAzDgC;;AA2DjCG,EAAAA,MA3DiC,kBA2D1BpB,CA3D0B,EA2DhB;AACf,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAACqB,qBAFjB;AAGiBrB,IAAAA,CAAC,CAACsB,uBAHnB;AAIgBtB,IAAAA,CAAC,CAACuB,uBAJlB;;AAMD,GAlEgC;;AAoEjCC,EAAAA,MApEiC,kBAoE1BxB,CApE0B,EAoEhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACyB,0BADd;AAEezB,IAAAA,CAAC,CAACqB,qBAFjB;AAGiBrB,IAAAA,CAAC,CAACsB,uBAHnB;;AAKD,GA1EgC;;AA4EjCI,EAAAA,GA5EiC,eA4E7B1B,CA5E6B,EA4EnB;AACZ,eAAOC,YAAP;;AAEeD,IAAAA,CAAC,CAAC2B,oBAFjB;AAGiB3B,IAAAA,CAAC,CAAC4B,sBAHnB;AAIgB5B,IAAAA,CAAC,CAAC6B,sBAJlB;;AAMD,GAnFgC;;AAqFjCC,EAAAA,KArFiC,iBAqF3B9B,CArF2B,EAqFjB;AACd,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAAC2B,oBADjB;AAEiB3B,IAAAA,CAAC,CAAC4B,sBAFnB;AAGY5B,IAAAA,CAAC,CAAC+B,yBAHd;;AAKD,GA3FgC;;AA6FjCC,EAAAA,OA7FiC,qBA6FvB;AACR,eAAO/B,YAAP;;;;;AAKD,GAnGgC;;AAqGjCgC,EAAAA,KArGiC,mBAqGzB;AACN,eAAOhC,YAAP;;;AAGD,GAzGgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { AnimationKeyframes } from '../../lib/theming/AnimationKeyframes';\nimport { isIE11 } from '../../lib/client';\n\nexport const styles = memoizeStyle({\n  circle(t: Theme) {\n    return css`\n      stroke: ${t.spinnerColor};\n\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `}\n    `;\n  },\n  circleDimmedColor(t: Theme) {\n    return css`\n      stroke: ${t.spinnerDimmedColor};\n    `;\n  },\n  circleWithoutColorAnimation() {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset()} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength()} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate()} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\n    `;\n  },\n\n  inline() {\n    return css`\n      font-size: inherit;\n      line-height: inherit;\n    `;\n  },\n\n  mini(t: Theme) {\n    return css`\n      margin-left: ${t.spinnerCaptionGapSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  small(t: Theme) {\n    return css`\n      margin: ${t.spinnerCaptionMarginSmall};\n      font-size: ${t.spinnerFontSizeSmall};\n      line-height: ${t.spinnerLineHeightSmall};\n    `;\n  },\n\n  normal(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n      margin-top: ${t.spinnerCaptionGapMedium};\n    `;\n  },\n\n  medium(t: Theme) {\n    return css`\n      margin: ${t.spinnerCaptionMarginMedium};\n      font-size: ${t.spinnerFontSizeMedium};\n      line-height: ${t.spinnerLineHeightMedium};\n    `;\n  },\n\n  big(t: Theme) {\n    return css`\n      display: block;\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin-top: ${t.spinnerCaptionGapLarge};\n    `;\n  },\n\n  large(t: Theme) {\n    return css`\n      font-size: ${t.spinnerFontSizeLarge};\n      line-height: ${t.spinnerLineHeightLarge};\n      margin: ${t.spinnerCaptionMarginLarge};\n    `;\n  },\n\n  spinner() {\n    return css`\n      display: inline-block;\n      text-align: center;\n      line-height: normal;\n    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

package/cjs/components/Spinner/SpinnerFallbackAnimation.js

@@ -1,4 +1,6 @@
 "use strict";exports.__esModule = true;exports.createRotationAnimation = exports.createOffsetAnimation = exports.createLengthAnimation = exports.createColorAnimation = exports.SpinnerFallbackAnimationRunner = void 0;
+var _globalObject = require("@skbkontur/global-object");
+
 var _ColorFactory = require("../../lib/styles/ColorFactory"); /* eslint-disable no-useless-constructor */var
 
 SpinnerFallbackAnimationRunner =
@@ -41,14 +43,16 @@ var rafInterval = function rafInterval(fn, delay) {
       fn();
       lastcall = timestamp;
     }
-    rafId = requestAnimationFrame(interval);
+    if (_globalObject.globalObject.requestAnimationFrame) {
+      rafId = _globalObject.globalObject.requestAnimationFrame(interval);
+    }
   };
   interval();
 
   return {
     clear: function clear() {
       cleared = true;
-      cancelAnimationFrame(rafId);
+      _globalObject.globalObject.cancelAnimationFrame == null ? void 0 : _globalObject.globalObject.cancelAnimationFrame(rafId);
     } };
 
 };var

package/cjs/components/Spinner/SpinnerFallbackAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SpinnerFallbackAnimation.ts"],"names":["SpinnerFallbackAnimationRunner","animations","FPS","interval","start","forEach","animation","rafInterval","step","stop","clear","finish","fn","delay","lastcall","cleared","rafId","timestamp","Date","getTime","requestAnimationFrame","cancelAnimationFrame","Animation","duration","onProgress","onFinish","startTime","isFinished","progress","reset","createOffsetAnimation","from","to","setStyleProperty","units","current","createLengthAnimation","reverse","p","createColorAnimation","colors","rgbColors","map","color","ColorFactory","create","rgb","currentIndex","nextIndex","Math","round","length","createRotationAnimation"],"mappings":";AACA,6D,CADA,2C;;AAGaA,8B;;;AAGX,wCAAoBC,UAApB,EAAqDC,GAArD,EAAkE,uBAF1DC,QAE0D,GAFR,IAEQ;;;;AAI3DC,EAAAA,KAJ2D,GAInD,YAAM;AACnB,IAAA,KAAI,CAACH,UAAL,CAAgBI,OAAhB,CAAwB,UAACC,SAAD,UAAeA,SAAS,CAACF,KAAV,EAAf,EAAxB;AACA,IAAA,KAAI,CAACD,QAAL,GAAgBI,WAAW,CAAC,YAAM;AAChC,MAAA,KAAI,CAACN,UAAL,CAAgBI,OAAhB,CAAwB,UAACC,SAAD,UAAeA,SAAS,CAACE,IAAV,EAAf,EAAxB;AACD,KAF0B,EAExB,KAAI,CAACN,GAFmB,CAA3B;AAGD,GATiE;;AAW3DO,EAAAA,IAX2D,GAWpD,YAAM;AAClB,QAAI,KAAI,CAACN,QAAT,EAAmB;AACjB,MAAA,KAAI,CAACA,QAAL,CAAcO,KAAd;AACA,MAAA,KAAI,CAACT,UAAL,CAAgBI,OAAhB,CAAwB,UAACC,SAAD,UAAeA,SAAS,CAACK,MAAV,EAAf,EAAxB;AACD;AACF,GAhBiE,MAA9CV,UAA8C,GAA9CA,UAA8C,MAAbC,GAAa,GAAbA,GAAa,CAChE,KAAKE,KAAL,GACD,C;;;AAiBH,IAAMG,WAAW,GAAG,SAAdA,WAAc,CAACK,EAAD,EAAiBC,KAAjB,EAAmC;AACrD,MAAIC,QAAQ,GAAG,CAAf;AACA,MAAIC,OAAO,GAAG,KAAd;AACA,MAAIC,KAAK,GAAG,CAAZ;;AAEA,MAAMb,QAAQ,GAAG,SAAXA,QAAW,GAAM;AACrB,QAAIY,OAAJ,EAAa;AACX;AACD;;AAED,QAAME,SAAS,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAlB;AACA,QAAI,CAACL,QAAL,EAAe;AACbA,MAAAA,QAAQ,GAAGG,SAAX;AACD;AACD,QAAIA,SAAS,GAAGH,QAAZ,GAAuBD,KAA3B,EAAkC;AAChCD,MAAAA,EAAE;AACFE,MAAAA,QAAQ,GAAGG,SAAX;AACD;AACDD,IAAAA,KAAK,GAAGI,qBAAqB,CAACjB,QAAD,CAA7B;AACD,GAdD;AAeAA,EAAAA,QAAQ;;AAER,SAAO;AACLO,IAAAA,KAAK,EAAE,iBAAM;AACXK,MAAAA,OAAO,GAAG,IAAV;AACAM,MAAAA,oBAAoB,CAACL,KAAD,CAApB;AACD,KAJI,EAAP;;AAMD,CA5BD,C;;AA8BMM,S;;;;AAIJ;AACUC,QADV;AAEUC,UAFV;AAGUC,QAHV;AAIE,wBAPMC,SAON,GAPkB,CAOlB,MANMC,UAMN,GANmB,KAMnB;;AAEKnB,EAAAA,IAFL,GAEY,YAAM;AAClB,QAAI,MAAI,CAACmB,UAAT,EAAqB;AACnB;AACD;;AAED,QAAMV,SAAS,GAAG,IAAIC,IAAJ,GAAWC,OAAX,EAAlB;AACA,QAAI,CAAC,MAAI,CAACO,SAAV,EAAqB;AACnB,MAAA,MAAI,CAACA,SAAL,GAAiBT,SAAjB;AACD;AACD,QAAMW,QAAQ,GAAG,CAACX,SAAS,GAAG,MAAI,CAACS,SAAlB,IAA+B,MAAI,CAACH,QAArD;;AAEA,IAAA,MAAI,CAACC,UAAL,CAAgBI,QAAhB;;AAEA,QAAIA,QAAQ,IAAI,CAAhB,EAAmB;AACjB,MAAA,MAAI,CAACjB,MAAL;AACD;AACF,GAlBC;;AAoBKkB,EAAAA,KApBL,GAoBa,YAAM;AACnB,IAAA,MAAI,CAACH,SAAL,GAAiB,CAAjB;AACA,IAAA,MAAI,CAACC,UAAL,GAAkB,KAAlB;AACD,GAvBC;;AAyBKhB,EAAAA,MAzBL,GAyBc,YAAM;AACpB,IAAA,MAAI,CAACgB,UAAL,GAAkB,IAAlB;AACA,IAAA,MAAI,CAACF,QAAL,IAAiB,MAAI,CAACA,QAAL,CAAc,MAAd,CAAjB;AACD,GA5BC;;AA8BKrB,EAAAA,KA9BL,GA8Ba,YAAM;AACnB,QAAI,CAAC,MAAI,CAACuB,UAAV,EAAsB;AACpB,MAAA,MAAI,CAACnB,IAAL;AACD;AACF,GAlCC,MAHQe,QAGR,GAHQA,QAGR,MAFQC,UAER,GAFQA,UAER,MADQC,QACR,GADQA,QACR,CAAE,C;;;AAqCC,IAAMK,qBAAqB,GAAG,SAAxBA,qBAAwB;AACnCC,IADmC;AAEnCC,EAFmC;AAGnCT,QAHmC;AAInCU,gBAJmC;AAKnCC,KALmC;AAMhC,KADHA,KACG,cADHA,KACG,GADK,EACL;AACH,SAAO,IAAIZ,SAAJ;AACLC,EAAAA,QADK;AAEL,YAACK,QAAD,EAAc;AACZ,QAAMO,OAAO,GAAGJ,IAAI,GAAG,CAACC,EAAE,GAAGD,IAAN,IAAcH,QAArC;AACAK,IAAAA,gBAAgB,CAAC,mBAAD,OAAyBE,OAAzB,GAAmCD,KAAnC,CAAhB;AACD,GALI;AAML,YAAC5B,SAAD,EAAe;AACbA,IAAAA,SAAS,CAACuB,KAAV;AACD,GARI,CAAP;;AAUD,CAjBM,C;;AAmBA,IAAMO,qBAAqB,GAAG,SAAxBA,qBAAwB;AACnCL,IADmC;AAEnCC,EAFmC;AAGnCT,QAHmC;AAInCU,gBAJmC;AAKnCC,KALmC;AAMhC,KADHA,KACG,cADHA,KACG,GADK,EACL;AACH,MAAIG,OAAO,GAAG,KAAd;AACA,SAAO,IAAIf,SAAJ;AACLC,EAAAA,QADK;AAEL,YAACK,QAAD,EAAc;AACZ,QAAMU,CAAC,GAAGD,OAAO,GAAG,IAAIT,QAAP,GAAkBA,QAAnC;AACA,QAAMO,OAAO,GAAG,CAACJ,IAAI,CAAC,CAAD,CAAJ,GAAU,CAACC,EAAE,CAAC,CAAD,CAAF,GAAQD,IAAI,CAAC,CAAD,CAAb,IAAoBO,CAA/B,EAAkCP,IAAI,CAAC,CAAD,CAAJ,GAAU,CAACC,EAAE,CAAC,CAAD,CAAF,GAAQD,IAAI,CAAC,CAAD,CAAb,IAAoBO,CAAhE,CAAhB;AACAL,IAAAA,gBAAgB,CAAC,kBAAD,OAAwBE,OAAO,CAAC,CAAD,CAA/B,GAAqCD,KAArC,SAA8CC,OAAO,CAAC,CAAD,CAArD,GAA2DD,KAA3D,CAAhB;AACD,GANI;AAOL,YAAC5B,SAAD,EAAe;AACb+B,IAAAA,OAAO,GAAG,CAACA,OAAX;AACA/B,IAAAA,SAAS,CAACuB,KAAV;AACD,GAVI,CAAP;;AAYD,CApBM,C;;AAsBA,IAAMU,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,MADkC;AAElCjB,QAFkC;AAGlCU,gBAHkC;AAI/B;AACH,MAAMQ,SAAS,GAAGD,MAAM,CAACE,GAAP,CAAW,UAACC,KAAD,UAAWC,2BAAaC,MAAb,CAAoBF,KAApB,EAA2BG,GAAtC,EAAX,CAAlB;AACA,MAAIC,YAAY,GAAG,CAAnB;AACA,MAAIC,SAAS,GAAG,CAAhB;;AAEA,SAAO,IAAI1B,SAAJ;AACLC,EAAAA,QADK;AAEL,YAACK,QAAD,EAAc;AACZ,QAAMG,IAAI,GAAGU,SAAS,CAACM,YAAD,CAAtB;AACA,QAAMf,EAAE,GAAGS,SAAS,CAACO,SAAD,CAApB;AACA,QAAIjB,IAAI,IAAIC,EAAZ,EAAgB;AACd,UAAMG,OAAO,GAAG;AACdc,MAAAA,IAAI,CAACC,KAAL,CAAWnB,IAAI,CAAC,CAAD,CAAJ,GAAU,CAACC,EAAE,CAAC,CAAD,CAAF,GAAQD,IAAI,CAAC,CAAD,CAAb,IAAoBH,QAAzC,CADc;AAEdqB,MAAAA,IAAI,CAACC,KAAL,CAAWnB,IAAI,CAAC,CAAD,CAAJ,GAAU,CAACC,EAAE,CAAC,CAAD,CAAF,GAAQD,IAAI,CAAC,CAAD,CAAb,IAAoBH,QAAzC,CAFc;AAGdqB,MAAAA,IAAI,CAACC,KAAL,CAAWnB,IAAI,CAAC,CAAD,CAAJ,GAAU,CAACC,EAAE,CAAC,CAAD,CAAF,GAAQD,IAAI,CAAC,CAAD,CAAb,IAAoBH,QAAzC,CAHc,CAAhB;;AAKAK,MAAAA,gBAAgB,CAAC,QAAD,WAAkBE,OAAlB,OAAhB;AACD;AACF,GAbI;AAcL,YAAC7B,SAAD,EAAe;AACbA,IAAAA,SAAS,CAACuB,KAAV;AACAkB,IAAAA,YAAY,GAAGC,SAAf;AACAA,IAAAA,SAAS,GAAG,CAACA,SAAS,GAAG,CAAb,IAAkBR,MAAM,CAACW,MAArC;AACD,GAlBI,CAAP;;AAoBD,CA7BM,C;;AA+BA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B;AACrCrB,IADqC;AAErCC,EAFqC;AAGrCT,QAHqC;AAIrCU,gBAJqC;AAKrCC,KALqC;AAMlC,KADHA,KACG,cADHA,KACG,GADK,KACL;AACH,SAAO,IAAIZ,SAAJ;AACLC,EAAAA,QADK;AAEL,YAACK,QAAD,EAAc;AACZ,QAAMO,OAAO,GAAGc,IAAI,CAACC,KAAL,CAAWnB,IAAI,GAAG,CAACC,EAAE,GAAGD,IAAN,IAAcH,QAAhC,CAAhB;AACAK,IAAAA,gBAAgB,CAAC,WAAD,cAAwBE,OAAxB,GAAkCD,KAAlC,OAAhB;AACD,GALI;AAML,YAAC5B,SAAD,EAAe;AACbA,IAAAA,SAAS,CAACuB,KAAV;AACD,GARI,CAAP;;AAUD,CAjBM,C","sourcesContent":["/* eslint-disable no-useless-constructor */\nimport { ColorFactory } from '../../lib/styles/ColorFactory';\n\nexport class SpinnerFallbackAnimationRunner {\n  private interval: ReturnType<typeof rafInterval> | null = null;\n\n  constructor(private animations: Animation[], private FPS: number) {\n    this.start();\n  }\n\n  public start = () => {\n    this.animations.forEach((animation) => animation.start());\n    this.interval = rafInterval(() => {\n      this.animations.forEach((animation) => animation.step());\n    }, this.FPS);\n  };\n\n  public stop = () => {\n    if (this.interval) {\n      this.interval.clear();\n      this.animations.forEach((animation) => animation.finish());\n    }\n  };\n}\n\nconst rafInterval = (fn: () => void, delay: number) => {\n  let lastcall = 0;\n  let cleared = false;\n  let rafId = 0;\n\n  const interval = () => {\n    if (cleared) {\n      return;\n    }\n\n    const timestamp = new Date().getTime();\n    if (!lastcall) {\n      lastcall = timestamp;\n    }\n    if (timestamp - lastcall > delay) {\n      fn();\n      lastcall = timestamp;\n    }\n    rafId = requestAnimationFrame(interval);\n  };\n  interval();\n\n  return {\n    clear: () => {\n      cleared = true;\n      cancelAnimationFrame(rafId);\n    },\n  };\n};\n\nclass Animation {\n  private startTime = 0;\n  private isFinished = false;\n\n  constructor(\n    private duration: number,\n    private onProgress: (progress: number) => void,\n    private onFinish?: (animation: Animation) => void,\n  ) {}\n\n  public step = () => {\n    if (this.isFinished) {\n      return;\n    }\n\n    const timestamp = new Date().getTime();\n    if (!this.startTime) {\n      this.startTime = timestamp;\n    }\n    const progress = (timestamp - this.startTime) / this.duration;\n\n    this.onProgress(progress);\n\n    if (progress >= 1) {\n      this.finish();\n    }\n  };\n\n  public reset = () => {\n    this.startTime = 0;\n    this.isFinished = false;\n  };\n\n  public finish = () => {\n    this.isFinished = true;\n    this.onFinish && this.onFinish(this);\n  };\n\n  public start = () => {\n    if (!this.isFinished) {\n      this.step();\n    }\n  };\n}\n\nexport const createOffsetAnimation = (\n  from: number,\n  to: number,\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = '',\n) => {\n  return new Animation(\n    duration,\n    (progress) => {\n      const current = from + (to - from) * progress;\n      setStyleProperty('stroke-dashoffset', `${current}${units}`);\n    },\n    (animation) => {\n      animation.reset();\n    },\n  );\n};\n\nexport const createLengthAnimation = (\n  from: number[],\n  to: number[],\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = '',\n) => {\n  let reverse = false;\n  return new Animation(\n    duration,\n    (progress) => {\n      const p = reverse ? 1 - progress : progress;\n      const current = [from[0] + (to[0] - from[0]) * p, from[1] + (to[1] - from[1]) * p];\n      setStyleProperty('stroke-dasharray', `${current[0]}${units} ${current[1]}${units}`);\n    },\n    (animation) => {\n      reverse = !reverse;\n      animation.reset();\n    },\n  );\n};\n\nexport const createColorAnimation = (\n  colors: string[],\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n) => {\n  const rgbColors = colors.map((color) => ColorFactory.create(color).rgb);\n  let currentIndex = 0;\n  let nextIndex = 1;\n\n  return new Animation(\n    duration,\n    (progress) => {\n      const from = rgbColors[currentIndex];\n      const to = rgbColors[nextIndex];\n      if (from && to) {\n        const current = [\n          Math.round(from[0] + (to[0] - from[0]) * progress),\n          Math.round(from[1] + (to[1] - from[1]) * progress),\n          Math.round(from[2] + (to[2] - from[2]) * progress),\n        ];\n        setStyleProperty('stroke', `rgb(${current})`);\n      }\n    },\n    (animation) => {\n      animation.reset();\n      currentIndex = nextIndex;\n      nextIndex = (nextIndex + 1) % colors.length;\n    },\n  );\n};\n\nexport const createRotationAnimation = (\n  from: number,\n  to: number,\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = 'deg',\n) => {\n  return new Animation(\n    duration,\n    (progress) => {\n      const current = Math.round(from + (to - from) * progress);\n      setStyleProperty('transform', `rotate(${current}${units})`);\n    },\n    (animation) => {\n      animation.reset();\n    },\n  );\n};\n"]}
+{"version":3,"sources":["SpinnerFallbackAnimation.ts"],"names":["SpinnerFallbackAnimationRunner","animations","FPS","interval","start","forEach","animation","rafInterval","step","stop","clear","finish","fn","delay","lastcall","cleared","rafId","timestamp","Date","getTime","globalObject","requestAnimationFrame","cancelAnimationFrame","Animation","duration","onProgress","onFinish","startTime","isFinished","progress","reset","createOffsetAnimation","from","to","setStyleProperty","units","current","createLengthAnimation","reverse","p","createColorAnimation","colors","rgbColors","map","color","ColorFactory","create","rgb","currentIndex","nextIndex","Math","round","length","createRotationAnimation"],"mappings":"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","sourcesContent":["/* eslint-disable no-useless-constructor */\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ColorFactory } from '../../lib/styles/ColorFactory';\n\nexport class SpinnerFallbackAnimationRunner {\n  private interval: ReturnType<typeof rafInterval> | null = null;\n\n  constructor(private animations: Animation[], private FPS: number) {\n    this.start();\n  }\n\n  public start = () => {\n    this.animations.forEach((animation) => animation.start());\n    this.interval = rafInterval(() => {\n      this.animations.forEach((animation) => animation.step());\n    }, this.FPS);\n  };\n\n  public stop = () => {\n    if (this.interval) {\n      this.interval.clear();\n      this.animations.forEach((animation) => animation.finish());\n    }\n  };\n}\n\nconst rafInterval = (fn: () => void, delay: number) => {\n  let lastcall = 0;\n  let cleared = false;\n  let rafId = 0;\n\n  const interval = () => {\n    if (cleared) {\n      return;\n    }\n\n    const timestamp = new Date().getTime();\n    if (!lastcall) {\n      lastcall = timestamp;\n    }\n    if (timestamp - lastcall > delay) {\n      fn();\n      lastcall = timestamp;\n    }\n    if (globalObject.requestAnimationFrame) {\n      rafId = globalObject.requestAnimationFrame(interval);\n    }\n  };\n  interval();\n\n  return {\n    clear: () => {\n      cleared = true;\n      globalObject.cancelAnimationFrame?.(rafId);\n    },\n  };\n};\n\nclass Animation {\n  private startTime = 0;\n  private isFinished = false;\n\n  constructor(\n    private duration: number,\n    private onProgress: (progress: number) => void,\n    private onFinish?: (animation: Animation) => void,\n  ) {}\n\n  public step = () => {\n    if (this.isFinished) {\n      return;\n    }\n\n    const timestamp = new Date().getTime();\n    if (!this.startTime) {\n      this.startTime = timestamp;\n    }\n    const progress = (timestamp - this.startTime) / this.duration;\n\n    this.onProgress(progress);\n\n    if (progress >= 1) {\n      this.finish();\n    }\n  };\n\n  public reset = () => {\n    this.startTime = 0;\n    this.isFinished = false;\n  };\n\n  public finish = () => {\n    this.isFinished = true;\n    this.onFinish && this.onFinish(this);\n  };\n\n  public start = () => {\n    if (!this.isFinished) {\n      this.step();\n    }\n  };\n}\n\nexport const createOffsetAnimation = (\n  from: number,\n  to: number,\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = '',\n) => {\n  return new Animation(\n    duration,\n    (progress) => {\n      const current = from + (to - from) * progress;\n      setStyleProperty('stroke-dashoffset', `${current}${units}`);\n    },\n    (animation) => {\n      animation.reset();\n    },\n  );\n};\n\nexport const createLengthAnimation = (\n  from: number[],\n  to: number[],\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = '',\n) => {\n  let reverse = false;\n  return new Animation(\n    duration,\n    (progress) => {\n      const p = reverse ? 1 - progress : progress;\n      const current = [from[0] + (to[0] - from[0]) * p, from[1] + (to[1] - from[1]) * p];\n      setStyleProperty('stroke-dasharray', `${current[0]}${units} ${current[1]}${units}`);\n    },\n    (animation) => {\n      reverse = !reverse;\n      animation.reset();\n    },\n  );\n};\n\nexport const createColorAnimation = (\n  colors: string[],\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n) => {\n  const rgbColors = colors.map((color) => ColorFactory.create(color).rgb);\n  let currentIndex = 0;\n  let nextIndex = 1;\n\n  return new Animation(\n    duration,\n    (progress) => {\n      const from = rgbColors[currentIndex];\n      const to = rgbColors[nextIndex];\n      if (from && to) {\n        const current = [\n          Math.round(from[0] + (to[0] - from[0]) * progress),\n          Math.round(from[1] + (to[1] - from[1]) * progress),\n          Math.round(from[2] + (to[2] - from[2]) * progress),\n        ];\n        setStyleProperty('stroke', `rgb(${current})`);\n      }\n    },\n    (animation) => {\n      animation.reset();\n      currentIndex = nextIndex;\n      nextIndex = (nextIndex + 1) % colors.length;\n    },\n  );\n};\n\nexport const createRotationAnimation = (\n  from: number,\n  to: number,\n  duration: number,\n  setStyleProperty: CSSStyleDeclaration['setProperty'],\n  units = 'deg',\n) => {\n  return new Animation(\n    duration,\n    (progress) => {\n      const current = Math.round(from + (to - from) * progress);\n      setStyleProperty('transform', `rotate(${current}${units})`);\n    },\n    (animation) => {\n      animation.reset();\n    },\n  );\n};\n"]}

package/cjs/components/Sticky/Sticky.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface StickyProps extends CommonProps {
+export interface StickyProps extends Omit<CommonProps, 'children'> {
     side: 'top' | 'bottom';
     /**
      * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии
@@ -22,7 +22,7 @@ export interface StickyState {
     relativeTop: number;
 }
 export declare const StickyDataTids: {
-    readonly root: "Spinner__root";
+    readonly root: "Sticky__root";
 };
 declare type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
 export declare class Sticky extends React.Component<StickyProps, StickyState> {

package/cjs/components/Sticky/Sticky.js

@@ -1,6 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.StickyDataTids = exports.Sticky = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _shallowequal = _interopRequireDefault(require("shallowequal"));
+var _globalObject = require("@skbkontur/global-object");
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 
@@ -38,7 +39,7 @@ var MAX_REFLOW_RETRIES = 5;
 
 
 var StickyDataTids = {
-  root: 'Spinner__root' };exports.StickyDataTids = StickyDataTids;var
+  root: 'Sticky__root' };exports.StickyDataTids = StickyDataTids;var
 
 
 
@@ -155,19 +156,17 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
-    reflow = function () {
-      var _document = document,documentElement = _document.documentElement;
-
-      if (!documentElement) {
+    reflow = function () {var _globalObject$documen;
+      if (!((_globalObject$documen = _globalObject.globalObject.document) != null && _globalObject$documen.documentElement)) {
         throw Error('There is no "documentElement" in document');
       }
 
-      var windowHeight = window.innerHeight || documentElement.clientHeight;
+      var windowHeight = _globalObject.globalObject.innerHeight || _globalObject.globalObject.document.documentElement.clientHeight;
       if (!_this.wrapper || !_this.inner) {
         return;
       }
-      var _getDOMRect = (0, _getDOMRect3.getDOMRect)(_this.wrapper),top = _getDOMRect.top,bottom = _getDOMRect.bottom,left = _getDOMRect.left;
-      var _getDOMRect2 = (0, _getDOMRect3.getDOMRect)(_this.inner),width = _getDOMRect2.width,height = _getDOMRect2.height;
+      var _getDOMRect = (0, _getDOMRect3.getDOMRect)(_this.wrapper),top = _getDOMRect.top,bottom = _getDOMRect.bottom,left = _getDOMRect.left,width = _getDOMRect.width;
+      var _getDOMRect2 = (0, _getDOMRect3.getDOMRect)(_this.inner),height = _getDOMRect2.height;
       var _this$props = _this.props,getStop = _this$props.getStop,side = _this$props.side;
       var _this$state = _this.state,prevFixed = _this$state.fixed,_this$state$height = _this$state.height,prevHeight = _this$state$height === void 0 ? height : _this$state$height;
       var offset = _this.getProps().offset;
@@ -180,6 +179,7 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       }
 
       if (fixed) {
+        _this.setState({ width: width });
         var stop = getStop && getStop();
         if (stop) {
           var deltaHeight = prevHeight - height;

package/cjs/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","rootNode","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset?: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Spinner__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = getDOMRect(this.wrapper);\n    const { width, height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","rootNode","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","globalObject","document","documentElement","Error","windowHeight","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset?: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    if (!globalObject.document?.documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/cjs/components/Switcher/Switcher.d.ts

@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonSize } from '../Button';
+import { ButtonProps } from '../Button';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type SwitcherSize = ButtonSize;
-declare type SwitcherItems = string | SwitcherItem;
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type SwitcherSize = SizeProp;
+export declare type SwitcherItems = string | SwitcherItem;
 export declare const SwitcherDataTids: {
     readonly root: "Switcher__root";
 };
-export interface SwitcherProps extends CommonProps {
+export interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {
     /**
-     * Список строк или список элементов типа `{ label: string, value: string }`
+     * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`
      */
     items: SwitcherItems[];
     value?: string;
@@ -18,18 +22,27 @@ export interface SwitcherProps extends CommonProps {
     caption?: string;
     error?: boolean;
     /** Размер */
-    size?: SwitcherSize;
+    size?: SizeProp;
     disabled?: boolean;
+    /**
+     * Функция для отрисовки элемента. Аргументы — `label`,
+     * `value`, `buttonProps`, `renderDefault`, `ariaLabel`
+     */
+    renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode, ariaLabel?: string) => React.ReactNode;
 }
+declare type DefaultProps = Required<Pick<SwitcherProps, 'role'>>;
 export interface SwitcherState {
     focusedIndex: Nullable<number>;
 }
 interface SwitcherItem {
-    label: string;
     value: string;
+    label: string;
+    'aria-label'?: string;
+    buttonProps?: Partial<ButtonProps>;
 }
 export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
     static propTypes: {
         error: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -40,6 +53,7 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
         caption: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: SwitcherState;
     private theme;
@@ -49,12 +63,14 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
     private selectItem;
     private _extractPropsFromItem;
     private _extractValuesFromItems;
-    private move;
     private _focus;
     private handleKey;
+    private move;
+    private _getNextFocusedIndex;
     private _handleFocus;
     private _handleBlur;
     private _renderItems;
+    private renderDefaultItem;
     private getLabelSizeClassName;
 }
 export {};

package/cjs/components/Switcher/Switcher.js

@@ -11,8 +11,13 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 
+
 var _Switcher = require("./Switcher.styles");
-var _switcherTheme = require("./switcherTheme");var _class, _class2, _temp;
+var _switcherTheme = require("./switcherTheme");
+var _helpers = require("./helpers");var _class, _class2, _temp;
+
+
+
 
 
 
@@ -39,6 +44,22 @@ var SwitcherDataTids = {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -67,6 +88,11 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
+
+
+
+
+
 
 
 
@@ -136,26 +162,6 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       });
     };_this.
 
-    move = function (step) {
-      var selectedIndex = _this.state.focusedIndex;
-
-      if (typeof selectedIndex !== 'number') {
-        return;
-      }
-
-      var items = _this._extractValuesFromItems();
-
-      selectedIndex += step;
-
-      if (selectedIndex < 0) {
-        selectedIndex = items.length - 1;
-      } else if (selectedIndex >= items.length) {
-        selectedIndex = 0;
-      }
-
-      _this._focus(selectedIndex);
-    };_this.
-
     _focus = function (index) {
       _this.setState({ focusedIndex: index });
     };_this.
@@ -168,16 +174,44 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
       if ((0, _identifiers.isKeyEnter)(e)) {
         if (_this.props.onValueChange) {
-          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value;
-          _this.selectItem(_value);
+          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value,_buttonProps = _this$_extractPropsFr2.buttonProps;
+          if (!(_buttonProps != null && _buttonProps.disabled)) {
+            _this.selectItem(_value);
+          }
         }
         return;
       }
 
       if ((0, _identifiers.isKeyArrowHorizontal)(e)) {
         e.preventDefault();
-        _this.move((0, _identifiers.isKeyArrowLeft)(e) ? -1 : 1);
+        _this.move((0, _identifiers.isKeyArrowLeft)(e));
+      }
+    };_this.
+
+    move = function (left) {
+      var selectedIndex = _this.state.focusedIndex;
+
+      if (typeof selectedIndex !== 'number') {
+        return;
+      }
+      var newFocusedIndex = _this._getNextFocusedIndex(left, selectedIndex);
+      _this._focus(newFocusedIndex);
+    };_this.
+
+    _getNextFocusedIndex = function (left, focusedIndex) {
+      var _this$props = _this.props,items = _this$props.items,disabled = _this$props.disabled;
+      if (disabled) {
+        return focusedIndex;
+      }
+
+      for (var i = 1; i < items.length; i++) {
+        var index = (0, _helpers.mod)(focusedIndex + (left ? -i : i), items.length);
+        var _this$_extractPropsFr3 = _this._extractPropsFromItem(items[index]),_buttonProps2 = _this$_extractPropsFr3.buttonProps;
+        if (!(_buttonProps2 != null && _buttonProps2.disabled)) {
+          return index;
+        }
       }
+      return focusedIndex;
     };_this.
 
     _handleFocus = function () {
@@ -195,26 +229,47 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
     };_this.
 
     _renderItems = function () {
-      return _this.props.items.map(function (item, i) {
-        var _this$_extractPropsFr3 = _this._extractPropsFromItem(item),label = _this$_extractPropsFr3.label,value = _this$_extractPropsFr3.value;
-        var buttonProps = {
-          checked: _this.props.value === value,
+      var _this$props2 = _this.props,items = _this$props2.items,value = _this$props2.value,size = _this$props2.size,disabled = _this$props2.disabled,role = _this$props2.role,renderItem = _this$props2.renderItem;
+      return items.map(function (item, i) {
+        var _this$_extractPropsFr4 =
+
+
+
+
+        _this._extractPropsFromItem(item),ariaLabel = _this$_extractPropsFr4['aria-label'],label = _this$_extractPropsFr4.label,itemValue = _this$_extractPropsFr4.value,customButtonProps = _this$_extractPropsFr4.buttonProps;
+
+        var isChecked = value === itemValue;
+        var commonButtonProps = {
+          'aria-checked': isChecked,
+          role: role,
+          checked: isChecked,
           visuallyFocused: _this.state.focusedIndex === i,
           onClick: function onClick() {
-            _this.selectItem(value);
+            _this.selectItem(itemValue);
           },
           disableFocus: true,
-          size: _this.props.size,
-          disabled: _this.props.disabled };
+          size: size,
+          disabled: disabled,
+          corners: (0, _Group.getButtonCorners)(i === 0, i === items.length - 1) };
+
+
+        var buttonProps = (0, _extends2.default)({},
+        commonButtonProps,
+        customButtonProps);
 
-        return /*#__PURE__*/(
-          _react.default.createElement(_Button.Button, (0, _extends2.default)({ key: value }, buttonProps),
-          label));
 
+        var renderDefault = function renderDefault() {return _this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);};
 
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();
       });
     };_this.
 
+    renderDefaultItem = function (label, value, buttonProps, ariaLabel) {return /*#__PURE__*/(
+        _react.default.createElement(_Button.Button, (0, _extends2.default)({ "aria-label": ariaLabel, key: value }, buttonProps),
+        label));};_this.
+
+
+
     getLabelSizeClassName = function () {
       switch (_this.props.size) {
         case 'large':
@@ -225,4 +280,4 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
         default:
           return _Switcher.styles.captionSmall(_this.theme);}
 
-    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var captionClassName = (0, _Emotion.cx)(_Switcher.styles.caption(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SwitcherDataTids.root, className: _Switcher.styles.root() }, this.props.caption ? /*#__PURE__*/_react.default.createElement("div", { className: captionClassName }, this.props.caption) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, caption: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;
+    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var captionClassName = (0, _Emotion.cx)(_Switcher.styles.caption(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SwitcherDataTids.root, className: _Switcher.styles.root() }, this.props.caption ? /*#__PURE__*/_react.default.createElement("div", { className: captionClassName }, this.props.caption) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.defaultProps = { role: 'switch' }, _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, caption: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func, renderItem: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;