@skbkontur/react-ui 4.0.0-beta.5 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layoutRef","footer","rootRef","React","createRef","updateLayout","update","getSidePageContextProps","requestClose","getWidth","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","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","blockBackground","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","defaultProps","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 { 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';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\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\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n  public static __KONTUR_REACT_UI__ = 'SidePage';\n\n  public static Header = SidePageHeader;\n  public static Body = SidePageBody;\n  public static Footer = SidePageFooter;\n  public static Container = SidePageContainer;\n  public state: SidePageState = {\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private layoutRef: HTMLElement | null = null;\n  private footer: SidePageFooter | null = null;\n  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 (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n  }\n\n  /**\n   * Обновляет разметку компонента.\n   * @public\n   */\n  public updateLayout = (): void => {\n    if (this.footer) {\n      this.footer.update();\n    }\n  };\n\n  public static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\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                    >\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, disableFocusLock, offset } = this.props;\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      footerRef: this.footerRef,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n  };\n\n  private getWidth = () => {\n    if (!this.layoutRef) {\n      return 'auto';\n    }\n    return this.layoutRef.clientWidth;\n  };\n\n  private renderShadow(): JSX.Element {\n    return (\n      <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n        <HideBodyVerticalScroll key=\"hbvs\" />\n        <div\n          key=\"overlay\"\n          className={cx({\n            [styles.background()]: true,\n            [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n          })}\n        />\n      </ZIndex>\n    );\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n    return {\n      enter: transition(),\n      enterActive: styles.transitionActive(),\n      exit: styles.transitionLeave(),\n      exitActive: styles.transitionLeaveActive(),\n      appear: transition(),\n      appearActive: styles.transitionActive(),\n    };\n  }\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n    const currentSidePagePosition = sidePages.indexOf(this);\n\n    const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n    const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n    const hasBackground = ModalStack.isBlocking(this);\n\n    this.setState({\n      stackPosition: stack.indexOf(this),\n      hasMargin,\n      hasShadow,\n      hasBackground,\n    });\n  };\n\n  private handleClickOutside = (e: Event) => {\n    if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n      // ignore mousedown on window scrollbar\n      if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n        return;\n      }\n      this.requestClose();\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private footerRef = (ref: SidePageFooter | null) => {\n    this.footer = ref;\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","disablePageScroll","e","reachedTop","scrollTop","deltaY","reachedBottom","scrollHeight","offsetHeight","props","blockBackground","preventDefault","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","current","passive","add","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","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","defaultProps","isTestEnv"],"mappings":"kWAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,6C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,kBAAkB,GAAG,GAA3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaC,Q;;;;;;;AAOJC,IAAAA,K,GAAuB;AAC5BC,MAAAA,SAAS,EAAE,KADiB;AAE5BC,MAAAA,SAAS,EAAE,KAFiB;AAG5BC,MAAAA,QAAQ,EAAE,KAHkB,E;;;AAMtBC,IAAAA,iB,GAAmD,I;AACnDC,IAAAA,M,GAA6B,I;AAC7BC,IAAAA,M,GAAgC,I;AAChCC,IAAAA,M,GAAgC,I;AAChCC,IAAAA,O,gBAAUC,eAAMC,SAAN,E;;;;;;;;;;;;;;;;;;;;;AAqBXC,IAAAA,Y,GAAe,YAAY;AAChC,4BAAKL,MAAL,kCAAaM,MAAb;AACA,4BAAKL,MAAL,kCAAaK,MAAb;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuGOC,IAAAA,iB,GAAoB,UAACC,CAAD,EAAmB;AAC7C,UAAMT,MAAM,GAAG,MAAKA,MAApB;AACA,UAAI,CAACA,MAAL,EAAa;AACb,UAAMU,UAAU,GAAGV,MAAM,CAACW,SAAP,IAAoB,CAApB,IAAyBF,CAAC,CAACG,MAAF,GAAW,CAAvD;AACA,UAAMC,aAAa,GAAGb,MAAM,CAACW,SAAP,IAAoBX,MAAM,CAACc,YAAP,GAAsBd,MAAM,CAACe,YAAjD,IAAiEN,CAAC,CAACG,MAAF,GAAW,CAAlG;;AAEA,UAAI,CAAC,MAAKI,KAAL,CAAWC,eAAZ,KAAgCP,UAAU,IAAIG,aAA9C,CAAJ,EAAkE;AAChEJ,QAAAA,CAAC,CAACS,cAAF;AACD;AACF,K;;AAEOC,IAAAA,uB,GAA0B,YAA2B;AAC3D,aAAO;AACLvB,QAAAA,SAAS,EAAE,MAAKD,KAAL,CAAWC,SADjB;AAELC,QAAAA,SAAS,EAAE,MAAKF,KAAL,CAAWE,SAFjB;AAGLC,QAAAA,QAAQ,EAAE,MAAKH,KAAL,CAAWG,QAHhB;AAILsB,QAAAA,YAAY,EAAE,MAAKA,YAJd;AAKLC,QAAAA,QAAQ,EAAE,MAAKA,QALV;AAMLf,QAAAA,YAAY,EAAE,MAAKA,YANd;AAOLgB,QAAAA,SAAS,EAAE,MAAKA,SAPX;AAQLC,QAAAA,SAAS,EAAE,MAAKA,SARX;AASLC,QAAAA,YAAY,EAAE,MAAKA,YATd;AAULC,QAAAA,YAAY,EAAE,MAAKA,YAVd;AAWLC,QAAAA,WAAW,EAAE,MAAKA,WAXb,EAAP;;AAaD,K;;AAEOL,IAAAA,Q,GAAW,YAAM;AACvB,UAAI,CAAC,MAAKrB,MAAV,EAAkB;AAChB,eAAO,MAAP;AACD;AACD,aAAO,MAAKA,MAAL,CAAY2B,WAAnB;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BOC,IAAAA,iB,GAAoB,UAACC,KAAD,EAA2C;AACrE,UAAMC,SAAS,GAAGD,KAAK,CAACE,MAAN,CAAa,UAACC,CAAD,UAAOA,CAAC,YAAYtC,QAAb,IAAyBsC,CAAC,CAAChB,KAAF,CAAQiB,QAAR,KAAqB,MAAKjB,KAAL,CAAWiB,QAAhE,EAAb,CAAlB;AACA,UAAMC,uBAAuB,GAAGJ,SAAS,CAACK,OAAV,6CAAhC;;AAEA,UAAMC,SAAS,GAAGN,SAAS,CAACO,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,KAAKJ,SAAS,CAACO,MAAV,GAAmB,CAAzF;AACA,UAAMC,SAAS,GAAGR,SAAS,CAACO,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,GAAGJ,SAAS,CAACO,MAAV,GAAmB,CAAvF;AACA,UAAME,aAAa,GAAGC,uBAAWC,UAAX,6CAAtB;;AAEA,YAAKC,QAAL,CAAc;AACZC,QAAAA,aAAa,EAAEd,KAAK,CAACM,OAAN,6CADH;AAEZC,QAAAA,SAAS,EAATA,SAFY;AAGZE,QAAAA,SAAS,EAATA,SAHY;AAIZC,QAAAA,aAAa,EAAbA,aAJY,EAAd;;AAMD,K;;AAEOK,IAAAA,kB,GAAqB,UAACnC,CAAD,EAAc;AACzC,UAAI,MAAKd,KAAL,CAAWgD,aAAX,KAA6B,CAA7B,IAAkC,CAAC,MAAK3B,KAAL,CAAW6B,qBAAlD,EAAyE;AACvE;AACA,YAAIpC,CAAC,YAAYqC,UAAb,IAA2BrC,CAAC,CAACsC,OAAF,GAAYC,QAAQ,CAACC,eAAT,CAAyBtB,WAApE,EAAiF;AAC/E;AACD;AACD,cAAKP,YAAL;AACD;AACF,K;;AAEO8B,IAAAA,a,GAAgB,UAACzC,CAAD,EAAsB;AAC5C,UAAI,MAAKd,KAAL,CAAWgD,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAI,8BAAYlC,CAAZ,CAAJ,EAAoB;AAClB,8CAAgBA,CAAhB;AACA,cAAKW,YAAL;AACD;AACF,K;;AAEOA,IAAAA,Y,GAAe,YAAM;AAC3B,UAAI,MAAKJ,KAAL,CAAWmC,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKnC,KAAL,CAAWoC,OAAf,EAAwB;AACtB,cAAKpC,KAAL,CAAWoC,OAAX;AACD;AACF,K;;AAEO9B,IAAAA,S,GAAY,UAAC+B,GAAD,EAAgC;AAClD,YAAKpD,MAAL,GAAcoD,GAAd;AACD,K;;AAEO9B,IAAAA,S,GAAY,UAAC8B,GAAD,EAAgC;AAClD,YAAKnD,MAAL,GAAcmD,GAAd;AACD,K;;AAEOC,IAAAA,S,GAAY,UAACD,GAAD,EAAgC;AAClD,YAAKrD,MAAL,GAAcqD,GAAd;AACD,K;;AAEO7B,IAAAA,Y,GAAe,UAAC5B,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKD,KAAL,CAAWC,SAAX,KAAyBA,SAAzB,IAAsC,MAAK8C,QAAL,CAAc,EAAE9C,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,K;;AAEO6B,IAAAA,Y,GAAe,UAAC5B,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKF,KAAL,CAAWE,SAAX,KAAyBA,SAAzB,IAAsC,MAAK6C,QAAL,CAAc,EAAE7C,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,K;;AAEO6B,IAAAA,W,GAAc,UAAC5B,QAAD,EAAsB,KAArBA,QAAqB,cAArBA,QAAqB,GAAV,KAAU;AAC1C,YAAKH,KAAL,CAAWG,QAAX,KAAwBA,QAAxB,IAAoC,MAAK4C,QAAL,CAAc,EAAE5C,QAAQ,EAARA,QAAF,EAAd,CAApC;AACD,K,sDA9PMyD,iB,GAAP,6BAA2B,2BACzBC,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAKP,aAAxC,EACA,8BAAK/C,OAAL,CAAauD,OAAb,2CAAsBD,gBAAtB,CAAuC,OAAvC,EAAgD,KAAKjD,iBAArD,EAAwE,EAAEmD,OAAO,EAAE,KAAX,EAAxE,EACA,KAAK5D,iBAAL,GAAyByC,uBAAWoB,GAAX,CAAe,IAAf,EAAqB,KAAKhC,iBAA1B,CAAzB,CACD,C,QAEMiC,oB,GAAP,gCAA8B,4BAC5BL,MAAM,CAACM,mBAAP,CAA2B,SAA3B,EAAsC,KAAKZ,aAA3C,EACA,+BAAK/C,OAAL,CAAauD,OAAb,4CAAsBI,mBAAtB,CAA0C,OAA1C,EAAmD,KAAKtD,iBAAxD,EACA,IAAI,KAAKT,iBAAL,IAA0B,IAA9B,EAAoC,CAClC,KAAKA,iBAAL,CAAuBgE,MAAvB,GACD,CACDvB,uBAAWuB,MAAX,CAAkB,IAAlB,EACD,C,CAED;AACF;AACA;AACA,K,QAYSC,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CAEA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CALH,CADF,CASD,C,QAEOA,U,GAAR,sBAAqB,mBACnB,kBAA+C,KAAKlD,KAApD,CAAQC,eAAR,eAAQA,eAAR,CAAyBkD,iBAAzB,eAAyBA,iBAAzB,CAEA,oBACE,6BAAC,gCAAD,qBACE,6BAAC,4BAAD,EAAmB,KAAKnD,KAAxB,eACE,uDACE,6BAAC,kCAAD,QACG,gBAAkB,KAAfoD,QAAe,QAAfA,QAAe,CACjB,oBACE,4DACGnD,eAAe,IAAI,MAAI,CAACoD,YAAL,EADtB,eAEE,6BAAC,mCAAD,IACE,EAAE,MADJ,EAEE,UAAU,EAAE,MAAI,CAACC,kBAAL,EAFd,EAGE,MAAM,EAAE,CAACH,iBAHX,EAIE,KAAK,EAAE,CAACA,iBAJV,EAKE,IAAI,EAAE,KALR,EAME,OAAO,EAAE,EACPI,KAAK,EAAE9E,kBADA,EAEP+E,IAAI,EAAE/E,kBAFC,EANX,EAUE,OAAO,EAAE,MAAI,CAACU,OAVhB,IAYG,MAAI,CAACsE,eAAL,CAAqBL,QAArB,CAZH,CAFF,EAgBGA,QAAQ,iBAAI,6BAAC,8CAAD,OAhBf,CADF,CAoBD,CAtBH,CADF,CADF,CADF,CADF,CAgCD,C,QAEOK,e,GAAR,yBAAwBL,QAAxB,EAAwD,eACtD,mBAAuE,KAAKpD,KAA5E,CAAQ0D,KAAR,gBAAQA,KAAR,CAAezD,eAAf,gBAAeA,eAAf,CAAgCgB,QAAhC,gBAAgCA,QAAhC,CAA0C0C,gBAA1C,gBAA0CA,gBAA1C,CAA4DC,MAA5D,gBAA4DA,MAA5D,CAEA,oBACE,6BAAC,cAAD,IACE,QAAQ,EAAE,UADZ,EAEE,YAAS,gBAFX,EAGE,SAAS,EAAE,gCACRC,iBAAOC,IAAP,EADQ,IACQ,IADR,MAERD,iBAAOE,UAAP,EAFQ,IAEcX,QAFd,OAHb,EAOE,QAAQ,EAAEY,YAAY,CAACC,IAPzB,EAQE,qBAAqB,MARvB,EASE,KAAK,EACHb,QAAQ,GACJc,SADI,GAEJ,EACER,KAAK,EAAEA,KAAK,KAAKzD,eAAe,GAAG,GAAH,GAAS,GAA7B,CADd,EAEEkE,KAAK,EAAElD,QAAQ,GAAG,MAAH,GAAY2C,MAF7B,EAGEQ,IAAI,EAAEnD,QAAQ,GAAG2C,MAAH,GAAY,MAH5B,EAZR,EAkBE,UAAU,EAAE,KAAKzE,OAlBnB,iBAoBE,6BAAC,uBAAD,IAAW,QAAQ,EAAEwE,gBAAgB,IAAI,CAAC1D,eAA1C,EAA2D,SAAS,EAAE,KAAtE,EAA6E,SAAS,EAAE4D,iBAAOQ,SAAP,EAAxF,iBACE,6BAAC,wBAAD,IAAa,cAAc,EAAE,KAAKzC,kBAAlC,EAAsD,MAAM,MAA5D,iBACE,sCACE,YAAS,qBADX,EAEE,SAAS,EAAE,iBAAGiC,iBAAOS,OAAP,CAAe,KAAKrB,KAApB,CAAH,mBACRY,iBAAOU,WAAP,EADQ,IACetD,QADf,OAER4C,iBAAOW,iBAAP,EAFQ,IAEqB,KAAK7F,KAAL,CAAWyC,SAAX,IAAwBH,QAF7C,OAGR4C,iBAAOY,kBAAP,EAHQ,IAGsB,KAAK9F,KAAL,CAAWyC,SAAX,IAAwB,CAACH,QAH/C,OAIR4C,iBAAOa,MAAP,CAAc,KAAKzB,KAAnB,CAJQ,IAIoB,KAAKtE,KAAL,CAAW2C,SAJ/B,QAFb,EAQE,GAAG,EAAE,KAAKgB,SARZ,iBAUE,6BAAC,gCAAD,CAAiB,QAAjB,IAA0B,KAAK,EAAE,KAAKnC,uBAAL,EAAjC,IACG,KAAKH,KAAL,CAAW2E,QADd,CAVF,CADF,CADF,CApBF,CADF,CAyCD,C,QAoCOtB,Y,GAAR,wBAAoC,UAClC,oBACE,6BAAC,cAAD,IAAQ,QAAQ,EAAE,UAAlB,EAA8B,SAAS,EAAEQ,iBAAOe,OAAP,EAAzC,EAA2D,QAAQ,EAAEZ,YAAY,CAACC,IAAlF,iBACE,6BAAC,8CAAD,IAAwB,GAAG,EAAC,MAA5B,GADF,eAEE,sCACE,GAAG,EAAC,SADN,EAEE,SAAS,EAAE,kCACRJ,iBAAOgB,UAAP,EADQ,IACc,IADd,OAERhB,iBAAOiB,cAAP,CAAsB,KAAK7B,KAA3B,CAFQ,IAE4B,KAAKtE,KAAL,CAAW4C,aAFvC,QAFb,GAFF,CADF,CAYD,C,QAEO+B,kB,GAAR,8BAAqD,CACnD,IAAMyB,UAAU,GAAG,KAAK/E,KAAL,CAAWiB,QAAX,GAAsB4C,iBAAOmB,eAA7B,GAA+CnB,iBAAOoB,cAAzE,CAEA,OAAO,EACL1B,KAAK,EAAEwB,UAAU,EADZ,EAELG,WAAW,EAAErB,iBAAOsB,gBAAP,EAFR,EAGL3B,IAAI,EAAEK,iBAAOuB,eAAP,EAHD,EAILC,UAAU,EAAExB,iBAAOyB,qBAAP,EAJP,EAKLC,MAAM,EAAER,UAAU,EALb,EAMLS,YAAY,EAAE3B,iBAAOsB,gBAAP,EANT,EAAP,CAQD,C,mBA5M2B/F,eAAMqG,S,8BAAvB/G,Q,CACGgH,mB,GAAsB,U,CADzBhH,Q,CAGGiH,M,GAASC,8B,CAHZlH,Q,CAIGmH,I,GAAOC,0B,CAJVpH,Q,CAKGqH,M,GAASC,8B,CALZtH,Q,CAMGuH,S,GAAYC,oC,CANfxH,Q,CA2CGyH,Y,GAAe,EAC3BhD,iBAAiB,EAAEiD,6BADQ,EAE3BzC,gBAAgB,EAAE,IAFS,EAG3BC,MAAM,EAAE,CAHmB,E","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n  /**\n   * Добавить блокирующий фон, когда сайдпейдж открыт\n   */\n  blockBackground?: boolean;\n\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n   */\n  disableClose?: boolean;\n\n  /**\n   * Не закрывать сайдпейдж при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Задать ширину сайдпейджа\n   */\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Показывать сайдпэйдж слева\n   *\n   */\n  fromLeft?: boolean;\n\n  /**\n   * Отключить анимации\n   *\n   */\n  disableAnimations?: boolean;\n\n  /**\n   * Работает только при заблокированном фоне: `blockBackground = true`\n   */\n  disableFocusLock: boolean;\n\n  /**\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\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.rootRef.current?.addEventListener('wheel', this.disablePageScroll, { passive: false });\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n  }\n\n  public componentWillUnmount() {\n    window.removeEventListener('keydown', this.handleKeyDown);\n    this.rootRef.current?.removeEventListener('wheel', this.disablePageScroll);\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 static defaultProps = {\n    disableAnimations: isTestEnv,\n    disableFocusLock: true,\n    offset: 0,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\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                    >\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, disableFocusLock, offset } = this.props;\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 disablePageScroll = (e: WheelEvent) => {\n    const layout = this.layout;\n    if (!layout) return;\n    const reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;\n    const reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;\n\n    if (!this.props.blockBackground && (reachedTop || reachedBottom)) {\n      e.preventDefault();\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: 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  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/SidePageContext.d.ts

@@ -1,9 +1,11 @@
 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;

package/cjs/components/SidePage/SidePageContext.js

@@ -15,10 +15,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;;;;;;;;;;;;;;;;;AAiBO,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  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\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;;;;;;;;;;;;;;;;;;;AAmBO,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 { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\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  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\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/SidePageHeader.d.ts

@@ -22,6 +22,7 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     state: SidePageHeaderState;
     private theme;
     private wrapper;
+    private sticky;
     private lastRegularHeight;
     private setRootNode;
     get regularHeight(): number;
@@ -34,8 +35,10 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     private renderMain;
     private renderHeader;
     private renderClose;
+    private closeIcon;
     private updateReadyToFix;
     private wrapperRef;
+    private stickyRef;
     private handleFocus;
     private handleBlur;
 }

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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));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 _Sticky = require("../Sticky");
 var _CrossIcon = require("../../internal/icons/CrossIcon");
