@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-942b5aade9

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js

@@ -1,19 +1,38 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
 export var styles = memoizeStyle({
   root: function root(t) {
-    var legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);
-    var legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);
-    var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
-    var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,
+      menuItemPaddingX: t.menuItemPaddingX,
+      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,
+      menuItemPaddingY: t.menuItemPaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n\n      &:nth-last-of-type(n + 2) {\n        margin-bottom: ", ";\n      }\n    "])), resetButton(), t.menuItemDisplay, t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius, t.menuItemGap);
   },
   rootMobile: function rootMobile(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.fontSizeMobile, t.lineHeightMobile, t.menuItemPaddingMobile);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
   },
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
@@ -23,7 +42,7 @@ export var styles = memoizeStyle({
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
   link: function link(t) {
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
@@ -35,12 +54,15 @@ export var styles = memoizeStyle({
     return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
   },
   comment: function comment(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
   },
   commentHover: function commentHover(t) {
     return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
   icon: function icon(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      top: ", ";\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemPaddingY, t.menuItemIconLegacyShift);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemIconLegacyShift);
+  },
+  mobileContentWithIcon: function mobileContentWithIcon() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
 });

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","fontSizeMobile","lineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\n    const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\n\n    const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\n    const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: block;\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.fontSizeMobile};\n      line-height: ${t.lineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: transparent;\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      top: ${t.menuItemPaddingY};\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","menuItemDisplay","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","menuItemCommentOpacity","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","mobileContentWithIcon"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemLegacyPaddingX,\n  menuItemPaddingX,\n  menuItemLegacyPaddingY,\n  menuItemPaddingY,\n}: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {\n  const legacyPaddingX = parseFloat(menuItemLegacyPaddingX);\n  const legacyPaddingY = parseFloat(menuItemLegacyPaddingY);\n\n  const paddingX = legacyPaddingX !== 0 ? `${parseFloat(menuItemPaddingX) + legacyPaddingX}px` : menuItemPaddingX;\n  const paddingY = legacyPaddingY !== 0 ? `${parseFloat(menuItemPaddingY) + legacyPaddingY}px` : menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,\n      menuItemPaddingX: t.menuItemPaddingX,\n      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,\n      menuItemPaddingY: t.menuItemPaddingY,\n    });\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n\n      &:nth-last-of-type(n + 2) {\n        margin-bottom: ${t.menuItemGap};\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuItemFontSizeMobile};\n      line-height: ${t.menuItemLineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: ${t.menuItemDisabledBg};\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      opacity: ${t.menuItemCommentOpacity};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"]}

package/components/MenuItem/MenuItem.styles.d.ts

