@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/components/MiniModal/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/MiniModal/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/Modal/Modal/Modal.js

@@ -3,6 +3,7 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import FocusLock from 'react-focus-lock';
 import throttle from 'lodash.throttle';
+import { globalObject } from '@skbkontur/global-object';
 import { isNonNullable } from "../../../lib/utils";
 import { isKeyEscape } from "../../../lib/events/keyboard/identifiers";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
@@ -16,6 +17,7 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { ModalContext } from "../ModalContext";
 import { ModalFooter } from "../ModalFooter";
@@ -23,7 +25,13 @@ import { ModalHeader } from "../ModalHeader";
 import { ModalBody } from "../ModalBody";
 import { ModalClose } from "../ModalClose";
 import { styles } from "../Modal.styles";
+import { getModalTheme } from "../getModalTheme";
 var mountedModalsCount = 0;
+export var ModalDataTids = {
+  container: 'modal-container',
+  content: 'modal-content',
+  close: 'modal-close'
+};
 /**
  * Модальное окно
  *
@@ -50,6 +58,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Modal.defaultProps);
     _this.state = {
       stackPosition: 0,
       hasBackground: true,
@@ -137,7 +146,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
     _this.throttledCheckHorizontalScroll = throttle(_this.checkHorizontalScrollAppearance, 100);
 
-    _this.handleResize = function (event) {
+    _this.handleResize = function () {
       LayoutEvents.emit();
     };
 
@@ -180,11 +189,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
 
     if (mountedModalsCount === 0) {
-      window.addEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('resize', this.throttledCheckHorizontalScroll);
     }
 
     mountedModalsCount++;
-    window.addEventListener('keydown', this.handleKeyDown);
+    globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('keydown', this.handleKeyDown);
     this.checkHorizontalScrollAppearance();
 
     if (this.containerNode) {
@@ -194,11 +203,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (--mountedModalsCount === 0) {
-      window.removeEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('resize', this.throttledCheckHorizontalScroll);
       LayoutEvents.emit();
     }
 
-    window.removeEventListener('keydown', this.handleKeyDown);
+    globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('keydown', this.handleKeyDown);
 
     if (isNonNullable(this.stackSubscription)) {
       this.stackSubscription.remove();
@@ -215,18 +224,33 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+      _this2.theme = getModalTheme(theme, _this2.props.theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
     });
   };
 
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
+    var _this$props = this.props,
+        noClose = _this$props.noClose,
+        disableClose = _this$props.disableClose,
+        width = _this$props.width,
+        alignTop = _this$props.alignTop,
+        children = _this$props.children,
+        ariaLabel = _this$props['aria-label'],
+        ariaLabelledby = _this$props['aria-labelledby'];
     var _this$state = this.state,
         hasHeader = _this$state.hasHeader,
         hasFooter = _this$state.hasFooter,
         hasPanel = _this$state.hasPanel;
+
+    var _this$getProps = this.getProps(),
+        role = _this$getProps.role,
+        disableFocusLock = _this$getProps.disableFocusLock;
+
     var modalContextProps = {
       hasHeader: hasHeader,
       horizontalScroll: this.state.horizontalScroll,
@@ -235,9 +259,9 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       setHasPanel: this.setHasPanel
     };
 
-    if (!this.props.noClose) {
+    if (!noClose) {
       modalContextProps.close = {
-        disableClose: this.props.disableClose,
+        disableClose: disableClose,
         requestClose: this.requestClose
       };
     }
@@ -253,8 +277,8 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     var style = {};
     var containerStyle = {};
 
-    if (this.props.width) {
-      style.width = this.props.width;
+    if (width) {
+      style.width = width;
     } else {
       containerStyle.width = 'auto';
     }
@@ -263,22 +287,29 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       priority: 'Modal',
       className: styles.root()
     }, /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/React.createElement("div", {
-      className: styles.bg(this.theme)
-    }), /*#__PURE__*/React.createElement("div", {
-      ref: this.refContainer,
-      className: styles.container(),
       onMouseDown: this.handleContainerMouseDown,
       onMouseUp: this.handleContainerMouseUp,
       onClick: this.handleContainerClick,
-      "data-tid": "modal-container"
-    }, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+      className: styles.bg(this.theme)
+    }), /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
       var _cx, _cx2, _cx3, _cx4, _cx5;
 
       var isMobile = _ref.isMobile;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.centerContainer(_this3.theme)] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)),
