@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

package/components/Modal/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","cn","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","ModalContext","ModalFooter","ModalHeader","isBody","isFooter","isHeader","ModalBody","ModalClose","jsStyles","mountedModalsCount","Modal","state","stackPosition","hasBackground","horizontalScroll","theme","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","handleResize","emit","componentDidMount","add","window","addEventListener","componentWillUnmount","removeEventListener","remove","render","renderMain","hasHeader","hasFooter","hasPanel","Children","toArray","children","forEach","child","panel","modalContextProps","noClose","close","additionalPadding","style","containerStyle","width","root","bg","container","centerContainer","alignTop","Boolean","disableFocusLock","closeWrapper","Component","__KONTUR_REACT_UI__","Header","Body","Footer","propTypes","propName","componentName","some","Error","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport FocusLock from 'react-focus-lock';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { stopPropagation } from '../../lib/events/stopPropagation';\r\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\r\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\r\nimport { ResizeDetector } from '../../internal/ResizeDetector';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { isIE11 } from '../../lib/client';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { ModalContext, ModalContextProps } from './ModalContext';\r\nimport { ModalFooter } from './ModalFooter';\r\nimport { ModalHeader } from './ModalHeader';\r\nimport { isBody, isFooter, isHeader } from './helpers';\r\nimport { ModalBody } from './ModalBody';\r\nimport { ModalClose } from './ModalClose';\r\nimport { jsStyles } from './Modal.styles';\r\n\r\nlet mountedModalsCount = 0;\r\n\r\nexport interface ModalProps extends CommonProps {\r\n  /**\r\n   * Отключает событие onClose, также дизейблит кнопку закрытия модалки\r\n   */\r\n  disableClose?: boolean;\r\n\r\n  /**\r\n   * Выравнивание окна по верху страницы.\r\n   */\r\n  alignTop?: boolean;\r\n\r\n  /**\r\n   * Не закрывать окно при клике на фон.\r\n   */\r\n  ignoreBackgroundClick?: boolean;\r\n\r\n  /**\r\n   * Не показывать крестик для закрытия окна.\r\n   */\r\n  noClose?: boolean;\r\n  width?: number | string;\r\n\r\n  /**\r\n   * Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\r\n   * Escape или на крестик).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Не использовать фокус-лок внутри модалки.\r\n   * По умолчанию true для IE11.\r\n   */\r\n  disableFocusLock?: boolean;\r\n}\r\n\r\nexport interface ModalState {\r\n  stackPosition: number;\r\n  hasBackground: boolean;\r\n  horizontalScroll: boolean;\r\n}\r\n\r\n/**\r\n * Модальное окно\r\n *\r\n * Содержит в себе три компоненты: **Modal.Header**,\r\n * **Modal.Body** и **Modal.Footer**\r\n *\r\n * Для отображения серой плашки в футере в компонент\r\n * **Footer** необходимо передать пропс **panel**\r\n *\r\n * Для отключения прилипания шапки и футера\r\n * в соответствующий компонет нужно передать\r\n * проп **sticky** со значением **false**\r\n * (по-умолчанию прилипание включено)\r\n */\r\nexport class Modal extends React.Component<ModalProps, ModalState> {\r\n  public static __KONTUR_REACT_UI__ = 'Modal';\r\n\r\n  public static Header = ModalHeader;\r\n  public static Body = ModalBody;\r\n  public static Footer = ModalFooter;\r\n\r\n  public static propTypes = {\r\n    children(props: ModalProps, propName: keyof ModalProps, componentName: string) {\r\n      if (\r\n        React.Children.toArray(props[propName]).some(child => !isHeader(child) && !isBody(child) && !isFooter(child))\r\n      ) {\r\n        return new Error(\r\n          `Only 'Header/Body/Footer' components are allowed for '${propName}' prop of '${componentName}' component`,\r\n        );\r\n      }\r\n    },\r\n  };\r\n\r\n  public static defaultProps = {\r\n    // NOTE: в ie нормально не работает\r\n    disableFocusLock: isIE11,\r\n  };\r\n\r\n  public state: ModalState = {\r\n    stackPosition: 0,\r\n    hasBackground: true,\r\n    horizontalScroll: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private stackSubscription: ModalStackSubscription | null = null;\r\n  private containerNode: HTMLDivElement | null = null;\r\n  private mouseDownTarget: EventTarget | null = null;\r\n  private mouseUpTarget: EventTarget | null = null;\r\n\r\n  public componentDidMount() {\r\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\r\n\r\n    if (mountedModalsCount === 0) {\r\n      window.addEventListener('resize', this.checkHorizontalScrollAppearance);\r\n    }\r\n\r\n    mountedModalsCount++;\r\n    window.addEventListener('keydown', this.handleKeyDown);\r\n    this.checkHorizontalScrollAppearance();\r\n\r\n    if (this.containerNode) {\r\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\r\n    }\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    if (--mountedModalsCount === 0) {\r\n      window.removeEventListener('resize', this.checkHorizontalScrollAppearance);\r\n      LayoutEvents.emit();\r\n    }\r\n\r\n    window.removeEventListener('keydown', this.handleKeyDown);\r\n    if (this.stackSubscription != null) {\r\n      this.stackSubscription.remove();\r\n    }\r\n    ModalStack.remove(this);\r\n\r\n    if (this.containerNode) {\r\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\r\n    }\r\n  }\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    let hasHeader = false;\r\n    let hasFooter = false;\r\n    let hasPanel = false;\r\n\r\n    React.Children.toArray(this.props.children).forEach(child => {\r\n      if (isHeader(child)) {\r\n        hasHeader = true;\r\n      }\r\n      if (isFooter(child)) {\r\n        hasFooter = true;\r\n        if (child.props.panel) {\r\n          hasPanel = true;\r\n        }\r\n      }\r\n    });\r\n\r\n    const modalContextProps: ModalContextProps = {\r\n      hasHeader,\r\n      horizontalScroll: this.state.horizontalScroll,\r\n    };\r\n    if (hasHeader && !this.props.noClose) {\r\n      modalContextProps.close = {\r\n        disableClose: this.props.disableClose,\r\n        requestClose: this.requestClose,\r\n      };\r\n    }\r\n    if (!hasFooter) {\r\n      modalContextProps.additionalPadding = true;\r\n    }\r\n    if (hasFooter && hasPanel) {\r\n      modalContextProps.additionalPadding = true;\r\n    }\r\n\r\n    const style: { width?: number | string } = {};\r\n    const containerStyle: { width?: number | string } = {};\r\n\r\n    if (this.props.width) {\r\n      style.width = this.props.width;\r\n    } else {\r\n      containerStyle.width = 'auto';\r\n    }\r\n\r\n    return (\r\n      <CommonWrapper {...this.props}>\r\n        <RenderContainer>\r\n          <ZIndex priority={'Modal'} className={jsStyles.root()}>\r\n            <HideBodyVerticalScroll />\r\n            {this.state.hasBackground && <div className={jsStyles.bg(this.theme)} />}\r\n            <div\r\n              ref={this.refContainer}\r\n              className={jsStyles.container()}\r\n              onMouseDown={this.handleContainerMouseDown}\r\n              onMouseUp={this.handleContainerMouseUp}\r\n              onClick={this.handleContainerClick}\r\n              data-tid=\"modal-container\"\r\n            >\r\n              <div\r\n                className={cn({\r\n                  [jsStyles.centerContainer(this.theme)]: true,\r\n                  [jsStyles.alignTop(this.theme)]: Boolean(this.props.alignTop),\r\n                })}\r\n                style={containerStyle}\r\n                data-tid=\"modal-content\"\r\n              >\r\n                <div className={jsStyles.window(this.theme)} style={style}>\r\n                  <ResizeDetector onResize={this.handleResize}>\r\n                    <FocusLock disabled={this.props.disableFocusLock} autoFocus={false}>\r\n                      {!hasHeader && !this.props.noClose ? (\r\n                        <ZIndex priority={'ModalCross'} className={jsStyles.closeWrapper()}>\r\n                          <ModalClose requestClose={this.requestClose} disableClose={this.props.disableClose} />\r\n                        </ZIndex>\r\n                      ) : null}\r\n                      <ModalContext.Provider value={modalContextProps}>{this.props.children}</ModalContext.Provider>\r\n                    </FocusLock>\r\n                  </ResizeDetector>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </ZIndex>\r\n        </RenderContainer>\r\n      </CommonWrapper>\r\n    );\r\n  }\r\n\r\n  private requestClose = () => {\r\n    if (this.props.disableClose) {\r\n      return;\r\n    }\r\n    if (this.props.onClose) {\r\n      this.props.onClose();\r\n    }\r\n  };\r\n\r\n  private refContainer = (center: HTMLDivElement | null) => {\r\n    this.containerNode = center;\r\n  };\r\n\r\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\r\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\r\n  };\r\n\r\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\r\n    this.mouseDownTarget = event.target;\r\n  };\r\n\r\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\r\n    this.mouseUpTarget = event.target;\r\n  };\r\n\r\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!this.props.ignoreBackgroundClick) {\r\n      const { target, currentTarget } = event;\r\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\r\n        this.requestClose();\r\n      }\r\n    }\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (this.state.stackPosition !== 0) {\r\n      return;\r\n    }\r\n    if (isKeyEscape(e)) {\r\n      stopPropagation(e);\r\n      this.requestClose();\r\n    }\r\n  };\r\n\r\n  private checkHorizontalScrollAppearance = () => {\r\n    let hasScroll = false;\r\n\r\n    if (this.containerNode) {\r\n      const containerClientWidth = this.containerNode.clientWidth;\r\n      const containerScrollWidth = this.containerNode.scrollWidth;\r\n      hasScroll = containerClientWidth < containerScrollWidth;\r\n    }\r\n    if (hasScroll && !this.state.horizontalScroll) {\r\n      this.setState({ horizontalScroll: true });\r\n    } else if (this.state.horizontalScroll) {\r\n      this.setState({ horizontalScroll: false });\r\n    }\r\n  };\r\n\r\n  private handleResize = (event: UIEvent) => {\r\n    LayoutEvents.emit();\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","styles","mountedModalsCount","Modal","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","theme","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","handleResize","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","window","addEventListener","componentWillUnmount","removeEventListener","remove","render","renderMain","modalContextProps","noClose","close","additionalPadding","style","containerStyle","width","root","bg","container","centerContainer","alignTop","Boolean","disableFocusLock","closeWrapper","children","Component","__KONTUR_REACT_UI__","Header","Body","Footer","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { styles } from './Modal.styles';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps extends CommonProps {\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия модалки\n   */\n  disableClose?: boolean;\n\n  /**\n   * Выравнивание окна по верху страницы.\n   */\n  alignTop?: boolean;\n\n  /**\n   * Не закрывать окно при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Не показывать крестик для закрытия окна.\n   */\n  noClose?: boolean;\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Не использовать фокус-лок внутри модалки.\n   * По умолчанию true для IE11.\n   */\n  disableFocusLock?: boolean;\n}\n\nexport interface ModalState {\n  stackPosition: number;\n  hasBackground: boolean;\n  horizontalScroll: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\n/**\n * Модальное окно\n *\n * Содержит в себе три компоненты: **Modal.Header**,\n * **Modal.Body** и **Modal.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n *\n * Для отключения прилипания шапки и футера\n * в соответствующий компонет нужно передать\n * проп **sticky** со значением **false**\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n  public static __KONTUR_REACT_UI__ = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps = {\n    // NOTE: в ie нормально не работает\n    disableFocusLock: isIE11,\n  };\n\n  public state: ModalState = {\n    stackPosition: 0,\n    hasBackground: true,\n    horizontalScroll: false,\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private containerNode: HTMLDivElement | null = null;\n  private mouseDownTarget: EventTarget | null = null;\n  private mouseUpTarget: EventTarget | null = null;\n\n  public componentDidMount() {\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n    if (mountedModalsCount === 0) {\n      window.addEventListener('resize', this.checkHorizontalScrollAppearance);\n    }\n\n    mountedModalsCount++;\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.checkHorizontalScrollAppearance();\n\n    if (this.containerNode) {\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (--mountedModalsCount === 0) {\n      window.removeEventListener('resize', this.checkHorizontalScrollAppearance);\n      LayoutEvents.emit();\n    }\n\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (this.stackSubscription != null) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n\n    const modalContextProps: ModalContextProps = {\n      hasHeader,\n      horizontalScroll: this.state.horizontalScroll,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n    if (hasHeader && !this.props.noClose) {\n      modalContextProps.close = {\n        disableClose: this.props.disableClose,\n        requestClose: this.requestClose,\n      };\n    }\n    if (!hasFooter) {\n      modalContextProps.additionalPadding = true;\n    }\n    if (hasFooter && hasPanel) {\n      modalContextProps.additionalPadding = true;\n    }\n\n    const style: { width?: number | string } = {};\n    const containerStyle: { width?: number | string } = {};\n\n    if (this.props.width) {\n      style.width = this.props.width;\n    } else {\n      containerStyle.width = 'auto';\n    }\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <ZIndex priority={'Modal'} className={styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && <div className={styles.bg(this.theme)} />}\n            <div\n              ref={this.refContainer}\n              className={styles.container()}\n              onMouseDown={this.handleContainerMouseDown}\n              onMouseUp={this.handleContainerMouseUp}\n              onClick={this.handleContainerClick}\n              data-tid=\"modal-container\"\n            >\n              <div\n                className={cx({\n                  [styles.centerContainer(this.theme)]: true,\n                  [styles.alignTop()]: Boolean(this.props.alignTop),\n                })}\n                style={containerStyle}\n                data-tid=\"modal-content\"\n              >\n                <div className={styles.window(this.theme)} style={style}>\n                  <ResizeDetector onResize={this.handleResize}>\n                    <FocusLock disabled={this.props.disableFocusLock} autoFocus={false}>\n                      {!hasHeader && !this.props.noClose ? (\n                        <ZIndex priority={'ModalCross'} className={styles.closeWrapper(this.theme)}>\n                          <ModalClose requestClose={this.requestClose} disableClose={this.props.disableClose} />\n                        </ZIndex>\n                      ) : null}\n                      <ModalContext.Provider value={modalContextProps}>{this.props.children}</ModalContext.Provider>\n                    </FocusLock>\n                  </ResizeDetector>\n                </div>\n              </div>\n            </div>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\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 refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\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 checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private handleResize = (event: UIEvent) => {\n    LayoutEvents.emit();\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/Modal/Modal.d.ts

@@ -36,6 +36,9 @@ export interface ModalState {
     stackPosition: number;
     hasBackground: boolean;
     horizontalScroll: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    hasPanel: boolean;
 }
 /**
  * Модальное окно
@@ -56,9 +59,6 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     static Header: typeof ModalHeader;
     static Body: typeof ModalBody;
     static Footer: typeof ModalFooter;
-    static propTypes: {
-        children(props: ModalProps, propName: "style" | "width" | "className" | "data-tid" | "onClose" | "disableClose" | "ignoreBackgroundClick" | "alignTop" | "noClose" | "disableFocusLock", componentName: string): Error | undefined;
-    };
     static defaultProps: {
         disableFocusLock: boolean;
     };
@@ -81,4 +81,7 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private handleKeyDown;
     private checkHorizontalScrollAppearance;
     private handleResize;
+    private setHasHeader;
+    private setHasFooter;
+    private setHasPanel;
 }

package/components/Modal/Modal.md

@@ -1,37 +1,38 @@
-```jsx harmony
-import { Button, Toggle } from '@skbkontur/react-ui';
-
-let initialState = { opened: false };
-
-function renderModal() {
-  return (
-    <Modal onClose={close}>
-      <Modal.Header>Title</Modal.Header>
-      <Modal.Body>
-        <p>Use rxjs operators with react hooks</p>
-
-        <div>
-          <Toggle checked={state.panel} onValueChange={() => setState(({ panel }) => ({ panel: !panel }))} /> Panel{' '}
-          {state.panel ? 'enabled' : 'disabled'}
-        </div>
-      </Modal.Body>
-      <Modal.Footer panel={state.panel}>
-        <Button onClick={close}>Close</Button>
-      </Modal.Footer>
-    </Modal>
-  );
-}
-
-function open() {
-  setState({ opened: true });
-}
-
-function close() {
-  setState({ opened: false });
-}
-
-<div>
-  {state.opened && renderModal()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
+```jsx harmony
+import { Button, Toggle } from '@skbkontur/react-ui';
+
+const [opened, setOpened] = React.useState(false);
+const [panel, setPanel] = React.useState(false);
+
+function renderModal() {
+  return (
+    <Modal onClose={close}>
+      <Modal.Header>Title</Modal.Header>
+      <Modal.Body>
+        <p>Use rxjs operators with react hooks</p>
+
+        <div>
+          <Toggle checked={panel} onValueChange={setPanel} /> Panel{' '}
+          {panel ? 'enabled' : 'disabled'}
+        </div>
+      </Modal.Body>
+      <Modal.Footer panel={panel}>
+        <Button onClick={close}>Close</Button>
+      </Modal.Footer>
+    </Modal>
+  );
+}
+
+function open() {
+  setOpened(true);
+}
+
+function close() {
+  setOpened(false);
+}
+
+<div>
+  {opened && renderModal()}
+  <Button onClick={open}>Open</Button>
+</div>;
+```

package/components/Modal/Modal.styles/Modal.styles.js

@@ -1,311 +1,85 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject23() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-bottom: 30px;\n    "]);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
-  _templateObject23 = function _templateObject23() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject22() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: 0 !important;\n    "]);
-
-  _templateObject22 = function _templateObject22() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject21() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-top: 30px;\n    "]);
-
-  _templateObject21 = function _templateObject21() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject20() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "]);
-
-  _templateObject20 = function _templateObject20() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject19() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "]);
-
-  _templateObject19 = function _templateObject19() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject18() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "]);
-
-  _templateObject18 = function _templateObject18() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject17() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "& {\n        padding-top: 20px;\n        padding-bottom: 20px;\n        background: ", ";\n      }\n    "]);
-
-  _templateObject17 = function _templateObject17() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject16() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: 0 35px 30px 30px;\n    "]);
-
-  _templateObject16 = function _templateObject16() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject15() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "]);
-
-  _templateObject15 = function _templateObject15() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject14() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding: 0 35px 25px 30px;\n    "]);
-
-  _templateObject14 = function _templateObject14() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject13() {
-  var data = _taggedTemplateLiteralLoose(["\n      padding-right: 110px !important;\n    "]);
-
-  _templateObject13 = function _templateObject13() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject12() {
-  var data = _taggedTemplateLiteralLoose(["\n      font-size: 22px;\n      line-height: 30px;\n      padding: 24px 35px 11px 30px;\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n    "]);
-
-  _templateObject12 = function _templateObject12() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject11() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "]);
-
-  _templateObject11 = function _templateObject11() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject10() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", " & {\n        display: none;\n      }\n\n      ", ":focus & {\n        border: 2px solid ", ";\n        position: absolute;\n        display: block;\n        top: 27px;\n        right: 27px;\n        width: 26px;\n        height: 26px;\n      }\n    "]);
-
-  _templateObject10 = function _templateObject10() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject9() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "& {\n        pointer-events: none;\n        cursor: default;\n        color: ", ";\n      }\n    "]);
-
-  _templateObject9 = function _templateObject9() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject8() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: 76px;\n      height: 76px;\n    "]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      right: ", "px;\n      top: ", "px;\n      width: ", "px;\n      height: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", "px;\n        height: ", "px;\n        padding: ", "px ", "px ", "px ", "px;\n        box-sizing: content-box;\n      }\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteralLoose(["\n      ", "& {\n        vertical-align: top;\n      }\n    "]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ", ") {\n        margin: 0;\n        width: 100%;\n      }\n    "]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ", ";\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
-var styles = {
+export var styles = memoizeStyle({
   root: function root() {
-    return css(_templateObject());
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
   },
   bg: function bg(t) {
-    return css(_templateObject2(), t.modalBackBg, t.modalBackOpacity);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "])), t.modalBackBg, t.modalBackOpacity);
   },
   container: function container() {
-    return css(_templateObject3());
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    "])));
   },
   window: function window(t) {
-    return css(_templateObject4(), t.bgDefault);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ", ";\n    "])), t.bgDefault);
   },
   centerContainer: function centerContainer(t) {
-    return css(_templateObject5(), t.modalAdaptiveThreshold);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ", ") {\n        margin: 0;\n        width: 100%;\n      }\n    "])), t.modalAdaptiveThreshold);
   },
-  alignTop: function alignTop(t) {
-    return css(_templateObject6(), cssName(styles.centerContainer(t)));
+  alignTop: function alignTop() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
   },
   close: function close(t) {
-    var iconSize = 14;
-    var margin = 0;
-    var paddingTop = 35;
-    var paddingBottom = 20;
-    var blockSize = iconSize + paddingTop + paddingBottom;
-    return css(_templateObject7(), resetButton(), margin, margin, blockSize, blockSize, t.modalCloseButtonColor, t.modalCloseButtonHoverColor, iconSize, iconSize, paddingTop, paddingTop, paddingBottom, paddingBottom);
-  },
-  closeWrapper: function closeWrapper() {
-    return css(_templateObject8());
+    var padding = parseInt(t.modalCloseButtonPadding);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: absolute;\n      display: flex;\n      right: ", "px;\n      top: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n      padding: ", ";\n      margin: -", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n        box-sizing: content-box;\n      }\n    "])), resetButton(), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
+  },
+  closeWrapper: function closeWrapper(t) {
+    var padding = parseInt(t.modalCloseButtonPadding);
+    var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
+    var legacyGap = parseInt(t.modalCloseWrapperLegacyGap);
+    var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
+    var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
+    var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX + legacyGap, blockSizeY);
   },
   disabled: function disabled(t) {
-    return css(_templateObject9(), cssName(styles.close(t)), t.modalCloseButtonDisabledColor);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
   },
-  closeOutline: function closeOutline(t) {
-    return css(_templateObject10(), cssName(styles.close(t)), cssName(styles.close(t)), t.borderColorFocus);
+  focus: function focus(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
   },
   headerWrapper: function headerWrapper() {
-    return css(_templateObject11());
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   },
-  header: function header() {
-    return css(_templateObject12());
+  header: function header(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor);
   },
-  headerWithClose: function headerWithClose() {
-    return css(_templateObject13());
+  body: function body(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " ", " ", ";\n    "])), t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft);
   },
-  body: function body() {
-    return css(_templateObject14());
+  headerWithClose: function headerWithClose(t) {
+    var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
   },
-  footerWrapper: function footerWrapper() {
-    return css(_templateObject15());
+  footer: function footer(t) {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft);
   },
-  footer: function footer() {
-    return css(_templateObject16());
+  footerWrapper: function footerWrapper() {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   },
   panel: function panel(t) {
-    return css(_templateObject17(), cssName(styles.footer()), t.modalFooterBg);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
   },
   fixedHeader: function fixedHeader(t) {
-    return css(_templateObject18(), t.modalFixedHeaderBg, t.modalFixedHeaderShadow);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderShadow);
   },
   fixedFooter: function fixedFooter(t) {
-    return css(_templateObject19(), t.modalFixedHeaderBg, t.modalFixedFooterShadow);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedHeaderBg, t.modalFixedFooterShadow);
   },
   headerAddPadding: function headerAddPadding() {
-    return css(_templateObject20());
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "])));
   },
-  bodyWithoutHeader: function bodyWithoutHeader() {
-    return css(_templateObject21());
+  bodyWithoutHeader: function bodyWithoutHeader(t) {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject22());
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
   },
-  bodyAddPadding: function bodyAddPadding() {
-    return css(_templateObject23());
+  bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

package/components/Modal/Modal.styles/Modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["css","cssName","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","iconSize","margin","paddingTop","paddingBottom","blockSize","modalCloseButtonColor","modalCloseButtonHoverColor","closeWrapper","disabled","modalCloseButtonDisabledColor","closeOutline","borderColorFocus","headerWrapper","header","headerWithClose","body","footerWrapper","footer","panel","modalFooterBg","fixedHeader","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","bodyWithoutPadding","bodyAddPadding","jsStyles"],"mappings":"qqNAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;;AAEA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,WAAOL,GAAP;;;;;;;AAOD,GATY;;AAWbM,EAAAA,EAXa,cAWVC,CAXU,EAWA;AACX,WAAOP,GAAP;;;;;;AAMgBO,IAAAA,CAAC,CAACC,WANlB;AAOaD,IAAAA,CAAC,CAACE,gBAPf;;AASD,GArBY;;AAuBbC,EAAAA,SAvBa,uBAuBD;AACV,WAAOV,GAAP;;;;;;;;;;;;;;;AAeD,GAvCY;;AAyCbW,EAAAA,MAzCa,kBAyCNJ,CAzCM,EAyCI;AACf,WAAOP,GAAP;;;;;AAKgBO,IAAAA,CAAC,CAACK,SALlB;;AAOD,GAjDY;;AAmDbC,EAAAA,eAnDa,2BAmDGN,CAnDH,EAmDa;AACxB,WAAOP,GAAP;;;;;;;;;AASkCO,IAAAA,CAAC,CAACO,sBATpC;;;;;AAcD,GAlEY;;AAoEbC,EAAAA,QApEa,oBAoEJR,CApEI,EAoEM;AACjB,WAAOP,GAAP;AACIC,IAAAA,OAAO,CAACG,MAAM,CAACS,eAAP,CAAuBN,CAAvB,CAAD,CADX;;;;AAKD,GA1EY;;AA4EbS,EAAAA,KA5Ea,iBA4EPT,CA5EO,EA4EG;AACd,QAAMU,QAAQ,GAAG,EAAjB;AACA,QAAMC,MAAM,GAAG,CAAf;AACA,QAAMC,UAAU,GAAG,EAAnB;AACA,QAAMC,aAAa,GAAG,EAAtB;AACA,QAAMC,SAAS,GAAGJ,QAAQ,GAAGE,UAAX,GAAwBC,aAA1C;AACA,WAAOpB,GAAP;AACIG,IAAAA,WAAW,EADf;;AAGWe,IAAAA,MAHX;AAISA,IAAAA,MAJT;AAKWG,IAAAA,SALX;AAMYA,IAAAA,SANZ;;;;AAUWd,IAAAA,CAAC,CAACe,qBAVb;;;;;;AAgBaf,IAAAA,CAAC,CAACgB,0BAhBf;;;;AAoBaN,IAAAA,QApBb;AAqBcA,IAAAA,QArBd;AAsBeE,IAAAA,UAtBf,EAsB+BA,UAtB/B,EAsB+CC,aAtB/C,EAsBkEA,aAtBlE;;;;AA0BD,GA5GY;;AA8GbI,EAAAA,YA9Ga,0BA8GE;AACb,WAAOxB,GAAP;;;;;;AAMD,GArHY;;AAuHbyB,EAAAA,QAvHa,oBAuHJlB,CAvHI,EAuHM;AACjB,WAAOP,GAAP;AACIC,IAAAA,OAAO,CAACG,MAAM,CAACY,KAAP,CAAaT,CAAb,CAAD,CADX;;;AAIaA,IAAAA,CAAC,CAACmB,6BAJf;;;AAOD,GA/HY;;AAiIbC,EAAAA,YAjIa,wBAiIApB,CAjIA,EAiIU;AACrB,WAAOP,GAAP;AACIC,IAAAA,OAAO,CAACG,MAAM,CAACY,KAAP,CAAaT,CAAb,CAAD,CADX;;;;AAKIN,IAAAA,OAAO,CAACG,MAAM,CAACY,KAAP,CAAaT,CAAb,CAAD,CALX;AAMwBA,IAAAA,CAAC,CAACqB,gBAN1B;;;;;;;;;AAeD,GAjJY;;AAmJbC,EAAAA,aAnJa,2BAmJG;AACd,WAAO7B,GAAP;;;AAGD,GAvJY;;AAyJb8B,EAAAA,MAzJa,oBAyJJ;AACP,WAAO9B,GAAP;;;;;;;AAOD,GAjKY;;AAmKb+B,EAAAA,eAnKa,6BAmKK;AAChB,WAAO/B,GAAP;;;AAGD,GAvKY;;AAyKbgC,EAAAA,IAzKa,kBAyKN;AACL,WAAOhC,GAAP;;;AAGD,GA7KY;;AA+KbiC,EAAAA,aA/Ka,2BA+KG;AACd,WAAOjC,GAAP;;;AAGD,GAnLY;;AAqLbkC,EAAAA,MArLa,oBAqLJ;AACP,WAAOlC,GAAP;;;AAGD,GAzLY;;AA2LbmC,EAAAA,KA3La,iBA2LP5B,CA3LO,EA2LG;AACd,WAAOP,GAAP;AACIC,IAAAA,OAAO,CAACG,MAAM,CAAC8B,MAAP,EAAD,CADX;;;AAIkB3B,IAAAA,CAAC,CAAC6B,aAJpB;;;AAOD,GAnMY;;AAqMbC,EAAAA,WArMa,uBAqMD9B,CArMC,EAqMS;AACpB,WAAOP,GAAP;;AAEgBO,IAAAA,CAAC,CAAC+B,kBAFlB;;;;;;;;;;AAYkB/B,IAAAA,CAAC,CAACgC,sBAZpB;;;AAeD,GArNY;;AAuNbC,EAAAA,WAvNa,uBAuNDjC,CAvNC,EAuNS;AACpB,WAAOP,GAAP;;;AAGgBO,IAAAA,CAAC,CAAC+B,kBAHlB;;;;;;;;;;AAakB/B,IAAAA,CAAC,CAACkC,sBAbpB;;;AAgBD,GAxOY;;AA0ObC,EAAAA,gBA1Oa,8BA0OM;AACjB,WAAO1C,GAAP;;;AAGD,GA9OY;;AAgPb2C,EAAAA,iBAhPa,+BAgPO;AAClB,WAAO3C,GAAP;;;AAGD,GApPY;;AAsPb4C,EAAAA,kBAtPa,gCAsPQ;AACnB,WAAO5C,GAAP;;;AAGD,GA1PY;;AA4Pb6C,EAAAA,cA5Pa,4BA4PI;AACf,WAAO7C,GAAP;;;AAGD,GAhQY,EAAf;;;AAmQA,OAAO,IAAM8C,QAAQ,GAAG5C,YAAY,CAACE,MAAD,CAA7B","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      height: 100%;\r\n      left: 0;\r\n      position: fixed;\r\n      top: 0;\r\n      width: 100%;\r\n    `;\r\n  },\r\n\r\n  bg(t: Theme) {\r\n    return css`\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      background: ${t.modalBackBg};\r\n      opacity: ${t.modalBackOpacity};\r\n    `;\r\n  },\r\n\r\n  container() {\r\n    return css`\r\n      position: relative;\r\n      white-space: nowrap;\r\n      text-align: center;\r\n      height: 100%;\r\n      overflow-y: auto;\r\n      outline: none;\r\n\r\n      &::before {\r\n        content: '';\r\n        display: inline-block;\r\n        vertical-align: middle;\r\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\r\n      }\r\n    `;\r\n  },\r\n\r\n  window(t: Theme) {\r\n    return css`\r\n      position: relative;\r\n      white-space: normal;\r\n      margin: auto;\r\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\r\n      background: ${t.bgDefault};\r\n    `;\r\n  },\r\n\r\n  centerContainer(t: Theme) {\r\n    return css`\r\n      position: relative;\r\n      display: inline-block;\r\n      text-align: left;\r\n      vertical-align: middle;\r\n      box-sizing: border-box;\r\n      z-index: 10;\r\n      margin: 40px 20px;\r\n\r\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\r\n        margin: 0;\r\n        width: 100%;\r\n      }\r\n    `;\r\n  },\r\n\r\n  alignTop(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.centerContainer(t))}& {\r\n        vertical-align: top;\r\n      }\r\n    `;\r\n  },\r\n\r\n  close(t: Theme) {\r\n    const iconSize = 14;\r\n    const margin = 0;\r\n    const paddingTop = 35;\r\n    const paddingBottom = 20;\r\n    const blockSize = iconSize + paddingTop + paddingBottom;\r\n    return css`\r\n      ${resetButton()};\r\n      position: absolute;\r\n      right: ${margin}px;\r\n      top: ${margin}px;\r\n      width: ${blockSize}px;\r\n      height: ${blockSize}px;\r\n      background: none;\r\n      background: transparent;\r\n      cursor: pointer;\r\n      color: ${t.modalCloseButtonColor};\r\n      text-align: center;\r\n      vertical-align: middle;\r\n\r\n      &:focus,\r\n      &:hover {\r\n        color: ${t.modalCloseButtonHoverColor};\r\n      }\r\n\r\n      & > svg {\r\n        width: ${iconSize}px;\r\n        height: ${iconSize}px;\r\n        padding: ${paddingTop}px ${paddingTop}px ${paddingBottom}px ${paddingBottom}px;\r\n        box-sizing: content-box;\r\n      }\r\n    `;\r\n  },\r\n\r\n  closeWrapper() {\r\n    return css`\r\n      position: relative;\r\n      float: right;\r\n      width: 76px;\r\n      height: 76px;\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.close(t))}& {\r\n        pointer-events: none;\r\n        cursor: default;\r\n        color: ${t.modalCloseButtonDisabledColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  closeOutline(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.close(t))} & {\r\n        display: none;\r\n      }\r\n\r\n      ${cssName(styles.close(t))}:focus & {\r\n        border: 2px solid ${t.borderColorFocus};\r\n        position: absolute;\r\n        display: block;\r\n        top: 27px;\r\n        right: 27px;\r\n        width: 26px;\r\n        height: 26px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  headerWrapper() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  header() {\r\n    return css`\r\n      font-size: 22px;\r\n      line-height: 30px;\r\n      padding: 24px 35px 11px 30px;\r\n      overflow-wrap: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  headerWithClose() {\r\n    return css`\r\n      padding-right: 110px !important;\r\n    `;\r\n  },\r\n\r\n  body() {\r\n    return css`\r\n      padding: 0 35px 25px 30px;\r\n    `;\r\n  },\r\n\r\n  footerWrapper() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  footer() {\r\n    return css`\r\n      padding: 0 35px 30px 30px;\r\n    `;\r\n  },\r\n\r\n  panel(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.footer())}& {\r\n        padding-top: 20px;\r\n        padding-bottom: 20px;\r\n        background: ${t.modalFooterBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  fixedHeader(t: Theme) {\r\n    return css`\r\n      margin-bottom: 10px;\r\n      background: ${t.modalFixedHeaderBg};\r\n\r\n      &:after {\r\n        bottom: 11px;\r\n        content: '';\r\n        position: absolute;\r\n        height: 1px;\r\n        width: 100%;\r\n        left: 0;\r\n        z-index: -1;\r\n        box-shadow: ${t.modalFixedHeaderShadow};\r\n      }\r\n    `;\r\n  },\r\n\r\n  fixedFooter(t: Theme) {\r\n    return css`\r\n      padding-top: 20px;\r\n      margin-top: 10px;\r\n      background: ${t.modalFixedHeaderBg};\r\n\r\n      &:before {\r\n        top: 11px;\r\n        content: '';\r\n        position: absolute;\r\n        height: 1px;\r\n        width: 100%;\r\n        left: 0;\r\n        z-index: -1;\r\n        box-shadow: ${t.modalFixedFooterShadow};\r\n      }\r\n    `;\r\n  },\r\n\r\n  headerAddPadding() {\r\n    return css`\r\n      padding-bottom: 22px;\r\n    `;\r\n  },\r\n\r\n  bodyWithoutHeader() {\r\n    return css`\r\n      padding-top: 30px;\r\n    `;\r\n  },\r\n\r\n  bodyWithoutPadding() {\r\n    return css`\r\n      padding: 0 !important;\r\n    `;\r\n  },\r\n\r\n  bodyAddPadding() {\r\n    return css`\r\n      padding-bottom: 30px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","body","modalBodyPaddingBottom","headerWithClose","rightPadding","modalCloseLegacyGap","footer","modalFooterPaddingTop","modalFooterPaddingBottom","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom"],"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      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.bgDefault};\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n});\n"]}