@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/cjs/components/Modal/ModalClose.js

@@ -1,24 +1,54 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.ModalClose = ModalClose;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ModalClose = ModalClose;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CrossIcon = require("../../internal/icons/CrossIcon");
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+var _CommonWrapper = require("../../internal/CommonWrapper");
 
 
-var _Modal = require("./Modal.styles");
+var _Modal = require("./Modal.styles");var _excluded = ["disableClose", "requestClose"];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;}
 
-function ModalClose(_ref) {var _cn;var disableClose = _ref.disableClose,requestClose = _ref.requestClose;
+function ModalClose(_ref) {var disableClose = _ref.disableClose,requestClose = _ref.requestClose,otherProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var _React$useState = _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, otherProps, /*#__PURE__*/
+    _react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null,
+    function (_ref2) {var _cx;var isMobile = _ref2.isMobile;return /*#__PURE__*/(
+        _react.default.createElement("button", {
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
+          _Modal.styles.close(theme)] = true, _cx[
+          _Modal.styles.mobileClose(theme)] = isMobile, _cx[
+          _Modal.styles.disabled(theme)] = disableClose, _cx[
+          _Modal.styles.focus(theme)] = focusedByTab, _cx)),
+
+          onClick: requestClose,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          "data-tid": "modal-close",
+          tabIndex: disableClose ? -1 : 0 }, /*#__PURE__*/
+
+        _react.default.createElement(_CrossIcon.CrossIcon, null)));})));
 
-  return (
-    _react.default.createElement("button", {
-      className: (0, _classnames.default)((_cn = {}, _cn[
-      _Modal.jsStyles.close(theme)] = true, _cn[
-      _Modal.jsStyles.disabled(theme)] = disableClose, _cn)),
 
-      onClick: requestClose,
-      "data-tid": "modal-close" },
 
-    _react.default.createElement("span", { className: _Modal.jsStyles.closeOutline(theme) })));
 
 
 }

package/cjs/components/Modal/ModalClose.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","jsStyles","close","disabled","closeOutline"],"mappings":"mPAAA;AACA;;AAEA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRC,sBAASC,KAAT,CAAeH,KAAf,CADQ,IACgB,IADhB;AAERE,sBAASE,QAAT,CAAkBJ,KAAlB,CAFQ,IAEmBF,YAFnB,OADb;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,2CAAM,SAAS,EAAEG,gBAASG,YAAT,CAAsBL,KAAtB,CAAjB,GARF,CADF;;;AAYD","sourcesContent":["import React, { useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { CloseProps } from './ModalContext';\r\nimport { jsStyles } from './Modal.styles';\r\n\r\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <button\r\n      className={cn({\r\n        [jsStyles.close(theme)]: true,\r\n        [jsStyles.disabled(theme)]: disableClose,\r\n      })}\r\n      onClick={requestClose}\r\n      data-tid=\"modal-close\"\r\n    >\r\n      <span className={jsStyles.closeOutline(theme)} />\r\n    </button>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","otherProps","theme","ThemeContext","React","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","keyListener","isTabPressed","handleBlur","isMobile","styles","close","mobileClose","disabled","focus"],"mappings":"wRAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;AAGA,uC;;AAEO,SAASA,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,wBAAwCC,eAAMC,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BJ,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMK,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBL,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE,iCAAC,4BAAD,EAAmBN,UAAnB;AACE,iCAAC,kCAAD;AACG,kCAAGY,QAAH,SAAGA,QAAH;AACC;AACE,UAAA,SAAS,EAAE;AACRC,wBAAOC,KAAP,CAAab,KAAb,CADQ,IACc,IADd;AAERY,wBAAOE,WAAP,CAAmBd,KAAnB,CAFQ,IAEoBW,QAFpB;AAGRC,wBAAOG,QAAP,CAAgBf,KAAhB,CAHQ,IAGiBH,YAHjB;AAIRe,wBAAOI,KAAP,CAAahB,KAAb,CAJQ,IAIcI,YAJd,OADb;;AAOE,UAAA,OAAO,EAAEN,YAPX;AAQE,UAAA,OAAO,EAAEQ,WARX;AASE,UAAA,MAAM,EAAEI,UATV;AAUE,sBAAS,aAVX;AAWE,UAAA,QAAQ,EAAEb,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAXhC;;AAaE,qCAAC,oBAAD,OAbF,CADD,GADH,CADF,CADF;;;;;;AAuBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\n  const theme = useContext(ThemeContext);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            className={cx({\n              [styles.close(theme)]: true,\n              [styles.mobileClose(theme)]: isMobile,\n              [styles.disabled(theme)]: disableClose,\n              [styles.focus(theme)]: focusedByTab,\n            })}\n            onClick={requestClose}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            data-tid=\"modal-close\"\n            tabIndex={disableClose ? -1 : 0}\n          >\n            <CrossIcon />\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n"]}

