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

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","React","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","ModalStack","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","jsStyles","root","leftSide","Boolean","LayoutEvents","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","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer"],"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":["TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","header","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","React","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","ModalStack","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","jsStyles","root","leftSide","Boolean","LayoutEvents","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","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer"],"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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/SidePage/SidePageContext.js

@@ -12,10 +12,13 @@
 
 
 
+
+
 var SidePageContext = /*#__PURE__*/_react.default.createContext({
   requestClose: function requestClose() {return undefined;},
   getWidth: function getWidth() {return 'auto';},
   updateLayout: function updateLayout() {return undefined;},
+  headerRef: function headerRef() {return undefined;},
   footerRef: function footerRef() {return undefined;} });exports.SidePageContext = SidePageContext;
 
 

package/cjs/components/SidePage/SidePageContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContext.ts"],"names":["SidePageContext","React","createContext","requestClose","undefined","getWidth","updateLayout","footerRef","displayName"],"mappings":"6JAAA;;;;;;;;;;;;;;AAcO,IAAMA,eAAe,gBAAGC,eAAMC,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,C;;;AAOPJ,eAAe,CAACQ,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":["SidePageContext","React","createContext","requestClose","undefined","getWidth","updateLayout","headerRef","footerRef","displayName"],"mappings":"6JAAA;;;;;;;;;;;;;;;;AAgBO,IAAMA,eAAe,gBAAGC,eAAMC,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,C;;;AAQPJ,eAAe,CAACS,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/cjs/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/cjs/components/SidePage/SidePageHeader.d.ts

@@ -1,34 +1,39 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface SidePageHeaderProps extends CommonProps {
-    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
-}
-export interface SidePageHeaderState {
-    isReadyToFix: boolean;
-}
-/**
- * Шапка сайдпейджа
- *
- * @visibleName SidePage.Header
- */
-export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
-    static __KONTUR_REACT_UI__: string;
-    state: {
-        isReadyToFix: boolean;
-    };
-    private theme;
-    private wrapper;
-    private lastRegularHeight;
-    get regularHeight(): number;
-    get fixedHeaderHeight(): number;
-    componentDidMount: () => void;
-    componentWillUnmount: () => void;
-    update: () => void;
-    render(): JSX.Element;
-    private renderMain;
-    private renderHeader;
-    private renderCloseContent;
-    private renderClose;
-    private updateReadyToFix;
-    private wrapperRef;
-}
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageHeaderProps extends CommonProps {
+    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+}
+export interface SidePageHeaderState {
+    isReadyToFix: boolean;
+}
+/**
+ * Шапка сайдпейджа
+ *
+ * @visibleName SidePage.Header
+ */
+export declare class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {
+    static __KONTUR_REACT_UI__: string;
+    state: {
+        isReadyToFix: boolean;
+    };
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private theme;
+    private wrapper;
+    private sticky;
+    private lastRegularHeight;
+    get regularHeight(): number;
+    get fixedHeaderHeight(): number;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    update: () => void;
+    render(): JSX.Element;
+    private renderMain;
+    private renderHeader;
+    private renderCloseContent;
+    private renderClose;
+    private updateReadyToFix;
+    private wrapperRef;
+    private stickyRef;
+}

package/cjs/components/SidePage/SidePageHeader.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Sticky = require("../Sticky");
@@ -31,8 +31,12 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
       isReadyToFix: false };_this.
 
 
+
+    context = _this.context;_this.
+
     theme = void 0;_this.
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
 
 
@@ -53,13 +57,16 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
     componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
