@skbkontur/react-ui 4.10.0 → 4.11.0-revert-datatids

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["SidePageDataTids","root","container","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","getProps","defaultProps","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","blockBackground","onOpened","disableAnimations","isMobile","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","mobileRoot","LayoutEvents","emit","undefined","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Вызывается, когда анимация открытия сайдпейджа полностью прошла\n   */\n  onOpened?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock?: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const SidePageDataTids = {\n  root: 'SidePage__root',\n  container: 'SidePage__container',\n} as const;\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'disableFocusLock' | 'offset'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\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 static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\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, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            <ResponsiveLayout>\n              {({ isMobile }) => {\n                return (\n                  <>\n                    {blockBackground && this.renderShadow()}\n                    <CSSTransition\n                      in\n                      classNames={this.getTransitionNames()}\n                      appear={!disableAnimations}\n                      enter={!disableAnimations}\n                      exit={false}\n                      timeout={{\n                        enter: TRANSITION_TIMEOUT,\n                        exit: TRANSITION_TIMEOUT,\n                      }}\n                      nodeRef={this.rootRef}\n                      onEntered={onOpened}\n                    >\n                      {this.renderContainer(isMobile)}\n                    </CSSTransition>\n                    {isMobile && <HideBodyVerticalScroll />}\n                  </>\n                );\n              }}\n            </ResponsiveLayout>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { width, blockBackground, fromLeft } = this.props;\n    const { disableFocusLock, offset } = this.getProps();\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid={SidePageDataTids.root}\n        className={cx({\n          [styles.root()]: true,\n          [styles.mobileRoot()]: isMobile,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={\n          isMobile\n            ? undefined\n            : {\n                width: width || (blockBackground ? 800 : 500),\n                right: fromLeft ? 'auto' : offset,\n                left: fromLeft ? offset : 'auto',\n              }\n        }\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid={SidePageDataTids.container}\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly 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  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","getProps","defaultProps","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","blockBackground","onOpened","disableAnimations","isMobile","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","root","mobileRoot","LayoutEvents","emit","undefined","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Вызывается, когда анимация открытия сайдпейджа полностью прошла\n   */\n  onOpened?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock?: boolean;\n\n  /**\n   * задает отступ от края экрана\n   */\n  offset?: number | string;\n}\n\nexport interface SidePageState {\n  stackPosition?: number;\n  hasMargin?: boolean;\n  hasShadow?: boolean;\n  hasBackground?: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\ntype DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | 'disableFocusLock' | 'offset'>>;\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layout: HTMLElement | null = null;\n  private header: SidePageHeader | null = null;\n  private footer: SidePageFooter | null = null;\n  private rootRef = React.createRef<HTMLDivElement>();\n\n  public componentDidMount() {\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\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 static defaultProps: DefaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  private getProps = createPropsGetter(SidePage.defaultProps);\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, onOpened } = this.props;\n    const disableAnimations = this.getProps().disableAnimations;\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <div>\n            <ResponsiveLayout>\n              {({ isMobile }) => {\n                return (\n                  <>\n                    {blockBackground && this.renderShadow()}\n                    <CSSTransition\n                      in\n                      classNames={this.getTransitionNames()}\n                      appear={!disableAnimations}\n                      enter={!disableAnimations}\n                      exit={false}\n                      timeout={{\n                        enter: TRANSITION_TIMEOUT,\n                        exit: TRANSITION_TIMEOUT,\n                      }}\n                      nodeRef={this.rootRef}\n                      onEntered={onOpened}\n                    >\n                      {this.renderContainer(isMobile)}\n                    </CSSTransition>\n                    {isMobile && <HideBodyVerticalScroll />}\n                  </>\n                );\n              }}\n            </ResponsiveLayout>\n          </div>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private renderContainer(isMobile: boolean): JSX.Element {\n    const { width, blockBackground, fromLeft } = this.props;\n    const { disableFocusLock, offset } = this.getProps();\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.mobileRoot()]: isMobile,\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={\n          isMobile\n            ? undefined\n            : {\n                width: width || (blockBackground ? 800 : 500),\n                right: fromLeft ? 'auto' : offset,\n                left: fromLeft ? offset : 'auto',\n              }\n        }\n        wrapperRef={this.rootRef}\n      >\n        <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n          <RenderLayer onClickOutside={this.handleClickOutside} active>\n            <div\n              data-tid=\"SidePage__container\"\n              className={cx(styles.wrapper(this.theme), {\n                [styles.wrapperLeft()]: fromLeft,\n                [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n                [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n                [styles.shadow(this.theme)]: this.state.hasShadow,\n              })}\n              ref={this.layoutRef}\n            >\n              <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                {this.props.children}\n              </SidePageContext.Provider>\n            </div>\n          </RenderLayer>\n        </FocusLock>\n      </ZIndex>\n    );\n  }\n\n  private getSidePageContextProps = (): SidePageContextType => {\n    return {\n      hasHeader: this.state.hasHeader,\n      hasFooter: this.state.hasFooter,\n      hasPanel: this.state.hasPanel,\n      requestClose: this.requestClose,\n      getWidth: this.getWidth,\n      updateLayout: this.updateLayout,\n      headerRef: this.headerRef,\n      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layout) {\n      return 'auto';\n    }\n    return this.layout.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: readonly 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  private layoutRef = (ref: HTMLDivElement | null) => {\n    this.layout = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}

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

@@ -1,48 +1,48 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(): string;
-    mobileRoot(): string;
-    overlay(): string;
-    body(t: Theme): string;
-    mobileBody(): string;
-    container(t: Theme): string;
-    mobileContainer(t: Theme): string;
-    containerWithoutHeader(t: Theme): string;
-    mobileContainerWithoutHeader(t: Theme): string;
-    containerWithoutFooter(t: Theme): string;
-    containerWithPanel(t: Theme): string;
-    focusLock(): string;
-    wrapper(t: Theme): string;
-    wrapperLeft(): string;
-    wrapperMarginLeft(): string;
-    wrapperMarginRight(): string;
-    headerWrapper(): string;
-    header(t: Theme): string;
-    mobileHeader(t: Theme): string;
-    headerFixed(t: Theme): string;
-    title(t: Theme): string;
-    mobileTitle(t: Theme): string;
-    titleFixed(): string;
-    background(): string;
-    backgroundGray(t: Theme): string;
-    shadow(t: Theme): string;
-    close(t: Theme): string;
-    mobileClose(t: Theme): string;
-    closeFocus(t: Theme): string;
-    wrapperClose(t: Theme): string;
-    mobileWrapperClose(t: Theme): string;
-    panel(t: Theme): string;
-    wrapperCloseFixed(t: Theme): string;
-    footerWrapper(): string;
-    footer(t: Theme): string;
-    positionStatic(): string;
-    footerContent(t: Theme): string;
-    mobileFooterContent(t: Theme): string;
-    footerFixed(t: Theme): string;
-    panelFixed(t: Theme): string;
-    transitionLeft(): string;
-    transitionRight(): string;
-    transitionActive(): string;
-    transitionLeave(): string;
-    transitionLeaveActive(): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
+    mobileRoot(): string;
+    overlay(): string;
+    body(t: Theme): string;
+    mobileBody(): string;
+    container(t: Theme): string;
+    mobileContainer(t: Theme): string;
+    containerWithoutHeader(t: Theme): string;
+    mobileContainerWithoutHeader(t: Theme): string;
+    containerWithoutFooter(t: Theme): string;
+    containerWithPanel(t: Theme): string;
+    focusLock(): string;
+    wrapper(t: Theme): string;
+    wrapperLeft(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    headerFixed(t: Theme): string;
+    title(t: Theme): string;
+    mobileTitle(t: Theme): string;
+    titleFixed(): string;
+    background(): string;
+    backgroundGray(t: Theme): string;
+    shadow(t: Theme): string;
+    close(t: Theme): string;
+    mobileClose(t: Theme): string;
+    closeFocus(t: Theme): string;
+    wrapperClose(t: Theme): string;
+    mobileWrapperClose(t: Theme): string;
+    panel(t: Theme): string;
+    wrapperCloseFixed(t: Theme): string;
+    footerWrapper(): string;
+    footer(t: Theme): string;
+    positionStatic(): string;
+    footerContent(t: Theme): string;
+    mobileFooterContent(t: Theme): string;
+    footerFixed(t: Theme): string;
+    panelFixed(t: Theme): string;
+    transitionLeft(): string;
+    transitionRight(): string;
+    transitionActive(): string;
+    transitionLeave(): string;
+    transitionLeaveActive(): string;
+};

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

@@ -1,23 +1,20 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SidePageContextType } from './SidePageContext';
-export interface SidePageBodyProps extends CommonProps {
-    children?: React.ReactNode;
-}
-export declare const SidePageBodyDataTids: {
-    readonly root: "SidePageBody__root";
-};
-/**
- * Тело для сайдпейджа
- *
- * @visibleName SidePage.Body
- */
-export declare class SidePageBody extends React.Component<SidePageBodyProps> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<SidePageContextType>;
-    context: SidePageContextType;
-    private isMobileLayout;
-    private setRootNode;
-    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;
+    private isMobileLayout;
+    private setRootNode;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+}

