@skbkontur/react-ui 6.4.7-9ac75.0 → 6.4.7

package/components/MiniModal/MiniModal.styles.js

@@ -0,0 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+import { globalClasses as buttonGlobalClasses } from '../Button/Button.styles.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        icon: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      text-align: center;\n    "], ["\n      text-align: center;\n    "])));
+        },
+        description: function (t) {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      text-align: center;\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      text-align: center;\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.miniModalDescriptionFontSize, t.miniModalDescriptionLineHeight);
+        },
+        title: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      text-align: center;\n    "], ["\n      text-align: center;\n    "])));
+        },
+        titleWithIcon: function (t) {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      margin-top: ", ";\n    "], ["\n      margin-top: ", ";\n    "])), t.miniModalTitleMarginTop);
+        },
+        actions: function () {
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n\n      .", " {\n        width: 100%;\n      }\n    "], ["\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n\n      .", " {\n        width: 100%;\n      }\n    "])), buttonGlobalClasses.root);
+        },
+        actionsIndent: function (t) {
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding: ", " 0;\n    "], ["\n      padding: ", " 0;\n    "])), t.miniModalCancelIndent);
+        },
+        actionsRow: function (t) {
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      flex-direction: row;\n      > *:nth-of-type(1) {\n        margin-right: calc(", " / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(", " / 2);\n      }\n    "], ["\n      flex-direction: row;\n      > *:nth-of-type(1) {\n        margin-right: calc(", " / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(", " / 2);\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+        },
+        actionsColumn: function (t) {
+            return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      flex-direction: column;\n      > *:nth-of-type(2) {\n        margin-top: ", ";\n      }\n      > *:nth-of-type(3) {\n        margin-top: ", ";\n      }\n    "], ["\n      flex-direction: column;\n      > *:nth-of-type(2) {\n        margin-top: ", ";\n      }\n      > *:nth-of-type(3) {\n        margin-top: ", ";\n      }\n    "])), t.miniModalActionGap, t.miniModalActionGap);
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=MiniModal.styles.js.map

package/components/MiniModal/MiniModal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniModal.styles.js","sourceRoot":"","sources":["MiniModal.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,aAAa,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAElF,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,IAAI;YACF,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,WAAW,YAAC,CAAQ;YAClB,OAAO,GAAG,wJAAA,gDAEK,EAA8B,wBAC5B,EAAgC,SAChD,KAFc,CAAC,CAAC,4BAA4B,EAC5B,CAAC,CAAC,8BAA8B,EAC/C;QACJ,CAAC;QAED,KAAK;YACH,OAAO,GAAG,sGAAA,mCAET,KAAC;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,oGAAA,sBACM,EAAyB,SACxC,KADe,CAAC,CAAC,uBAAuB,EACvC;QACJ,CAAC;QAED,OAAO;YACL,OAAO,GAAG,6MAAA,+FAKL,EAAwB,yCAG5B,KAHI,mBAAmB,CAAC,IAAI,EAG3B;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,mGAAA,mBACG,EAAuB,WACnC,KADY,CAAC,CAAC,qBAAqB,EAClC;QACJ,CAAC;QAED,UAAU,YAAC,CAAQ;YACjB,OAAO,GAAG,8PAAA,uFAGe,EAAoB,yEAGrB,EAAoB,uBAE3C,KALwB,CAAC,CAAC,kBAAkB,EAGrB,CAAC,CAAC,kBAAkB,EAE1C;QACJ,CAAC;QAED,aAAa,YAAC,CAAQ;YACpB,OAAO,GAAG,0OAAA,mFAGQ,EAAoB,8DAGpB,EAAoB,kBAErC,KALiB,CAAC,CAAC,kBAAkB,EAGpB,CAAC,CAAC,kBAAkB,EAEpC;QACJ,CAAC;KACF,CAAC;AApE8D,CAoE9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  icon() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  description(t: Theme) {\n    return css`\n      text-align: center;\n      font-size: ${t.miniModalDescriptionFontSize};\n      line-height: ${t.miniModalDescriptionLineHeight};\n    `;\n  },\n\n  title() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  titleWithIcon(t: Theme) {\n    return css`\n      margin-top: ${t.miniModalTitleMarginTop};\n    `;\n  },\n\n  actions() {\n    return css`\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n\n      .${buttonGlobalClasses.root} {\n        width: 100%;\n      }\n    `;\n  },\n\n  actionsIndent(t: Theme) {\n    return css`\n      padding: ${t.miniModalCancelIndent} 0;\n    `;\n  },\n\n  actionsRow(t: Theme) {\n    return css`\n      flex-direction: row;\n      > *:nth-of-type(1) {\n        margin-right: calc(${t.miniModalActionGap} / 2);\n      }\n      > *:nth-of-type(2) {\n        margin-left: calc(${t.miniModalActionGap} / 2);\n      }\n    `;\n  },\n\n  actionsColumn(t: Theme) {\n    return css`\n      flex-direction: column;\n      > *:nth-of-type(2) {\n        margin-top: ${t.miniModalActionGap};\n      }\n      > *:nth-of-type(3) {\n        margin-top: ${t.miniModalActionGap};\n      }\n    `;\n  },\n}));\n"]}

package/components/MiniModal/MiniModalBody.js

@@ -22,8 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Modal } from '../Modal/index.js';
-import { styles } from './MiniModal.css.js';
+import { getStyles } from './MiniModal.styles.js';
 import { MiniModalDataTids } from './tids.js';
 /**
  * Текстовый блок пояснения в мини-модалке.
@@ -32,7 +34,11 @@ import { MiniModalDataTids } from './tids.js';
  */
 export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_a, ref) {
     var children = _a.children, rest = __rest(_a, ["children"]);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     return (React.createElement(Modal.Body, __assign({}, rest),
-        React.createElement("div", { "data-tid": MiniModalDataTids.description, ref: ref, className: styles.description }, children)));
+        React.createElement(ThemeContext.Consumer, null, function (theme) {
+            return (React.createElement("div", { "data-tid": MiniModalDataTids.description, ref: ref, className: cx(styles.description(theme)) }, children));
+        })));
 });
 //# sourceMappingURL=MiniModalBody.js.map