@@ -46,6 +46,7 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
 
 
@@ -68,14 +69,17 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
     componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
+      _this.context.headerRef((0, _assertThisInitialized2.default)(_this));
     };_this.
 
     componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
       _this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
+      _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.
 
@@ -110,6 +114,12 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
 
 
+
+
+
+
+
+
 
 
 
@@ -140,46 +150,42 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     renderClose = function (fixed) {var _cx3;
       var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
-
       return /*#__PURE__*/(
         _react.default.createElement("div", {
           className: (0, _Emotion.cx)(_SidePage.styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[
           _SidePage.styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[
-          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)) }, /*#__PURE__*/
+          _SidePage.styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3)) },
 
 
-        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
-        function (_ref) {var _cx4;var requestClose = _ref.requestClose;
-          var button = /*#__PURE__*/
-          _react.default.createElement("button", {
-            className: (0, _Emotion.cx)(_SidePage.styles.close(_this.theme), (_cx4 = {}, _cx4[
-            _SidePage.styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4[
-            _SidePage.styles.mobileClose(_this.theme)] = _this.isMobileLayout, _cx4)),
+        _this.isMobileLayout ?
+        _this.closeIcon : /*#__PURE__*/
 
-            onFocus: _this.handleFocus,
-            onBlur: _this.handleBlur,
-            onClick: requestClose,
-            "data-tid": "SidePage__close",
-            tabIndex: 0 }, /*#__PURE__*/
+        _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
+        _this.closeIcon)));
 
-          _react.default.createElement(_CrossIcon.CrossIcon, null));
 
 
 