@@ -1,4 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
 export declare const styles: {
     root(t: Theme): string;
     rootMobile(t: Theme): string;
@@ -11,4 +15,5 @@ export declare const styles: {
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
+    mobileContentWithIcon(): string;
 };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { styles } from "../MenuSeparator.styles";
 export var MenuSeparatorDataTids = {
   root: 'MenuSeparator__root'
@@ -8,14 +10,19 @@ export var MenuSeparatorDataTids = {
 /**
  * Добавляет разделительную линию между элементами меню.
  *
- * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 
 function MenuSeparator(props) {
   var theme = useContext(ThemeContext);
-  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
-    "data-tid": MenuSeparatorDataTids.root,
-    className: styles.root(theme)
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx))
+    });
   }));
 }
 

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGR,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBM,KAAnB;AACE,iCAAK,YAAUH,qBAAqB,CAACC,IAArC,EAA2C,SAAS,EAAEF,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAtD,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACG,mBAAd,GAAoC,eAApC;;AAEA,SAASH,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","cx","ThemeContext","CommonWrapper","ResponsiveLayout","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","isMobile","rootMobile","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,aAAfE,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUL,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEN,EAAE,gBAAII,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAJ,IAAyB,IAAzB,MAAgCL,MAAM,CAACO,UAAP,CAAkBF,KAAlB,CAAhC,IAA2DC,QAA3D,OAFf,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDH,aAAa,CAACK,mBAAd,GAAoC,eAApC;;AAEA,SAASL,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <ResponsiveLayout>\n        {({ isMobile }) => {\n          return (\n            <div\n              data-tid={MenuSeparatorDataTids.root}\n              className={cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n            />\n          );\n        }}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -6,7 +6,7 @@ export declare const MenuSeparatorDataTids: {
 /**
  * Добавляет разделительную линию между элементами меню.
  *
- * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

@@ -1,10 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: ", " 0;\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorMarginX, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
   }
 });

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorMarginX","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd,EACsCD,CAAC,CAACE,oBADxC;AAEgBF,IAAAA,CAAC,CAACG,wBAFlB,EAEoDH,CAAC,CAACI,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBL,CARsB,EAQZ;AACnB,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACM,0BADd,EAC4CN,CAAC,CAACO,0BAD9C;;;AAID,GAbgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} ${t.menuSeparatorMarginX};\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n      border-radius: 1px;\n    `;\n  },\n});\n"]}

package/components/MenuSeparator/MenuSeparator.styles.d.ts

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

package/components/Modal/Modal/Modal.js

@@ -16,14 +16,16 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { globalThat } from "../../../lib/SSRSafe";
 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 { getModalTheme } from "../getModalTheme";
 var mountedModalsCount = 0;
 export var ModalDataTids = {
   container: 'modal-container',
@@ -187,11 +189,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     this.stackSubscription = ModalStack.add(this, this.handleStackChange);
 
     if (mountedModalsCount === 0) {
-      window.addEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalThat.addEventListener('resize', this.throttledCheckHorizontalScroll);
     }
 
     mountedModalsCount++;
-    window.addEventListener('keydown', this.handleKeyDown);
+    globalThat.addEventListener('keydown', this.handleKeyDown);
     this.checkHorizontalScrollAppearance();
 
     if (this.containerNode) {
@@ -201,11 +203,11 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     if (--mountedModalsCount === 0) {
-      window.removeEventListener('resize', this.throttledCheckHorizontalScroll);
+      globalThat.removeEventListener('resize', this.throttledCheckHorizontalScroll);
       LayoutEvents.emit();
     }
 
-    window.removeEventListener('keydown', this.handleKeyDown);
+    globalThat.removeEventListener('keydown', this.handleKeyDown);
 
     if (isNonNullable(this.stackSubscription)) {
       this.stackSubscription.remove();
@@ -222,18 +224,33 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     var _this2 = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+      _this2.theme = getModalTheme(theme);
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, _this2.renderMain());
     });
   };
 
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
+    var _this$props = this.props,
+        noClose = _this$props.noClose,
+        disableClose = _this$props.disableClose,
+        width = _this$props.width,
+        alignTop = _this$props.alignTop,
+        children = _this$props.children,
+        ariaLabel = _this$props['aria-label'],
+        ariaLabelledby = _this$props['aria-labelledby'];
     var _this$state = this.state,
         hasHeader = _this$state.hasHeader,
         hasFooter = _this$state.hasFooter,
         hasPanel = _this$state.hasPanel;
+
+    var _this$getProps = this.getProps(),
+        role = _this$getProps.role,
+        disableFocusLock = _this$getProps.disableFocusLock;
+
     var modalContextProps = {
       hasHeader: hasHeader,
       horizontalScroll: this.state.horizontalScroll,
@@ -242,9 +259,9 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
       setHasPanel: this.setHasPanel
     };
 
-    if (!this.props.noClose) {
+    if (!noClose) {
       modalContextProps.close = {
-        disableClose: this.props.disableClose,
+        disableClose: disableClose,
         requestClose: this.requestClose
       };
     }
@@ -260,8 +277,8 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     var style = {};
     var containerStyle = {};
 
-    if (this.props.width) {
-      style.width = this.props.width;
+    if (width) {
+      style.width = width;
     } else {
       containerStyle.width = 'auto';
     }
@@ -272,6 +289,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/React.createElement("div", {
       className: styles.bg(this.theme)
     }), /*#__PURE__*/React.createElement("div", {
+      "aria-labelledby": ariaLabelledby,
       ref: this.refContainer,
       className: styles.container(),
       onMouseDown: this.handleContainerMouseDown,
@@ -283,7 +301,10 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
       var isMobile = _ref.isMobile;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.centerContainer()] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)),
+        "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)),
         style: isMobile ? undefined : containerStyle,
         "data-tid": ModalDataTids.content
       }, /*#__PURE__*/React.createElement("div", {
@@ -293,19 +314,18 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
         onResize: _this3.handleResize,
         fullHeight: isMobile
       }, /*#__PURE__*/React.createElement(FocusLock, {
-        disabled: _this3.getProps().disableFocusLock,
+        disabled: disableFocusLock,
         autoFocus: false,
         className: cx((_cx3 = {}, _cx3[styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container')
-      }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/React.createElement(ZIndex, {
-        priority: 'ModalCross',
+      }, !hasHeader && !noClose && /*#__PURE__*/React.createElement(ZIndex, {
         className: cx((_cx4 = {}, _cx4[styles.closeWrapper(_this3.theme)] = true, _cx4[styles.mobileCloseWrapper(_this3.theme)] = isMobile, _cx4))
       }, /*#__PURE__*/React.createElement(ModalClose, {
         className: cx((_cx5 = {}, _cx5[styles.mobileCloseWithoutHeader()] = isMobile && !_this3.state.hasHeader, _cx5)),
         requestClose: _this3.requestClose,
-        disableClose: _this3.props.disableClose
+        disableClose: disableClose
       })), /*#__PURE__*/React.createElement(ModalContext.Provider, {
         value: modalContextProps
-      }, _this3.props.children)))));
+      }, children)))));
     })))));
   };
 
