npm - @skbkontur/react-ui - Versions diffs - 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72 - Mend

@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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 (1181) hide show

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

@@ -13,18 +13,18 @@ import { stopPropagation } from "../../../lib/events/stopPropagation";
 import { HideBodyVerticalScroll } from "../../../internal/HideBodyVerticalScroll";
 import { ModalStack } from "../../../lib/ModalStack";
 import { ResizeDetector } from "../../../internal/ResizeDetector";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
-import { ThemeConsumer, ThemeProvider } from "../../../lib/theming/ThemeContext";
 import { ModalContext } from "../ModalContext";
 import { ModalFooter } from "../ModalFooter";
 import { ModalHeader } from "../ModalHeader";
 import { ModalBody } from "../ModalBody";
 import { ModalClose } from "../ModalClose";
-import { getStyles } from "../Modal.styles";
+import { styles } from "../Modal.styles";
 import { getModalTheme } from "../getModalTheme";
 var mountedModalsCount = 0;
 export var ModalDataTids = {
@@ -223,14 +223,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
-        _this2.theme = getModalTheme(theme, _this2.props.theme);
-        return /*#__PURE__*/React.createElement(ThemeProvider, {
-          value: _this2.theme
-        }, _this2.renderMain());
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = getModalTheme(theme, _this2.props.theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
     });
   };
@@ -286,7 +283,6 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       containerStyle.width = 'auto';
     }
-    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(ZIndex, {
       priority: 'Modal',
       className: styles.root()
@@ -296,13 +292,13 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       onClick: this.handleContainerClick,
       className: styles.bg(this.theme)
     }), /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
