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

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["css","cssName","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","bgDefault","centerContainer","modalAdaptiveThreshold","alignTop","close","modalCloseButtonColor","modalCloseButtonHoverColor","disabled","modalCloseButtonDisabledColor","closeOutline","borderColorFocus","absoluteClose","closeWrapper","header","body","footer","panel","modalFooterBg","fixedHeader","modalFixedHeaderBg","modalFixedHeaderShadow","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","bodyAddPadding","jsStyles"],"mappings":"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","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      height: 100%;\r\n      left: 0;\r\n      position: fixed;\r\n      top: 0;\r\n      width: 100%;\r\n    `;\r\n  },\r\n\r\n  bg(t: Theme) {\r\n    return css`\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      background: ${t.modalBackBg};\r\n      opacity: ${t.modalBackOpacity};\r\n    `;\r\n  },\r\n\r\n  container() {\r\n    return css`\r\n      position: relative;\r\n      white-space: nowrap;\r\n      text-align: center;\r\n      height: 100%;\r\n      overflow-y: auto;\r\n      outline: none;\r\n\r\n      &::before {\r\n        content: '';\r\n        display: inline-block;\r\n        vertical-align: middle;\r\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\r\n      }\r\n    `;\r\n  },\r\n\r\n  window(t: Theme) {\r\n    return css`\r\n      position: relative;\r\n      white-space: normal;\r\n      margin: auto;\r\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\r\n      background: ${t.bgDefault};\r\n    `;\r\n  },\r\n\r\n  centerContainer(t: Theme) {\r\n    return css`\r\n      position: relative;\r\n      display: inline-block;\r\n      text-align: left;\r\n      vertical-align: middle;\r\n      box-sizing: border-box;\r\n      z-index: 10;\r\n      margin: 40px 20px;\r\n\r\n      @media screen and (max-width: ${t.modalAdaptiveThreshold}) {\r\n        margin: 0;\r\n        width: 100%;\r\n      }\r\n    `;\r\n  },\r\n\r\n  alignTop(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.centerContainer(t))}& {\r\n        vertical-align: top;\r\n      }\r\n    `;\r\n  },\r\n\r\n  close(t: Theme) {\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      background: none;\r\n      margin: 2px 2px 0 0;\r\n      width: 76px;\r\n      height: 65px;\r\n      position: relative;\r\n      float: right;\r\n      cursor: pointer;\r\n\r\n      &:after,\r\n      &:before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 30px;\r\n        right: 40px;\r\n        height: 18px;\r\n        width: 2px;\r\n        background: ${t.modalCloseButtonColor};\r\n      }\r\n\r\n      &:after {\r\n        transform: rotate(45deg);\r\n      }\r\n\r\n      &:before {\r\n        transform: rotate(-45deg);\r\n      }\r\n\r\n      &:focus::before,\r\n      &:focus::after,\r\n      &:hover::before,\r\n      &:hover::after {\r\n        background: ${t.modalCloseButtonHoverColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.close(t))}& {\r\n        pointer-events: none;\r\n        cursor: default;\r\n        color: ${t.modalCloseButtonDisabledColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  closeOutline(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.close(t))} & {\r\n        display: none;\r\n      }\r\n\r\n      ${cssName(styles.close(t))}:focus & {\r\n        border: 2px solid ${t.borderColorFocus};\r\n        position: absolute;\r\n        display: block;\r\n        top: 24px;\r\n        right: 26px;\r\n        width: 26px;\r\n        height: 26px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  absoluteClose() {\r\n    return css`\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  closeWrapper() {\r\n    return css`\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  header() {\r\n    return css`\r\n      font-size: 22px;\r\n      line-height: 30px;\r\n      padding: 24px 110px 11px 30px;\r\n      overflow-wrap: break-word;\r\n      word-wrap: break-word;\r\n    `;\r\n  },\r\n\r\n  body() {\r\n    return css`\r\n      padding: 0 35px 25px 30px;\r\n    `;\r\n  },\r\n\r\n  footer() {\r\n    return css`\r\n      padding: 0 35px 30px 30px;\r\n    `;\r\n  },\r\n\r\n  panel(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.footer())}& {\r\n        padding-top: 20px;\r\n        padding-bottom: 20px;\r\n        background: ${t.modalFooterBg};\r\n      }\r\n    `;\r\n  },\r\n\r\n  fixedHeader(t: Theme) {\r\n    return css`\r\n      margin-bottom: 10px;\r\n      background: ${t.modalFixedHeaderBg};\r\n\r\n      &:after {\r\n        bottom: 11px;\r\n        content: '';\r\n        position: absolute;\r\n        height: 1px;\r\n        width: 100%;\r\n        left: 0;\r\n        z-index: -1;\r\n        box-shadow: ${t.modalFixedHeaderShadow};\r\n      }\r\n    `;\r\n  },\r\n\r\n  fixedFooter(t: Theme) {\r\n    return css`\r\n      padding-top: 20px;\r\n      margin-top: 10px;\r\n      background: ${t.modalFixedHeaderBg};\r\n\r\n      &:before {\r\n        top: 11px;\r\n        content: '';\r\n        position: absolute;\r\n        height: 1px;\r\n        width: 100%;\r\n        left: 0;\r\n        z-index: -1;\r\n        box-shadow: ${t.modalFixedFooterShadow};\r\n      }\r\n    `;\r\n  },\r\n\r\n  headerAddPadding() {\r\n    return css`\r\n      padding-bottom: 22px;\r\n    `;\r\n  },\r\n\r\n  bodyWithoutHeader() {\r\n    return css`\r\n      padding-top: 30px;\r\n    `;\r\n  },\r\n\r\n  bodyAddPadding() {\r\n    return css`\r\n      padding-bottom: 30px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Modal.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","bg","t","modalBackBg","modalBackOpacity","container","window","modalBg","mobileWindow","centerContainer","mobileCenterContainer","alignTop","close","padding","parseInt","modalCloseButtonPadding","modalCloseButtonColor","modalCloseButtonClickArea","modalCloseButtonHoverColor","modalCloseIconSize","mobileClose","mobileModalCloseButtonRightPadding","mobileModalCloseButtonTopPadding","mobileModalHeaderPadding","mobileModalCloseButtonClickArea","mobileModalCloseIconSize","mobileCloseWithoutHeader","closeWrapper","paddingBottom","modalCloseButtonBottomPadding","legacyGap","modalCloseWrapperLegacyGap","legacyShift","modalCloseButtonLegacyShift","blockSizeX","blockSizeY","mobileCloseWrapper","size","bgDefault","disabled","modalCloseButtonDisabledColor","focus","borderColorFocus","headerWrapper","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","footerWrapper","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterShadow","headerAddPadding","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      height: 100%;\n      left: 0;\n      position: fixed;\n      top: 0;\n      width: 100%;\n    `;\n  },\n\n  bg(t: Theme) {\n    return css`\n      bottom: 0;\n      left: 0;\n      position: absolute;\n      right: 0;\n      top: 0;\n      background: ${t.modalBackBg};\n      opacity: ${t.modalBackOpacity};\n    `;\n  },\n\n  container() {\n    return css`\n      position: relative;\n      white-space: nowrap;\n      text-align: center;\n      height: 100%;\n      overflow-y: auto;\n      outline: none;\n\n      &::before {\n        content: '';\n        display: inline-block;\n        vertical-align: middle;\n        height: 80%; /* to vertical align modal 40%/60% of screen height */\n      }\n    `;\n  },\n\n  window(t: Theme) {\n    return css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n      background: ${t.modalBg};\n    `;\n  },\n\n  mobileWindow() {\n    return css`\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    `;\n  },\n\n  centerContainer(t: Theme) {\n    return css`\n      position: relative;\n      display: inline-block;\n      text-align: left;\n      vertical-align: middle;\n      box-sizing: border-box;\n      z-index: 10;\n      margin: 40px 20px;\n    `;\n  },\n\n  mobileCenterContainer() {\n    return css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    `;\n  },\n\n  alignTop() {\n    return css`\n      vertical-align: top;\n    `;\n  },\n\n  close(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    return css`\n      ${resetButton()};\n      position: absolute;\n      display: flex;\n      right: ${padding}px;\n      top: ${padding}px;\n      background: none;\n      background: transparent;\n      cursor: pointer;\n      color: ${t.modalCloseButtonColor};\n      text-align: center;\n      vertical-align: middle;\n      padding: ${t.modalCloseButtonClickArea};\n      margin: -${t.modalCloseButtonClickArea};\n\n      &:hover {\n        color: ${t.modalCloseButtonHoverColor};\n      }\n\n      & > svg {\n        width: ${t.modalCloseIconSize};\n        height: ${t.modalCloseIconSize};\n        box-sizing: content-box;\n      }\n    `;\n  },\n\n  mobileClose(t: Theme) {\n    return css`\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${parseInt(t.mobileModalCloseButtonTopPadding) + parseInt(t.mobileModalHeaderPadding)}px;\n      padding: ${t.mobileModalCloseButtonClickArea};\n      margin: -${t.mobileModalCloseButtonClickArea};\n\n      & > svg {\n        width: ${t.mobileModalCloseIconSize};\n        height: ${t.mobileModalCloseIconSize};\n      }\n    `;\n  },\n\n  mobileCloseWithoutHeader() {\n    return css`\n      position: static;\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const padding = parseInt(t.modalCloseButtonPadding);\n    const paddingBottom = parseInt(t.modalCloseButtonBottomPadding);\n    const legacyGap = parseInt(t.modalCloseWrapperLegacyGap);\n    const legacyShift = parseInt(t.modalCloseButtonLegacyShift);\n    const blockSizeX = parseInt(t.modalCloseIconSize) + 2 * padding - legacyShift;\n    const blockSizeY = parseInt(t.modalCloseIconSize) + padding + paddingBottom + legacyGap;\n    return css`\n      position: relative;\n      float: right;\n      width: ${blockSizeX + legacyGap}px;\n      height: ${blockSizeY}px;\n    `;\n  },\n\n  mobileCloseWrapper(t: Theme) {\n    const size = parseInt(t.mobileModalCloseIconSize) + parseInt(t.mobileModalCloseButtonClickArea) * 2;\n\n    return css`\n      position: absolute;\n      right: ${t.mobileModalCloseButtonRightPadding};\n      top: ${t.mobileModalCloseButtonTopPadding};\n      padding: 0px;\n      margin: 0px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: ${size}px;\n      height: ${size}px;\n      background: radial-gradient(50% 50% at 50% 50%, ${t.bgDefault} 60%, rgba(255, 255, 255, 0) 100%);\n      border-radius: ${size}px;\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  header(t: Theme) {\n    return css`\n      font-size: ${t.modalHeaderFontSize};\n      line-height: ${t.modalHeaderLineHeight};\n      padding: ${t.modalHeaderPaddingTop} ${t.modalPaddingRight} ${t.modalHeaderPaddingBottom} ${t.modalPaddingLeft};\n      overflow-wrap: break-word;\n      word-wrap: break-word;\n      color: ${t.modalHeaderTextColor};\n    `;\n  },\n\n  mobileHeader(t: Theme) {\n    return css`\n      font-size: ${t.mobileModalHeaderFontSize};\n      line-height: ${t.mobileModalHeaderLineHeight};\n      padding: ${t.mobileModalHeaderPadding};\n    `;\n  },\n\n  body(t: Theme) {\n    return css`\n      padding: 0 ${t.modalPaddingRight} ${t.modalBodyPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalBodyTextColor};\n    `;\n  },\n\n  mobileBody(t: Theme) {\n    return css`\n      padding: ${t.mobileModalBodyPadding};\n      padding-top: 0px;\n      display: flex;\n      flex-flow: column;\n      flex: 1;\n      font-size: ${t.mobileModalBodyFontSize};\n    `;\n  },\n\n  headerWithClose(t: Theme) {\n    const rightPadding =\n      2 * parseInt(t.modalCloseButtonPadding) + parseInt(t.modalCloseIconSize) + parseInt(t.modalCloseLegacyGap);\n\n    return css`\n      padding-right: ${rightPadding}px;\n    `;\n  },\n\n  mobileHeaderWithClose(t: Theme) {\n    return css`\n      padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n    `;\n  },\n\n  footer(t: Theme) {\n    return css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalFooterTextColor};\n    `;\n  },\n\n  mobileFooter(t: Theme) {\n    return css`\n      padding: ${t.mobileModalFooterPadding};\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  panel(t: Theme) {\n    return css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n  },\n\n  fixedHeader(t: Theme) {\n    return css`\n      margin-bottom: 10px;\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n\n      &:after {\n        bottom: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedHeaderShadow};\n      }\n    `;\n  },\n\n  mobileFixedHeader(t: Theme) {\n    return css`\n      padding-bottom: ${t.mobileModalHeaderPadding};\n    `;\n  },\n\n  fixedFooter(t: Theme) {\n    return css`\n      padding-top: 20px;\n      margin-top: 10px;\n      background: ${t.modalFixedHeaderBg};\n\n      &:before {\n        top: 11px;\n        content: '';\n        position: absolute;\n        height: 1px;\n        width: 100%;\n        left: 0;\n        z-index: -1;\n        box-shadow: ${t.modalFixedFooterShadow};\n      }\n    `;\n  },\n\n  headerAddPadding() {\n    return css`\n      padding-bottom: 22px;\n    `;\n  },\n\n  bodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n  },\n\n  mobileBodyWithoutHeader(t: Theme) {\n    return css`\n      padding-top: 0px;\n    `;\n  },\n\n  bodyWithoutPadding() {\n    return css`\n      padding: 0;\n    `;\n  },\n\n  bodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n  },\n\n  mobileBodyAddPaddingForPanel(t: Theme) {\n    return css`\n      padding-bottom: ${t.mobileModalBodyPadding};\n    `;\n  },\n\n  columnFlexContainer() {\n    return css`\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: scroll;\n    `;\n  },\n});\n"]}

