npm - @skbkontur/react-ui - Versions diffs - 0.0.0-2ac4c133dd → 0.0.0-2dd5039746 - Mend

@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2dd5039746

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

package/cjs/components/MenuSeparator/MenuSeparator.js CHANGED Viewed

@@ -1,7 +1,9 @@
 "use strict";exports.__esModule = true;exports.MenuSeparator = MenuSeparator;exports.MenuSeparatorDataTids = void 0;var _react = _interopRequireWildcard(require("react"));
+var _Emotion = require("../../lib/theming/Emotion");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ResponsiveLayout = require("../ResponsiveLayout");
 var _MenuSeparator = require("./MenuSeparator.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
@@ -13,14 +15,23 @@ var MenuSeparatorDataTids = {
 /**
  * Добавляет разделительную линию между элементами меню.
  *
- * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */exports.MenuSeparatorDataTids = MenuSeparatorDataTids;
 function MenuSeparator(props) {
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
-    _react.default.createElement("div", { "data-tid": MenuSeparatorDataTids.root, className: _MenuSeparator.styles.root(theme) })));
+    _react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null,
+    function (_ref) {var _cx;var isMobile = _ref.isMobile;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          "data-tid": MenuSeparatorDataTids.root,
+          className: (0, _Emotion.cx)((_cx = {}, _cx[_MenuSeparator.styles.root(theme)] = true, _cx[_MenuSeparator.styles.rootMobile(theme)] = isMobile, _cx)) }));
+    })));
 }