@@ -317,5 +337,6 @@ Modal.Body = ModalBody;
 Modal.Footer = ModalFooter;
 Modal.defaultProps = {
   // NOTE: в ie нормально не работает
-  disableFocusLock: isIE11
+  disableFocusLock: isIE11,
+  role: 'dialog'
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["React","FocusLock","throttle","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","ResponsiveLayout","createPropsGetter","ModalContext","ModalFooter","ModalHeader","ModalBody","ModalClose","styles","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","window","addEventListener","componentWillUnmount","removeEventListener","remove","render","theme","renderMain","modalContextProps","noClose","additionalPadding","style","containerStyle","width","root","bg","isMobile","centerContainer","mobileCenterContainer","alignTop","Boolean","undefined","mobileWindow","disableFocusLock","columnFlexContainer","closeWrapper","mobileCloseWrapper","mobileCloseWithoutHeader","children","Component","__KONTUR_REACT_UI__","Header","Body","Footer"],"mappings":"4JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,OAAOC,QAAP,MAAqB,iBAArB;;AAEA,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;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;;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,MAAT,QAAuB,gBAAvB;;AAEA,IAAIC,kBAAkB,GAAG,CAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,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;;;;;;;;;;;;AAYUC,IAAAA,QAZV,GAYqBb,iBAAiB,CAACY,KAAK,CAACE,YAAP,CAZtC;;AAcSC,IAAAA,KAdT,GAc6B;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,EAd7B;;;;AAwBUC,IAAAA,iBAxBV,GAwB6D,IAxB7D;AAyBUC,IAAAA,aAzBV,GAyBiD,IAzBjD;AA0BUC,IAAAA,eA1BV,GA0BgD,IA1BhD;AA2BUC,IAAAA,aA3BV,GA2B8C,IA3B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+KUC,IAAAA,YA/KV,GA+KyB,YAAM;AAC3B,UAAI,MAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKD,KAAL,CAAWE,OAAf,EAAwB;AACtB,cAAKF,KAAL,CAAWE,OAAX;AACD;AACF,KAtLH;;AAwLUC,IAAAA,YAxLV,GAwLyB,UAACC,MAAD,EAAmC;AACxD,YAAKR,aAAL,GAAqBQ,MAArB;AACD,KA1LH;;AA4LUC,IAAAA,iBA5LV,GA4L8B,UAACC,KAAD,EAAuC;AACjE,YAAKC,QAAL,CAAc,EAAElB,aAAa,EAAEiB,KAAK,CAACE,OAAN,+BAAjB,EAAsClB,aAAa,EAAExB,UAAU,CAAC2C,UAAX,+BAArD,EAAd;AACD,KA9LH;;AAgMUC,IAAAA,wBAhMV,GAgMqC,UAACC,KAAD,EAA6B;AAC9D,YAAKd,eAAL,GAAuBc,KAAK,CAACC,MAA7B;AACD,KAlMH;;AAoMUC,IAAAA,sBApMV,GAoMmC,UAACF,KAAD,EAA6B;AAC5D,YAAKb,aAAL,GAAqBa,KAAK,CAACC,MAA3B;AACD,KAtMH;;AAwMUE,IAAAA,oBAxMV,GAwMiC,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,KA/MH;;AAiNUkB,IAAAA,aAjNV,GAiN0B,UAACC,CAAD,EAAsB;AAC5C,UAAI,MAAK9B,KAAL,CAAWC,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAI7B,WAAW,CAAC0D,CAAD,CAAf,EAAoB;AAClBtD,QAAAA,eAAe,CAACsD,CAAD,CAAf;AACA,cAAKnB,YAAL;AACD;AACF,KAzNH;;AA2NUoB,IAAAA,+BA3NV,GA2N4C,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,KAxOH;;AA0OUkC,IAAAA,8BA1OV,GA0O2CnE,QAAQ,CAAC,MAAK6D,+BAAN,EAAuC,GAAvC,CA1OnD;;AA4OUO,IAAAA,YA5OV,GA4OyB,YAAM;AAC3BjE,MAAAA,YAAY,CAACkE,IAAb;AACD,KA9OH;;AAgPUC,IAAAA,YAhPV,GAgPyB,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,KAlPH;;AAoPUqC,IAAAA,YApPV,GAoPyB,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,KAtPH;;AAwPUqC,IAAAA,WAxPV,GAwPwB,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,KA1PH,mDA6BSqC,iBA7BT,GA6BE,6BAA2B,CACzB,KAAKpC,iBAAL,GAAyB7B,UAAU,CAACkE,GAAX,CAAe,IAAf,EAAqB,KAAK3B,iBAA1B,CAAzB,CAEA,IAAIzB,kBAAkB,KAAK,CAA3B,EAA8B,CAC5BqD,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,KAAKT,8BAAvC,EACD,CAED7C,kBAAkB,GAClBqD,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAKjB,aAAxC,EACA,KAAKE,+BAAL,GAEA,IAAI,KAAKvB,aAAT,EAAwB,CACtB,KAAKA,aAAL,CAAmBsC,gBAAnB,CAAoC,QAApC,EAA8CzE,YAAY,CAACkE,IAA3D,EACD,CACF,CA3CH,QA6CSQ,oBA7CT,GA6CE,gCAA8B,CAC5B,IAAI,EAAEvD,kBAAF,KAAyB,CAA7B,EAAgC,CAC9BqD,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqC,KAAKX,8BAA1C,EACAhE,YAAY,CAACkE,IAAb,GACD,CAEDM,MAAM,CAACG,mBAAP,CAA2B,SAA3B,EAAsC,KAAKnB,aAA3C,EACA,IAAI1D,aAAa,CAAC,KAAKoC,iBAAN,CAAjB,EAA2C,CACzC,KAAKA,iBAAL,CAAuB0C,MAAvB,GACD,CACDvE,UAAU,CAACuE,MAAX,CAAkB,IAAlB,EAEA,IAAI,KAAKzC,aAAT,EAAwB,CACtB,KAAKA,aAAL,CAAmBwC,mBAAnB,CAAuC,QAAvC,EAAiD3E,YAAY,CAACkE,IAA9D,EACD,CACF,CA5DH,QA8DSW,MA9DT,GA8DE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAvEH,QAyEUA,UAzEV,GAyEE,sBAAqB,mBACnB,kBAA2C,KAAKpD,KAAhD,CAAQI,SAAR,eAAQA,SAAR,CAAmBC,SAAnB,eAAmBA,SAAnB,CAA8BC,QAA9B,eAA8BA,QAA9B,CAEA,IAAM+C,iBAAoC,GAAG,EAC3CjD,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,CAAC,KAAK9B,KAAL,CAAW0C,OAAhB,EAAyB,CACvBD,iBAAiB,CAACzD,KAAlB,GAA0B,EACxBiB,YAAY,EAAE,KAAKD,KAAL,CAAWC,YADD,EAExBF,YAAY,EAAE,KAAKA,YAFK,EAA1B,CAID,CACD,IAAI,CAACN,SAAL,EAAgB,CACdgD,iBAAiB,CAACE,iBAAlB,GAAsC,IAAtC,CACD,CACD,IAAIlD,SAAS,IAAIC,QAAjB,EAA2B,CACzB+C,iBAAiB,CAACE,iBAAlB,GAAsC,IAAtC,CACD,CAED,IAAMC,KAAkC,GAAG,EAA3C,CACA,IAAMC,cAA2C,GAAG,EAApD,CAEA,IAAI,KAAK7C,KAAL,CAAW8C,KAAf,EAAsB,CACpBF,KAAK,CAACE,KAAN,GAAc,KAAK9C,KAAL,CAAW8C,KAAzB,CACD,CAFD,MAEO,CACLD,cAAc,CAACC,KAAf,GAAuB,MAAvB,CACD,CAED,oBACE,oBAAC,eAAD,qBACE,oBAAC,aAAD,EAAmB,KAAK9C,KAAxB,eACE,oBAAC,MAAD,IAAQ,QAAQ,EAAE,OAAlB,EAA2B,SAAS,EAAErB,MAAM,CAACoE,IAAP,EAAtC,iBACE,oBAAC,sBAAD,OADF,EAEG,KAAK3D,KAAL,CAAWE,aAAX,iBAA4B,6BAAK,SAAS,EAAEX,MAAM,CAACqE,EAAP,CAAU,KAAKT,KAAf,CAAhB,GAF/B,eAGE,6BACE,GAAG,EAAE,KAAKpC,YADZ,EAEE,SAAS,EAAExB,MAAM,CAACG,SAAP,EAFb,EAGE,WAAW,EAAE,KAAK4B,wBAHpB,EAIE,SAAS,EAAE,KAAKG,sBAJlB,EAKE,OAAO,EAAE,KAAKC,oBALhB,EAME,YAAUjC,aAAa,CAACC,SAN1B,iBAQE,oBAAC,gBAAD,QACG,gBAAkB,qCAAfmE,QAAe,QAAfA,QAAe,CACjB,oBACE,6BACE,SAAS,EAAE9E,EAAE,gBACVQ,MAAM,CAACuE,eAAP,EADU,IACiB,IADjB,MAEVvE,MAAM,CAACwE,qBAAP,EAFU,IAEuBF,QAFvB,MAGVtE,MAAM,CAACyE,QAAP,EAHU,IAGUC,OAAO,CAAC,MAAI,CAACrD,KAAL,CAAWoD,QAAZ,CAHjB,OADf,EAME,KAAK,EAAEH,QAAQ,GAAGK,SAAH,GAAeT,cANhC,EAOE,YAAUhE,aAAa,CAACE,OAP1B,iBASE,6BACE,SAAS,EAAEZ,EAAE,kBAAIQ,MAAM,CAACsD,MAAP,CAAc,MAAI,CAACM,KAAnB,CAAJ,IAAgC,IAAhC,OAAuC5D,MAAM,CAAC4E,YAAP,EAAvC,IAA+DN,QAA/D,QADf,EAEE,KAAK,EAAEA,QAAQ,GAAGK,SAAH,GAAeV,KAFhC,iBAIE,oBAAC,cAAD,IAAgB,QAAQ,EAAE,MAAI,CAAClB,YAA/B,EAA6C,UAAU,EAAEuB,QAAzD,iBACE,oBAAC,SAAD,IACE,QAAQ,EAAE,MAAI,CAAC/D,QAAL,GAAgBsE,gBAD5B,EAEE,SAAS,EAAE,KAFb,EAGE,SAAS,EAAErF,EAAE,kBAAIQ,MAAM,CAAC8E,mBAAP,EAAJ,IAAmCR,QAAnC,SAA+C,sBAA/C,CAHf,IAKG,CAACzD,SAAD,IAAc,CAAC,MAAI,CAACQ,KAAL,CAAW0C,OAA1B,iBACC,oBAAC,MAAD,IACE,QAAQ,EAAE,YADZ,EAEE,SAAS,EAAEvE,EAAE,kBACVQ,MAAM,CAAC+E,YAAP,CAAoB,MAAI,CAACnB,KAAzB,CADU,IACwB,IADxB,OAEV5D,MAAM,CAACgF,kBAAP,CAA0B,MAAI,CAACpB,KAA/B,CAFU,IAE8BU,QAF9B,QAFf,iBAOE,oBAAC,UAAD,IACE,SAAS,EAAE9E,EAAE,kBACVQ,MAAM,CAACiF,wBAAP,EADU,IAC0BX,QAAQ,IAAI,CAAC,MAAI,CAAC7D,KAAL,CAAWI,SADlD,QADf,EAIE,YAAY,EAAE,MAAI,CAACO,YAJrB,EAKE,YAAY,EAAE,MAAI,CAACC,KAAL,CAAWC,YAL3B,GAPF,CANJ,eAsBE,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAEwC,iBAA9B,IACG,MAAI,CAACzC,KAAL,CAAW6D,QADd,CAtBF,CADF,CAJF,CATF,CADF,CA6CD,CA/CH,CARF,CAHF,CADF,CADF,CADF,CAoED,CA7KH,gBAA2BzG,KAAK,CAAC0G,SAAjC,EAAa7E,K,CACG8E,mB,GAAsB,O,CADzB9E,K,CAGG+E,M,GAASxF,W,CAHZS,K,CAIGgF,I,GAAOxF,S,CAJVQ,K,CAKGiF,M,GAAS3F,W,CALZU,K,CAOGE,Y,GAA6B,EACzC;AACAqE,EAAAA,gBAAgB,EAAEvF,MAFuB,E","sourcesContent":["import React from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { ModalContext, ModalContextProps } from './ModalContext';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalClose } from './ModalClose';\nimport { styles } from './Modal.styles';\n\nlet mountedModalsCount = 0;\n\nexport interface ModalProps extends CommonProps {\n  /**\n   * Отключает событие onClose, также дизейблит кнопку закрытия модалки\n   */\n  disableClose?: boolean;\n\n  /**\n   * Выравнивание окна по верху страницы.\n   */\n  alignTop?: boolean;\n\n  /**\n   * Не закрывать окно при клике на фон.\n   */\n  ignoreBackgroundClick?: boolean;\n\n  /**\n   * Не показывать крестик для закрытия окна.\n   */\n  noClose?: boolean;\n  width?: number | string;\n\n  /**\n   * Вызывается, когда пользователь запросил закрытие окна (нажал на фон, на\n   * Escape или на крестик).\n   */\n  onClose?: () => void;\n\n  /**\n   * Не использовать фокус-лок внутри модалки.\n   * По умолчанию true для IE11.\n   */\n  disableFocusLock?: boolean;\n}\n\nexport interface ModalState {\n  stackPosition: number;\n  hasBackground: boolean;\n  horizontalScroll: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n  container: 'modal-container',\n  content: 'modal-content',\n  close: 'modal-close',\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock'>>;\n\n/**\n * Модальное окно\n *\n * Содержит в себе три компоненты: **Modal.Header**,\n * **Modal.Body** и **Modal.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n *\n * Для отключения прилипания шапки и футера\n * в соответствующий компонент нужно передать\n * проп **sticky** со значением **false**\n * (по-умолчанию прилипание включено)\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n  public static __KONTUR_REACT_UI__ = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps: DefaultProps = {\n    // NOTE: в ie нормально не работает\n    disableFocusLock: isIE11,\n  };\n\n  private getProps = createPropsGetter(Modal.defaultProps);\n\n  public state: ModalState = {\n    stackPosition: 0,\n    hasBackground: true,\n    horizontalScroll: false,\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private containerNode: HTMLDivElement | null = null;\n  private mouseDownTarget: EventTarget | null = null;\n  private mouseUpTarget: EventTarget | null = null;\n\n  public componentDidMount() {\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n    if (mountedModalsCount === 0) {\n      window.addEventListener('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    window.addEventListener('keydown', this.handleKeyDown);\n    this.checkHorizontalScrollAppearance();\n\n    if (this.containerNode) {\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (--mountedModalsCount === 0) {\n      window.removeEventListener('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    window.removeEventListener('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n\n    const modalContextProps: ModalContextProps = {\n      hasHeader,\n      horizontalScroll: this.state.horizontalScroll,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n    };\n    if (!this.props.noClose) {\n      modalContextProps.close = {\n        disableClose: this.props.disableClose,\n        requestClose: this.requestClose,\n      };\n    }\n    if (!hasFooter) {\n      modalContextProps.additionalPadding = true;\n    }\n    if (hasFooter && hasPanel) {\n      modalContextProps.additionalPadding = true;\n    }\n\n    const style: { width?: number | string } = {};\n    const containerStyle: { width?: number | string } = {};\n\n    if (this.props.width) {\n      style.width = this.props.width;\n    } else {\n      containerStyle.width = 'auto';\n    }\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <ZIndex priority={'Modal'} className={styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && <div className={styles.bg(this.theme)} />}\n            <div\n              ref={this.refContainer}\n              className={styles.container()}\n              onMouseDown={this.handleContainerMouseDown}\n              onMouseUp={this.handleContainerMouseUp}\n              onClick={this.handleContainerClick}\n              data-tid={ModalDataTids.container}\n            >\n              <ResponsiveLayout>\n                {({ isMobile }) => {\n                  return (\n                    <div\n                      className={cx({\n                        [styles.centerContainer()]: true,\n                        [styles.mobileCenterContainer()]: isMobile,\n                        [styles.alignTop()]: Boolean(this.props.alignTop),\n                      })}\n                      style={isMobile ? undefined : containerStyle}\n                      data-tid={ModalDataTids.content}\n                    >\n                      <div\n                        className={cx({ [styles.window(this.theme)]: true, [styles.mobileWindow()]: isMobile })}\n                        style={isMobile ? undefined : style}\n                      >\n                        <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                          <FocusLock\n                            disabled={this.getProps().disableFocusLock}\n                            autoFocus={false}\n                            className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                          >\n                            {!hasHeader && !this.props.noClose && (\n                              <ZIndex\n                                priority={'ModalCross'}\n                                className={cx({\n                                  [styles.closeWrapper(this.theme)]: true,\n                                  [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                                })}\n                              >\n                                <ModalClose\n                                  className={cx({\n                                    [styles.mobileCloseWithoutHeader()]: isMobile && !this.state.hasHeader,\n                                  })}\n                                  requestClose={this.requestClose}\n                                  disableClose={this.props.disableClose}\n                                />\n                              </ZIndex>\n                            )}\n                            <ModalContext.Provider value={modalContextProps}>\n                              {this.props.children}\n                            </ModalContext.Provider>\n                          </FocusLock>\n                        </ResizeDetector>\n                      </div>\n                    </div>\n                  );\n                }}\n              </ResponsiveLayout>\n            </div>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\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","isNonNullable","isKeyEscape","LayoutEvents","RenderContainer","ZIndex","stopPropagation","HideBodyVerticalScroll","ModalStack","ResizeDetector","ThemeContext","isIE11","CommonWrapper","cx","createPropsGetter","ResponsiveLayout","globalThat","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","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';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isIE11 } from '../../lib/client';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { globalThat } from '../../lib/SSRSafe';\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\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      globalThat.addEventListener('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    globalThat.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      globalThat.removeEventListener('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    globalThat.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);\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 && <div className={styles.bg(this.theme)} />}\n            <div\n              aria-labelledby={ariaLabelledby}\n              ref={this.refContainer}\n              className={styles.container()}\n              onMouseDown={this.handleContainerMouseDown}\n              onMouseUp={this.handleContainerMouseUp}\n              onClick={this.handleContainerClick}\n              data-tid={ModalDataTids.container}\n            >\n              <ResponsiveLayout>\n                {({ isMobile }) => (\n                  <div\n                    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                )}\n              </ResponsiveLayout>\n            </div>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      stopPropagation(e);\n      this.requestClose();\n    }\n  };\n\n  private checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  private setHasHeader = (hasHeader = true) => {\n    this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter = true) => {\n    this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel = false) => {\n    this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n  };\n}\n"]}

package/components/Modal/Modal.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalBody } from './ModalBody';
-export interface ModalProps extends CommonProps {
+export interface ModalProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'>, Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {
     /**
      * Отключает событие onClose, также дизейблит кнопку закрытия модалки
      */
@@ -45,7 +45,7 @@ export declare const ModalDataTids: {
     readonly content: "modal-content";
     readonly close: "modal-close";
 };
-declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock'>>;
+declare type DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role'>>;
 /**
  * Модальное окно
  *