package/cjs/components/SidePage/SidePageBody.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageBodyDataTids = exports.SidePageBody = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));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.SidePageBody = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -12,15 +12,11 @@ var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
 
 
-
-var SidePageBodyDataTids = {
-  root: 'SidePageBody__root' };
-
 /**
  * Тело для сайдпейджа
  *
  * @visibleName SidePage.Body
- */exports.SidePageBodyDataTids = SidePageBodyDataTids;var
+ */var
 
 
 SidePageBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SidePageBody, _React$Component);function SidePageBody() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
@@ -41,10 +37,7 @@ SidePageBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)
       function (theme) {var _cx;
         return /*#__PURE__*/(
           _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/
-          _react.default.createElement("div", {
-            "data-tid": SidePageBodyDataTids.root,
-            className: (0, _Emotion.cx)(_SidePage.styles.body(theme), (_cx = {}, _cx[_SidePage.styles.mobileBody()] = _this2.isMobileLayout, _cx)) },
-
+          _react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.body(theme), (_cx = {}, _cx[_SidePage.styles.mobileBody()] = _this2.isMobileLayout, _cx)) },
           _this2.props.children)));
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageBody.tsx"],"names":["SidePageBodyDataTids","root","SidePageBody","responsiveLayout","rootNode","context","componentDidUpdate","updateLayout","render","theme","setRootNode","props","styles","body","mobileBody","isMobileLayout","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"yWAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,oD;;;;;;AAMO,IAAMA,oBAAoB,GAAG;AAClCC,EAAAA,IAAI,EAAE,oBAD4B,EAA7B;;AAGP;AACA;AACA;AACA;AACA,G;;;AAGaC,Y,OAFZC,2B,eACAC,kB;;;;AAKQC,IAAAA,O,GAA+B,MAAKA,O;;;;AAIpCC,EAAAA,kB,GAAP,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUX,oBAAoB,CAACC,IADjC;AAEE,YAAA,SAAS,EAAE,iBAAGW,iBAAOC,IAAP,CAAYJ,KAAZ,CAAH,iBAA0BG,iBAAOE,UAAP,EAA1B,IAAgD,MAAI,CAACC,cAArD,OAFb;;AAIG,UAAA,MAAI,CAACJ,KAAL,CAAWK,QAJd,CADF,CADF;;;;AAUD,OAZH,CADF;;;AAgBD,G,uBA7B+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtBC,W,GAAcC,gC","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageBodyProps extends CommonProps {\n  children?: React.ReactNode;\n}\n\nexport const SidePageBodyDataTids = {\n  root: 'SidePageBody__root',\n} as const;\n/**\n * Тело для сайдпейджа\n *\n * @visibleName SidePage.Body\n */\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={SidePageBodyDataTids.root}\n                className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}\n              >\n                {this.props.children}\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageBody.tsx"],"names":["SidePageBody","responsiveLayout","rootNode","context","componentDidUpdate","updateLayout","render","theme","setRootNode","props","styles","body","mobileBody","isMobileLayout","children","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"0UAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,oD;;;;;AAKA;AACA;AACA;AACA;AACA,G;;;AAGaA,Y,OAFZC,2B,eACAC,kB;;;;AAKQC,IAAAA,O,GAA+B,MAAKA,O;;;;AAIpCC,EAAAA,kB,GAAP,8BAA4B;AAC1B,SAAKD,OAAL,CAAaE,YAAb;AACD,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV;AACE,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE,gDAAK,SAAS,EAAE,iBAAGC,iBAAOC,IAAP,CAAYJ,KAAZ,CAAH,iBAA0BG,iBAAOE,UAAP,EAA1B,IAAgD,MAAI,CAACC,cAArD,OAAhB;AACG,UAAA,MAAI,CAACJ,KAAL,CAAWK,QADd,CADF,CADF;;;;AAOD,OATH,CADF;;;AAaD,G,uBA1B+BC,eAAMC,S,WACxBC,mB,GAAsB,c,UAEtBC,W,GAAcC,gC","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageBodyProps extends CommonProps {\n  children?: React.ReactNode;\n}\n/**\n * Тело для сайдпейджа\n *\n * @visibleName SidePage.Body\n */\n@responsiveLayout\n@rootNode\nexport class SidePageBody extends React.Component<SidePageBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageBody';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidUpdate() {\n    this.context.updateLayout();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div className={cx(styles.body(theme), { [styles.mobileBody()]: this.isMobileLayout })}>\n                {this.props.children}\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n}\n"]}

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

@@ -1,19 +1,16 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export declare type SidePageContainerProps = CommonProps;
-export declare const SidePageContainerDataTids: {
-    readonly root: "SidePageContainer__root";
-};
-/**
- * Контейнер с отступами
- *
- * @visibleName SidePage.Container
- */
-export declare class SidePageContainer extends React.Component<SidePageContainerProps> {
-    static __KONTUR_REACT_UI__: string;
-    private theme;
-    private isMobileLayout;
-    private setRootNode;
-    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;
+    private isMobileLayout;
+    private setRootNode;
+    render(): JSX.Element;
+    renderMain(): JSX.Element;
+}

package/cjs/components/SidePage/SidePageContainer.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageContainerDataTids = exports.SidePageContainer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));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.SidePageContainer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
@@ -12,15 +12,11 @@ var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;
 
 
 