package/cjs/components/Modal/ModalContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface CloseProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface CloseProps extends CommonProps {
     disableClose?: boolean;
     requestClose: () => void;
 }
@@ -8,5 +9,8 @@ export interface ModalContextProps {
     hasHeader?: boolean;
     close?: CloseProps;
     horizontalScroll?: boolean;
+    setHasHeader?: (value?: boolean) => void;
+    setHasFooter?: (value?: boolean) => void;
+    setHasPanel?: (value?: boolean) => void;
 }
 export declare const ModalContext: React.Context<ModalContextProps>;

package/cjs/components/Modal/ModalContext.js

@@ -12,4 +12,11 @@
 
 
 
-var ModalContext = _react.default.createContext({});exports.ModalContext = ModalContext;
+
+
+
+
+
+var ModalContext = /*#__PURE__*/_react.default.createContext({});exports.ModalContext = ModalContext;
+
+ModalContext.displayName = 'ModalContext';

package/cjs/components/Modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalContext.tsx"],"names":["ModalContext","React","createContext"],"mappings":"0JAAA;;;;;;;;;;;;;;AAcO,IAAMA,YAAY,GAAGC,eAAMC,aAAN,CAAuC,EAAvC,CAArB,C","sourcesContent":["import React from 'react';\r\n\r\nexport interface CloseProps {\r\n  disableClose?: boolean;\r\n  requestClose: () => void;\r\n}\r\n\r\nexport interface ModalContextProps {\r\n  additionalPadding?: boolean;\r\n  hasHeader?: boolean;\r\n  close?: CloseProps;\r\n  horizontalScroll?: boolean;\r\n}\r\n\r\nexport const ModalContext = React.createContext<ModalContextProps>({});\r\n"]}
+{"version":3,"sources":["ModalContext.tsx"],"names":["ModalContext","React","createContext","displayName"],"mappings":"0JAAA;;;;;;;;;;;;;;;;;;;AAmBO,IAAMA,YAAY,gBAAGC,eAAMC,aAAN,CAAuC,EAAvC,CAArB,C;;AAEPF,YAAY,CAACG,WAAb,GAA2B,cAA3B","sourcesContent":["import React from 'react';\n\nimport { CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CloseProps extends CommonProps {\n  disableClose?: boolean;\n  requestClose: () => void;\n}\n\nexport interface ModalContextProps {\n  additionalPadding?: boolean;\n  hasHeader?: boolean;\n  close?: CloseProps;\n  horizontalScroll?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const ModalContext = React.createContext<ModalContextProps>({});\n\nModalContext.displayName = 'ModalContext';\n"]}

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-export interface ModalFooterProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalFooterProps extends CommonProps {
     /**
      * Включает серый цвет в футере
      */

package/cjs/components/Modal/ModalFooter.js

@@ -1,13 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.ModalFooter = ModalFooter;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";exports.__esModule = true;exports.ModalFooter = ModalFooter;var _react = _interopRequireWildcard(require("react"));
 
 var _getScrollWidth = require("../../lib/dom/getScrollWidth");
 var _Sticky = require("../Sticky");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _ZIndex = require("../../internal/ZIndex");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../ResponsiveLayout");
 
 var _Modal = require("./Modal.styles");
-var _ModalContext = require("./ModalContext");
+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;}
 
 
 
@@ -18,46 +20,53 @@ var _ModalContext = require("./ModalContext");
 
 
 
-/**
-                                                * Футер модального окна.
-                                                *
-                                                * @visibleName Modal.Footer
-                                                */
-function ModalFooter(props) {var _props$sticky =
-  props.sticky,sticky = _props$sticky === void 0 ? true : _props$sticky,panel = props.panel,children = props.children;
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);var _useState =
-  (0, _react.useState)(0),scrollbarWidth = _useState[0],setScrollBarWidth = _useState[1];
+/**
+ * Футер модального окна.
+ *
+ * @visibleName Modal.Footer
+ */
+function ModalFooter(props) {
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var modal = (0, _react.useContext)(_ModalContext.ModalContext);
+  var layout = (0, _ResponsiveLayout.useResponsiveLayout)();
+
+  var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? layout.isMobile ? false : true : _props$sticky,panel = props.panel,children = props.children;
 
   (0, _react.useEffect)(function () {
-    setScrollBarWidth((0, _getScrollWidth.getScrollWidth)());
-  }, []);
+    modal.setHasFooter == null ? void 0 : modal.setHasFooter();
+    modal.setHasPanel == null ? void 0 : modal.setHasPanel(panel);
+
+    return function () {
+      modal.setHasFooter == null ? void 0 : modal.setHasFooter(false);
+      modal.setHasPanel == null ? void 0 : modal.setHasPanel(false);
+    };
+  }, [panel]);
 