package/components/MiniModal/MiniModalBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniModalBody.js","sourceRoot":"","sources":["MiniModalBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,iBAAiB,CAC5C,eAAe,EACf,UAAC,EAAqB,EAAE,GAAG;IAAxB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAClB,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,IAAI;QAClB,yCAAe,iBAAiB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAClF,QAAQ,CACL,CACK,CACd,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalBodyProps } from '../Modal/index.js';\nimport { styles } from './MiniModal.css.js';\nimport { MiniModalDataTids } from './tids.js';\n\n/**\n * Текстовый блок пояснения в мини-модалке.\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,"file":"MiniModalBody.js","sourceRoot":"","sources":["MiniModalBody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,iBAAiB,CAC5C,eAAe,EACf,UAAC,EAAqB,EAAE,GAAG;IAAxB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IACV,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,IAAI;QAClB,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,OAAO,CACL,yCAAe,iBAAiB,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,IAC7F,QAAQ,CACL,CACP,CAAC;QACJ,CAAC,CACqB,CACb,CACd,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalBodyProps } from '../Modal/index.js';\nimport { getStyles } from './MiniModal.styles.js';\nimport { MiniModalDataTids } from './tids.js';\n\n/**\n * Текстовый блок пояснения в мини-модалке.\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n\n    return (\n      <Modal.Body {...rest}>\n        <ThemeContext.Consumer>\n          {(theme) => {\n            return (\n              <div data-tid={MiniModalDataTids.description} ref={ref} className={cx(styles.description(theme))}>\n                {children}\n              </div>\n            );\n          }}\n        </ThemeContext.Consumer>\n      </Modal.Body>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalFooter.js

@@ -20,11 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
-import { cx } from '../../lib/cx.js';
+import React, { useContext } from 'react';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Modal } from '../Modal/index.js';
-import { styles } from './MiniModal.css.js';
+import { getStyles } from './MiniModal.styles.js';
 import { MiniModalDataTids } from './tids.js';
 /**
  * Футер мини-модалки: зона действий с раскладкой кнопок.
@@ -33,9 +34,12 @@ import { MiniModalDataTids } from './tids.js';
  */
 export var MiniModalFooter = forwardRefAndName('MiniModalFooter', function (_a, ref) {
     var _b = _a.direction, direction = _b === void 0 ? 'row' : _b, children = _a.children, rest = __rest(_a, ["direction", "children"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     var childrenCount = React.Children.count(children);
     var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;
     return (React.createElement(Modal.Footer, __assign({}, rest),
-        React.createElement("div", { ref: ref, "data-tid": MiniModalDataTids.actions, className: cx(styles.actions, _direction === 'row' && styles.actionsRow, _direction === 'column' && styles.actionsColumn) }, children)));
+        React.createElement("div", { ref: ref, "data-tid": MiniModalDataTids.actions, className: cx(styles.actions(), _direction === 'row' && styles.actionsRow(theme), _direction === 'column' && styles.actionsColumn(theme)) }, children)));
 });
 //# sourceMappingURL=MiniModalFooter.js.map