-var SidePageContainerDataTids = {
-  root: 'SidePageContainer__root' };
-
-
 /**
  * Контейнер с отступами
  *
  * @visibleName SidePage.Container
- */exports.SidePageContainerDataTids = SidePageContainerDataTids;var
+ */var
 
 
 SidePageContainer = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SidePageContainer, _React$Component);function SidePageContainer() {return _React$Component.apply(this, arguments) || this;}var _proto = SidePageContainer.prototype;_proto.
@@ -47,7 +43,6 @@ SidePageContainer = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.root
       function (_ref) {var _cx;var hasHeader = _ref.hasHeader,hasFooter = _ref.hasFooter,hasPanel = _ref.hasPanel;return /*#__PURE__*/(
           _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), /*#__PURE__*/
           _react.default.createElement("div", {
-            "data-tid": SidePageContainerDataTids.root,
             className: (0, _Emotion.cx)((_cx = {}, _cx[
             _SidePage.styles.container(_this2.theme)] = true, _cx[
             _SidePage.styles.containerWithoutHeader(_this2.theme)] = !hasHeader, _cx[

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageContainer.tsx"],"names":["SidePageContainerDataTids","root","SidePageContainer","responsiveLayout","rootNode","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","styles","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"mXAAA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,oD;;;;AAIO,IAAMA,yBAAyB,GAAG;AACvCC,EAAAA,IAAI,EAAE,yBADiC,EAAlC;;;AAIP;AACA;AACA;AACA;AACA,G;;;AAGaC,iB,OAFZC,2B,eACAC,kB;;;;;;;AAQQC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB;AACE,mCAAC,gCAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,wBAAUZ,yBAAyB,CAACC,IADtC;AAEE,YAAA,SAAS,EAAE;AACRY,6BAAOC,SAAP,CAAiB,MAAI,CAACR,KAAtB,CADQ,IACuB,IADvB;AAERO,6BAAOE,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAFQ,IAEoC,CAACE,SAFrC;AAGRK,6BAAOG,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAHQ,IAGoC,CAACG,SAHrC;AAIRI,6BAAOI,kBAAP,CAA0B,MAAI,CAACX,KAA/B,CAJQ,IAIgCI,QAJhC;AAKRG,6BAAOK,eAAP,CAAuB,MAAI,CAACZ,KAA5B,CALQ,IAK6B,MAAI,CAACa,cALlC;AAMRN,6BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0C,MAAI,CAACa,cAAL,IAAuB,CAACX,SANlE,OAFb;;;AAWG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAXd,CADF,CADD,GADH,CADF;;;;;;AAqBD,G,4BAxCoCC,eAAMC,S,WAC7BC,mB,GAAsB,mB","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\nexport const SidePageContainerDataTids = {\n  root: 'SidePageContainer__root',\n} as const;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              data-tid={SidePageContainerDataTids.root}\n              className={cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SidePageContainer.tsx"],"names":["SidePageContainer","responsiveLayout","rootNode","render","theme","renderMain","hasHeader","hasFooter","hasPanel","setRootNode","props","styles","container","containerWithoutHeader","containerWithoutFooter","containerWithPanel","mobileContainer","isMobileLayout","mobileContainerWithoutHeader","children","React","Component","__KONTUR_REACT_UI__"],"mappings":"+UAAA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA,oD;;;;AAIA;AACA;AACA;AACA;AACA,G;;;AAGaA,iB,OAFZC,2B,eACAC,kB;;;;;;;AAQQC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,gBAACC,KAAD,EAAW;AACV,QAAA,KAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,KAAI,CAACC,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,G;;AAEMA,EAAAA,U,GAAP,sBAAoB;AAClB;AACE,mCAAC,gCAAD,CAAiB,QAAjB;AACG,mCAAGC,SAAH,QAAGA,SAAH,CAAcC,SAAd,QAAcA,SAAd,CAAyBC,QAAzB,QAAyBA,QAAzB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACC,KAAvD;AACE;AACE,YAAA,SAAS,EAAE;AACRC,6BAAOC,SAAP,CAAiB,MAAI,CAACR,KAAtB,CADQ,IACuB,IADvB;AAERO,6BAAOE,sBAAP,CAA8B,MAAI,CAACT,KAAnC,CAFQ,IAEoC,CAACE,SAFrC;AAGRK,6BAAOG,sBAAP,CAA8B,MAAI,CAACV,KAAnC,CAHQ,IAGoC,CAACG,SAHrC;AAIRI,6BAAOI,kBAAP,CAA0B,MAAI,CAACX,KAA/B,CAJQ,IAIgCI,QAJhC;AAKRG,6BAAOK,eAAP,CAAuB,MAAI,CAACZ,KAA5B,CALQ,IAK6B,MAAI,CAACa,cALlC;AAMRN,6BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0C,MAAI,CAACa,cAAL,IAAuB,CAACX,SANlE,OADb;;;AAUG,UAAA,MAAI,CAACI,KAAL,CAAWS,QAVd,CADF,CADD,GADH,CADF;;;;;;AAoBD,G,4BAvCoCC,eAAMC,S,WAC7BC,mB,GAAsB,mB","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext } from './SidePageContext';\n\nexport type SidePageContainerProps = CommonProps;\n\n/**\n * Контейнер с отступами\n *\n * @visibleName SidePage.Container\n */\n@responsiveLayout\n@rootNode\nexport class SidePageContainer extends React.Component<SidePageContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'SidePageContainer';\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    return (\n      <SidePageContext.Consumer>\n        {({ hasHeader, hasFooter, hasPanel }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <div\n              className={cx({\n                [styles.container(this.theme)]: true,\n                [styles.containerWithoutHeader(this.theme)]: !hasHeader,\n                [styles.containerWithoutFooter(this.theme)]: !hasFooter,\n                [styles.containerWithPanel(this.theme)]: hasPanel,\n                [styles.mobileContainer(this.theme)]: this.isMobileLayout,\n                [styles.mobileContainerWithoutHeader(this.theme)]: this.isMobileLayout && !hasHeader,\n              })}\n            >\n              {this.props.children}\n            </div>\n          </CommonWrapper>\n        )}\n      </SidePageContext.Consumer>\n    );\n  }\n}\n"]}

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

@@ -1,17 +1,17 @@
-import React from 'react';
-import { SidePageFooter } from './SidePageFooter';
-import { SidePageHeader } from './SidePageHeader';
-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;
-    setHasHeader?: (value?: boolean) => void;
-    setHasFooter?: (value?: boolean) => void;
-    setHasPanel?: (value?: boolean) => void;
-}
-export declare const SidePageContext: React.Context<SidePageContextType>;
+import React from 'react';
+import { SidePageFooter } from './SidePageFooter';
+import { SidePageHeader } from './SidePageHeader';
+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;
+    setHasHeader?: (value?: boolean) => void;
+    setHasFooter?: (value?: boolean) => void;
+    setHasPanel?: (value?: boolean) => void;
+}
+export declare const SidePageContext: React.Context<SidePageContextType>;

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

@@ -1,52 +1,49 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { GappedProps } from '../Gapped';
-import { SidePageContextType } from './SidePageContext';
-export interface SidePageFooterProps extends Omit<CommonProps, 'children'> {
-    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
-    /**
-     * Включает серый цвет в футере
-     */
-    panel?: boolean;
-    /**
-     * Закрепляет футер снизу сайдпейджа
-     */
-    sticky?: boolean;
-    /**
-     * Задаёт отступ между элементами футера
-     */
-    gap?: GappedProps['gap'];
-}
-interface SidePageFooterState {
-    fixed: boolean;
-}
-export declare const SidePageFooterDataTids: {
-    readonly root: "SidePageFooter__root";
-};
-/**
- * Футер сайдпейджа.
- *
- * @visibleName SidePage.Footer
- */
-export declare class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {
-    static __KONTUR_REACT_UI__: string;
-    static contextType: React.Context<SidePageContextType>;
-    context: SidePageContextType;
-    private isMobileLayout;
-    state: SidePageFooterState;
-    private theme;
-    private content;
-    private layoutSub;
-    private setRootNode;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
-    componentWillUnmount(): void;
-    getSticky(): boolean;
-    render(): JSX.Element;
-    update: () => void;
-    private renderMain;
-    private refContent;
-    private setProperStyles;
-    private getContentHeight;
-}
-export {};
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
+import { SidePageContextType } from './SidePageContext';
+export interface SidePageFooterProps extends Omit<CommonProps, 'children'> {
+    children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
+    /**
+     * Включает серый цвет в футере
+     */
+    panel?: boolean;
+    /**
+     * Закрепляет футер снизу сайдпейджа
+     */
+    sticky?: boolean;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
+}
+interface SidePageFooterState {
+    fixed: boolean;
+}
+/**
+ * Футер сайдпейджа.
+ *
+ * @visibleName SidePage.Footer
+ */
+export declare class SidePageFooter extends React.Component<SidePageFooterProps, SidePageFooterState> {
+    static __KONTUR_REACT_UI__: string;
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
+    private isMobileLayout;
+    state: SidePageFooterState;
+    private theme;
+    private content;
+    private layoutSub;
+    private setRootNode;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<SidePageFooterProps>): void;
+    componentWillUnmount(): void;
+    getSticky(): boolean;
+    render(): JSX.Element;
+    update: () => void;
+    private renderMain;
+    private refContent;
+    private setProperStyles;
+    private getContentHeight;
+}
+export {};