-  var renderContent = function renderContent(fixed) {var _cn;if (fixed === void 0) {fixed = false;}return (
+  var renderContent = function renderContent(fixed) {var _cx;if (fixed === void 0) {fixed = false;}
+    return /*#__PURE__*/(
       _react.default.createElement("div", {
-        className: (0, _classnames.default)((_cn = {}, _cn[
-        _Modal.jsStyles.footer()] = true, _cn[
-        _Modal.jsStyles.panel(theme)] = Boolean(panel), _cn[
-        _Modal.jsStyles.fixedFooter(theme)] = fixed, _cn)) },
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Modal.styles.footer(theme)] = true, _cx[
+        _Modal.styles.fixedFooter(theme)] = fixed, _cx[
+        _Modal.styles.panel(theme)] = Boolean(panel), _cx[
+        _Modal.styles.mobileFooter(theme)] = layout.isMobile, _cx)) },
 
 
-      children));};
+      children));
 
 
+  };
 
-  return (
-    _react.default.createElement(_ZIndex.ZIndex, { style: { position: 'relative' }, priority: 'ModalFooter' },
-    _react.default.createElement(_ModalContext.ModalContext.Consumer, null,
-    function (_ref) {var horizontalScroll = _ref.horizontalScroll;
-      if (sticky) {
-        return (
-          _react.default.createElement(_Sticky.Sticky, { side: "bottom", offset: horizontalScroll ? scrollbarWidth : 0 },
-          renderContent));
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalFooter', className: _Modal.styles.footerWrapper() },
+    sticky ? /*#__PURE__*/
+    _react.default.createElement(_Sticky.Sticky, { side: "bottom", offset: modal.horizontalScroll ? (0, _getScrollWidth.getScrollWidth)() : 0 },
+    renderContent) :
 
 
-      }
+    renderContent())));
 
-      return renderContent();
-    })));
 
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooter","props","sticky","panel","children","theme","ThemeContext","scrollbarWidth","setScrollBarWidth","renderContent","fixed","jsStyles","footer","Boolean","fixedFooter","position","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"qPAAA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;AAWA;;;;;AAKA,SAASA,WAAT,CAAqBC,KAArB,EAA8C;AACDA,EAAAA,KADC,CACpCC,MADoC,CACpCA,MADoC,8BAC3B,IAD2B,iBACrBC,KADqB,GACDF,KADC,CACrBE,KADqB,CACdC,QADc,GACDH,KADC,CACdG,QADc;AAE5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd,CAF4C;AAGA,uBAAS,CAAT,CAHA,CAGrCC,cAHqC,gBAGrBC,iBAHqB;;AAK5C,wBAAU,YAAM;AACdA,IAAAA,iBAAiB,CAAC,qCAAD,CAAjB;AACD,GAFD,EAEG,EAFH;;AAIA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,eAACA,KAAD,cAACA,KAAD,GAAS,KAAT;AACpB;AACE,QAAA,SAAS,EAAE;AACRC,wBAASC,MAAT,EADQ,IACY,IADZ;AAERD,wBAASR,KAAT,CAAeE,KAAf,CAFQ,IAEgBQ,OAAO,CAACV,KAAD,CAFvB;AAGRQ,wBAASG,WAAT,CAAqBT,KAArB,CAHQ,IAGsBK,KAHtB,OADb;;;AAOGN,MAAAA,QAPH,CADoB,GAAtB;;;;AAYA;AACE,iCAAC,cAAD,IAAQ,KAAK,EAAE,EAAEW,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,iCAAC,0BAAD,CAAc,QAAd;AACG,oBAA0B,KAAvBC,gBAAuB,QAAvBA,gBAAuB;AACzB,UAAId,MAAJ,EAAY;AACV;AACE,uCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEc,gBAAgB,GAAGT,cAAH,GAAoB,CAAlE;AACGE,UAAAA,aADH,CADF;;;AAKD;;AAED,aAAOA,aAAa,EAApB;AACD,KAXH,CADF,CADF;;;;AAiBD;;AAEDT,WAAW,CAACiB,mBAAZ,GAAkC,aAAlC;AACAjB,WAAW,CAACkB,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useEffect, useState } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Sticky } from '../Sticky';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Modal.styles';\r\nimport { ModalContext } from './ModalContext';\r\n\r\nexport interface ModalFooterProps {\r\n  /**\r\n   * Включает серый цвет в футере\r\n   */\r\n  panel?: boolean;\r\n  sticky?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\n/**\r\n * Футер модального окна.\r\n *\r\n * @visibleName Modal.Footer\r\n */\r\nfunction ModalFooter(props: ModalFooterProps) {\r\n  const { sticky = true, panel, children } = props;\r\n  const theme = useContext(ThemeContext);\r\n  const [scrollbarWidth, setScrollBarWidth] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setScrollBarWidth(getScrollWidth());\r\n  }, []);\r\n\r\n  const renderContent = (fixed = false) => (\r\n    <div\r\n      className={cn({\r\n        [jsStyles.footer()]: true,\r\n        [jsStyles.panel(theme)]: Boolean(panel),\r\n        [jsStyles.fixedFooter(theme)]: fixed,\r\n      })}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <ZIndex style={{ position: 'relative' }} priority={'ModalFooter'}>\r\n      <ModalContext.Consumer>\r\n        {({ horizontalScroll }) => {\r\n          if (sticky) {\r\n            return (\r\n              <Sticky side=\"bottom\" offset={horizontalScroll ? scrollbarWidth : 0}>\r\n                {renderContent}\r\n              </Sticky>\r\n            );\r\n          }\r\n\r\n          return renderContent();\r\n        }}\r\n      </ModalContext.Consumer>\r\n    </ZIndex>\r\n  );\r\n}\r\n\r\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\r\nModalFooter.__MODAL_FOOTER__ = true;\r\n\r\nexport { ModalFooter };\r\n"]}
+{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooter","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","panel","children","setHasFooter","setHasPanel","renderContent","fixed","styles","footer","fixedFooter","Boolean","mobileFooter","footerWrapper","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"yEAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,8C;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAAqEL,KAArE,CAAQM,MAAR,CAAQA,MAAR,8BAAiBD,MAAM,CAACE,QAAP,GAAkB,KAAlB,GAA0B,IAA3C,iBAAiDC,KAAjD,GAAqER,KAArE,CAAiDQ,KAAjD,CAAwDC,QAAxD,GAAqET,KAArE,CAAwDS,QAAxD;;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,QAAA,SAAS,EAAE;AACRC,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,YAAP,CAAoBjB,KAApB,CAJQ,IAIqBI,MAAM,CAACE,QAJ5B,OADb;;;AAQGE,MAAAA,QARH,CADF;;;AAYD,GAbD;;AAeA;AACE,iCAAC,4BAAD,EAAmBT,KAAnB;AACE,iCAAC,cAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,EAAEc,cAAOK,aAAP,EAA5C;AACGb,IAAAA,MAAM;AACL,iCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEH,KAAK,CAACiB,gBAAN,GAAyB,qCAAzB,GAA4C,CAA1E;AACGR,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF,CADF;;;;;AAaD;;AAEDb,WAAW,CAACsB,mBAAZ,GAAkC,aAAlC;AACAtB,WAAW,CAACuB,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\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 ? false : true, 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        className={cx({\n          [styles.footer(theme)]: true,\n          [styles.fixedFooter(theme)]: fixed,\n          [styles.panel(theme)]: 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"]}