package/cjs/components/MenuSeparator/MenuSeparator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparatorDataTids","root","MenuSeparator","props","theme","ThemeContext","styles","__KONTUR_REACT_UI__"],"mappings":"oHAAA;;AAEA;AACA;;AAEA,uD;;;;AAIO,IAAMA,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA,G;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE,~~0CAAK~~,~~YAAUH~~,qBAAqB,CAACC,~~IAArC~~,~~EAA2C~~,SAAS,~~EAAEK~~,~~sBAAOL~~,IAAP,CAAYG,KAAZ,~~CAAtD~~,GADF,CADF~~;;;AAKD~~;;~~AAEDF~~,aAAa,~~CAACK~~,mBAAd,GAAoC,eAApC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n root: 'MenuSeparator__root',\n} as const;\n/*\n Добавляет разделительную линию между элементами меню.\n \n Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n const theme = useContext(ThemeContext);\n\n return (\n <CommonWrapper {...props}>\n <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />\n </CommonWrapper>\n );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}
1	+ {"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparatorDataTids","root","MenuSeparator","props","theme","ThemeContext","isMobile","styles","rootMobile","__KONTUR_REACT_UI__"],"mappings":"oHAAA;;AAEA;AACA;AACA;AACA;;AAEA,uD;;;;AAIO,IAAMA,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA,G;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE,iCAAC,kCAAD;AACG,oBAAkB,aAAfG,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUN,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAE,gCAAMM,sBAAON,IAAP,CAAYG,KAAZ,CAAN,IAA2B,IAA3B,MAAkCG,sBAAOC,UAAP,CAAkBJ,KAAlB,CAAlC,IAA6DE,QAA7D,OAFb,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDJ,aAAa,CAACO,mBAAd,GAAoC,eAApC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n root: 'MenuSeparator__root',\n} as const;\n/*\n Добавляет разделительную линию между элементами меню.\n \n Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n const theme = useContext(ThemeContext);\n\n return (\n <CommonWrapper {...props}>\n <ResponsiveLayout>\n {({ isMobile }) => {\n return (\n <div\n data-tid={MenuSeparatorDataTids.root}\n className={cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n />\n );\n }}\n </ResponsiveLayout>\n </CommonWrapper>\n );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/cjs/components/MenuSeparator/MenuSeparator.styles.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

package/cjs/components/MenuSeparator/MenuSeparator.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 var styles = (0, _Emotion.memoizeStyle)({
@@ -7,4 +7,11 @@ var styles = (0, _Emotion.memoizeStyle)({
     t.menuSeparatorMarginY,
     t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+  },
+  rootMobile: function rootMobile(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])),
+    t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
   } });exports.styles = styles;

package/cjs/components/MenuSeparator/MenuSeparator.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["MenuSeparator.styles.ts"],"names":["styles","root","t","css","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,oBADd;AAEgBF,IAAAA,CAAC,CAACG,wBAFlB,EAEoDH,CAAC,CAACI,wBAFtD;;AAID,GANgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n margin: ${t.menuSeparatorMarginY} 0;\n border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["MenuSeparator.styles.ts"],"names":["styles","root","t","css","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,oBADd;AAEgBF,IAAAA,CAAC,CAACG,wBAFlB,EAEoDH,CAAC,CAACI,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBL,CARsB,EAQZ;AACnB,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACM,0BADd,EAC4CN,CAAC,CAACO,0BAD9C;;;AAID,GAbgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n margin: ${t.menuSeparatorMarginY} 0;\n border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n `;\n },\n\n rootMobile(t: Theme) {\n return css`\n margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n border-radius: 1px;\n `;\n },\n});\n"]}

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

@@ -45,6 +45,7 @@ export declare const ModalDataTids: {
     readonly content: "modal-content";
     readonly close: "modal-close";
 };
+declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock'>>;
 /**
  * Модальное окно
  *
@@ -64,9 +65,8 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     static Header: typeof ModalHeader;
     static Body: typeof ModalBody;
     static Footer: typeof ModalFooter;
-    static defaultProps: {
-        disableFocusLock: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: ModalState;
     private theme;
     private stackSubscription;
@@ -91,3 +91,4 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private setHasFooter;
     private setHasPanel;
 }
+export {};

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

@@ -16,6 +16,7 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _client = require("../../lib/client");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
+var _createPropsGetter = require("../../lib/createPropsGetter");
 var _ResponsiveLayout = require("../ResponsiveLayout");
 var _ModalContext = require("./ModalContext");
@@ -74,7 +75,9 @@ var mountedModalsCount = 0;
 var ModalDataTids = {
   container: 'modal-container',
   content: 'modal-content',
-  close: 'modal-close' };
+  close: 'modal-close' };exports.ModalDataTids = ModalDataTids;
 /**
@@ -90,7 +93,7 @@ var ModalDataTids = {
  * в соответствующий компонент нужно передать
  * проп **sticky** со значением **false**
  * (по-умолчанию прилипание включено)
- */exports.ModalDataTids = ModalDataTids;var
+ */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.
@@ -103,6 +106,8 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
+    getProps = (0, _createPropsGetter.createPropsGetter)(Modal.defaultProps);_this.
     state = {
       stackPosition: 0,
       hasBackground: true,
@@ -255,10 +260,6 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
@@ -325,7 +326,7 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
     throttledCheckHorizontalScroll = (0, _lodash.default)(_this.checkHorizontalScrollAppearance, 100);_this.
-    handleResize = function (event) {
+    handleResize = function () {
       LayoutEvents.emit();
     };_this.
@@ -339,5 +340,5 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
     setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
       _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
-    };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.throttledCheckHorizontalScroll);}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.throttledCheckHorizontalScroll);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {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 _this3 = this;var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!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(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer(_this3.theme)] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: _this3.props.disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalCross', className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: _this3.props.disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, _this3.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.defaultProps = { // NOTE: в ie нормально не работает
+    };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.throttledCheckHorizontalScroll);}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.throttledCheckHorizontalScroll);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if ((0, _utils.isNonNullable)(this.stackSubscription)) {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 _this3 = this;var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (!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(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": ModalDataTids.container }, /*#__PURE__*/_react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null, function (_ref) {var _cx, _cx2, _cx3, _cx4, _cx5;var isMobile = _ref.isMobile;return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer()] = true, _cx[_Modal.styles.mobileCenterContainer()] = isMobile, _cx[_Modal.styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Modal.styles.window(_this3.theme)] = true, _cx2[_Modal.styles.mobileWindow()] = isMobile, _cx2)), style: isMobile ? undefined : style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize, fullHeight: isMobile }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: _this3.getProps().disableFocusLock, autoFocus: false, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_Modal.styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container') }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalCross', className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Modal.styles.closeWrapper(_this3.theme)] = true, _cx4[_Modal.styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4)) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { className: (0, _Emotion.cx)((_cx5 = {}, _cx5[_Modal.styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)), requestClose: _this3.requestClose, disableClose: _this3.props.disableClose })), /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, _this3.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.defaultProps = { // NOTE: в ie нормально не работает
   disableFocusLock: _client.isIE11 };

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

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

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

@@ -5,7 +5,7 @@ export declare const styles: {
     container(): string;
     window(t: Theme): string;
     mobileWindow(): string;
-    centerContainer(t: Theme): string;
+    centerContainer(): string;
     mobileCenterContainer(): string;
     alignTop(): string;
     close(t: Theme): string;
@@ -32,7 +32,7 @@ export declare const styles: {
     fixedPanel(t: Theme): string;
     headerAddPadding(): string;
     bodyWithoutHeader(t: Theme): string;
-    mobileBodyWithoutHeader(t: Theme): string;
+    mobileBodyWithoutHeader(): string;
     bodyWithoutPadding(): string;
     bodyAddPaddingForPanel(t: Theme): string;
     mobileBodyAddPaddingForPanel(t: Theme): string;

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

@@ -62,7 +62,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
-  centerContainer: function centerContainer(t) {
+  centerContainer: function centerContainer() {
     return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (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    "])));
@@ -338,7 +338,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
-  mobileBodyWithoutHeader: function mobileBodyWithoutHeader(t) {
+  mobileBodyWithoutHeader: function mobileBodyWithoutHeader() {
     return (0, _Emotion.css)(_templateObject33 || (_templateObject33 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-top: 0px;\n    "])));
@@ -363,7 +363,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
   columnFlexContainer: function columnFlexContainer() {
-    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: scroll;\n    "])));
+    return (0, _Emotion.css)(_templateObject37 || (_templateObject37 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    "])));

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height /\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer(t: Theme) {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n `;\n },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n focus(t: Theme) {\n return css`\n color: ${t.modalCloseButtonHoverColor};\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n headerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ${t.modalHeaderTextColor};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n padding-top: 0px;\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\n `;\n },\n\n footerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader(t: Theme) {\n return css`\n padding-top: 0px;\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n\n mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: scroll;\n `;\n },\n});\n"]}
1	+ {"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","modalBorderRadius","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n height: 100%;\n left: 0;\n position: fixed;\n top: 0;\n width: 100%;\n `;\n },\n\n bg(t: Theme) {\n return css`\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n background: ${t.modalBackBg};\n opacity: ${t.modalBackOpacity};\n `;\n },\n\n container() {\n return css`\n position: relative;\n white-space: nowrap;\n text-align: center;\n height: 100%;\n overflow-y: auto;\n outline: none;\n\n &::before {\n content: '';\n display: inline-block;\n vertical-align: middle;\n height: 80%; /* to vertical align modal 40%/60% of screen height /\n }\n `;\n },\n\n window(t: Theme) {\n return css`\n position: relative;\n white-space: normal;\n margin: auto;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n background: ${t.modalBg};\n border-radius: ${t.modalBorderRadius};\n `;\n },\n\n mobileWindow() {\n return css`\n width: 100%;\n height: 100%;\n overflow: auto;\n `;\n },\n\n centerContainer() {\n return css`\n position: relative;\n display: inline-block;\n text-align: left;\n vertical-align: middle;\n box-sizing: border-box;\n z-index: 10;\n margin: 40px 20px;\n `;\n },\n\n mobileCenterContainer() {\n return css`\n margin: 0;\n width: 100%;\n height: 100%;\n `;\n },\n\n alignTop() {\n return css`\n vertical-align: top;\n `;\n },\n\n close(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n return css`\n ${resetButton()};\n position: absolute;\n display: flex;\n right: ${padding}px;\n top: ${padding}px;\n background: none;\n background: transparent;\n cursor: pointer;\n color: ${t.modalCloseButtonColor};\n text-align: center;\n vertical-align: middle;\n padding: ${t.modalCloseButtonClickArea};\n margin: -${t.modalCloseButtonClickArea};\n\n &:hover {\n color: ${t.modalCloseButtonHoverColor};\n }\n\n & > svg {\n width: ${t.modalCloseIconSize};\n height: ${t.modalCloseIconSize};\n box-sizing: content-box;\n }\n `;\n },\n\n mobileClose(t: Theme) {\n return css`\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n padding: ${t.mobileModalCloseButtonClickArea};\n margin: -${t.mobileModalCloseButtonClickArea};\n\n & > svg {\n width: ${t.mobileModalCloseIconSize};\n height: ${t.mobileModalCloseIconSize};\n }\n `;\n },\n\n mobileCloseWithoutHeader() {\n return css`\n position: static;\n `;\n },\n\n closeWrapper(t: Theme) {\n const padding = parseInt(t.modalCloseButtonPadding);\n const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n const blockSizeX = parseInt(t.modalCloseIconSize) + 2 padding - legacyShift;\n const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n return css`\n position: relative;\n float: right;\n width: ${blockSizeX + legacyGap}px;\n height: ${blockSizeY}px;\n `;\n },\n\n mobileCloseWrapper(t: Theme) {\n const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n return css`\n position: absolute;\n right: ${t.mobileModalCloseButtonRightPadding};\n top: ${t.mobileModalCloseButtonTopPadding};\n padding: 0px;\n margin: 0px;\n display: flex;\n justify-content: center;\n align-items: center;\n width: ${size}px;\n height: ${size}px;\n background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n border-radius: ${size}px;\n `;\n },\n\n disabled(t: Theme) {\n return css`\n pointer-events: none;\n cursor: default;\n color: ${t.modalCloseButtonDisabledColor};\n `;\n },\n\n focus(t: Theme) {\n return css`\n color: ${t.modalCloseButtonHoverColor};\n outline: 2px solid ${t.borderColorFocus};\n `;\n },\n\n headerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n header(t: Theme) {\n return css`\n font-size: ${t.modalHeaderFontSize};\n line-height: ${t.modalHeaderLineHeight};\n padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n overflow-wrap: break-word;\n word-wrap: break-word;\n color: ${t.modalHeaderTextColor};\n `;\n },\n\n mobileHeader(t: Theme) {\n return css`\n font-size: ${t.mobileModalHeaderFontSize};\n line-height: ${t.mobileModalHeaderLineHeight};\n padding: ${t.mobileModalHeaderPadding};\n `;\n },\n\n body(t: Theme) {\n return css`\n padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalBodyTextColor};\n `;\n },\n\n mobileBody(t: Theme) {\n return css`\n padding: ${t.mobileModalBodyPadding};\n padding-top: 0px;\n display: flex;\n flex-flow: column;\n flex: 1;\n font-size: ${t.mobileModalBodyFontSize};\n `;\n },\n\n headerWithClose(t: Theme) {\n const rightPadding =\n 2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n return css`\n padding-right: ${rightPadding}px;\n `;\n },\n\n mobileHeaderWithClose(t: Theme) {\n return css`\n padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n `;\n },\n\n footer(t: Theme) {\n return css`\n padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n color: ${t.modalFooterTextColor};\n border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n `;\n },\n\n mobileFooter(t: Theme) {\n return css`\n padding: ${t.mobileModalFooterPadding};\n `;\n },\n\n footerWrapper() {\n return css`\n position: relative;\n `;\n },\n\n panel(t: Theme) {\n return css`\n padding-top: ${t.modalFooterPanelPaddingTop};\n padding-bottom: ${t.modalFooterPanelPaddingBottom};\n background: ${t.modalFooterBg};\n `;\n },\n\n fixedHeader(t: Theme) {\n return css`\n margin-bottom: 10px;\n padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n background: ${t.modalFixedHeaderBg};\n border-bottom: ${t.modalFixedHeaderBorder};\n\n &:after {\n bottom: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedHeaderShadow};\n }\n `;\n },\n\n mobileFixedHeader(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalHeaderPadding};\n `;\n },\n\n fixedFooter(t: Theme) {\n return css`\n padding-top: 20px;\n margin-top: 10px;\n background: ${t.modalFixedHeaderBg};\n border-top: ${t.modalFixedFooterBorder};\n\n &:before {\n top: 11px;\n content: '';\n position: absolute;\n height: 1px;\n width: 100%;\n left: 0;\n z-index: -1;\n box-shadow: ${t.modalFixedFooterShadow};\n }\n `;\n },\n\n fixedPanel(t: Theme) {\n return css`\n &:before {\n box-shadow: ${t.modalFixedPanelShadow};\n }\n `;\n },\n\n headerAddPadding() {\n return css`\n padding-bottom: 22px;\n `;\n },\n\n bodyWithoutHeader(t: Theme) {\n return css`\n padding-top: ${t.modalPaddingTop};\n `;\n },\n\n mobileBodyWithoutHeader() {\n return css`\n padding-top: 0px;\n `;\n },\n\n bodyWithoutPadding() {\n return css`\n padding: 0;\n `;\n },\n\n bodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.modalPaddingBottom};\n `;\n },\n\n mobileBodyAddPaddingForPanel(t: Theme) {\n return css`\n padding-bottom: ${t.mobileModalBodyPadding};\n `;\n },\n\n columnFlexContainer() {\n return css`\n height: 100%;\n display: flex;\n flex-flow: column;\n overflow-y: auto;\n `;\n },\n});\n"]}

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

@@ -46,7 +46,7 @@ ModalBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_c
-    handleResize = function (event) {
+    handleResize = function () {
       LayoutEvents.emit();
     };return _this;}var _proto = ModalBody.prototype;_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.
@@ -63,7 +63,7 @@ ModalBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_c
             _Modal.styles.body(_this3.theme)] = true, _cx[
             _Modal.styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _cx[
             _Modal.styles.bodyWithoutHeader(_this3.theme)] = !hasHeader, _cx[
-            _Modal.styles.mobileBodyWithoutHeader(_this3.theme)] = !hasHeader && _this3.isMobileLayout, _cx[
+            _Modal.styles.mobileBodyWithoutHeader()] = !hasHeader && _this3.isMobileLayout, _cx[
             _Modal.styles.bodyAddPaddingForPanel(_this3.theme)] = additionalPadding, _cx[
             _Modal.styles.mobileBodyAddPaddingForPanel(_this3.theme)] = additionalPadding && _this3.isMobileLayout, _cx[
             _Modal.styles.bodyWithoutPadding()] = noPadding, _cx)) },

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","responsiveLayout","rootNode","handleResize","~~event","~~LayoutEvents","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","styles","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","React","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"uUAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,uC;;;;;;;;;AASA;AACA;AACA;AACA;AACA,G;;;AAGaA,S,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;;;;;;AAoBSC,IAAAA,Y,GAAe,~~UAACC,KAAD,EAAoB~~;~~AACzCC~~,MAAAA,YAAY,CAACC,IAAb;AACD,K,uDAbMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C;;AAMMA,EAAAA,U,GAAP,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,uCAAC,cAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAE;AACRI,0BAAOC,IAAP,CAAY,MAAI,CAACR,KAAjB,CADQ,IACkB,IADlB;AAERO,0BAAOE,UAAP,CAAkB,MAAI,CAACT,KAAvB,CAFQ,IAEwB,MAAI,CAACU,cAF7B;AAGRH,0BAAOI,iBAAP,CAAyB,MAAI,CAACX,KAA9B,CAHQ,IAG+B,CAACK,SAHhC;AAIRE,0BAAOK,uBAAP,~~CAA+B~~,~~MAAI~~,~~CAACZ~~,~~KAApC,CAJQ,IAIqC,CAACK,~~SAAD,IAAc,MAAI,CAACK,~~cAJxD~~;AAKRH,0BAAOM,sBAAP,CAA8B,MAAI,CAACb,KAAnC,CALQ,IAKoCI,iBALpC;AAMRG,0BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0CI,iBAAiB,IAAI,MAAI,CAACM,cANpE;AAORH,0BAAOQ,kBAAP,EAPQ,IAOsBb,SAPtB,OAHb;;;AAaG,UAAA,MAAI,CAACQ,cAAL;AACC,uCAAC,8BAAD,IAAgB,QAAQ,EAAE,MAAI,~~CAACf~~,YAA/B,IAA8C,MAAI,~~CAACQ~~,KAAL,CAAWa,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACb,KAAL,CAAWa,QAhBf,CADF,CADD,GADH,CADF;;;;;;;AA2BD,G,oBApD4BC,eAAMC,S,WACrBC,mB,GAAsB,W,UACtBC,c,GAAiB,I","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport interface ModalBodyProps extends CommonProps {\n /*\n убирает отступы\n /\n noPadding?: boolean;\n}\n\n/\n Контейнер с отступами от края модалки\n \n @visibleName Modal.Body\n */\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n public static __KONTUR_REACT_UI__ = 'ModalBody';\n public static __MODAL_BODY__ = true;\n\n private theme!: Theme;\n private isMobileLayout!: boolean;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private handleResize = (~~event: UIEvent~~) => {\n LayoutEvents.emit();\n };\n\n public renderMain(): JSX.Element {\n const { noPadding } = this.props;\n return (\n <ModalContext.Consumer>\n {({ additionalPadding, hasHeader }) => (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <ZIndex\n priority={'ModalBody'}\n createStackingContext\n className={cx({\n [styles.body(this.theme)]: true,\n [styles.mobileBody(this.theme)]: this.isMobileLayout,\n [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n [styles.mobileBodyWithoutHeader(~~this.theme~~)]: !hasHeader && this.isMobileLayout,\n [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n [styles.bodyWithoutPadding()]: noPadding,\n })}\n >\n {this.isMobileLayout ? (\n <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n ) : (\n this.props.children\n )}\n </ZIndex>\n </CommonWrapper>\n )}\n </ModalContext.Consumer>\n );\n }\n}\n"]}
1	+ {"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","responsiveLayout","rootNode","handleResize","LayoutEvents","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","styles","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","React","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"uUAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,uC;;;;;;;;;AASA;AACA;AACA;AACA;AACA,G;;;AAGaA,S,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;;;;;;AAoBSC,IAAAA,Y,GAAe,YAAM;AAC3BC,MAAAA,YAAY,CAACC,IAAb;AACD,K,uDAbMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C;;AAMMA,EAAAA,U,GAAP,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,uCAAC,cAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAE;AACRI,0BAAOC,IAAP,CAAY,MAAI,CAACR,KAAjB,CADQ,IACkB,IADlB;AAERO,0BAAOE,UAAP,CAAkB,MAAI,CAACT,KAAvB,CAFQ,IAEwB,MAAI,CAACU,cAF7B;AAGRH,0BAAOI,iBAAP,CAAyB,MAAI,CAACX,KAA9B,CAHQ,IAG+B,CAACK,SAHhC;AAIRE,0BAAOK,uBAAP,EAJQ,IAI2B,CAACP,SAAD,IAAc,MAAI,CAACK,cAJ9C;AAKRH,0BAAOM,sBAAP,CAA8B,MAAI,CAACb,KAAnC,CALQ,IAKoCI,iBALpC;AAMRG,0BAAOO,4BAAP,CAAoC,MAAI,CAACd,KAAzC,CANQ,IAM0CI,iBAAiB,IAAI,MAAI,CAACM,cANpE;AAORH,0BAAOQ,kBAAP,EAPQ,IAOsBb,SAPtB,OAHb;;;AAaG,UAAA,MAAI,CAACQ,cAAL;AACC,uCAAC,8BAAD,IAAgB,QAAQ,EAAE,MAAI,CAACd,YAA/B,IAA8C,MAAI,CAACO,KAAL,CAAWa,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACb,KAAL,CAAWa,QAhBf,CADF,CADD,GADH,CADF;;;;;;;AA2BD,G,oBApD4BC,eAAMC,S,WACrBC,mB,GAAsB,W,UACtBC,c,GAAiB,I","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport interface ModalBodyProps extends CommonProps {\n /*\n убирает отступы\n /\n noPadding?: boolean;\n}\n\n/\n Контейнер с отступами от края модалки\n \n @visibleName Modal.Body\n */\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n public static __KONTUR_REACT_UI__ = 'ModalBody';\n public static __MODAL_BODY__ = true;\n\n private theme!: Theme;\n private isMobileLayout!: boolean;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private handleResize = () => {\n LayoutEvents.emit();\n };\n\n public renderMain(): JSX.Element {\n const { noPadding } = this.props;\n return (\n <ModalContext.Consumer>\n {({ additionalPadding, hasHeader }) => (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <ZIndex\n priority={'ModalBody'}\n createStackingContext\n className={cx({\n [styles.body(this.theme)]: true,\n [styles.mobileBody(this.theme)]: this.isMobileLayout,\n [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n [styles.mobileBodyWithoutHeader()]: !hasHeader && this.isMobileLayout,\n [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n [styles.bodyWithoutPadding()]: noPadding,\n })}\n >\n {this.isMobileLayout ? (\n <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n ) : (\n this.props.children\n )}\n </ZIndex>\n </CommonWrapper>\n )}\n </ModalContext.Consumer>\n );\n }\n}\n"]}

package/cjs/components/Modal/ModalFooter.d.ts CHANGED Viewed

@@ -1,12 +1,26 @@
 import { ReactNode } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
 export interface ModalFooterProps extends CommonProps {
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    /**
+     * Закрепляет футер снизу модального окна
+     *
+     * На десктопе по умолчанию равен `true`
+     * На мобильных по умолчанию равен `false`
+     */
     sticky?: boolean;
+    /**
+     * Контент футера
+     */
     children?: ReactNode;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
 }
 export declare const ModalFooterDataTids: {
     readonly root: "ModalFooter__root";

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

@@ -7,6 +7,8 @@ var _ZIndex = require("../../internal/ZIndex");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _ResponsiveLayout = require("../ResponsiveLayout");
+var _Gapped = require("../Gapped");
+var _utils = require("../../lib/utils");
 var _Modal = require("./Modal.styles");
 var _ModalContext = require("./ModalContext");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
@@ -17,6 +19,19 @@ var _ModalContext = require("./ModalContext");function _getRequireWildcardCache(
@@ -34,9 +49,9 @@ function ModalFooter(props) {
   var modal = (0, _react.useContext)(_ModalContext.ModalContext);
   var layout = (0, _ResponsiveLayout.useResponsiveLayout)();
-  var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,panel = props.panel,children = props.children;
+  var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,gap = props.gap,panel = props.panel,children = props.children;
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     modal.setHasFooter == null ? void 0 : modal.setHasFooter();
     modal.setHasPanel == null ? void 0 : modal.setHasPanel(panel);
@@ -58,9 +73,15 @@ function ModalFooter(props) {
         _Modal.styles.mobileFooter(theme)] = layout.isMobile, _cx)) },
+      (0, _utils.isNonNullable)(gap) ? /*#__PURE__*/
+      _react.default.createElement(_Gapped.Gapped, { vertical: layout.isMobile, gap: gap },
+      children) :
       children));
   };
   return /*#__PURE__*/(

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooterDataTids","root","ModalFooter","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","panel","children","setHasFooter","setHasPanel","renderContent","fixed","styles","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","footerWrapper","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"8GAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8C~~;;;;;;;;;;;AAWO~~,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA,G;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,~~sBAAuDL~~,~~KAAvD~~,CAAQM,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,~~KAAnC~~,~~GAAuDR~~,~~KAAvD~~,CAAmCQ,~~KAAnC~~,~~CAA0CC~~,~~QAA1C~~,~~GAAuDT~~,~~KAAvD~~,~~CAA0CS~~,~~QAA1C~~;;AAEA,~~wBAAU~~,YAAM;~~AACdN~~,IAAAA,KAAK,~~CAACO~~,YAAN,~~oBAAAP~~,KAAK,~~CAACO~~,YAAN;~~AACAP~~,IAAAA,KAAK,~~CAACQ~~,WAAN,~~oBAAAR~~,KAAK,~~CAACQ~~,WAAN,CAAoBH,KAApB;;AAEA,WAAO,YAAM;~~AACXL~~,MAAAA,KAAK,~~CAACO~~,YAAN,~~oBAAAP~~,KAAK,~~CAACO~~,YAAN,CAAqB,KAArB;~~AACAP~~,MAAAA,KAAK,~~CAACQ~~,WAAN,~~oBAAAR~~,KAAK,~~CAACQ~~,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARD,EAQG,CAACH,KAAD,CARH;;AAUA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,~~oBAAUhB~~,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAE;~~AACRgB~~,sBAAOC,MAAP,~~CAAcd~~,KAAd,CADQ,IACe,IADf;~~AAERa~~,sBAAOE,WAAP,~~CAAmBf~~,KAAnB,CAFQ,~~IAEoBY~~,KAFpB;AAGRC,sBAAON,KAAP,~~CAAaP~~,KAAb,CAHQ,~~IAGcgB~~,OAAO,CAACT,KAAD,CAHrB;AAIRM,sBAAOI,UAAP,~~CAAkBjB~~,KAAlB,CAJQ,~~IAImBY~~,KAAK,IAAII,OAAO,CAACT,KAAD,CAJnC;AAKRM,sBAAOK,YAAP,~~CAAoBlB~~,KAApB,CALQ,IAKqBI,MAAM,CAACE,QAL5B,OAFb;;;~~AAUGE~~,MAAAA,~~QAVH~~,~~CADF~~;;;~~AAcD~~,~~GAfD~~;;~~AAiBA~~;AACE,iCAAC,4BAAD,~~EAAmBT~~,KAAnB;AACE,iCAAC,cAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,~~EAAEc~~,cAAOM,aAAP,EAA5C;~~AACGd~~,IAAAA,MAAM;AACL,iCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEH,KAAK,~~CAACkB~~,gBAAN,GAAyB,qCAAzB,GAA4C,CAA1E;AACGT,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF,CADF;;;;;AAaD;;~~AAEDb~~,WAAW,~~CAACuB~~,mBAAZ,GAAkC,aAAlC;~~AACAvB~~,WAAW,~~CAACwB~~,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, ~~useEffect~~ } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalFooterProps extends CommonProps {\n /*\n Включает серый цвет в футере\n /\n panel?: boolean;\n sticky?: boolean;\n children?: ReactNode;\n}\n\nexport const ModalFooterDataTids = {\n root: 'ModalFooter__root',\n} as const;\n\n/\n Футер модального окна.\n \n @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n const theme = useContext(ThemeContext);\n const modal = useContext(ModalContext);\n const layout = useResponsiveLayout();\n\n const { sticky = !layout.isMobile, panel, children } = props;\n\n ~~useEffect~~(() => {\n modal.setHasFooter?.();\n modal.setHasPanel?.(panel);\n\n return () => {\n modal.setHasFooter?.(false);\n modal.setHasPanel?.(false);\n };\n }, [panel]);\n\n const renderContent = (fixed = false) => {\n return (\n <div\n data-tid={ModalFooterDataTids.root}\n className={cx({\n [styles.footer(theme)]: true,\n [styles.fixedFooter(theme)]: fixed,\n [styles.panel(theme)]: Boolean(panel),\n [styles.fixedPanel(theme)]: fixed && Boolean(panel),\n [styles.mobileFooter(theme)]: layout.isMobile,\n })}\n >\n {children}\n </div>\n );\n };\n\n return (\n <CommonWrapper {...props}>\n <ZIndex priority={'ModalFooter'} className={styles.footerWrapper()}>\n {sticky ? (\n <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n {renderContent}\n </Sticky>\n ) : (\n renderContent()\n )}\n </ZIndex>\n </CommonWrapper>\n );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}
1	+ {"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooterDataTids","root","ModalFooter","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","gap","panel","children","setHasFooter","setHasPanel","renderContent","fixed","styles","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","footerWrapper","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"8GAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8C;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA,G;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAA4DL,KAA5D,CAAQM,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,GAAnC,GAA4DR,KAA5D,CAAmCQ,GAAnC,CAAwCC,KAAxC,GAA4DT,KAA5D,CAAwCS,KAAxC,CAA+CC,QAA/C,GAA4DV,KAA5D,CAA+CU,QAA/C;;AAEA,8BAAgB,YAAM;AACpBP,IAAAA,KAAK,CAACQ,YAAN,oBAAAR,KAAK,CAACQ,YAAN;AACAR,IAAAA,KAAK,CAACS,WAAN,oBAAAT,KAAK,CAACS,WAAN,CAAoBH,KAApB;;AAEA,WAAO,YAAM;AACXN,MAAAA,KAAK,CAACQ,YAAN,oBAAAR,KAAK,CAACQ,YAAN,CAAqB,KAArB;AACAR,MAAAA,KAAK,CAACS,WAAN,oBAAAT,KAAK,CAACS,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARD,EAQG,CAACH,KAAD,CARH;;AAUA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,oBAAUjB,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAE;AACRiB,sBAAOC,MAAP,CAAcf,KAAd,CADQ,IACe,IADf;AAERc,sBAAOE,WAAP,CAAmBhB,KAAnB,CAFQ,IAEoBa,KAFpB;AAGRC,sBAAON,KAAP,CAAaR,KAAb,CAHQ,IAGciB,OAAO,CAACT,KAAD,CAHrB;AAIRM,sBAAOI,UAAP,CAAkBlB,KAAlB,CAJQ,IAImBa,KAAK,IAAII,OAAO,CAACT,KAAD,CAJnC;AAKRM,sBAAOK,YAAP,CAAoBnB,KAApB,CALQ,IAKqBI,MAAM,CAACE,QAL5B,OAFb;;;AAUG,gCAAcC,GAAd;AACC,mCAAC,cAAD,IAAQ,QAAQ,EAAEH,MAAM,CAACE,QAAzB,EAAmC,GAAG,EAAEC,GAAxC;AACGE,MAAAA,QADH,CADD;;;AAKCA,MAAAA,QAfJ,CADF;;;;AAoBD,GArBD;;AAuBA;AACE,iCAAC,4BAAD,EAAmBV,KAAnB;AACE,iCAAC,cAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,EAAEe,cAAOM,aAAP,EAA5C;AACGf,IAAAA,MAAM;AACL,iCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEH,KAAK,CAACmB,gBAAN,GAAyB,qCAAzB,GAA4C,CAA1E;AACGT,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF,CADF;;;;;AAaD;;AAEDd,WAAW,CAACwB,mBAAZ,GAAkC,aAAlC;AACAxB,WAAW,CAACyB,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalFooterProps extends CommonProps {\n /*\n Включает серый цвет в футере\n /\n panel?: boolean;\n /\n Закрепляет футер снизу модального окна\n \n На десктопе по умолчанию равен `true`\n * На мобильных по умолчанию равен `false`\n /\n sticky?: boolean;\n /\n Контент футера\n /\n children?: ReactNode;\n /\n Задаёт отступ между элементами футера\n /\n gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n root: 'ModalFooter__root',\n} as const;\n\n/\n Футер модального окна.\n \n @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n const theme = useContext(ThemeContext);\n const modal = useContext(ModalContext);\n const layout = useResponsiveLayout();\n\n const { sticky = !layout.isMobile, gap, panel, children } = props;\n\n useLayoutEffect(() => {\n modal.setHasFooter?.();\n modal.setHasPanel?.(panel);\n\n return () => {\n modal.setHasFooter?.(false);\n modal.setHasPanel?.(false);\n };\n }, [panel]);\n\n const renderContent = (fixed = false) => {\n return (\n <div\n data-tid={ModalFooterDataTids.root}\n className={cx({\n [styles.footer(theme)]: true,\n [styles.fixedFooter(theme)]: fixed,\n [styles.panel(theme)]: Boolean(panel),\n [styles.fixedPanel(theme)]: fixed && Boolean(panel),\n [styles.mobileFooter(theme)]: layout.isMobile,\n })}\n >\n {isNonNullable(gap) ? (\n <Gapped vertical={layout.isMobile} gap={gap}>\n {children}\n </Gapped>\n ) : (\n children\n )}\n </div>\n );\n };\n\n return (\n <CommonWrapper {...props}>\n <ZIndex priority={'ModalFooter'} className={styles.footerWrapper()}>\n {sticky ? (\n <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n {renderContent}\n </Sticky>\n ) : (\n renderContent()\n )}\n </ZIndex>\n </CommonWrapper>\n );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}

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

@@ -32,7 +32,7 @@ function ModalHeader(props) {
   var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,children = props.children;
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     modal.setHasHeader == null ? void 0 : modal.setHasHeader();
     return function () {return modal.setHasHeader == null ? void 0 : modal.setHasHeader(false);};