+        "aria-labelledby": ariaLabelledby,
+        ref: _this3.refContainer,
+        className: cx(styles.container(), isMobile && styles.containerMobile(_this3.theme)),
+        onMouseDown: _this3.handleContainerMouseDown,
+        onMouseUp: _this3.handleContainerMouseUp,
+        onClick: _this3.handleContainerClick,
+        "data-tid": ModalDataTids.container
+      }, /*#__PURE__*/React.createElement("div", {
+        "aria-modal": true,
+        "aria-label": ariaLabel,
+        role: role,
+        className: cx((_cx = {}, _cx[styles.centerContainer()] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(alignTop), _cx)),
         style: isMobile ? undefined : containerStyle,
-        "data-tid": "modal-content"
+        "data-tid": ModalDataTids.content
       }, /*#__PURE__*/React.createElement("div", {
         className: cx((_cx2 = {}, _cx2[styles.window(_this3.theme)] = true, _cx2[styles.mobileWindow()] = isMobile, _cx2)),
         style: isMobile ? undefined : style
@@ -286,29 +317,30 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
         onResize: _this3.handleResize,
         fullHeight: isMobile
       }, /*#__PURE__*/React.createElement(FocusLock, {
-        disabled: _this3.props.disableFocusLock,
+        disabled: disableFocusLock,
         autoFocus: false,
         className: cx((_cx3 = {}, _cx3[styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container')
-      }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/React.createElement(ZIndex, {
-        priority: 'ModalCross',
+      }, !hasHeader && !noClose && /*#__PURE__*/React.createElement(ZIndex, {
         className: cx((_cx4 = {}, _cx4[styles.closeWrapper(_this3.theme)] = true, _cx4[styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4))
       }, /*#__PURE__*/React.createElement(ModalClose, {
         className: cx((_cx5 = {}, _cx5[styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)),
         requestClose: _this3.requestClose,
-        disableClose: _this3.props.disableClose
+        disableClose: disableClose
       })), /*#__PURE__*/React.createElement(ModalContext.Provider, {
         value: modalContextProps
-      }, _this3.props.children)))));
-    })))));
+      }, children))))));
+    }))));
   };
 
   return Modal;
 }(React.Component);
 Modal.__KONTUR_REACT_UI__ = 'Modal';
