npm - @skbkontur/react-ui - Versions diffs - 2.17.6 → 2.17.7-sidepage-header - Mend

@skbkontur/react-ui 2.17.6 → 2.17.7-sidepage-header

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1099) hide show

package/components/Select/selectTheme/selectTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconGapSmall","selectIconGapSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconGapMedium","selectIconGapMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconGapLarge","selectIconGapLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledShadowColor","selectShadowColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,iBADxB;AAEEC,IAAAA,eAAe,EAAEL,KAAK,CAACM,kBAFzB;;AAIEC,IAAAA,kBAAkB,EAAEP,KAAK,CAACQ,qBAJ5B;AAKEC,IAAAA,gBAAgB,EAAET,KAAK,CAACU,mBAL1B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACW,gBAApB,GAAuCX,KAAK,CAACa,mBANjE;AAOEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,mBAP1B;AAQEC,IAAAA,eAAe,EAAEhB,KAAK,CAACiB,kBARzB;AASEC,IAAAA,gBAAgB,EAAElB,KAAK,CAACmB,mBAT1B;AAUEC,IAAAA,oBAAoB,EAAEpB,KAAK,CAACqB,uBAV9B;;AAYEC,IAAAA,mBAAmB,EAAEtB,KAAK,CAACuB,sBAZ7B;AAaEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,oBAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAAC0B,iBAApB,GAAwC1B,KAAK,CAAC2B,oBAdnE;AAeEC,IAAAA,iBAAiB,EAAE5B,KAAK,CAAC6B,oBAf3B;AAgBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,mBAhB1B;AAiBEC,IAAAA,iBAAiB,EAAEhC,KAAK,CAACiC,oBAjB3B;AAkBEC,IAAAA,qBAAqB,EAAElC,KAAK,CAACmC,wBAlB/B;;AAoBEC,IAAAA,kBAAkB,EAAEpC,KAAK,CAACqC,qBApB5B;AAqBEC,IAAAA,gBAAgB,EAAEtC,KAAK,CAACuC,mBArB1B;AAsBEC,IAAAA,gBAAgB,EAAEvC,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACwC,gBAApB,GAAuCxC,KAAK,CAACyC,mBAtBjE;AAuBEC,IAAAA,gBAAgB,EAAE1C,KAAK,CAAC2C,mBAvB1B;AAwBEC,IAAAA,eAAe,EAAE5C,KAAK,CAAC6C,kBAxBzB;AAyBEC,IAAAA,gBAAgB,EAAE9C,KAAK,CAAC+C,mBAzB1B;AA0BEC,IAAAA,oBAAoB,EAAEhD,KAAK,CAACiD,uBA1B9B;;AA4BEC,IAAAA,aAAa,EAAElD,KAAK,CAACmD,gBA5BvB;AA6BEC,IAAAA,sBAAsB,EAAEpD,KAAK,CAACqD,yBA7BhC;AA8BEC,IAAAA,sBAAsB,EAAEtD,KAAK,CAACuD,yBA9BhC;AA+BEC,IAAAA,oBAAoB,EAAExD,KAAK,CAACyD,uBA/B9B,EADK;;AAkCLzD,EAAAA,KAlCK,CAAP;;AAoCD,CArCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { SelectProps } from './Select';\r\n\r\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\r\n return ThemeFactory.create(\r\n {\r\n btnBorderWidth: theme.selectBorderWidth,\r\n btnOutlineWidth: theme.selectOutlineWidth,\r\n\r\n btnLineHeightSmall: theme.selectLineHeightSmall,\r\n btnFontSizeSmall: theme.selectFontSizeSmall,\r\n btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\r\n btnPaddingYSmall: theme.selectPaddingYSmall,\r\n btnIconGapSmall: theme.selectIconGapSmall,\r\n btnIconSizeSmall: theme.selectIconSizeSmall,\r\n btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\r\n\r\n btnLineHeightMedium: theme.selectLineHeightMedium,\r\n btnFontSizeMedium: theme.selectFontSizeMedium,\r\n btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\r\n btnPaddingYMedium: theme.selectPaddingYMedium,\r\n btnIconGapMedium: theme.selectIconGapMedium,\r\n btnIconSizeMedium: theme.selectIconSizeMedium,\r\n btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\r\n\r\n btnLineHeightLarge: theme.selectLineHeightLarge,\r\n btnFontSizeLarge: theme.selectFontSizeLarge,\r\n btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\r\n btnPaddingYLarge: theme.selectPaddingYLarge,\r\n btnIconGapLarge: theme.selectIconGapLarge,\r\n btnIconSizeLarge: theme.selectIconSizeLarge,\r\n btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\r\n\r\n btnDisabledBg: theme.selectBgDisabled,\r\n btnDisabledBorderColor: theme.selectBorderColorDisabled,\r\n btnDisabledShadowColor: theme.selectShadowColorDisabled,\r\n btnDisabledTextColor: theme.selectTextColorDisabled,\r\n },\r\n theme,\r\n );\r\n};\r\n"]}
1	+ {"version":3,"sources":["selectTheme.ts"],"names":["ThemeFactory","getSelectTheme","theme","props","create","btnBorderWidth","selectBorderWidth","btnOutlineWidth","selectOutlineWidth","btnLineHeightSmall","selectLineHeightSmall","btnFontSizeSmall","selectFontSizeSmall","btnPaddingXSmall","_icon","selectPaddingXSmall","btnPaddingYSmall","selectPaddingYSmall","btnIconGapSmall","selectIconGapSmall","btnIconSizeSmall","selectIconSizeSmall","btnBorderRadiusSmall","selectBorderRadiusSmall","btnLineHeightMedium","selectLineHeightMedium","btnFontSizeMedium","selectFontSizeMedium","btnPaddingXMedium","selectPaddingXMedium","btnPaddingYMedium","selectPaddingYMedium","btnIconGapMedium","selectIconGapMedium","btnIconSizeMedium","selectIconSizeMedium","btnBorderRadiusMedium","selectBorderRadiusMedium","btnLineHeightLarge","selectLineHeightLarge","btnFontSizeLarge","selectFontSizeLarge","btnPaddingXLarge","selectPaddingXLarge","btnPaddingYLarge","selectPaddingYLarge","btnIconGapLarge","selectIconGapLarge","btnIconSizeLarge","selectIconSizeLarge","btnBorderRadiusLarge","selectBorderRadiusLarge","btnDisabledBg","selectBgDisabled","btnDisabledBorderColor","selectBorderColorDisabled","btnDisabledShadowColor","selectShadowColorDisabled","btnDisabledTextColor","selectTextColorDisabled"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;;;AAKA,OAAO,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAeC,KAAf,EAAuD;AACnF,SAAOH,YAAY,CAACI,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEH,KAAK,CAACI,iBADxB;AAEEC,IAAAA,eAAe,EAAEL,KAAK,CAACM,kBAFzB;;AAIEC,IAAAA,kBAAkB,EAAEP,KAAK,CAACQ,qBAJ5B;AAKEC,IAAAA,gBAAgB,EAAET,KAAK,CAACU,mBAL1B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACW,gBAApB,GAAuCX,KAAK,CAACa,mBANjE;AAOEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,mBAP1B;AAQEC,IAAAA,eAAe,EAAEhB,KAAK,CAACiB,kBARzB;AASEC,IAAAA,gBAAgB,EAAElB,KAAK,CAACmB,mBAT1B;AAUEC,IAAAA,oBAAoB,EAAEpB,KAAK,CAACqB,uBAV9B;;AAYEC,IAAAA,mBAAmB,EAAEtB,KAAK,CAACuB,sBAZ7B;AAaEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,oBAb3B;AAcEC,IAAAA,iBAAiB,EAAEzB,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAAC0B,iBAApB,GAAwC1B,KAAK,CAAC2B,oBAdnE;AAeEC,IAAAA,iBAAiB,EAAE5B,KAAK,CAAC6B,oBAf3B;AAgBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,mBAhB1B;AAiBEC,IAAAA,iBAAiB,EAAEhC,KAAK,CAACiC,oBAjB3B;AAkBEC,IAAAA,qBAAqB,EAAElC,KAAK,CAACmC,wBAlB/B;;AAoBEC,IAAAA,kBAAkB,EAAEpC,KAAK,CAACqC,qBApB5B;AAqBEC,IAAAA,gBAAgB,EAAEtC,KAAK,CAACuC,mBArB1B;AAsBEC,IAAAA,gBAAgB,EAAEvC,KAAK,CAACW,KAAN,GAAcZ,KAAK,CAACwC,gBAApB,GAAuCxC,KAAK,CAACyC,mBAtBjE;AAuBEC,IAAAA,gBAAgB,EAAE1C,KAAK,CAAC2C,mBAvB1B;AAwBEC,IAAAA,eAAe,EAAE5C,KAAK,CAAC6C,kBAxBzB;AAyBEC,IAAAA,gBAAgB,EAAE9C,KAAK,CAAC+C,mBAzB1B;AA0BEC,IAAAA,oBAAoB,EAAEhD,KAAK,CAACiD,uBA1B9B;;AA4BEC,IAAAA,aAAa,EAAElD,KAAK,CAACmD,gBA5BvB;AA6BEC,IAAAA,sBAAsB,EAAEpD,KAAK,CAACqD,yBA7BhC;AA8BEC,IAAAA,sBAAsB,EAAEtD,KAAK,CAACuD,yBA9BhC;AA+BEC,IAAAA,oBAAoB,EAAExD,KAAK,CAACyD,uBA/B9B,EADK;;AAkCLzD,EAAAA,KAlCK,CAAP;;AAoCD,CArCM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { SelectProps } from './Select';\n\nexport const getSelectTheme = (theme: Theme, props: SelectProps<any, any>): Theme => {\n return ThemeFactory.create(\n {\n btnBorderWidth: theme.selectBorderWidth,\n btnOutlineWidth: theme.selectOutlineWidth,\n\n btnLineHeightSmall: theme.selectLineHeightSmall,\n btnFontSizeSmall: theme.selectFontSizeSmall,\n btnPaddingXSmall: props._icon ? theme.btnPaddingXSmall : theme.selectPaddingXSmall,\n btnPaddingYSmall: theme.selectPaddingYSmall,\n btnIconGapSmall: theme.selectIconGapSmall,\n btnIconSizeSmall: theme.selectIconSizeSmall,\n btnBorderRadiusSmall: theme.selectBorderRadiusSmall,\n\n btnLineHeightMedium: theme.selectLineHeightMedium,\n btnFontSizeMedium: theme.selectFontSizeMedium,\n btnPaddingXMedium: props._icon ? theme.btnPaddingXMedium : theme.selectPaddingXMedium,\n btnPaddingYMedium: theme.selectPaddingYMedium,\n btnIconGapMedium: theme.selectIconGapMedium,\n btnIconSizeMedium: theme.selectIconSizeMedium,\n btnBorderRadiusMedium: theme.selectBorderRadiusMedium,\n\n btnLineHeightLarge: theme.selectLineHeightLarge,\n btnFontSizeLarge: theme.selectFontSizeLarge,\n btnPaddingXLarge: props._icon ? theme.btnPaddingXLarge : theme.selectPaddingXLarge,\n btnPaddingYLarge: theme.selectPaddingYLarge,\n btnIconGapLarge: theme.selectIconGapLarge,\n btnIconSizeLarge: theme.selectIconSizeLarge,\n btnBorderRadiusLarge: theme.selectBorderRadiusLarge,\n\n btnDisabledBg: theme.selectBgDisabled,\n btnDisabledBorderColor: theme.selectBorderColorDisabled,\n btnDisabledShadowColor: theme.selectShadowColorDisabled,\n btnDisabledTextColor: theme.selectTextColorDisabled,\n },\n theme,\n );\n};\n"]}

package/components/SidePage/SidePage/SidePage.js CHANGED Viewed

@@ -21,14 +21,14 @@ import { SidePageHeader } from "../SidePageHeader";
 import { jsStyles } from "../SidePage.styles";
 import { isFooter, isHeader } from "../helpers";
 var TRANSITION_TIMEOUT = 200;
-/**
- * Сайдпейдж
- *
- * Содержит в себе три компоненты: **SidePage.Header**,
- * **SidePage.Body** и **SidePage.Footer**
- *
- * Для отображения серой плашки в футере в компонент
- * **Footer** необходимо передать пропс **panel**
+/**
+ * Сайдпейдж
+ *
+ * Содержит в себе три компоненты: **SidePage.Header**,
+ * **SidePage.Body** и **SidePage.Footer**
+ *
+ * Для отображения серой плашки в футере в компонент
+ * **Footer** необходимо передать пропс **panel**
  */
 export var SidePage = /*#__PURE__*/function (_React$Component) {
@@ -47,11 +47,13 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
     _this.stackSubscription = null;
     _this.layoutRef = null;
     _this.footer = null;
+    _this.header = null;
     _this.updateLayout = function () {
-      if (_this.footer) {
-        _this.footer.update();
-      }
+      var _this$header, _this$footer;
+      (_this$header = _this.header) == null ? void 0 : _this$header.update();
+      (_this$footer = _this.footer) == null ? void 0 : _this$footer.update();
     };
     _this.getSidePageContextProps = function () {
@@ -78,7 +80,8 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
         requestClose: _this.requestClose,
         getWidth: _this.getWidth,
         updateLayout: _this.updateLayout,
-        footerRef: _this.footerRef
+        footerRef: _this.footerRef,
+        headerRef: _this.headerRef
       };
       return sidePageContextProps;
     };
@@ -141,6 +144,10 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
       }
     };