package/cjs/components/Modal/ModalHeader.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-export interface ModalHeaderProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalHeaderProps extends CommonProps {
     sticky?: boolean;
     children?: ReactNode;
 }
@@ -8,7 +9,7 @@ export interface ModalHeaderProps {
  *
  * @visibleName Modal.Header
  */
-declare function ModalHeader({ sticky, children }: ModalHeaderProps): JSX.Element;
+declare function ModalHeader(props: ModalHeaderProps): JSX.Element;
 declare namespace ModalHeader {
     var __KONTUR_REACT_UI__: string;
     var __MODAL_HEADER__: boolean;

package/cjs/components/Modal/ModalHeader.js

@@ -1,55 +1,61 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.ModalHeader = ModalHeader;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";exports.__esModule = true;exports.ModalHeader = ModalHeader;var _react = _interopRequireWildcard(require("react"));
 
 var _Sticky = require("../Sticky");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _ZIndex = require("../../internal/ZIndex");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../ResponsiveLayout");
 
 var _Modal = require("./Modal.styles");
 var _ModalClose = require("./ModalClose");
-var _ModalContext = require("./ModalContext");
+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;}
 
 
 
 
 
-/**
-                                                * Шапка модального окна
-                                                *
-                                                * @visibleName Modal.Header
-                                                */
-function ModalHeader(_ref) {var _ref$sticky = _ref.sticky,sticky = _ref$sticky === void 0 ? true : _ref$sticky,children = _ref.children;
+/**
+ * Шапка модального окна
+ *
+ * @visibleName Modal.Header
+ */
+function ModalHeader(props) {
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+  var modal = (0, _react.useContext)(_ModalContext.ModalContext);
+  var layout = (0, _ResponsiveLayout.useResponsiveLayout)();
 
-  var renderContent = function renderContent(close, additionalPadding) {return function (fixed) {var _cn;if (fixed === void 0) {fixed = false;}
-      return (
-        _react.default.createElement("div", {
-          className: (0, _classnames.default)((_cn = {}, _cn[
-          _Modal.jsStyles.header()] = true, _cn[
-          _Modal.jsStyles.fixedHeader(theme)] = fixed, _cn[
-          _Modal.jsStyles.headerAddPadding()] = Boolean(additionalPadding), _cn)) },
+  var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? layout.isMobile ? false : true : _props$sticky,children = props.children;
 
+  (0, _react.useEffect)(function () {
+    modal.setHasHeader == null ? void 0 : modal.setHasHeader();
 
-        close &&
-        _react.default.createElement("div", { className: _Modal.jsStyles.absoluteClose() },
-        _react.default.createElement(_ModalClose.ModalClose, { requestClose: close.requestClose, disableClose: close.disableClose })),
+    return function () {return modal.setHasHeader == null ? void 0 : modal.setHasHeader(false);};
+  }, []);
 
+  var renderContent = function renderContent(fixed) {var _cx;if (fixed === void 0) {fixed = false;}
+    return /*#__PURE__*/(
+      _react.default.createElement("div", {
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Modal.styles.header(theme)] = true, _cx[
+        _Modal.styles.mobileHeader(theme)] = layout.isMobile, _cx[
+        _Modal.styles.headerAddPadding()] = Boolean(modal.additionalPadding), _cx[
+        _Modal.styles.fixedHeader(theme)] = fixed, _cx[
+        _Modal.styles.mobileFixedHeader(theme)] = fixed && layout.isMobile, _cx[
+        _Modal.styles.headerWithClose(theme)] = Boolean(modal.close), _cx[
+        _Modal.styles.mobileHeaderWithClose(theme)] = layout.isMobile, _cx)) },
 
-        children));
 
+      modal.close && /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { requestClose: modal.close.requestClose, disableClose: modal.close.disableClose }),
+      children));
 
-    };};
 
