npm - @skbkontur/react-ui - Versions diffs - 0.0.0-375e096002 → 0.0.0-388db940ca - Mend

@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-388db940ca

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

package/cjs/components/Modal/Modal.js DELETED Viewed

@@ -1,307 +0,0 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Modal = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _identifiers = require("../../lib/events/keyboard/identifiers");
-var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
-var _RenderContainer = require("../../internal/RenderContainer");
-var _ZIndex = require("../../internal/ZIndex");
-var _stopPropagation = require("../../lib/events/stopPropagation");
-var _HideBodyVerticalScroll = require("../../internal/HideBodyVerticalScroll");
-var _ModalStack = require("../../lib/ModalStack");
-var _ResizeDetector = require("../../internal/ResizeDetector");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _client = require("../../lib/client");
-var _ModalContext = require("./ModalContext");
-var _ModalFooter = require("./ModalFooter");
-var _ModalHeader = require("./ModalHeader");
-var _helpers = require("./helpers");
-var _ModalBody = require("./ModalBody");
-var _ModalClose = require("./ModalClose");
-var _Modal = require("./Modal.styles");
-var mountedModalsCount = 0;
-/**
- * Модальное окно
- *
- * Содержит в себе три компоненты: **Modal.Header**,
- * **Modal.Body** и **Modal.Footer**
- *
- * Для отображения серой плашки в футере в компонент
- * **Footer** необходимо передать пропс **panel**
- *
- * Для отключения прилипания шапки и футера
- * в соответствующий компонет нужно передать
- * проп **sticky** со значением **false**
- * (по-умолчанию прилипание включено)
- */var
-Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Modal, _React$Component);function Modal() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
-    state = {
-      stackPosition: 0,
-      hasBackground: true,
-      horizontalScroll: false };_this.
-    theme = void 0;_this.
-    stackSubscription = null;_this.
-    containerNode = null;_this.
-    mouseDownTarget = null;_this.
-    mouseUpTarget = null;_this.
-    requestClose = function () {
-      if (_this.props.disableClose) {
-        return;
-      }
-      if (_this.props.onClose) {
-        _this.props.onClose();
-      }
-    };_this.
-    refContainer = function (center) {
-      _this.containerNode = center;
-    };_this.
-    handleStackChange = function (stack) {
-      _this.setState({ stackPosition: stack.indexOf((0, _assertThisInitialized2.default)(_this)), hasBackground: _ModalStack.ModalStack.isBlocking((0, _assertThisInitialized2.default)(_this)) });
-    };_this.
-    handleContainerMouseDown = function (event) {
-      _this.mouseDownTarget = event.target;
-    };_this.
-    handleContainerMouseUp = function (event) {
-      _this.mouseUpTarget = event.target;
-    };_this.
-    handleContainerClick = function (event) {
-      if (!_this.props.ignoreBackgroundClick) {var
-        target = event.target,currentTarget = event.currentTarget;
-        if (target === currentTarget && _this.mouseDownTarget === currentTarget && _this.mouseUpTarget === currentTarget) {
-          _this.requestClose();
-        }
-      }
-    };_this.
-    handleKeyDown = function (e) {
-      if (_this.state.stackPosition !== 0) {
-        return;
-      }
-      if ((0, _identifiers.isKeyEscape)(e)) {
-        (0, _stopPropagation.stopPropagation)(e);
-        _this.requestClose();
-      }
-    };_this.
-    checkHorizontalScrollAppearance = function () {
-      var hasScroll = false;
-      if (_this.containerNode) {
-        var containerClientWidth = _this.containerNode.clientWidth;
-        var containerScrollWidth = _this.containerNode.scrollWidth;
-        hasScroll = containerClientWidth < containerScrollWidth;
-      }
-      if (hasScroll && !_this.state.horizontalScroll) {
-        _this.setState({ horizontalScroll: true });
-      } else if (_this.state.horizontalScroll) {
-        _this.setState({ horizontalScroll: false });
-      }
-    };_this.
-    handleResize = function (event) {
-      LayoutEvents.emit();
-    };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {window.addEventListener('resize', this.checkHorizontalScrollAppearance);}mountedModalsCount++;window.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {window.removeEventListener('resize', this.checkHorizontalScrollAppearance);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn;var hasHeader = false;var hasFooter = false;var hasPanel = false;_react.default.Children.toArray(this.props.children).forEach(function (child) {if ((0, _helpers.isHeader)(child)) {hasHeader = true;}if ((0, _helpers.isFooter)(child)) {hasFooter = true;if (child.props.panel) {hasPanel = true;}}});var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll };if (hasHeader && !this.props.noClose) {modalContextProps.close = { disableClose: this.props.disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (this.props.width) {style.width = this.props.width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.jsStyles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.jsStyles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.jsStyles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": "modal-container" }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)((_cn = {}, _cn[_Modal.jsStyles.centerContainer(this.theme)] = true, _cn[_Modal.jsStyles.alignTop(this.theme)] = Boolean(this.props.alignTop), _cn)), style: containerStyle, "data-tid": "modal-content" }, /*#__PURE__*/_react.default.createElement("div", { className: _Modal.jsStyles.window(this.theme), style: style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.handleResize }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: this.props.disableFocusLock, autoFocus: false }, !hasHeader && !this.props.noClose ? /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalCross', className: _Modal.jsStyles.closeWrapper() }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { requestClose: this.requestClose, disableClose: this.props.disableClose })) : null, /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, this.props.children))))))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.propTypes = { children: function children(props, propName, componentName) {if (_react.default.Children.toArray(props[propName]).some(function (child) {return !(0, _helpers.isHeader)(child) && !(0, _helpers.isBody)(child) && !(0, _helpers.isFooter)(child);})) {return new Error("Only 'Header/Body/Footer' components are allowed for '" + propName + "' prop of '" + componentName + "' component");}} };Modal.defaultProps = { // NOTE: в ie нормально не работает
-  disableFocusLock: _client.isIE11 };

package/cjs/components/Modal/Modal.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/cjs/components/Modal/Modal.md DELETED Viewed

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

package/cjs/components/Modal/Modal.styles.d.ts DELETED Viewed

@@ -1,23 +0,0 @@
-export declare const jsStyles: {
-    root(): string;
-    bg(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    container(): string;
-    window(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    centerContainer(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    alignTop(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    closeWrapper(): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    closeOutline(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    header(): string;
-    headerWithClose(): string;
-    body(): string;
-    footer(): string;
-    panel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    fixedHeader(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    fixedFooter(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    headerAddPadding(): string;
-    bodyWithoutHeader(): string;
-    bodyWithoutPadding(): string;
-    bodyAddPadding(): string;
-};

package/cjs/components/Modal/Modal.styles.js DELETED Viewed

@@ -1,252 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
-var _Mixins = require("../../lib/styles/Mixins");function _templateObject21() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: 30px;\n    "]);_templateObject21 = function _templateObject21() {return data;};return data;}function _templateObject20() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 !important;\n    "]);_templateObject20 = function _templateObject20() {return data;};return data;}function _templateObject19() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 30px;\n    "]);_templateObject19 = function _templateObject19() {return data;};return data;}function _templateObject18() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-bottom: 22px;\n    "]);_templateObject18 = function _templateObject18() {return data;};return data;}function _templateObject17() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ", ";\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "]);_templateObject17 = function _templateObject17() {return data;};return data;}function _templateObject16() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-bottom: 10px;\n      background: ", ";\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ", ";\n      }\n    "]);_templateObject16 = function _templateObject16() {return data;};return data;}function _templateObject15() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        padding-top: 20px;\n        padding-bottom: 20px;\n        background: ", ";\n      }\n    "]);_templateObject15 = function _templateObject15() {return data;};return data;}function _templateObject14() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 35px 30px 30px;\n    "]);_templateObject14 = function _templateObject14() {return data;};return data;}function _templateObject13() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 35px 25px 30px;\n    "]);_templateObject13 = function _templateObject13() {return data;};return data;}function _templateObject12() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-right: 110px !important;\n    "]);_templateObject12 = function _templateObject12() {return data;};return data;}function _templateObject11() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: 22px;\n      line-height: 30px;\n      padding: 24px 35px 11px 30px;\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n    "]);_templateObject11 = function _templateObject11() {return data;};return data;}function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", " & {\n        display: none;\n      }\n\n      ", ":focus & {\n        border: 2px solid ", ";\n        position: absolute;\n        display: block;\n        top: 27px;\n        right: 27px;\n        width: 26px;\n        height: 26px;\n      }\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        pointer-events: none;\n        cursor: default;\n        color: ", ";\n      }\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      float: right;\n      width: 76px;\n      height: 76px;\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n      position: absolute;\n      right: ", "px;\n      top: ", "px;\n      width: ", "px;\n      height: ", "px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ", ";\n      text-align: center;\n      vertical-align: middle;\n\n      &:focus,\n      &:hover {\n        color: ", ";\n      }\n\n      & > svg {\n        width: ", "px;\n        height: ", "px;\n        padding: ", "px ", "px ", "px ", "px;\n        box-sizing: content-box;\n      }\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        vertical-align: top;\n      }\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n\n      @media screen and (max-width: ", ") {\n        margin: 0;\n        width: 100%;\n      }\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ", ";\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ", ";\n      opacity: ", ";\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
-var styles = {
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject());
-  },
-  bg: function bg(t) {
-    return (0, _Emotion.css)(_templateObject2(),
-    t.modalBackBg,
-    t.modalBackOpacity);
-  },
-  container: function container() {
-    return (0, _Emotion.css)(_templateObject3());
-  },
-  window: function window(t) {
-    return (0, _Emotion.css)(_templateObject4(),
-    t.bgDefault);
-  },
-  centerContainer: function centerContainer(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    t.modalAdaptiveThreshold);
-  },
-  alignTop: function alignTop(t) {
-    return (0, _Emotion.css)(_templateObject6(),
-    (0, _Emotion.cssName)(styles.centerContainer(t)));
-  },
-  close: function close(t) {
-    var iconSize = 14;
-    var margin = 0;
-    var paddingTop = 35;
-    var paddingBottom = 20;
-    var blockSize = iconSize + paddingTop + paddingBottom;
-    return (0, _Emotion.css)(_templateObject7(),
-    (0, _Mixins.resetButton)(),
-    margin,
-    margin,
-    blockSize,
-    blockSize,
-    t.modalCloseButtonColor,
-    t.modalCloseButtonHoverColor,
-    iconSize,
-    iconSize,
-    paddingTop, paddingTop, paddingBottom, paddingBottom);
-  },
-  closeWrapper: function closeWrapper() {
-    return (0, _Emotion.css)(_templateObject8());
-  },
-  disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject9(),
-    (0, _Emotion.cssName)(styles.close(t)),
-    t.modalCloseButtonDisabledColor);
-  },
-  closeOutline: function closeOutline(t) {
-    return (0, _Emotion.css)(_templateObject10(),
-    (0, _Emotion.cssName)(styles.close(t)),
-    (0, _Emotion.cssName)(styles.close(t)),
-    t.borderColorFocus);
-  },
-  header: function header() {
-    return (0, _Emotion.css)(_templateObject11());
-  },
-  headerWithClose: function headerWithClose() {
-    return (0, _Emotion.css)(_templateObject12());
-  },
-  body: function body() {
-    return (0, _Emotion.css)(_templateObject13());
-  },
-  footer: function footer() {
-    return (0, _Emotion.css)(_templateObject14());
-  },
-  panel: function panel(t) {
-    return (0, _Emotion.css)(_templateObject15(),
-    (0, _Emotion.cssName)(styles.footer()),
-    t.modalFooterBg);
-  },
-  fixedHeader: function fixedHeader(t) {
-    return (0, _Emotion.css)(_templateObject16(),
-    t.modalFixedHeaderBg,
-    t.modalFixedHeaderShadow);
-  },
-  fixedFooter: function fixedFooter(t) {
-    return (0, _Emotion.css)(_templateObject17(),
-    t.modalFixedHeaderBg,
-    t.modalFixedFooterShadow);
-  },
-  headerAddPadding: function headerAddPadding() {
-    return (0, _Emotion.css)(_templateObject18());
-  },
-  bodyWithoutHeader: function bodyWithoutHeader() {
-    return (0, _Emotion.css)(_templateObject19());
-  },
-  bodyWithoutPadding: function bodyWithoutPadding() {
-    return (0, _Emotion.css)(_templateObject20());
-  },
-  bodyAddPadding: function bodyAddPadding() {
-    return (0, _Emotion.css)(_templateObject21());
-  } };
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;