-          if (_this.isMobileLayout) {
-            return button;
-          }
+    };_this.
 
-          return /*#__PURE__*/(
-            _react.default.createElement(_Sticky.Sticky, { side: "top", offset: stickyOffset },
-            button));
+    closeIcon = function () {return /*#__PURE__*/(
+        _react.default.createElement(_SidePageContext.SidePageContext.Consumer, null,
+        function (_ref) {var _cx4;var requestClose = _ref.requestClose;return /*#__PURE__*/(
+            _react.default.createElement("button", {
+              className: (0, _Emotion.cx)(_SidePage.styles.close(_this.theme), (_cx4 = {}, _cx4[
+              _SidePage.styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4)),
 
+              onFocus: _this.handleFocus,
+              onBlur: _this.handleBlur,
+              onClick: requestClose,
+              "data-tid": "SidePage__close",
+              tabIndex: 0 }, /*#__PURE__*/
+
+            _react.default.createElement(_CrossIcon.CrossIcon, null)));}));};_this.
 
-        })));
 
 
 
-    };_this.
 
     updateReadyToFix = function () {
       if (_this.wrapper) {
@@ -193,6 +199,10 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
       _this.wrapper = el;
     };_this.
 
+    stickyRef = function (el) {
+      _this.sticky = el;
+    };_this.
+
     handleFocus = function () {
       requestAnimationFrame(function () {
         if (_keyListener.keyListener.isTabPressed) {
@@ -203,4 +213,4 @@ SidePageHeader = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNod
 
     handleBlur = function () {
       _this.setState({ focusedByTab: false });
-    };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.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__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), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;
+    };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.getStickyProp = function getStickyProp() {if (typeof this.props.sticky !== 'undefined') {return this.props.sticky;}if (this.isMobileLayout) {return false;}return true;};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;var isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;var isStickyMobile = this.isMobileLayout && this.getStickyProp();return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef, className: _SidePage.styles.headerWrapper() }, isStickyDesktop || isStickyMobile ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { ref: this.stickyRef, 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), _class2.__KONTUR_REACT_UI__ = 'SidePageHeader', _class2.contextType = _SidePageContext.SidePageContext, _temp)) || _class) || _class;exports.SidePageHeader = SidePageHeader;

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","focusedByTab","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","requestClose","button","close","closeFocus","mobileClose","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","sticky","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\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';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\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.setHasHeader?.();\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\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  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        <SidePageContext.Consumer>\n          {({ requestClose }) => {\n            const button = (\n              <button\n                className={cx(styles.close(this.theme), {\n                  [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n                  [styles.mobileClose(this.theme)]: this.isMobileLayout,\n                })}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                onClick={requestClose}\n                data-tid=\"SidePage__close\"\n                tabIndex={0}\n              >\n                <CrossIcon />\n              </button>\n            );\n\n            if (this.isMobileLayout) {\n              return button;\n            }\n\n            return (\n              <Sticky side=\"top\" offset={stickyOffset}>\n                {button}\n              </Sticky>\n            );\n          }}\n        </SidePageContext.Consumer>\n      </div>\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 ? { ...state, isReadyToFix } : state));\n    }\n  };\n\n  private wrapperRef = (el: HTMLElement | null) => {\n    this.wrapper = el;\n  };\n\n  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}
+{"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","responsiveLayout","rootNode","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","styles","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","keyListener","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\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';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n  sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  private isMobileLayout!: boolean;\n\n  public state: SidePageHeaderState = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private sticky: Sticky | null = null;\n  private lastRegularHeight = 0;\n  private setRootNode!: TSetRootNode;\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.setHasHeader?.();\n    this.context.headerRef(this);\n  };\n\n  public componentWillUnmount = () => {\n    window.removeEventListener('scroll', this.update, true);\n    this.context.setHasHeader?.(false);\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  public getStickyProp() {\n    if (typeof this.props.sticky !== 'undefined') {\n      return this.props.sticky;\n    }\n\n    if (this.isMobileLayout) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private renderMain() {\n    const { isReadyToFix } = this.state;\n\n    const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n    const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isStickyDesktop || isStickyMobile ? (\n            <Sticky ref={this.stickyRef} side=\"top\">\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\n        className={cx(styles.header(this.theme), {\n          [styles.headerFixed(this.theme)]: fixed,\n          [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.renderClose(fixed)}\n        <div\n          className={cx(styles.title(this.theme), {\n            [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n            [styles.titleFixed()]: fixed,\n          })}\n        >\n          {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n        </div>\n      </div>\n    );\n  };\n\n  private renderClose = (fixed: boolean) => {\n    const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n    return (\n      <div\n        className={cx(styles.wrapperClose(this.theme), {\n          [styles.wrapperCloseFixed(this.theme)]: fixed,\n          [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n        })}\n      >\n        {this.isMobileLayout ? (\n          this.closeIcon\n        ) : (\n          <Sticky side=\"top\" offset={stickyOffset}>\n            {this.closeIcon}\n          </Sticky>\n        )}\n      </div>\n    );\n  };\n\n  private closeIcon = () => (\n    <SidePageContext.Consumer>\n      {({ requestClose }) => (\n        <button\n          className={cx(styles.close(this.theme), {\n            [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n          })}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onClick={requestClose}\n          data-tid=\"SidePage__close\"\n          tabIndex={0}\n        >\n          <CrossIcon />\n        </button>\n      )}\n    </SidePageContext.Consumer>\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 ? { ...state, 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  private handleFocus = () => {\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        this.setState({ focusedByTab: true });\n      }\n    });\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n}\n"]}