-  return (
-    _react.default.createElement(_ZIndex.ZIndex, { style: { position: 'relative' }, priority: 'ModalHeader' },
-    _react.default.createElement(_ModalContext.ModalContext.Consumer, null,
-    function (_ref2) {var close = _ref2.close,additionalPadding = _ref2.additionalPadding;
-      if (sticky) {
-        return _react.default.createElement(_Sticky.Sticky, { side: "top" }, renderContent(close, additionalPadding));
-      }
+  };
 
-      return renderContent(close, additionalPadding)();
-    })));
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalHeader', className: _Modal.styles.headerWrapper() },
+    sticky ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, renderContent) : renderContent())));
 
 
 

package/cjs/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ModalHeader.tsx"],"names":["ModalHeader","sticky","children","theme","ThemeContext","renderContent","close","additionalPadding","fixed","jsStyles","header","fixedHeader","headerAddPadding","Boolean","absoluteClose","requestClose","disableClose","position","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"qPAAA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;;;;AAMA;;;;;AAKA,SAASA,WAAT,OAAoE,wBAA7CC,MAA6C,CAA7CA,MAA6C,4BAApC,IAAoC,eAA9BC,QAA8B,QAA9BA,QAA8B;AAClE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAqBC,iBAArB,UAAqD,UAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AAC5F;AACE;AACE,UAAA,SAAS,EAAE;AACRC,0BAASC,MAAT,EADQ,IACY,IADZ;AAERD,0BAASE,WAAT,CAAqBR,KAArB,CAFQ,IAEsBK,KAFtB;AAGRC,0BAASG,gBAAT,EAHQ,IAGsBC,OAAO,CAACN,iBAAD,CAH7B,OADb;;;AAOGD,QAAAA,KAAK;AACJ,8CAAK,SAAS,EAAEG,gBAASK,aAAT,EAAhB;AACE,qCAAC,sBAAD,IAAY,YAAY,EAAER,KAAK,CAACS,YAAhC,EAA8C,YAAY,EAAET,KAAK,CAACU,YAAlE,GADF,CARJ;;;AAYGd,QAAAA,QAZH,CADF;;;AAgBD,KAjBqB,EAAtB;;AAmBA;AACE,iCAAC,cAAD,IAAQ,KAAK,EAAE,EAAEe,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,iCAAC,0BAAD,CAAc,QAAd;AACG,qBAAkC,KAA/BX,KAA+B,SAA/BA,KAA+B,CAAxBC,iBAAwB,SAAxBA,iBAAwB;AACjC,UAAIN,MAAJ,EAAY;AACV,eAAO,6BAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,IAAoBI,aAAa,CAACC,KAAD,EAAQC,iBAAR,CAAjC,CAAP;AACD;;AAED,aAAOF,aAAa,CAACC,KAAD,EAAQC,iBAAR,CAAb,EAAP;AACD,KAPH,CADF,CADF;;;;AAaD;;AAEDP,WAAW,CAACkB,mBAAZ,GAAkC,aAAlC;AACAlB,WAAW,CAACmB,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Modal.styles';\r\nimport { ModalClose } from './ModalClose';\r\nimport { CloseProps, ModalContext } from './ModalContext';\r\n\r\nexport interface ModalHeaderProps {\r\n  sticky?: boolean;\r\n  children?: ReactNode;\r\n}\r\n/**\r\n * Шапка модального окна\r\n *\r\n * @visibleName Modal.Header\r\n */\r\nfunction ModalHeader({ sticky = true, children }: ModalHeaderProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  const renderContent = (close?: CloseProps, additionalPadding?: boolean) => (fixed = false) => {\r\n    return (\r\n      <div\r\n        className={cn({\r\n          [jsStyles.header()]: true,\r\n          [jsStyles.fixedHeader(theme)]: fixed,\r\n          [jsStyles.headerAddPadding()]: Boolean(additionalPadding),\r\n        })}\r\n      >\r\n        {close && (\r\n          <div className={jsStyles.absoluteClose()}>\r\n            <ModalClose requestClose={close.requestClose} disableClose={close.disableClose} />\r\n          </div>\r\n        )}\r\n        {children}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ZIndex style={{ position: 'relative' }} priority={'ModalHeader'}>\r\n      <ModalContext.Consumer>\r\n        {({ close, additionalPadding }) => {\r\n          if (sticky) {\r\n            return <Sticky side=\"top\">{renderContent(close, additionalPadding)}</Sticky>;\r\n          }\r\n\r\n          return renderContent(close, additionalPadding)();\r\n        }}\r\n      </ModalContext.Consumer>\r\n    </ZIndex>\r\n  );\r\n}\r\n\r\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\r\nModalHeader.__MODAL_HEADER__ = true;\r\n\r\nexport { ModalHeader };\r\n"]}
+{"version":3,"sources":["ModalHeader.tsx"],"names":["ModalHeader","props","theme","ThemeContext","modal","ModalContext","layout","sticky","isMobile","children","setHasHeader","renderContent","fixed","styles","header","mobileHeader","headerAddPadding","Boolean","additionalPadding","fixedHeader","mobileFixedHeader","headerWithClose","close","mobileHeaderWithClose","requestClose","disableClose","headerWrapper","__KONTUR_REACT_UI__","__MODAL_HEADER__"],"mappings":"yEAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,8C;;;;;;AAMA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAA8DL,KAA9D,CAAQM,MAAR,CAAQA,MAAR,8BAAiBD,MAAM,CAACE,QAAP,GAAkB,KAAlB,GAA0B,IAA3C,iBAAiDC,QAAjD,GAA8DR,KAA9D,CAAiDQ,QAAjD;;AAEA,wBAAU,YAAM;AACdL,IAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN;;AAEA,WAAO,oBAAMN,KAAK,CAACM,YAAZ,oBAAMN,KAAK,CAACM,YAAN,CAAqB,KAArB,CAAN,EAAP;AACD,GAJD,EAIG,EAJH;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,QAAA,SAAS,EAAE;AACRC,sBAAOC,MAAP,CAAcZ,KAAd,CADQ,IACe,IADf;AAERW,sBAAOE,YAAP,CAAoBb,KAApB,CAFQ,IAEqBI,MAAM,CAACE,QAF5B;AAGRK,sBAAOG,gBAAP,EAHQ,IAGoBC,OAAO,CAACb,KAAK,CAACc,iBAAP,CAH3B;AAIRL,sBAAOM,WAAP,CAAmBjB,KAAnB,CAJQ,IAIoBU,KAJpB;AAKRC,sBAAOO,iBAAP,CAAyBlB,KAAzB,CALQ,IAK0BU,KAAK,IAAIN,MAAM,CAACE,QAL1C;AAMRK,sBAAOQ,eAAP,CAAuBnB,KAAvB,CANQ,IAMwBe,OAAO,CAACb,KAAK,CAACkB,KAAP,CAN/B;AAORT,sBAAOU,qBAAP,CAA6BrB,KAA7B,CAPQ,IAO8BI,MAAM,CAACE,QAPrC,OADb;;;AAWGJ,MAAAA,KAAK,CAACkB,KAAN,iBAAe,6BAAC,sBAAD,IAAY,YAAY,EAAElB,KAAK,CAACkB,KAAN,CAAYE,YAAtC,EAAoD,YAAY,EAAEpB,KAAK,CAACkB,KAAN,CAAYG,YAA9E,GAXlB;AAYGhB,MAAAA,QAZH,CADF;;;AAgBD,GAjBD;;AAmBA;AACE,iCAAC,4BAAD,EAAmBR,KAAnB;AACE,iCAAC,cAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,EAAEY,cAAOa,aAAP,EAA5C;AACGnB,IAAAA,MAAM,gBAAG,6BAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,IAAoBI,aAApB,CAAH,GAAiDA,aAAa,EADvE,CADF,CADF;;;;AAOD;;AAEDX,WAAW,CAAC2B,mBAAZ,GAAkC,aAAlC;AACA3B,WAAW,CAAC4B,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useEffect } from 'react';\n\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 { ModalClose } from './ModalClose';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalHeaderProps extends CommonProps {\n  sticky?: boolean;\n  children?: ReactNode;\n}\n/**\n * Шапка модального окна\n *\n * @visibleName Modal.Header\n */\nfunction ModalHeader(props: ModalHeaderProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = layout.isMobile ? false : true, children } = props;\n\n  useEffect(() => {\n    modal.setHasHeader?.();\n\n    return () => modal.setHasHeader?.(false);\n  }, []);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div\n        className={cx({\n          [styles.header(theme)]: true,\n          [styles.mobileHeader(theme)]: layout.isMobile,\n          [styles.headerAddPadding()]: Boolean(modal.additionalPadding),\n          [styles.fixedHeader(theme)]: fixed,\n          [styles.mobileFixedHeader(theme)]: fixed && layout.isMobile,\n          [styles.headerWithClose(theme)]: Boolean(modal.close),\n          [styles.mobileHeaderWithClose(theme)]: layout.isMobile,\n        })}\n      >\n        {modal.close && <ModalClose requestClose={modal.close.requestClose} disableClose={modal.close.disableClose} />}\n        {children}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      <ZIndex priority={'ModalHeader'} className={styles.headerWrapper()}>\n        {sticky ? <Sticky side=\"top\">{renderContent}</Sticky> : renderContent()}\n      </ZIndex>\n    </CommonWrapper>\n  );\n}\n\nModalHeader.__KONTUR_REACT_UI__ = 'ModalHeader';\nModalHeader.__MODAL_HEADER__ = true;\n\nexport { ModalHeader };\n"]}