package/components/MiniModal/MiniModalFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniModalFooter.js","sourceRoot":"","sources":["MiniModalFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQ9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAwC,EAAE,GAAG;IAA3C,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtC,yBAAwC,CAAF;IACrC,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAM,UAAU,GAAG,aAAa,GAAG,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,OAAO,CACL,oBAAC,KAAK,CAAC,MAAM,eAAK,IAAI;QACpB,6BACE,GAAG,EAAE,GAAG,cACE,iBAAiB,CAAC,OAAO,EACnC,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,OAAO,EACd,UAAU,KAAK,KAAK,IAAI,MAAM,CAAC,UAAU,EACzC,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC,aAAa,CAChD,IAEA,QAAQ,CACL,CACO,CAChB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { cx } from '../../lib/cx.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalFooterProps } from '../Modal/index.js';\nimport { styles } from './MiniModal.css.js';\nimport { MiniModalDataTids } from './tids.js';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /** Задает направление позиционирования кнопок. `row` работает только для 2 элементов, в других случаях автоматически включиться `column`.\n   * @default row */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Футер мини-модалки: зона действий с раскладкой кнопок.\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions,\n            _direction === 'row' && styles.actionsRow,\n            _direction === 'column' && styles.actionsColumn,\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"]}
+{"version":3,"file":"MiniModalFooter.js","sourceRoot":"","sources":["MiniModalFooter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQ9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAwC,EAAE,GAAG;IAA3C,IAAA,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtC,yBAAwC,CAAF;IACrC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,IAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAM,UAAU,GAAG,aAAa,GAAG,CAAC,IAAI,aAAa,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEnF,OAAO,CACL,oBAAC,KAAK,CAAC,MAAM,eAAK,IAAI;QACpB,6BACE,GAAG,EAAE,GAAG,cACE,iBAAiB,CAAC,OAAO,EACnC,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,OAAO,EAAE,EAChB,UAAU,KAAK,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,EAChD,UAAU,KAAK,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CACvD,IAEA,QAAQ,CACL,CACO,CAChB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalFooterProps } from '../Modal/index.js';\nimport { getStyles } from './MiniModal.styles.js';\nimport { MiniModalDataTids } from './tids.js';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /** Задает направление позиционирования кнопок. `row` работает только для 2 элементов, в других случаях автоматически включиться `column`.\n   * @default row */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Футер мини-модалки: зона действий с раскладкой кнопок.\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    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions(),\n            _direction === 'row' && styles.actionsRow(theme),\n            _direction === 'column' && styles.actionsColumn(theme),\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalHeader.js

@@ -20,12 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useContext } from 'react';
 import { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.js';
-import { cx } from '../../lib/cx.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { Modal } from '../Modal/index.js';
-import { styles } from './MiniModal.css.js';
+import { getStyles } from './MiniModal.styles.js';
 import { MiniModalDataTids } from './tids.js';
 /**
  * Шапка мини-модалки: заголовок и опциональная иконка.
@@ -35,11 +36,14 @@ import { MiniModalDataTids } from './tids.js';
 export var MiniModalHeader = forwardRefAndName('MiniModalHeader', function (_a, ref) {
     var _b;
     var _c = _a.icon, icon = _c === void 0 ? React.createElement(InfoCircleIcon64Regular, null) : _c, children = _a.children, rest = __rest(_a, ["icon", "children"]);
+    var theme = useContext(ThemeContext);
+    var cx = useEmotion().cx;
+    var styles = useStyles(getStyles);
     return (React.createElement(Modal.Header, __assign({}, rest),
         React.createElement("div", { ref: ref },
-            icon && (React.createElement("div", { "data-tid": MiniModalDataTids.icon, className: styles.icon }, icon)),
-            children && (React.createElement("div", { "data-tid": MiniModalDataTids.title, className: cx(styles.title, (_b = {},
-                    _b[styles.titleWithIcon] = !!icon,
+            icon && (React.createElement("div", { "data-tid": MiniModalDataTids.icon, className: styles.icon() }, icon)),
+            children && (React.createElement("div", { "data-tid": MiniModalDataTids.title, className: cx(styles.title(), (_b = {},
+                    _b[styles.titleWithIcon(theme)] = !!icon,
                     _b)) }, children)))));
 });
 //# sourceMappingURL=MiniModalHeader.js.map

package/components/MiniModal/MiniModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniModalHeader.js","sourceRoot":"","sources":["MiniModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7G,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQ9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAyD,EAAE,GAAG;;IAA5D,IAAA,YAAkC,EAAlC,IAAI,mBAAG,oBAAC,uBAAuB,OAAG,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAvD,oBAAyD,CAAF;IACtD,OAAO,CACL,oBAAC,KAAK,CAAC,MAAM,eAAK,IAAI;QACpB,6BAAK,GAAG,EAAE,GAAG;YACV,IAAI,IAAI,CACP,yCAAe,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,IAC1D,IAAI,CACD,CACP;YACA,QAAQ,IAAI,CACX,yCACY,iBAAiB,CAAC,KAAK,EACjC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK;oBACxB,GAAC,MAAM,CAAC,aAAa,IAAG,CAAC,CAAC,IAAI;wBAC9B,IAED,QAAQ,CACL,CACP,CACG,CACO,CAChB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\nimport type { ReactNode } from 'react';\n\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.js';\nimport { cx } from '../../lib/cx.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalHeaderProps } from '../Modal/index.js';\nimport { styles } from './MiniModal.css.js';\nimport { MiniModalDataTids } from './tids.js';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /** Задает иконку в шапку компонента.\n   * @default InfoCircleIcon64Regular */\n  icon?: ReactNode;\n}\n\n/**\n * Шапка мини-модалки: заголовок и опциональная иконка.\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\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={cx(styles.title, {\n                [styles.titleWithIcon]: !!icon,\n              })}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"]}
+{"version":3,"file":"MiniModalHeader.js","sourceRoot":"","sources":["MiniModalHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,uBAAuB,EAAE,MAAM,oEAAoE,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAQ9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAyD,EAAE,GAAG;;IAA5D,IAAA,YAAkC,EAAlC,IAAI,mBAAG,oBAAC,uBAAuB,OAAG,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAvD,oBAAyD,CAAF;IACtD,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC/B,IAAA,EAAE,GAAK,UAAU,EAAE,GAAjB,CAAkB;IAC5B,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IAEpC,OAAO,CACL,oBAAC,KAAK,CAAC,MAAM,eAAK,IAAI;QACpB,6BAAK,GAAG,EAAE,GAAG;YACV,IAAI,IAAI,CACP,yCAAe,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,IAC5D,IAAI,CACD,CACP;YACA,QAAQ,IAAI,CACX,yCACY,iBAAiB,CAAC,KAAK,EACjC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE;oBAC1B,GAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,IAAG,CAAC,CAAC,IAAI;wBACrC,IAED,QAAQ,CACL,CACP,CACG,CACO,CAChB,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import React, { useContext } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { Modal } from '../Modal/index.js';\nimport type { ModalHeaderProps } from '../Modal/index.js';\nimport { getStyles } from './MiniModal.styles.js';\nimport { MiniModalDataTids } from './tids.js';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /** Задает иконку в шапку компонента.\n   * @default InfoCircleIcon64Regular */\n  icon?: ReactNode;\n}\n\n/**\n * Шапка мини-модалки: заголовок и опциональная иконка.\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    const { cx } = useEmotion();\n    const styles = useStyles(getStyles);\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={cx(styles.title(), {\n                [styles.titleWithIcon(theme)]: !!icon,\n              })}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalIndent.js

@@ -20,9 +20,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useContext } from 'react';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { styles } from './MiniModal.css.js';
+import { useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getStyles } from './MiniModal.styles.js';
 import { MiniModalDataTids } from './tids.js';
 /**
  * Вертикальный отступ между группами элементов в зоне футера мини-модалки.
@@ -31,6 +33,8 @@ import { MiniModalDataTids } from './tids.js';
  */
 export var MiniModalIndent = forwardRefAndName('MiniModalIndent', function (_a, ref) {
     var children = _a.children, rest = __rest(_a, ["children"]);
-    return React.createElement("div", __assign({ "data-tid": MiniModalDataTids.indent, ref: ref, className: styles.actionsIndent }, rest));
+    var styles = useStyles(getStyles);
+    var theme = useContext(ThemeContext);
+    return React.createElement("div", __assign({ "data-tid": MiniModalDataTids.indent, ref: ref, className: styles.actionsIndent(theme) }, rest));
 });
 //# sourceMappingURL=MiniModalIndent.js.map