+Modal.displayName = 'Modal';
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.defaultProps = {
   // NOTE: в ie нормально не работает
-  disableFocusLock: isIE11
+  disableFocusLock: isIE11,
+  role: 'dialog'
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","ResponsiveLayout","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","styles","mountedModalsCount","Modal","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","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","throttledCheckHorizontalScroll","handleResize","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","window","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","modalContextProps","noClose","close","additionalPadding","style","containerStyle","width","root","bg","container","isMobile","centerContainer","mobileCenterContainer","alignTop","Boolean","undefined","mobileWindow","disableFocusLock","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","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';\nimport throttle from 'lodash.throttle';\n\nimport { isNonNullable } from '../../lib/utils';\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';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\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.throttledCheckHorizontalScroll);\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.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\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 (!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              <ResponsiveLayout>\n                {({ isMobile }) => {\n                  return (\n                    <div\n                      className={cx({\n                        [styles.centerContainer(this.theme)]: true,\n                        [styles.mobileCenterContainer()]: isMobile,\n                        [styles.alignTop()]: Boolean(this.props.alignTop),\n                      })}\n                      style={isMobile ? undefined : containerStyle}\n                      data-tid=\"modal-content\"\n                    >\n                      <div\n                        className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n                        style={isMobile ? undefined : style}\n                      >\n                        <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                          <FocusLock\n                            disabled={this.props.disableFocusLock}\n                            autoFocus={false}\n                            className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                          >\n                            {!hasHeader && !this.props.noClose && (\n                              <ZIndex\n                                priority={'ModalCross'}\n                                className={cx({\n                                  [styles.closeWrapper(this.theme)]: true,\n                                  [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                                })}\n                              >\n                                <ModalClose\n                                  className={cx({\n                                    [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n                                  })}\n                                  requestClose={this.requestClose}\n                                  disableClose={this.props.disableClose}\n                                />\n                              </ZIndex>\n                            )}\n                            <ModalContext.Provider value={modalContextProps}>\n                              {this.props.children}\n                            </ModalContext.Provider>\n                          </FocusLock>\n                        </ResizeDetector>\n                      </div>\n                    </div>\n                  );\n                }}\n              </ResponsiveLayout>\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: readonly 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 throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\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"]}
+{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","globalObject","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","createPropsGetter","ResponsiveLayout","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","styles","getModalTheme","mountedModalsCount","ModalDataTids","container","content","close","Modal","getProps","defaultProps","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","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","throttledCheckHorizontalScroll","handleResize","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","root","bg","isMobile","containerMobile","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","Component","__KONTUR_REACT_UI__","displayName","Header","Body","Footer"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\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 { 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, ThemeIn } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\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';\nimport { getModalTheme } from './getModalTheme';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps\n  extends CommonProps,\n    Pick<HTMLAttributes<unknown>, 'role'>,\n    Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\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  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\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\nexport const ModalDataTids = {\n  container: 'modal-container',\n  content: 'modal-content',\n  close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;\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  public static displayName = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps: DefaultProps = {\n    // NOTE: в ie нормально не работает\n    disableFocusLock: isIE11,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(Modal.defaultProps);\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      globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    globalObject.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      globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\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 = getModalTheme(theme, this.props.theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      alignTop,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n    } = this.props;\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n    const { role, disableFocusLock } = this.getProps();\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 (!noClose) {\n      modalContextProps.close = {\n        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 (width) {\n      style.width = 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 && (\n              <div\n                onMouseDown={this.handleContainerMouseDown}\n                onMouseUp={this.handleContainerMouseUp}\n                onClick={this.handleContainerClick}\n                className={styles.bg(this.theme)}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={cx(styles.container(), isMobile && styles.containerMobile(this.theme))}\n                  onMouseDown={this.handleContainerMouseDown}\n                  onMouseUp={this.handleContainerMouseUp}\n                  onClick={this.handleContainerClick}\n                  data-tid={ModalDataTids.container}\n                >\n                  <div\n                    aria-modal\n                    aria-label={ariaLabel}\n                    role={role}\n                    className={cx({\n                      [styles.centerContainer()]: true,\n                      [styles.mobileCenterContainer()]: isMobile,\n                      [styles.alignTop()]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n                      style={isMobile ? undefined : style}\n                    >\n                      <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                        <FocusLock\n                          disabled={disableFocusLock}\n                          autoFocus={false}\n                          className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                        >\n                          {!hasHeader && !noClose && (\n                            <ZIndex\n                              className={cx({\n                                [styles.closeWrapper(this.theme)]: true,\n                                [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                              })}\n                            >\n                              <ModalClose\n                                className={cx({\n                                  [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n                                })}\n                                requestClose={this.requestClose}\n                                disableClose={disableClose}\n                              />\n                            </ZIndex>\n                          )}\n                          <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n                        </FocusLock>\n                      </ResizeDetector>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </ResponsiveLayout>\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: readonly 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 throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
-export interface ModalProps extends CommonProps {
+export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
     /**
      * Отключает событие onClose, также дизейблит кнопку закрытия модалки
      */
@@ -31,6 +32,11 @@ export interface ModalProps extends CommonProps {
      * По умолчанию true для IE11.
      */
     disableFocusLock?: boolean;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ModalState {
     stackPosition: number;
@@ -40,6 +46,12 @@ export interface ModalState {
     hasFooter: boolean;
     hasPanel: boolean;
 }
+export declare const ModalDataTids: {
+    readonly container: "modal-container";
+    readonly content: "modal-content";
+    readonly close: "modal-close";
+};
+declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;
 /**
  * Модальное окно
  *
@@ -56,12 +68,12 @@ export interface ModalState {
  */
 export declare class Modal extends React.Component<ModalProps, ModalState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static Header: typeof ModalHeader;
     static Body: typeof ModalBody;
     static Footer: typeof ModalFooter;
-    static defaultProps: {
-        disableFocusLock: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: ModalState;
     private theme;
     private stackSubscription;
@@ -86,3 +98,4 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private setHasFooter;
     private setHasPanel;
 }
+export {};

package/components/Modal/Modal.md

@@ -36,3 +36,19 @@ function close() {
   <Button onClick={open}>Open</Button>
 </div>;
 ```
+
+#### Локали по умолчанию
+
+```typescript static
+interface ModalLocale {
+  closeButtonAriaLabel: string;
+}
+
+const ru_RU = {
+  closeButtonAriaLabel: 'Закрыть модальное окно'
+}
+
+const en_GB = {
+  closeButtonAriaLabel: 'Close modal window'
+}
+```

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

@@ -1,9 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
+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;
 
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
+export var modalGlobalClasses = prefix('modal')({
+  root: 'root',
+  container: 'container'
+});
 export var styles = memoizeStyle({
   root: function root() {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
@@ -14,30 +18,33 @@ export var styles = memoizeStyle({
   container: function container() {
     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    "])));
   },
+  containerMobile: function containerMobile(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n      margin-top: ", ";\n      margin-right: ", ";\n      margin-bottom: ", ";\n      margin-left: ", ";\n    "])), t.mobileModalContainerHeight, t.mobileModalContainerMarginTop, t.mobileModalContainerMarginRight, t.mobileModalContainerMarginBottom, t.mobileModalContainerMarginLeft);
+  },
   window: function window(t) {
-    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      border-radius: ", ";\n    "])), t.modalBg, t.modalBorderRadius);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "])), t.modalWindowShadow, t.modalBg, t.modalBorderRadius);
   },
   mobileWindow: function mobileWindow() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
   },
-  centerContainer: function centerContainer(t) {
-    return css(_templateObject6 || (_templateObject6 = _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    "])));
+  centerContainer: function centerContainer() {
+    return css(_templateObject7 || (_templateObject7 = _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    "])));
   },
   mobileCenterContainer: function mobileCenterContainer() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
   },
   alignTop: function alignTop() {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
   },
   close: function close(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
-    return css(_templateObject9 || (_templateObject9 = _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);
+    return css(_templateObject10 || (_templateObject10 = _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);
   },
   mobileClose: function mobileClose(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      right: ", ";\n      top: ", "px;\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])), t.mobileModalCloseButtonRightPadding, parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding), t.mobileModalCloseButtonClickArea, t.mobileModalCloseButtonClickArea, t.mobileModalCloseIconSize, t.mobileModalCloseIconSize);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      right: ", ";\n      top: ", "px;\n      padding: ", ";\n      margin: -", ";\n\n      & > svg {\n        width: ", ";\n        height: ", ";\n      }\n    "])), t.mobileModalCloseButtonRightPadding, parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding), t.mobileModalCloseButtonClickArea, t.mobileModalCloseButtonClickArea, t.mobileModalCloseIconSize, t.mobileModalCloseIconSize);
   },
   mobileCloseWithoutHeader: function mobileCloseWithoutHeader() {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
   },
   closeWrapper: function closeWrapper(t) {
     var padding = parseInt(t.modalCloseButtonPadding);
@@ -46,32 +53,29 @@ export var styles = memoizeStyle({
     var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
     var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
     var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX + legacyGap, blockSizeY);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      float: right;\n      width: ", "px;\n      height: ", "px;\n    "])), blockSizeX + legacyGap, blockSizeY);
   },
   mobileCloseWrapper: function mobileCloseWrapper(t) {
     var size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: ", ";\n      top: ", ";\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", "px;\n      height: ", "px;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "])), t.mobileModalCloseButtonRightPadding, t.mobileModalCloseButtonTopPadding, size, size, t.bgDefault, size);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: ", ";\n      top: ", ";\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ", "px;\n      height: ", "px;\n      background: radial-gradient(50% 50% at 50% 50%, ", " 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ", "px;\n    "])), t.mobileModalCloseButtonRightPadding, t.mobileModalCloseButtonTopPadding, size, size, t.bgDefault, size);
   },
   disabled: function disabled(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
   },
   focus: function focus(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
-  },
-  headerWrapper: function headerWrapper() {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
   },
   header: function header(t) {
-    return css(_templateObject17 || (_templateObject17 = _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);
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ", ";\n      font-weight: ", ";\n    "])), t.modalHeaderFontSize, t.modalHeaderLineHeight, t.modalHeaderPaddingTop, t.modalPaddingRight, t.modalHeaderPaddingBottom, t.modalPaddingLeft, t.modalHeaderTextColor, t.modalHeaderFontWeight);
   },
   mobileHeader: function mobileHeader(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.mobileModalHeaderFontSize, t.mobileModalHeaderLineHeight, t.mobileModalHeaderPadding);
   },
   body: function body(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      padding: 0 ", " ", " ", ";\n      color: ", ";\n    "])), t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft, t.modalBodyTextColor);
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      padding-top: ", ";\n      padding-right: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      color: ", ";\n    "])), t.modalBodyBorderRadius, t.modalBodyPaddingTop, t.modalPaddingRight, t.modalBodyPaddingBottom, t.modalPaddingLeft, t.modalBodyTextColor);
   },
   mobileBody: function mobileBody(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      padding-top: 0px;\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyFontSize);
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ", ";\n    "])), t.mobileModalBodyPadding, t.mobileModalBodyFontSize);
   },
   headerWithClose: function headerWithClose(t) {
     var rightPadding = 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);
@@ -86,43 +90,49 @@ export var styles = memoizeStyle({
   mobileFooter: function mobileFooter(t) {
     return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
   },
-  footerWrapper: function footerWrapper() {
-    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
-  },
   panel: function panel(t) {
-    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
   },
   fixedHeader: function fixedHeader(t) {
-    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      margin-bottom: 10px;\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\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.modalFixedHeaderBorder, t.modalFixedHeaderShadow);
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      margin-bottom: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n      border-bottom: ", ";\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.modalFixedHeaderMarginBottom, t.modalFixedHeaderPaddingBottom, t.modalFixedHeaderBg, t.modalFixedHeaderBorder, t.modalFixedHeaderShadow);
   },
   mobileFixedHeader: function mobileFixedHeader(t) {
-    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
   },
   fixedFooter: function fixedFooter(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n      border-top: ", ";\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.modalFixedFooterBorder, t.modalFixedFooterShadow);
+    return css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      margin-top: ", ";\n      background: ", ";\n      border-top: ", ";\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.modalFixedFooterPaddingTop, t.modalFixedFooterMarginTop, t.modalFixedHeaderBg, t.modalFixedFooterBorder, t.modalFixedFooterShadow);
   },
   fixedPanel: function fixedPanel(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
+    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
   },
-  headerAddPadding: function headerAddPadding() {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-bottom: 22px;\n    "])));
+  headerAddPadding: function headerAddPadding(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
   },
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
   },
-  mobileBodyWithoutHeader: function mobileBodyWithoutHeader(t) {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
+  mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
   },
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
   },
   mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalBodyPadding);
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
   },
   columnFlexContainer: function columnFlexContainer() {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: scroll;\n    "])));
+    return css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
+  },
+  modalSeparatorWrapper: function modalSeparatorWrapper() {
+    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
+  },
+  modalSeparator: function modalSeparator(t) {
+    return css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
+  },
+  modalSeparatorFixed: function modalSeparatorFixed() {
+    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
   }
 });