package/cjs/components/SidePage/SidePageFooter.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageFooterDataTids = exports.SidePageFooter = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));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.SidePageFooter = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -33,16 +33,12 @@ var _SidePageContext = require("./SidePageContext");var _class, _class2, _temp;f
 
 
 
-
-var SidePageFooterDataTids = {
-  root: 'SidePageFooter__root' };
-
 
 /**
  * Футер сайдпейджа.
  *
  * @visibleName SidePage.Footer
- */exports.SidePageFooterDataTids = SidePageFooterDataTids;var
+ */var
 
 
 SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(SidePageFooter, _React$Component);function SidePageFooter() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
@@ -143,10 +139,6 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
-
-
-
-
 
 
 
@@ -164,7 +156,7 @@ SidePageFooter = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
         var _fixed = wrapperRect.top > contentRect.top;
         _this.setState({ fixed: _fixed });
       }
-    };return _this;}var _proto = SidePageFooter.prototype;_proto.componentDidMount = function componentDidMount() {var _this$context$setHasF, _this$context, _this$context$setHasP, _this$context2;this.context.footerRef(this);this.update();this.layoutSub = LayoutEvents.addListener(this.update);(_this$context$setHasF = (_this$context = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF.call(_this$context);(_this$context$setHasP = (_this$context2 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP.call(_this$context2, this.props.panel);};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$context$setHasP2, _this$context3;this.props.panel !== prevProps.panel && ((_this$context$setHasP2 = (_this$context3 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP2.call(_this$context3, this.props.panel));};_proto.componentWillUnmount = function componentWillUnmount() {var _this$context$setHasF2, _this$context4, _this$context$setHasP3, _this$context5;this.context.footerRef(null);if (this.layoutSub) {this.layoutSub.remove();}(_this$context$setHasF2 = (_this$context4 = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF2.call(_this$context4, false);(_this$context$setHasP3 = (_this$context5 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP3.call(_this$context5, false);};_proto.getSticky = function getSticky() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_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 _this3 = this;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SidePageFooterDataTids.root, style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx, _cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footer(_this3.theme), (_cx = {}, _cx[_SidePage.styles.positionStatic()] = !_this3.getSticky(), _cx)), style: { width: getWidth() } }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[_SidePage.styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[_SidePage.styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)), ref: _this3.refContent }, (0, _utils.isNonNullable)(_this3.props.gap) ? /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: _this3.isMobileLayout, gap: _this3.props.gap }, _this3.props.children) : _this3.props.children));})));};_proto.
+    };return _this;}var _proto = SidePageFooter.prototype;_proto.componentDidMount = function componentDidMount() {var _this$context$setHasF, _this$context, _this$context$setHasP, _this$context2;this.context.footerRef(this);this.update();this.layoutSub = LayoutEvents.addListener(this.update);(_this$context$setHasF = (_this$context = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF.call(_this$context);(_this$context$setHasP = (_this$context2 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP.call(_this$context2, this.props.panel);};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var _this$context$setHasP2, _this$context3;this.props.panel !== prevProps.panel && ((_this$context$setHasP2 = (_this$context3 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP2.call(_this$context3, this.props.panel));};_proto.componentWillUnmount = function componentWillUnmount() {var _this$context$setHasF2, _this$context4, _this$context$setHasP3, _this$context5;this.context.footerRef(null);if (this.layoutSub) {this.layoutSub.remove();}(_this$context$setHasF2 = (_this$context4 = this.context).setHasFooter) == null ? void 0 : _this$context$setHasF2.call(_this$context4, false);(_this$context$setHasP3 = (_this$context5 = this.context).setHasPanel) == null ? void 0 : _this$context$setHasP3.call(_this$context5, false);};_proto.getSticky = function getSticky() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_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 _this3 = this;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { style: { height: this.getContentHeight() }, className: _SidePage.styles.footerWrapper() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Consumer, null, function (_ref) {var _cx, _cx2;var getWidth = _ref.getWidth;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footer(_this3.theme), (_cx = {}, _cx[_SidePage.styles.positionStatic()] = !_this3.getSticky(), _cx)), style: { width: getWidth() } }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_SidePage.styles.footerContent(_this3.theme), (_cx2 = {}, _cx2[_SidePage.styles.footerFixed(_this3.theme)] = _this3.state.fixed, _cx2[_SidePage.styles.panel(_this3.theme)] = !!_this3.props.panel, _cx2[_SidePage.styles.panelFixed(_this3.theme)] = !!_this3.props.panel && _this3.state.fixed, _cx2[_SidePage.styles.mobileFooterContent(_this3.theme)] = _this3.isMobileLayout, _cx2)), ref: _this3.refContent }, (0, _utils.isNonNullable)(_this3.props.gap) ? /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { vertical: _this3.isMobileLayout, gap: _this3.props.gap }, _this3.props.children) : _this3.props.children));})));};_proto.
 
   getContentHeight = function getContentHeight() {
     if (!this.content) {