@skbkontur/react-ui 3.8.3 → 3.8.5

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","disableFocusLock","root","leftSide","Boolean","emit","wrapper","shadow","wrapperLeft","getSidebarStyle","_","layout","children","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"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';\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\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\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    disableFocusLock: true,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <RenderContainer>\n          <div>\n            {blockBackground && this.renderShadow()}\n            <CSSTransition\n              in\n              classNames={this.getTransitionNames()}\n              appear={!disableAnimations}\n              enter={!disableAnimations}\n              exit={false}\n              timeout={{\n                enter: TRANSITION_TIMEOUT,\n                exit: TRANSITION_TIMEOUT,\n              }}\n            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </RenderContainer>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.leftSide()]: Boolean(fromLeft),\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{ width: width || (blockBackground ? 800 : 500) }}\n      >\n        <RenderLayer onClickOutside={this.handleClickOutside} active>\n          <div\n            data-tid=\"SidePage__container\"\n            className={cx(styles.wrapper(this.theme), {\n              [styles.shadow(this.theme)]: this.state.hasShadow,\n              [styles.wrapperLeft()]: fromLeft,\n            })}\n            style={this.getSidebarStyle()}\n          >\n            <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false}>\n              <div ref={(_) => (this.layoutRef = _)} className={styles.layout()}>\n                <SidePageContext.Provider value={this.getSidePageContextProps()}>\n                  {this.props.children}\n                </SidePageContext.Provider>\n              </div>\n            </FocusLock>\n          </div>\n        </RenderLayer>\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.getBoundingClientRect().width;\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 getSidebarStyle(): React.CSSProperties {\n    const sidePageStyle: React.CSSProperties = {};\n\n    if (this.state.hasMargin) {\n      if (this.props.fromLeft) {\n        sidePageStyle.marginLeft = 20;\n      } else {\n        sidePageStyle.marginRight = 20;\n      }\n    }\n\n    return sidePageStyle;\n  }\n\n  private getTransitionNames(): Record<string, string> {\n    const transition = this.props.fromLeft ? 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":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","requestClose","getWidth","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","root","leftSide","Boolean","emit","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","Body","Footer","Container","defaultProps"],"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';\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\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\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    disableFocusLock: true,\n  };\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { blockBackground, disableAnimations } = this.props;\n\n    return (\n      <CommonWrapper {...this.props}>\n        <RenderContainer>\n          <div>\n            {blockBackground && this.renderShadow()}\n            <CSSTransition\n              in\n              classNames={this.getTransitionNames()}\n              appear={!disableAnimations}\n              enter={!disableAnimations}\n              exit={false}\n              timeout={{\n                enter: TRANSITION_TIMEOUT,\n                exit: TRANSITION_TIMEOUT,\n              }}\n            >\n              {this.renderContainer()}\n            </CSSTransition>\n          </div>\n        </RenderContainer>\n      </CommonWrapper>\n    );\n  }\n\n  private renderContainer(): JSX.Element {\n    const { width, blockBackground, fromLeft, disableFocusLock } = this.props;\n\n    return (\n      <ZIndex\n        priority={'Sidepage'}\n        data-tid=\"SidePage__root\"\n        className={cx({\n          [styles.root()]: true,\n          [styles.leftSide()]: Boolean(fromLeft),\n        })}\n        onScroll={LayoutEvents.emit}\n        createStackingContext\n        style={{ width: width || (blockBackground ? 800 : 500) }}\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"]}

package/components/SidePage/SidePage.d.ts

@@ -86,7 +86,6 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private getSidePageContextProps;
     private getWidth;
     private renderShadow;
-    private getSidebarStyle;
     private getTransitionNames;
     private handleStackChange;
     private handleClickOutside;

package/components/SidePage/SidePage.styles/SidePage.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35;
 
 import { is8pxTheme } from "../../../lib/theming/ThemeHelpers";
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
@@ -13,7 +13,7 @@ export var styles = memoizeStyle({
     return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
   },
   body: function body() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      z-index: 0;\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex: 1 0 auto;\n      z-index: 0;\n    "])));
   },
   container: function container(t) {
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
@@ -27,77 +27,89 @@ export var styles = memoizeStyle({
   containerWithPanel: function containerWithPanel(t) {
     return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), is8pxTheme(t) ? t.sidePagePaddingBottom : 0);
   },
+  focusLock: function focusLock() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
+  },
   wrapper: function wrapper(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n    "])), t.sidePageBgDefault);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      float: right;\n      height: 100%;\n      width: 100%;\n      overflow-y: auto;\n      position: relative;\n      white-space: normal;\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])), t.sidePageBgDefault);
   },
   wrapperLeft: function wrapperLeft() {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
+  },
+  wrapperMarginLeft: function wrapperMarginLeft() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      margin-left: 20px;\n    "])));
   },
