@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

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

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

@@ -74,12 +74,14 @@ declare type DefaultProps = Required<Pick<SidePageProps, 'disableAnimations' | '
  */
 export declare class SidePage extends React.Component<SidePageProps, SidePageState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static Header: typeof SidePageHeader;
     static Body: typeof SidePageBody;
     static Footer: typeof SidePageFooter;
     static Container: typeof SidePageContainer;
     state: SidePageState;
     private theme;
+    private emotion;
     private stackSubscription;
     private layout;
     private header;

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

@@ -2,144 +2,146 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 
 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, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-export var styles = memoizeStyle({
-  root: function root() {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: fixed;\n      top: 0;\n    "])));
-  },
-  mobileRoot: function mobileRoot() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n    "])));
-  },
-  overlay: function overlay() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n    "])));
-  },
-  body: function body(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ", ";\n    "])), t.modalBodyTextColor);
-  },
-  mobileBody: function mobileBody() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
-  },
-  container: function container(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
-  },
-  mobileContainer: function mobileContainer(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n    "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
-  },
-  containerWithoutHeader: function containerWithoutHeader(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.sidePagePaddingTop);
-  },
-  mobileContainerWithoutHeader: function mobileContainerWithoutHeader(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.mobileSidePagePaddingTop);
-  },
-  containerWithoutFooter: function containerWithoutFooter(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
-  },
-  containerWithPanel: function containerWithPanel(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.sidePagePaddingBottom);
-  },
-  focusLock: function focusLock() {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n    "])));
-  },
-  wrapper: function wrapper(t) {
-    return css(_templateObject13 || (_templateObject13 = _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(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      float: left;\n    "])));
-  },
-  wrapperMarginLeft: function wrapperMarginLeft() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      margin-left: 20px;\n    "])));
-  },
-  wrapperMarginRight: function wrapperMarginRight() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      margin-right: 20px;\n    "])));
-  },
-  headerWrapper: function headerWrapper() {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
-  },
-  header: function header(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      width: 100%;\n      position: relative;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
-  },
-  mobileHeader: function mobileHeader(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " 0 ", ";\n    "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
-  },
-  headerFixed: function headerFixed(t) {
-    return css(_templateObject20 || (_templateObject20 = _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(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.sidePagePaddingLeft, paddingRight);
-  },
-  mobileTitle: function mobileTitle(t) {
-    var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n      padding-right: ", "px;\n    "])), t.mobileSidePagePaddingLeft, paddingRight);
-  },
-  titleFixed: function titleFixed() {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])));
-  },
-  background: function background() {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      position: absolute;\n      width: 100%;\n    "])));
-  },
-  backgroundGray: function backgroundGray(t) {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      opacity: ", ";\n    "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
-  },
-  shadow: function shadow(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      box-shadow: ", ";\n    "])), t.sidePageContainerShadow);
-  },
-  close: function close(t) {
-    return css(_templateObject27 || (_templateObject27 = _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);
-  },
-  mobileClose: function mobileClose(t) {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      margin: -", ";\n      font-size: 0;\n    "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
-  },
-  closeFocus: function closeFocus(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      outline: 2px solid ", ";\n    "])), t.borderColorFocus);
-  },
-  wrapperClose: function wrapperClose(t) {
-    return css(_templateObject30 || (_templateObject30 = _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);
-  },
-  mobileWrapperClose: function mobileWrapperClose(t) {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0 ", ";\n      right: ", ";\n    "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
-  },
-  panel: function panel(t) {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
-  },
-  wrapperCloseFixed: function wrapperCloseFixed(t) {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      line-height: ", ";\n      padding: ", " 0;\n    "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
-  },
-  footerWrapper: function footerWrapper() {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      flex: 0 0 auto;\n    "])));
-  },
-  footer: function footer(t) {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ", ";\n    "])), t.sidePageFooterTextColor);
-  },
-  positionStatic: function positionStatic() {
-    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
-  },
-  footerContent: function footerContent(t) {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
-  },
-  mobileFooterContent: function mobileFooterContent(t) {
-    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ", ";\n    "])), t.mobileSidePageFooterPadding);
-  },
-  footerFixed: function footerFixed(t) {
-    return css(_templateObject39 || (_templateObject39 = _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);
-  },
-  panelFixed: function panelFixed(t) {
-    return css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.sidePageFixedPanelShadow);
-  },
-  transitionLeft: function transitionLeft() {
-    return css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n      transform: translateX(100px);\n    "])));
-  },
-  transitionRight: function transitionRight() {
-    return css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n      transform: translateX(-100px);\n    "])));
-  },
-  transitionActive: function transitionActive() {
-    return css(_templateObject43 || (_templateObject43 = _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 !important;\n      transform: translate(0, 0) !important;\n    "])));
-  },
-  transitionLeave: function transitionLeave() {
-    return css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
-  },
-  transitionLeaveActive: function transitionLeaveActive() {
-    return css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
-  }
-});
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: fixed;\n        top: 0;\n      "])));
+    },
+    mobileRoot: function mobileRoot() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        width: 100%;\n      "])));
+    },
+    overlay: function overlay() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      "])));
+    },
+    body: function body(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        flex: 1 0 auto;\n        z-index: 0;\n        color: ", ";\n      "])), t.modalBodyTextColor);
+    },
+    mobileBody: function mobileBody() {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        font-size: 16px;\n        line-height: 22px;\n      "])));
+    },
+    container: function container(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", ";\n      "])), t.sidePagePaddingLeft, t.sidePagePaddingRight);
+    },
+    mobileContainer: function mobileContainer(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", ";\n        padding-bottom: ", ";\n      "])), t.mobileSidePagePaddingLeft, t.mobileSidePagePaddingRight, t.mobileSidePagePaddingBottom);
+    },
+    containerWithoutHeader: function containerWithoutHeader(t) {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        padding-top: ", ";\n      "])), t.sidePagePaddingTop);
+    },
+    mobileContainerWithoutHeader: function mobileContainerWithoutHeader(t) {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        padding-top: ", ";\n      "])), t.mobileSidePagePaddingTop);
+    },
+    containerWithoutFooter: function containerWithoutFooter(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        padding-bottom: ", ";\n      "])), t.sidePagePaddingBottom);
+    },
+    containerWithPanel: function containerWithPanel(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        padding-bottom: ", ";\n      "])), t.sidePagePaddingBottom);
+    },
+    focusLock: function focusLock() {
+      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n      "])));
+    },
+    wrapper: function wrapper(t) {
+      return emotion.css(_templateObject13 || (_templateObject13 = _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 emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        float: left;\n      "])));
+    },
+    wrapperMarginLeft: function wrapperMarginLeft() {
+      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n        margin-left: 20px;\n      "])));
+    },
+    wrapperMarginRight: function wrapperMarginRight() {
+      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        margin-right: 20px;\n      "])));
+    },
+    headerWrapper: function headerWrapper() {
+      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n      "])));
+    },
+    header: function header(t) {
+      return emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " 0 ", ";\n        width: 100%;\n        position: relative;\n        color: ", ";\n        font-weight: ", ";\n      "])), t.sidePageHeaderFontSize, t.sidePageHeaderLineHeight, t.sidePageHeaderPaddingTop, t.sidePageHeaderPaddingBottom, t.sidePageHeaderTextColor, t.sidePageHeaderFontWeight);
+    },
+    mobileHeader: function mobileHeader(t) {
+      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        font-size: ", ";\n        line-height: ", ";\n        padding: ", " 0 ", ";\n      "])), t.mobileSidePageHeaderFontSize, t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom);
+    },
+    headerFixed: function headerFixed(t) {
+      return emotion.css(_templateObject20 || (_templateObject20 = _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 emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", "px;\n      "])), t.sidePagePaddingLeft, paddingRight);
+    },
+    mobileTitle: function mobileTitle(t) {
+      var paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);
+      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n        padding-left: ", ";\n        padding-right: ", "px;\n      "])), t.mobileSidePagePaddingLeft, paddingRight);
+    },
+    titleFixed: function titleFixed() {
+      return emotion.css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "])));
+    },
+    background: function background() {
+      return emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        width: 100%;\n      "])));
+    },
+    backgroundGray: function backgroundGray(t) {
+      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        opacity: ", ";\n      "])), t.sidePageBackingBg, t.sidePageBackingBgOpacity);
+    },
+    shadow: function shadow(t) {
+      return emotion.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n        box-shadow: ", ";\n      "])), t.sidePageContainerShadow);
+    },
+    close: function close(t) {
+      return emotion.css(_templateObject27 || (_templateObject27 = _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(emotion), t.sidePageCloseButtonColor, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonClickArea, t.sidePageCloseButtonHoverColor, t.sidePageCloseIconSize, t.sidePageCloseIconSize);
+    },
+    mobileClose: function mobileClose(t) {
+      return emotion.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n        padding: ", ";\n        margin: -", ";\n        font-size: 0;\n      "])), t.mobileSidePageCloseButtonClickArea, t.mobileSidePageCloseButtonClickArea);
+    },
+    closeFocus: function closeFocus(t) {
+      return emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n        outline: 2px solid ", ";\n      "])), t.borderColorFocus);
+    },
+    wrapperClose: function wrapperClose(t) {
+      return emotion.css(_templateObject30 || (_templateObject30 = _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);
+    },
+    mobileWrapperClose: function mobileWrapperClose(t) {
+      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n        line-height: ", ";\n        padding: ", " 0 ", ";\n        right: ", ";\n      "])), t.mobileSidePageHeaderLineHeight, t.mobileSidePageHeaderPaddingTop, t.mobileSidePageHeaderPaddingBottom, t.mobileSidePageCloseButtonPadding);
+    },
+    panel: function panel(t) {
+      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        padding: ", " ", " ", "\n          ", ";\n      "])), t.sidePageFooterPanelBg, t.sidePageFooterPanelPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPanelPaddingBottom, t.sidePagePaddingLeft);
+    },
+    wrapperCloseFixed: function wrapperCloseFixed(t) {
+      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n        line-height: ", ";\n        padding: ", " 0;\n      "])), t.sidePageHeaderFixedLineHeight, t.sidePageHeaderFixedPaddingY);
+    },
+    footerWrapper: function footerWrapper() {
+      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n        flex: 0 0 auto;\n      "])));
+    },
+    footer: function footer(t) {
+      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n        bottom: 0;\n        position: fixed;\n        z-index: 10;\n        color: ", ";\n      "])), t.sidePageFooterTextColor);
+    },
+    positionStatic: function positionStatic() {
+      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n        position: static;\n      "])));
+    },
+    footerContent: function footerContent(t) {
+      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n        padding: ", " ", " ", "\n          ", ";\n      "])), t.sidePageFooterPaddingTop, t.sidePagePaddingRight, t.sidePageFooterPaddingBottom, t.sidePagePaddingLeft);
+    },
+    mobileFooterContent: function mobileFooterContent(t) {
+      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        flex-flow: column nowrap;\n        padding: ", ";\n      "])), t.mobileSidePageFooterPadding);
+    },
+    footerFixed: function footerFixed(t) {
+      return emotion.css(_templateObject39 || (_templateObject39 = _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);
+    },
+    panelFixed: function panelFixed(t) {
+      return emotion.css(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n        &:before {\n          box-shadow: ", ";\n        }\n      "])), t.sidePageFixedPanelShadow);
+    },
+    transitionLeft: function transitionLeft() {
+      return emotion.css(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n        transform: translateX(100px);\n      "])));
+    },
+    transitionRight: function transitionRight() {
+      return emotion.css(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n        transform: translateX(-100px);\n      "])));
+    },
+    transitionActive: function transitionActive() {
+      return emotion.css(_templateObject43 || (_templateObject43 = _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 !important;\n        transform: translate(0, 0) !important;\n      "])));
+    },
+    transitionLeave: function transitionLeave() {
+      return emotion.css(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n        opacity: 1;\n      "])));
+    },
+    transitionLeaveActive: function transitionLeaveActive() {
+      return emotion.css(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n        opacity: 0.01 !important;\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":["css","memoizeStyle","resetButton","styles","root","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","sidePageHeaderFontWeight","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","panelFixed","sidePageFixedPanelShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import { 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      top: 0;\n    `;\n  },\n\n  mobileRoot() {\n    return css`\n      width: 100%;\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(t: Theme) {\n    return css`\n      flex: 1 0 auto;\n      z-index: 0;\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody() {\n    return css`\n      font-size: 16px;\n      line-height: 22px;\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      padding-left: ${t.sidePagePaddingLeft};\n      padding-right: ${t.sidePagePaddingRight};\n    `;\n  },\n\n  mobileContainer(t: Theme) {\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\n      padding-right: ${t.mobileSidePagePaddingRight};\n      padding-bottom: ${t.mobileSidePagePaddingBottom};\n    `;\n  },\n\n  containerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.sidePagePaddingTop};\n    `;\n  },\n\n  mobileContainerWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.mobileSidePagePaddingTop};\n    `;\n  },\n\n  containerWithoutFooter(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\n    `;\n  },\n\n  containerWithPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.sidePagePaddingBottom};\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      font-weight: ${t.sidePageHeaderFontWeight};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileSidePageHeaderFontSize};\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\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  mobileTitle(t: Theme) {\n    const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n    return css`\n      padding-left: ${t.mobileSidePagePaddingLeft};\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  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  mobileClose(t: Theme) {\n    return css`\n      padding: ${t.mobileSidePageCloseButtonClickArea};\n      margin: -${t.mobileSidePageCloseButtonClickArea};\n      font-size: 0;\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  mobileWrapperClose(t: Theme) {\n    return css`\n      line-height: ${t.mobileSidePageHeaderLineHeight};\n      padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      right: ${t.mobileSidePageCloseButtonPadding};\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  wrapperCloseFixed(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(t: Theme) {\n    return css`\n      bottom: 0;\n      position: fixed;\n      z-index: 10;\n      color: ${t.sidePageFooterTextColor};\n    `;\n  },\n\n  positionStatic() {\n    return css`\n      position: static;\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  mobileFooterContent(t: Theme) {\n    return css`\n      display: flex;\n      flex-flow: column nowrap;\n      padding: ${t.mobileSidePageFooterPadding};\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  panelFixed(t: Theme) {\n    return css`\n      &:before {\n        box-shadow: ${t.sidePageFixedPanelShadow};\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 !important;\n      transform: translate(0, 0) !important;\n    `;\n  },\n\n  transitionLeave() {\n    return css`\n      opacity: 1;\n    `;\n  },\n\n  transitionLeaveActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["SidePage.styles.ts"],"names":["memoizeStyle","resetButton","getStyles","emotion","root","css","mobileRoot","overlay","body","t","modalBodyTextColor","mobileBody","container","sidePagePaddingLeft","sidePagePaddingRight","mobileContainer","mobileSidePagePaddingLeft","mobileSidePagePaddingRight","mobileSidePagePaddingBottom","containerWithoutHeader","sidePagePaddingTop","mobileContainerWithoutHeader","mobileSidePagePaddingTop","containerWithoutFooter","sidePagePaddingBottom","containerWithPanel","focusLock","wrapper","sidePageBgDefault","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","headerWrapper","header","sidePageHeaderFontSize","sidePageHeaderLineHeight","sidePageHeaderPaddingTop","sidePageHeaderPaddingBottom","sidePageHeaderTextColor","sidePageHeaderFontWeight","mobileHeader","mobileSidePageHeaderFontSize","mobileSidePageHeaderLineHeight","mobileSidePageHeaderPaddingTop","mobileSidePageHeaderPaddingBottom","headerFixed","sidePageHeaderFixedFontSize","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","sidePageFixedHeaderShadow","title","paddingRight","parseInt","sidePageCloseButtonPadding","sidePageCloseButtonLegacyPaddingLeft","sidePageCloseIconSize","mobileTitle","mobileSidePageCloseButtonPadding","titleFixed","background","backgroundGray","sidePageBackingBg","sidePageBackingBgOpacity","shadow","sidePageContainerShadow","close","sidePageCloseButtonColor","sidePageCloseButtonClickArea","sidePageCloseButtonHoverColor","mobileClose","mobileSidePageCloseButtonClickArea","closeFocus","borderColorFocus","wrapperClose","mobileWrapperClose","panel","sidePageFooterPanelBg","sidePageFooterPanelPaddingTop","sidePageFooterPanelPaddingBottom","wrapperCloseFixed","footerWrapper","footer","sidePageFooterTextColor","positionStatic","footerContent","sidePageFooterPaddingTop","sidePageFooterPaddingBottom","mobileFooterContent","mobileSidePageFooterPadding","footerFixed","sidePageFixedFooterShadow","panelFixed","sidePageFixedPanelShadow","transitionLeft","transitionRight","transitionActive","transitionLeave","transitionLeaveActive"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        height: 100%;\n        position: fixed;\n        top: 0;\n      `;\n    },\n\n    mobileRoot() {\n      return emotion.css`\n        width: 100%;\n      `;\n    },\n\n    overlay() {\n      return emotion.css`\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n      `;\n    },\n\n    body(t: Theme) {\n      return emotion.css`\n        flex: 1 0 auto;\n        z-index: 0;\n        color: ${t.modalBodyTextColor};\n      `;\n    },\n\n    mobileBody() {\n      return emotion.css`\n        font-size: 16px;\n        line-height: 22px;\n      `;\n    },\n\n    container(t: Theme) {\n      return emotion.css`\n        padding-left: ${t.sidePagePaddingLeft};\n        padding-right: ${t.sidePagePaddingRight};\n      `;\n    },\n\n    mobileContainer(t: Theme) {\n      return emotion.css`\n        padding-left: ${t.mobileSidePagePaddingLeft};\n        padding-right: ${t.mobileSidePagePaddingRight};\n        padding-bottom: ${t.mobileSidePagePaddingBottom};\n      `;\n    },\n\n    containerWithoutHeader(t: Theme) {\n      return emotion.css`\n        padding-top: ${t.sidePagePaddingTop};\n      `;\n    },\n\n    mobileContainerWithoutHeader(t: Theme) {\n      return emotion.css`\n        padding-top: ${t.mobileSidePagePaddingTop};\n      `;\n    },\n\n    containerWithoutFooter(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    containerWithPanel(t: Theme) {\n      return emotion.css`\n        padding-bottom: ${t.sidePagePaddingBottom};\n      `;\n    },\n\n    focusLock() {\n      return emotion.css`\n        height: 100%;\n      `;\n    },\n\n    wrapper(t: Theme) {\n      return emotion.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 emotion.css`\n        float: left;\n      `;\n    },\n\n    wrapperMarginLeft() {\n      return emotion.css`\n        margin-left: 20px;\n      `;\n    },\n\n    wrapperMarginRight() {\n      return emotion.css`\n        margin-right: 20px;\n      `;\n    },\n\n    headerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    header(t: Theme) {\n      return emotion.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        font-weight: ${t.sidePageHeaderFontWeight};\n      `;\n    },\n\n    mobileHeader(t: Theme) {\n      return emotion.css`\n        font-size: ${t.mobileSidePageHeaderFontSize};\n        line-height: ${t.mobileSidePageHeaderLineHeight};\n        padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n      `;\n    },\n\n    headerFixed(t: Theme) {\n      return emotion.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 emotion.css`\n        padding-left: ${t.sidePagePaddingLeft};\n        padding-right: ${paddingRight}px;\n      `;\n    },\n\n    mobileTitle(t: Theme) {\n      const paddingRight = parseInt(t.mobileSidePageCloseButtonPadding) * 2 + parseInt(t.sidePageCloseIconSize);\n      return emotion.css`\n        padding-left: ${t.mobileSidePagePaddingLeft};\n        padding-right: ${paddingRight}px;\n      `;\n    },\n\n    titleFixed() {\n      return emotion.css`\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `;\n    },\n\n    background() {\n      return emotion.css`\n        height: 100%;\n        position: absolute;\n        width: 100%;\n      `;\n    },\n\n    backgroundGray(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageBackingBg};\n        opacity: ${t.sidePageBackingBgOpacity};\n      `;\n    },\n\n    shadow(t: Theme) {\n      return emotion.css`\n        box-shadow: ${t.sidePageContainerShadow};\n      `;\n    },\n\n    close(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\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    mobileClose(t: Theme) {\n      return emotion.css`\n        padding: ${t.mobileSidePageCloseButtonClickArea};\n        margin: -${t.mobileSidePageCloseButtonClickArea};\n        font-size: 0;\n      `;\n    },\n\n    closeFocus(t: Theme) {\n      return emotion.css`\n        outline: 2px solid ${t.borderColorFocus};\n      `;\n    },\n\n    wrapperClose(t: Theme) {\n      return emotion.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    mobileWrapperClose(t: Theme) {\n      return emotion.css`\n        line-height: ${t.mobileSidePageHeaderLineHeight};\n        padding: ${t.mobileSidePageHeaderPaddingTop} 0 ${t.mobileSidePageHeaderPaddingBottom};\n        right: ${t.mobileSidePageCloseButtonPadding};\n      `;\n    },\n\n    panel(t: Theme) {\n      return emotion.css`\n        background: ${t.sidePageFooterPanelBg};\n        padding: ${t.sidePageFooterPanelPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPanelPaddingBottom}\n          ${t.sidePagePaddingLeft};\n      `;\n    },\n\n    wrapperCloseFixed(t: Theme) {\n      return emotion.css`\n        line-height: ${t.sidePageHeaderFixedLineHeight};\n        padding: ${t.sidePageHeaderFixedPaddingY} 0;\n      `;\n    },\n\n    footerWrapper() {\n      return emotion.css`\n        flex: 0 0 auto;\n      `;\n    },\n\n    footer(t: Theme) {\n      return emotion.css`\n        bottom: 0;\n        position: fixed;\n        z-index: 10;\n        color: ${t.sidePageFooterTextColor};\n      `;\n    },\n\n    positionStatic() {\n      return emotion.css`\n        position: static;\n      `;\n    },\n\n    footerContent(t: Theme) {\n      return emotion.css`\n        padding: ${t.sidePageFooterPaddingTop} ${t.sidePagePaddingRight} ${t.sidePageFooterPaddingBottom}\n          ${t.sidePagePaddingLeft};\n      `;\n    },\n\n    mobileFooterContent(t: Theme) {\n      return emotion.css`\n        display: flex;\n        flex-flow: column nowrap;\n        padding: ${t.mobileSidePageFooterPadding};\n      `;\n    },\n\n    footerFixed(t: Theme) {\n      return emotion.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    panelFixed(t: Theme) {\n      return emotion.css`\n        &:before {\n          box-shadow: ${t.sidePageFixedPanelShadow};\n        }\n      `;\n    },\n\n    transitionLeft() {\n      return emotion.css`\n        transform: translateX(100px);\n      `;\n    },\n\n    transitionRight() {\n      return emotion.css`\n        transform: translateX(-100px);\n      `;\n    },\n\n    transitionActive() {\n      return emotion.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 !important;\n        transform: translate(0, 0) !important;\n      `;\n    },\n\n    transitionLeave() {\n      return emotion.css`\n        opacity: 1;\n      `;\n    },\n\n    transitionLeaveActive() {\n      return emotion.css`\n        opacity: 0.01 !important;\n        transition: opacity 0.15s ease-out;\n      `;\n    },\n  });\n"]}

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

@@ -1,5 +1,6 @@
+import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
+export declare const getStyles: (emotion: Emotion) => {
     root(): string;
     mobileRoot(): string;
     overlay(): string;