@skbkontur/react-ui 0.0.0-80ce75eca6 → 0.0.0-85ea551f96

package/cjs/components/MenuItem/MenuItem.md

@@ -1,7 +1,109 @@
-```jsx harmony
-import { Link } from '@skbkontur/react-ui';
-
-<MenuItem href="http://tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
-  Awesome link
-</MenuItem>;
-```
+Меню с базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
+  >
+  <MenuItem>Базовый элемент меню</MenuItem>
+  <MenuItem>Ещё один базовый элемент меню</MenuItem>
+  <MenuItem>И ещё один</MenuItem>
+</DropdownMenu>
+```
+
+Меню с отключёнными и базовыми элементами меню.
+<br/>
+К отключённым элементам меню не применяются стили при наведении и их нельзя затаргетить с клавиатуры.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это отключённый</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова отключённый</MenuItem>
+  <MenuItem disabled>И вот ещё один отключённый</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими описание.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
+  >
+  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
+  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
+  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
+  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
+  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими иконки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+import DeviceSmartphoneIcon from '@skbkontur/react-icons/DeviceSmartphone';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
+
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с иконками</Button>}
+  >
+  <MenuItem icon={<OkIcon />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem
+    disabled
+    icon={<ThumbDownIcon />}
+    >
+    Отключённый элемент меню с иконкой
+  </MenuItem>
+  <MenuItem
+    icon={<DeviceSmartphoneIcon />}
+    comment="А слева вы можете видеть икону 21-го века"
+    >
+     Элемент меню с описанием и иконкой
+  </MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню обёрнутыми в контрол ссылки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu, Link } from '@skbkontur/react-ui';
+
+const LinkMenuItem = ({link, title}) => {
+  return <MenuItem
+    href={link}
+    component={({ href, ...rest }) => {
+      return <Link target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+    }}
+    >
+    {title}
+  </MenuItem>
+}
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с ссылками</Button>}
+  >
+  <LinkMenuItem
+    link="http://tech.skbkontur.ru/react-ui/"
+    title="Начало документации"
+    />
+  <LinkMenuItem
+    link="https://guides.kontur.ru/"
+    title="Контур Гайды"
+    />
+  <LinkMenuItem
+    link="https://github.com/skbkontur/retail-ui/graphs/contributors"
+    title="Список прекрасных людей"
+    />
+</DropdownMenu>
+```

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

@@ -1,12 +1,13 @@
-export declare const jsStyles: {
-    root(): string;
-    hover(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    selected(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    hover(t: Theme): string;
+    selected(t: Theme): string;
+    disabled(t: Theme): string;
+    link(t: Theme): string;
     loose(): string;
-    withIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    comment(): string;
-    commentHover(): string;
-    icon(): string;
+    withIcon(t: Theme): string;
+    comment(t: Theme): string;
+    commentHover(t: Theme): string;
+    icon(t: Theme): string;
 };

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

@@ -1,80 +1,86 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _Emotion = require("../../lib/theming/Emotion");
-var _Mixins = require("../../lib/styles/Mixins");function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      position: absolute;\n      left: 15px;\n      top: 5px;\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #fff;\n      opacity: 0.6;\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #a0a0a0;\n      white-space: normal;\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        padding-left: ", ";\n      }\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 15px;\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      color: ", " !important;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: 18px;\n      padding: 6px 18px 7px 8px;\n      position: relative;\n      text-decoration: none;\n\n      button& {\n        min-width: 100%;\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-var styles = {
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject(),
-    (0, _Mixins.resetButton)());
+var styles = (0, _Emotion.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 (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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\n      button& {\n        min-width: 100%;\n      }\n    "])),
+    (0, _Mixins.resetButton)(),
 
 
 
+    t.menuItemLineHeight,
+    t.menuItemFontSize,
+    t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX,
 
 
+    t.menuItemTextColor);
 
 
 
 
 
   },
+
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
-    return (0, _Emotion.css)(_templateObject2(),
-    t.dropdownMenuHoverBg,
-    t.textColorInvert);
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important;\n      color: ", " !important;\n    "])),
+    t.menuItemHoverBg,
+    t.menuItemHoverColor);
 
   },
   selected: function selected(t) {
-    return (0, _Emotion.css)(_templateObject3(),
-    t.dropdownMenuSelectedBg);
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important;\n    "])),
+    t.menuItemSelectedBg);
 
   },
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject4(),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])),
 