+    _this.headerRef = function (ref) {
+      _this.header = ref;
+    };
     _this.footerRef = function (ref) {
       _this.footer = ref;
     };
@@ -164,9 +171,9 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
     ModalStack.remove(this);
   }
-  /**
-  * Обновляет разметку компонента.
-  * @public
+  /**
+  * Обновляет разметку компонента.
+  * @public
   */
   ;

package/components/SidePage/SidePage/SidePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","cn","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","jsStyles","isFooter","isHeader","TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","Children","toArray","props","children","forEach","child","panel","sidePageContextProps","requestClose","getWidth","footerRef","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","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","root","leftSide","Boolean","emit","wrapper","shadow","getSidebarStyle","_","layout","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { stopPropagation } from '../../lib/events/stopPropagation';\r\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\r\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { RenderLayer } from '../../internal/RenderLayer';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { SidePageBody } from './SidePageBody';\r\nimport { SidePageContainer } from './SidePageContainer';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\nimport { SidePageFooter } from './SidePageFooter';\r\nimport { SidePageHeader } from './SidePageHeader';\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { isFooter, isHeader } from './helpers';\r\n\r\nexport interface SidePageProps extends CommonProps {\r\n /*\r\n Добавить блокирующий фон, когда сайдпейдж открыт\r\n /\r\n blockBackground?: boolean;\r\n\r\n /\r\n Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\r\n /\r\n disableClose?: boolean;\r\n\r\n /\r\n Не закрывать сайдпейдж при клике на фон.\r\n /\r\n ignoreBackgroundClick?: boolean;\r\n\r\n /\r\n Задать ширину сайдпейджа\r\n /\r\n width?: number \| string;\r\n\r\n /\r\n Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\r\n * Escape или на крестик).\r\n /\r\n onClose?: () => void;\r\n\r\n /\r\n Показывать сайдпэйдж слева\r\n \r\n /\r\n fromLeft?: boolean;\r\n\r\n /*\r\n Отключить анимации\r\n \r\n /\r\n disableAnimations?: boolean;\r\n}\r\n\r\nexport interface SidePageState {\r\n stackPosition?: number;\r\n hasMargin?: boolean;\r\n hasShadow?: boolean;\r\n hasBackground?: boolean;\r\n}\r\n\r\nconst TRANSITION_TIMEOUT = 200;\r\n\r\n/*\r\n Сайдпейдж\r\n \r\n Содержит в себе три компоненты: SidePage.Header,\r\n * SidePage.Body и SidePage.Footer\r\n \r\n Для отображения серой плашки в футере в компонент\r\n * Footer необходимо передать пропс panel\r\n /\r\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\r\n public static __KONTUR_REACT_UI__ = 'SidePage';\r\n\r\n public static Header = SidePageHeader;\r\n public static Body = SidePageBody;\r\n public static Footer = SidePageFooter;\r\n public static Container = SidePageContainer;\r\n public state: SidePageState = {};\r\n private theme!: Theme;\r\n private stackSubscription: ModalStackSubscription \| null = null;\r\n private layoutRef: HTMLElement \| null = null;\r\n private footer: SidePageFooter \| null = null;\r\n\r\n public componentDidMount() {\r\n window.addEventListener('keydown', this.handleKeyDown);\r\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\r\n }\r\n\r\n public componentWillUnmount() {\r\n window.removeEventListener('keydown', this.handleKeyDown);\r\n if (this.stackSubscription != null) {\r\n this.stackSubscription.remove();\r\n }\r\n ModalStack.remove(this);\r\n }\r\n\r\n /\r\n Обновляет разметку компонента.\r\n * @public\r\n */\r\n public updateLayout = (): void => {\r\n if (this.footer) {\r\n this.footer.update();\r\n }\r\n };\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {theme => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n private renderMain() {\r\n const { blockBackground, disableAnimations } = this.props;\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <RenderContainer>\r\n <div>\r\n {blockBackground && this.renderShadow()}\r\n <CSSTransition\r\n in\r\n classNames={this.getTransitionNames()}\r\n appear={!disableAnimations}\r\n enter={!disableAnimations}\r\n exit={false}\r\n timeout={{\r\n enter: TRANSITION_TIMEOUT,\r\n exit: TRANSITION_TIMEOUT,\r\n }}\r\n >\r\n {this.renderContainer()}\r\n </CSSTransition>\r\n </div>\r\n </RenderContainer>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private renderContainer(): JSX.Element {\r\n const { width, blockBackground, fromLeft } = this.props;\r\n\r\n return (\r\n <ZIndex\r\n priority={'Sidepage'}\r\n data-tid=\"SidePage__root\"\r\n className={cn({\r\n [jsStyles.root()]: true,\r\n [jsStyles.leftSide(this.theme)]: Boolean(fromLeft),\r\n })}\r\n onScroll={LayoutEvents.emit}\r\n createStackingContext\r\n style={{ width: width \|\| (blockBackground ? 800 : 500) }}\r\n >\r\n <RenderLayer onClickOutside={this.handleClickOutside} active>\r\n <div\r\n data-tid=\"SidePage__container\"\r\n className={cn(jsStyles.wrapper(this.theme), this.state.hasShadow && jsStyles.shadow(this.theme))}\r\n style={this.getSidebarStyle()}\r\n >\r\n <div ref={_ => (this.layoutRef = _)} className={jsStyles.layout()}>\r\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\r\n {this.props.children}\r\n </SidePageContext.Provider>\r\n </div>\r\n </div>\r\n </RenderLayer>\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidePageContextProps = (): SidePageContextType => {\r\n let hasHeader = false;\r\n let hasFooter = false;\r\n let hasPanel = false;\r\n\r\n React.Children.toArray(this.props.children).forEach(child => {\r\n if (isHeader(child)) {\r\n hasHeader = true;\r\n }\r\n if (isFooter(child)) {\r\n hasFooter = true;\r\n if (child.props.panel) {\r\n hasPanel = true;\r\n }\r\n }\r\n });\r\n\r\n const sidePageContextProps: SidePageContextType = {\r\n hasHeader,\r\n hasFooter,\r\n hasPanel,\r\n requestClose: this.requestClose,\r\n getWidth: this.getWidth,\r\n updateLayout: this.updateLayout,\r\n footerRef: this.footerRef,\r\n };\r\n\r\n return sidePageContextProps;\r\n };\r\n\r\n private getWidth = () => {\r\n if (!this.layoutRef) {\r\n return 'auto';\r\n }\r\n return this.layoutRef.getBoundingClientRect().width;\r\n };\r\n\r\n private renderShadow(): JSX.Element {\r\n return (\r\n <ZIndex priority={'Sidepage'} className={jsStyles.overlay()} onScroll={LayoutEvents.emit}>\r\n <HideBodyVerticalScroll key=\"hbvs\" />\r\n <div\r\n key=\"overlay\"\r\n className={cn({\r\n [jsStyles.background()]: true,\r\n [jsStyles.backgroundGray(this.theme)]: this.state.hasBackground,\r\n })}\r\n />\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidebarStyle(): React.CSSProperties {\r\n const sidePageStyle: React.CSSProperties = {};\r\n\r\n if (this.state.hasMargin) {\r\n if (this.props.fromLeft) {\r\n sidePageStyle.marginLeft = 20;\r\n } else {\r\n sidePageStyle.marginRight = 20;\r\n }\r\n }\r\n\r\n return sidePageStyle;\r\n }\r\n\r\n private getTransitionNames(): Record<string, string> {\r\n const transition = this.props.fromLeft ? jsStyles.transitionRight : jsStyles.transitionLeft;\r\n\r\n return {\r\n enter: transition(),\r\n enterActive: jsStyles.transitionActive(),\r\n exit: jsStyles.transitionLeave(),\r\n exitActive: jsStyles.transitionLeaveActive(),\r\n appear: transition(),\r\n appearActive: jsStyles.transitionActive(),\r\n };\r\n }\r\n\r\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\r\n const sidePages = stack.filter(x => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\r\n const currentSidePagePosition = sidePages.indexOf(this);\r\n\r\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\r\n const hasShadow = sidePages.length < 3 \|\| currentSidePagePosition > sidePages.length - 3;\r\n const hasBackground = ModalStack.isBlocking(this);\r\n\r\n this.setState({\r\n stackPosition: stack.indexOf(this),\r\n hasMargin,\r\n hasShadow,\r\n hasBackground,\r\n });\r\n };\r\n\r\n private handleClickOutside = (e: Event) => {\r\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\r\n // ignore mousedown on window scrollbar\r\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\r\n return;\r\n }\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (this.state.stackPosition !== 0) {\r\n return;\r\n }\r\n if (isKeyEscape(e)) {\r\n stopPropagation(e);\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private requestClose = () => {\r\n if (this.props.disableClose) {\r\n return;\r\n }\r\n if (this.props.onClose) {\r\n this.props.onClose();\r\n }\r\n };\r\n\r\n private footerRef = (ref: SidePageFooter \| null) => {\r\n this.footer = ref;\r\n };\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","cn","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","jsStyles","isFooter","isHeader","TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","header","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","Children","toArray","props","children","forEach","child","panel","sidePageContextProps","requestClose","getWidth","footerRef","headerRef","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","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","root","leftSide","Boolean","emit","wrapper","shadow","getSidebarStyle","_","layout","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport cn from 'classnames';\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';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { jsStyles } from './SidePage.styles';\nimport { isFooter, isHeader } from './helpers';\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\nexport interface SidePageState {\n stackPosition?: number;\n hasMargin?: boolean;\n hasShadow?: boolean;\n hasBackground?: 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 private theme!: Theme;\n private stackSubscription: ModalStackSubscription \| null = null;\n private layoutRef: HTMLElement \| null = null;\n private footer: SidePageFooter \| null = null;\n private header: SidePageHeader \| 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 this.header?.update();\n this.footer?.update();\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 } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cn({\n [jsStyles.root()]: true,\n [jsStyles.leftSide(this.theme)]: 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={cn(jsStyles.wrapper(this.theme), this.state.hasShadow && jsStyles.shadow(this.theme))}\n style={this.getSidebarStyle()}\n >\n <div ref={(_) => (this.layoutRef = _)} className={jsStyles.layout()}>\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </div>\n </RenderLayer>\n </ZIndex>\n );\n }\n\n private getSidePageContextProps = (): SidePageContextType => {\n let hasHeader = false;\n let hasFooter = false;\n let hasPanel = false;\n\n React.Children.toArray(this.props.children).forEach((child) => {\n if (isHeader(child)) {\n hasHeader = true;\n }\n if (isFooter(child)) {\n hasFooter = true;\n if (child.props.panel) {\n hasPanel = true;\n }\n }\n });\n\n const sidePageContextProps: SidePageContextType = {\n hasHeader,\n hasFooter,\n hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n footerRef: this.footerRef,\n headerRef: this.headerRef,\n };\n\n return sidePageContextProps;\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={jsStyles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={cn({\n [jsStyles.background()]: true,\n [jsStyles.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 ? jsStyles.transitionRight : jsStyles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: jsStyles.transitionActive(),\n exit: jsStyles.transitionLeave(),\n exitActive: jsStyles.transitionLeaveActive(),\n appear: transition(),\n appearActive: jsStyles.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 headerRef = (ref: SidePageHeader \| null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter \| null) => {\n this.footer = ref;\n };\n}\n"]}

package/components/SidePage/SidePage.d.ts CHANGED Viewed

@@ -63,6 +63,7 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private stackSubscription;
     private layoutRef;
     private footer;
+    private header;
     componentDidMount(): void;
     componentWillUnmount(): void;
     /**
@@ -82,5 +83,6 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private handleClickOutside;
     private handleKeyDown;
     private requestClose;
+    private headerRef;
     private footerRef;
 }

package/components/SidePage/SidePage.md CHANGED Viewed

@@ -1,48 +1,48 @@
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-let initialState = { opened: false };
-function renderSidePage() {
-  return (
-    <SidePage onClose={close} blockBackground>
-      <SidePage.Header>Title</SidePage.Header>
-      <SidePage.Body>
-        <div
-          style={{
-            background: `repeating-linear-gradient(
-                          60deg,
-                          #fafafa,
-                          #fafafa 20px,
-                          #dfdede 20px,
-                          #dfdede 40px
-                        )`,
-            height: 600,
-            padding: '20px 0',
-          }}
-        >
-          <SidePage.Container>
-            <p>Use rxjs operators with react hooks</p>
-          </SidePage.Container>
-        </div>
-      </SidePage.Body>
-      <SidePage.Footer panel>
-        <Button onClick={close}>Close</Button>
-      </SidePage.Footer>
-    </SidePage>
-  );
-}
-function open() {
-  setState({ opened: true });
-}
-function close() {
-  setState({ opened: false });
-}
-<div>
-  {state.opened && renderSidePage()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
+```jsx harmony
+import { Button } from '@skbkontur/react-ui';
+let initialState = { opened: false };
+function renderSidePage() {
+  return (
+    <SidePage onClose={close} blockBackground>
+      <SidePage.Header>Title</SidePage.Header>
+      <SidePage.Body>
+        <div
+          style={{
+            background: `repeating-linear-gradient(
+                          60deg,
+                          #fafafa,
+                          #fafafa 20px,
+                          #dfdede 20px,
+                          #dfdede 40px
+                        )`,
+            height: 600,
+            padding: '20px 0',
+          }}
+        >
+          <SidePage.Container>
+            <p>Use rxjs operators with react hooks</p>
+          </SidePage.Container>
+        </div>
+      </SidePage.Body>
+      <SidePage.Footer panel>
+        <Button onClick={close}>Close</Button>
+      </SidePage.Footer>
+    </SidePage>
+  );
+}
+function open() {
+  setState({ opened: true });
+}
+function close() {
+  setState({ opened: false });
+}
+<div>
+  {state.opened && renderSidePage()}
+  <Button onClick={open}>Open</Button>
+</div>;
+```

package/components/SidePage/SidePage.styles/SidePage.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","cssName","memoizeStyle","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","headerFixed","sidePageBorderColor","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickAreaX","sidePageCloseButtonHoverColor","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","closeIcon","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive","jsStyles"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\r\nimport { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n root() {\r\n return css`\r\n height: 100%;\r\n position: fixed;\r\n right: 0;\r\n top: 0;\r\n `;\r\n },\r\n\r\n overlay() {\r\n return css`\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n `;\r\n },\r\n\r\n body() {\r\n return css`\r\n height: 100%;\r\n z-index: 0;\r\n `;\r\n },\r\n\r\n container(t: Theme) {\r\n return css`\r\n padding-left: ${t.sidePagePaddingLeft};\r\n padding-right: ${t.sidePagePaddingRight};\r\n `;\r\n },\r\n\r\n containerWithoutHeader(t: Theme) {\r\n return css`\r\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0} !important;\r\n `;\r\n },\r\n\r\n containerWithoutFooter(t: Theme) {\r\n return css`\r\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\r\n `;\r\n },\r\n\r\n containerWithPanel(t: Theme) {\r\n return css`\r\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\r\n `;\r\n },\r\n\r\n wrapper(t: Theme) {\r\n return css`\r\n background: ${t.sidePageBgDefault};\r\n float: right;\r\n height: 100%;\r\n width: 100%;\r\n overflow-y: auto;\r\n position: relative;\r\n white-space: normal;\r\n `;\r\n },\r\n\r\n layout() {\r\n return css`\r\n align-items: stretch;\r\n display: flex;\r\n flex-direction: column;\r\n `;\r\n },\r\n\r\n header(t: Theme) {\r\n return css`\r\n font-size: ${t.sidePageHeaderFontSize};\r\n line-height: ${t.sidePageHeaderLineHeight};\r\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\r\n width: 100%;\r\n position: relative;\r\n `;\r\n },\r\n\r\n headerFixed(t: Theme) {\r\n return css`\r\n background: ${t.sidePageBgDefault};\r\n box-shadow: 0 1px ${t.sidePageBorderColor};\r\n font-size: ${t.sidePageHeaderFixedFontSize};\r\n line-height: ${t.sidePageHeaderFixedLineHeight};\r\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\r\n `;\r\n },\r\n\r\n title(t: Theme) {\r\n const paddingRight =\r\n parseInt(t.sidePageCloseButtonPadding) +\r\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\r\n parseInt(t.sidePageCloseIconSize);\r\n return css`\r\n padding-left: ${t.sidePagePaddingLeft};\r\n padding-right: ${paddingRight}px;\r\n `;\r\n },\r\n\r\n titleFixed() {\r\n return css`\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n `;\r\n },\r\n\r\n background() {\r\n return css`\r\n height: 100%;\r\n position: absolute;\r\n width: 100%;\r\n `;\r\n },\r\n\r\n backgroundGray(t: Theme) {\r\n return css`\r\n background: ${t.sidePageBackingBg};\r\n opacity: ${t.sidePageBackingBgOpacity};\r\n `;\r\n },\r\n\r\n shadow(t: Theme) {\r\n return css`\r\n ${cssName(styles.wrapper(t))}& {\r\n box-shadow: ${t.sidePageContainerShadow};\r\n }\r\n `;\r\n },\r\n\r\n leftSide(t: Theme) {\r\n return css`\r\n left: 0;\r\n right: auto;\r\n\r\n & ${cssName(styles.wrapper(t))} {\r\n float: left;\r\n }\r\n `;\r\n },\r\n\r\n close(t: Theme) {\r\n return css`\r\n color: ${t.sidePageCloseButtonColor};\r\n cursor: pointer;\r\n position: absolute;\r\n right: ${t.sidePageCloseButtonPadding};\r\n text-align: center;\r\n text-decoration: none;\r\n width: ${t.sidePageCloseIconSize};\r\n padding: 0 ${t.sidePageCloseButtonClickAreaX};\r\n margin: 0 -${t.sidePageCloseButtonClickAreaX};\r\n\r\n &:hover {\r\n color: ${t.sidePageCloseButtonHoverColor};\r\n }\r\n `;\r\n },\r\n\r\n panel(t: Theme) {\r\n return css`\r\n background: ${t.sidePageFooterPanelBg} !important;\r\n border-top: 0 !important;\r\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\r\n ${t.sidePagePaddingLeft};\r\n `;\r\n },\r\n\r\n closeIcon(t: Theme) {\r\n return css`\r\n display: inline-block;\r\n height: ${t.sidePageCloseIconSize};\r\n width: ${t.sidePageCloseIconSize};\r\n line-height: 0;\r\n `;\r\n },\r\n\r\n fixed(t: Theme) {\r\n return css`\r\n line-height: ${t.sidePageHeaderFixedLineHeight};\r\n `;\r\n },\r\n\r\n footer() {\r\n return css`\r\n bottom: 0;\r\n position: fixed;\r\n z-index: 10;\r\n `;\r\n },\r\n\r\n footerContent(t: Theme) {\r\n return css`\r\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\r\n ${t.sidePagePaddingLeft};\r\n `;\r\n },\r\n\r\n footerFixed(t: Theme) {\r\n return css`\r\n background: ${t.sidePageBgDefault};\r\n border-top: 1px solid ${t.sidePageBorderColor};\r\n `;\r\n },\r\n\r\n transitionLeft() {\r\n return css`\r\n transform: translateX(100px);\r\n `;\r\n },\r\n\r\n transitionRight() {\r\n return css`\r\n transform: translateX(-100px);\r\n `;\r\n },\r\n\r\n transitionActive() {\r\n return css`\r\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n opacity: 1;\r\n transform: translate(0, 0) !important;\r\n `;\r\n },\r\n\r\n transitionLeave() {\r\n return css`\r\n opacity: 1;\r\n `;\r\n },\r\n\r\n transitionLeaveActive() {\r\n return css`\r\n opacity: 0.01;\r\n transition: opacity 0.15s ease-out;\r\n `;\r\n },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
1	+ {"version":3,"sources":["SidePage.styles.ts"],"names":["is8pxTheme","css","cssName","memoizeStyle","styles","root","overlay","body","container","t","sidePagePaddingLeft","sidePagePaddingRight","containerWithoutHeader","sidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","wrapper","sidePageBgDefault","layout","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","headerFixed","sidePageBorderColor","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","leftSide","close","sidePageCloseButtonColor","sidePageCloseButtonClickAreaX","sidePageCloseButtonHoverColor","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","closeIcon","fixed","footer","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","footerFixed","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive","jsStyles"],"mappings":"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","sourcesContent":["import { is8pxTheme } from '../../lib/theming/ThemeHelpers';\nimport { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n root() {\n return css`\n height: 100%;\n position: fixed;\n right: 0;\n top: 0;\n `;\n },\n\n overlay() {\n return css`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n `;\n },\n\n body() {\n return css`\n height: 100%;\n z-index: 0;\n `;\n },\n\n container(t: Theme) {\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${t.sidePagePaddingRight};\n `;\n },\n\n containerWithoutHeader(t: Theme) {\n return css`\n padding-top: ${is8pxTheme(t) ? t.sidePagePaddingTop : 0} !important;\n `;\n },\n\n containerWithoutFooter(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\n `;\n },\n\n containerWithPanel(t: Theme) {\n return css`\n padding-bottom: ${is8pxTheme(t) ? t.sidePagePaddingBottom : 0} !important;\n `;\n },\n\n wrapper(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n float: right;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n position: relative;\n white-space: normal;\n `;\n },\n\n layout() {\n return css`\n align-items: stretch;\n display: flex;\n flex-direction: column;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.sidePageHeaderFontSize};\n line-height: ${t.sidePageHeaderLineHeight};\n padding: ${t.sidePageHeaderPaddingTop} 0 ${t.sidePageHeaderPaddingBottom};\n width: 100%;\n position: relative;\n `;\n },\n\n headerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n box-shadow: 0 1px ${t.sidePageBorderColor};\n font-size: ${t.sidePageHeaderFixedFontSize};\n line-height: ${t.sidePageHeaderFixedLineHeight};\n padding: ${t.sidePageHeaderFixedPaddingY} 0;\n `;\n },\n\n title(t: Theme) {\n const paddingRight =\n parseInt(t.sidePageCloseButtonPadding) +\n parseInt(t.sidePageCloseButtonLegacyPaddingLeft) +\n parseInt(t.sidePageCloseIconSize);\n return css`\n padding-left: ${t.sidePagePaddingLeft};\n padding-right: ${paddingRight}px;\n `;\n },\n\n titleFixed() {\n return css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `;\n },\n\n background() {\n return css`\n height: 100%;\n position: absolute;\n width: 100%;\n `;\n },\n\n backgroundGray(t: Theme) {\n return css`\n background: ${t.sidePageBackingBg};\n opacity: ${t.sidePageBackingBgOpacity};\n `;\n },\n\n shadow(t: Theme) {\n return css`\n ${cssName(styles.wrapper(t))}& {\n box-shadow: ${t.sidePageContainerShadow};\n }\n `;\n },\n\n leftSide(t: Theme) {\n return css`\n left: 0;\n right: auto;\n\n & ${cssName(styles.wrapper(t))} {\n float: left;\n }\n `;\n },\n\n close(t: Theme) {\n return css`\n color: ${t.sidePageCloseButtonColor};\n cursor: pointer;\n position: absolute;\n right: ${t.sidePageCloseButtonPadding};\n text-align: center;\n text-decoration: none;\n width: ${t.sidePageCloseIconSize};\n padding: 0 ${t.sidePageCloseButtonClickAreaX};\n margin: 0 -${t.sidePageCloseButtonClickAreaX};\n\n &:hover {\n color: ${t.sidePageCloseButtonHoverColor};\n }\n `;\n },\n\n panel(t: Theme) {\n return css`\n background: ${t.sidePageFooterPanelBg} !important;\n border-top: 0 !important;\n padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n closeIcon(t: Theme) {\n return css`\n display: inline-block;\n height: ${t.sidePageCloseIconSize};\n width: ${t.sidePageCloseIconSize};\n line-height: 0;\n `;\n },\n\n fixed(t: Theme) {\n return css`\n line-height: ${t.sidePageHeaderFixedLineHeight};\n `;\n },\n\n footer() {\n return css`\n bottom: 0;\n position: fixed;\n z-index: 10;\n `;\n },\n\n footerContent(t: Theme) {\n return css`\n padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n ${t.sidePagePaddingLeft};\n `;\n },\n\n footerFixed(t: Theme) {\n return css`\n background: ${t.sidePageBgDefault};\n border-top: 1px solid ${t.sidePageBorderColor};\n `;\n },\n\n transitionLeft() {\n return css`\n transform: translateX(100px);\n `;\n },\n\n transitionRight() {\n return css`\n transform: translateX(-100px);\n `;\n },\n\n transitionActive() {\n return css`\n transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n opacity: 1;\n transform: translate(0, 0) !important;\n `;\n },\n\n transitionLeave() {\n return css`\n opacity: 1;\n `;\n },\n\n transitionLeaveActive() {\n return css`\n opacity: 0.01;\n transition: opacity 0.15s ease-out;\n `;\n },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/components/SidePage/SidePageBody/SidePageBody.js CHANGED Viewed

@@ -3,10 +3,10 @@ import React from 'react';
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { jsStyles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Тело для сайдпейджа
- *
- * @visibleName SidePage.Body
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
  */
 export var SidePageBody = /*#__PURE__*/function (_React$Component) {

package/components/SidePage/SidePageBody/SidePageBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageBody.tsx"],"names":["React","CommonWrapper","jsStyles","SidePageContext","SidePageBody","context","componentDidUpdate","updateLayout","render","props","body","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;AAKA;AACA;AACA;AACA;AACA;AACA,WAAaC,YAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,EAAAA,kBANT,GAME,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GARH;;AAUSC,EAAAA,MAVT,GAUE,kBAAgB;AACd;AACE,0BAAC,aAAD,EAAmB,KAAKC,KAAxB;AACE,mCAAK,SAAS,EAAEP,QAAQ,CAACQ,IAAT,EAAhB,IAAkC,KAAKD,KAAL,CAAWE,QAA7C,CADF,CADF;;;AAKD,GAhBH,uBAAkCX,KAAK,CAACY,SAAxC,EAAaR,Y,CACGS,mB,GAAsB,c,CADzBT,Y,CAGGU,W,GAAcX,e","sourcesContent":["import React from 'react';\r\n\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\n\r\nexport interface SidePageBodyProps extends CommonProps {\r\n children?: React.ReactNode;\r\n}\r\n/*\r\n Тело для сайдпейджа\r\n \r\n @visibleName SidePage.Body\r\n */\r\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\r\n public static __KONTUR_REACT_UI__ = 'SidePageBody';\r\n\r\n public static contextType = SidePageContext;\r\n public context: SidePageContextType = this.context;\r\n\r\n public componentDidUpdate() {\r\n this.context.updateLayout();\r\n }\r\n\r\n public render() {\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div className={jsStyles.body()}>{this.props.children}</div>\r\n </CommonWrapper>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePageBody.tsx"],"names":["React","CommonWrapper","jsStyles","SidePageContext","SidePageBody","context","componentDidUpdate","updateLayout","render","props","body","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;AAKA;AACA;AACA;AACA;AACA;AACA,WAAaC,YAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,EAAAA,kBANT,GAME,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,GARH;;AAUSC,EAAAA,MAVT,GAUE,kBAAgB;AACd;AACE,0BAAC,aAAD,EAAmB,KAAKC,KAAxB;AACE,mCAAK,SAAS,EAAEP,QAAQ,CAACQ,IAAT,EAAhB,IAAkC,KAAKD,KAAL,CAAWE,QAA7C,CADF,CADF;;;AAKD,GAhBH,uBAAkCX,KAAK,CAACY,SAAxC,EAAaR,Y,CACGS,mB,GAAsB,c,CADzBT,Y,CAGGU,W,GAAcX,e","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { jsStyles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageBodyProps extends CommonProps {\n children?: React.ReactNode;\n}\n/*\n Тело для сайдпейджа\n \n @visibleName SidePage.Body\n */\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageBody';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public componentDidUpdate() {\n this.context.updateLayout();\n }\n\n public render() {\n return (\n <CommonWrapper {...this.props}>\n <div className={jsStyles.body()}>{this.props.children}</div>\n </CommonWrapper>\n );\n }\n}\n"]}

package/components/SidePage/SidePageContainer/SidePageContainer.js CHANGED Viewed

@@ -5,10 +5,10 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { jsStyles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Контейнер с отступами
- *
- * @visibleName SidePage.Container
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
  */
 export var SidePageContainer = /*#__PURE__*/function (_React$Component) {

package/components/SidePage/SidePageContainer/SidePageContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageContainer.tsx"],"names":["React","cn","ThemeContext","CommonWrapper","jsStyles","SidePageContext","SidePageContainer","theme","render","renderMain","hasHeader","hasFooter","hasPanel","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","children","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;;AAGA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;AAIA;AACA;AACA;AACA;AACA;AACA,WAAaC,iBAAb;;;AAGUC,IAAAA,KAHV;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAAAD,KAAK,EAAI;AACR,QAAA,MAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,MAAI,CAACE,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAdH;;AAgBSA,EAAAA,UAhBT,GAgBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,EAAmB,MAAI,CAACC,KAAxB;AACE;AACE,YAAA,SAAS,EAAEZ,EAAE;AACVG,YAAAA,QAAQ,CAACU,SAAT,CAAmB,MAAI,CAACP,KAAxB,CADU,IACuB,IADvB;AAEVH,YAAAA,QAAQ,CAACW,sBAAT,CAAgC,MAAI,CAACR,KAArC,CAFU,IAEoC,CAACG,SAFrC;AAGVN,YAAAA,QAAQ,CAACY,sBAAT,CAAgC,MAAI,CAACT,KAArC,CAHU,IAGoC,CAACI,SAHrC;AAIVP,YAAAA,QAAQ,CAACa,kBAAT,CAA4B,MAAI,CAACV,KAAjC,CAJU,IAIgCK,QAJhC,OADf;;;AAQG,UAAA,MAAI,CAACC,KAAL,CAAWK,QARd,CADF,CADD,GADH,CADF;;;;;;AAkBD,GAnCH,4BAAuClB,KAAK,CAACmB,SAA7C,EAAab,iB,CACGc,mB,GAAsB,mB","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext } from './SidePageContext';\r\n\r\nexport type SidePageContainerProps = CommonProps;\r\n\r\n/*\r\n Контейнер с отступами\r\n \r\n @visibleName SidePage.Container\r\n */\r\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\r\n public static __KONTUR_REACT_UI__ = 'SidePageContainer';\r\n\r\n private theme!: Theme;\r\n\r\n public render() {\r\n return (\r\n <ThemeContext.Consumer>\r\n {theme => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n public renderMain() {\r\n return (\r\n <SidePageContext.Consumer>\r\n {({ hasHeader, hasFooter, hasPanel }) => (\r\n <CommonWrapper {...this.props}>\r\n <div\r\n className={cn({\r\n [jsStyles.container(this.theme)]: true,\r\n [jsStyles.containerWithoutHeader(this.theme)]: !hasHeader,\r\n [jsStyles.containerWithoutFooter(this.theme)]: !hasFooter,\r\n [jsStyles.containerWithPanel(this.theme)]: hasPanel,\r\n })}\r\n >\r\n {this.props.children}\r\n </div>\r\n </CommonWrapper>\r\n )}\r\n </SidePageContext.Consumer>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePageContainer.tsx"],"names":["React","cn","ThemeContext","CommonWrapper","jsStyles","SidePageContext","SidePageContainer","theme","render","renderMain","hasHeader","hasFooter","hasPanel","props","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","children","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;;AAGA,SAASC,QAAT,QAAyB,mBAAzB;AACA,SAASC,eAAT,QAAgC,mBAAhC;;;;AAIA;AACA;AACA;AACA;AACA;AACA,WAAaC,iBAAb;;;AAGUC,IAAAA,KAHV;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAAAD,KAAK,EAAI;AACR,QAAA,MAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,MAAI,CAACE,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GAdH;;AAgBSA,EAAAA,UAhBT,GAgBE,sBAAoB;AAClB;AACE,0BAAC,eAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,8BAAC,aAAD,EAAmB,MAAI,CAACC,KAAxB;AACE;AACE,YAAA,SAAS,EAAEZ,EAAE;AACVG,YAAAA,QAAQ,CAACU,SAAT,CAAmB,MAAI,CAACP,KAAxB,CADU,IACuB,IADvB;AAEVH,YAAAA,QAAQ,CAACW,sBAAT,CAAgC,MAAI,CAACR,KAArC,CAFU,IAEoC,CAACG,SAFrC;AAGVN,YAAAA,QAAQ,CAACY,sBAAT,CAAgC,MAAI,CAACT,KAArC,CAHU,IAGoC,CAACI,SAHrC;AAIVP,YAAAA,QAAQ,CAACa,kBAAT,CAA4B,MAAI,CAACV,KAAjC,CAJU,IAIgCK,QAJhC,OADf;;;AAQG,UAAA,MAAI,CAACC,KAAL,CAAWK,QARd,CADF,CADD,GADH,CADF;;;;;;AAkBD,GAnCH,4BAAuClB,KAAK,CAACmB,SAA7C,EAAab,iB,CACGc,mB,GAAsB,mB","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { jsStyles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\n/*\n Контейнер с отступами\n \n @visibleName SidePage.Container\n */\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n private theme!: Theme;\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 public renderMain() {\n return (\n <SidePageContext.Consumer>\n {({ hasHeader, hasFooter, hasPanel }) => (\n <CommonWrapper {...this.props}>\n <div\n className={cn({\n [jsStyles.container(this.theme)]: true,\n [jsStyles.containerWithoutHeader(this.theme)]: !hasHeader,\n [jsStyles.containerWithoutFooter(this.theme)]: !hasFooter,\n [jsStyles.containerWithPanel(this.theme)]: hasPanel,\n })}\n >\n {this.props.children}\n </div>\n </CommonWrapper>\n )}\n </SidePageContext.Consumer>\n );\n }\n}\n"]}

package/components/SidePage/SidePageContext/SidePageContext.js CHANGED Viewed

@@ -9,6 +9,9 @@ export var SidePageContext = /*#__PURE__*/React.createContext({
   updateLayout: function updateLayout() {
     return undefined;
   },
+  headerRef: function headerRef() {
+    return undefined;
+  },
   footerRef: function footerRef() {
     return undefined;
   }

package/components/SidePage/SidePageContext/SidePageContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageContext.ts"],"names":["React","SidePageContext","createContext","requestClose","undefined","getWidth","updateLayout","footerRef","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB~~;;;;;;;;;;;;;;AAcA~~,OAAO,IAAMC,eAAe,gBAAGD,KAAK,CAACE,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D,EAAzC,CAAxB;;;~~AAOPH~~,eAAe,~~CAACO~~,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\r\n\r\nimport { SidePageFooter } from './SidePageFooter';\r\n\r\nexport interface SidePageContextType {\r\n requestClose: () => void;\r\n getWidth: () => number \| string;\r\n updateLayout: () => void;\r\n footerRef: (ref: SidePageFooter \| null) => void;\r\n hasHeader?: boolean;\r\n hasFooter?: boolean;\r\n hasPanel?: boolean;\r\n}\r\n\r\nexport const SidePageContext = React.createContext<SidePageContextType>({\r\n requestClose: () => undefined,\r\n getWidth: () => 'auto',\r\n updateLayout: () => undefined,\r\n footerRef: () => undefined,\r\n});\r\n\r\nSidePageContext.displayName = 'SidePageContext';\r\n"]}
1	+ {"version":3,"sources":["SidePageContext.ts"],"names":["React","SidePageContext","createContext","requestClose","undefined","getWidth","updateLayout","headerRef","footerRef","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;;;AAgBA,OAAO,IAAMC,eAAe,gBAAGD,KAAK,CAACE,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D;AAKtEI,EAAAA,SAAS,EAAE,6BAAMJ,SAAN,EAL2D,EAAzC,CAAxB;;;AAQPH,eAAe,CAACQ,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\n\nimport { SidePageHeader } from './SidePageHeader';\nimport { SidePageFooter } from './SidePageFooter';\n\nexport interface SidePageContextType {\n requestClose: () => void;\n getWidth: () => number \| string;\n updateLayout: () => void;\n headerRef: (ref: SidePageHeader \| null) => void;\n footerRef: (ref: SidePageFooter \| null) => void;\n hasHeader?: boolean;\n hasFooter?: boolean;\n hasPanel?: boolean;\n}\n\nexport const SidePageContext = React.createContext<SidePageContextType>({\n requestClose: () => undefined,\n getWidth: () => 'auto',\n updateLayout: () => undefined,\n headerRef: () => undefined,\n footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}

package/components/SidePage/SidePageContext.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 import React from 'react';
+import { SidePageHeader } from './SidePageHeader';
 import { SidePageFooter } from './SidePageFooter';
 export interface SidePageContextType {
     requestClose: () => void;
     getWidth: () => number | string;
     updateLayout: () => void;
+    headerRef: (ref: SidePageHeader | null) => void;
     footerRef: (ref: SidePageFooter | null) => void;
     hasHeader?: boolean;
     hasFooter?: boolean;

package/components/SidePage/SidePageFooter/SidePageFooter.js CHANGED Viewed

@@ -6,10 +6,10 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { jsStyles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Футер сайдпейджа.
- *
- * @visibleName SidePage.Footer
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
  */
 export var SidePageFooter = /*#__PURE__*/function (_React$Component) {

package/components/SidePage/SidePageFooter/SidePageFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageFooter.tsx"],"names":["React","cn","LayoutEvents","ThemeContext","CommonWrapper","jsStyles","SidePageContext","SidePageFooter","context","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","componentWillUnmount","remove","render","renderMain","props","height","getContentHeight","getWidth","footer","width","footerContent","panel","footerFixed","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\n\r\nexport interface SidePageFooterProps extends CommonProps {\r\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\r\n /*\r\n Включает серый цвет в футере\r\n /\r\n panel?: boolean;\r\n}\r\n\r\n/\r\n Футер сайдпейджа.\r\n \r\n @visibleName SidePage.Footer\r\n */\r\n\r\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\r\n public static __KONTUR_REACT_UI__ = 'SidePageFooter';\r\n\r\n public static contextType = SidePageContext;\r\n public context: SidePageContextType = this.context;\r\n\r\n public state = {\r\n fixed: false,\r\n };\r\n\r\n private theme!: Theme;\r\n private content: HTMLElement \| null = null;\r\n private wrapper: HTMLElement \| null = null;\r\n private layoutSub: ReturnType<typeof LayoutEvents.addListener> \| null = null;\r\n\r\n public componentDidMount() {\r\n this.context.footerRef(this);\r\n this.update();\r\n this.layoutSub = LayoutEvents.addListener(this.update);\r\n }\r\n\r\n public componentWillUnmount() {\r\n this.context.footerRef(null);\r\n if (this.layoutSub) {\r\n this.layoutSub.remove();\r\n }\r\n }\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {theme => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n public update = () => {\r\n this.setProperStyles();\r\n };\r\n\r\n private renderMain() {\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div style={{ height: this.getContentHeight() }} ref={this.refWrapper}>\r\n <SidePageContext.Consumer>\r\n {({ getWidth }) => (\r\n <div\r\n className={jsStyles.footer()}\r\n style={{\r\n width: getWidth(),\r\n }}\r\n >\r\n <div\r\n className={cn(jsStyles.footerContent(this.theme), {\r\n [jsStyles.panel(this.theme)]: !!this.props.panel,\r\n [jsStyles.footerFixed(this.theme)]: this.state.fixed,\r\n })}\r\n ref={this.refContent}\r\n >\r\n {this.props.children}\r\n </div>\r\n </div>\r\n )}\r\n </SidePageContext.Consumer>\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private refContent = (node: HTMLElement \| null) => {\r\n this.content = node;\r\n };\r\n\r\n private refWrapper = (node: HTMLElement \| null) => {\r\n this.wrapper = node;\r\n };\r\n\r\n private setProperStyles = () => {\r\n if (this.wrapper && this.content) {\r\n const wrapperRect = this.wrapper.getBoundingClientRect();\r\n const contentRect = this.content.getBoundingClientRect();\r\n const fixed = wrapperRect.top > contentRect.top;\r\n this.setState({ fixed });\r\n }\r\n };\r\n\r\n private getContentHeight() {\r\n if (!this.content) {\r\n return 'auto';\r\n }\r\n return this.content.getBoundingClientRect().height;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePageFooter.tsx"],"names":["React","cn","LayoutEvents","ThemeContext","CommonWrapper","jsStyles","SidePageContext","SidePageFooter","context","state","fixed","theme","content","wrapper","layoutSub","update","setProperStyles","refContent","node","refWrapper","wrapperRect","getBoundingClientRect","contentRect","top","setState","componentDidMount","footerRef","addListener","componentWillUnmount","remove","render","renderMain","props","height","getContentHeight","getWidth","footer","width","footerContent","panel","footerFixed","children","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { jsStyles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageFooterProps extends CommonProps {\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\n /*\n Включает серый цвет в футере\n /\n panel?: boolean;\n}\n\n/\n Футер сайдпейджа.\n \n @visibleName SidePage.Footer\n */\n\nexport class SidePageFooter extends React.Component<SidePageFooterProps> {\n public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n public state = {\n fixed: false,\n };\n\n private theme!: Theme;\n private content: HTMLElement \| null = null;\n private wrapper: HTMLElement \| null = null;\n private layoutSub: ReturnType<typeof LayoutEvents.addListener> \| null = null;\n\n public componentDidMount() {\n this.context.footerRef(this);\n this.update();\n this.layoutSub = LayoutEvents.addListener(this.update);\n }\n\n public componentWillUnmount() {\n this.context.footerRef(null);\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\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 public update = () => {\n this.setProperStyles();\n };\n\n private renderMain() {\n return (\n <CommonWrapper {...this.props}>\n <div style={{ height: this.getContentHeight() }} ref={this.refWrapper}>\n <SidePageContext.Consumer>\n {({ getWidth }) => (\n <div\n className={jsStyles.footer()}\n style={{\n width: getWidth(),\n }}\n >\n <div\n className={cn(jsStyles.footerContent(this.theme), {\n [jsStyles.panel(this.theme)]: !!this.props.panel,\n [jsStyles.footerFixed(this.theme)]: this.state.fixed,\n })}\n ref={this.refContent}\n >\n {this.props.children}\n </div>\n </div>\n )}\n </SidePageContext.Consumer>\n </div>\n </CommonWrapper>\n );\n }\n\n private refContent = (node: HTMLElement \| null) => {\n this.content = node;\n };\n\n private refWrapper = (node: HTMLElement \| null) => {\n this.wrapper = node;\n };\n\n private setProperStyles = () => {\n if (this.wrapper && this.content) {\n const wrapperRect = this.wrapper.getBoundingClientRect();\n const contentRect = this.content.getBoundingClientRect();\n const fixed = wrapperRect.top > contentRect.top;\n this.setState({ fixed });\n }\n };\n\n private getContentHeight() {\n if (!this.content) {\n return 'auto';\n }\n return this.content.getBoundingClientRect().height;\n }\n}\n"]}

package/components/SidePage/SidePageHeader/SidePageHeader.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import cn from 'classnames';
@@ -9,10 +10,10 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { jsStyles } from "../SidePage.styles";
 import { SidePageContext } from "../SidePageContext";
-/**
- * Шапка сайдпейджа
- *
- * @visibleName SidePage.Header
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
  */
 export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
@@ -29,19 +30,29 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       isReadyToFix: false
     };
+    _this.context = _this.context;
     _this.theme = void 0;
     _this.wrapper = null;
+    _this.sticky = null;
     _this.lastRegularHeight = 0;
     _this.componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
+      _this.context.headerRef(_assertThisInitialized(_this));
     };
     _this.componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
+      _this.context.headerRef(null);
     };
     _this.update = function () {
+      var _this$sticky;
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
       _this.updateReadyToFix();
     };
@@ -100,6 +111,10 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
       _this.wrapper = el;
     };
+    _this.stickyRef = function (el) {
+      _this.sticky = el;
+    };
     return _this;
   }
@@ -119,7 +134,8 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
       ref: this.wrapperRef
     }, isReadyToFix ? /*#__PURE__*/React.createElement(Sticky, {
-      side: "top"
+      side: "top",
+      ref: this.stickyRef
     }, this.renderHeader) : this.renderHeader()));
   };
@@ -148,4 +164,5 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
   return SidePageHeader;
 }(React.Component);
-SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+SidePageHeader.contextType = SidePageContext;