package/cjs/components/Modal/index.js

@@ -1,4 +1,4 @@
-"use strict";exports.__esModule = true;var _Modal = require("./Modal");Object.keys(_Modal).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Modal[key];});
-var _ModalHeader = require("./ModalHeader");Object.keys(_ModalHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _ModalHeader[key];});
-var _ModalBody = require("./ModalBody");Object.keys(_ModalBody).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _ModalBody[key];});
-var _ModalFooter = require("./ModalFooter");Object.keys(_ModalFooter).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _ModalFooter[key];});
+"use strict";exports.__esModule = true;var _Modal = require("./Modal");Object.keys(_Modal).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Modal[key]) return;exports[key] = _Modal[key];});
+var _ModalHeader = require("./ModalHeader");Object.keys(_ModalHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ModalHeader[key]) return;exports[key] = _ModalHeader[key];});
+var _ModalBody = require("./ModalBody");Object.keys(_ModalBody).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ModalBody[key]) return;exports[key] = _ModalBody[key];});
+var _ModalFooter = require("./ModalFooter");Object.keys(_ModalFooter).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ModalFooter[key]) return;exports[key] = _ModalFooter[key];});

package/cjs/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA;AACA;AACA","sourcesContent":["export * from './Modal';\r\nexport * from './ModalHeader';\r\nexport * from './ModalBody';\r\nexport * from './ModalFooter';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA;AACA;AACA;AACA","sourcesContent":["export * from './Modal';\nexport * from './ModalHeader';\nexport * from './ModalBody';\nexport * from './ModalFooter';\n"]}