-    t.textColorDisabled);
+    t.menuItemDisabledColor);
 
 
   },
   link: function link(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    t.linkColor);
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.menuItemLinkColor);
 
   },
   loose: function loose() {
-    return (0, _Emotion.css)(_templateObject6());
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 15px;\n    "])));
 
 
   },
   withIcon: function withIcon(t) {
-    return (0, _Emotion.css)(_templateObject7(),
-
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "])),
     t.menuItemPaddingForIcon);
 
-
   },
-  comment: function comment() {
-    return (0, _Emotion.css)(_templateObject8());
-
+  comment: function comment(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      white-space: normal;\n    "])),
+    t.menuItemCommentColor);
 
 
   },
-  commentHover: function commentHover() {
-    return (0, _Emotion.css)(_templateObject9());
-
+  commentHover: function commentHover(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      opacity: 0.6;\n    "])),
+    t.menuItemCommentColorHover);
 
 
   },
-  icon: function icon() {
-    return (0, _Emotion.css)(_templateObject10());
-
-
-
-
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","css","hover","t","dropdownMenuHoverBg","textColorInvert","selected","dropdownMenuSelectedBg","disabled","textColorDisabled","link","linkColor","loose","withIcon","menuItemPaddingForIcon","comment","commentHover","icon","jsStyles"],"mappings":";AACA;AACA,iD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;AACI,8BADJ;;;;;;;;;;;;;AAcD,GAhBY;AAiBbC,EAAAA,KAjBa,iBAiBPC,CAjBO,EAiBG;AACd;AACA,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACC,mBADlB;AAEWD,IAAAA,CAAC,CAACE,eAFb;;AAID,GAvBY;AAwBbC,EAAAA,QAxBa,oBAwBJH,CAxBI,EAwBM;AACjB,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACI,sBADlB;;AAGD,GA5BY;AA6BbC,EAAAA,QA7Ba,oBA6BJL,CA7BI,EA6BM;AACjB,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACM,iBAFb;;;AAKD,GAnCY;AAoCbC,EAAAA,IApCa,gBAoCRP,CApCQ,EAoCE;AACb,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACQ,SADb;;AAGD,GAxCY;AAyCbC,EAAAA,KAzCa,mBAyCL;AACN,eAAOX,YAAP;;;AAGD,GA7CY;AA8CbY,EAAAA,QA9Ca,oBA8CJV,CA9CI,EA8CM;AACjB,eAAOF,YAAP;;AAEoBE,IAAAA,CAAC,CAACW,sBAFtB;;;AAKD,GApDY;AAqDbC,EAAAA,OArDa,qBAqDH;AACR,eAAOd,YAAP;;;;AAID,GA1DY;AA2Dbe,EAAAA,YA3Da,0BA2DE;AACb,eAAOf,YAAP;;;;AAID,GAhEY;AAiEbgB,EAAAA,IAjEa,kBAiEN;AACL,eAAOhB,YAAP;;;;;;AAMD,GAxEY,EAAf;;;AA2EO,IAAMiB,QAAQ,GAAG,2BAAanB,MAAb,CAAjB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      cursor: pointer;\r\n      display: block;\r\n      line-height: 18px;\r\n      padding: 6px 18px 7px 8px;\r\n      position: relative;\r\n      text-decoration: none;\r\n\r\n      button& {\r\n        min-width: 100%;\r\n      }\r\n    `;\r\n  },\r\n  hover(t: Theme) {\r\n    // Color with !important in purpose to override `a:hover`\r\n    return css`\r\n      background: ${t.dropdownMenuHoverBg};\r\n      color: ${t.textColorInvert} !important;\r\n    `;\r\n  },\r\n  selected(t: Theme) {\r\n    return css`\r\n      background: ${t.dropdownMenuSelectedBg};\r\n    `;\r\n  },\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: transparent;\r\n      color: ${t.textColorDisabled};\r\n      cursor: default;\r\n    `;\r\n  },\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.linkColor};\r\n    `;\r\n  },\r\n  loose() {\r\n    return css`\r\n      padding-left: 15px;\r\n    `;\r\n  },\r\n  withIcon(t: Theme) {\r\n    return css`\r\n      & {\r\n        padding-left: ${t.menuItemPaddingForIcon};\r\n      }\r\n    `;\r\n  },\r\n  comment() {\r\n    return css`\r\n      color: #a0a0a0;\r\n      white-space: normal;\r\n    `;\r\n  },\r\n  commentHover() {\r\n    return css`\r\n      color: #fff;\r\n      opacity: 0.6;\r\n    `;\r\n  },\r\n  icon() {\r\n    return css`\r\n      display: inline-block;\r\n      position: absolute;\r\n      left: 15px;\r\n      top: 5px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","css","menuItemLineHeight","menuItemFontSize","menuItemTextColor","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":";AACA;AACA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,cAAc,GAAGC,UAAU,CAACF,CAAC,CAACG,sBAAH,CAAjC;AACA,QAAMC,cAAc,GAAGF,UAAU,CAACF,CAAC,CAACK,sBAAH,CAAjC;;AAEA,QAAMC,QAAQ,GAAGL,cAAc,KAAK,CAAnB,GAA0BC,UAAU,CAACF,CAAC,CAACO,gBAAH,CAAV,GAAiCN,cAA3D,UAAgFD,CAAC,CAACO,gBAAnG;AACA,QAAMC,QAAQ,GAAGJ,cAAc,KAAK,CAAnB,GAA0BF,UAAU,CAACF,CAAC,CAACS,gBAAH,CAAV,GAAiCL,cAA3D,UAAgFJ,CAAC,CAACS,gBAAnG;;AAEA,eAAOC,YAAP;AACI,8BADJ;;;;AAKiBV,IAAAA,CAAC,CAACW,kBALnB;AAMeX,IAAAA,CAAC,CAACY,gBANjB;AAOaZ,IAAAA,CAAC,CAACS,gBAPf,EAOmCH,QAPnC,EAO+CE,QAP/C,EAO2DR,CAAC,CAACO,gBAP7D;;;AAUWP,IAAAA,CAAC,CAACa,iBAVb;;;;;;AAgBD,GAxBgC;;AA0BjCC,EAAAA,KA1BiC,iBA0B3Bd,CA1B2B,EA0BjB;AACd;AACA,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACe,eADlB;AAEWf,IAAAA,CAAC,CAACgB,kBAFb;;AAID,GAhCgC;AAiCjCC,EAAAA,QAjCiC,oBAiCxBjB,CAjCwB,EAiCd;AACjB,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACkB,kBADlB;;AAGD,GArCgC;AAsCjCC,EAAAA,QAtCiC,oBAsCxBnB,CAtCwB,EAsCd;AACjB,eAAOU,YAAP;;AAEWV,IAAAA,CAAC,CAACoB,qBAFb;;;AAKD,GA5CgC;AA6CjCC,EAAAA,IA7CiC,gBA6C5BrB,CA7C4B,EA6ClB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAACsB,iBADb;;AAGD,GAjDgC;AAkDjCC,EAAAA,KAlDiC,mBAkDzB;AACN,eAAOb,YAAP;;;AAGD,GAtDgC;AAuDjCc,EAAAA,QAvDiC,oBAuDxBxB,CAvDwB,EAuDd;AACjB,eAAOU,YAAP;AACkBV,IAAAA,CAAC,CAACyB,sBADpB;;AAGD,GA3DgC;AA4DjCC,EAAAA,OA5DiC,mBA4DzB1B,CA5DyB,EA4Df;AAChB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC2B,oBADb;;;AAID,GAjEgC;AAkEjCC,EAAAA,YAlEiC,wBAkEpB5B,CAlEoB,EAkEV;AACrB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC6B,yBADb;;;AAID,GAvEgC;AAwEjCC,EAAAA,IAxEiC,gBAwE5B9B,CAxE4B,EAwElB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC+B,iBADb;;;AAIUC,IAAAA,QAAQ,CAAChC,CAAC,CAACO,gBAAH,CAAR,GAA+ByB,QAAQ,CAAChC,CAAC,CAACiC,wBAAH,CAJjD;AAKSjC,IAAAA,CAAC,CAACS,gBALX;AAM0BT,IAAAA,CAAC,CAACkC,uBAN5B;;AAQD,GAjFgC,EAAb,CAAf,C","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\n      button& {\n        min-width: 100%;\n      }\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"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuItem';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuItem';\n"]}