package/cjs/components/Sticky/Sticky.d.ts

@@ -50,5 +50,10 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
     render(): JSX.Element;
     private refWrapper;
     private refInner;
-    private reflow;
+    /**
+     * Пересчитать габариты и позицию залипшего элемента
+     *
+     * @public
+     */
+    reflow: () => void;
 }

package/cjs/components/Sticky/Sticky.js

@@ -139,6 +139,11 @@ Sticky = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
     refInner = function (ref) {return _this.inner = ref;};_this.
 
+
+
+
+
+
     reflow = function () {
       var _document = document,documentElement = _document.documentElement;
 

package/cjs/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  private reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n    const { width, height } = this.inner.getBoundingClientRect();\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = stop.getBoundingClientRect();\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n    const { width, height } = this.inner.getBoundingClientRect();\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = stop.getBoundingClientRect();\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/cjs/internal/DropdownContainer/DropdownContainer.d.ts

@@ -13,6 +13,7 @@ export interface DropdownContainerProps {
     disablePortal?: boolean;
     offsetY?: number;
     offsetX?: number;
+    hasFixedWidth?: boolean;
 }
 export interface DropdownContainerState {
     position: Nullable<DropdownContainerPosition>;

package/cjs/internal/DropdownContainer/DropdownContainer.js

@@ -3,7 +3,12 @@
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _RenderContainer = require("../RenderContainer");
 var _ZIndex = require("../ZIndex");
-var _createPropsGetter = require("../../lib/createPropsGetter");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
+var _createPropsGetter = require("../../lib/createPropsGetter");
+
+var _Emotion = require("../../lib/theming/Emotion");
+var _client = require("../../lib/client");
+
+var _DropdownContainer = require("./DropdownContainer.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
 
 
 
@@ -86,6 +91,14 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
 
 
 
+
+
+
+
+
+
+
+
 
 
 
@@ -194,4 +207,4 @@ DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsL
         left: offsetX,
         right: null };
 
-    };return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style }, this.props.children);return this.props.disablePortal ? content : /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return DropdownContainer;}(_react.default.PureComponent);exports.DropdownContainer = DropdownContainer;DropdownContainer.__KONTUR_REACT_UI__ = 'DropdownContainer';DropdownContainer.defaultProps = { align: 'left', disablePortal: false, offsetX: 0, offsetY: -1 };
+    };return _this;}var _proto = DropdownContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.position();this.layoutSub = LayoutEvents.addListener(this.position);var _document2 = document,body = _document2.body,docEl = _document2.documentElement;var htmlPosition = getComputedStyle(docEl).position;var bodyPosition = getComputedStyle(body).position;var hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;var hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });};_proto.componentWillUnmount = function componentWillUnmount() {if (this.layoutSub) {this.layoutSub.remove();}};_proto.render = function render() {var _cx;var style = { position: 'absolute', top: '0' };if (this.state.position) {var _this$state$position = this.state.position,top = _this$state$position.top,bottom = _this$state$position.bottom,left = _this$state$position.left,right = _this$state$position.right;style = (0, _extends2.default)({}, style, { top: top !== null ? top : undefined, bottom: bottom !== null ? bottom : undefined, left: left !== null ? left : undefined, right: right !== null ? right : undefined, minWidth: this.state.minWidth, maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined });}var content = /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'DropdownContainer', wrapperRef: this.ZIndexRef, style: style, className: (0, _Emotion.cx)((_cx = {}, _cx[_DropdownContainer.styles.alignRight()] = this.props.align === 'right' && !_client.isIE11, _cx)) }, this.props.children);return this.props.disablePortal ? content : /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, content);};return DropdownContainer;}(_react.default.PureComponent);exports.DropdownContainer = DropdownContainer;DropdownContainer.__KONTUR_REACT_UI__ = 'DropdownContainer';DropdownContainer.defaultProps = { align: 'left', disablePortal: false, offsetX: 0, offsetY: -1 };

