@skbkontur/react-ui 2.17.4-source-maps.1 → 2.17.7-sidepage-header

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

@@ -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';\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\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 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    };\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 footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n}\n"]}
+{"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

@@ -1,86 +1,88 @@
-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;
-}
-export interface SidePageState {
-    stackPosition?: number;
-    hasMargin?: boolean;
-    hasShadow?: boolean;
-    hasBackground?: 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;
-    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;
-}
+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;
+}
+export interface SidePageState {
+    stackPosition?: number;
+    hasMargin?: boolean;
+    hasShadow?: boolean;
+    hasBackground?: 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;
+    private header;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * Обновляет разметку компонента.
+     * @public
+     */
+    updateLayout: () => void;
+    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 headerRef;
+    private footerRef;
+}

package/components/SidePage/SidePage.styles.d.ts

@@ -1,31 +1,31 @@
-export declare const jsStyles: {
-    root(): string;
-    overlay(): string;
-    body(): string;
-    container(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    containerWithoutHeader(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    containerWithoutFooter(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    containerWithPanel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    wrapper(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    layout(): string;
-    header(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    headerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    title(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    titleFixed(): string;
-    background(): string;
-    backgroundGray(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    shadow(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    leftSide(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    panel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    closeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    fixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    footer(): string;
-    footerContent(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    footerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    transitionLeft(): string;
-    transitionRight(): string;
-    transitionActive(): string;
-    transitionLeave(): string;
-    transitionLeaveActive(): string;
-};
+export declare const jsStyles: {
+    root(): string;
+    overlay(): string;
+    body(): string;
+    container(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    containerWithoutHeader(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    containerWithoutFooter(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    containerWithPanel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    wrapper(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    layout(): string;
+    header(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    headerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    title(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    titleFixed(): string;
+    background(): string;
+    backgroundGray(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    shadow(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    leftSide(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    panel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    closeIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    fixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    footer(): string;
+    footerContent(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    footerFixed(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+    transitionLeft(): string;
+    transitionRight(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
+};

package/components/SidePage/SidePageBody.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SidePageContextType } from './SidePageContext';
-export interface SidePageBodyProps extends CommonProps {
-    children?: React.ReactNode;
-}
-/**
- * Тело для сайдпейджа
- *
- * @visibleName SidePage.Body
- */
-export declare class SidePageBody extends React.Component<SidePageBodyProps> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<SidePageContextType>;
-    context: SidePageContextType;
-    componentDidUpdate(): void;
-    render(): JSX.Element;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageBodyProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/**
+ * Тело для сайдпейджа
+ *
+ * @visibleName SidePage.Body
+ */
+export declare class SidePageBody extends React.Component<SidePageBodyProps> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+}

package/components/SidePage/SidePageContainer.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type SidePageContainerProps = CommonProps;
-/**
- * Контейнер с отступами
- *
- * @visibleName SidePage.Container
- */
-export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
-    static __KONTUR_REACT_UI__: string;
-    private theme;
-    render(): JSX.Element;
-    renderMain(): JSX.Element;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type SidePageContainerProps = CommonProps;
+/**
+ * Контейнер с отступами
+ *
+ * @visibleName SidePage.Container
+ */
+export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
+    static __KONTUR_REACT_UI__: string;
+    private theme;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/components/SidePage/SidePageContext/SidePageContext.js

@@ -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

@@ -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';\n\nimport { SidePageFooter } from './SidePageFooter';\n\nexport interface SidePageContextType {\n  requestClose: () => void;\n  getWidth: () => number | string;\n  updateLayout: () => 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  footerRef: () => undefined,\n});\n\nSidePageContext.displayName = 'SidePageContext';\n"]}
+{"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

@@ -1,12 +1,14 @@
-import React from 'react';
-import { SidePageFooter } from './SidePageFooter';
-export interface SidePageContextType {
-    requestClose: () => void;
-    getWidth: () => number | string;
-    updateLayout: () => void;
-    footerRef: (ref: SidePageFooter | null) => void;
-    hasHeader?: boolean;
-    hasFooter?: boolean;
-    hasPanel?: boolean;
-}
-export declare const SidePageContext: React.Context<SidePageContextType>;
+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;
+    hasPanel?: boolean;
+}
+export declare const SidePageContext: React.Context<SidePageContextType>;

package/components/SidePage/SidePageFooter.d.ts

@@ -1,36 +1,36 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SidePageContextType } from './SidePageContext';
-export interface SidePageFooterProps extends CommonProps {
-    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
-    /**
-     * Включает серый цвет в футере
-     */
-    panel?: boolean;
-}
-/**
- * Футер сайдпейджа.
- *
- * @visibleName SidePage.Footer
- */
-export declare class SidePageFooter extends React.Component<SidePageFooterProps> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<SidePageContextType>;
-    context: SidePageContextType;
-    state: {
-        fixed: boolean;
-    };
-    private theme;
-    private content;
-    private wrapper;
-    private layoutSub;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    update: () => void;
-    private renderMain;
-    private refContent;
-    private refWrapper;
-    private setProperStyles;
-    private getContentHeight;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageFooterProps extends CommonProps {
+    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+    /**
+     * Включает серый цвет в футере
+     */
+    panel?: boolean;
+}
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */
+export declare class SidePageFooter extends React.Component<SidePageFooterProps> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    state: {
+        fixed: boolean;
+    };
+    private theme;
+    private content;
+    private wrapper;
+    private layoutSub;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    update: () => void;
+    private renderMain;
+    private refContent;
+    private refWrapper;
+    private setProperStyles;
+    private getContentHeight;
+}

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -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';
@@ -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;