package/cjs/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuSeparatorProps = CommonProps;
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {

package/cjs/components/MenuSeparator/MenuSeparator.js

@@ -6,15 +6,17 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _MenuSeparator = require("./MenuSeparator.styles");
 
 
-/**
- * Разделитель в меню.
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
 function MenuSeparator(props) {
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
 
   return /*#__PURE__*/(
     _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
-    _react.default.createElement("div", { className: _MenuSeparator.jsStyles.root(theme) })));
+    _react.default.createElement("div", { className: _MenuSeparator.styles.root(theme) })));
 
 
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparator","props","theme","ThemeContext","jsStyles","root","__KONTUR_REACT_UI__"],"mappings":"oKAAA;;AAEA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE,0CAAK,SAAS,EAAEG,wBAASC,IAAT,CAAcH,KAAd,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACM,mBAAd,GAAoC,eAApC","sourcesContent":["import React, { useContext } from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuSeparator.styles';\r\n\r\nexport type MenuSeparatorProps = CommonProps;\r\n/**\r\n * Разделитель в меню.\r\n */\r\nfunction MenuSeparator(props: MenuSeparatorProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <CommonWrapper {...props}>\r\n      <div className={jsStyles.root(theme)} />\r\n    </CommonWrapper>\r\n  );\r\n}\r\n\r\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\r\n\r\nexport { MenuSeparator };\r\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparator","props","theme","ThemeContext","styles","root","__KONTUR_REACT_UI__"],"mappings":"oKAAA;;AAEA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE,0CAAK,SAAS,EAAEG,sBAAOC,IAAP,CAAYH,KAAZ,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACM,mBAAd,GAAoC,eAApC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n/**\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 className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/cjs/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

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

