npm - @skbkontur/react-ui - Versions diffs - 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2 - Mend

@skbkontur/react-ui 0.0.0-1ee663e1d9 → 0.0.0-1fb0cccdc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2369) hide show

package/{internal/MaskedInput → components/MiniModal}/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "main": "../../cjs/internal/MaskedInput/index.js",
+  "main": "../../cjs/components/MiniModal/index.js",
   "module": "index",
   "types": "index.d.ts",
   "sideEffects": false

package/components/Modal/Modal/Modal.js CHANGED Viewed

@@ -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";
@@ -18,7 +19,6 @@ import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
-import { globalThat } from "../../../lib/SSRSafe";
 import { ModalContext } from "../ModalContext";
 import { ModalFooter } from "../ModalFooter";
 import { ModalHeader } from "../ModalHeader";
@@ -189,11 +189,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
     if (mountedModalsCount === 0) {
-      globalThat.addEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('resize', this.throttledCheckHorizontalScroll);
     }
     mountedModalsCount++;
-    globalThat.addEventListener('keydown', this.handleKeyDown);
+    globalObject.addEventListener == null ? void 0 : globalObject.addEventListener('keydown', this.handleKeyDown);
     this.checkHorizontalScrollAppearance();
     if (this.containerNode) {
@@ -203,11 +203,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (--mountedModalsCount === 0) {
-      globalThat.removeEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('resize', this.throttledCheckHorizontalScroll);
       LayoutEvents.emit();
     }
-    globalThat.removeEventListener('keydown', this.handleKeyDown);
+    globalObject.removeEventListener == null ? void 0 : globalObject.removeEventListener('keydown', this.handleKeyDown);
     if (isNonNullable(this.stackSubscription)) {
       this.stackSubscription.remove();
@@ -224,7 +224,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = getModalTheme(theme);
+      _this2.theme = getModalTheme(theme, _this2.props.theme);
       return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
         value: _this2.theme
       }, _this2.renderMain());
@@ -287,20 +287,23 @@ 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", {
-      "aria-labelledby": ariaLabelledby,
-      ref: this.refContainer,
-      className: styles.container(),
       onMouseDown: this.handleContainerMouseDown,
       onMouseUp: this.handleContainerMouseUp,
       onClick: this.handleContainerClick,
-      "data-tid": ModalDataTids.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", {
+        "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,
@@ -325,13 +328,14 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
         disableClose: disableClose
       })), /*#__PURE__*/React.createElement(ModalContext.Provider, {
         value: modalContextProps
-      }, children)))));
-    })))));
+      }, children))))));
+    }))));
   };
   return Modal;
 }(React.Component);
 Modal.__KONTUR_REACT_UI__ = 'Modal';
+Modal.displayName = 'Modal';
 Modal.Header = ModalHeader;
 Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;