+      _this.context.headerRef((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
+      _this.context.headerRef(null);
     };_this.
 
-    update = function () {
+    update = function () {var _this$sticky;
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
       _this.updateReadyToFix();
     };_this.
 
@@ -78,6 +85,12 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
 
 
+
+
+
+
+
+
 
 
 
@@ -138,4 +151,8 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
 
     wrapperRef = function (el) {
       _this.wrapper = el;
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+    };_this.
+
+    stickyRef = function (el) {
+      _this.sticky = el;
+    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top", ref: this.stickyRef }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';SidePageHeader.contextType = _SidePageContext.SidePageContext;

package/cjs/components/SidePage/SidePageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","jsStyles","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\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 } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public state = {\n    isReadyToFix: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n  };\n\n  public update = () => {\n    this.updateReadyToFix();\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 { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cn(jsStyles.header(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose()}\n        <div className={cn(jsStyles.title(this.theme), { [jsStyles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderCloseContent = (fixed: boolean) => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <a\n          className={cn(jsStyles.close(this.theme), {\n            [jsStyles.fixed(this.theme)]: fixed,\n          })}\n          onClick={requestClose}\n          data-tid=\"SidePage__close\"\n        >\n          <span\n            className={cn(jsStyles.closeIcon(this.theme), {\n              [jsStyles.fixed(this.theme)]: fixed,\n            })}\n          >\n            <CrossIcon />\n          </span>\n        </a>\n      )}\n    </SidePageContext.Consumer>\n  );\n\n  private renderClose = () => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <Sticky side=\"top\" offset={stickyOffset}>\n        {this.renderCloseContent}\n      </Sticky>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState(state => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n}\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","state","isReadyToFix","context","theme","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","jsStyles","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\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 SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public state = {\n    isReadyToFix: false,\n  };\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.headerRef(null);\n  };\n\n  public update = () => {\n    this.sticky?.reflow();\n    this.updateReadyToFix();\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 { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef}>\n          {isReadyToFix ? (\n            <Sticky side=\"top\" ref={this.stickyRef}>\n              {this.renderHeader}\n            </Sticky>\n          ) : (\n            this.renderHeader()\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cn(jsStyles.header(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose()}\n        <div className={cn(jsStyles.title(this.theme), { [jsStyles.titleFixed()]: fixed })}>\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderCloseContent = (fixed: boolean) => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <a\n          className={cn(jsStyles.close(this.theme), {\n            [jsStyles.fixed(this.theme)]: fixed,\n          })}\n          onClick={requestClose}\n          data-tid=\"SidePage__close\"\n        >\n          <span\n            className={cn(jsStyles.closeIcon(this.theme), {\n              [jsStyles.fixed(this.theme)]: fixed,\n            })}\n          >\n            <CrossIcon />\n          </span>\n        </a>\n      )}\n    </SidePageContext.Consumer>\n  );\n\n  private renderClose = () => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <Sticky side=\"top\" offset={stickyOffset}>\n        {this.renderCloseContent}\n      </Sticky>\n    );\n  };\n\n  private updateReadyToFix = () => {\n    if (this.wrapper) {\n      const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n      const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n      this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private stickyRef = (el: Sticky | null) => {\n    this.sticky = el;\n  };\n}\n"]}

package/cjs/components/SidePage/helpers.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { SidePageFooterProps } from './SidePageFooter';
-import { SidePageHeaderProps } from './SidePageHeader';
-export declare const isFooter: (component: React.ReactNode) => component is React.Component<SidePageFooterProps, {}, any>;
-export declare const isHeader: (component: React.ReactNode) => component is React.Component<SidePageHeaderProps, {}, any>;
+import React from 'react';
+import { SidePageFooterProps } from './SidePageFooter';
+import { SidePageHeaderProps } from './SidePageHeader';
+export declare const isFooter: (component: React.ReactNode) => component is React.Component<SidePageFooterProps, {}, any>;
+export declare const isHeader: (component: React.ReactNode) => component is React.Component<SidePageHeaderProps, {}, any>;

package/cjs/components/SidePage/index.d.ts

@@ -1,5 +1,5 @@
-export * from './SidePage';
-export * from './SidePageHeader';
-export * from './SidePageBody';
-export * from './SidePageFooter';
-export * from './SidePageContainer';
+export * from './SidePage';
+export * from './SidePageHeader';
+export * from './SidePageBody';
+export * from './SidePageFooter';
+export * from './SidePageContainer';