package/cjs/components/Paging/NavigationHelper.d.ts

@@ -4,4 +4,4 @@ export interface KeyDescriptionType {
     checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;
 }
 export declare const getKeyName: () => string;
-export declare const checkKeyPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;
+export declare const checkKeyPressed: (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) => boolean;

package/cjs/components/Paging/NavigationHelper.js

@@ -1,4 +1,4 @@
-"use strict";exports.__esModule = true;exports.checkKeyPressed = exports.getKeyName = void 0;
+"use strict";exports.__esModule = true;exports.getKeyName = exports.checkKeyPressed = void 0;
 
 
 
@@ -23,4 +23,5 @@ var createKeyDescription = function createKeyDescription() {return (
 
 
 var getKeyName = function getKeyName() {return getKeyDescription().name;};exports.getKeyName = getKeyName;
-var checkKeyPressed = function checkKeyPressed(event) {return getKeyDescription().checkPressed(event);};exports.checkKeyPressed = checkKeyPressed;
+var checkKeyPressed = function checkKeyPressed(event) {return (
+    getKeyDescription().checkPressed(event));};exports.checkKeyPressed = checkKeyPressed;

package/cjs/components/Paging/NavigationHelper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["NavigationHelper.tsx"],"names":["keyDescription","getKeyDescription","createKeyDescription","navigator","platform","includes","name","checkPressed","event","altKey","ctrlKey","getKeyName","checkKeyPressed"],"mappings":";;;;;;;;;AASA,IAAIA,cAA4C,GAAG,IAAnD;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,WAAMD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,EAA1C,CAApB,EAA1B;;AAEA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB;AAC3BC,IAAAA,SAAS,CAACC,QAAV,CAAmBC,QAAnB,CAA4B,KAA5B;AACI;AACEC,MAAAA,IAAI,EAAE,KADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACC,MAAnE,EAFhB,EADJ;;AAKI;AACEH,MAAAA,IAAI,EAAE,MADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACE,OAAnE,EAFhB,EANuB,GAA7B;;;AAWO,IAAMC,UAAU,GAAG,SAAbA,UAAa,WAAMV,iBAAiB,GAAGK,IAA1B,EAAnB,C;AACA,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACJ,KAAD,UAA6DP,iBAAiB,GAAGM,YAApB,CAAiCC,KAAjC,CAA7D,EAAxB,C","sourcesContent":["import React from 'react';\r\n\r\nimport { Nullable } from '../../typings/utility-types';\r\n\r\nexport interface KeyDescriptionType {\r\n  name: string;\r\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\r\n}\r\n\r\nlet keyDescription: Nullable<KeyDescriptionType> = null;\r\n\r\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\r\n\r\nconst createKeyDescription = () =>\r\n  navigator.platform.includes('Mac')\r\n    ? {\r\n        name: 'Alt',\r\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\r\n      }\r\n    : {\r\n        name: 'Ctrl',\r\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\r\n      };\r\n\r\nexport const getKeyName = () => getKeyDescription().name;\r\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) => getKeyDescription().checkPressed(event);\r\n"]}
+{"version":3,"sources":["NavigationHelper.tsx"],"names":["keyDescription","getKeyDescription","createKeyDescription","navigator","platform","includes","name","checkPressed","event","altKey","ctrlKey","getKeyName","checkKeyPressed"],"mappings":";;;;;;;;;AASA,IAAIA,cAA4C,GAAG,IAAnD;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,WAAMD,cAAc,KAAKA,cAAc,GAAGE,oBAAoB,EAA1C,CAApB,EAA1B;;AAEA,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB;AAC3BC,IAAAA,SAAS,CAACC,QAAV,CAAmBC,QAAnB,CAA4B,KAA5B;AACI;AACEC,MAAAA,IAAI,EAAE,KADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACC,MAAnE,EAFhB,EADJ;;AAKI;AACEH,MAAAA,IAAI,EAAE,MADR;AAEEC,MAAAA,YAAY,EAAE,sBAACC,KAAD,UAA6DA,KAAK,CAACE,OAAnE,EAFhB,EANuB,GAA7B;;;AAWO,IAAMC,UAAU,GAAG,SAAbA,UAAa,WAAMV,iBAAiB,GAAGK,IAA1B,EAAnB,C;AACA,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACJ,KAAD;AAC7BP,IAAAA,iBAAiB,GAAGM,YAApB,CAAiCC,KAAjC,CAD6B,GAAxB,C","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface KeyDescriptionType {\n  name: string;\n  checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => boolean;\n}\n\nlet keyDescription: Nullable<KeyDescriptionType> = null;\n\nconst getKeyDescription = () => keyDescription || (keyDescription = createKeyDescription());\n\nconst createKeyDescription = () =>\n  navigator.platform.includes('Mac')\n    ? {\n        name: 'Alt',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.altKey,\n      }\n    : {\n        name: 'Ctrl',\n        checkPressed: (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => event.ctrlKey,\n      };\n\nexport const getKeyName = () => getKeyDescription().name;\nexport const checkKeyPressed = (event: KeyboardEvent | React.KeyboardEvent<HTMLElement>) =>\n  getKeyDescription().checkPressed(event);\n"]}

