@skbkontur/react-ui 3.10.0 → 3.11.0-latest

package/components/SidePage/SidePage/SidePage.js

@@ -60,6 +60,17 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       }
     };
 
+    _this.disablePageScroll = function (e) {
+      var layout = _this.layoutRef;
+      if (!layout) return;
+      var reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;
+      var reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;
+
+      if (!_this.props.blockBackground && (reachedTop || reachedBottom)) {
+        e.preventDefault();
+      }
+    };
+
     _this.getSidePageContextProps = function () {
       return {
         hasHeader: _this.state.hasHeader,
@@ -173,12 +184,20 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
   var _proto = SidePage.prototype;
 
   _proto.componentDidMount = function componentDidMount() {
+    var _this$rootRef$current;
+
     window.addEventListener('keydown', this.handleKeyDown);
+    (_this$rootRef$current = this.rootRef.current) == null ? void 0 : _this$rootRef$current.addEventListener('wheel', this.disablePageScroll, {
+      passive: false
+    });
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
+    var _this$rootRef$current2;
+
     window.removeEventListener('keydown', this.handleKeyDown);
+    (_this$rootRef$current2 = this.rootRef.current) == null ? void 0 : _this$rootRef$current2.removeEventListener('wheel', this.disablePageScroll);
 
     if (this.stackSubscription != null) {
       this.stackSubscription.remove();

package/components/SidePage/SidePage/SidePage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","isTestEnv","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","rootRef","createRef","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","root","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","_","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"mappings":"4JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,OAAOC,SAAP,MAAsB,kBAAtB;;AAEA,SAASC,WAAT,QAA4B,uCAA5B;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,eAAT,QAAgC,kCAAhC;AACA,SAASC,sBAAT,QAAuC,uCAAvC;AACA,SAASC,UAAT,QAAmD,sBAAnD;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,WAAT,QAA4B,4BAA5B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,SAAT,QAA0B,8BAA1B;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,eAAT,QAAqD,mBAArD;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,MAAT,QAAuB,mBAAvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMC,kBAAkB,GAAG,GAA3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,QAAb;;;;;;;AAOSC,IAAAA,KAPT,GAOgC;AAC5BC,MAAAA,SAAS,EAAE,KADiB;AAE5BC,MAAAA,SAAS,EAAE,KAFiB;AAG5BC,MAAAA,QAAQ,EAAE,KAHkB,EAPhC;;AAYUC,IAAAA,KAZV;AAaUC,IAAAA,iBAbV,GAa6D,IAb7D;AAcUC,IAAAA,SAdV,GAc0C,IAd1C;AAeUC,IAAAA,MAfV,GAe0C,IAf1C;AAgBUC,IAAAA,OAhBV,gBAgBoB/B,KAAK,CAACgC,SAAN,EAhBpB;;;;;;;;;;;;;;;;;;;AAmCSC,IAAAA,YAnCT,GAmCwB,YAAY;AAChC,UAAI,MAAKH,MAAT,EAAiB;AACf,cAAKA,MAAL,CAAYI,MAAZ;AACD;AACF,KAvCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HUC,IAAAA,uBA/HV,GA+HoC,YAA2B;AAC3D,aAAO;AACLX,QAAAA,SAAS,EAAE,MAAKD,KAAL,CAAWC,SADjB;AAELC,QAAAA,SAAS,EAAE,MAAKF,KAAL,CAAWE,SAFjB;AAGLC,QAAAA,QAAQ,EAAE,MAAKH,KAAL,CAAWG,QAHhB;AAILU,QAAAA,YAAY,EAAE,MAAKA,YAJd;AAKLC,QAAAA,QAAQ,EAAE,MAAKA,QALV;AAMLJ,QAAAA,YAAY,EAAE,MAAKA,YANd;AAOLK,QAAAA,SAAS,EAAE,MAAKA,SAPX;AAQLC,QAAAA,YAAY,EAAE,MAAKA,YARd;AASLC,QAAAA,YAAY,EAAE,MAAKA,YATd;AAULC,QAAAA,WAAW,EAAE,MAAKA,WAVb,EAAP;;AAYD,KA5IH;;AA8IUJ,IAAAA,QA9IV,GA8IqB,YAAM;AACvB,UAAI,CAAC,MAAKR,SAAV,EAAqB;AACnB,eAAO,MAAP;AACD;AACD,aAAO,MAAKA,SAAL,CAAea,WAAtB;AACD,KAnJH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiLUC,IAAAA,iBAjLV,GAiL8B,UAACC,KAAD,EAA2C;AACrE,UAAMC,SAAS,GAAGD,KAAK,CAACE,MAAN,CAAa,UAACC,CAAD,UAAOA,CAAC,YAAYzB,QAAb,IAAyByB,CAAC,CAACC,KAAF,CAAQC,QAAR,KAAqB,MAAKD,KAAL,CAAWC,QAAhE,EAAb,CAAlB;AACA,UAAMC,uBAAuB,GAAGL,SAAS,CAACM,OAAV,+BAAhC;;AAEA,UAAMC,SAAS,GAAGP,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,KAAKL,SAAS,CAACQ,MAAV,GAAmB,CAAzF;AACA,UAAMC,SAAS,GAAGT,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,GAAGL,SAAS,CAACQ,MAAV,GAAmB,CAAvF;AACA,UAAME,aAAa,GAAGhD,UAAU,CAACiD,UAAX,+BAAtB;;AAEA,YAAKC,QAAL,CAAc;AACZC,QAAAA,aAAa,EAAEd,KAAK,CAACO,OAAN,+BADH;AAEZC,QAAAA,SAAS,EAATA,SAFY;AAGZE,QAAAA,SAAS,EAATA,SAHY;AAIZC,QAAAA,aAAa,EAAbA,aAJY,EAAd;;AAMD,KA/LH;;AAiMUI,IAAAA,kBAjMV,GAiM+B,UAACC,CAAD,EAAc;AACzC,UAAI,MAAKrC,KAAL,CAAWmC,aAAX,KAA6B,CAA7B,IAAkC,CAAC,MAAKV,KAAL,CAAWa,qBAAlD,EAAyE;AACvE;AACA,YAAID,CAAC,YAAYE,UAAb,IAA2BF,CAAC,CAACG,OAAF,GAAYC,QAAQ,CAACC,eAAT,CAAyBvB,WAApE,EAAiF;AAC/E;AACD;AACD,cAAKN,YAAL;AACD;AACF,KAzMH;;AA2MU8B,IAAAA,aA3MV,GA2M0B,UAACN,CAAD,EAAsB;AAC5C,UAAI,MAAKrC,KAAL,CAAWmC,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAIvD,WAAW,CAACyD,CAAD,CAAf,EAAoB;AAClBvD,QAAAA,eAAe,CAACuD,CAAD,CAAf;AACA,cAAKxB,YAAL;AACD;AACF,KAnNH;;AAqNUA,IAAAA,YArNV,GAqNyB,YAAM;AAC3B,UAAI,MAAKY,KAAL,CAAWmB,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKnB,KAAL,CAAWoB,OAAf,EAAwB;AACtB,cAAKpB,KAAL,CAAWoB,OAAX;AACD;AACF,KA5NH;;AA8NU9B,IAAAA,SA9NV,GA8NsB,UAAC+B,GAAD,EAAgC;AAClD,YAAKvC,MAAL,GAAcuC,GAAd;AACD,KAhOH;;AAkOU9B,IAAAA,YAlOV,GAkOyB,UAACf,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKD,KAAL,CAAWC,SAAX,KAAyBA,SAAzB,IAAsC,MAAKiC,QAAL,CAAc,EAAEjC,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KApOH;;AAsOUgB,IAAAA,YAtOV,GAsOyB,UAACf,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKF,KAAL,CAAWE,SAAX,KAAyBA,SAAzB,IAAsC,MAAKgC,QAAL,CAAc,EAAEhC,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KAxOH;;AA0OUgB,IAAAA,WA1OV,GA0OwB,UAACf,QAAD,EAAsB,KAArBA,QAAqB,cAArBA,QAAqB,GAAV,KAAU;AAC1C,YAAKH,KAAL,CAAWG,QAAX,KAAwBA,QAAxB,IAAoC,MAAK+B,QAAL,CAAc,EAAE/B,QAAQ,EAARA,QAAF,EAAd,CAApC;AACD,KA5OH,sDAkBS4C,iBAlBT,GAkBE,6BAA2B,CACzBC,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAKN,aAAxC,EACA,KAAKtC,iBAAL,GAAyBrB,UAAU,CAACkE,GAAX,CAAe,IAAf,EAAqB,KAAK9B,iBAA1B,CAAzB,CACD,CArBH,QAuBS+B,oBAvBT,GAuBE,gCAA8B,CAC5BH,MAAM,CAACI,mBAAP,CAA2B,SAA3B,EAAsC,KAAKT,aAA3C,EACA,IAAI,KAAKtC,iBAAL,IAA0B,IAA9B,EAAoC,CAClC,KAAKA,iBAAL,CAAuBgD,MAAvB,GACD,CACDrE,UAAU,CAACqE,MAAX,CAAkB,IAAlB,EACD,CA7BH,CA+BE;AACF;AACA;AACA,KAlCA,QA+CSC,MA/CT,GA+CE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAClD,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACmD,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAxDH,QA0DUA,UA1DV,GA0DE,sBAAqB,mBAC4B,KAAK9B,KADjC,CACX+B,eADW,eACXA,eADW,CACMC,iBADN,eACMA,iBADN,CAGnB,oBACE,oBAAC,eAAD,qBACE,oBAAC,aAAD,EAAmB,KAAKhC,KAAxB,eACE,iCACG+B,eAAe,IAAI,KAAKE,YAAL,EADtB,eAEE,oBAAC,aAAD,IACE,UADF,EAEE,UAAU,EAAE,KAAKC,kBAAL,EAFd,EAGE,MAAM,EAAE,CAACF,iBAHX,EAIE,KAAK,EAAE,CAACA,iBAJV,EAKE,IAAI,EAAE,KALR,EAME,OAAO,EAAE,EACPG,KAAK,EAAE9D,kBADA,EAEP+D,IAAI,EAAE/D,kBAFC,EANX,EAUE,OAAO,EAAE,KAAKU,OAVhB,IAYG,KAAKsD,eAAL,EAZH,CAFF,CADF,CADF,CADF,CAuBD,CApFH,QAsFUA,eAtFV,GAsFE,2BAAuC,+CACkC,KAAKrC,KADvC,CAC7BsC,KAD6B,gBAC7BA,KAD6B,CACtBP,eADsB,gBACtBA,eADsB,CACL9B,QADK,gBACLA,QADK,CACKsC,gBADL,gBACKA,gBADL,CACuBC,MADvB,gBACuBA,MADvB,CAGrC,oBACE,oBAAC,MAAD,IACE,QAAQ,EAAE,UADZ,EAEE,YAAS,gBAFX,EAGE,SAAS,EAAE3E,EAAE,gBACVO,MAAM,CAACqE,IAAP,EADU,IACM,IADN,OAHf,EAME,QAAQ,EAAErF,YAAY,CAACsF,IANzB,EAOE,qBAAqB,MAPvB,EAQE,KAAK,EAAE,EACLJ,KAAK,EAAEA,KAAK,KAAKP,eAAe,GAAG,GAAH,GAAS,GAA7B,CADP,EAELY,KAAK,EAAE1C,QAAQ,GAAG,MAAH,GAAYuC,MAFtB,EAGLI,IAAI,EAAE3C,QAAQ,GAAGuC,MAAH,GAAY,MAHrB,EART,EAaE,UAAU,EAAE,KAAKzD,OAbnB,iBAeE,oBAAC,SAAD,IAAW,QAAQ,EAAEwD,gBAAgB,IAAI,CAACR,eAA1C,EAA2D,SAAS,EAAE,KAAtE,EAA6E,SAAS,EAAE3D,MAAM,CAACyE,SAAP,EAAxF,iBACE,oBAAC,WAAD,IAAa,cAAc,EAAE,KAAKlC,kBAAlC,EAAsD,MAAM,MAA5D,iBACE,6BACE,YAAS,qBADX,EAEE,SAAS,EAAE9C,EAAE,CAACO,MAAM,CAAC0E,OAAP,CAAe,KAAKnE,KAApB,CAAD,mBACVP,MAAM,CAAC2E,WAAP,EADU,IACa9C,QADb,OAEV7B,MAAM,CAAC4E,iBAAP,EAFU,IAEmB,KAAKzE,KAAL,CAAW6B,SAAX,IAAwBH,QAF3C,OAGV7B,MAAM,CAAC6E,kBAAP,EAHU,IAGoB,KAAK1E,KAAL,CAAW6B,SAAX,IAAwB,CAACH,QAH7C,OAIV7B,MAAM,CAAC8E,MAAP,CAAc,KAAKvE,KAAnB,CAJU,IAIkB,KAAKJ,KAAL,CAAW+B,SAJ7B,QAFf,EAQE,GAAG,EAAE,aAAC6C,CAAD,UAAQ,MAAI,CAACtE,SAAL,GAAiBsE,CAAzB,EARP,iBAUE,oBAAC,eAAD,CAAiB,QAAjB,IAA0B,KAAK,EAAE,KAAKhE,uBAAL,EAAjC,IACG,KAAKa,KAAL,CAAWoD,QADd,CAVF,CADF,CADF,CAfF,CADF,CAoCD,CA7HH,QAqJUnB,YArJV,GAqJE,wBAAoC,UAClC,oBACE,oBAAC,MAAD,IAAQ,QAAQ,EAAE,UAAlB,EAA8B,SAAS,EAAE7D,MAAM,CAACiF,OAAP,EAAzC,EAA2D,QAAQ,EAAEjG,YAAY,CAACsF,IAAlF,iBACE,oBAAC,sBAAD,IAAwB,GAAG,EAAC,MAA5B,GADF,eAEE,6BACE,GAAG,EAAC,SADN,EAEE,SAAS,EAAE7E,EAAE,kBACVO,MAAM,CAACkF,UAAP,EADU,IACY,IADZ,OAEVlF,MAAM,CAACmF,cAAP,CAAsB,KAAK5E,KAA3B,CAFU,IAE0B,KAAKJ,KAAL,CAAWgC,aAFrC,QAFf,GAFF,CADF,CAYD,CAlKH,QAoKU2B,kBApKV,GAoKE,8BAAqD,CACnD,IAAMsB,UAAU,GAAG,KAAKxD,KAAL,CAAWC,QAAX,GAAsB7B,MAAM,CAACqF,eAA7B,GAA+CrF,MAAM,CAACsF,cAAzE,CAEA,OAAO,EACLvB,KAAK,EAAEqB,UAAU,EADZ,EAELG,WAAW,EAAEvF,MAAM,CAACwF,gBAAP,EAFR,EAGLxB,IAAI,EAAEhE,MAAM,CAACyF,eAAP,EAHD,EAILC,UAAU,EAAE1F,MAAM,CAAC2F,qBAAP,EAJP,EAKLC,MAAM,EAAER,UAAU,EALb,EAMLS,YAAY,EAAE7F,MAAM,CAACwF,gBAAP,EANT,EAAP,CAQD,CA/KH,mBAA8B5G,KAAK,CAACkH,SAApC,EAAa5F,Q,CACG6F,mB,GAAsB,U,CADzB7F,Q,CAGG8F,M,GAASjG,c,CAHZG,Q,CAIG+F,I,GAAOtG,Y,CAJVO,Q,CAKGgG,M,GAASpG,c,CALZI,Q,CAMGiG,S,GAAYvG,iB,CANfM,Q,CAyCGkG,Y,GAAe,EAC3BxC,iBAAiB,EAAElE,SADQ,EAE3ByE,gBAAgB,EAAE,IAFS,EAG3BC,MAAM,EAAE,CAHmB,E","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\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 { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layoutRef: HTMLElement | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    if (this.footer) {\n      this.footer.update();\n    }\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            {blockBackground && this.renderShadow()}\n            <CSSTransition\n              in\n              classNames={this.getTransitionNames()}\n              appear={!disableAnimations}\n              enter={!disableAnimations}\n              exit={false}\n              timeout={{\n                enter: TRANSITION_TIMEOUT,\n                exit: TRANSITION_TIMEOUT,\n              }}\n              nodeRef={this.rootRef}\n            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{\n          width: width || (blockBackground ? 800 : 500),\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={(_) => (this.layoutRef = _)}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layoutRef) {\n      return 'auto';\n    }\n    return this.layoutRef.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","isTestEnv","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","rootRef","createRef","updateLayout","update","disablePageScroll","e","layout","reachedTop","scrollTop","deltaY","reachedBottom","scrollHeight","offsetHeight","props","blockBackground","preventDefault","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","current","passive","add","componentWillUnmount","removeEventListener","remove","render","renderMain","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","root","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","_","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\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 { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layoutRef: HTMLElement | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.rootRef.current?.addEventListener('wheel', this.disablePageScroll, { passive: false });\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    this.rootRef.current?.removeEventListener('wheel', this.disablePageScroll);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    if (this.footer) {\n      this.footer.update();\n    }\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            {blockBackground && this.renderShadow()}\n            <CSSTransition\n              in\n              classNames={this.getTransitionNames()}\n              appear={!disableAnimations}\n              enter={!disableAnimations}\n              exit={false}\n              timeout={{\n                enter: TRANSITION_TIMEOUT,\n                exit: TRANSITION_TIMEOUT,\n              }}\n              nodeRef={this.rootRef}\n            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{\n          width: width || (blockBackground ? 800 : 500),\n          right: fromLeft ? 'auto' : offset,\n          left: fromLeft ? offset : 'auto',\n        }}\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={(_) => (this.layoutRef = _)}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private disablePageScroll = (e: WheelEvent) => {\n    const layout = this.layoutRef;\n    if (!layout) return;\n    const reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;\n    const reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;\n\n    if (!this.props.blockBackground && (reachedTop || reachedBottom)) {\n      e.preventDefault();\n    }\n  };\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layoutRef) {\n      return 'auto';\n    }\n    return this.layoutRef.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}

package/components/SidePage/SidePage.d.ts

@@ -90,6 +90,7 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     render(): JSX.Element;
     private renderMain;
     private renderContainer;
+    private disablePageScroll;
     private getSidePageContextProps;
     private getWidth;
     private renderShadow;

package/components/Spinner/Spinner/Spinner.js

@@ -34,11 +34,14 @@ var Spinner = (_dec = locale('Spinner', SpinnerLocaleHelper), rootNode(_class =
     _this.setRootNode = void 0;
 
     _this.renderSpinner = function (type, dimmed) {
-      var circleClassName = dimmed ? styles.circleDimmed(_this.theme) : styles.circle(_this.theme);
+      var _cx;
+
       return /*#__PURE__*/React.createElement(SpinnerIcon, {
         size: type,
-        className: circleClassName,
-        dimmed: dimmed
+        className: cx((_cx = {}, _cx[styles.circle(_this.theme)] = !dimmed && !_this.props.color, _cx[styles.circleDimmedColor(_this.theme)] = dimmed, _cx[styles.circleWithoutColorAnimation(_this.theme)] = dimmed || !!_this.props.color, _cx)),
+        dimmed: dimmed,
+        width: _this.props.width,
+        color: _this.props.color
       });
     };
 

package/components/Spinner/Spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","props","theme","setRootNode","renderSpinner","type","dimmed","circleClassName","circleDimmed","circle","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\n  /**\n   * Тип спиннера\n   * @default normal\n   */\n  type: SpinnerType;\n}\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: SpinnerProps) {\n    super(props);\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 renderMain() {\n    const { type, caption = this.locale.loading, dimmed } = this.props;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\n    const circleClassName = dimmed ? styles.circleDimmed(this.theme) : styles.circle(this.theme);\n\n    return <SpinnerIcon size={type} className={circleClassName} dimmed={dimmed} />;\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}
+{"version":3,"sources":["Spinner.tsx"],"names":["React","PropTypes","locale","ThemeContext","SpinnerIcon","CommonWrapper","cx","rootNode","styles","SpinnerLocaleHelper","types","big","mini","normal","Spinner","props","theme","setRootNode","renderSpinner","type","dimmed","circle","color","circleDimmedColor","circleWithoutColorAnimation","width","renderCaption","caption","captionColor","render","renderMain","loading","spinner","inner","Component","__KONTUR_REACT_UI__","propTypes","node","bool","oneOf","Object","keys","defaultProps","Types"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { SpinnerIcon } from '../../internal/icons/SpinnerIcon';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Spinner.styles';\nimport { SpinnerLocale, SpinnerLocaleHelper } from './locale';\n\nconst types: Record<SpinnerType, SpinnerType> = {\n  big: 'big',\n  mini: 'mini',\n  normal: 'normal',\n};\n\nexport type SpinnerType = 'mini' | 'normal' | 'big';\n\nexport interface SpinnerProps extends CommonProps {\n  caption?: React.ReactNode;\n  dimmed?: boolean;\n  /**\n   * Тип спиннера\n   * @default normal\n   */\n  type: SpinnerType;\n  /**\n   * Толщина спиннера\n   */\n  width?: number;\n  /**\n   * Цвет спиннера\n   */\n  color?: React.CSSProperties['color'];\n}\n\n/**\n * DRAFT - инлайн-лоадер\n */\n\n@rootNode\n@locale('Spinner', SpinnerLocaleHelper)\nexport class Spinner extends React.Component<SpinnerProps> {\n  public static __KONTUR_REACT_UI__ = 'Spinner';\n\n  public static propTypes = {\n    /**\n     * Текст рядом с мини-лоадером.\n     *\n     * 'Загрузка' - значение по-умолчанию\n     */\n    caption: PropTypes.node,\n\n    dimmed: PropTypes.bool,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * Значение по-умолчанию - normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(types)),\n  };\n\n  public static defaultProps: SpinnerProps = {\n    type: 'normal',\n  };\n\n  public static Types: typeof types = types;\n  private theme!: Theme;\n  private readonly locale!: SpinnerLocale;\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: SpinnerProps) {\n    super(props);\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 renderMain() {\n    const { type, caption = this.locale.loading, dimmed } = this.props;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.spinner()}>\n          <span className={styles.inner()}>{this.renderSpinner(type, dimmed)}</span>\n          {caption && this.renderCaption(type, caption)}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderSpinner = (type: SpinnerType, dimmed?: boolean) => {\n    return (\n      <SpinnerIcon\n        size={type}\n        className={cx({\n          [styles.circle(this.theme)]: !dimmed && !this.props.color,\n          [styles.circleDimmedColor(this.theme)]: dimmed,\n          [styles.circleWithoutColorAnimation(this.theme)]: dimmed || !!this.props.color,\n        })}\n        dimmed={dimmed}\n        width={this.props.width}\n        color={this.props.color}\n      />\n    );\n  };\n\n  private renderCaption = (type: SpinnerType, caption: React.ReactNode) => (\n    <span className={cx(styles[type](this.theme), styles.captionColor(this.theme))}>{caption}</span>\n  );\n}\n"]}

package/components/Spinner/Spinner.d.ts

@@ -11,6 +11,14 @@ export interface SpinnerProps extends CommonProps {
      * @default normal
      */
     type: SpinnerType;
+    /**
+     * Толщина спиннера
+     */
+    width?: number;
+    /**
+     * Цвет спиннера
+     */
+    color?: React.CSSProperties['color'];
 }
 /**
  * DRAFT - инлайн-лоадер

package/components/Spinner/Spinner.md

@@ -14,6 +14,7 @@ const reactNodeCaption = (
   <Spinner type="mini" caption="mini" />
   <Spinner type="mini" dimmed caption="mini dimmed" />
   <Spinner type="big" caption={reactNodeCaption} />
+  <Spinner type="big" caption="custom" width={8} color={'#538A1B'}/>
 </Gapped>;
 ```
 

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { AnimationKeyframes } from "../../../lib/theming/AnimationKeyframes";
@@ -9,25 +9,28 @@ export var styles = memoizeStyle({
   circle: function circle(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite,\n            " + AnimationKeyframes.spinnerColor(t) + " 6s ease-in-out infinite;\n        ");
   },
-  circleDimmed: function circleDimmed(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n\n      ", "\n    "])), t.spinnerDimmedColor, !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite;\n        ");
+  circleDimmedColor: function circleDimmedColor(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      stroke: ", ";\n    "])), t.spinnerDimmedColor);
+  },
+  circleWithoutColorAnimation: function circleWithoutColorAnimation(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), !isIE11 && "\n          animation: " + AnimationKeyframes.spinnerCircleOffset(t) + " 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          " + AnimationKeyframes.spinnerCircleLength(t) + " 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          " + AnimationKeyframes.spinnerCircleRotate(t) + " 2s linear infinite;\n        ");
   },
   captionColor: function captionColor(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.spinnerCaptionColor);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.spinnerCaptionColor);
   },
   mini: function mini(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.spinnerCaptionGapSmall, t.spinnerFontSizeSmall, t.spinnerLineHeightSmall);
   },
   normal: function normal(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeMedium, t.spinnerLineHeightMedium, t.spinnerCaptionGapMedium);
   },
   big: function big(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: block;\n      font-size: ", ";\n      line-height: ", ";\n      margin-top: ", ";\n    "])), t.spinnerFontSizeLarge, t.spinnerLineHeightLarge, t.spinnerCaptionGapLarge);
   },
   spinner: function spinner() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      text-align: center;\n    "])));
   },
   inner: function inner() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.styles.ts"],"names":["css","memoizeStyle","AnimationKeyframes","isIE11","styles","circle","t","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmed","spinnerDimmedColor","captionColor","spinnerCaptionColor","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","spinner","inner"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,kBAAT,QAAmC,sCAAnC;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;AACjCI,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACC,YADd;;AAGI,KAACJ,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGMJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHN;AAIMJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJN;AAKMJ,IAAAA,kBAAkB,CAACK,YAAnB,CAAgCD,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCK,EAAAA,YAdiC,wBAcpBL,CAdoB,EAcV;AACrB,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACM,kBADd;;AAGI,KAACT,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGIJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHJ;AAIIJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJJ,mCAHJ;;;AAUD,GAzBgC;;AA2BjCO,EAAAA,YA3BiC,wBA2BpBP,CA3BoB,EA2BV;AACrB,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACQ,mBADb;;AAGD,GA/BgC;;AAiCjCC,EAAAA,IAjCiC,gBAiC5BT,CAjC4B,EAiClB;AACb,WAAON,GAAP;AACiBM,IAAAA,CAAC,CAACU,sBADnB;AAEeV,IAAAA,CAAC,CAACW,oBAFjB;AAGiBX,IAAAA,CAAC,CAACY,sBAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,MAzCiC,kBAyC1Bb,CAzC0B,EAyChB;AACf,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACc,qBAFjB;AAGiBd,IAAAA,CAAC,CAACe,uBAHnB;AAIgBf,IAAAA,CAAC,CAACgB,uBAJlB;;AAMD,GAhDgC;;AAkDjCC,EAAAA,GAlDiC,eAkD7BjB,CAlD6B,EAkDnB;AACZ,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACkB,oBAFjB;AAGiBlB,IAAAA,CAAC,CAACmB,sBAHnB;AAIgBnB,IAAAA,CAAC,CAACoB,sBAJlB;;AAMD,GAzDgC;;AA2DjCC,EAAAA,OA3DiC,qBA2DvB;AACR,WAAO3B,GAAP;;;;AAID,GAhEgC;;AAkEjC4B,EAAAA,KAlEiC,mBAkEzB;AACN,WAAO5B,GAAP;;;AAGD,GAtEgC,EAAD,CAA3B","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(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate(t)} 2s linear infinite,\n            ${AnimationKeyframes.spinnerColor(t)} 6s ease-in-out infinite;\n        `}\n    `;\n  },\n  circleDimmed(t: Theme) {\n    return css`\n      stroke: ${t.spinnerDimmedColor};\n\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate(t)} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\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    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Spinner.styles.ts"],"names":["css","memoizeStyle","AnimationKeyframes","isIE11","styles","circle","t","spinnerColor","spinnerCircleOffset","spinnerCircleLength","spinnerCircleRotate","circleDimmedColor","spinnerDimmedColor","circleWithoutColorAnimation","captionColor","spinnerCaptionColor","mini","spinnerCaptionGapSmall","spinnerFontSizeSmall","spinnerLineHeightSmall","normal","spinnerFontSizeMedium","spinnerLineHeightMedium","spinnerCaptionGapMedium","big","spinnerFontSizeLarge","spinnerLineHeightLarge","spinnerCaptionGapLarge","spinner","inner"],"mappings":"oQAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,SAASC,kBAAT,QAAmC,sCAAnC;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,OAAO,IAAMC,MAAM,GAAGH,YAAY,CAAC;AACjCI,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACC,YADd;;AAGI,KAACJ,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGMJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHN;AAIMJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJN;AAKMJ,IAAAA,kBAAkB,CAACK,YAAnB,CAAgCD,CAAhC,CALN,wCAHJ;;;AAWD,GAbgC;AAcjCK,EAAAA,iBAdiC,6BAcfL,CAde,EAcL;AAC1B,WAAON,GAAP;AACYM,IAAAA,CAAC,CAACM,kBADd;;AAGD,GAlBgC;AAmBjCC,EAAAA,2BAnBiC,uCAmBLP,CAnBK,EAmBK;AACpC,WAAON,GAAP;AACI,KAACG,MAAD;;AAEeD,IAAAA,kBAAkB,CAACM,mBAAnB,CAAuCF,CAAvC,CAFf;AAGIJ,IAAAA,kBAAkB,CAACO,mBAAnB,CAAuCH,CAAvC,CAHJ;AAIIJ,IAAAA,kBAAkB,CAACQ,mBAAnB,CAAuCJ,CAAvC,CAJJ,mCADJ;;;AAQD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBR,CA9BoB,EA8BV;AACrB,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACS,mBADb;;AAGD,GAlCgC;;AAoCjCC,EAAAA,IApCiC,gBAoC5BV,CApC4B,EAoClB;AACb,WAAON,GAAP;AACiBM,IAAAA,CAAC,CAACW,sBADnB;AAEeX,IAAAA,CAAC,CAACY,oBAFjB;AAGiBZ,IAAAA,CAAC,CAACa,sBAHnB;;AAKD,GA1CgC;;AA4CjCC,EAAAA,MA5CiC,kBA4C1Bd,CA5C0B,EA4ChB;AACf,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACe,qBAFjB;AAGiBf,IAAAA,CAAC,CAACgB,uBAHnB;AAIgBhB,IAAAA,CAAC,CAACiB,uBAJlB;;AAMD,GAnDgC;;AAqDjCC,EAAAA,GArDiC,eAqD7BlB,CArD6B,EAqDnB;AACZ,WAAON,GAAP;;AAEeM,IAAAA,CAAC,CAACmB,oBAFjB;AAGiBnB,IAAAA,CAAC,CAACoB,sBAHnB;AAIgBpB,IAAAA,CAAC,CAACqB,sBAJlB;;AAMD,GA5DgC;;AA8DjCC,EAAAA,OA9DiC,qBA8DvB;AACR,WAAO5B,GAAP;;;;AAID,GAnEgC;;AAqEjC6B,EAAAA,KArEiC,mBAqEzB;AACN,WAAO7B,GAAP;;;AAGD,GAzEgC,EAAD,CAA3B","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(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n            ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n            ${AnimationKeyframes.spinnerCircleRotate(t)} 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(t: Theme) {\n    return css`\n      ${!isIE11 &&\n      `\n          animation: ${AnimationKeyframes.spinnerCircleOffset(t)} 1s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite,\n          ${AnimationKeyframes.spinnerCircleLength(t)} 2s cubic-bezier(0.36, 0.14, 0.38, 0.69) infinite,\n          ${AnimationKeyframes.spinnerCircleRotate(t)} 2s linear infinite;\n        `}\n    `;\n  },\n\n  captionColor(t: Theme) {\n    return css`\n      color: ${t.spinnerCaptionColor};\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    `;\n  },\n\n  inner() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

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

@@ -1,7 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     circle(t: Theme): string;
-    circleDimmed(t: Theme): string;
+    circleDimmedColor(t: Theme): string;
+    circleWithoutColorAnimation(t: Theme): string;
     captionColor(t: Theme): string;
     mini(t: Theme): string;
     normal(t: Theme): string;

package/components/Switcher/Switcher.styles/Switcher.styles.js

@@ -23,6 +23,8 @@ export var styles = memoizeStyle({
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherLabelGapLarge, t.switcherLabelFontSizeLarge, t.switcherLabelLineHeightLarge);
   },
   error: function error(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.switcherOutlineWidth, t.borderColorError);
+    var insideWidth = parseInt(t.btnBorderWidth);
+    var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n    "])), insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
   }
 });

package/components/Switcher/Switcher.styles/Switcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","t","switcherTextColor","labelSmall","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,iBAiB3BC,CAjB2B,EAiBjB;AACd,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GAvBgC;;AAyBjCC,EAAAA,UAzBiC,sBAyBtBF,CAzBsB,EAyBZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACG,qBADpB;AAEeH,IAAAA,CAAC,CAACI,0BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,4BAHnB;;AAKD,GA/BgC;;AAiCjCC,EAAAA,WAjCiC,uBAiCrBN,CAjCqB,EAiCX;AACpB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACO,sBADpB;AAEeP,IAAAA,CAAC,CAACQ,2BAFjB;AAGiBR,IAAAA,CAAC,CAACS,6BAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBV,CAzCsB,EAyCZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACW,qBADpB;AAEeX,IAAAA,CAAC,CAACY,0BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,4BAHnB;;AAKD,GA/CgC;;AAiDjCC,EAAAA,KAjDiC,iBAiD3Bd,CAjD2B,EAiDjB;AACd,WAAON,GAAP;;AAEsBM,IAAAA,CAAC,CAACe,oBAFxB,EAEgDf,CAAC,CAACgB,gBAFlD;;AAID,GAtDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  label(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  labelSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapSmall};\n      font-size: ${t.switcherLabelFontSizeSmall};\n      line-height: ${t.switcherLabelLineHeightSmall};\n    `;\n  },\n\n  labelMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapMedium};\n      font-size: ${t.switcherLabelFontSizeMedium};\n      line-height: ${t.switcherLabelLineHeightMedium};\n    `;\n  },\n\n  labelLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapLarge};\n      font-size: ${t.switcherLabelFontSizeLarge};\n      line-height: ${t.switcherLabelLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-radius: 2px;\n      box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","wrap","input","label","t","switcherTextColor","labelSmall","switcherLabelGapSmall","switcherLabelFontSizeSmall","switcherLabelLineHeightSmall","labelMedium","switcherLabelGapMedium","switcherLabelFontSizeMedium","switcherLabelLineHeightMedium","labelLarge","switcherLabelGapLarge","switcherLabelFontSizeLarge","switcherLabelLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","borderColorError"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,mBAQzB;AACN,WAAOJ,GAAP;;;;;;AAMD,GAfgC;;AAiBjCK,EAAAA,KAjBiC,iBAiB3BC,CAjB2B,EAiBjB;AACd,WAAON,GAAP;AACWM,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GAvBgC;;AAyBjCC,EAAAA,UAzBiC,sBAyBtBF,CAzBsB,EAyBZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACG,qBADpB;AAEeH,IAAAA,CAAC,CAACI,0BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,4BAHnB;;AAKD,GA/BgC;;AAiCjCC,EAAAA,WAjCiC,uBAiCrBN,CAjCqB,EAiCX;AACpB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACO,sBADpB;AAEeP,IAAAA,CAAC,CAACQ,2BAFjB;AAGiBR,IAAAA,CAAC,CAACS,6BAHnB;;AAKD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBV,CAzCsB,EAyCZ;AACnB,WAAON,GAAP;AACkBM,IAAAA,CAAC,CAACW,qBADpB;AAEeX,IAAAA,CAAC,CAACY,0BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,4BAHnB;;AAKD,GA/CgC;;AAiDjCC,EAAAA,KAjDiC,iBAiD3Bd,CAjD2B,EAiDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,WAAOrB,GAAP;;AAE4BqB,IAAAA,WAF5B,EAE6Cf,CAAC,CAACoB,gBAF/C,EAE0EF,YAF1E,EAE0FlB,CAAC,CAACoB,gBAF5F;;AAID,GAxDgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  label(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  labelSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapSmall};\n      font-size: ${t.switcherLabelFontSizeSmall};\n      line-height: ${t.switcherLabelLineHeightSmall};\n    `;\n  },\n\n  labelMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapMedium};\n      font-size: ${t.switcherLabelFontSizeMedium};\n      line-height: ${t.switcherLabelLineHeightMedium};\n    `;\n  },\n\n  labelLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherLabelGapLarge};\n      font-size: ${t.switcherLabelFontSizeLarge};\n      line-height: ${t.switcherLabelLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: 2px;\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/components/Token/Token.md

@@ -1,112 +1,112 @@
-Token example
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-
-<Token>Example</Token>;
-```
-
-You can control color of each token
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-const colors = {
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-  gray: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  blue: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  green: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  yellow: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  red: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  mono: {
-    idle: 'white',
-    active: 'black',
-  },
-};
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token colors={colors.default}>Default</Token>
-    <Token isActive colors={colors.default}>
-      Default
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.gray}>Gray</Token>
-    <Token isActive colors={colors.gray}>
-      Gray
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.blue}>Blue</Token>
-    <Token isActive colors={colors.blue}>
-      Blue
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.green}>Green</Token>
-    <Token isActive colors={colors.green}>
-      Green
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.yellow}>Yellow</Token>
-    <Token isActive colors={colors.yellow}>
-      Yellow
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.red}>Red</Token>
-    <Token isActive colors={colors.red}>
-      Red
-    </Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token colors={colors.mono}>Monochrome</Token>
-    <Token isActive colors={colors.mono}>
-      Monochrome
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-Can accept validation state
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>;
-```
+Token example
+
+```jsx harmony
+import { Token } from '@skbkontur/react-ui';
+
+<Token>Example</Token>;
+```
+
+You can control color of each token
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+const colors = {
+  default: {
+    idle: 'defaultIdle',
+    active: 'defaultActive',
+  },
+  gray: {
+    idle: 'grayIdle',
+    active: 'grayActive',
+  },
+  blue: {
+    idle: 'blueIdle',
+    active: 'blueActive',
+  },
+  green: {
+    idle: 'greenIdle',
+    active: 'greenActive',
+  },
+  yellow: {
+    idle: 'yellowIdle',
+    active: 'yellowActive',
+  },
+  red: {
+    idle: 'redIdle',
+    active: 'redActive',
+  },
+  mono: {
+    idle: 'white',
+    active: 'black',
+  },
+};
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token colors={colors.default}>Default</Token>
+    <Token isActive colors={colors.default}>
+      Default
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.gray}>Gray</Token>
+    <Token isActive colors={colors.gray}>
+      Gray
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.blue}>Blue</Token>
+    <Token isActive colors={colors.blue}>
+      Blue
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.green}>Green</Token>
+    <Token isActive colors={colors.green}>
+      Green
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.yellow}>Yellow</Token>
+    <Token isActive colors={colors.yellow}>
+      Yellow
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.red}>Red</Token>
+    <Token isActive colors={colors.red}>
+      Red
+    </Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token colors={colors.mono}>Monochrome</Token>
+    <Token isActive colors={colors.mono}>
+      Monochrome
+    </Token>
+  </Gapped>
+</Gapped>;
+```
+
+Can accept validation state
+
+```jsx harmony
+import { Gapped, Token } from '@skbkontur/react-ui';
+
+<Gapped gap={20} vertical>
+  <Gapped gap={10}>
+    <Token>Correct</Token>
+    <Token warning>Warned</Token>
+    <Token error>Errored</Token>
+  </Gapped>
+  <Gapped gap={10}>
+    <Token isActive>Correct</Token>
+    <Token isActive warning>
+      Warned
+    </Token>
+    <Token isActive error>
+      Errored
+    </Token>
+  </Gapped>
+</Gapped>;
+```

package/components/Tooltip/Tooltip/Tooltip.js

@@ -8,7 +8,7 @@ import React from 'react';
 import warning from 'warning';
 import isEqual from 'lodash.isequal';
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
-import { Popup } from "../../../internal/Popup";
+import { DefaultPosition, Popup } from "../../../internal/Popup";
 import { RenderLayer } from "../../../internal/RenderLayer";
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { containsTargetOrRenderContainer } from "../../../lib/listenFocusOutside";
@@ -403,7 +403,7 @@ export var Tooltip = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     warning(!(Array.isArray(children) && props.useWrapper === false), "[" + componentName + "]: you provided multiple children, but useWrapper={false} - forcing wrapper <span/> for positioning to work correctly");
   }
 }, _class2.defaultProps = {
-  pos: 'top left',
+  pos: DefaultPosition,
   trigger: 'hover',
   allowedPositions: Positions,
   disableAnimations: isTestEnv,