-  layout: function layout() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      align-items: stretch;\n      display: flex;\n      flex-direction: column;\n    "])));
+  wrapperMarginRight: function wrapperMarginRight() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-right: 20px;\n    "])));
+  },
+  headerWrapper: function headerWrapper() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   header: function header(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor);
   },
   headerFixed: function headerFixed(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0;\n\n      &:after {\n        bottom: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageHeaderFixedFontSize, t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY, t.sidePageFixedHeaderShadow);
   },
   title: function title(t) {
     var paddingRight = parseInt(t.sidePageCloseButtonPadding) + parseInt(t.sidePageCloseButtonLegacyPaddingLeft) + parseInt(t.sidePageCloseIconSize);
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
   },
   titleFixed: function titleFixed() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
   },
   background: function background() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
   },
   backgroundGray: function backgroundGray(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
   },
   shadow: function shadow(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
   },
   leftSide: function leftSide() {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      right: auto;\n    "])));
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      left: 0;\n      right: auto;\n    "])));
   },
   close: function close(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      ", ";\n      cursor: pointer;\n      color: ", ";\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
   },
   closeFocus: function closeFocus(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
   },
   wrapperClose: function wrapperClose(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box;\n      height: 100%;\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      position: absolute;\n      right: ", ";\n      top: 0;\n    "])), t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageCloseButtonPadding);
   },
   panel: function panel(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
   },
   fixed: function fixed(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+  },
+  footerWrapper: function footerWrapper() {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
   },
   footer: function footer() {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n    "])));
   },
   footerContent: function footerContent(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
   },
   footerFixed: function footerFixed(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n\n      &:before {\n        top: 0px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.sidePageBgDefault, t.sidePageFixedFooterShadow);
   },
   transitionLeft: function transitionLeft() {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
   },
   transitionRight: function transitionRight() {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
   },
   transitionActive: function transitionActive() {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);\n      opacity: 1;\n      transform: translate(0, 0);\n    "])));
   },
   transitionLeave: function transitionLeave() {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
 });

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

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

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