package/cjs/components/Paging/Paging.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 interface ItemComponentProps {
     active: boolean;
     children?: React.ReactNode;
@@ -8,7 +9,7 @@ interface ItemComponentProps {
     pageNumber: number | 'forward';
     tabIndex: number;
 }
-export interface PagingProps {
+export interface PagingProps extends CommonProps {
     activePage: number;
     /**
      * Компонент обертки по умолчанию
@@ -39,13 +40,15 @@ export interface PagingState {
     keyboardControl: boolean;
 }
 export declare type ItemType = number | '.' | 'forward';
-export declare class Paging extends React.Component<PagingProps, PagingState> {
+export declare class Paging extends React.PureComponent<PagingProps, PagingState> {
     static __KONTUR_REACT_UI__: string;
     static defaultProps: {
         component: ({ className, onClick, children }: any) => JSX.Element;
         useGlobalListener: boolean;
+        "data-tid": string;
     };
     static propTypes: {};
+    private setRootNode;
     static isForward(pageNumber: number | 'forward'): boolean;
     state: PagingState;
     private theme;
@@ -53,7 +56,6 @@ export declare class Paging extends React.Component<PagingProps, PagingState> {
     private addedGlobalListener;
     private container;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: PagingProps): void;
     componentDidUpdate(prevProps: PagingProps): void;
     componentWillUnmount(): void;
     render(): JSX.Element;