@@ -1,3 +1,4 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
 };

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

@@ -1,13 +1,10 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: 5px 0;\n      border-top: 1px solid ", ";\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
 
 
-var styles = {
+var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject(),
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin: ", " 0;\n      border-top: ", " solid ", ";\n    "])),
+    t.menuSeparatorMarginY,
+    t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
 
-    t.menuSeparatorBorderColor);
-
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["styles","root","t","css","menuSeparatorBorderColor","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,eAAOC,YAAP;;AAE0BD,IAAAA,CAAC,CAACE,wBAF5B;;AAID,GANY,EAAf;;;AASO,IAAMC,QAAQ,GAAG,2BAAaL,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      margin: 5px 0;\r\n      border-top: 1px solid ${t.menuSeparatorBorderColor};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["styles","root","t","css","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACE,oBADd;AAEgBF,IAAAA,CAAC,CAACG,wBAFlB,EAEoDH,CAAC,CAACI,wBAFtD;;AAID,GANgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n});\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuSeparator';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuSeparator';\n"]}

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

@@ -36,6 +36,9 @@ export interface ModalState {
     stackPosition: number;
     hasBackground: boolean;
     horizontalScroll: boolean;
+    hasHeader: boolean;
+    hasFooter: boolean;
+    hasPanel: boolean;
 }
 /**
  * Модальное окно
@@ -56,9 +59,6 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     static Header: typeof ModalHeader;
     static Body: typeof ModalBody;
     static Footer: typeof ModalFooter;
-    static propTypes: {
-        children(props: ModalProps, propName: "style" | "width" | "className" | "data-tid" | "onClose" | "disableClose" | "ignoreBackgroundClick" | "alignTop" | "noClose" | "disableFocusLock", componentName: string): Error | undefined;
-    };
     static defaultProps: {
         disableFocusLock: boolean;
     };
@@ -81,4 +81,7 @@ export declare class Modal extends React.Component<ModalProps, ModalState> {
     private handleKeyDown;
     private checkHorizontalScrollAppearance;
     private handleResize;
+    private setHasHeader;
+    private setHasFooter;
+    private setHasPanel;
 }

package/cjs/components/Modal/Modal.js

@@ -1,6 +1,5 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Modal = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
@@ -14,11 +13,11 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _client = require("../../lib/client");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
 var _ModalContext = require("./ModalContext");
 var _ModalFooter = require("./ModalFooter");
 var _ModalHeader = require("./ModalHeader");
-var _helpers = require("./helpers");
 var _ModalBody = require("./ModalBody");
 var _ModalClose = require("./ModalClose");
 var _Modal = require("./Modal.styles");
@@ -59,30 +58,6 @@ var mountedModalsCount = 0;
 
 
 
-
-
-
-
-
-
-
-/**
- * Модальное окно
- *
- * Содержит в себе три компоненты: **Modal.Header**,
- * **Modal.Body** и **Modal.Footer**
- *
- * Для отображения серой плашки в футере в компонент
- * **Footer** необходимо передать пропс **panel**
- *
- * Для отключения прилипания шапки и футера
- * в соответствующий компонет нужно передать
- * проп **sticky** со значением **false**
- * (по-умолчанию прилипание включено)
- */var
-Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Modal, _React$Component);function Modal() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
-
-
 
 
 
