@skbkontur/react-ui 3.8.4-adaptive.1 → 3.9.0

package/components/Select/Select.styles/Select.styles.js

@@ -1,52 +1,49 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root() {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: relative;\n    "])));
   },
-  rootMobile: function rootMobile(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.selectRootWidthMobile);
-  },
   placeholder: function placeholder(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      text-overflow: ellipsis;\n    "])), t.selectPlaceholderColor);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      text-overflow: ellipsis;\n    "])), t.selectPlaceholderColor);
   },
   placeholderDisabled: function placeholderDisabled(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.selectPlaceholderColorDisabled);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.selectPlaceholderColorDisabled);
   },
   customUsePlaceholder: function customUsePlaceholder() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n      opacity: 0.7;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n      opacity: 0.7;\n    "])));
   },
   arrowWrap: function arrowWrap(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      flex-shrink: 0;\n    "])), t.selectMenuArrowColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      flex-shrink: 0;\n    "])), t.selectMenuArrowColor);
   },
   arrowDisabled: function arrowDisabled(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.selectMenuArrowColorDisabled);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.selectMenuArrowColorDisabled);
   },
   customUseArrow: function customUseArrow() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n      opacity: 0.7;\n    "])));
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n      opacity: 0.7;\n    "])));
   },
   label: function label() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    "])));
   },
   search: function search() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      margin: 1px 4px 4px;\n    "])));
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin: 1px 4px 4px;\n    "])));
   },
   leftIconSmall: function leftIconSmall(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapSmall, t.btnIconSizeSmall);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapSmall, t.btnIconSizeSmall);
   },
   leftIconMedium: function leftIconMedium(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapMedium, t.btnIconSizeMedium);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapMedium, t.btnIconSizeMedium);
   },
   leftIconLarge: function leftIconLarge(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapLarge, t.btnIconSizeLarge);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n      width: ", ";\n    "])), t.selectIconGapLarge, t.btnIconSizeLarge);
   },
   leftIconLink: function leftIconLink(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n    "])), t.btnLinkIconMarginRight);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-right: ", ";\n    "])), t.btnLinkIconMarginRight);
   },
   selectButtonContainer: function selectButtonContainer() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    "])));
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    "])));
   }
 });