@@ -7,9 +7,12 @@ export declare const styles: {
     containerWithoutHeader(t: Theme): string;
     containerWithoutFooter(t: Theme): string;
     containerWithPanel(t: Theme): string;
+    focusLock(): string;
     wrapper(t: Theme): string;
     wrapperLeft(): string;
-    layout(): string;
+    wrapperMarginLeft(): string;
+    wrapperMarginRight(): string;
+    headerWrapper(): string;
     header(t: Theme): string;
     headerFixed(t: Theme): string;
     title(t: Theme): string;
@@ -23,6 +26,7 @@ export declare const styles: {
     wrapperClose(t: Theme): string;
     panel(t: Theme): string;
     fixed(t: Theme): string;
+    footerWrapper(): string;
     footer(): string;
     footerContent(t: Theme): string;
     footerFixed(t: Theme): string;

package/components/SidePage/SidePageFooter/SidePageFooter.js

@@ -108,6 +108,7 @@ export var SidePageFooter = /*#__PURE__*/function (_React$Component) {
       style: {
         height: this.getContentHeight()
       },
+      className: styles.footerWrapper(),
       ref: this.refWrapper
     }, /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
       var _cx;

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

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

package/components/SidePage/SidePageHeader/SidePageHeader.js

@@ -138,7 +138,8 @@ export var SidePageHeader = /*#__PURE__*/function (_React$Component) {
   _proto.renderMain = function renderMain() {
     var isReadyToFix = this.state.isReadyToFix;
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      ref: this.wrapperRef
+      ref: this.wrapperRef,
+      className: styles.headerWrapper()
     }, isReadyToFix ? /*#__PURE__*/React.createElement(Sticky, {
       side: "top"
     }, this.renderHeader) : this.renderHeader()));

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

@@ -1 +1 @@
-{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"kMAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,WAAaC,cAAb;;;;AAISC,IAAAA,OAJT,GAIwC,MAAKA,OAJ7C;;AAMSC,IAAAA,KANT,GAMiB;AACbC,MAAAA,YAAY,EAAE,KADD;AAEbC,MAAAA,YAAY,EAAE,KAFD,EANjB;;;AAWUC,IAAAA,KAXV;AAYUC,IAAAA,OAZV,GAYwC,IAZxC;AAaUC,IAAAA,iBAbV,GAa8B,CAb9B;;;;;;;;;;;;;;;;;;AA+BSC,IAAAA,iBA/BT,GA+B6B,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb;AACD,KAlCH;;AAoCSC,IAAAA,oBApCT,GAoCgC,YAAM;AAClCJ,MAAAA,MAAM,CAACK,mBAAP,CAA2B,QAA3B,EAAqC,MAAKH,MAA1C,EAAkD,IAAlD;AACA,YAAKV,OAAL,CAAaW,YAAb,0BAAKX,OAAL,CAAaW,YAAb,CAA4B,KAA5B;AACD,KAvCH;;AAyCSD,IAAAA,MAzCT,GAyCkB,YAAM;AACpB,YAAKI,gBAAL;AACD,KA3CH;;;;;;;;;;;;;;;;;;;;;;;;AAmEUC,IAAAA,YAnEV,GAmEyB,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE,qCAAK,SAAS,EAAErB,EAAE,CAACE,MAAM,CAACoB,MAAP,CAAc,MAAKb,KAAnB,CAAD,iBAA+BP,MAAM,CAACqB,WAAP,CAAmB,MAAKd,KAAxB,CAA/B,IAAgEY,KAAhE,OAAlB;AACG,cAAKG,WAAL,CAAiBH,KAAjB,CADH;AAEE,qCAAK,SAAS,EAAErB,EAAE,CAACE,MAAM,CAACuB,KAAP,CAAa,MAAKhB,KAAlB,CAAD,mBAA8BP,MAAM,CAACwB,UAAP,EAA9B,IAAoDL,KAApD,QAAlB;AACGxB,QAAAA,UAAU,CAAC,MAAK8B,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBP,KAApB,CAAlC,GAA+D,MAAKM,KAAL,CAAWC,QAD7E,CAFF,CADF;;;;AAQD,KA5EH;;AA8EUJ,IAAAA,WA9EV,GA8EwB,UAACH,KAAD,EAAoB;AACxC,UAAMQ,YAAY,GAAGC,QAAQ,CAAC,MAAKrB,KAAL,CAAWsB,0BAAZ,CAA7B;;AAEA;AACE,qCAAK,SAAS,EAAE/B,EAAE,CAACE,MAAM,CAAC8B,YAAP,CAAoB,MAAKvB,KAAzB,CAAD,EAAkCY,KAAK,IAAInB,MAAM,CAACmB,KAAP,CAAa,MAAKZ,KAAlB,CAA3C,CAAlB;AACE,4BAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEoB,YAA3B;AACE,4BAAC,eAAD,CAAiB,QAAjB;AACG,sCAAGI,YAAH,QAAGA,YAAH;AACC;AACE,cAAA,SAAS,EAAEjC,EAAE,CAACE,MAAM,CAACgC,KAAP,CAAa,MAAKzB,KAAlB,CAAD;AACVP,cAAAA,MAAM,CAACiC,UAAP,CAAkB,MAAK1B,KAAvB,CADU,IACsB,MAAKH,KAAL,CAAWE,YADjC,QADf;;AAIE,cAAA,OAAO,EAAE,MAAK4B,WAJhB;AAKE,cAAA,MAAM,EAAE,MAAKC,UALf;AAME,cAAA,OAAO,EAAEJ,YANX;AAOE,0BAAS,iBAPX;AAQE,cAAA,QAAQ,EAAE,CARZ;;AAUE,gCAAC,SAAD,OAVF,CADD,GADH,CADF,CADF,CADF;;;;;;;AAsBD,KAvGH;;AAyGUd,IAAAA,gBAzGV,GAyG6B,YAAM;AAC/B,UAAI,MAAKT,OAAT,EAAkB;AAChB,YAAM4B,iBAAiB,GAAG,MAAK5B,OAAL,CAAa6B,qBAAb,GAAqCC,GAA/D;AACA,YAAMjC,YAAY,GAAG,MAAKkC,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,UAACrC,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,gBAA2CD,KAA3C,IAAkDC,YAAY,EAAZA,YAAlD,MAAmED,KAA/E,EAAd;AACD;AACF,KA/GH;;AAiHUsC,IAAAA,UAjHV,GAiHuB,UAACC,EAAD,EAA4B;AAC/C,YAAKnC,OAAL,GAAemC,EAAf;AACD,KAnHH;;AAqHUT,IAAAA,WArHV,GAqHwB,YAAM;AAC1BU,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAI7C,WAAW,CAAC8C,YAAhB,EAA8B;AAC5B,gBAAKJ,QAAL,CAAc,EAAEnC,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,KA3HH;;AA6HU6B,IAAAA,UA7HV,GA6HuB,YAAM;AACzB,YAAKM,QAAL,CAAc,EAAEnC,YAAY,EAAE,KAAhB,EAAd;AACD,KA/HH,4DA6CSwC,MA7CT,GA6CE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACvC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACwC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAtDH,QAwDUA,UAxDV,GAwDE,sBAAqB,KACX1C,YADW,GACM,KAAKD,KADX,CACXC,YADW,CAEnB,oBACE,oBAAC,aAAD,EAAmB,KAAKoB,KAAxB,eACE,6BAAK,GAAG,EAAE,KAAKiB,UAAf,IACGrC,YAAY,gBAAG,oBAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,IAAoB,KAAKa,YAAzB,CAAH,GAAqD,KAAKA,YAAL,EADpE,CADF,CADF,CAOD,CAjEH,4DAeE,eAAmC,KACzBb,YADyB,GACR,KAAKD,KADG,CACzBC,YADyB,CAEjC,IAAI,CAAC,KAAKG,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACH,YAAL,EAAmB,CACjB,KAAKI,iBAAL,GAAyB,KAAKD,OAAL,CAAa6B,qBAAb,GAAqCW,MAA9D,CACD,CACD,OAAO,KAAKvC,iBAAZ,CACD,CAxBH,qCA0BE,eAAuC,KAC7BF,KAD6B,GACnB,IADmB,CAC7BA,KAD6B,CAErC,OAAOqB,QAAQ,CAACrB,KAAK,CAAC0C,6BAAP,CAAR,GAAgDrB,QAAQ,CAACrB,KAAK,CAAC2C,2BAAP,CAAR,GAA8C,CAArG,CACD,CA7BH,6BAAoC1D,KAAK,CAAC2D,SAA1C,EAAajD,c,CACGkD,mB,GAAsB,gB,CADzBlD,c,CAGGmD,W,GAAcpD,e","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';\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}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    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  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\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 className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\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        </Sticky>\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":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","headerFixed","renderClose","title","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"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';\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}\n\nexport interface SidePageHeaderState {\n  isReadyToFix: boolean;\n  focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n  public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n  public static contextType = SidePageContext;\n  public context: SidePageContextType = this.context;\n\n  public state = {\n    isReadyToFix: false,\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private wrapper: HTMLElement | null = null;\n  private lastRegularHeight = 0;\n\n  public get regularHeight(): number {\n    const { isReadyToFix } = this.state;\n    if (!this.wrapper) {\n      return 0;\n    }\n    if (!isReadyToFix) {\n      this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n    }\n    return this.lastRegularHeight;\n  }\n\n  public get fixedHeaderHeight(): number {\n    const { theme } = this;\n    return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n  }\n\n  public componentDidMount = () => {\n    window.addEventListener('scroll', this.update, true);\n    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  private renderMain() {\n    const { isReadyToFix } = this.state;\n    return (\n      <CommonWrapper {...this.props}>\n        <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n          {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private renderHeader = (fixed = false) => {\n    return (\n      <div className={cx(styles.header(this.theme), { [styles.headerFixed(this.theme)]: fixed })}>\n        {this.renderClose(fixed)}\n        <div className={cx(styles.title(this.theme), { [styles.titleFixed()]: fixed })}>\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 className={cx(styles.wrapperClose(this.theme), fixed && styles.fixed(this.theme))}>\n        <Sticky side=\"top\" offset={stickyOffset}>\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        </Sticky>\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"]}

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js