package/components/MiniModal/MiniModalIndent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MiniModalIndent.js","sourceRoot":"","sources":["MiniModalIndent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAqB,EAAE,GAAG;IAAxB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAClB,OAAO,kDAAe,iBAAiB,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,IAAM,IAAI,EAAI,CAAC;AAC1G,CAAC,CACF,CAAC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { styles } from './MiniModal.css.js';\nimport { MiniModalDataTids } from './tids.js';\n\n/**\n * Вертикальный отступ между группами элементов в зоне футера мини-модалки.\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    return <div data-tid={MiniModalDataTids.indent} ref={ref} className={styles.actionsIndent} {...rest} />;\n  },\n);\n"]}
+{"version":3,"file":"MiniModalIndent.js","sourceRoot":"","sources":["MiniModalIndent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AACH,MAAM,CAAC,IAAM,eAAe,GAAG,iBAAiB,CAC9C,iBAAiB,EACjB,UAAC,EAAqB,EAAE,GAAG;IAAxB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAClB,IAAM,MAAM,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,OAAO,kDAAe,iBAAiB,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,IAAM,IAAI,EAAI,CAAC;AACjH,CAAC,CACF,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { getStyles } from './MiniModal.styles.js';\nimport { MiniModalDataTids } from './tids.js';\n\n/**\n * Вертикальный отступ между группами элементов в зоне футера мини-модалки.\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const styles = useStyles(getStyles);\n    const theme = useContext(ThemeContext);\n\n    return <div data-tid={MiniModalDataTids.indent} ref={ref} className={styles.actionsIndent(theme)} {...rest} />;\n  },\n);\n"]}

package/components/MiniModal/getMiniModalTheme.d.ts

@@ -1,2 +1,3 @@
 import type { BasicThemeClass } from '../../internal/themes/BasicTheme.js';
-export declare const getMiniModalTheme: (contextTheme: Readonly<typeof BasicThemeClass>, propsTheme?: Partial<typeof BasicThemeClass> | undefined) => Readonly<typeof BasicThemeClass>;
+import type { Theme, ThemeIn } from '../../lib/theming/Theme.js';
+export declare const getMiniModalTheme: (contextTheme: Theme, propsTheme?: ThemeIn) => Readonly<typeof BasicThemeClass>;

package/components/MiniModal/getMiniModalTheme.js

@@ -1,6 +1,5 @@
-import { memoizeTheme } from '../../lib/theming/memoizeTheme.js';
 import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
-export var getMiniModalTheme = memoizeTheme(function (contextTheme, propsTheme) {
+export var getMiniModalTheme = function (contextTheme, propsTheme) {
     if (propsTheme === void 0) { propsTheme = {}; }
     var theme = ThemeFactory.create(propsTheme, contextTheme);
     return ThemeFactory.create({
@@ -18,5 +17,5 @@ export var getMiniModalTheme = memoizeTheme(function (contextTheme, propsTheme)
         mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,
         mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,
     }, theme);
-});
+};
 //# sourceMappingURL=getMiniModalTheme.js.map

package/components/MiniModal/getMiniModalTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"getMiniModalTheme.js","sourceRoot":"","sources":["getMiniModalTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,YAAY,CAC3C,UAAC,YAAmB,EAAE,UAAwB;IAAxB,2BAAA,EAAA,eAAwB;IAC5C,IAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAC5D,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,mBAAmB,EAAE,KAAK,CAAC,uBAAuB;QAClD,sBAAsB,EAAE,KAAK,CAAC,0BAA0B;QACxD,qBAAqB,EAAE,KAAK,CAAC,yBAAyB;QACtD,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,qBAAqB,EAAE,KAAK,CAAC,yBAAyB;QACtD,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,sBAAsB,EAAE,KAAK,CAAC,0BAA0B;QACxD,0BAA0B,EAAE,KAAK,CAAC,qBAAqB;QACvD,6BAA6B,EAAE,KAAK,CAAC,wBAAwB;QAC7D,+BAA+B,EAAE,KAAK,CAAC,0BAA0B;QACjE,8BAA8B,EAAE,KAAK,CAAC,yBAAyB;KAChE,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import type { BasicThemeClass } from '../../internal/themes/BasicTheme.js';\nimport { memoizeTheme } from '../../lib/theming/memoizeTheme.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\n\nexport const getMiniModalTheme = memoizeTheme(\n  (contextTheme: Theme, propsTheme: ThemeIn = {}): Readonly<typeof BasicThemeClass> => {\n    const theme = ThemeFactory.create(propsTheme, contextTheme);\n    return ThemeFactory.create(\n      {\n        modalBodyPaddingTop: theme.miniModalBodyPaddingTop,\n        modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,\n        modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,\n        modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,\n        modalFooterPaddingTop: theme.miniModalFooterPaddingTop,\n        modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,\n        mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,\n        mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,\n        mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,\n        mobileModalContainerHeight: theme.miniModalHeightMobile,\n        mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,\n        mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,\n        mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,\n      },\n      theme,\n    );\n  },\n);\n"]}
+{"version":3,"file":"getMiniModalTheme.js","sourceRoot":"","sources":["getMiniModalTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,YAAmB,EAAE,UAAwB;IAAxB,2BAAA,EAAA,eAAwB;IAC7E,IAAM,KAAK,GAAG,YAAY,CAAC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAC5D,OAAO,YAAY,CAAC,MAAM,CACxB;QACE,mBAAmB,EAAE,KAAK,CAAC,uBAAuB;QAClD,sBAAsB,EAAE,KAAK,CAAC,0BAA0B;QACxD,qBAAqB,EAAE,KAAK,CAAC,yBAAyB;QACtD,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,qBAAqB,EAAE,KAAK,CAAC,yBAAyB;QACtD,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,wBAAwB,EAAE,KAAK,CAAC,4BAA4B;QAC5D,sBAAsB,EAAE,KAAK,CAAC,0BAA0B;QACxD,0BAA0B,EAAE,KAAK,CAAC,qBAAqB;QACvD,6BAA6B,EAAE,KAAK,CAAC,wBAAwB;QAC7D,+BAA+B,EAAE,KAAK,CAAC,0BAA0B;QACjE,8BAA8B,EAAE,KAAK,CAAC,yBAAyB;KAChE,EACD,KAAK,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { BasicThemeClass } from '../../internal/themes/BasicTheme.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\n\nexport const getMiniModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}): Readonly<typeof BasicThemeClass> => {\n  const theme = ThemeFactory.create(propsTheme, contextTheme);\n  return ThemeFactory.create(\n    {\n      modalBodyPaddingTop: theme.miniModalBodyPaddingTop,\n      modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,\n      modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,\n      modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,\n      modalFooterPaddingTop: theme.miniModalFooterPaddingTop,\n      modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,\n      mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,\n      mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,\n      mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,\n      mobileModalContainerHeight: theme.miniModalHeightMobile,\n      mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,\n      mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,\n      mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,\n    },\n    theme,\n  );\n};\n"]}

package/components/Modal/Modal.d.ts

@@ -63,6 +63,9 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private getProps;
     state: ModalState;
     private globalObject;
+    private emotion;
+    private cx;
+    private styles;
     private theme;
     private stackSubscription;
     private containerNode;

package/components/Modal/Modal.js

@@ -39,7 +39,6 @@ import { RenderContainer } from '../../internal/RenderContainer/index.js';
 import { ResizeDetector } from '../../internal/ResizeDetector/index.js';
 import { ZIndex } from '../../internal/ZIndex/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { cx } from '../../lib/cx.js';
 import { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';
 import * as LayoutEvents from '../../lib/LayoutEvents.js';
 import { ModalStack } from '../../lib/ModalStack.js';
@@ -51,7 +50,7 @@ import { isNonNullable } from '../../lib/utils.js';
 import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { getModalTheme } from './getModalTheme.js';
 import { ModalDataTids, ModalZIndexPriority } from './Modal.constants.js';
-import { styles } from './Modal.css.js';
+import { getStyles } from './Modal.styles.js';
 import { ModalBody } from './ModalBody.js';
 import { ModalClose } from './ModalClose.js';
 import { ModalContext } from './ModalContext.js';
@@ -87,15 +86,15 @@ var Modal = /** @class */ (function (_super) {
                     if (_this.state.hasFooter) {
                         return;
                     }
-                    return [styles.mobileContainerSmall5_2];
+                    return [_this.styles.mobileContainerSmall5_2()];
                 case 'fullscreen':
-                    return [styles.mobileContainerFullscreen5_2];
+                    return [_this.styles.mobileContainerFullscreen5_2()];
                 case 'center':
-                    return [styles.mobileContainerSmall5_2];
+                    return [_this.styles.mobileContainerSmall5_2()];
                 case 'bottom':
-                    return [styles.mobileContainerSmall5_2, styles.mobileContainerSmallBottom5_2];
+                    return [_this.styles.mobileContainerSmall5_2(), _this.styles.mobileContainerSmallBottom5_2()];
                 case 'top':
-                    return [styles.mobileContainerSmall5_2, styles.mobileContainerSmallTop5_2];
+                    return [_this.styles.mobileContainerSmall5_2(), _this.styles.mobileContainerSmallTop5_2()];
                 default:
                     return catchUnreachableWarning(mobileAppearance, false);
             }
@@ -200,6 +199,7 @@ var Modal = /** @class */ (function (_super) {
     };
     Modal.prototype.render = function () {
         var _this = this;
+        this.styles = getStyles(this.emotion);
         return (React.createElement(ThemeContext.Consumer, null, function (theme) {
             _this.theme = getModalTheme(theme, _this.props.theme);
             return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
@@ -237,38 +237,38 @@ var Modal = /** @class */ (function (_super) {
         }
         var getMobileCenterContainerClassNames = function () {
             var _a;
-            return cx(styles.mobileCenterContainer, (_a = {},
-                _a[styles.mobileCenterContainerBig] = mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),
-                _a[styles.mobileCenterContainerFullscreen] = mobileAppearance === 'fullscreen',
+            return _this.cx(_this.styles.mobileCenterContainer(_this.theme), (_a = {},
+                _a[_this.styles.mobileCenterContainerBig(_this.theme)] = mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),
+                _a[_this.styles.mobileCenterContainerFullscreen()] = mobileAppearance === 'fullscreen',
                 _a));
         };
         return (React.createElement(RenderContainer, null,
             React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
-                React.createElement(ZIndex, { priority: 'Modal', className: styles.root },
+                React.createElement(ZIndex, { priority: 'Modal', className: this.styles.root() },
                     React.createElement(HideBodyVerticalScroll, null),
-                    this.state.hasBackground && (React.createElement("div", { onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, className: styles.bg })),
+                    this.state.hasBackground && (React.createElement("div", { onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, className: this.styles.bg(this.theme) })),
                     React.createElement(ResponsiveLayout, null, function (_a) {
                         var _b, _c, _d, _e, _f;
                         var isMobile = _a.isMobile;
-                        return (React.createElement("div", { "aria-labelledby": ariaLabelledby, ref: _this.refContainer, className: cx(styles.container, !isMobile && styles.containerDesktop, isMobile && _this.getMobileContainerClassName()), onMouseDown: _this.handleContainerMouseDown, onMouseUp: _this.handleContainerMouseUp, onClick: _this.handleContainerClick, "data-tid": ModalDataTids.container },
-                            React.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: cx((_b = {},
-                                    _b[styles.centerContainer] = true,
+                        return (React.createElement("div", { "aria-labelledby": ariaLabelledby, ref: _this.refContainer, className: _this.cx(_this.styles.container(), !isMobile && _this.styles.containerDesktop(), isMobile && _this.getMobileContainerClassName()), onMouseDown: _this.handleContainerMouseDown, onMouseUp: _this.handleContainerMouseUp, onClick: _this.handleContainerClick, "data-tid": ModalDataTids.container },
+                            React.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: _this.cx((_b = {},
+                                    _b[_this.styles.centerContainer()] = true,
                                     _b[getMobileCenterContainerClassNames()] = isMobile,
-                                    _b[styles.alignTop] = Boolean(alignTop),
+                                    _b[_this.styles.alignTop()] = Boolean(alignTop),
                                     _b)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content },
-                                React.createElement("div", { className: cx((_c = {},
-                                        _c[styles.window] = true,
-                                        _c[styles.mobileWindow] = isMobile,
-                                        _c[styles.mobileWindowFullscreen] = isMobile && mobileAppearance === 'fullscreen',
+                                React.createElement("div", { className: _this.cx((_c = {},
+                                        _c[_this.styles.window(_this.theme)] = true,
+                                        _c[_this.styles.mobileWindow()] = isMobile,
+                                        _c[_this.styles.mobileWindowFullscreen()] = isMobile && mobileAppearance === 'fullscreen',
                                         _c)), style: isMobile ? undefined : style },
                                     React.createElement(ResizeDetector, { onResize: _this.handleResize, fullHeight: isMobile },
-                                        React.createElement(FocusLock, { disabled: disableFocusLock, autoFocus: false, className: cx((_d = {}, _d[styles.columnFlexContainer] = isMobile, _d), 'focus-lock-container') },
-                                            !hasHeader && !noClose && (React.createElement(ZIndex, { priority: ModalZIndexPriority.Cross, className: cx((_e = {},
-                                                    _e[styles.closeWrapper] = true,
-                                                    _e[styles.mobileCloseWrapper] = isMobile,
+                                        React.createElement(FocusLock, { disabled: disableFocusLock, autoFocus: false, className: _this.cx((_d = {}, _d[_this.styles.columnFlexContainer()] = isMobile, _d), 'focus-lock-container') },
+                                            !hasHeader && !noClose && (React.createElement(ZIndex, { priority: ModalZIndexPriority.Cross, className: _this.cx((_e = {},
+                                                    _e[_this.styles.closeWrapper(_this.theme)] = true,
+                                                    _e[_this.styles.mobileCloseWrapper(_this.theme)] = isMobile,
                                                     _e)) },
-                                                React.createElement(ModalClose, { className: cx((_f = {},
-                                                        _f[styles.mobileCloseWithoutHeader] = isMobile && !_this.state.hasHeader,
+                                                React.createElement(ModalClose, { className: _this.cx((_f = {},
+                                                        _f[_this.styles.mobileCloseWithoutHeader(_this.theme)] = isMobile && !_this.state.hasHeader,
                                                         _f)), requestClose: _this.requestClose, disableClose: disableClose }))),
                                             React.createElement(ModalContext.Provider, { value: modalContextProps }, children)))))));
                     })))));

package/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import throttle from 'lodash.throttle';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { cx } from '../../lib/cx.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { type TGetRootNode, type TSetRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { catchUnreachableWarning } from '../../lib/typeGuards.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getModalTheme } from './getModalTheme.js';\nimport { ModalDataTids, ModalZIndexPriority } from './Modal.constants.js';\nimport { styles } from './Modal.css.js';\nimport { ModalBody } from './ModalBody.js';\nimport { ModalClose } from './ModalClose.js';\nimport { ModalContext } from './ModalContext.js';\nimport type { ModalContextProps } from './ModalContext.js';\nimport { ModalFooter } from './ModalFooter.js';\nimport { ModalHeader } from './ModalHeader.js';\n\nexport { ModalDataTids, ModalZIndexPriority };\n\nlet mountedModalsCount = 0;\n\nexport type MobileModalAppearance = 'auto' | 'top' | 'center' | 'bottom' | 'fullscreen-spacing' | 'fullscreen';\n\nexport interface ModalProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n  /** Отключает событие `onClose` и блокирует кнопку закрытия модального окна. */\n  disableClose?: boolean;\n\n  /** Выравнивает модальное окно по верху страницы. */\n  alignTop?: boolean;\n\n  /** Оставляет модальное окно открытым, когда пользователь кликнул на фон вне модального окна. */\n  ignoreBackgroundClick?: boolean;\n\n  /** Скрывает крестик для закрытия модального окна. */\n  noClose?: boolean;\n\n  /** Ширина модального окна. */\n  width?: number | string;\n\n  /** Событие закрытия модального окна. Вызывается при клике на фон или крестик, и при нажатии Esc. */\n  onClose?: () => void;\n\n  /** Выключает ограничение на фокус. По умолчанию модальное окно не позволяет установить фокус за переделами своего содержимого.*/\n  disableFocusLock?: boolean;\n\n  /** Объект с переменными темы. Он будет объединён с темой из `<ThemeContext>`.\n   *\n   * Общие переменные темы и переменные для модального окна (с префиксом modal) смотрите на странице [ThemePlayground](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-themeplayground--docs).\n   */\n  theme?: ThemeIn;\n\n  /** Задаёт внешний вид модального окна в мобильном режиме. Работает с версией темы >= 5_2.\n   *  - `\"auto\"` — если футера нет, модальное окно распологается в центре экрана, если есть — модальное окно растягивается на весь экран с отступами и закругленными краями.\n   *  - `\"top\"` — модальное окно располагается сверху независимо от наличия футера.\n   *  - `\"center\"` — модальное окно располагается в центре независимо от наличия футера.\n   *  - `\"bottom\"` — модальное окно располагается снизу независимо от наличия футера.\n   *  - `\"fullscreen-spacing\"` — модальное окно растягивается на весь экран с отступами и закругленными краями.\n   *  - `\"fullscreen\"` — модальное окно растягивается на весь экран.\n   *  @default auto\n   */\n  mobileAppearance?: MobileModalAppearance;\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\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role' | 'mobileAppearance'>>;\n\n/** Модальное окно — это эмуляция диалогового окна браузера, оно появляется поверх страницы в ответ на действия пользователя и блокирует доступ к основному содержимому страницы.\n */\n@withRenderEnvironment\n@rootNode\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 getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableFocusLock: false,\n    role: 'dialog',\n    mobileAppearance: 'auto',\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 globalObject!: GlobalObject;\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, this.globalObject);\n\n    if (mountedModalsCount === 0) {\n      this.globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    this.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      this.globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\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 getMobileContainerClassName = () => {\n    const mobileAppearance = this.getProps().mobileAppearance;\n    switch (mobileAppearance) {\n      case 'fullscreen-spacing':\n        return;\n      case 'auto':\n        if (this.state.hasFooter) {\n          return;\n        }\n        return [styles.mobileContainerSmall5_2];\n      case 'fullscreen':\n        return [styles.mobileContainerFullscreen5_2];\n      case 'center':\n        return [styles.mobileContainerSmall5_2];\n      case 'bottom':\n        return [styles.mobileContainerSmall5_2, styles.mobileContainerSmallBottom5_2];\n      case 'top':\n        return [styles.mobileContainerSmall5_2, styles.mobileContainerSmallTop5_2];\n      default:\n        return catchUnreachableWarning(mobileAppearance, false);\n    }\n  };\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      mobileAppearance,\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      mobileOnFullScreen: this.props.mobileAppearance === 'fullscreen',\n    };\n    if (!noClose) {\n      modalContextProps.close = {\n        disableClose,\n        requestClose: this.requestClose,\n      };\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 getMobileCenterContainerClassNames = () => {\n      return cx(styles.mobileCenterContainer, {\n        [styles.mobileCenterContainerBig]:\n          mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),\n        [styles.mobileCenterContainerFullscreen]: mobileAppearance === 'fullscreen',\n      });\n    };\n\n    return (\n      <RenderContainer>\n        <CommonWrapper rootNodeRef={this.setRootNode} {...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}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={cx(\n                    styles.container,\n                    !isMobile && styles.containerDesktop,\n                    isMobile && this.getMobileContainerClassName(),\n                  )}\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                      [getMobileCenterContainerClassNames()]: isMobile,\n                      [styles.alignTop]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={cx({\n                        [styles.window]: true,\n                        [styles.mobileWindow]: isMobile,\n                        [styles.mobileWindowFullscreen]: isMobile && mobileAppearance === 'fullscreen',\n                      })}\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                              priority={ModalZIndexPriority.Cross}\n                              className={cx({\n                                [styles.closeWrapper]: true,\n                                [styles.mobileCloseWrapper]: 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({\n      stackPosition: stack.indexOf(this),\n      hasBackground: ModalStack.isBlocking(this, this.globalObject),\n    });\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      e.stopPropagation();\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: boolean) => {\n    this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter: boolean) => {\n    this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel: boolean) => {\n    this.setState({ hasPanel });\n  };\n}\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport type { AriaAttributes, HTMLAttributes, JSX } from 'react';\nimport React from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport { FocusLock } from '../../internal/react-focus-lock/index.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport { type TGetRootNode, type TSetRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { catchUnreachableWarning } from '../../lib/typeGuards.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { getModalTheme } from './getModalTheme.js';\nimport { ModalDataTids, ModalZIndexPriority } from './Modal.constants.js';\nimport { getStyles } from './Modal.styles.js';\nimport { ModalBody } from './ModalBody.js';\nimport { ModalClose } from './ModalClose.js';\nimport { ModalContext } from './ModalContext.js';\nimport type { ModalContextProps } from './ModalContext.js';\nimport { ModalFooter } from './ModalFooter.js';\nimport { ModalHeader } from './ModalHeader.js';\n\nexport { ModalDataTids, ModalZIndexPriority };\n\nlet mountedModalsCount = 0;\n\nexport type MobileModalAppearance = 'auto' | 'top' | 'center' | 'bottom' | 'fullscreen-spacing' | 'fullscreen';\n\nexport interface ModalProps\n  extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n  /** Отключает событие `onClose` и блокирует кнопку закрытия модального окна. */\n  disableClose?: boolean;\n\n  /** Выравнивает модальное окно по верху страницы. */\n  alignTop?: boolean;\n\n  /** Оставляет модальное окно открытым, когда пользователь кликнул на фон вне модального окна. */\n  ignoreBackgroundClick?: boolean;\n\n  /** Скрывает крестик для закрытия модального окна. */\n  noClose?: boolean;\n\n  /** Ширина модального окна. */\n  width?: number | string;\n\n  /** Событие закрытия модального окна. Вызывается при клике на фон или крестик, и при нажатии Esc. */\n  onClose?: () => void;\n\n  /** Выключает ограничение на фокус. По умолчанию модальное окно не позволяет установить фокус за переделами своего содержимого.*/\n  disableFocusLock?: boolean;\n\n  /** Объект с переменными темы. Он будет объединён с темой из `<ThemeContext>`.\n   *\n   * Общие переменные темы и переменные для модального окна (с префиксом modal) смотрите на странице [ThemePlayground](https://tech.skbkontur.ru/kontur-ui/?path=/docs/react-ui_information-themeplayground--docs).\n   */\n  theme?: ThemeIn;\n\n  /** Задаёт внешний вид модального окна в мобильном режиме. Работает с версией темы >= 5_2.\n   *  - `\"auto\"` — если футера нет, модальное окно распологается в центре экрана, если есть — модальное окно растягивается на весь экран с отступами и закругленными краями.\n   *  - `\"top\"` — модальное окно располагается сверху независимо от наличия футера.\n   *  - `\"center\"` — модальное окно располагается в центре независимо от наличия футера.\n   *  - `\"bottom\"` — модальное окно располагается снизу независимо от наличия футера.\n   *  - `\"fullscreen-spacing\"` — модальное окно растягивается на весь экран с отступами и закругленными краями.\n   *  - `\"fullscreen\"` — модальное окно растягивается на весь экран.\n   *  @default auto\n   */\n  mobileAppearance?: MobileModalAppearance;\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\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role' | 'mobileAppearance'>>;\n\n/** Модальное окно — это эмуляция диалогового окна браузера, оно появляется поверх страницы в ответ на действия пользователя и блокирует доступ к основному содержимому страницы.\n */\n@withRenderEnvironment\n@rootNode\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 getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public static defaultProps: DefaultProps = {\n    disableFocusLock: false,\n    role: 'dialog',\n    mobileAppearance: 'auto',\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 globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\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, this.globalObject);\n\n    if (mountedModalsCount === 0) {\n      this.globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    this.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      this.globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    this.globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this, this.globalObject);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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 getMobileContainerClassName = () => {\n    const mobileAppearance = this.getProps().mobileAppearance;\n    switch (mobileAppearance) {\n      case 'fullscreen-spacing':\n        return;\n      case 'auto':\n        if (this.state.hasFooter) {\n          return;\n        }\n        return [this.styles.mobileContainerSmall5_2()];\n      case 'fullscreen':\n        return [this.styles.mobileContainerFullscreen5_2()];\n      case 'center':\n        return [this.styles.mobileContainerSmall5_2()];\n      case 'bottom':\n        return [this.styles.mobileContainerSmall5_2(), this.styles.mobileContainerSmallBottom5_2()];\n      case 'top':\n        return [this.styles.mobileContainerSmall5_2(), this.styles.mobileContainerSmallTop5_2()];\n      default:\n        return catchUnreachableWarning(mobileAppearance, false);\n    }\n  };\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      mobileAppearance,\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      mobileOnFullScreen: this.props.mobileAppearance === 'fullscreen',\n    };\n    if (!noClose) {\n      modalContextProps.close = {\n        disableClose,\n        requestClose: this.requestClose,\n      };\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 getMobileCenterContainerClassNames = () => {\n      return this.cx(this.styles.mobileCenterContainer(this.theme), {\n        [this.styles.mobileCenterContainerBig(this.theme)]:\n          mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),\n        [this.styles.mobileCenterContainerFullscreen()]: mobileAppearance === 'fullscreen',\n      });\n    };\n\n    return (\n      <RenderContainer>\n        <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n          <ZIndex priority={'Modal'} className={this.styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && (\n              <div\n                onMouseDown={this.handleContainerMouseDown}\n                onMouseUp={this.handleContainerMouseUp}\n                onClick={this.handleContainerClick}\n                className={this.styles.bg(this.theme)}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={this.cx(\n                    this.styles.container(),\n                    !isMobile && this.styles.containerDesktop(),\n                    isMobile && this.getMobileContainerClassName(),\n                  )}\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.cx({\n                      [this.styles.centerContainer()]: true,\n                      [getMobileCenterContainerClassNames()]: isMobile,\n                      [this.styles.alignTop()]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={this.cx({\n                        [this.styles.window(this.theme)]: true,\n                        [this.styles.mobileWindow()]: isMobile,\n                        [this.styles.mobileWindowFullscreen()]: isMobile && mobileAppearance === 'fullscreen',\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.cx({ [this.styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                        >\n                          {!hasHeader && !noClose && (\n                            <ZIndex\n                              priority={ModalZIndexPriority.Cross}\n                              className={this.cx({\n                                [this.styles.closeWrapper(this.theme)]: true,\n                                [this.styles.mobileCloseWrapper(this.theme)]: isMobile,\n                              })}\n                            >\n                              <ModalClose\n                                className={this.cx({\n                                  [this.styles.mobileCloseWithoutHeader(this.theme)]: 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({\n      stackPosition: stack.indexOf(this),\n      hasBackground: ModalStack.isBlocking(this, this.globalObject),\n    });\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      e.stopPropagation();\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: boolean) => {\n    this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter: boolean) => {\n    this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel: boolean) => {\n    this.setState({ hasPanel });\n  };\n}\n"]}

package/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,55 @@
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const modalGlobalClasses: {
+    root: string;
+    container: string;
+};
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    root(): string;
+    bg(t: Theme): string;
+    container(): string;
+    containerDesktop(): string;
+    mobileContainerFullscreen5_2(): string;
+    mobileContainerSmall5_2(): string;
+    mobileContainerSmallTop5_2(): string;
+    mobileContainerSmallBottom5_2(): string;
+    window(t: Theme): string;
+    mobileWindow(): string;
+    mobileWindowFullscreen(): string;
+    centerContainer(): string;
+    mobileCenterContainer(t: Theme): string;
+    mobileCenterContainerBig(t: Theme): string;
+    mobileCenterContainerFullscreen(): string;
+    alignTop(): string;
+    close(t: Theme): string;
+    closeMobile(t: Theme): string;
+    mobileCloseWithoutHeader(t: Theme): string;
+    closeWrapper(t: Theme): string;
+    mobileCloseWrapper(t: Theme): string;
+    disabled(t: Theme): string;
+    focus(t: Theme): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    titleCut(): string;
+    body(t: Theme): string;
+    mobileBody(t: Theme): string;
+    headerWithClose(t: Theme): string;
+    mobileHeaderWithClose(t: Theme): string;
+    footer(t: Theme): string;
+    mobileFooter(t: Theme): string;
+    panel(t: Theme): string;
+    fixedHeader(t: Theme): string;
+    mobileFixedHeader(t: Theme): string;
+    fixedFooter(t: Theme): string;
+    mobileFixedFooter(t: Theme): string;
+    fixedPanel(t: Theme): string;
+    headerAddPadding(t: Theme): string;
+    bodyWithoutHeader(t: Theme): string;
+    mobileBodyWithoutHeader(t: Theme): string;
+    bodyWithoutPadding(): string;
+    bodyAddPaddingForPanel(t: Theme): string;
+    mobileBodyAddPaddingForPanel(t: Theme): string;
+    columnFlexContainer(): string;
+    modalSeparatorWrapper(): string;
+    modalSeparator(t: Theme): string;
+    modalSeparatorFixed(t: Theme): string;
+}>;