package/cjs/internal/DropdownContainer/DropdownContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","ZIndexRef","element","dom","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","layoutSub","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","content","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface DropdownContainerPosition {\n  top: Nullable<number>;\n  bottom: Nullable<number>;\n  left: Nullable<number>;\n  right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n  align?: 'left' | 'right';\n  getParent: () => Nullable<HTMLElement>;\n  children?: React.ReactNode;\n  disablePortal?: boolean;\n  offsetY?: number;\n  offsetX?: number;\n}\n\nexport interface DropdownContainerState {\n  position: Nullable<DropdownContainerPosition>;\n  minWidth: number;\n  isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n  public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n  public static defaultProps = {\n    align: 'left',\n    disablePortal: false,\n    offsetX: 0,\n    offsetY: -1,\n  };\n\n  public state: DropdownContainerState = {\n    position: null,\n    minWidth: 0,\n    isDocumentElementRoot: true,\n  };\n\n  private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n  private dom: Nullable<HTMLDivElement>;\n  private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n  public componentDidMount() {\n    this.position();\n    this.layoutSub = LayoutEvents.addListener(this.position);\n\n    const { body, documentElement: docEl } = document;\n    const htmlPosition = getComputedStyle(docEl).position;\n    const bodyPosition = getComputedStyle(body).position;\n\n    const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n    const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n    this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n  }\n\n  public render() {\n    let style: React.CSSProperties = {\n      position: 'absolute',\n      top: '0',\n    };\n    if (this.state.position) {\n      const { top, bottom, left, right } = this.state.position;\n      style = {\n        ...style,\n        top: top !== null ? top : undefined,\n        bottom: bottom !== null ? bottom : undefined,\n        left: left !== null ? left : undefined,\n        right: right !== null ? right : undefined,\n        minWidth: this.state.minWidth,\n      };\n    }\n\n    const content = (\n      <ZIndex priority={'DropdownContainer'} wrapperRef={this.ZIndexRef} style={style}>\n        {this.props.children}\n      </ZIndex>\n    );\n\n    return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n  }\n\n  private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n    this.dom = element;\n  };\n\n  private isElement = (node: Nullable<Element>): node is Element => {\n    return node instanceof Element;\n  };\n\n  public position = () => {\n    const target = this.props.getParent();\n    const dom = this.dom;\n\n    if (target && this.isElement(target) && dom) {\n      const targetRect = target.getBoundingClientRect();\n      const { body, documentElement: docEl } = document;\n\n      if (!docEl) {\n        throw Error('There is no \"documentElement\" in \"document\"');\n      }\n\n      const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n      const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n      let left = null;\n      let right = null;\n\n      if (this.props.align === 'right') {\n        const docWidth = docEl.offsetWidth || 0;\n        right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n      } else {\n        left = targetRect.left + scrollX + this.getProps().offsetX;\n      }\n\n      const { offsetY = 0 } = this.props;\n      let bottom = null;\n      let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n      const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n      const dropdownHeight = this.getHeight();\n\n      if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n        const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n        top = null;\n        bottom = clientHeight + offsetY - scrollY - targetRect.top;\n      }\n\n      const position = {\n        top,\n        left,\n        right,\n        bottom,\n      };\n\n      this.setState({\n        minWidth: this.getMinWidth(),\n        position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n      });\n    }\n  };\n\n  private getHeight = () => {\n    if (!this.isElement(this.dom)) {\n      return 0;\n    }\n    const child = this.dom.children.item(0);\n    if (!child) {\n      return 0;\n    }\n    return child.getBoundingClientRect().height;\n  };\n\n  private getMinWidth = () => {\n    const target = this.props.getParent();\n    if (!target || !this.isElement(target)) {\n      return 0;\n    }\n    return target.getBoundingClientRect().width;\n  };\n\n  private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n    const target = this.props.getParent();\n    const { offsetX = 0, offsetY = 0 } = this.props;\n    const { top, bottom, left, right } = position;\n    if (target && this.isElement(target)) {\n      const targetHeight = target.getBoundingClientRect().height;\n      return {\n        top: top !== null ? targetHeight + offsetY : null,\n        bottom: bottom !== null ? targetHeight + offsetY : null,\n        left: left !== null ? offsetX : null,\n        right: right !== null ? offsetX : null,\n      };\n    }\n    return {\n      top: offsetY,\n      bottom: null,\n      left: offsetX,\n      right: null,\n    };\n  };\n}\n"]}
+{"version":3,"sources":["DropdownContainer.tsx"],"names":["DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","ZIndexRef","element","dom","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","layoutSub","LayoutEvents","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","maxWidth","hasFixedWidth","content","styles","alignRight","isIE11","React","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './DropdownContainer.styles';\n\nexport interface DropdownContainerPosition {\n  top: Nullable<number>;\n  bottom: Nullable<number>;\n  left: Nullable<number>;\n  right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n  align?: 'left' | 'right';\n  getParent: () => Nullable<HTMLElement>;\n  children?: React.ReactNode;\n  disablePortal?: boolean;\n  offsetY?: number;\n  offsetX?: number;\n  hasFixedWidth?: boolean;\n}\n\nexport interface DropdownContainerState {\n  position: Nullable<DropdownContainerPosition>;\n  minWidth: number;\n  isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n  public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n  public static defaultProps = {\n    align: 'left',\n    disablePortal: false,\n    offsetX: 0,\n    offsetY: -1,\n  };\n\n  public state: DropdownContainerState = {\n    position: null,\n    minWidth: 0,\n    isDocumentElementRoot: true,\n  };\n\n  private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n  private dom: Nullable<HTMLDivElement>;\n  private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n  public componentDidMount() {\n    this.position();\n    this.layoutSub = LayoutEvents.addListener(this.position);\n\n    const { body, documentElement: docEl } = document;\n    const htmlPosition = getComputedStyle(docEl).position;\n    const bodyPosition = getComputedStyle(body).position;\n\n    const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n    const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n    this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSub) {\n      this.layoutSub.remove();\n    }\n  }\n\n  public render() {\n    let style: React.CSSProperties = {\n      position: 'absolute',\n      top: '0',\n    };\n    if (this.state.position) {\n      const { top, bottom, left, right } = this.state.position;\n      style = {\n        ...style,\n        top: top !== null ? top : undefined,\n        bottom: bottom !== null ? bottom : undefined,\n        left: left !== null ? left : undefined,\n        right: right !== null ? right : undefined,\n        minWidth: this.state.minWidth,\n        maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined,\n      };\n    }\n\n    const content = (\n      <ZIndex\n        priority={'DropdownContainer'}\n        wrapperRef={this.ZIndexRef}\n        style={style}\n        className={cx({\n          [styles.alignRight()]: this.props.align === 'right' && !isIE11,\n        })}\n      >\n        {this.props.children}\n      </ZIndex>\n    );\n\n    return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n  }\n\n  private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n    this.dom = element;\n  };\n\n  private isElement = (node: Nullable<Element>): node is Element => {\n    return node instanceof Element;\n  };\n\n  public position = () => {\n    const target = this.props.getParent();\n    const dom = this.dom;\n\n    if (target && this.isElement(target) && dom) {\n      const targetRect = target.getBoundingClientRect();\n      const { body, documentElement: docEl } = document;\n\n      if (!docEl) {\n        throw Error('There is no \"documentElement\" in \"document\"');\n      }\n\n      const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n      const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n      let left = null;\n      let right = null;\n\n      if (this.props.align === 'right') {\n        const docWidth = docEl.offsetWidth || 0;\n        right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n      } else {\n        left = targetRect.left + scrollX + this.getProps().offsetX;\n      }\n\n      const { offsetY = 0 } = this.props;\n      let bottom = null;\n      let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n      const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n      const dropdownHeight = this.getHeight();\n\n      if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n        const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n        top = null;\n        bottom = clientHeight + offsetY - scrollY - targetRect.top;\n      }\n\n      const position = {\n        top,\n        left,\n        right,\n        bottom,\n      };\n\n      this.setState({\n        minWidth: this.getMinWidth(),\n        position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n      });\n    }\n  };\n\n  private getHeight = () => {\n    if (!this.isElement(this.dom)) {\n      return 0;\n    }\n    const child = this.dom.children.item(0);\n    if (!child) {\n      return 0;\n    }\n    return child.getBoundingClientRect().height;\n  };\n\n  private getMinWidth = () => {\n    const target = this.props.getParent();\n    if (!target || !this.isElement(target)) {\n      return 0;\n    }\n    return target.getBoundingClientRect().width;\n  };\n\n  private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n    const target = this.props.getParent();\n    const { offsetX = 0, offsetY = 0 } = this.props;\n    const { top, bottom, left, right } = position;\n    if (target && this.isElement(target)) {\n      const targetHeight = target.getBoundingClientRect().height;\n      return {\n        top: top !== null ? targetHeight + offsetY : null,\n        bottom: bottom !== null ? targetHeight + offsetY : null,\n        left: left !== null ? offsetX : null,\n        right: right !== null ? offsetX : null,\n      };\n    }\n    return {\n      top: offsetY,\n      bottom: null,\n      left: offsetX,\n      right: null,\n    };\n  };\n}\n"]}

package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: {
+    alignRight(): string;
+};

package/cjs/internal/DropdownContainer/DropdownContainer.styles.js

@@ -0,0 +1,9 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  alignRight: function alignRight() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      flex-direction: row-reverse;\n    "])));
+
+
+
+  } });exports.styles = styles;

package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DropdownContainer.styles.ts"],"names":["styles","alignRight","css"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,UADiC,wBACpB;AACX,eAAOC,YAAP;;;;AAID,GANgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  alignRight() {\n    return css`\n      display: flex;\n      flex-direction: row-reverse;\n    `;\n  },\n});\n"]}

package/cjs/internal/Menu/Menu.d.ts

@@ -10,6 +10,7 @@ export interface MenuProps {
      * Отключение кастомного скролла контейнера
      */
     disableScrollContainer?: boolean;
+    align?: 'left' | 'right';
 }
 export interface MenuState {
     highlightedIndex: number;
@@ -17,6 +18,7 @@ export interface MenuState {
 export declare class Menu extends React.Component<MenuProps, MenuState> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: {
+        align: string;
         width: string;
         maxHeight: number;
         hasShadow: boolean;