@@ -93,6 +68,21 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
 
 
 
+/**
+ * Модальное окно
+ *
+ * Содержит в себе три компоненты: **Modal.Header**,
+ * **Modal.Body** и **Modal.Footer**
+ *
+ * Для отображения серой плашки в футере в компонент
+ * **Footer** необходимо передать пропс **panel**
+ *
+ * Для отключения прилипания шапки и футера
+ * в соответствующий компонет нужно передать
+ * проп **sticky** со значением **false**
+ * (по-умолчанию прилипание включено)
+ */var
+Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Modal, _React$Component);function Modal() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -107,7 +97,10 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
     state = {
       stackPosition: 0,
       hasBackground: true,
-      horizontalScroll: false };_this.
+      horizontalScroll: false,
+      hasHeader: false,
+      hasFooter: false,
+      hasPanel: false };_this.
 
 
     theme = void 0;_this.
@@ -222,17 +215,6 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
 
 
 
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -306,5 +288,17 @@ Modal = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(M
 
     handleResize = function (event) {
       LayoutEvents.emit();
-    };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {window.addEventListener('resize', this.checkHorizontalScrollAppearance);}mountedModalsCount++;window.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {window.removeEventListener('resize', this.checkHorizontalScrollAppearance);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn;var hasHeader = false;var hasFooter = false;var hasPanel = false;_react.default.Children.toArray(this.props.children).forEach(function (child) {if ((0, _helpers.isHeader)(child)) {hasHeader = true;}if ((0, _helpers.isFooter)(child)) {hasFooter = true;if (child.props.panel) {hasPanel = true;}}});var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll };if (hasHeader && !this.props.noClose) {modalContextProps.close = { disableClose: this.props.disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (this.props.width) {style.width = this.props.width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.jsStyles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.jsStyles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.jsStyles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": "modal-container" }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)((_cn = {}, _cn[_Modal.jsStyles.centerContainer(this.theme)] = true, _cn[_Modal.jsStyles.alignTop(this.theme)] = Boolean(this.props.alignTop), _cn)), style: containerStyle, "data-tid": "modal-content" }, /*#__PURE__*/_react.default.createElement("div", { className: _Modal.jsStyles.window(this.theme), style: style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.handleResize }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: this.props.disableFocusLock, autoFocus: false }, !hasHeader && !this.props.noClose ? /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalCross', className: _Modal.jsStyles.closeWrapper() }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { requestClose: this.requestClose, disableClose: this.props.disableClose })) : null, /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, this.props.children)))))))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.propTypes = { children: function children(props, propName, componentName) {if (_react.default.Children.toArray(props[propName]).some(function (child) {return !(0, _helpers.isHeader)(child) && !(0, _helpers.isBody)(child) && !(0, _helpers.isFooter)(child);})) {return new Error("Only 'Header/Body/Footer' components are allowed for '" + propName + "' prop of '" + componentName + "' component");}} };Modal.defaultProps = { // NOTE: в ie нормально не работает
+    };_this.
+
+    setHasHeader = function (hasHeader) {if (hasHeader === void 0) {hasHeader = true;}
+      _this.state.hasHeader !== hasHeader && _this.setState({ hasHeader: hasHeader });
+    };_this.
+
+    setHasFooter = function (hasFooter) {if (hasFooter === void 0) {hasFooter = true;}
+      _this.state.hasFooter !== hasFooter && _this.setState({ hasFooter: hasFooter });
+    };_this.
+
+    setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
+      _this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
+    };return _this;}var _proto = Modal.prototype;_proto.componentDidMount = function componentDidMount() {this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);if (mountedModalsCount === 0) {window.addEventListener('resize', this.checkHorizontalScrollAppearance);}mountedModalsCount++;window.addEventListener('keydown', this.handleKeyDown);this.checkHorizontalScrollAppearance();if (this.containerNode) {this.containerNode.addEventListener('scroll', LayoutEvents.emit);}};_proto.componentWillUnmount = function componentWillUnmount() {if (--mountedModalsCount === 0) {window.removeEventListener('resize', this.checkHorizontalScrollAppearance);LayoutEvents.emit();}window.removeEventListener('keydown', this.handleKeyDown);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);if (this.containerNode) {this.containerNode.removeEventListener('scroll', LayoutEvents.emit);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx;var _this$state = this.state,hasHeader = _this$state.hasHeader,hasFooter = _this$state.hasFooter,hasPanel = _this$state.hasPanel;var modalContextProps = { hasHeader: hasHeader, horizontalScroll: this.state.horizontalScroll, setHasHeader: this.setHasHeader, setHasFooter: this.setHasFooter, setHasPanel: this.setHasPanel };if (hasHeader && !this.props.noClose) {modalContextProps.close = { disableClose: this.props.disableClose, requestClose: this.requestClose };}if (!hasFooter) {modalContextProps.additionalPadding = true;}if (hasFooter && hasPanel) {modalContextProps.additionalPadding = true;}var style = {};var containerStyle = {};if (this.props.width) {style.width = this.props.width;} else {containerStyle.width = 'auto';}return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Modal', className: _Modal.styles.root() }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, null), this.state.hasBackground && /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.bg(this.theme) }), /*#__PURE__*/_react.default.createElement("div", { ref: this.refContainer, className: _Modal.styles.container(), onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, "data-tid": "modal-container" }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx = {}, _cx[_Modal.styles.centerContainer(this.theme)] = true, _cx[_Modal.styles.alignTop()] = Boolean(this.props.alignTop), _cx)), style: containerStyle, "data-tid": "modal-content" }, /*#__PURE__*/_react.default.createElement("div", { className: _Modal.styles.window(this.theme), style: style }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.handleResize }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: this.props.disableFocusLock, autoFocus: false }, !hasHeader && !this.props.noClose ? /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'ModalCross', className: _Modal.styles.closeWrapper(this.theme) }, /*#__PURE__*/_react.default.createElement(_ModalClose.ModalClose, { requestClose: this.requestClose, disableClose: this.props.disableClose })) : null, /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, { value: modalContextProps }, this.props.children)))))))));};return Modal;}(_react.default.Component);exports.Modal = Modal;Modal.__KONTUR_REACT_UI__ = 'Modal';Modal.Header = _ModalHeader.ModalHeader;Modal.Body = _ModalBody.ModalBody;Modal.Footer = _ModalFooter.ModalFooter;Modal.defaultProps = { // NOTE: в ie нормально не работает
   disableFocusLock: _client.isIE11 };