@skbkontur/react-ui 0.0.0-444dd4e7b3 → 0.0.0-48840c3b9c

package/components/MiniModal/MiniModalBody/MiniModalBody.js

@@ -3,8 +3,9 @@ var _excluded = ["children"];
 import React from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { Modal } from "../../Modal";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { MiniModalDataTids } from "../MiniModal";
-import { styles } from "../MiniModal.styles";
+import { getStyles } from "../MiniModal.styles";
 /**
  * Обёртка над Modal.Body
  *
@@ -15,9 +16,12 @@ export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_ref, re
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Modal.Body, rest, /*#__PURE__*/React.createElement("div", {
-    "data-tid": MiniModalDataTids.description,
-    ref: ref,
-    className: styles.description()
-  }, children));
+  return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+    var styles = getStyles(emotion);
+    return /*#__PURE__*/React.createElement(Modal.Body, rest, /*#__PURE__*/React.createElement("div", {
+      "data-tid": MiniModalDataTids.description,
+      ref: ref,
+      className: styles.description()
+    }, children));
+  });
 });

package/components/MiniModal/MiniModalBody/MiniModalBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MiniModalBody.tsx"],"names":["React","forwardRefAndName","Modal","MiniModalDataTids","styles","MiniModalBody","ref","children","rest","description"],"mappings":"iIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,KAAT,QAAsC,UAAtC;;AAEA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,MAAT,QAAuB,oBAAvB;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGJ,iBAAiB;AAC5C,eAD4C;AAE5C,gBAAwBK,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,wBAAC,KAAD,CAAO,IAAP,EAAgBA,IAAhB;AACE,iCAAK,YAAUL,iBAAiB,CAACM,WAAjC,EAA8C,GAAG,EAAEH,GAAnD,EAAwD,SAAS,EAAEF,MAAM,CAACK,WAAP,EAAnE;AACGF,IAAAA,QADH,CADF,CADF;;;;AAOD,CAV2C,CAAvC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { styles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    return (\n      <Modal.Body {...rest}>\n        <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n          {children}\n        </div>\n      </Modal.Body>\n    );\n  },\n);\n"]}
+{"version":3,"sources":["MiniModalBody.tsx"],"names":["React","forwardRefAndName","Modal","EmotionConsumer","MiniModalDataTids","getStyles","MiniModalBody","ref","children","rest","emotion","styles","description"],"mappings":"iIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,KAAT,QAAsC,UAAtC;AACA,SAASC,eAAT,QAAgC,2BAAhC;;AAEA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGL,iBAAiB;AAC5C,eAD4C;AAE5C,gBAAwBM,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,wBAAC,eAAD;AACG,cAACC,OAAD,EAAa;AACZ,UAAMC,MAAM,GAAGN,SAAS,CAACK,OAAD,CAAxB;AACA;AACE,4BAAC,KAAD,CAAO,IAAP,EAAgBD,IAAhB;AACE,qCAAK,YAAUL,iBAAiB,CAACQ,WAAjC,EAA8C,GAAG,EAAEL,GAAnD,EAAwD,SAAS,EAAEI,MAAM,CAACC,WAAP,EAAnE;AACGJ,QAAAA,QADH,CADF,CADF;;;;AAOD,KAVH,CADF;;;AAcD,CAjB2C,CAAvC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { getStyles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <Modal.Body {...rest}>\n              <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n                {children}\n              </div>\n            </Modal.Body>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalFooter/MiniModalFooter.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["direction", "children"];
-import React, { useContext } from 'react';
+import React from 'react';
 import { Modal } from "../../Modal";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
-import { cx } from "../../../lib/theming/Emotion";
-import { styles } from "../MiniModal.styles";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 /**
  * Обёртка над Modal.Footer
@@ -20,16 +20,18 @@ export var MiniModalFooter = forwardRefAndName('MiniModalFooter', function (_ref
       children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var theme = useContext(ThemeContext);
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
   var childrenCount = React.Children.count(children);
 
   var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction; // IE11 does not support CSS property `gap`
 
 
-  var IE11FallbackClasses = isIE11 && cx(_direction === 'row' && styles.actionsRowIE11Fallback(theme), _direction === 'column' && styles.actionsColumnIE11Fallback(theme));
+  var IE11FallbackClasses = isIE11 && emotion.cx(_direction === 'row' && styles.actionsRowIE11Fallback(theme), _direction === 'column' && styles.actionsColumnIE11Fallback(theme));
   return /*#__PURE__*/React.createElement(Modal.Footer, rest, /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-tid": MiniModalDataTids.actions,
-    className: cx(styles.actions(theme), _direction === 'row' && styles.actionsRow(), _direction === 'column' && styles.actionsColumn(), IE11FallbackClasses)
+    className: emotion.cx(styles.actions(theme), _direction === 'row' && styles.actionsRow(), _direction === 'column' && styles.actionsColumn(), IE11FallbackClasses)
   }, children));
 });