package/components/Select/Select.styles/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.styles.ts"],"names":["css","memoizeStyle","styles","root","rootMobile","t","selectRootWidthMobile","placeholder","selectPlaceholderColor","placeholderDisabled","selectPlaceholderColorDisabled","customUsePlaceholder","arrowWrap","selectMenuArrowColor","arrowDisabled","selectMenuArrowColorDisabled","customUseArrow","label","search","leftIconSmall","selectIconGapSmall","btnIconSizeSmall","leftIconMedium","selectIconGapMedium","btnIconSizeMedium","leftIconLarge","selectIconGapLarge","btnIconSizeLarge","leftIconLink","btnLinkIconMarginRight","selectButtonContainer"],"mappings":"sXAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,UARiC,sBAQtBC,CARsB,EAQZ;AACnB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,qBADb;;AAGD,GAZgC;;AAcjCC,EAAAA,WAdiC,uBAcrBF,CAdqB,EAcX;AACpB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACG,sBADb;;;AAID,GAnBgC;;AAqBjCC,EAAAA,mBArBiC,+BAqBbJ,CArBa,EAqBH;AAC5B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACK,8BADb;;AAGD,GAzBgC;;AA2BjCC,EAAAA,oBA3BiC,kCA2BV;AACrB,WAAOX,GAAP;;;;AAID,GAhCgC;;AAkCjCY,EAAAA,SAlCiC,qBAkCvBP,CAlCuB,EAkCb;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACQ,oBADb;;;AAID,GAvCgC;;AAyCjCC,EAAAA,aAzCiC,yBAyCnBT,CAzCmB,EAyCT;AACtB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACU,4BADb;;AAGD,GA7CgC;;AA+CjCC,EAAAA,cA/CiC,4BA+ChB;AACf,WAAOhB,GAAP;;;;AAID,GApDgC;;AAsDjCiB,EAAAA,KAtDiC,mBAsDzB;AACN,WAAOjB,GAAP;;;;;;AAMD,GA7DgC;;AA+DjCkB,EAAAA,MA/DiC,oBA+DxB;AACP,WAAOlB,GAAP;;;AAGD,GAnEgC;;AAqEjCmB,EAAAA,aArEiC,yBAqEnBd,CArEmB,EAqET;AACtB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACe,kBADrB;AAEWf,IAAAA,CAAC,CAACgB,gBAFb;;AAID,GA1EgC;;AA4EjCC,EAAAA,cA5EiC,0BA4ElBjB,CA5EkB,EA4ER;AACvB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACkB,mBADrB;AAEWlB,IAAAA,CAAC,CAACmB,iBAFb;;AAID,GAjFgC;;AAmFjCC,EAAAA,aAnFiC,yBAmFnBpB,CAnFmB,EAmFT;AACtB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACqB,kBADrB;AAEWrB,IAAAA,CAAC,CAACsB,gBAFb;;AAID,GAxFgC;;AA0FjCC,EAAAA,YA1FiC,wBA0FpBvB,CA1FoB,EA0FV;AACrB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACwB,sBADrB;;AAGD,GA9FgC;;AAgGjCC,EAAAA,qBAhGiC,mCAgGT;AACtB,WAAO9B,GAAP;;;;;AAKD,GAtGgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      width: ${t.selectRootWidthMobile};\n    `;\n  },\n\n  placeholder(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColor};\n      text-overflow: ellipsis;\n    `;\n  },\n\n  placeholderDisabled(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColorDisabled};\n    `;\n  },\n\n  customUsePlaceholder() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  arrowWrap(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColor};\n      flex-shrink: 0;\n    `;\n  },\n\n  arrowDisabled(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColorDisabled};\n    `;\n  },\n\n  customUseArrow() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  label() {\n    return css`\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    `;\n  },\n\n  search() {\n    return css`\n      margin: 1px 4px 4px;\n    `;\n  },\n\n  leftIconSmall(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  leftIconMedium(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  leftIconLarge(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  leftIconLink(t: Theme) {\n    return css`\n      padding-right: ${t.btnLinkIconMarginRight};\n    `;\n  },\n\n  selectButtonContainer() {\n    return css`\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Select.styles.ts"],"names":["css","memoizeStyle","styles","root","placeholder","t","selectPlaceholderColor","placeholderDisabled","selectPlaceholderColorDisabled","customUsePlaceholder","arrowWrap","selectMenuArrowColor","arrowDisabled","selectMenuArrowColorDisabled","customUseArrow","label","search","leftIconSmall","selectIconGapSmall","btnIconSizeSmall","leftIconMedium","selectIconGapMedium","btnIconSizeMedium","leftIconLarge","selectIconGapLarge","btnIconSizeLarge","leftIconLink","btnLinkIconMarginRight","selectButtonContainer"],"mappings":"mWAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,WARiC,uBAQrBC,CARqB,EAQX;AACpB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,sBADb;;;AAID,GAbgC;;AAejCC,EAAAA,mBAfiC,+BAebF,CAfa,EAeH;AAC5B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACG,8BADb;;AAGD,GAnBgC;;AAqBjCC,EAAAA,oBArBiC,kCAqBV;AACrB,WAAOT,GAAP;;;;AAID,GA1BgC;;AA4BjCU,EAAAA,SA5BiC,qBA4BvBL,CA5BuB,EA4Bb;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACM,oBADb;;;AAID,GAjCgC;;AAmCjCC,EAAAA,aAnCiC,yBAmCnBP,CAnCmB,EAmCT;AACtB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACQ,4BADb;;AAGD,GAvCgC;;AAyCjCC,EAAAA,cAzCiC,4BAyChB;AACf,WAAOd,GAAP;;;;AAID,GA9CgC;;AAgDjCe,EAAAA,KAhDiC,mBAgDzB;AACN,WAAOf,GAAP;;;;;;AAMD,GAvDgC;;AAyDjCgB,EAAAA,MAzDiC,oBAyDxB;AACP,WAAOhB,GAAP;;;AAGD,GA7DgC;;AA+DjCiB,EAAAA,aA/DiC,yBA+DnBZ,CA/DmB,EA+DT;AACtB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACa,kBADrB;AAEWb,IAAAA,CAAC,CAACc,gBAFb;;AAID,GApEgC;;AAsEjCC,EAAAA,cAtEiC,0BAsElBf,CAtEkB,EAsER;AACvB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACgB,mBADrB;AAEWhB,IAAAA,CAAC,CAACiB,iBAFb;;AAID,GA3EgC;;AA6EjCC,EAAAA,aA7EiC,yBA6EnBlB,CA7EmB,EA6ET;AACtB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACmB,kBADrB;AAEWnB,IAAAA,CAAC,CAACoB,gBAFb;;AAID,GAlFgC;;AAoFjCC,EAAAA,YApFiC,wBAoFpBrB,CApFoB,EAoFV;AACrB,WAAOL,GAAP;AACmBK,IAAAA,CAAC,CAACsB,sBADrB;;AAGD,GAxFgC;;AA0FjCC,EAAAA,qBA1FiC,mCA0FT;AACtB,WAAO5B,GAAP;;;;;AAKD,GAhGgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n    `;\n  },\n\n  placeholder(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColor};\n      text-overflow: ellipsis;\n    `;\n  },\n\n  placeholderDisabled(t: Theme) {\n    return css`\n      color: ${t.selectPlaceholderColorDisabled};\n    `;\n  },\n\n  customUsePlaceholder() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  arrowWrap(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColor};\n      flex-shrink: 0;\n    `;\n  },\n\n  arrowDisabled(t: Theme) {\n    return css`\n      color: ${t.selectMenuArrowColorDisabled};\n    `;\n  },\n\n  customUseArrow() {\n    return css`\n      color: inherit;\n      opacity: 0.7;\n    `;\n  },\n\n  label() {\n    return css`\n      flex: 1 1 auto;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    `;\n  },\n\n  search() {\n    return css`\n      margin: 1px 4px 4px;\n    `;\n  },\n\n  leftIconSmall(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapSmall};\n      width: ${t.btnIconSizeSmall};\n    `;\n  },\n\n  leftIconMedium(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapMedium};\n      width: ${t.btnIconSizeMedium};\n    `;\n  },\n\n  leftIconLarge(t: Theme) {\n    return css`\n      padding-right: ${t.selectIconGapLarge};\n      width: ${t.btnIconSizeLarge};\n    `;\n  },\n\n  leftIconLink(t: Theme) {\n    return css`\n      padding-right: ${t.btnLinkIconMarginRight};\n    `;\n  },\n\n  selectButtonContainer() {\n    return css`\n      width: 100%;\n      display: inline-flex;\n      justify-content: space-between;\n    `;\n  },\n});\n"]}

package/components/Select/Select.styles.d.ts

@@ -1,18 +1,17 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(): string;
-    rootMobile(t: Theme): string;
-    placeholder(t: Theme): string;
-    placeholderDisabled(t: Theme): string;
-    customUsePlaceholder(): string;
-    arrowWrap(t: Theme): string;
-    arrowDisabled(t: Theme): string;
-    customUseArrow(): string;
-    label(): string;
-    search(): string;
-    leftIconSmall(t: Theme): string;
-    leftIconMedium(t: Theme): string;
-    leftIconLarge(t: Theme): string;
-    leftIconLink(t: Theme): string;
-    selectButtonContainer(): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
+    placeholder(t: Theme): string;
+    placeholderDisabled(t: Theme): string;
+    customUsePlaceholder(): string;
+    arrowWrap(t: Theme): string;
+    arrowDisabled(t: Theme): string;
+    customUseArrow(): string;
+    label(): string;
+    search(): string;
+    leftIconSmall(t: Theme): string;
+    leftIconMedium(t: Theme): string;
+    leftIconLarge(t: Theme): string;
+    leftIconLink(t: Theme): string;
+    selectButtonContainer(): string;
+};

package/components/Select/index.d.ts

@@ -1 +1 @@
-export * from './Select';
+export * from './Select';

package/components/Select/locale/index.d.ts

@@ -1,4 +1,4 @@
-import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
-import { SelectLocale } from './types';
-export * from './types';
-export declare const SelectLocaleHelper: LocaleHelper<SelectLocale>;
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { SelectLocale } from './types';
+export * from './types';
+export declare const SelectLocaleHelper: LocaleHelper<SelectLocale>;

package/components/Select/locale/locales/en.d.ts

@@ -1,2 +1,2 @@
-import { SelectLocale } from '../types';
-export declare const componentsLocales: SelectLocale;
+import { SelectLocale } from '../types';
+export declare const componentsLocales: SelectLocale;

package/components/Select/locale/locales/ru.d.ts

@@ -1,2 +1,2 @@
-import { SelectLocale } from '../types';
-export declare const componentsLocales: SelectLocale;
+import { SelectLocale } from '../types';
+export declare const componentsLocales: SelectLocale;

package/components/Select/locale/types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-export interface SelectLocale {
-    placeholder: React.ReactNode;
-}
+import React from 'react';
+export interface SelectLocale {
+    placeholder: React.ReactNode;
+}

package/components/Select/selectTheme.d.ts

@@ -1,3 +1,3 @@
-import { Theme } from '../../lib/theming/Theme';
-import { SelectProps } from './Select';
-export declare const getSelectTheme: (theme: Theme, props: SelectProps<any, any>) => Theme;
+import { Theme } from '../../lib/theming/Theme';
+import { SelectProps } from './Select';
+export declare const getSelectTheme: (theme: Theme, props: SelectProps<any, any>) => Theme;

package/components/SidePage/SidePage/SidePage.js

@@ -78,7 +78,7 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
         return 'auto';
       }
 
-      return _this.layoutRef.getBoundingClientRect().width;
+      return _this.layoutRef.clientWidth;
     };
 
     _this.handleStackChange = function (stack) {
@@ -235,24 +235,22 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       style: {
         width: width || (blockBackground ? 800 : 500)
       }
+    }, /*#__PURE__*/React.createElement(FocusLock, {
+      disabled: disableFocusLock || !blockBackground,
+      autoFocus: false,
+      className: styles.focusLock()
     }, /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.handleClickOutside,
       active: true
     }, /*#__PURE__*/React.createElement("div", {
       "data-tid": "SidePage__container",
-      className: cx(styles.wrapper(this.theme), (_cx2 = {}, _cx2[styles.shadow(this.theme)] = this.state.hasShadow, _cx2[styles.wrapperLeft()] = fromLeft, _cx2)),
-      style: this.getSidebarStyle()
-    }, /*#__PURE__*/React.createElement(FocusLock, {
-      disabled: disableFocusLock || !blockBackground,
-      autoFocus: false
-    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(styles.wrapper(this.theme), (_cx2 = {}, _cx2[styles.wrapperLeft()] = fromLeft, _cx2[styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[styles.shadow(this.theme)] = this.state.hasShadow, _cx2)),
       ref: function ref(_) {
         return _this3.layoutRef = _;
-      },
-      className: styles.layout()
+      }
     }, /*#__PURE__*/React.createElement(SidePageContext.Provider, {
       value: this.getSidePageContextProps()
-    }, this.props.children))))));
+    }, this.props.children)))));
   };
 
   _proto.renderShadow = function renderShadow() {
@@ -270,20 +268,6 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
     }));
   };
 
-  _proto.getSidebarStyle = function getSidebarStyle() {
-    var sidePageStyle = {};
-
-    if (this.state.hasMargin) {
-      if (this.props.fromLeft) {
-        sidePageStyle.marginLeft = 20;
-      } else {
-        sidePageStyle.marginRight = 20;
-      }
-    }
-
-    return sidePageStyle;
-  };
-
   _proto.getTransitionNames = function getTransitionNames() {
     var transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;
     return {

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","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","disableFocusLock","root","leftSide","Boolean","emit","wrapper","shadow","wrapperLeft","getSidebarStyle","_","layout","children","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","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;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,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;;;;;;;;;;;;;;;;;;;AAkCSC,IAAAA,YAlCT,GAkCwB,YAAY;AAChC,UAAI,MAAKD,MAAT,EAAiB;AACf,cAAKA,MAAL,CAAYE,MAAZ;AACD;AACF,KAtCH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuHUC,IAAAA,uBAvHV,GAuHoC,YAA2B;AAC3D,aAAO;AACLT,QAAAA,SAAS,EAAE,MAAKD,KAAL,CAAWC,SADjB;AAELC,QAAAA,SAAS,EAAE,MAAKF,KAAL,CAAWE,SAFjB;AAGLC,QAAAA,QAAQ,EAAE,MAAKH,KAAL,CAAWG,QAHhB;AAILQ,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,KApIH;;AAsIUJ,IAAAA,QAtIV,GAsIqB,YAAM;AACvB,UAAI,CAAC,MAAKN,SAAV,EAAqB;AACnB,eAAO,MAAP;AACD;AACD,aAAO,MAAKA,SAAL,CAAeW,qBAAf,GAAuCC,KAA9C;AACD,KA3IH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuLUC,IAAAA,iBAvLV,GAuL8B,UAACC,KAAD,EAA2C;AACrE,UAAMC,SAAS,GAAGD,KAAK,CAACE,MAAN,CAAa,UAACC,CAAD,UAAOA,CAAC,YAAYxB,QAAb,IAAyBwB,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,GAAG9C,UAAU,CAAC+C,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,KArMH;;AAuMUI,IAAAA,kBAvMV,GAuM+B,UAACC,CAAD,EAAc;AACzC,UAAI,MAAKpC,KAAL,CAAWkC,aAAX,KAA6B,CAA7B,IAAkC,CAAC,MAAKV,KAAL,CAAWa,qBAAlD,EAAyE;AACvE;AACA,YAAID,CAAC,YAAYE,UAAb,IAA2BF,CAAC,CAACG,OAAF,GAAYC,QAAQ,CAACC,eAAT,CAAyBC,WAApE,EAAiF;AAC/E;AACD;AACD,cAAK/B,YAAL;AACD;AACF,KA/MH;;AAiNUgC,IAAAA,aAjNV,GAiN0B,UAACP,CAAD,EAAsB;AAC5C,UAAI,MAAKpC,KAAL,CAAWkC,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAIrD,WAAW,CAACuD,CAAD,CAAf,EAAoB;AAClBrD,QAAAA,eAAe,CAACqD,CAAD,CAAf;AACA,cAAKzB,YAAL;AACD;AACF,KAzNH;;AA2NUA,IAAAA,YA3NV,GA2NyB,YAAM;AAC3B,UAAI,MAAKa,KAAL,CAAWoB,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKpB,KAAL,CAAWqB,OAAf,EAAwB;AACtB,cAAKrB,KAAL,CAAWqB,OAAX;AACD;AACF,KAlOH;;AAoOUhC,IAAAA,SApOV,GAoOsB,UAACiC,GAAD,EAAgC;AAClD,YAAKvC,MAAL,GAAcuC,GAAd;AACD,KAtOH;;AAwOUhC,IAAAA,YAxOV,GAwOyB,UAACb,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKD,KAAL,CAAWC,SAAX,KAAyBA,SAAzB,IAAsC,MAAKgC,QAAL,CAAc,EAAEhC,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KA1OH;;AA4OUc,IAAAA,YA5OV,GA4OyB,UAACb,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKF,KAAL,CAAWE,SAAX,KAAyBA,SAAzB,IAAsC,MAAK+B,QAAL,CAAc,EAAE/B,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KA9OH;;AAgPUc,IAAAA,WAhPV,GAgPwB,UAACb,QAAD,EAAsB,KAArBA,QAAqB,cAArBA,QAAqB,GAAV,KAAU;AAC1C,YAAKH,KAAL,CAAWG,QAAX,KAAwBA,QAAxB,IAAoC,MAAK8B,QAAL,CAAc,EAAE9B,QAAQ,EAARA,QAAF,EAAd,CAApC;AACD,KAlPH,sDAiBS4C,iBAjBT,GAiBE,6BAA2B,CACzBC,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAKN,aAAxC,EACA,KAAKtC,iBAAL,GAAyBpB,UAAU,CAACiE,GAAX,CAAe,IAAf,EAAqB,KAAK/B,iBAA1B,CAAzB,CACD,CApBH,QAsBSgC,oBAtBT,GAsBE,gCAA8B,CAC5BH,MAAM,CAACI,mBAAP,CAA2B,SAA3B,EAAsC,KAAKT,aAA3C,EACA,IAAI,KAAKtC,iBAAL,IAA0B,IAA9B,EAAoC,CAClC,KAAKA,iBAAL,CAAuBgD,MAAvB,GACD,CACDpE,UAAU,CAACoE,MAAX,CAAkB,IAAlB,EACD,CA5BH,CA8BE;AACF;AACA;AACA,KAjCA,QA4CSC,MA5CT,GA4CE,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,CArDH,QAuDUA,UAvDV,GAuDE,sBAAqB,mBAC4B,KAAK/B,KADjC,CACXgC,eADW,eACXA,eADW,CACMC,iBADN,eACMA,iBADN,CAGnB,oBACE,oBAAC,aAAD,EAAmB,KAAKjC,KAAxB,eACE,oBAAC,eAAD,qBACE,iCACGgC,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,IAWG,KAAKgE,eAAL,EAXH,CAFF,CADF,CADF,CADF,CAsBD,CAhFH,QAkFUA,eAlFV,GAkFE,2BAAuC,+CAC0B,KAAKtC,KAD/B,CAC7BN,KAD6B,gBAC7BA,KAD6B,CACtBsC,eADsB,gBACtBA,eADsB,CACL/B,QADK,gBACLA,QADK,CACKsC,gBADL,gBACKA,gBADL,CAGrC,oBACE,oBAAC,MAAD,IACE,QAAQ,EAAE,UADZ,EAEE,YAAS,gBAFX,EAGE,SAAS,EAAExE,EAAE,gBACVM,MAAM,CAACmE,IAAP,EADU,IACM,IADN,MAEVnE,MAAM,CAACoE,QAAP,EAFU,IAEUC,OAAO,CAACzC,QAAD,CAFjB,OAHf,EAOE,QAAQ,EAAE3C,YAAY,CAACqF,IAPzB,EAQE,qBAAqB,MARvB,EASE,KAAK,EAAE,EAAEjD,KAAK,EAAEA,KAAK,KAAKsC,eAAe,GAAG,GAAH,GAAS,GAA7B,CAAd,EATT,iBAWE,oBAAC,WAAD,IAAa,cAAc,EAAE,KAAKrB,kBAAlC,EAAsD,MAAM,MAA5D,iBACE,6BACE,YAAS,qBADX,EAEE,SAAS,EAAE5C,EAAE,CAACM,MAAM,CAACuE,OAAP,CAAe,KAAKhE,KAApB,CAAD,mBACVP,MAAM,CAACwE,MAAP,CAAc,KAAKjE,KAAnB,CADU,IACkB,KAAKJ,KAAL,CAAW8B,SAD7B,OAEVjC,MAAM,CAACyE,WAAP,EAFU,IAEa7C,QAFb,QAFf,EAME,KAAK,EAAE,KAAK8C,eAAL,EANT,iBAQE,oBAAC,SAAD,IAAW,QAAQ,EAAER,gBAAgB,IAAI,CAACP,eAA1C,EAA2D,SAAS,EAAE,KAAtE,iBACE,6BAAK,GAAG,EAAE,aAACgB,CAAD,UAAQ,MAAI,CAAClE,SAAL,GAAiBkE,CAAzB,EAAV,EAAuC,SAAS,EAAE3E,MAAM,CAAC4E,MAAP,EAAlD,iBACE,oBAAC,eAAD,CAAiB,QAAjB,IAA0B,KAAK,EAAE,KAAK/D,uBAAL,EAAjC,IACG,KAAKc,KAAL,CAAWkD,QADd,CADF,CADF,CARF,CADF,CAXF,CADF,CAgCD,CArHH,QA6IUhB,YA7IV,GA6IE,wBAAoC,UAClC,oBACE,oBAAC,MAAD,IAAQ,QAAQ,EAAE,UAAlB,EAA8B,SAAS,EAAE7D,MAAM,CAAC8E,OAAP,EAAzC,EAA2D,QAAQ,EAAE7F,YAAY,CAACqF,IAAlF,iBACE,oBAAC,sBAAD,IAAwB,GAAG,EAAC,MAA5B,GADF,eAEE,6BACE,GAAG,EAAC,SADN,EAEE,SAAS,EAAE5E,EAAE,kBACVM,MAAM,CAAC+E,UAAP,EADU,IACY,IADZ,OAEV/E,MAAM,CAACgF,cAAP,CAAsB,KAAKzE,KAA3B,CAFU,IAE0B,KAAKJ,KAAL,CAAW+B,aAFrC,QAFf,GAFF,CADF,CAYD,CA1JH,QA4JUwC,eA5JV,GA4JE,2BAA+C,CAC7C,IAAMO,aAAkC,GAAG,EAA3C,CAEA,IAAI,KAAK9E,KAAL,CAAW4B,SAAf,EAA0B,CACxB,IAAI,KAAKJ,KAAL,CAAWC,QAAf,EAAyB,CACvBqD,aAAa,CAACC,UAAd,GAA2B,EAA3B,CACD,CAFD,MAEO,CACLD,aAAa,CAACE,WAAd,GAA4B,EAA5B,CACD,CACF,CAED,OAAOF,aAAP,CACD,CAxKH,QA0KUnB,kBA1KV,GA0KE,8BAAqD,CACnD,IAAMsB,UAAU,GAAG,KAAKzD,KAAL,CAAWC,QAAX,GAAsB5B,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,CArLH,mBAA8B3G,KAAK,CAACiH,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,CAwCGkG,Y,GAAe,EAC3BlC,gBAAgB,EAAE,IADS,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';\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\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\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    disableFocusLock: true,\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      <CommonWrapper {...this.props}>\n        <RenderContainer>\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            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </RenderContainer>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.leftSide()]: Boolean(fromLeft),\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{ width: width || (blockBackground ? 800 : 500) }}\n      >\n        <RenderLayer onClickOutside={this.handleClickOutside} active>\n          <div\n            data-tid=\"SidePage__container\"\n            className={cx(styles.wrapper(this.theme), {\n              [styles.shadow(this.theme)]: this.state.hasShadow,\n              [styles.wrapperLeft()]: fromLeft,\n            })}\n            style={this.getSidebarStyle()}\n          >\n            <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false}>\n              <div ref={(_) => (this.layoutRef = _)} className={styles.layout()}>\n                <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                  {this.props.children}\n                </SidePageContext.Provider>\n              </div>\n            </FocusLock>\n          </div>\n        </RenderLayer>\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.getBoundingClientRect().width;\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 getSidebarStyle(): React.CSSProperties {\n    const sidePageStyle: React.CSSProperties = {};\n\n    if (this.state.hasMargin) {\n      if (this.props.fromLeft) {\n        sidePageStyle.marginLeft = 20;\n      } else {\n        sidePageStyle.marginRight = 20;\n      }\n    }\n\n    return sidePageStyle;\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","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","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","root","leftSide","Boolean","emit","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';\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\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\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    disableFocusLock: true,\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      <CommonWrapper {...this.props}>\n        <RenderContainer>\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            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </RenderContainer>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.leftSide()]: Boolean(fromLeft),\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{ width: width || (blockBackground ? 800 : 500) }}\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"]}

package/components/SidePage/SidePage.d.ts

@@ -1,99 +1,98 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SidePageBody } from './SidePageBody';
-import { SidePageContainer } from './SidePageContainer';
-import { SidePageFooter } from './SidePageFooter';
-import { SidePageHeader } from './SidePageHeader';
-export interface SidePageProps extends CommonProps {
-    /**
-     * Добавить блокирующий фон, когда сайдпейдж открыт
-     */
-    blockBackground?: boolean;
-    /**
-     * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа
-     */
-    disableClose?: boolean;
-    /**
-     * Не закрывать сайдпейдж при клике на фон.
-     */
-    ignoreBackgroundClick?: boolean;
-    /**
-     * Задать ширину сайдпейджа
-     */
-    width?: number | string;
-    /**
-     * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на
-     * Escape или на крестик).
-     */
-    onClose?: () => void;
-    /**
-     * Показывать сайдпэйдж слева
-     *
-     */
-    fromLeft?: boolean;
-    /**
-     * Отключить анимации
-     *
-     */
-    disableAnimations?: boolean;
-    /**
-     * Работает только при заблокированном фоне: `blockBackground = true`
-     */
-    disableFocusLock: boolean;
-}
-export interface SidePageState {
-    stackPosition?: number;
-    hasMargin?: boolean;
-    hasShadow?: boolean;
-    hasBackground?: boolean;
-    hasHeader: boolean;
-    hasFooter: boolean;
-    hasPanel: boolean;
-}
-/**
- * Сайдпейдж
- *
- * Содержит в себе три компоненты: **SidePage.Header**,
- * **SidePage.Body** и **SidePage.Footer**
- *
- * Для отображения серой плашки в футере в компонент
- * **Footer** необходимо передать пропс **panel**
- */
-export declare class SidePage extends React.Component<SidePageProps, SidePageState> {
-    static __KONTUR_REACT_UI__: string;
-    static Header: typeof SidePageHeader;
-    static Body: typeof SidePageBody;
-    static Footer: typeof SidePageFooter;
-    static Container: typeof SidePageContainer;
-    state: SidePageState;
-    private theme;
-    private stackSubscription;
-    private layoutRef;
-    private footer;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    /**
-     * Обновляет разметку компонента.
-     * @public
-     */
-    updateLayout: () => void;
-    static defaultProps: {
-        disableFocusLock: boolean;
-    };
-    render(): JSX.Element;
-    private renderMain;
-    private renderContainer;
-    private getSidePageContextProps;
-    private getWidth;
-    private renderShadow;
-    private getSidebarStyle;
-    private getTransitionNames;
-    private handleStackChange;
-    private handleClickOutside;
-    private handleKeyDown;
-    private requestClose;
-    private footerRef;
-    private setHasHeader;
-    private setHasFooter;
-    private setHasPanel;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageBody } from './SidePageBody';
+import { SidePageContainer } from './SidePageContainer';
+import { SidePageFooter } from './SidePageFooter';
+import { SidePageHeader } from './SidePageHeader';
+export interface SidePageProps extends CommonProps {
+    /**
+     * Добавить блокирующий фон, когда сайдпейдж открыт
+     */
+    blockBackground?: boolean;
+    /**
+     * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа
+     */
+    disableClose?: boolean;
+    /**
+     * Не закрывать сайдпейдж при клике на фон.
+     */
+    ignoreBackgroundClick?: boolean;
+    /**
+     * Задать ширину сайдпейджа
+     */
+    width?: number | string;
+    /**
+     * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на
+     * Escape или на крестик).
+     */
+    onClose?: () => void;
+    /**
+     * Показывать сайдпэйдж слева
+     *
+     */
+    fromLeft?: boolean;
+    /**
+     * Отключить анимации
+     *
+     */
+    disableAnimations?: boolean;
+    /**
+     * Работает только при заблокированном фоне: `blockBackground = true`
+     */
+    disableFocusLock: boolean;
+}
+export interface SidePageState {
+    stackPosition?: number;
+    hasMargin?: boolean;
+    hasShadow?: boolean;
+    hasBackground?: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    hasPanel: boolean;
+}
+/**
+ * Сайдпейдж
+ *
+ * Содержит в себе три компоненты: **SidePage.Header**,
+ * **SidePage.Body** и **SidePage.Footer**
+ *
+ * Для отображения серой плашки в футере в компонент
+ * **Footer** необходимо передать пропс **panel**
+ */
+export declare class SidePage extends React.Component<SidePageProps, SidePageState> {
+    static __KONTUR_REACT_UI__: string;
+    static Header: typeof SidePageHeader;
+    static Body: typeof SidePageBody;
+    static Footer: typeof SidePageFooter;
+    static Container: typeof SidePageContainer;
+    state: SidePageState;
+    private theme;
+    private stackSubscription;
+    private layoutRef;
+    private footer;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * Обновляет разметку компонента.
+     * @public
+     */
+    updateLayout: () => void;
+    static defaultProps: {
+        disableFocusLock: boolean;
+    };
+    render(): JSX.Element;
+    private renderMain;
+    private renderContainer;
+    private getSidePageContextProps;
+    private getWidth;
+    private renderShadow;
+    private getTransitionNames;
+    private handleStackChange;
+    private handleClickOutside;
+    private handleKeyDown;
+    private requestClose;
+    private footerRef;
+    private setHasHeader;
+    private setHasFooter;
+    private setHasPanel;
+}