package/components/Modal/Modal.styles/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Modal\\Modal.styles.js",
+  "main": "../../../cjs/components/Modal/Modal.styles.js",
   "module": "Modal.styles",
-  "types": "..\\Modal.styles.d.ts",
+  "types": "../Modal.styles.d.ts",
   "sideEffects": false
 }

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

@@ -1,22 +1,39 @@
-export declare const jsStyles: {
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
     root(): string;
-    bg(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+    bg(t: Theme): string;
     container(): string;
-    window(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    centerContainer(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    alignTop(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    closeOutline(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    absoluteClose(): string;
-    closeWrapper(): string;
-    header(): string;
-    body(): string;
-    footer(): string;
-    panel(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    fixedHeader(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
-    fixedFooter(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> | Readonly<typeof import("../../internal/themes/FlatTheme").FlatTheme>): string;
+    window(t: Theme): string;
+    mobileWindow(): string;
+    centerContainer(t: Theme): string;
+    mobileCenterContainer(): string;
+    alignTop(): string;
+    close(t: Theme): string;
+    mobileClose(t: Theme): string;
+    mobileCloseWithoutHeader(): string;
+    closeWrapper(t: Theme): string;
+    mobileCloseWrapper(t: Theme): string;
+    disabled(t: Theme): string;
+    focus(t: Theme): string;
+    headerWrapper(): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    body(t: Theme): string;
+    mobileBody(t: Theme): string;
+    headerWithClose(t: Theme): string;
+    mobileHeaderWithClose(t: Theme): string;
+    footer(t: Theme): string;
+    mobileFooter(t: Theme): string;
+    footerWrapper(): string;
+    panel(t: Theme): string;
+    fixedHeader(t: Theme): string;
+    mobileFixedHeader(t: Theme): string;
+    fixedFooter(t: Theme): string;
     headerAddPadding(): string;
-    bodyWithoutHeader(): string;
-    bodyAddPadding(): string;
+    bodyWithoutHeader(t: Theme): string;
+    mobileBodyWithoutHeader(t: Theme): string;
+    bodyWithoutPadding(): string;
+    bodyAddPaddingForPanel(t: Theme): string;
+    mobileBodyAddPaddingForPanel(t: Theme): string;
+    columnFlexContainer(): string;
 };

package/components/Modal/ModalBody/ModalBody.js

@@ -1,43 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import cn from 'classnames';
-import { ZIndex } from "..\\..\\..\\internal\\ZIndex";
-import { ModalContext } from "..\\ModalContext";
-import { jsStyles } from "..\\Modal.styles";
-/**
-                                            * Контейнер с отступами от края модалки
-                                            *
-                                            * @visibleName Modal.Body
-                                            */
-
-export var ModalBody =
-/*#__PURE__*/
-function (_React$Component) {
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ZIndex } from "../../../internal/ZIndex";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { responsiveLayout } from "../../ResponsiveLayout/decorator";
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { ResizeDetector } from "../../../internal/ResizeDetector";
+import { rootNode } from "../../../lib/rootNode";
+import { ModalContext } from "../ModalContext";
+import { styles } from "../Modal.styles";
+export
+/**
+* Контейнер с отступами от края модалки
+*
+* @visibleName Modal.Body
+*/
+var ModalBody = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ModalBody, _React$Component);
 
   function ModalBody() {
-    return _React$Component.apply(this, arguments) || this;
+    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.handleResize = function (event) {
+      LayoutEvents.emit();
+    };
+
+    return _this;
   }
 
   var _proto = ModalBody.prototype;
 
   _proto.render = function render() {
-    var _this = this;
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
 
-    return React.createElement(ModalContext.Consumer, null, function (_ref) {
-      var _cn;
+    var noPadding = this.props.noPadding;
+    return /*#__PURE__*/React.createElement(ModalContext.Consumer, null, function (_ref) {
+      var _cx;
 
       var additionalPadding = _ref.additionalPadding,
           hasHeader = _ref.hasHeader;
-      return React.createElement(ZIndex, {
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement(ZIndex, {
         priority: 'ModalBody',
         createStackingContext: true,
-        className: cn((_cn = {}, _cn[jsStyles.body()] = true, _cn[jsStyles.bodyWithoutHeader()] = !hasHeader, _cn[jsStyles.bodyAddPadding()] = additionalPadding, _cn))
-      }, _this.props.children);
+        className: cx((_cx = {}, _cx[styles.body(_this3.theme)] = true, _cx[styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _cx[styles.bodyWithoutHeader(_this3.theme)] = !hasHeader, _cx[styles.mobileBodyWithoutHeader(_this3.theme)] = !hasHeader && _this3.isMobileLayout, _cx[styles.bodyAddPaddingForPanel(_this3.theme)] = additionalPadding, _cx[styles.mobileBodyAddPaddingForPanel(_this3.theme)] = additionalPadding && _this3.isMobileLayout, _cx[styles.bodyWithoutPadding()] = noPadding, _cx))
+      }, _this3.isMobileLayout ? /*#__PURE__*/React.createElement(ResizeDetector, {
+        onResize: _this3.handleResize
+      }, _this3.props.children) : _this3.props.children));
     });
   };
 
   return ModalBody;
-}(React.Component);
-ModalBody.__KONTUR_REACT_UI__ = 'ModalBody';
-ModalBody.__MODAL_BODY__ = true;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalBody.tsx"],"names":["React","cn","ZIndex","ModalContext","jsStyles","ModalBody","render","additionalPadding","hasHeader","body","bodyWithoutHeader","bodyAddPadding","props","children","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,QAAT,QAAyB,gBAAzB;;AAEA;;;;;AAKA,WAAaC,SAAb;;;;AAISC,EAAAA,MAJT,GAIE,kBAA6B;AAC3B;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,mCAAGC,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,8BAAC,MAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAEP,EAAE;AACVG,YAAAA,QAAQ,CAACK,IAAT,EADU,IACQ,IADR;AAEVL,YAAAA,QAAQ,CAACM,iBAAT,EAFU,IAEqB,CAACF,SAFtB;AAGVJ,YAAAA,QAAQ,CAACO,cAAT,EAHU,IAGkBJ,iBAHlB,OAHf;;;AASG,UAAA,KAAI,CAACK,KAAL,CAAWC,QATd,CADD,GADH,CADF;;;;;AAiBD,GAtBH,oBAA+Bb,KAAK,CAACc,SAArC,EAAaT,S,CACGU,mB,GAAsB,W,CADzBV,S,CAEGW,c,GAAiB,I","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { ModalContext } from './ModalContext';\r\nimport { jsStyles } from './Modal.styles';\r\n\r\n/**\r\n * Контейнер с отступами от края модалки\r\n *\r\n * @visibleName Modal.Body\r\n */\r\nexport class ModalBody extends React.Component {\r\n  public static __KONTUR_REACT_UI__ = 'ModalBody';\r\n  public static __MODAL_BODY__ = true;\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ModalContext.Consumer>\r\n        {({ additionalPadding, hasHeader }) => (\r\n          <ZIndex\r\n            priority={'ModalBody'}\r\n            createStackingContext\r\n            className={cn({\r\n              [jsStyles.body()]: true,\r\n              [jsStyles.bodyWithoutHeader()]: !hasHeader,\r\n              [jsStyles.bodyAddPadding()]: additionalPadding,\r\n            })}\r\n          >\r\n            {this.props.children}\r\n          </ZIndex>\r\n        )}\r\n      </ModalContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ModalBody.tsx"],"names":["React","ThemeContext","ZIndex","CommonWrapper","cx","responsiveLayout","LayoutEvents","ResizeDetector","rootNode","ModalContext","styles","ModalBody","handleResize","event","emit","render","theme","renderMain","noPadding","props","additionalPadding","hasHeader","setRootNode","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;AACA,SAASC,cAAT,QAA+B,+BAA/B;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,YAAT,QAA6B,gBAA7B;AACA,SAASC,MAAT,QAAuB,gBAAvB;;;;;;;;;;;;;;;;AAgBA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,SAAb,GAFCN,gBAED,UADCG,QACD;;;;;;;;;;;;;;;AAmBUI,IAAAA,YAnBV,GAmByB,UAACC,KAAD,EAAoB;AACzCP,MAAAA,YAAY,CAACQ,IAAb;AACD,KArBH,uDAQSC,MART,GAQE,kBAAgB,mBACd,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,CAjBH;;AAuBSA,EAAAA,UAvBT,GAuBE,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,mCAAGE,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,8BAAC,aAAD,aAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACH,KAAvD;AACE,8BAAC,MAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAEf,EAAE;AACVM,YAAAA,MAAM,CAACa,IAAP,CAAY,MAAI,CAACP,KAAjB,CADU,IACgB,IADhB;AAEVN,YAAAA,MAAM,CAACc,UAAP,CAAkB,MAAI,CAACR,KAAvB,CAFU,IAEsB,MAAI,CAACS,cAF3B;AAGVf,YAAAA,MAAM,CAACgB,iBAAP,CAAyB,MAAI,CAACV,KAA9B,CAHU,IAG6B,CAACK,SAH9B;AAIVX,YAAAA,MAAM,CAACiB,uBAAP,CAA+B,MAAI,CAACX,KAApC,CAJU,IAImC,CAACK,SAAD,IAAc,MAAI,CAACI,cAJtD;AAKVf,YAAAA,MAAM,CAACkB,sBAAP,CAA8B,MAAI,CAACZ,KAAnC,CALU,IAKkCI,iBALlC;AAMVV,YAAAA,MAAM,CAACmB,4BAAP,CAAoC,MAAI,CAACb,KAAzC,CANU,IAMwCI,iBAAiB,IAAI,MAAI,CAACK,cANlE;AAOVf,YAAAA,MAAM,CAACoB,kBAAP,EAPU,IAOoBZ,SAPpB,OAHf;;;AAaG,UAAA,MAAI,CAACO,cAAL;AACC,8BAAC,cAAD,IAAgB,QAAQ,EAAE,MAAI,CAACb,YAA/B,IAA8C,MAAI,CAACO,KAAL,CAAWY,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACZ,KAAL,CAAWY,QAhBf,CADF,CADD,GADH,CADF;;;;;;;AA2BD,GApDH,oBAA+B/B,KAAK,CAACgC,SAArC,WACgBC,mBADhB,GACsC,WADtC,UAEgBC,cAFhB,GAEiC,IAFjC","sourcesContent":["import React from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { ModalContext } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport interface ModalBodyProps extends CommonProps {\n  /**\n   * убирает отступы\n   */\n  noPadding?: boolean;\n}\n\n/**\n * Контейнер с отступами от края модалки\n *\n * @visibleName Modal.Body\n */\n@responsiveLayout\n@rootNode\nexport class ModalBody extends React.Component<ModalBodyProps> {\n  public static __KONTUR_REACT_UI__ = 'ModalBody';\n  public static __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private handleResize = (event: UIEvent) => {\n    LayoutEvents.emit();\n  };\n\n  public renderMain(): JSX.Element {\n    const { noPadding } = this.props;\n    return (\n      <ModalContext.Consumer>\n        {({ additionalPadding, hasHeader }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <ZIndex\n              priority={'ModalBody'}\n              createStackingContext\n              className={cx({\n                [styles.body(this.theme)]: true,\n                [styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [styles.mobileBodyWithoutHeader(this.theme)]: !hasHeader && this.isMobileLayout,\n                [styles.bodyAddPaddingForPanel(this.theme)]: additionalPadding,\n                [styles.mobileBodyAddPaddingForPanel(this.theme)]: additionalPadding && this.isMobileLayout,\n                [styles.bodyWithoutPadding()]: noPadding,\n              })}\n            >\n              {this.isMobileLayout ? (\n                <ResizeDetector onResize={this.handleResize}>{this.props.children}</ResizeDetector>\n              ) : (\n                this.props.children\n              )}\n            </ZIndex>\n          </CommonWrapper>\n        )}\n      </ModalContext.Consumer>\n    );\n  }\n}\n"]}

package/components/Modal/ModalBody/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Modal\\ModalBody.js",
+  "main": "../../../cjs/components/Modal/ModalBody.js",
   "module": "ModalBody",
-  "types": "..\\ModalBody.d.ts",
+  "types": "../ModalBody.d.ts",
   "sideEffects": false
 }

package/components/Modal/ModalBody.d.ts

@@ -1,11 +1,23 @@
 import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ModalBodyProps extends CommonProps {
+    /**
+     * убирает отступы
+     */
+    noPadding?: boolean;
+}
 /**
  * Контейнер с отступами от края модалки
  *
  * @visibleName Modal.Body
  */
-export declare class ModalBody extends React.Component {
+export declare class ModalBody extends React.Component<ModalBodyProps> {
     static __KONTUR_REACT_UI__: string;
     static __MODAL_BODY__: boolean;
+    private theme;
+    private isMobileLayout;
+    private setRootNode;
     render(): JSX.Element;
+    private handleResize;
+    renderMain(): JSX.Element;
 }

package/components/Modal/ModalClose/ModalClose.js

@@ -1,18 +1,49 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["disableClose", "requestClose"];
 import React, { useContext } from 'react';
-import cn from 'classnames';
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { jsStyles } from "..\\Modal.styles";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CrossIcon } from "../../../internal/icons/CrossIcon";
+import { cx } from "../../../lib/theming/Emotion";
+import { keyListener } from "../../../lib/events/keyListener";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { styles } from "../Modal.styles";
 export function ModalClose(_ref) {
-  var _cn;
-
   var disableClose = _ref.disableClose,
-      requestClose = _ref.requestClose;
+      requestClose = _ref.requestClose,
+      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var theme = useContext(ThemeContext);
-  return React.createElement("button", {
-    className: cn((_cn = {}, _cn[jsStyles.close(theme)] = true, _cn[jsStyles.disabled(theme)] = disableClose, _cn)),
-    onClick: requestClose,
-    "data-tid": "modal-close"
-  }, React.createElement("span", {
-    className: jsStyles.closeOutline(theme)
+
+  var _React$useState = React.useState(false),
+      focusedByTab = _React$useState[0],
+      setFocusedByTab = _React$useState[1];
+
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    requestAnimationFrame(function () {
+      if (keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
+
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
+
+  return /*#__PURE__*/React.createElement(CommonWrapper, otherProps, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref2) {
+    var _cx;
+
+    var isMobile = _ref2.isMobile;
+    return /*#__PURE__*/React.createElement("button", {
+      className: cx((_cx = {}, _cx[styles.close(theme)] = true, _cx[styles.mobileClose(theme)] = isMobile, _cx[styles.disabled(theme)] = disableClose, _cx[styles.focus(theme)] = focusedByTab, _cx)),
+      onClick: requestClose,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      "data-tid": "modal-close",
+      tabIndex: disableClose ? -1 : 0
+    }, /*#__PURE__*/React.createElement(CrossIcon, null));
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","cn","ThemeContext","jsStyles","ModalClose","disableClose","requestClose","theme","close","disabled","closeOutline"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,QAAT,QAAyB,gBAAzB;;AAEA,OAAO,SAASC,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAGP,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACVE,MAAAA,QAAQ,CAACK,KAAT,CAAeD,KAAf,CADU,IACc,IADd;AAEVJ,MAAAA,QAAQ,CAACM,QAAT,CAAkBF,KAAlB,CAFU,IAEiBF,YAFjB,OADf;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,kCAAM,SAAS,EAAEH,QAAQ,CAACO,YAAT,CAAsBH,KAAtB,CAAjB,GARF,CADF;;;AAYD","sourcesContent":["import React, { useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { CloseProps } from './ModalContext';\r\nimport { jsStyles } from './Modal.styles';\r\n\r\nexport function ModalClose({ disableClose, requestClose }: CloseProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <button\r\n      className={cn({\r\n        [jsStyles.close(theme)]: true,\r\n        [jsStyles.disabled(theme)]: disableClose,\r\n      })}\r\n      onClick={requestClose}\r\n      data-tid=\"modal-close\"\r\n    >\r\n      <span className={jsStyles.closeOutline(theme)} />\r\n    </button>\r\n  );\r\n}\r\n"]}
+{"version":3,"sources":["ModalClose.tsx"],"names":["React","useContext","ThemeContext","CrossIcon","cx","keyListener","ResponsiveLayout","CommonWrapper","styles","ModalClose","disableClose","requestClose","otherProps","theme","useState","focusedByTab","setFocusedByTab","handleFocus","requestAnimationFrame","isTabPressed","handleBlur","isMobile","close","mobileClose","disabled","focus"],"mappings":"qJAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,aAAT,QAA8B,8BAA9B;;;AAGA,SAASC,MAAT,QAAuB,gBAAvB;;AAEA,OAAO,SAASC,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,KAAK,GAAGZ,UAAU,CAACC,YAAD,CAAxB;AACA,wBAAwCF,KAAK,CAACc,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,IAAAA,qBAAqB,CAAC,YAAM;AAC1B,UAAIb,WAAW,CAACc,YAAhB,EAA8B;AAC5BH,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJoB,CAArB;AAKD,GARD;;AAUA,MAAMI,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBJ,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA;AACE,wBAAC,aAAD,EAAmBJ,UAAnB;AACE,wBAAC,gBAAD;AACG,kCAAGS,QAAH,SAAGA,QAAH;AACC;AACE,UAAA,SAAS,EAAEjB,EAAE;AACVI,UAAAA,MAAM,CAACc,KAAP,CAAaT,KAAb,CADU,IACY,IADZ;AAEVL,UAAAA,MAAM,CAACe,WAAP,CAAmBV,KAAnB,CAFU,IAEkBQ,QAFlB;AAGVb,UAAAA,MAAM,CAACgB,QAAP,CAAgBX,KAAhB,CAHU,IAGeH,YAHf;AAIVF,UAAAA,MAAM,CAACiB,KAAP,CAAaZ,KAAb,CAJU,IAIYE,YAJZ,OADf;;AAOE,UAAA,OAAO,EAAEJ,YAPX;AAQE,UAAA,OAAO,EAAEM,WARX;AASE,UAAA,MAAM,EAAEG,UATV;AAUE,sBAAS,aAVX;AAWE,UAAA,QAAQ,EAAEV,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAXhC;;AAaE,4BAAC,SAAD,OAbF,CADD,GADH,CADF,CADF;;;;;;AAuBD","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { CloseProps } from './ModalContext';\nimport { styles } from './Modal.styles';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\n  const theme = useContext(ThemeContext);\n  const [focusedByTab, setFocusedByTab] = React.useState(false);\n\n  const handleFocus = () => {\n    // focus event fires before keyDown eventlistener\n    // so we should check tabPressed in async way\n    requestAnimationFrame(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            className={cx({\n              [styles.close(theme)]: true,\n              [styles.mobileClose(theme)]: isMobile,\n              [styles.disabled(theme)]: disableClose,\n              [styles.focus(theme)]: focusedByTab,\n            })}\n            onClick={requestClose}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            data-tid=\"modal-close\"\n            tabIndex={disableClose ? -1 : 0}\n          >\n            <CrossIcon />\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n"]}

package/components/Modal/ModalClose/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Modal\\ModalClose.js",
+  "main": "../../../cjs/components/Modal/ModalClose.js",
   "module": "ModalClose",
-  "types": "..\\ModalClose.d.ts",
+  "types": "../ModalClose.d.ts",
   "sideEffects": false
 }

package/components/Modal/ModalClose.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CloseProps } from './ModalContext';
-export declare function ModalClose({ disableClose, requestClose }: CloseProps): JSX.Element;
+export declare function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps): JSX.Element;

package/components/Modal/ModalContext/ModalContext.js

@@ -1,2 +1,3 @@
 import React from 'react';
-export var ModalContext = React.createContext({});
+export var ModalContext = /*#__PURE__*/React.createContext({});
+ModalContext.displayName = 'ModalContext';

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalContext.tsx"],"names":["React","ModalContext","createContext"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;AAcA,OAAO,IAAMC,YAAY,GAAGD,KAAK,CAACE,aAAN,CAAuC,EAAvC,CAArB","sourcesContent":["import React from 'react';\r\n\r\nexport interface CloseProps {\r\n  disableClose?: boolean;\r\n  requestClose: () => void;\r\n}\r\n\r\nexport interface ModalContextProps {\r\n  additionalPadding?: boolean;\r\n  hasHeader?: boolean;\r\n  close?: CloseProps;\r\n  horizontalScroll?: boolean;\r\n}\r\n\r\nexport const ModalContext = React.createContext<ModalContextProps>({});\r\n"]}
+{"version":3,"sources":["ModalContext.tsx"],"names":["React","ModalContext","createContext","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;;;;;;;;;;;;;;;;;;AAmBA,OAAO,IAAMC,YAAY,gBAAGD,KAAK,CAACE,aAAN,CAAuC,EAAvC,CAArB;;AAEPD,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import React from 'react';\n\nimport { CommonProps } from '../../internal/CommonWrapper';\n\nexport interface CloseProps extends CommonProps {\n  disableClose?: boolean;\n  requestClose: () => void;\n}\n\nexport interface ModalContextProps {\n  additionalPadding?: boolean;\n  hasHeader?: boolean;\n  close?: CloseProps;\n  horizontalScroll?: boolean;\n  setHasHeader?: (value?: boolean) => void;\n  setHasFooter?: (value?: boolean) => void;\n  setHasPanel?: (value?: boolean) => void;\n}\n\nexport const ModalContext = React.createContext<ModalContextProps>({});\n\nModalContext.displayName = 'ModalContext';\n"]}

package/components/Modal/ModalContext/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Modal\\ModalContext.js",
+  "main": "../../../cjs/components/Modal/ModalContext.js",
   "module": "ModalContext",
-  "types": "..\\ModalContext.d.ts",
+  "types": "../ModalContext.d.ts",
   "sideEffects": false
 }

package/components/Modal/ModalContext.d.ts

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

package/components/Modal/ModalFooter/ModalFooter.js

@@ -1,61 +1,55 @@
-import React, { useContext, useEffect, useState } from 'react';
-import cn from 'classnames';
-import { getScrollWidth } from "..\\..\\..\\lib\\dom\\getScrollWidth";
-import { Sticky } from "..\\..\\Sticky";
-import { ThemeContext } from "..\\..\\..\\lib\\theming\\ThemeContext";
-import { ZIndex } from "..\\..\\..\\internal\\ZIndex";
-import { jsStyles } from "..\\Modal.styles";
-import { ModalContext } from "..\\ModalContext";
-/**
-                                                * Футер модального окна.
-                                                *
-                                                * @visibleName Modal.Footer
-                                                */
+import React, { useContext, useEffect } from 'react';
+import { getScrollWidth } from "../../../lib/dom/getScrollWidth";
+import { Sticky } from "../../Sticky";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { ZIndex } from "../../../internal/ZIndex";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { useResponsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../Modal.styles";
+import { ModalContext } from "../ModalContext";
+/**
+ * Футер модального окна.
+ *
+ * @visibleName Modal.Footer
+ */
 
 function ModalFooter(props) {
+  var theme = useContext(ThemeContext);
+  var modal = useContext(ModalContext);
+  var layout = useResponsiveLayout();
   var _props$sticky = props.sticky,
-      sticky = _props$sticky === void 0 ? true : _props$sticky,
+      sticky = _props$sticky === void 0 ? layout.isMobile ? false : true : _props$sticky,
       panel = props.panel,
       children = props.children;
-  var theme = useContext(ThemeContext);
-
-  var _useState = useState(0),
-      scrollbarWidth = _useState[0],
-      setScrollBarWidth = _useState[1];
-
   useEffect(function () {
-    setScrollBarWidth(getScrollWidth());
-  }, []);
+    modal.setHasFooter == null ? void 0 : modal.setHasFooter();
+    modal.setHasPanel == null ? void 0 : modal.setHasPanel(panel);
+    return function () {
+      modal.setHasFooter == null ? void 0 : modal.setHasFooter(false);
+      modal.setHasPanel == null ? void 0 : modal.setHasPanel(false);
+    };
+  }, [panel]);
 
   var renderContent = function renderContent(fixed) {
-    var _cn;
+    var _cx;
 
     if (fixed === void 0) {
       fixed = false;
     }
 
-    return React.createElement("div", {
-      className: cn((_cn = {}, _cn[jsStyles.footer()] = true, _cn[jsStyles.panel(theme)] = Boolean(panel), _cn[jsStyles.fixedFooter(theme)] = fixed, _cn))
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx((_cx = {}, _cx[styles.footer(theme)] = true, _cx[styles.fixedFooter(theme)] = fixed, _cx[styles.panel(theme)] = Boolean(panel), _cx[styles.mobileFooter(theme)] = layout.isMobile, _cx))
     }, children);
   };
 
-  return React.createElement(ZIndex, {
-    style: {
-      position: 'relative'
-    },
-    priority: 'ModalFooter'
-  }, React.createElement(ModalContext.Consumer, null, function (_ref) {
-    var horizontalScroll = _ref.horizontalScroll;
-
-    if (sticky) {
-      return React.createElement(Sticky, {
-        side: "bottom",
-        offset: horizontalScroll ? scrollbarWidth : 0
-      }, renderContent);
-    }
-
-    return renderContent();
-  }));
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ZIndex, {
+    priority: 'ModalFooter',
+    className: styles.footerWrapper()
+  }, sticky ? /*#__PURE__*/React.createElement(Sticky, {
+    side: "bottom",
+    offset: modal.horizontalScroll ? getScrollWidth() : 0
+  }, renderContent) : renderContent()));
 }
 
 ModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useEffect","useState","cn","getScrollWidth","Sticky","ThemeContext","ZIndex","jsStyles","ModalContext","ModalFooter","props","sticky","panel","children","theme","scrollbarWidth","setScrollBarWidth","renderContent","fixed","footer","Boolean","fixedFooter","position","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"AAAA,OAAOA,KAAP,IAA2BC,UAA3B,EAAuCC,SAAvC,EAAkDC,QAAlD,QAAkE,OAAlE;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,cAAT,QAA+B,8BAA/B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,uBAAvB;;AAEA,SAASC,QAAT,QAAyB,gBAAzB;AACA,SAASC,YAAT,QAA6B,gBAA7B;;;;;;;;;;;AAWA;;;;;AAKA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AACDA,EAAAA,KADC,CACpCC,MADoC,CACpCA,MADoC,8BAC3B,IAD2B,iBACrBC,KADqB,GACDF,KADC,CACrBE,KADqB,CACdC,QADc,GACDH,KADC,CACdG,QADc;AAE5C,MAAMC,KAAK,GAAGf,UAAU,CAACM,YAAD,CAAxB,CAF4C;AAGAJ,EAAAA,QAAQ,CAAC,CAAD,CAHR,CAGrCc,cAHqC,gBAGrBC,iBAHqB;;AAK5ChB,EAAAA,SAAS,CAAC,YAAM;AACdgB,IAAAA,iBAAiB,CAACb,cAAc,EAAf,CAAjB;AACD,GAFQ,EAEN,EAFM,CAAT;;AAIA,MAAMc,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,eAACA,KAAD,cAACA,KAAD,GAAS,KAAT;AACpB;AACE,QAAA,SAAS,EAAEhB,EAAE;AACVK,QAAAA,QAAQ,CAACY,MAAT,EADU,IACU,IADV;AAEVZ,QAAAA,QAAQ,CAACK,KAAT,CAAeE,KAAf,CAFU,IAEcM,OAAO,CAACR,KAAD,CAFrB;AAGVL,QAAAA,QAAQ,CAACc,WAAT,CAAqBP,KAArB,CAHU,IAGoBI,KAHpB,OADf;;;AAOGL,MAAAA,QAPH,CADoB,GAAtB;;;;AAYA;AACE,wBAAC,MAAD,IAAQ,KAAK,EAAE,EAAES,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,wBAAC,YAAD,CAAc,QAAd;AACG,oBAA0B,KAAvBC,gBAAuB,QAAvBA,gBAAuB;AACzB,UAAIZ,MAAJ,EAAY;AACV;AACE,8BAAC,MAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEY,gBAAgB,GAAGR,cAAH,GAAoB,CAAlE;AACGE,UAAAA,aADH,CADF;;;AAKD;;AAED,aAAOA,aAAa,EAApB;AACD,KAXH,CADF,CADF;;;;AAiBD;;AAEDR,WAAW,CAACe,mBAAZ,GAAkC,aAAlC;AACAf,WAAW,CAACgB,gBAAZ,GAA+B,IAA/B;;AAEA,SAAShB,WAAT","sourcesContent":["import React, { ReactNode, useContext, useEffect, useState } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Sticky } from '../Sticky';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\n\r\nimport { jsStyles } from './Modal.styles';\r\nimport { ModalContext } from './ModalContext';\r\n\r\nexport interface ModalFooterProps {\r\n  /**\r\n   * Включает серый цвет в футере\r\n   */\r\n  panel?: boolean;\r\n  sticky?: boolean;\r\n  children?: ReactNode;\r\n}\r\n\r\n/**\r\n * Футер модального окна.\r\n *\r\n * @visibleName Modal.Footer\r\n */\r\nfunction ModalFooter(props: ModalFooterProps) {\r\n  const { sticky = true, panel, children } = props;\r\n  const theme = useContext(ThemeContext);\r\n  const [scrollbarWidth, setScrollBarWidth] = useState(0);\r\n\r\n  useEffect(() => {\r\n    setScrollBarWidth(getScrollWidth());\r\n  }, []);\r\n\r\n  const renderContent = (fixed = false) => (\r\n    <div\r\n      className={cn({\r\n        [jsStyles.footer()]: true,\r\n        [jsStyles.panel(theme)]: Boolean(panel),\r\n        [jsStyles.fixedFooter(theme)]: fixed,\r\n      })}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <ZIndex style={{ position: 'relative' }} priority={'ModalFooter'}>\r\n      <ModalContext.Consumer>\r\n        {({ horizontalScroll }) => {\r\n          if (sticky) {\r\n            return (\r\n              <Sticky side=\"bottom\" offset={horizontalScroll ? scrollbarWidth : 0}>\r\n                {renderContent}\r\n              </Sticky>\r\n            );\r\n          }\r\n\r\n          return renderContent();\r\n        }}\r\n      </ModalContext.Consumer>\r\n    </ZIndex>\r\n  );\r\n}\r\n\r\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\r\nModalFooter.__MODAL_FOOTER__ = true;\r\n\r\nexport { ModalFooter };\r\n"]}
+{"version":3,"sources":["ModalFooter.tsx"],"names":["React","useContext","useEffect","getScrollWidth","Sticky","ThemeContext","ZIndex","CommonWrapper","cx","useResponsiveLayout","styles","ModalContext","ModalFooter","props","theme","modal","layout","sticky","isMobile","panel","children","setHasFooter","setHasPanel","renderContent","fixed","footer","fixedFooter","Boolean","mobileFooter","footerWrapper","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"AAAA,OAAOA,KAAP,IAA2BC,UAA3B,EAAuCC,SAAvC,QAAwD,OAAxD;;AAEA,SAASC,cAAT,QAA+B,8BAA/B;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,mBAAT,QAAoC,qBAApC;;AAEA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,YAAT,QAA6B,gBAA7B;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,KAAK,GAAGb,UAAU,CAACI,YAAD,CAAxB;AACA,MAAMU,KAAK,GAAGd,UAAU,CAACU,YAAD,CAAxB;AACA,MAAMK,MAAM,GAAGP,mBAAmB,EAAlC;;AAEA,sBAAqEI,KAArE,CAAQI,MAAR,CAAQA,MAAR,8BAAiBD,MAAM,CAACE,QAAP,GAAkB,KAAlB,GAA0B,IAA3C,iBAAiDC,KAAjD,GAAqEN,KAArE,CAAiDM,KAAjD,CAAwDC,QAAxD,GAAqEP,KAArE,CAAwDO,QAAxD;;AAEAlB,EAAAA,SAAS,CAAC,YAAM;AACda,IAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN;AACAN,IAAAA,KAAK,CAACO,WAAN,oBAAAP,KAAK,CAACO,WAAN,CAAoBH,KAApB;;AAEA,WAAO,YAAM;AACXJ,MAAAA,KAAK,CAACM,YAAN,oBAAAN,KAAK,CAACM,YAAN,CAAqB,KAArB;AACAN,MAAAA,KAAK,CAACO,WAAN,oBAAAP,KAAK,CAACO,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARQ,EAQN,CAACH,KAAD,CARM,CAAT;;AAUA,MAAMI,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,aAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACE,QAAA,SAAS,EAAEhB,EAAE;AACVE,QAAAA,MAAM,CAACe,MAAP,CAAcX,KAAd,CADU,IACa,IADb;AAEVJ,QAAAA,MAAM,CAACgB,WAAP,CAAmBZ,KAAnB,CAFU,IAEkBU,KAFlB;AAGVd,QAAAA,MAAM,CAACS,KAAP,CAAaL,KAAb,CAHU,IAGYa,OAAO,CAACR,KAAD,CAHnB;AAIVT,QAAAA,MAAM,CAACkB,YAAP,CAAoBd,KAApB,CAJU,IAImBE,MAAM,CAACE,QAJ1B,OADf;;;AAQGE,MAAAA,QARH,CADF;;;AAYD,GAbD;;AAeA;AACE,wBAAC,aAAD,EAAmBP,KAAnB;AACE,wBAAC,MAAD,IAAQ,QAAQ,EAAE,aAAlB,EAAiC,SAAS,EAAEH,MAAM,CAACmB,aAAP,EAA5C;AACGZ,IAAAA,MAAM;AACL,wBAAC,MAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEF,KAAK,CAACe,gBAAN,GAAyB3B,cAAc,EAAvC,GAA4C,CAA1E;AACGoB,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF,CADF;;;;;AAaD;;AAEDX,WAAW,CAACmB,mBAAZ,GAAkC,aAAlC;AACAnB,WAAW,CAACoB,gBAAZ,GAA+B,IAA/B;;AAEA,SAASpB,WAAT","sourcesContent":["import React, { ReactNode, useContext, useEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\n\nexport interface ModalFooterProps extends CommonProps {\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  sticky?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * Футер модального окна.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n  const theme = useContext(ThemeContext);\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = layout.isMobile ? false : true, panel, children } = props;\n\n  useEffect(() => {\n    modal.setHasFooter?.();\n    modal.setHasPanel?.(panel);\n\n    return () => {\n      modal.setHasFooter?.(false);\n      modal.setHasPanel?.(false);\n    };\n  }, [panel]);\n\n  const renderContent = (fixed = false) => {\n    return (\n      <div\n        className={cx({\n          [styles.footer(theme)]: true,\n          [styles.fixedFooter(theme)]: fixed,\n          [styles.panel(theme)]: Boolean(panel),\n          [styles.mobileFooter(theme)]: layout.isMobile,\n        })}\n      >\n        {children}\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      <ZIndex priority={'ModalFooter'} className={styles.footerWrapper()}>\n        {sticky ? (\n          <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n            {renderContent}\n          </Sticky>\n        ) : (\n          renderContent()\n        )}\n      </ZIndex>\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}

package/components/Modal/ModalFooter/package.json

@@ -1,6 +1,6 @@
 {
-  "main": "..\\..\\..\\cjs\\components\\Modal\\ModalFooter.js",
+  "main": "../../../cjs/components/Modal/ModalFooter.js",
   "module": "ModalFooter",
-  "types": "..\\ModalFooter.d.ts",
+  "types": "../ModalFooter.d.ts",
   "sideEffects": false
 }

package/components/Modal/ModalFooter.d.ts

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