package/components/MiniModal/MiniModalFooter/MiniModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MiniModalFooter.tsx"],"names":["React","useContext","Modal","forwardRefAndName","ThemeContext","isIE11","cx","styles","MiniModalDataTids","MiniModalFooter","ref","direction","children","rest","theme","childrenCount","Children","count","_direction","IE11FallbackClasses","actionsRowIE11Fallback","actionsColumnIE11Fallback","actions","actionsRow","actionsColumn"],"mappings":"8IAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA2CO,GAA3C,EAAmD,2BAAhDC,SAAgD,CAAhDA,SAAgD,+BAApC,KAAoC,kBAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AACjD,MAAMC,KAAK,GAAGb,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMW,aAAa,GAAGf,KAAK,CAACgB,QAAN,CAAeC,KAAf,CAAqBL,QAArB,CAAtB;AACA,MAAMM,UAAU,GAAGH,aAAa,GAAG,CAAhB,IAAqBA,aAAa,KAAK,CAAvC,GAA2C,QAA3C,GAAsDJ,SAAzE;;AAEA;AACA,MAAMQ,mBAAmB;AACvBd,EAAAA,MAAM;AACNC,EAAAA,EAAE;AACAY,EAAAA,UAAU,KAAK,KAAf,IAAwBX,MAAM,CAACa,sBAAP,CAA8BN,KAA9B,CADxB;AAEAI,EAAAA,UAAU,KAAK,QAAf,IAA2BX,MAAM,CAACc,yBAAP,CAAiCP,KAAjC,CAF3B,CAFJ;;;AAOA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBD,IAAlB;AACE;AACE,MAAA,GAAG,EAAEH,GADP;AAEE,kBAAUF,iBAAiB,CAACc,OAF9B;AAGE,MAAA,SAAS,EAAEhB,EAAE;AACXC,MAAAA,MAAM,CAACe,OAAP,CAAeR,KAAf,CADW;AAEXI,MAAAA,UAAU,KAAK,KAAf,IAAwBX,MAAM,CAACgB,UAAP,EAFb;AAGXL,MAAAA,UAAU,KAAK,QAAf,IAA2BX,MAAM,CAACiB,aAAP,EAHhB;AAIXL,MAAAA,mBAJW,CAHf;;;AAUGP,IAAAA,QAVH,CADF,CADF;;;;AAgBD,CAhC6C,CAAzC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Modal, ModalFooterProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isIE11 } from '../../lib/client';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /**\n   * Направление позиционирования кнопок.\n   * `row` работает только для 2 элементов,\n   * в других случаях автоматически включиться `column`.\n   *\n   * @default row\n   */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    // IE11 does not support CSS property `gap`\n    const IE11FallbackClasses =\n      isIE11 &&\n      cx(\n        _direction === 'row' && styles.actionsRowIE11Fallback(theme),\n        _direction === 'column' && styles.actionsColumnIE11Fallback(theme),\n      );\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions(theme),\n            _direction === 'row' && styles.actionsRow(),\n            _direction === 'column' && styles.actionsColumn(),\n            IE11FallbackClasses,\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"]}
+{"version":3,"sources":["MiniModalFooter.tsx"],"names":["React","Modal","forwardRefAndName","isIE11","useEmotion","useTheme","getStyles","MiniModalDataTids","MiniModalFooter","ref","direction","children","rest","theme","emotion","styles","childrenCount","Children","count","_direction","IE11FallbackClasses","cx","actionsRowIE11Fallback","actionsColumnIE11Fallback","actions","actionsRow","actionsColumn"],"mappings":"8IAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,QAAT,QAAyB,4BAAzB;;AAEA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA2CO,GAA3C,EAAmD,2BAAhDC,SAAgD,CAAhDA,SAAgD,+BAApC,KAAoC,kBAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AACjD,MAAMC,KAAK,GAAGR,QAAQ,EAAtB;AACA,MAAMS,OAAO,GAAGV,UAAU,EAA1B;AACA,MAAMW,MAAM,GAAGT,SAAS,CAACQ,OAAD,CAAxB;;AAEA,MAAME,aAAa,GAAGhB,KAAK,CAACiB,QAAN,CAAeC,KAAf,CAAqBP,QAArB,CAAtB;AACA,MAAMQ,UAAU,GAAGH,aAAa,GAAG,CAAhB,IAAqBA,aAAa,KAAK,CAAvC,GAA2C,QAA3C,GAAsDN,SAAzE;;AAEA;AACA,MAAMU,mBAAmB;AACvBjB,EAAAA,MAAM;AACNW,EAAAA,OAAO,CAACO,EAAR;AACEF,EAAAA,UAAU,KAAK,KAAf,IAAwBJ,MAAM,CAACO,sBAAP,CAA8BT,KAA9B,CAD1B;AAEEM,EAAAA,UAAU,KAAK,QAAf,IAA2BJ,MAAM,CAACQ,yBAAP,CAAiCV,KAAjC,CAF7B,CAFF;;;AAOA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBD,IAAlB;AACE;AACE,MAAA,GAAG,EAAEH,GADP;AAEE,kBAAUF,iBAAiB,CAACiB,OAF9B;AAGE,MAAA,SAAS,EAAEV,OAAO,CAACO,EAAR;AACTN,MAAAA,MAAM,CAACS,OAAP,CAAeX,KAAf,CADS;AAETM,MAAAA,UAAU,KAAK,KAAf,IAAwBJ,MAAM,CAACU,UAAP,EAFf;AAGTN,MAAAA,UAAU,KAAK,QAAf,IAA2BJ,MAAM,CAACW,aAAP,EAHlB;AAITN,MAAAA,mBAJS,CAHb;;;AAUGT,IAAAA,QAVH,CADF,CADF;;;;AAgBD,CAlC6C,CAAzC","sourcesContent":["import React from 'react';\n\nimport { Modal, ModalFooterProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { isIE11 } from '../../lib/client';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /**\n   * Направление позиционирования кнопок.\n   * `row` работает только для 2 элементов,\n   * в других случаях автоматически включиться `column`.\n   *\n   * @default row\n   */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const theme = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    // IE11 does not support CSS property `gap`\n    const IE11FallbackClasses =\n      isIE11 &&\n      emotion.cx(\n        _direction === 'row' && styles.actionsRowIE11Fallback(theme),\n        _direction === 'column' && styles.actionsColumnIE11Fallback(theme),\n      );\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={emotion.cx(\n            styles.actions(theme),\n            _direction === 'row' && styles.actionsRow(),\n            _direction === 'column' && styles.actionsColumn(),\n            IE11FallbackClasses,\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalHeader/MiniModalHeader.js

@@ -1,12 +1,12 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["icon", "children"];
-import React, { useContext } from 'react';
+import React from 'react';
 import { Modal } from "../../Modal";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
 import { InfoCircleIcon64Regular } from "../../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { cx } from "../../../lib/theming/Emotion";
-import { styles } from "../MiniModal.styles";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { getStyles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 /**
  * Обёртка над Modal.Header
@@ -20,7 +20,9 @@ export var MiniModalHeader = forwardRefAndName('MiniModalHeader', function (_ref
       children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var theme = useContext(ThemeContext);
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement(Modal.Header, rest, /*#__PURE__*/React.createElement("div", {
     ref: ref
   }, icon && /*#__PURE__*/React.createElement("div", {
@@ -28,6 +30,6 @@ export var MiniModalHeader = forwardRefAndName('MiniModalHeader', function (_ref
     className: styles.icon()
   }, icon), children && /*#__PURE__*/React.createElement("div", {
     "data-tid": MiniModalDataTids.title,
-    className: cx(styles.title(), icon && styles.titleWithIcon(theme))
+    className: emotion.cx(styles.title(), icon && styles.titleWithIcon(theme))
   }, children)));
 });

package/components/MiniModal/MiniModalHeader/MiniModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MiniModalHeader.tsx"],"names":["React","useContext","Modal","forwardRefAndName","InfoCircleIcon64Regular","ThemeContext","cx","styles","MiniModalDataTids","MiniModalHeader","ref","icon","children","rest","theme","title","titleWithIcon"],"mappings":"yIAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA4DO,GAA5D,EAAoE,sBAAjEC,IAAiE,CAAjEA,IAAiE,uCAA1D,oBAAC,uBAAD,OAA0D,aAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAClE,MAAMC,KAAK,GAAGb,UAAU,CAACI,YAAD,CAAxB;;AAEA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBQ,IAAlB;AACE,iCAAK,GAAG,EAAEH,GAAV;AACGC,IAAAA,IAAI;AACH,iCAAK,YAAUH,iBAAiB,CAACG,IAAjC,EAAuC,SAAS,EAAEJ,MAAM,CAACI,IAAP,EAAlD;AACGA,IAAAA,IADH,CAFJ;;;AAMGC,IAAAA,QAAQ;AACP,iCAAK,YAAUJ,iBAAiB,CAACO,KAAjC,EAAwC,SAAS,EAAET,EAAE,CAACC,MAAM,CAACQ,KAAP,EAAD,EAAiBJ,IAAI,IAAIJ,MAAM,CAACS,aAAP,CAAqBF,KAArB,CAAzB,CAArD;AACGF,IAAAA,QADH,CAPJ,CADF,CADF;;;;;;AAgBD,CArB6C,CAAzC","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { Modal, ModalHeaderProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /**\n   * Пиктограмма в шапке компонента.\n   *\n   * @default InfoCircleIcon64Regular\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <Modal.Header {...rest}>\n        <div ref={ref}>\n          {icon && (\n            <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n              {icon}\n            </div>\n          )}\n          {children && (\n            <div data-tid={MiniModalDataTids.title} className={cx(styles.title(), icon && styles.titleWithIcon(theme))}>\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"]}
+{"version":3,"sources":["MiniModalHeader.tsx"],"names":["React","Modal","forwardRefAndName","InfoCircleIcon64Regular","useTheme","useEmotion","getStyles","MiniModalDataTids","MiniModalHeader","ref","icon","children","rest","theme","emotion","styles","title","cx","titleWithIcon"],"mappings":"yIAAA,OAAOA,KAAP,MAAiC,OAAjC;;AAEA,SAASC,KAAT,QAAwC,UAAxC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,uBAAT,QAAwC,iEAAxC;AACA,SAASC,QAAT,QAAyB,4BAAzB;AACA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,iBAAT,QAAkC,aAAlC;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAA4DO,GAA5D,EAAoE,sBAAjEC,IAAiE,CAAjEA,IAAiE,uCAA1D,oBAAC,uBAAD,OAA0D,aAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAClE,MAAMC,KAAK,GAAGT,QAAQ,EAAtB;AACA,MAAMU,OAAO,GAAGT,UAAU,EAA1B;AACA,MAAMU,MAAM,GAAGT,SAAS,CAACQ,OAAD,CAAxB;;AAEA;AACE,wBAAC,KAAD,CAAO,MAAP,EAAkBF,IAAlB;AACE,iCAAK,GAAG,EAAEH,GAAV;AACGC,IAAAA,IAAI;AACH,iCAAK,YAAUH,iBAAiB,CAACG,IAAjC,EAAuC,SAAS,EAAEK,MAAM,CAACL,IAAP,EAAlD;AACGA,IAAAA,IADH,CAFJ;;;AAMGC,IAAAA,QAAQ;AACP;AACE,kBAAUJ,iBAAiB,CAACS,KAD9B;AAEE,MAAA,SAAS,EAAEF,OAAO,CAACG,EAAR,CAAWF,MAAM,CAACC,KAAP,EAAX,EAA2BN,IAAI,IAAIK,MAAM,CAACG,aAAP,CAAqBL,KAArB,CAAnC,CAFb;;AAIGF,IAAAA,QAJH,CAPJ,CADF,CADF;;;;;;AAmBD,CA1B6C,CAAzC","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { Modal, ModalHeaderProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /**\n   * Пиктограмма в шапке компонента.\n   *\n   * @default InfoCircleIcon64Regular\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n    const theme = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\n\n    return (\n      <Modal.Header {...rest}>\n        <div ref={ref}>\n          {icon && (\n            <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n              {icon}\n            </div>\n          )}\n          {children && (\n            <div\n              data-tid={MiniModalDataTids.title}\n              className={emotion.cx(styles.title(), icon && styles.titleWithIcon(theme))}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalIndent/MiniModalIndent.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["children"];
-import React, { useContext } from 'react';
+import React from 'react';
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { cx } from "../../../lib/theming/Emotion";
+import { useEmotion } from "../../../lib/theming/Emotion";
 import { isIE11 } from "../../../lib/client";
-import { styles } from "../MiniModal.styles";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../MiniModal.styles";
 import { MiniModalDataTids } from "../MiniModal";
 /**
  * Отступ между кнопками
@@ -18,10 +18,12 @@ export var MiniModalIndent = forwardRefAndName('MiniModalIndent', function (_ref
   var children = _ref.children,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var theme = useContext(ThemeContext);
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-tid": MiniModalDataTids.indent,
     ref: ref,
-    className: cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))
+    className: emotion.cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))
   }, rest));
 });

package/components/MiniModal/MiniModalIndent/MiniModalIndent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MiniModalIndent.tsx"],"names":["React","useContext","forwardRefAndName","ThemeContext","cx","isIE11","styles","MiniModalDataTids","MiniModalIndent","ref","children","rest","theme","indent","actionsIndent","actionsIndentIE11Fallback"],"mappings":"2LAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,MAAT,QAAuB,kBAAvB;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,iBAAT,QAAkC,aAAlC;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAAwBO,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B,MAAMC,KAAK,GAAGX,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,kBAAUI,iBAAiB,CAACM,MAD9B;AAEE,MAAA,GAAG,EAAEJ,GAFP;AAGE,MAAA,SAAS,EAAEL,EAAE,CAAC,CAACC,MAAD,GAAUC,MAAM,CAACQ,aAAP,CAAqBF,KAArB,CAAV,GAAwCN,MAAM,CAACS,yBAAP,CAAiCH,KAAjC,CAAzC,CAHf;AAIMD,IAAAA,IAJN,EADF;;;AAQD,CAb6C,CAAzC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, unknown>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <div\n        data-tid={MiniModalDataTids.indent}\n        ref={ref}\n        className={cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))}\n        {...rest}\n      />\n    );\n  },\n);\n"]}
+{"version":3,"sources":["MiniModalIndent.tsx"],"names":["React","forwardRefAndName","useEmotion","isIE11","useTheme","getStyles","MiniModalDataTids","MiniModalIndent","ref","children","rest","theme","emotion","styles","indent","cx","actionsIndent","actionsIndentIE11Fallback"],"mappings":"2LAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,UAAT,QAA2B,2BAA3B;AACA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,QAAT,QAAyB,4BAAzB;;AAEA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,iBAAT,QAAkC,aAAlC;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,eAAe,GAAGN,iBAAiB;AAC9C,iBAD8C;AAE9C,gBAAwBO,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B,MAAMC,KAAK,GAAGP,QAAQ,EAAtB;AACA,MAAMQ,OAAO,GAAGV,UAAU,EAA1B;AACA,MAAMW,MAAM,GAAGR,SAAS,CAACO,OAAD,CAAxB;;AAEA;AACE;AACE,kBAAUN,iBAAiB,CAACQ,MAD9B;AAEE,MAAA,GAAG,EAAEN,GAFP;AAGE,MAAA,SAAS,EAAEI,OAAO,CAACG,EAAR,CAAW,CAACZ,MAAD,GAAUU,MAAM,CAACG,aAAP,CAAqBL,KAArB,CAAV,GAAwCE,MAAM,CAACI,yBAAP,CAAiCN,KAAjC,CAAnD,CAHb;AAIMD,IAAAA,IAJN,EADF;;;AAQD,CAf6C,CAAzC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, unknown>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const theme = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\n\n    return (\n      <div\n        data-tid={MiniModalDataTids.indent}\n        ref={ref}\n        className={emotion.cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))}\n        {...rest}\n      />\n    );\n  },\n);\n"]}

package/components/Modal/Modal/Modal.js

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

package/components/Modal/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","globalObject","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","createPropsGetter","ResponsiveLayout","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","styles","getModalTheme","mountedModalsCount","ModalDataTids","container","content","close","Modal","getProps","defaultProps","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","throttledCheckHorizontalScroll","handleResize","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","root","bg","isMobile","containerMobile","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","Component","__KONTUR_REACT_UI__","Header","Body","Footer"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { styles } from './Modal.styles';\nimport { getModalTheme } from './getModalTheme';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps\n  extends CommonProps,\n    Pick<HTMLAttributes<unknown>, 'role'>,\n    Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия модалки\n   */\n  disableClose?: boolean;\n\n  /**\n   * Выравнивание окна по верху страницы.\n   */\n  alignTop?: boolean;\n\n  /**\n   * Не закрывать окно при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Не показывать крестик для закрытия окна.\n   */\n  noClose?: boolean;\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Не использовать фокус-лок внутри модалки.\n   * По умолчанию true для IE11.\n   */\n  disableFocusLock?: boolean;\n\n  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n}\n\nexport interface ModalState {\n  stackPosition: number;\n  hasBackground: boolean;\n  horizontalScroll: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n  container: 'modal-container',\n  content: 'modal-content',\n  close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;\n\n/**\n * Модальное окно\n *\n * Содержит в себе три компоненты: **Modal.Header**,\n * **Modal.Body** и **Modal.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n *\n * Для отключения прилипания шапки и футера\n * в соответствующий компонент нужно передать\n * проп **sticky** со значением **false**\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n  public static __KONTUR_REACT_UI__ = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps: DefaultProps = {\n    // NOTE: в ie нормально не работает\n    disableFocusLock: isIE11,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(Modal.defaultProps);\n\n  public state: ModalState = {\n    stackPosition: 0,\n    hasBackground: true,\n    horizontalScroll: false,\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private containerNode: HTMLDivElement | null = null;\n  private mouseDownTarget: EventTarget | null = null;\n  private mouseUpTarget: EventTarget | null = null;\n\n  public componentDidMount() {\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n    if (mountedModalsCount === 0) {\n      globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.checkHorizontalScrollAppearance();\n\n    if (this.containerNode) {\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (--mountedModalsCount === 0) {\n      globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getModalTheme(theme, this.props.theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      alignTop,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n    } = this.props;\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n    const { role, disableFocusLock } = this.getProps();\n\n    const modalContextProps: ModalContextProps = {\n      hasHeader,\n      horizontalScroll: this.state.horizontalScroll,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n    if (!noClose) {\n      modalContextProps.close = {\n        disableClose,\n        requestClose: this.requestClose,\n      };\n    }\n    if (!hasFooter) {\n      modalContextProps.additionalPadding = true;\n    }\n    if (hasFooter && hasPanel) {\n      modalContextProps.additionalPadding = true;\n    }\n\n    const style: { width?: number | string } = {};\n    const containerStyle: { width?: number | string } = {};\n\n    if (width) {\n      style.width = width;\n    } else {\n      containerStyle.width = 'auto';\n    }\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <ZIndex priority={'Modal'} className={styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && (\n              <div\n                onMouseDown={this.handleContainerMouseDown}\n                onMouseUp={this.handleContainerMouseUp}\n                onClick={this.handleContainerClick}\n                className={styles.bg(this.theme)}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={cx(styles.container(), isMobile && styles.containerMobile(this.theme))}\n                  onMouseDown={this.handleContainerMouseDown}\n                  onMouseUp={this.handleContainerMouseUp}\n                  onClick={this.handleContainerClick}\n                  data-tid={ModalDataTids.container}\n                >\n                  <div\n                    aria-modal\n                    aria-label={ariaLabel}\n                    role={role}\n                    className={cx({\n                      [styles.centerContainer()]: true,\n                      [styles.mobileCenterContainer()]: isMobile,\n                      [styles.alignTop()]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n                      style={isMobile ? undefined : style}\n                    >\n                      <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                        <FocusLock\n                          disabled={disableFocusLock}\n                          autoFocus={false}\n                          className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                        >\n                          {!hasHeader && !noClose && (\n                            <ZIndex\n                              className={cx({\n                                [styles.closeWrapper(this.theme)]: true,\n                                [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                              })}\n                            >\n                              <ModalClose\n                                className={cx({\n                                  [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n                                })}\n                                requestClose={this.requestClose}\n                                disableClose={disableClose}\n                              />\n                            </ZIndex>\n                          )}\n                          <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n                        </FocusLock>\n                      </ResizeDetector>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </ResponsiveLayout>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","globalObject","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","isIE11","CommonWrapper","EmotionConsumer","createPropsGetter","ResponsiveLayout","ThemeContext","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","getStyles","getModalTheme","mountedModalsCount","ModalDataTids","container","content","close","Modal","getProps","defaultProps","state","stackPosition","hasBackground","horizontalScroll","hasHeader","hasFooter","hasPanel","stackSubscription","containerNode","mouseDownTarget","mouseUpTarget","requestClose","props","disableClose","onClose","refContainer","center","handleStackChange","stack","setState","indexOf","isBlocking","handleContainerMouseDown","event","target","handleContainerMouseUp","handleContainerClick","ignoreBackgroundClick","currentTarget","handleKeyDown","e","checkHorizontalScrollAppearance","hasScroll","containerClientWidth","clientWidth","containerScrollWidth","scrollWidth","throttledCheckHorizontalScroll","handleResize","emit","setHasHeader","setHasFooter","setHasPanel","componentDidMount","add","addEventListener","componentWillUnmount","removeEventListener","remove","render","emotion","theme","renderMain","noClose","width","alignTop","children","ariaLabel","ariaLabelledby","role","disableFocusLock","modalContextProps","additionalPadding","style","containerStyle","styles","root","bg","isMobile","cx","containerMobile","centerContainer","mobileCenterContainer","Boolean","undefined","window","mobileWindow","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","Component","__KONTUR_REACT_UI__","displayName","Header","Body","Footer"],"mappings":"4JAAA,OAAOA,KAAP,MAAsD,OAAtD;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,SAASC,YAAT,QAA6B,0BAA7B;;;AAGA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,WAAT,QAA4B,uCAA5B;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,eAAT,QAAgC,kCAAhC;AACA,SAASC,sBAAT,QAAuC,uCAAvC;AACA,SAASC,UAAT,QAAmD,sBAAnD;AACA,SAASC,cAAT,QAA+B,+BAA/B;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,YAAT,QAAgD,gBAAhD;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,SAAT,QAA0B,gBAA1B;AACA,SAASC,aAAT,QAA8B,iBAA9B;;AAEA,IAAIC,kBAAkB,GAAG,CAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,OAAO,IAAMC,aAAa,GAAG;AAC3BC,EAAAA,SAAS,EAAE,iBADgB;AAE3BC,EAAAA,OAAO,EAAE,eAFkB;AAG3BC,EAAAA,KAAK,EAAE,aAHoB,EAAtB;;;;;AAQP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAaC,KAAb;;;;;;;;;;;;;;AAcUC,IAAAA,QAdV,GAcqBhB,iBAAiB,CAACe,KAAK,CAACE,YAAP,CAdtC;;AAgBSC,IAAAA,KAhBT,GAgB6B;AACzBC,MAAAA,aAAa,EAAE,CADU;AAEzBC,MAAAA,aAAa,EAAE,IAFU;AAGzBC,MAAAA,gBAAgB,EAAE,KAHO;AAIzBC,MAAAA,SAAS,EAAE,KAJc;AAKzBC,MAAAA,SAAS,EAAE,KALc;AAMzBC,MAAAA,QAAQ,EAAE,KANe,EAhB7B;;;;;AA2BUC,IAAAA,iBA3BV,GA2B6D,IA3B7D;AA4BUC,IAAAA,aA5BV,GA4BiD,IA5BjD;AA6BUC,IAAAA,eA7BV,GA6BgD,IA7BhD;AA8BUC,IAAAA,aA9BV,GA8B8C,IA9B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiNUC,IAAAA,YAjNV,GAiNyB,YAAM;AAC3B,UAAI,MAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKD,KAAL,CAAWE,OAAf,EAAwB;AACtB,cAAKF,KAAL,CAAWE,OAAX;AACD;AACF,KAxNH;;AA0NUC,IAAAA,YA1NV,GA0NyB,UAACC,MAAD,EAAmC;AACxD,YAAKR,aAAL,GAAqBQ,MAArB;AACD,KA5NH;;AA8NUC,IAAAA,iBA9NV,GA8N8B,UAACC,KAAD,EAAuC;AACjE,YAAKC,QAAL,CAAc,EAAElB,aAAa,EAAEiB,KAAK,CAACE,OAAN,+BAAjB,EAAsClB,aAAa,EAAEzB,UAAU,CAAC4C,UAAX,+BAArD,EAAd;AACD,KAhOH;;AAkOUC,IAAAA,wBAlOV,GAkOqC,UAACC,KAAD,EAA6B;AAC9D,YAAKd,eAAL,GAAuBc,KAAK,CAACC,MAA7B;AACD,KApOH;;AAsOUC,IAAAA,sBAtOV,GAsOmC,UAACF,KAAD,EAA6B;AAC5D,YAAKb,aAAL,GAAqBa,KAAK,CAACC,MAA3B;AACD,KAxOH;;AA0OUE,IAAAA,oBA1OV,GA0OiC,UAACH,KAAD,EAA6C;AAC1E,UAAI,CAAC,MAAKX,KAAL,CAAWe,qBAAhB,EAAuC;AACrC,YAAQH,MAAR,GAAkCD,KAAlC,CAAQC,MAAR,CAAgBI,aAAhB,GAAkCL,KAAlC,CAAgBK,aAAhB;AACA,YAAIJ,MAAM,KAAKI,aAAX,IAA4B,MAAKnB,eAAL,KAAyBmB,aAArD,IAAsE,MAAKlB,aAAL,KAAuBkB,aAAjG,EAAgH;AAC9G,gBAAKjB,YAAL;AACD;AACF;AACF,KAjPH;;AAmPUkB,IAAAA,aAnPV,GAmP0B,UAACC,CAAD,EAAsB;AAC5C,UAAI,MAAK9B,KAAL,CAAWC,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAI9B,WAAW,CAAC2D,CAAD,CAAf,EAAoB;AAClBvD,QAAAA,eAAe,CAACuD,CAAD,CAAf;AACA,cAAKnB,YAAL;AACD;AACF,KA3PH;;AA6PUoB,IAAAA,+BA7PV,GA6P4C,YAAM;AAC9C,UAAIC,SAAS,GAAG,KAAhB;;AAEA,UAAI,MAAKxB,aAAT,EAAwB;AACtB,YAAMyB,oBAAoB,GAAG,MAAKzB,aAAL,CAAmB0B,WAAhD;AACA,YAAMC,oBAAoB,GAAG,MAAK3B,aAAL,CAAmB4B,WAAhD;AACAJ,QAAAA,SAAS,GAAGC,oBAAoB,GAAGE,oBAAnC;AACD;AACD,UAAIH,SAAS,IAAI,CAAC,MAAKhC,KAAL,CAAWG,gBAA7B,EAA+C;AAC7C,cAAKgB,QAAL,CAAc,EAAEhB,gBAAgB,EAAE,IAApB,EAAd;AACD,OAFD,MAEO,IAAI,MAAKH,KAAL,CAAWG,gBAAf,EAAiC;AACtC,cAAKgB,QAAL,CAAc,EAAEhB,gBAAgB,EAAE,KAApB,EAAd;AACD;AACF,KA1QH;;AA4QUkC,IAAAA,8BA5QV,GA4Q2CrE,QAAQ,CAAC,MAAK+D,+BAAN,EAAuC,GAAvC,CA5QnD;;AA8QUO,IAAAA,YA9QV,GA8QyB,YAAM;AAC3BlE,MAAAA,YAAY,CAACmE,IAAb;AACD,KAhRH;;AAkRUC,IAAAA,YAlRV,GAkRyB,UAACpC,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKJ,KAAL,CAAWI,SAAX,KAAyBA,SAAzB,IAAsC,MAAKe,QAAL,CAAc,EAAEf,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KApRH;;AAsRUqC,IAAAA,YAtRV,GAsRyB,UAACpC,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKL,KAAL,CAAWK,SAAX,KAAyBA,SAAzB,IAAsC,MAAKc,QAAL,CAAc,EAAEd,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,KAxRH;;AA0RUqC,IAAAA,WA1RV,GA0RwB,UAACpC,QAAD,EAAsB,KAArBA,QAAqB,cAArBA,QAAqB,GAAV,KAAU;AAC1C,YAAKN,KAAL,CAAWM,QAAX,KAAwBA,QAAxB,IAAoC,MAAKa,QAAL,CAAc,EAAEb,QAAQ,EAARA,QAAF,EAAd,CAApC;AACD,KA5RH,mDAgCSqC,iBAhCT,GAgCE,6BAA2B,CACzB,KAAKpC,iBAAL,GAAyB9B,UAAU,CAACmE,GAAX,CAAe,IAAf,EAAqB,KAAK3B,iBAA1B,CAAzB,CAEA,IAAIzB,kBAAkB,KAAK,CAA3B,EAA8B,CAC5BvB,YAAY,CAAC4E,gBAAb,oBAAA5E,YAAY,CAAC4E,gBAAb,CAAgC,QAAhC,EAA0C,KAAKR,8BAA/C,EACD,CAED7C,kBAAkB,GAClBvB,YAAY,CAAC4E,gBAAb,oBAAA5E,YAAY,CAAC4E,gBAAb,CAAgC,SAAhC,EAA2C,KAAKhB,aAAhD,EACA,KAAKE,+BAAL,GAEA,IAAI,KAAKvB,aAAT,EAAwB,CACtB,KAAKA,aAAL,CAAmBqC,gBAAnB,CAAoC,QAApC,EAA8CzE,YAAY,CAACmE,IAA3D,EACD,CACF,CA9CH,QAgDSO,oBAhDT,GAgDE,gCAA8B,CAC5B,IAAI,EAAEtD,kBAAF,KAAyB,CAA7B,EAAgC,CAC9BvB,YAAY,CAAC8E,mBAAb,oBAAA9E,YAAY,CAAC8E,mBAAb,CAAmC,QAAnC,EAA6C,KAAKV,8BAAlD,EACAjE,YAAY,CAACmE,IAAb,GACD,CAEDtE,YAAY,CAAC8E,mBAAb,oBAAA9E,YAAY,CAAC8E,mBAAb,CAAmC,SAAnC,EAA8C,KAAKlB,aAAnD,EACA,IAAI3D,aAAa,CAAC,KAAKqC,iBAAN,CAAjB,EAA2C,CACzC,KAAKA,iBAAL,CAAuByC,MAAvB,GACD,CACDvE,UAAU,CAACuE,MAAX,CAAkB,IAAlB,EAEA,IAAI,KAAKxC,aAAT,EAAwB,CACtB,KAAKA,aAAL,CAAmBuC,mBAAnB,CAAuC,QAAvC,EAAiD3E,YAAY,CAACmE,IAA9D,EACD,CACF,CA/DH,QAiESU,MAjET,GAiEE,kBAA6B,mBAC3B,oBACE,oBAAC,eAAD,QACG,UAACC,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa5D,aAAa,CAAC4D,KAAD,EAAQ,MAAI,CAACvC,KAAL,CAAWuC,KAAnB,CAA1B,CACA,oBAAO,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACC,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,CAXH,CADF,CAeD,CAjFH,QAmFUA,UAnFV,GAmFE,sBAAqB,mBACnB,kBAQI,KAAKxC,KART,CACEyC,OADF,eACEA,OADF,CAEExC,YAFF,eAEEA,YAFF,CAGEyC,KAHF,eAGEA,KAHF,CAIEC,QAJF,eAIEA,QAJF,CAKEC,QALF,eAKEA,QALF,CAMgBC,SANhB,eAME,YANF,EAOqBC,cAPrB,eAOE,iBAPF,EASA,kBAA2C,KAAK1D,KAAhD,CAAQI,SAAR,eAAQA,SAAR,CAAmBC,SAAnB,eAAmBA,SAAnB,CAA8BC,QAA9B,eAA8BA,QAA9B,CACA,qBAAmC,KAAKR,QAAL,EAAnC,CAAQ6D,IAAR,kBAAQA,IAAR,CAAcC,gBAAd,kBAAcA,gBAAd,CAEA,IAAMC,iBAAoC,GAAG,EAC3CzD,SAAS,EAATA,SAD2C,EAE3CD,gBAAgB,EAAE,KAAKH,KAAL,CAAWG,gBAFc,EAG3CqC,YAAY,EAAE,KAAKA,YAHwB,EAI3CC,YAAY,EAAE,KAAKA,YAJwB,EAK3CC,WAAW,EAAE,KAAKA,WALyB,EAA7C,CAOA,IAAI,CAACW,OAAL,EAAc,CACZQ,iBAAiB,CAACjE,KAAlB,GAA0B,EACxBiB,YAAY,EAAZA,YADwB,EAExBF,YAAY,EAAE,KAAKA,YAFK,EAA1B,CAID,CACD,IAAI,CAACN,SAAL,EAAgB,CACdwD,iBAAiB,CAACC,iBAAlB,GAAsC,IAAtC,CACD,CACD,IAAIzD,SAAS,IAAIC,QAAjB,EAA2B,CACzBuD,iBAAiB,CAACC,iBAAlB,GAAsC,IAAtC,CACD,CAED,IAAMC,KAAkC,GAAG,EAA3C,CACA,IAAMC,cAA2C,GAAG,EAApD,CAEA,IAAIV,KAAJ,EAAW,CACTS,KAAK,CAACT,KAAN,GAAcA,KAAd,CACD,CAFD,MAEO,CACLU,cAAc,CAACV,KAAf,GAAuB,MAAvB,CACD,CAED,IAAMW,MAAM,GAAG3E,SAAS,CAAC,KAAK4D,OAAN,CAAxB,CAEA,oBACE,oBAAC,eAAD,qBACE,oBAAC,aAAD,EAAmB,KAAKtC,KAAxB,eACE,oBAAC,MAAD,IAAQ,QAAQ,EAAE,OAAlB,EAA2B,SAAS,EAAEqD,MAAM,CAACC,IAAP,EAAtC,iBACE,oBAAC,sBAAD,OADF,EAEG,KAAKlE,KAAL,CAAWE,aAAX,iBACC,6BACE,WAAW,EAAE,KAAKoB,wBADpB,EAEE,SAAS,EAAE,KAAKG,sBAFlB,EAGE,OAAO,EAAE,KAAKC,oBAHhB,EAIE,SAAS,EAAEuC,MAAM,CAACE,EAAP,CAAU,KAAKhB,KAAf,CAJb,GAHJ,eAUE,oBAAC,gBAAD,QACG,2HAAGiB,QAAH,QAAGA,QAAH,qBACC,6BACE,mBAAiBV,cADnB,EAEE,GAAG,EAAE,MAAI,CAAC3C,YAFZ,EAGE,SAAS,EAAE,MAAI,CAACmC,OAAL,CAAamB,EAAb,CAAgBJ,MAAM,CAACvE,SAAP,EAAhB,EAAoC0E,QAAQ,IAAIH,MAAM,CAACK,eAAP,CAAuB,MAAI,CAACnB,KAA5B,CAAhD,CAHb,EAIE,WAAW,EAAE,MAAI,CAAC7B,wBAJpB,EAKE,SAAS,EAAE,MAAI,CAACG,sBALlB,EAME,OAAO,EAAE,MAAI,CAACC,oBANhB,EAOE,YAAUjC,aAAa,CAACC,SAP1B,iBASE,6BACE,kBADF,EAEE,cAAY+D,SAFd,EAGE,IAAI,EAAEE,IAHR,EAIE,SAAS,EAAE,MAAI,CAACT,OAAL,CAAamB,EAAb,4CACRJ,MAAM,CAACM,eAAP,EADQ,IACmB,IADnB,oBAERN,MAAM,CAACO,qBAAP,EAFQ,IAEyBJ,QAFzB,oBAGRH,MAAM,CAACV,QAAP,EAHQ,IAGYkB,OAAO,CAAClB,QAAD,CAHnB,qBAJb,EASE,KAAK,EAAEa,QAAQ,GAAGM,SAAH,GAAeV,cAThC,EAUE,YAAUvE,aAAa,CAACE,OAV1B,iBAYE,6BACE,SAAS,EAAE,MAAI,CAACuD,OAAL,CAAamB,EAAb,8CACRJ,MAAM,CAACU,MAAP,CAAc,MAAI,CAACxB,KAAnB,CADQ,IACoB,IADpB,qBAERc,MAAM,CAACW,YAAP,EAFQ,IAEgBR,QAFhB,sBADb,EAKE,KAAK,EAAEA,QAAQ,GAAGM,SAAH,GAAeX,KALhC,iBAOE,oBAAC,cAAD,IAAgB,QAAQ,EAAE,MAAI,CAACzB,YAA/B,EAA6C,UAAU,EAAE8B,QAAzD,iBACE,oBAAC,SAAD,IACE,QAAQ,EAAER,gBADZ,EAEE,SAAS,EAAE,KAFb,EAGE,SAAS,EAAE,MAAI,CAACV,OAAL,CAAamB,EAAb,8CACNJ,MAAM,CAACY,mBAAP,EADM,IACyBT,QADzB,uBAET,sBAFS,CAHb,IAQG,CAAChE,SAAD,IAAc,CAACiD,OAAf,iBACC,oBAAC,MAAD,IACE,SAAS,EAAE,MAAI,CAACH,OAAL,CAAamB,EAAb,8CACRJ,MAAM,CAACa,YAAP,CAAoB,MAAI,CAAC3B,KAAzB,CADQ,IAC0B,IAD1B,qBAERc,MAAM,CAACc,kBAAP,CAA0B,MAAI,CAAC5B,KAA/B,CAFQ,IAEgCiB,QAFhC,sBADb,iBAME,oBAAC,UAAD,IACE,SAAS,EAAE,MAAI,CAAClB,OAAL,CAAamB,EAAb,8CACRJ,MAAM,CAACe,wBAAP,EADQ,IAC4BZ,QAAQ,IAAI,CAAC,MAAI,CAACpE,KAAL,CAAWI,SADpD,sBADb,EAIE,YAAY,EAAE,MAAI,CAACO,YAJrB,EAKE,YAAY,EAAEE,YALhB,GANF,CATJ,eAwBE,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAEgD,iBAA9B,IAAkDL,QAAlD,CAxBF,CADF,CAPF,CAZF,CATF,CADD,EADH,CAVF,CADF,CADF,CADF,CAgFD,CA/MH,gBAA2B1F,KAAK,CAACmH,SAAjC,EAAapF,K,CACGqF,mB,GAAsB,O,CADzBrF,K,CAEGsF,W,GAAc,O,CAFjBtF,K,CAIGuF,M,GAASjG,W,CAJZU,K,CAKGwF,I,GAAOjG,S,CALVS,K,CAMGyF,M,GAASpG,W,CANZW,K,CAQGE,Y,GAA6B,EACzC;AACA6D,EAAAA,gBAAgB,EAAEjF,MAFuB,EAGzCgF,IAAI,EAAE,QAHmC,E","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { getStyles } from './Modal.styles';\nimport { getModalTheme } from './getModalTheme';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps\n  extends CommonProps,\n    Pick<HTMLAttributes<unknown>, 'role'>,\n    Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия модалки\n   */\n  disableClose?: boolean;\n\n  /**\n   * Выравнивание окна по верху страницы.\n   */\n  alignTop?: boolean;\n\n  /**\n   * Не закрывать окно при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Не показывать крестик для закрытия окна.\n   */\n  noClose?: boolean;\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Не использовать фокус-лок внутри модалки.\n   * По умолчанию true для IE11.\n   */\n  disableFocusLock?: boolean;\n\n  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n}\n\nexport interface ModalState {\n  stackPosition: number;\n  hasBackground: boolean;\n  horizontalScroll: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n  container: 'modal-container',\n  content: 'modal-content',\n  close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;\n\n/**\n * Модальное окно\n *\n * Содержит в себе три компоненты: **Modal.Header**,\n * **Modal.Body** и **Modal.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n *\n * Для отключения прилипания шапки и футера\n * в соответствующий компонент нужно передать\n * проп **sticky** со значением **false**\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n  public static __KONTUR_REACT_UI__ = 'Modal';\n  public static displayName = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps: DefaultProps = {\n    // NOTE: в ie нормально не работает\n    disableFocusLock: isIE11,\n    role: 'dialog',\n  };\n\n  private getProps = createPropsGetter(Modal.defaultProps);\n\n  public state: ModalState = {\n    stackPosition: 0,\n    hasBackground: true,\n    horizontalScroll: false,\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private containerNode: HTMLDivElement | null = null;\n  private mouseDownTarget: EventTarget | null = null;\n  private mouseUpTarget: EventTarget | null = null;\n\n  public componentDidMount() {\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n    if (mountedModalsCount === 0) {\n      globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.checkHorizontalScrollAppearance();\n\n    if (this.containerNode) {\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (--mountedModalsCount === 0) {\n      globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = getModalTheme(theme, this.props.theme);\n                return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      alignTop,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n    } = this.props;\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n    const { role, disableFocusLock } = this.getProps();\n\n    const modalContextProps: ModalContextProps = {\n      hasHeader,\n      horizontalScroll: this.state.horizontalScroll,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n    if (!noClose) {\n      modalContextProps.close = {\n        disableClose,\n        requestClose: this.requestClose,\n      };\n    }\n    if (!hasFooter) {\n      modalContextProps.additionalPadding = true;\n    }\n    if (hasFooter && hasPanel) {\n      modalContextProps.additionalPadding = true;\n    }\n\n    const style: { width?: number | string } = {};\n    const containerStyle: { width?: number | string } = {};\n\n    if (width) {\n      style.width = width;\n    } else {\n      containerStyle.width = 'auto';\n    }\n\n    const styles = getStyles(this.emotion);\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <ZIndex priority={'Modal'} className={styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && (\n              <div\n                onMouseDown={this.handleContainerMouseDown}\n                onMouseUp={this.handleContainerMouseUp}\n                onClick={this.handleContainerClick}\n                className={styles.bg(this.theme)}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={this.emotion.cx(styles.container(), isMobile && styles.containerMobile(this.theme))}\n                  onMouseDown={this.handleContainerMouseDown}\n                  onMouseUp={this.handleContainerMouseUp}\n                  onClick={this.handleContainerClick}\n                  data-tid={ModalDataTids.container}\n                >\n                  <div\n                    aria-modal\n                    aria-label={ariaLabel}\n                    role={role}\n                    className={this.emotion.cx({\n                      [styles.centerContainer()]: true,\n                      [styles.mobileCenterContainer()]: isMobile,\n                      [styles.alignTop()]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={this.emotion.cx({\n                        [styles.window(this.theme)]: true,\n                        [styles.mobileWindow()]: isMobile,\n                      })}\n                      style={isMobile ? undefined : style}\n                    >\n                      <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                        <FocusLock\n                          disabled={disableFocusLock}\n                          autoFocus={false}\n                          className={this.emotion.cx(\n                            { [styles.columnFlexContainer()]: isMobile },\n                            'focus-lock-container',\n                          )}\n                        >\n                          {!hasHeader && !noClose && (\n                            <ZIndex\n                              className={this.emotion.cx({\n                                [styles.closeWrapper(this.theme)]: true,\n                                [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                              })}\n                            >\n                              <ModalClose\n                                className={this.emotion.cx({\n                                  [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n                                })}\n                                requestClose={this.requestClose}\n                                disableClose={disableClose}\n                              />\n                            </ZIndex>\n                          )}\n                          <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n                        </FocusLock>\n                      </ResizeDetector>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </ResponsiveLayout>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}

package/components/Modal/Modal.d.ts

@@ -68,6 +68,7 @@ declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role
  */
 export declare class Modal extends React.Component<ModalProps, ModalState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static Header: typeof ModalHeader;
     static Body: typeof ModalBody;
     static Footer: typeof ModalFooter;
@@ -75,6 +76,7 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private getProps;
     state: ModalState;
     private theme;
+    private emotion;
     private stackSubscription;
     private containerNode;
     private mouseDownTarget;