@@ -72,7 +72,7 @@ export var TokenInputMenu = /*#__PURE__*/function (_React$Component) {
       positions: ['bottom left'],
       anchorElement: anchorElement,
       popupOffset: menuAlign === 'left' ? 0 : 5,
-      margin: menuAlign === 'left' ? 1 : 0,
+      margin: menuAlign === 'left' ? 1 : undefined,
       hasShadow: is8pxTheme(this.theme),
       width: menuAlign === 'cursor' ? 'auto' : menuWidth
     }, /*#__PURE__*/React.createElement(ComboBoxMenu, {

package/components/TokenInput/TokenInputMenu/TokenInputMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","is8pxTheme","TokenInputMenu","theme","menu","getMenuRef","getPopupMargin","paddingY","parseInt","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup } from '../../internal/Popup';\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { Menu } from '../../internal/Menu';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nimport { TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: HTMLElement;\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  menuAlign: TokenInputMenuAlign;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n\n  private theme!: Theme;\n\n  private menu: Menu | null = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: this.getPopupMargin() + 'px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getMenuRef = (): any | null => this.menu;\n\n  private renderMain() {\n    const {\n      loading,\n      maxMenuHeight,\n      renderTotalCount,\n      totalCount,\n      opened,\n      items,\n      renderNotFound,\n      renderItem,\n      onValueChange,\n      renderAddButton,\n      anchorElement,\n      menuWidth,\n      menuAlign,\n    } = this.props;\n\n    return (\n      <Popup\n        opened={opened!}\n        positions={['bottom left']}\n        anchorElement={anchorElement}\n        popupOffset={menuAlign === 'left' ? 0 : 5}\n        margin={menuAlign === 'left' ? 1 : 0}\n        hasShadow={is8pxTheme(this.theme)}\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n      >\n        <ComboBoxMenu\n          items={items}\n          loading={loading}\n          maxMenuHeight={maxMenuHeight}\n          onValueChange={onValueChange}\n          opened={opened}\n          refMenu={this.menuRef}\n          renderTotalCount={renderTotalCount}\n          renderItem={renderItem}\n          renderNotFound={renderNotFound}\n          totalCount={totalCount}\n          renderAddButton={renderAddButton}\n        />\n      </Popup>\n    );\n  }\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"]}
+{"version":3,"sources":["TokenInputMenu.tsx"],"names":["React","ThemeFactory","Popup","ComboBoxMenu","ThemeContext","is8pxTheme","TokenInputMenu","theme","menu","getMenuRef","getPopupMargin","paddingY","parseInt","tokenInputPaddingY","outlineWidth","controlOutlineWidth","marginY","tokenMarginY","menuRef","node","render","create","popupMargin","renderMain","props","loading","maxMenuHeight","renderTotalCount","totalCount","opened","items","renderNotFound","renderItem","onValueChange","renderAddButton","anchorElement","menuWidth","menuAlign","undefined","Component","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup } from '../../internal/Popup';\nimport { ComboBoxMenu, ComboBoxMenuProps } from '../../internal/CustomComboBox';\nimport { Menu } from '../../internal/Menu';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { is8pxTheme } from '../../lib/theming/ThemeHelpers';\n\nimport { TokenInputMenuAlign, TokenInputProps } from './TokenInput';\n\nexport interface TokenInputMenuProps<T> extends ComboBoxMenuProps<T> {\n  anchorElement: HTMLElement;\n  menuWidth: TokenInputProps<string>['menuWidth'];\n  menuAlign: TokenInputMenuAlign;\n}\n\nexport class TokenInputMenu<T = string> extends React.Component<TokenInputMenuProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'TokenInputMenu';\n\n  private theme!: Theme;\n\n  private menu: Menu | null = null;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupMargin: this.getPopupMargin() + 'px',\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public getMenuRef = (): any | null => this.menu;\n\n  private renderMain() {\n    const {\n      loading,\n      maxMenuHeight,\n      renderTotalCount,\n      totalCount,\n      opened,\n      items,\n      renderNotFound,\n      renderItem,\n      onValueChange,\n      renderAddButton,\n      anchorElement,\n      menuWidth,\n      menuAlign,\n    } = this.props;\n\n    return (\n      <Popup\n        opened={opened!}\n        positions={['bottom left']}\n        anchorElement={anchorElement}\n        popupOffset={menuAlign === 'left' ? 0 : 5}\n        margin={menuAlign === 'left' ? 1 : undefined}\n        hasShadow={is8pxTheme(this.theme)}\n        width={menuAlign === 'cursor' ? 'auto' : menuWidth}\n      >\n        <ComboBoxMenu\n          items={items}\n          loading={loading}\n          maxMenuHeight={maxMenuHeight}\n          onValueChange={onValueChange}\n          opened={opened}\n          refMenu={this.menuRef}\n          renderTotalCount={renderTotalCount}\n          renderItem={renderItem}\n          renderNotFound={renderNotFound}\n          totalCount={totalCount}\n          renderAddButton={renderAddButton}\n        />\n      </Popup>\n    );\n  }\n\n  private getPopupMargin = (): number => {\n    const paddingY = parseInt(this.theme.tokenInputPaddingY, 10) || 0;\n    const outlineWidth = parseInt(this.theme.controlOutlineWidth, 10) || 0;\n    const marginY = parseInt(this.theme.tokenMarginY, 10) || 0;\n    return paddingY + outlineWidth + marginY;\n  };\n\n  private menuRef = (node: any) => (this.menu = node);\n}\n"]}