package/components/Modal/Modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","createPropsGetter","ResponsiveLayout","globalThat","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","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","Component","__KONTUR_REACT_UI__","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';\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 { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { globalThat } from '../../lib/SSRSafe';\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\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\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 globalThat.addEventListener('resize', this.throttledCheckHorizontalScroll);\n }\n\n mountedModalsCount++;\n globalThat.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 globalThat.removeEventListener('resize', this.throttledCheckHorizontalScroll);\n LayoutEvents.emit();\n }\n\n globalThat.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);\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 && <div className={styles.bg(this.theme)} />}\n <div\n aria-labelledby={ariaLabelledby}\n ref={this.refContainer}\n className={styles.container()}\n onMouseDown={this.handleContainerMouseDown}\n onMouseUp={this.handleContainerMouseUp}\n onClick={this.handleContainerClick}\n data-tid={ModalDataTids.container}\n >\n <ResponsiveLayout>\n {({ isMobile }) => (\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 )}\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 = () => {\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"]}
1	+ {"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 CHANGED Viewed

@@ -1,4 +1,5 @@
 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';
@@ -31,6 +32,11 @@ export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, '
      * По умолчанию true для IE11.
      */
     disableFocusLock?: boolean;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export interface ModalState {
     stackPosition: number;
@@ -62,6 +68,7 @@ declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role
  */
 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;

package/components/Modal/Modal.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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, _templateObject38;
+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: ", ";\n      background: ", ";\n      border-radius: ", ";\n    "])), t.modalWindowShadow, 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() {
-    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    "])));
+    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,86 +53,86 @@ 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);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
   },
   header: function header(t) {
-    return css(_templateObject16 || (_templateObject16 = _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);
+    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(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      position: relative;\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(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      padding: 0 ", " ", " ", ";\n      color: ", ";\n    "])), t.modalBodyBorderRadius, 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(_templateObject19 || (_templateObject19 = _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);
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
   },
   mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
   },
   footer: function footer(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft, t.modalFooterTextColor, t.modalBorderRadius, t.modalBorderRadius);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      border-radius: 0 0 ", " ", ";\n    "])), t.modalFooterPaddingTop, t.modalPaddingRight, t.modalFooterPaddingBottom, t.modalPaddingLeft, t.modalFooterTextColor, t.modalBorderRadius, t.modalBorderRadius);
   },
   mobileFooter: function mobileFooter(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
   },
   panel: function panel(t) {
-    return css(_templateObject24 || (_templateObject24 = _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(_templateObject25 || (_templateObject25 = _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);
+    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(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
   },
   fixedFooter: function fixedFooter(t) {
-    return css(_templateObject27 || (_templateObject27 = _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);
+    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(_templateObject28 || (_templateObject28 = _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(t) {
-    return css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
   },
   bodyWithoutHeader: function bodyWithoutHeader(t) {
-    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
   },
   mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
   },
   bodyWithoutPadding: function bodyWithoutPadding() {
-    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
   },
   bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
   },
   mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalBodyPadding);
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
   },
   columnFlexContainer: function columnFlexContainer() {
-    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\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(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
+    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
   },
   modalSeparator: function modalSeparator(t) {
-    return css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
+    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(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
+    return css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
   }
 });

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","modalWindowShadow","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","modalHeaderFontWeight","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyBorderRadius","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderMarginBottom","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterPaddingTop","modalFixedFooterMarginTop","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","modalHeaderAdditionalPaddingBottom","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer","modalSeparatorWrapper","modalSeparator","modalSeparatorBorderBottom","modalSeparatorFixed"],"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: ${t.modalWindowShadow};\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer() {\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 },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\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 mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\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 mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}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 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 font-weight: ${t.modalHeaderFontWeight};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n position: relative;\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n border-radius: ${t.modalBodyBorderRadius};\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n padding-top: 0px;\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\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 mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\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: ${t.modalFixedHeaderMarginBottom};\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\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 mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: ${t.modalFixedFooterPaddingTop};\n margin-top: ${t.modalFixedFooterMarginTop};\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\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 fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding(t: Theme) {\n return css`\n padding-bottom: ${t.modalHeaderAdditionalPaddingBottom};\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader() {\n return css`\n padding-top: 0px;\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 mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: auto;\n `;\n },\n\n modalSeparatorWrapper() {\n return css`\n position: absolute;\n width: 100%;\n `;\n },\n\n modalSeparator(t: Theme) {\n return css`\n border-bottom: ${t.modalSeparatorBorderBottom};\n margin: 0 32px;\n transition: margin 0.3s;\n `;\n },\n\n modalSeparatorFixed() {\n return css`\n margin: 0 16px;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","prefix","resetButton","modalGlobalClasses","root","container","styles","bg","t","modalBackBg","modalBackOpacity","containerMobile","mobileModalContainerHeight","mobileModalContainerMarginTop","mobileModalContainerMarginRight","mobileModalContainerMarginBottom","mobileModalContainerMarginLeft","window","modalWindowShadow","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","modalHeaderFontWeight","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyBorderRadius","modalBodyPaddingTop","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderMarginBottom","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterPaddingTop","modalFixedFooterMarginTop","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","modalHeaderAdditionalPaddingBottom","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer","modalSeparatorWrapper","modalSeparator","modalSeparatorBorderBottom","modalSeparatorFixed"],"mappings":"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","sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const modalGlobalClasses = prefix('modal')({\n root: 'root',\n container: 'container',\n});\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 containerMobile(t: Theme) {\n return css`\n height: ${t.mobileModalContainerHeight};\n margin-top: ${t.mobileModalContainerMarginTop};\n margin-right: ${t.mobileModalContainerMarginRight};\n margin-bottom: ${t.mobileModalContainerMarginBottom};\n margin-left: ${t.mobileModalContainerMarginLeft};\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: ${t.modalWindowShadow};\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer() {\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 },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\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 mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\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 mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}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 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 font-weight: ${t.modalHeaderFontWeight};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n position: relative;\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n border-radius: ${t.modalBodyBorderRadius};\n padding-top: ${t.modalBodyPaddingTop};\n padding-right: ${t.modalPaddingRight};\n padding-bottom: ${t.modalBodyPaddingBottom};\n padding-left: ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\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 mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\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: ${t.modalFixedHeaderMarginBottom};\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\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 mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: ${t.modalFixedFooterPaddingTop};\n margin-top: ${t.modalFixedFooterMarginTop};\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\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 fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding(t: Theme) {\n return css`\n padding-bottom: ${t.modalHeaderAdditionalPaddingBottom};\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader() {\n return css`\n padding-top: 0px;\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 mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: auto;\n `;\n },\n\n modalSeparatorWrapper() {\n return css`\n position: absolute;\n width: 100%;\n `;\n },\n\n modalSeparator(t: Theme) {\n return css`\n border-bottom: ${t.modalSeparatorBorderBottom};\n margin: 0 32px;\n transition: margin 0.3s;\n `;\n },\n\n modalSeparatorFixed() {\n return css`\n margin: 0 16px;\n `;\n },\n});\n"]}

package/components/Modal/Modal.styles.d.ts CHANGED Viewed

@@ -1,8 +1,13 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const modalGlobalClasses: {
+    root: string;
+    container: string;
+};
 export declare const styles: {
     root(): string;
     bg(t: Theme): string;
     container(): string;
+    containerMobile(t: Theme): string;
     window(t: Theme): string;
     mobileWindow(): string;
     centerContainer(): string;

package/components/Modal/ModalBody/ModalBody.js CHANGED Viewed

@@ -73,4 +73,4 @@ var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /
   };
   return ModalBody;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.displayName = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;