-      var _this3$emotion$cx, _this3$emotion$cx2, _this3$emotion$cx3, _this3$emotion$cx4, _this3$emotion$cx5;
+      var _cx, _cx2, _cx3, _cx4, _cx5;
       var isMobile = _ref.isMobile;
       return /*#__PURE__*/React.createElement("div", {
         "aria-labelledby": ariaLabelledby,
         ref: _this3.refContainer,
-        className: _this3.emotion.cx(styles.container(), isMobile && styles.containerMobile(_this3.theme)),
+        className: cx(styles.container(), isMobile && styles.containerMobile(_this3.theme)),
         onMouseDown: _this3.handleContainerMouseDown,
         onMouseUp: _this3.handleContainerMouseUp,
         onClick: _this3.handleContainerClick,
@@ -311,11 +307,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
         "aria-modal": true,
         "aria-label": ariaLabel,
         role: role,
-        className: _this3.emotion.cx((_this3$emotion$cx = {}, _this3$emotion$cx[styles.centerContainer()] = true, _this3$emotion$cx[styles.mobileCenterContainer()] = isMobile, _this3$emotion$cx[styles.alignTop()] = Boolean(alignTop), _this3$emotion$cx)),
+        className: cx((_cx = {}, _cx[styles.centerContainer()] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(alignTop), _cx)),
         style: isMobile ? undefined : containerStyle,
         "data-tid": ModalDataTids.content
       }, /*#__PURE__*/React.createElement("div", {
-        className: _this3.emotion.cx((_this3$emotion$cx2 = {}, _this3$emotion$cx2[styles.window(_this3.theme)] = true, _this3$emotion$cx2[styles.mobileWindow()] = isMobile, _this3$emotion$cx2)),
+        className: cx((_cx2 = {}, _cx2[styles.window(_this3.theme)] = true, _cx2[styles.mobileWindow()] = isMobile, _cx2)),
         style: isMobile ? undefined : style
       }, /*#__PURE__*/React.createElement(ResizeDetector, {
         onResize: _this3.handleResize,
@@ -323,11 +319,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(FocusLock, {
         disabled: disableFocusLock,
         autoFocus: false,
-        className: _this3.emotion.cx((_this3$emotion$cx3 = {}, _this3$emotion$cx3[styles.columnFlexContainer()] = isMobile, _this3$emotion$cx3), 'focus-lock-container')
+        className: cx((_cx3 = {}, _cx3[styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container')
       }, !hasHeader && !noClose && /*#__PURE__*/React.createElement(ZIndex, {
-        className: _this3.emotion.cx((_this3$emotion$cx4 = {}, _this3$emotion$cx4[styles.closeWrapper(_this3.theme)] = true, _this3$emotion$cx4[styles.mobileCloseWrapper(_this3.theme)] = isMobile, _this3$emotion$cx4))
+        className: cx((_cx4 = {}, _cx4[styles.closeWrapper(_this3.theme)] = true, _cx4[styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4))
       }, /*#__PURE__*/React.createElement(ModalClose, {
-        className: _this3.emotion.cx((_this3$emotion$cx5 = {}, _this3$emotion$cx5[styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _this3$emotion$cx5)),
+        className: cx((_cx5 = {}, _cx5[styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)),
         requestClose: _this3.requestClose,
         disableClose: disableClose
       })), /*#__PURE__*/React.createElement(ModalContext.Provider, {

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","globalObject","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","isIE11","CommonWrapper","EmotionConsumer","createPropsGetter","ResponsiveLayout","ThemeConsumer","ThemeProvider","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","getStyles","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","emotion","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","styles","root","bg","isMobile","cx","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';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { 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 { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { ThemeConsumer, ThemeProvider } from '../../lib/theming/ThemeContext';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { getStyles } 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 emotion!: Emotion;\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 <EmotionConsumer>\n {(emotion) => {\n this.emotion = emotion;\n return (\n <ThemeConsumer>\n {(theme) => {\n this.theme = getModalTheme(theme, this.props.theme);\n return <ThemeProvider value={this.theme}>{this.renderMain()}</ThemeProvider>;\n }}\n </ThemeConsumer>\n );\n }}\n </EmotionConsumer>\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 const styles = getStyles(this.emotion);\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={this.emotion.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={this.emotion.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={this.emotion.cx({\n [styles.window(this.theme)]: true,\n [styles.mobileWindow()]: isMobile,\n })}\n style={isMobile ? undefined : style}\n >\n <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n <FocusLock\n disabled={disableFocusLock}\n autoFocus={false}\n className={this.emotion.cx(\n { [styles.columnFlexContainer()]: isMobile },\n 'focus-lock-container',\n )}\n >\n {!hasHeader && !noClose && (\n <ZIndex\n className={this.emotion.cx({\n [styles.closeWrapper(this.theme)]: true,\n [styles.mobileCloseWrapper(this.theme)]: isMobile,\n })}\n >\n <ModalClose\n className={this.emotion.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"]}
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

@@ -76,7 +76,6 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private getProps;
     state: ModalState;
     private theme;
-    private emotion;
     private stackSubscription;
     private containerNode;
     private mouseDownTarget;

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

@@ -2,139 +2,137 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39;
-import { memoizeStyle, prefix } 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 getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "])));
-    },
-    bg: function bg(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "])), t.modalBackBg, t.modalBackOpacity);
-    },
-    container: function container() {
-      return emotion.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 emotion.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 emotion.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 emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    "])));
-    },
-    centerContainer: function centerContainer() {
-      return emotion.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 emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
-    },
-    alignTop: function alignTop() {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
-    },
-    close: function close(t) {
-      var padding = parseInt(t.modalCloseButtonPadding);
-      return emotion.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(emotion), padding, padding, t.modalCloseButtonColor, t.modalCloseButtonClickArea, t.modalCloseButtonClickArea, t.modalCloseButtonHoverColor, t.modalCloseIconSize, t.modalCloseIconSize);
-    },
-    mobileClose: function mobileClose(t) {
-      return emotion.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 emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
-    },
-    closeWrapper: function closeWrapper(t) {
-      var padding = parseInt(t.modalCloseButtonPadding);
-      var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
-      var legacyGap = parseInt(t.modalCloseWrapperLegacyGap);
-      var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
-      var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
-      var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
-      return emotion.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 emotion.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 emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
-    },
-    focus: function focus(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      outline: 2px solid ", ";\n    "])), t.modalCloseButtonHoverColor, t.borderColorFocus);
-    },
-    header: function header(t) {
-      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
-    },
-    mobileHeaderWithClose: function mobileHeaderWithClose(t) {
-      return emotion.css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
-    },
-    footer: function footer(t) {
-      return emotion.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 emotion.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
-    },
-    panel: function panel(t) {
-      return emotion.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.modalFooterPanelPaddingTop, t.modalFooterPanelPaddingBottom, t.modalFooterBg);
-    },
-    fixedHeader: function fixedHeader(t) {
-      return emotion.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 emotion.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
-    },
-    fixedFooter: function fixedFooter(t) {
-      return emotion.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 emotion.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
-    },
-    headerAddPadding: function headerAddPadding(t) {
-      return emotion.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
-    },
-    bodyWithoutHeader: function bodyWithoutHeader(t) {
-      return emotion.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
-    },
-    mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
-      return emotion.css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
-    },
-    bodyWithoutPadding: function bodyWithoutPadding() {
-      return emotion.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
-    },
-    bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
-      return emotion.css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
-    },
-    mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
-      return emotion.css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
-    },
-    columnFlexContainer: function columnFlexContainer() {
-      return emotion.css(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));
-    },
-    modalSeparatorWrapper: function modalSeparatorWrapper() {
-      return emotion.css(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      width: 100%;\n    "])));
-    },
-    modalSeparator: function modalSeparator(t) {
-      return emotion.css(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      margin: 0 32px;\n      transition: margin 0.3s;\n    "])), t.modalSeparatorBorderBottom);
-    },
-    modalSeparatorFixed: function modalSeparatorFixed() {
-      return emotion.css(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n      margin: 0 16px;\n    "])));
-    }
-  });
-};
+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    "])));
+  },
+  bg: function bg(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "])), t.modalBackBg, t.modalBackOpacity);
+  },
+  container: function container() {
+    return css(_templateObject3 || (_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(_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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      overflow: auto;\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(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    "])));
+  },
+  alignTop: function alignTop() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      vertical-align: top;\n    "])));
+  },
+  close: function close(t) {
+    var padding = parseInt(t.modalCloseButtonPadding);
+    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(_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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      position: static;\n    "])));
+  },
+  closeWrapper: function closeWrapper(t) {
+    var padding = parseInt(t.modalCloseButtonPadding);
+    var paddingBottom = parseInt(t.modalCloseButtonBottomPadding);
+    var legacyGap = parseInt(t.modalCloseWrapperLegacyGap);
+    var legacyShift = parseInt(t.modalCloseButtonLegacyShift);
+    var blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;
+    var blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;
+    return css(_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(_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(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n      cursor: default;\n      color: ", ";\n    "])), t.modalCloseButtonDisabledColor);
+  },
+  focus: function focus(t) {
+    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      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      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      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      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(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), rightPadding);
+  },
+  mobileHeaderWithClose: function mobileHeaderWithClose(t) {
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      padding-right: ", "px;\n    "])), 2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize));
+  },
+  footer: function footer(t) {
+    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(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalFooterPadding);
+  },
+  panel: function panel(t) {
+    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(_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(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.mobileModalHeaderPadding);
+  },
+  fixedFooter: function fixedFooter(t) {
+    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(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n      &:before {\n        box-shadow: ", ";\n      }\n    "])), t.modalFixedPanelShadow);
+  },
+  headerAddPadding: function headerAddPadding(t) {
+    return css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalHeaderAdditionalPaddingBottom);
+  },
+  bodyWithoutHeader: function bodyWithoutHeader(t) {
+    return css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n    "])), t.modalPaddingTop);
+  },
+  mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
+    return css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      padding-top: 0px;\n    "])));
+  },
+  bodyWithoutPadding: function bodyWithoutPadding() {
+    return css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      padding: 0;\n    "])));
+  },
+  bodyAddPaddingForPanel: function bodyAddPaddingForPanel(t) {
+    return css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      padding-bottom: ", ";\n    "])), t.modalPaddingBottom);
+  },
+  mobileBodyAddPaddingForPanel: function mobileBodyAddPaddingForPanel(t) {
+    return css(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n      padding: ", ";\n    "])), t.mobileModalBodyPadding);
+  },
+  columnFlexContainer: function columnFlexContainer() {
+    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    "])));
+  }
+});