@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

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

@@ -1 +1 @@
-{"version":3,"sources":["Modal.styles.ts"],"names":["styles","root","css","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":["modalGlobalClasses","root","container","getStyles","emotion","css","bg","t","modalBackBg","modalBackOpacity","containerMobile","mobileModalContainerHeight","mobileModalContainerMarginTop","mobileModalContainerMarginRight","mobileModalContainerMarginBottom","mobileModalContainerMarginLeft","window","modalWindowShadow","modalBg","modalBorderRadius","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","header","modalHeaderFontSize","modalHeaderLineHeight","modalHeaderPaddingTop","modalPaddingRight","modalHeaderPaddingBottom","modalPaddingLeft","modalHeaderTextColor","modalHeaderFontWeight","mobileHeader","mobileModalHeaderFontSize","mobileModalHeaderLineHeight","body","modalBodyBorderRadius","modalBodyPaddingTop","modalBodyPaddingBottom","modalBodyTextColor","mobileBody","mobileModalBodyPadding","mobileModalBodyFontSize","headerWithClose","rightPadding","modalCloseLegacyGap","mobileHeaderWithClose","footer","modalFooterPaddingTop","modalFooterPaddingBottom","modalFooterTextColor","mobileFooter","mobileModalFooterPadding","panel","modalFooterPanelPaddingTop","modalFooterPanelPaddingBottom","modalFooterBg","fixedHeader","modalFixedHeaderMarginBottom","modalFixedHeaderPaddingBottom","modalFixedHeaderBg","modalFixedHeaderBorder","modalFixedHeaderShadow","mobileFixedHeader","fixedFooter","modalFixedFooterPaddingTop","modalFixedFooterMarginTop","modalFixedFooterBorder","modalFixedFooterShadow","fixedPanel","modalFixedPanelShadow","headerAddPadding","modalHeaderAdditionalPaddingBottom","bodyWithoutHeader","modalPaddingTop","mobileBodyWithoutHeader","bodyWithoutPadding","bodyAddPaddingForPanel","modalPaddingBottom","mobileBodyAddPaddingForPanel","columnFlexContainer","modalSeparatorWrapper","modalSeparator","modalSeparatorBorderBottom","modalSeparatorFixed"],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const modalGlobalClasses = prefix('modal')({\n  root: 'root',\n  container: 'container',\n});\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.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 emotion.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 emotion.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    containerMobile(t: Theme) {\n      return emotion.css`\n      height: ${t.mobileModalContainerHeight};\n      margin-top: ${t.mobileModalContainerMarginTop};\n      margin-right: ${t.mobileModalContainerMarginRight};\n      margin-bottom: ${t.mobileModalContainerMarginBottom};\n      margin-left: ${t.mobileModalContainerMarginLeft};\n    `;\n    },\n\n    window(t: Theme) {\n      return emotion.css`\n      position: relative;\n      white-space: normal;\n      margin: auto;\n      box-shadow: ${t.modalWindowShadow};\n      background: ${t.modalBg};\n      border-radius: ${t.modalBorderRadius};\n    `;\n    },\n\n    mobileWindow() {\n      return emotion.css`\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n    `;\n    },\n\n    centerContainer() {\n      return emotion.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 emotion.css`\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    `;\n    },\n\n    alignTop() {\n      return emotion.css`\n      vertical-align: top;\n    `;\n    },\n\n    close(t: Theme) {\n      const padding = parseInt(t.modalCloseButtonPadding);\n      return emotion.css`\n      ${resetButton(emotion)};\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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n      pointer-events: none;\n      cursor: default;\n      color: ${t.modalCloseButtonDisabledColor};\n    `;\n    },\n\n    focus(t: Theme) {\n      return emotion.css`\n      color: ${t.modalCloseButtonHoverColor};\n      outline: 2px solid ${t.borderColorFocus};\n    `;\n    },\n\n    header(t: Theme) {\n      return emotion.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      font-weight: ${t.modalHeaderFontWeight};\n    `;\n    },\n\n    mobileHeader(t: Theme) {\n      return emotion.css`\n      position: relative;\n      font-size: ${t.mobileModalHeaderFontSize};\n      line-height: ${t.mobileModalHeaderLineHeight};\n      padding: ${t.mobileModalHeaderPadding};\n    `;\n    },\n\n    body(t: Theme) {\n      return emotion.css`\n      border-radius: ${t.modalBodyBorderRadius};\n      padding-top: ${t.modalBodyPaddingTop};\n      padding-right: ${t.modalPaddingRight};\n      padding-bottom: ${t.modalBodyPaddingBottom};\n      padding-left: ${t.modalPaddingLeft};\n      color: ${t.modalBodyTextColor};\n    `;\n    },\n\n    mobileBody(t: Theme) {\n      return emotion.css`\n      padding: ${t.mobileModalBodyPadding};\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 emotion.css`\n      padding-right: ${rightPadding}px;\n    `;\n    },\n\n    mobileHeaderWithClose(t: Theme) {\n      return emotion.css`\n      padding-right: ${2 * parseInt(t.mobileModalCloseButtonRightPadding) + parseInt(t.mobileModalCloseIconSize)}px;\n    `;\n    },\n\n    footer(t: Theme) {\n      return emotion.css`\n      padding: ${t.modalFooterPaddingTop} ${t.modalPaddingRight} ${t.modalFooterPaddingBottom} ${t.modalPaddingLeft};\n      color: ${t.modalFooterTextColor};\n      border-radius: 0 0 ${t.modalBorderRadius} ${t.modalBorderRadius};\n    `;\n    },\n\n    mobileFooter(t: Theme) {\n      return emotion.css`\n      padding: ${t.mobileModalFooterPadding};\n    `;\n    },\n\n    panel(t: Theme) {\n      return emotion.css`\n      padding-top: ${t.modalFooterPanelPaddingTop};\n      padding-bottom: ${t.modalFooterPanelPaddingBottom};\n      background: ${t.modalFooterBg};\n    `;\n    },\n\n    fixedHeader(t: Theme) {\n      return emotion.css`\n      margin-bottom: ${t.modalFixedHeaderMarginBottom};\n      padding-bottom: ${t.modalFixedHeaderPaddingBottom};\n      background: ${t.modalFixedHeaderBg};\n      border-bottom: ${t.modalFixedHeaderBorder};\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 emotion.css`\n      padding-bottom: ${t.mobileModalHeaderPadding};\n    `;\n    },\n\n    fixedFooter(t: Theme) {\n      return emotion.css`\n      padding-top: ${t.modalFixedFooterPaddingTop};\n      margin-top: ${t.modalFixedFooterMarginTop};\n      background: ${t.modalFixedHeaderBg};\n      border-top: ${t.modalFixedFooterBorder};\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    fixedPanel(t: Theme) {\n      return emotion.css`\n      &:before {\n        box-shadow: ${t.modalFixedPanelShadow};\n      }\n    `;\n    },\n\n    headerAddPadding(t: Theme) {\n      return emotion.css`\n      padding-bottom: ${t.modalHeaderAdditionalPaddingBottom};\n    `;\n    },\n\n    bodyWithoutHeader(t: Theme) {\n      return emotion.css`\n      padding-top: ${t.modalPaddingTop};\n    `;\n    },\n\n    mobileBodyWithoutHeader() {\n      return emotion.css`\n      padding-top: 0px;\n    `;\n    },\n\n    bodyWithoutPadding() {\n      return emotion.css`\n      padding: 0;\n    `;\n    },\n\n    bodyAddPaddingForPanel(t: Theme) {\n      return emotion.css`\n      padding-bottom: ${t.modalPaddingBottom};\n    `;\n    },\n\n    mobileBodyAddPaddingForPanel(t: Theme) {\n      return emotion.css`\n      padding: ${t.mobileModalBodyPadding};\n    `;\n    },\n\n    columnFlexContainer() {\n      return emotion.css`\n      height: 100%;\n      display: flex;\n      flex-flow: column;\n      overflow-y: auto;\n    `;\n    },\n\n    modalSeparatorWrapper() {\n      return emotion.css`\n      position: absolute;\n      width: 100%;\n    `;\n    },\n\n    modalSeparator(t: Theme) {\n      return emotion.css`\n      border-bottom: ${t.modalSeparatorBorderBottom};\n      margin: 0 32px;\n      transition: margin 0.3s;\n    `;\n    },\n\n    modalSeparatorFixed() {\n      return emotion.css`\n      margin: 0 16px;\n    `;\n    },\n  });\n"]}

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

@@ -1,11 +1,25 @@
 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 displayName: string;
     static __MODAL_BODY__: boolean;
+    private theme;
+    private emotion;
+    private isMobileLayout;
+    private setRootNode;
     render(): JSX.Element;
+    private handleResize;
+    renderMain(): JSX.Element;
 }

package/cjs/components/Modal/ModalBody.js

@@ -1,36 +1,93 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ModalBody = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ModalBody = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
 
 var _ZIndex = require("../../internal/ZIndex");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _decorator = require("../ResponsiveLayout/decorator");
+var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
+var _ResizeDetector = require("../../internal/ResizeDetector");
+var _rootNode = require("../../lib/rootNode");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _ModalContext = require("./ModalContext");
 var _Modal = require("./Modal.styles");
+var _getModalBodyTheme = require("./getModalBodyTheme");var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+/**
+ * Контейнер с отступами от края модалки
+ *
+ * @visibleName Modal.Body
+ */var
+
+
+ModalBody = (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ModalBody, _React$Component);function ModalBody() {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.
+
+
+
+
+
+
+
+
 
-/**
-                                         * Контейнер с отступами от края модалки
-                                         *
-                                         * @visibleName Modal.Body
-                                         */var
-ModalBody = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ModalBody, _React$Component);function ModalBody() {return _React$Component.apply(this, arguments) || this;}var _proto = ModalBody.prototype;_proto.
 
 
 
-  render = function render() {var _this = this;
-    return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    handleResize = function () {
+      LayoutEvents.emit();
+    };return _this;}var _proto = ModalBody.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _getModalBodyTheme.getModalBodyTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});});};_proto.
+
+  renderMain = function renderMain() {var _this3 = this;
+    var noPadding = this.props.noPadding;
+    var styles = (0, _Modal.getStyles)(this.emotion);
+
+    return /*#__PURE__*/(
       _react.default.createElement(_ModalContext.ModalContext.Consumer, null,
-      function (_ref) {var _cn;var additionalPadding = _ref.additionalPadding,hasHeader = _ref.hasHeader;return (
+      function (_ref) {var _this3$emotion$cx;var additionalPadding = _ref.additionalPadding,hasHeader = _ref.hasHeader;return /*#__PURE__*/(
+          _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this3.setRootNode }, _this3.props), /*#__PURE__*/
           _react.default.createElement(_ZIndex.ZIndex, {
-            priority: 'ModalBody',
-            createStackingContext: true,
-            className: (0, _classnames.default)((_cn = {}, _cn[
-            _Modal.jsStyles.body()] = true, _cn[
-            _Modal.jsStyles.bodyWithoutHeader()] = !hasHeader, _cn[
-            _Modal.jsStyles.bodyAddPadding()] = additionalPadding, _cn)) },
+            className: _this3.emotion.cx((_this3$emotion$cx = {}, _this3$emotion$cx[
+            styles.body(_this3.theme)] = true, _this3$emotion$cx[
+            styles.mobileBody(_this3.theme)] = _this3.isMobileLayout, _this3$emotion$cx[
+            styles.bodyWithoutHeader(_this3.theme)] = !hasHeader, _this3$emotion$cx[
+            styles.mobileBodyWithoutHeader()] = !hasHeader && _this3.isMobileLayout, _this3$emotion$cx[
+            styles.bodyAddPaddingForPanel(_this3.theme)] = additionalPadding, _this3$emotion$cx[
+            styles.mobileBodyAddPaddingForPanel(_this3.theme)] = additionalPadding && _this3.isMobileLayout, _this3$emotion$cx[
+            styles.bodyWithoutPadding()] = noPadding, _this3$emotion$cx)) },
+
+
+          _this3.isMobileLayout ? /*#__PURE__*/
+          _react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: _this3.handleResize }, _this3.props.children) :
+
+          _this3.props.children)));}));
 
 
-          _this.props.children));}));
 
 
 
 
-  };return ModalBody;}(_react.default.Component);exports.ModalBody = ModalBody;ModalBody.__KONTUR_REACT_UI__ = 'ModalBody';ModalBody.__MODAL_BODY__ = true;
+  };return ModalBody;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'ModalBody', _class2.displayName = 'ModalBody', _class2.__MODAL_BODY__ = true, _temp)) || _class) || _class;exports.ModalBody = ModalBody;

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","render","additionalPadding","hasHeader","jsStyles","body","bodyWithoutHeader","bodyAddPadding","props","children","React","Component","__KONTUR_REACT_UI__","__MODAL_BODY__"],"mappings":"qPAAA;AACA;;AAEA;;AAEA;AACA;;AAEA;;;;;AAKaA,S;;;;AAIJC,EAAAA,M,GAAP,kBAA6B;AAC3B;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,mCAAGC,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,cAAD;AACE,YAAA,QAAQ,EAAE,WADZ;AAEE,YAAA,qBAAqB,MAFvB;AAGE,YAAA,SAAS,EAAE;AACRC,4BAASC,IAAT,EADQ,IACU,IADV;AAERD,4BAASE,iBAAT,EAFQ,IAEuB,CAACH,SAFxB;AAGRC,4BAASG,cAAT,EAHQ,IAGoBL,iBAHpB,OAHb;;;AASG,UAAA,KAAI,CAACM,KAAL,CAAWC,QATd,CADD,GADH,CADF;;;;;AAiBD,G,oBAtB4BC,eAAMC,S,gCAAxBX,S,CACGY,mB,GAAsB,W,CADzBZ,S,CAEGa,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":["ModalBody","responsiveLayout","rootNode","handleResize","LayoutEvents","emit","render","emotion","theme","renderMain","noPadding","props","styles","additionalPadding","hasHeader","setRootNode","cx","body","mobileBody","isMobileLayout","bodyWithoutHeader","mobileBodyWithoutHeader","bodyAddPaddingForPanel","mobileBodyAddPaddingForPanel","bodyWithoutPadding","children","React","Component","__KONTUR_REACT_UI__","displayName","__MODAL_BODY__"],"mappings":"8aAAA;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,wD;;;;;;;;;AASA;AACA;AACA;AACA;AACA,G;;;AAGaA,S,OAFZC,2B,eACAC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BSC,IAAAA,Y,GAAe,YAAM;AAC3BC,MAAAA,YAAY,CAACC,IAAb;AACD,K,uDApBMC,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,wBAAD,QACG,UAACC,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAa,0CAAkBA,KAAlB,CAAb,CACA,oBAAO,6BAAC,0BAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACC,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,CAXH,CADF,CAeD,C;;AAMMA,EAAAA,U,GAAP,sBAAiC;AAC/B,QAAQC,SAAR,GAAsB,KAAKC,KAA3B,CAAQD,SAAR;AACA,QAAME,MAAM,GAAG,sBAAU,KAAKL,OAAf,CAAf;;AAEA;AACE,mCAAC,0BAAD,CAAc,QAAd;AACG,iDAAGM,iBAAH,QAAGA,iBAAH,CAAsBC,SAAtB,QAAsBA,SAAtB;AACC,uCAAC,4BAAD,2BAAe,WAAW,EAAE,MAAI,CAACC,WAAjC,IAAkD,MAAI,CAACJ,KAAvD;AACE,uCAAC,cAAD;AACE,YAAA,SAAS,EAAE,MAAI,CAACJ,OAAL,CAAaS,EAAb;AACRJ,YAAAA,MAAM,CAACK,IAAP,CAAY,MAAI,CAACT,KAAjB,CADQ,IACkB,IADlB;AAERI,YAAAA,MAAM,CAACM,UAAP,CAAkB,MAAI,CAACV,KAAvB,CAFQ,IAEwB,MAAI,CAACW,cAF7B;AAGRP,YAAAA,MAAM,CAACQ,iBAAP,CAAyB,MAAI,CAACZ,KAA9B,CAHQ,IAG+B,CAACM,SAHhC;AAIRF,YAAAA,MAAM,CAACS,uBAAP,EAJQ,IAI2B,CAACP,SAAD,IAAc,MAAI,CAACK,cAJ9C;AAKRP,YAAAA,MAAM,CAACU,sBAAP,CAA8B,MAAI,CAACd,KAAnC,CALQ,IAKoCK,iBALpC;AAMRD,YAAAA,MAAM,CAACW,4BAAP,CAAoC,MAAI,CAACf,KAAzC,CANQ,IAM0CK,iBAAiB,IAAI,MAAI,CAACM,cANpE;AAORP,YAAAA,MAAM,CAACY,kBAAP,EAPQ,IAOsBd,SAPtB,qBADb;;;AAWG,UAAA,MAAI,CAACS,cAAL;AACC,uCAAC,8BAAD,IAAgB,QAAQ,EAAE,MAAI,CAAChB,YAA/B,IAA8C,MAAI,CAACQ,KAAL,CAAWc,QAAzD,CADD;;AAGC,UAAA,MAAI,CAACd,KAAL,CAAWc,QAdf,CADF,CADD,GADH,CADF;;;;;;;AAyBD,G,oBA7D4BC,eAAMC,S,WACrBC,mB,GAAsB,W,UACtBC,W,GAAc,W,UACdC,c,GAAiB,I","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ModalContext } from './ModalContext';\nimport { getStyles } from './Modal.styles';\nimport { getModalBodyTheme } from './getModalBodyTheme';\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 displayName = 'ModalBody';\n  public static __MODAL_BODY__ = true;\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private isMobileLayout!: boolean;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = getModalBodyTheme(theme);\n                return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  public renderMain(): JSX.Element {\n    const { noPadding } = this.props;\n    const styles = getStyles(this.emotion);\n\n    return (\n      <ModalContext.Consumer>\n        {({ additionalPadding, hasHeader }) => (\n          <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n            <ZIndex\n              className={this.emotion.cx({\n                [styles.body(this.theme)]: true,\n                [styles.mobileBody(this.theme)]: this.isMobileLayout,\n                [styles.bodyWithoutHeader(this.theme)]: !hasHeader,\n                [styles.mobileBodyWithoutHeader()]: !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/cjs/components/Modal/ModalClose.d.ts

@@ -1,3 +1,6 @@
-/// <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;
+export declare namespace ModalClose {
+    var __KONTUR_REACT_UI__: string;
+    var displayName: string;
+}

package/cjs/components/Modal/ModalClose.js

@@ -1,24 +1,69 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.ModalClose = ModalClose;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ModalClose = ModalClose;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
+var _CrossIcon = require("../../internal/icons/CrossIcon");
+var _Emotion = require("../../lib/theming/Emotion");
+var _keyListener = require("../../lib/events/keyListener");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _XIcon20Regular = require("../../internal/icons2022/XIcon/XIcon20Regular");
+var _useTheme = require("../../lib/theming/useTheme");
 
 
 var _Modal = require("./Modal.styles");
+var _Modal2 = require("./Modal");
+var _locale = require("./locale");var _excluded = ["disableClose", "requestClose"];
 
-function ModalClose(_ref) {var _cn;var disableClose = _ref.disableClose,requestClose = _ref.requestClose;
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+function ModalClose(_ref) {var disableClose = _ref.disableClose,requestClose = _ref.requestClose,otherProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var emotion = (0, _Emotion.useEmotion)();
+  var locale = (0, _useLocaleForControl.useLocaleForControl)('Modal', _locale.ModalLocaleHelper);
+  var theme = (0, _useTheme.useTheme)();
+  var _React$useState = _react.default.useState(false),focusedByTab = _React$useState[0],setFocusedByTab = _React$useState[1];
 
-  return (
-    _react.default.createElement("button", {
-      className: (0, _classnames.default)((_cn = {}, _cn[
-      _Modal.jsStyles.close(theme)] = true, _cn[
-      _Modal.jsStyles.disabled(theme)] = disableClose, _cn)),
+  var handleFocus = function handleFocus() {
+    // focus event fires before keyDown eventlistener
+    // so we should check tabPressed in async way
+    _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
+      if (_keyListener.keyListener.isTabPressed) {
+        setFocusedByTab(true);
+      }
+    });
+  };
 
-      onClick: requestClose,
-      "data-tid": "modal-close" },
+  var handleBlur = function handleBlur() {
+    setFocusedByTab(false);
+  };
 
-    _react.default.createElement("span", { className: _Modal.jsStyles.closeOutline(theme) })));
+  var icon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/_react.default.createElement(_XIcon20Regular.XIcon20Regular, { align: "none" }) : /*#__PURE__*/_react.default.createElement(_CrossIcon.CrossIcon, null);
+  var styles = (0, _Modal.getStyles)(emotion);
 
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, otherProps, /*#__PURE__*/
+    _react.default.createElement(_ResponsiveLayout.ResponsiveLayout, null,
+    function (_ref2) {var _emotion$cx;var isMobile = _ref2.isMobile;return /*#__PURE__*/(
+        _react.default.createElement("button", {
+          "aria-label": locale.closeButtonAriaLabel,
+          className: emotion.cx((_emotion$cx = {}, _emotion$cx[
+          styles.close(theme)] = true, _emotion$cx[
+          styles.mobileClose(theme)] = isMobile, _emotion$cx[
+          styles.disabled(theme)] = disableClose, _emotion$cx[
+          styles.focus(theme)] = focusedByTab, _emotion$cx)),
 
-}
+          onClick: requestClose,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          "data-tid": _Modal2.ModalDataTids.close,
+          tabIndex: disableClose ? -1 : 0 },
+
+        icon));})));
+
+
+
+
+
+}
+
+ModalClose.__KONTUR_REACT_UI__ = 'ModalClose';
+ModalClose.displayName = 'ModalClose';

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalClose.tsx"],"names":["ModalClose","disableClose","requestClose","theme","ThemeContext","jsStyles","close","disabled","closeOutline"],"mappings":"mPAAA;AACA;;AAEA;;;AAGA;;AAEO,SAASA,UAAT,OAAgE,aAA1CC,YAA0C,QAA1CA,YAA0C,CAA5BC,YAA4B,QAA5BA,YAA4B;AACrE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRC,sBAASC,KAAT,CAAeH,KAAf,CADQ,IACgB,IADhB;AAERE,sBAASE,QAAT,CAAkBJ,KAAlB,CAFQ,IAEmBF,YAFnB,OADb;;AAKE,MAAA,OAAO,EAAEC,YALX;AAME,kBAAS,aANX;;AAQE,2CAAM,SAAS,EAAEG,gBAASG,YAAT,CAAsBL,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":["ModalClose","disableClose","requestClose","otherProps","emotion","locale","ModalLocaleHelper","theme","React","useState","focusedByTab","setFocusedByTab","handleFocus","globalObject","requestAnimationFrame","keyListener","isTabPressed","handleBlur","icon","styles","isMobile","closeButtonAriaLabel","cx","close","mobileClose","disabled","focus","ModalDataTids","__KONTUR_REACT_UI__","displayName"],"mappings":"gSAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA,kC;;AAEO,SAASA,UAAT,OAA+E,KAAzDC,YAAyD,QAAzDA,YAAyD,CAA3CC,YAA2C,QAA3CA,YAA2C,CAA1BC,UAA0B;AACpF,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,8CAAoB,OAApB,EAA6BC,yBAA7B,CAAf;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,wBAAwCC,eAAMC,QAAN,CAAe,KAAf,CAAxC,CAAOC,YAAP,sBAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB;AACA;AACAC,+BAAaC,qBAAb,+CAAaA,qBAAb,CAAqC,YAAM;AACzC,UAAIC,yBAAYC,YAAhB,EAA8B;AAC5BL,QAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF,KAJD;AAKD,GARD;;AAUA,MAAMM,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvBN,IAAAA,eAAe,CAAC,KAAD,CAAf;AACD,GAFD;;AAIA,MAAMO,IAAI,GAAG,+BAAYX,KAAZ,iBAAqB,6BAAC,8BAAD,IAAgB,KAAK,EAAC,MAAtB,GAArB,gBAAuD,6BAAC,oBAAD,OAApE;AACA,MAAMY,MAAM,GAAG,sBAAUf,OAAV,CAAf;;AAEA;AACE,iCAAC,4BAAD,EAAmBD,UAAnB;AACE,iCAAC,kCAAD;AACG,0CAAGiB,QAAH,SAAGA,QAAH;AACC;AACE,wBAAYf,MAAM,CAACgB,oBADrB;AAEE,UAAA,SAAS,EAAEjB,OAAO,CAACkB,EAAR;AACRH,UAAAA,MAAM,CAACI,KAAP,CAAahB,KAAb,CADQ,IACc,IADd;AAERY,UAAAA,MAAM,CAACK,WAAP,CAAmBjB,KAAnB,CAFQ,IAEoBa,QAFpB;AAGRD,UAAAA,MAAM,CAACM,QAAP,CAAgBlB,KAAhB,CAHQ,IAGiBN,YAHjB;AAIRkB,UAAAA,MAAM,CAACO,KAAP,CAAanB,KAAb,CAJQ,IAIcG,YAJd,eAFb;;AAQE,UAAA,OAAO,EAAER,YARX;AASE,UAAA,OAAO,EAAEU,WATX;AAUE,UAAA,MAAM,EAAEK,UAVV;AAWE,sBAAUU,sBAAcJ,KAX1B;AAYE,UAAA,QAAQ,EAAEtB,YAAY,GAAG,CAAC,CAAJ,GAAQ,CAZhC;;AAcGiB,QAAAA,IAdH,CADD,GADH,CADF,CADF;;;;;;AAwBD;;AAEDlB,UAAU,CAAC4B,mBAAX,GAAiC,YAAjC;AACA5B,UAAU,CAAC6B,WAAX,GAAyB,YAAzB","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { useLocaleForControl } from '../../lib/locale/useLocaleForControl';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { XIcon20Regular } from '../../internal/icons2022/XIcon/XIcon20Regular';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { CloseProps } from './ModalContext';\nimport { getStyles } from './Modal.styles';\nimport { ModalDataTids } from './Modal';\nimport { ModalLocaleHelper } from './locale';\n\nexport function ModalClose({ disableClose, requestClose, ...otherProps }: CloseProps) {\n  const emotion = useEmotion();\n  const locale = useLocaleForControl('Modal', ModalLocaleHelper);\n  const theme = useTheme();\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    globalObject.requestAnimationFrame?.(() => {\n      if (keyListener.isTabPressed) {\n        setFocusedByTab(true);\n      }\n    });\n  };\n\n  const handleBlur = () => {\n    setFocusedByTab(false);\n  };\n\n  const icon = isTheme2022(theme) ? <XIcon20Regular align=\"none\" /> : <CrossIcon />;\n  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...otherProps}>\n      <ResponsiveLayout>\n        {({ isMobile }) => (\n          <button\n            aria-label={locale.closeButtonAriaLabel}\n            className={emotion.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={ModalDataTids.close}\n            tabIndex={disableClose ? -1 : 0}\n          >\n            {icon}\n          </button>\n        )}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nModalClose.__KONTUR_REACT_UI__ = 'ModalClose';\nModalClose.displayName = 'ModalClose';\n"]}

package/cjs/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/cjs/components/Modal/ModalContext.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ModalContext = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ModalContext = void 0;var _react = _interopRequireDefault(require("react"));
 
 
 
@@ -12,6 +12,11 @@
 
 
 
-var ModalContext = _react.default.createContext({});exports.ModalContext = ModalContext;
+
+
+
+
+
+var ModalContext = /*#__PURE__*/_react.default.createContext({});exports.ModalContext = ModalContext;
 
 ModalContext.displayName = 'ModalContext';

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalContext.tsx"],"names":["ModalContext","React","createContext","displayName"],"mappings":"0JAAA;;;;;;;;;;;;;;AAcO,IAAMA,YAAY,GAAGC,eAAMC,aAAN,CAAuC,EAAvC,CAArB,C;;AAEPF,YAAY,CAACG,WAAb,GAA2B,cAA3B","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\r\nModalContext.displayName = 'ModalContext';\r\n"]}
+{"version":3,"sources":["ModalContext.tsx"],"names":["ModalContext","React","createContext","displayName"],"mappings":"kKAAA;;;;;;;;;;;;;;;;;;;AAmBO,IAAMA,YAAY,gBAAGC,eAAMC,aAAN,CAAuC,EAAvC,CAArB,C;;AAEPF,YAAY,CAACG,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/cjs/components/Modal/ModalFooter.d.ts

@@ -1,12 +1,30 @@
 import { ReactNode } from 'react';
-export interface ModalFooterProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+import { GappedProps } from '../Gapped';
+export interface ModalFooterProps extends CommonProps {
     /**
      * Включает серый цвет в футере
      */
     panel?: boolean;
+    /**
+     * Закрепляет футер снизу модального окна
+     *
+     * На десктопе по умолчанию равен `true`
+     * На мобильных по умолчанию равен `false`
+     */
     sticky?: boolean;
+    /**
+     * Контент футера
+     */
     children?: ReactNode;
+    /**
+     * Задаёт отступ между элементами футера
+     */
+    gap?: GappedProps['gap'];
 }
+export declare const ModalFooterDataTids: {
+    readonly root: "ModalFooter__root";
+};
 /**
  * Футер модального окна.
  *
@@ -15,6 +33,7 @@ export interface ModalFooterProps {
 declare function ModalFooter(props: ModalFooterProps): JSX.Element;
 declare namespace ModalFooter {
     var __KONTUR_REACT_UI__: string;
+    var displayName: string;
     var __MODAL_FOOTER__: boolean;
 }
 export { ModalFooter };

package/cjs/components/Modal/ModalFooter.js

@@ -1,13 +1,17 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.ModalFooter = ModalFooter;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.ModalFooter = ModalFooter;exports.ModalFooterDataTids = void 0;var _react = _interopRequireWildcard(require("react"));
 
 var _getScrollWidth = require("../../lib/dom/getScrollWidth");
 var _Sticky = require("../Sticky");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _ZIndex = require("../../internal/ZIndex");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ResponsiveLayout = require("../ResponsiveLayout");
+var _Gapped = require("../Gapped");
+var _utils = require("../../lib/utils");
+var _useTheme = require("../../lib/theming/useTheme");
 
 var _Modal = require("./Modal.styles");
 var _ModalContext = require("./ModalContext");
+var _ModalSeparator = require("./ModalSeparator");
 
 
 
@@ -18,50 +22,86 @@ var _ModalContext = require("./ModalContext");
 
 
 
-/**
-                                                * Футер модального окна.
-                                                *
-                                                * @visibleName Modal.Footer
-                                                */
-function ModalFooter(props) {var _props$sticky =
-  props.sticky,sticky = _props$sticky === void 0 ? true : _props$sticky,panel = props.panel,children = props.children;
-  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);var _useState =
-  (0, _react.useState)(0),scrollbarWidth = _useState[0],setScrollBarWidth = _useState[1];
 
-  (0, _react.useEffect)(function () {
-    setScrollBarWidth((0, _getScrollWidth.getScrollWidth)());
-  }, []);
 
-  var renderContent = function renderContent(fixed) {var _cn;if (fixed === void 0) {fixed = false;}return (
+
+
+
+
+
+
+
+
+
+
+
+var ModalFooterDataTids = {
+  root: 'ModalFooter__root' };
+
+
+/**
+ * Футер модального окна.
+ *
+ * @visibleName Modal.Footer
+ */exports.ModalFooterDataTids = ModalFooterDataTids;
+function ModalFooter(props) {
+  var emotion = (0, _Emotion.useEmotion)();
+  var theme = (0, _useTheme.useTheme)();
+  var modal = (0, _react.useContext)(_ModalContext.ModalContext);
+  var layout = (0, _ResponsiveLayout.useResponsiveLayout)();
+
+  var _props$sticky = props.sticky,sticky = _props$sticky === void 0 ? !layout.isMobile : _props$sticky,gap = props.gap,panel = props.panel,children = props.children;
+  var styles = (0, _Modal.getStyles)(emotion);
+
+  (0, _react.useLayoutEffect)(function () {
+    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) {if (fixed === void 0) {fixed = false;}
+    return /*#__PURE__*/(
+      _react.default.createElement("div", null,
+      (panel || fixed) && /*#__PURE__*/_react.default.createElement(_ModalSeparator.ModalSeparator, { fixed: fixed }), /*#__PURE__*/
       _react.default.createElement("div", {
-        className: (0, _classnames.default)((_cn = {}, _cn[
-        _Modal.jsStyles.footer()] = true, _cn[
-        _Modal.jsStyles.panel(theme)] = Boolean(panel), _cn[
-        _Modal.jsStyles.fixedFooter(theme)] = fixed, _cn)) },
+        "data-tid": ModalFooterDataTids.root,
+        className: emotion.cx(
+        styles.footer(theme),
+        fixed && styles.fixedFooter(theme),
+        Boolean(panel) && styles.panel(theme),
+        fixed && Boolean(panel) && styles.fixedPanel(theme),
+        layout.isMobile && styles.mobileFooter(theme)) },
+
+
+      (0, _utils.isNonNullable)(gap) ? /*#__PURE__*/
+      _react.default.createElement(_Gapped.Gapped, { vertical: layout.isMobile, gap: gap },
+      children) :
+
 
+      children)));
 
-      children));};
 
 
 
-  return (
-    _react.default.createElement(_ZIndex.ZIndex, { style: { position: 'relative' }, priority: 'ModalFooter' },
-    _react.default.createElement(_ModalContext.ModalContext.Consumer, null,
-    function (_ref) {var horizontalScroll = _ref.horizontalScroll;
-      if (sticky) {
-        return (
-          _react.default.createElement(_Sticky.Sticky, { side: "bottom", offset: horizontalScroll ? scrollbarWidth : 0 },
-          renderContent));
+  };
 
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props,
+    sticky ? /*#__PURE__*/
+    _react.default.createElement(_Sticky.Sticky, { side: "bottom", offset: modal.horizontalScroll ? (0, _getScrollWidth.getScrollWidth)() : 0 },
+    renderContent) :
 
-      }
 
-      return renderContent();
-    })));
+    renderContent()));
 
 
 
 }
 
 ModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
 ModalFooter.__MODAL_FOOTER__ = true;

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

@@ -1 +1 @@
-{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooter","props","sticky","panel","children","theme","ThemeContext","scrollbarWidth","setScrollBarWidth","renderContent","fixed","jsStyles","footer","Boolean","fixedFooter","position","horizontalScroll","__KONTUR_REACT_UI__","__MODAL_FOOTER__"],"mappings":"qPAAA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;AAWA;;;;;AAKA,SAASA,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,GAAG,uBAAWC,0BAAX,CAAd,CAF4C;AAGA,uBAAS,CAAT,CAHA,CAGrCC,cAHqC,gBAGrBC,iBAHqB;;AAK5C,wBAAU,YAAM;AACdA,IAAAA,iBAAiB,CAAC,qCAAD,CAAjB;AACD,GAFD,EAEG,EAFH;;AAIA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,eAACA,KAAD,cAACA,KAAD,GAAS,KAAT;AACpB;AACE,QAAA,SAAS,EAAE;AACRC,wBAASC,MAAT,EADQ,IACY,IADZ;AAERD,wBAASR,KAAT,CAAeE,KAAf,CAFQ,IAEgBQ,OAAO,CAACV,KAAD,CAFvB;AAGRQ,wBAASG,WAAT,CAAqBT,KAArB,CAHQ,IAGsBK,KAHtB,OADb;;;AAOGN,MAAAA,QAPH,CADoB,GAAtB;;;;AAYA;AACE,iCAAC,cAAD,IAAQ,KAAK,EAAE,EAAEW,QAAQ,EAAE,UAAZ,EAAf,EAAyC,QAAQ,EAAE,aAAnD;AACE,iCAAC,0BAAD,CAAc,QAAd;AACG,oBAA0B,KAAvBC,gBAAuB,QAAvBA,gBAAuB;AACzB,UAAId,MAAJ,EAAY;AACV;AACE,uCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEc,gBAAgB,GAAGT,cAAH,GAAoB,CAAlE;AACGE,UAAAA,aADH,CADF;;;AAKD;;AAED,aAAOA,aAAa,EAApB;AACD,KAXH,CADF,CADF;;;;AAiBD;;AAEDT,WAAW,CAACiB,mBAAZ,GAAkC,aAAlC;AACAjB,WAAW,CAACkB,gBAAZ,GAA+B,IAA/B","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":["ModalFooterDataTids","root","ModalFooter","props","emotion","theme","modal","ModalContext","layout","sticky","isMobile","gap","panel","children","styles","setHasFooter","setHasPanel","renderContent","fixed","cx","footer","fixedFooter","Boolean","fixedPanel","mobileFooter","horizontalScroll","__KONTUR_REACT_UI__","displayName","__MODAL_FOOTER__"],"mappings":"6MAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,IAAMA,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP;AACA;AACA;AACA;AACA,G;AACA,SAASC,WAAT,CAAqBC,KAArB,EAA8C;AAC5C,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,MAAMC,MAAM,GAAG,4CAAf;;AAEA,sBAA4DL,KAA5D,CAAQM,MAAR,CAAQA,MAAR,8BAAiB,CAACD,MAAM,CAACE,QAAzB,iBAAmCC,GAAnC,GAA4DR,KAA5D,CAAmCQ,GAAnC,CAAwCC,KAAxC,GAA4DT,KAA5D,CAAwCS,KAAxC,CAA+CC,QAA/C,GAA4DV,KAA5D,CAA+CU,QAA/C;AACA,MAAMC,MAAM,GAAG,sBAAUV,OAAV,CAAf;;AAEA,8BAAgB,YAAM;AACpBE,IAAAA,KAAK,CAACS,YAAN,oBAAAT,KAAK,CAACS,YAAN;AACAT,IAAAA,KAAK,CAACU,WAAN,oBAAAV,KAAK,CAACU,WAAN,CAAoBJ,KAApB;;AAEA,WAAO,YAAM;AACXN,MAAAA,KAAK,CAACS,YAAN,oBAAAT,KAAK,CAACS,YAAN,CAAqB,KAArB;AACAT,MAAAA,KAAK,CAACU,WAAN,oBAAAV,KAAK,CAACU,WAAN,CAAoB,KAApB;AACD,KAHD;AAID,GARD,EAQG,CAACJ,KAAD,CARH;;AAUA,MAAMK,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAmB,KAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACvC;AACE;AACG,OAACN,KAAK,IAAIM,KAAV,kBAAoB,6BAAC,8BAAD,IAAgB,KAAK,EAAEA,KAAvB,GADvB;AAEE;AACE,oBAAUlB,mBAAmB,CAACC,IADhC;AAEE,QAAA,SAAS,EAAEG,OAAO,CAACe,EAAR;AACTL,QAAAA,MAAM,CAACM,MAAP,CAAcf,KAAd,CADS;AAETa,QAAAA,KAAK,IAAIJ,MAAM,CAACO,WAAP,CAAmBhB,KAAnB,CAFA;AAGTiB,QAAAA,OAAO,CAACV,KAAD,CAAP,IAAkBE,MAAM,CAACF,KAAP,CAAaP,KAAb,CAHT;AAITa,QAAAA,KAAK,IAAII,OAAO,CAACV,KAAD,CAAhB,IAA2BE,MAAM,CAACS,UAAP,CAAkBlB,KAAlB,CAJlB;AAKTG,QAAAA,MAAM,CAACE,QAAP,IAAmBI,MAAM,CAACU,YAAP,CAAoBnB,KAApB,CALV,CAFb;;;AAUG,gCAAcM,GAAd;AACC,mCAAC,cAAD,IAAQ,QAAQ,EAAEH,MAAM,CAACE,QAAzB,EAAmC,GAAG,EAAEC,GAAxC;AACGE,MAAAA,QADH,CADD;;;AAKCA,MAAAA,QAfJ,CAFF,CADF;;;;;AAuBD,GAxBD;;AA0BA;AACE,iCAAC,4BAAD,EAAmBV,KAAnB;AACGM,IAAAA,MAAM;AACL,iCAAC,cAAD,IAAQ,IAAI,EAAC,QAAb,EAAsB,MAAM,EAAEH,KAAK,CAACmB,gBAAN,GAAyB,qCAAzB,GAA4C,CAA1E;AACGR,IAAAA,aADH,CADK;;;AAKLA,IAAAA,aAAa,EANjB,CADF;;;;AAWD;;AAEDf,WAAW,CAACwB,mBAAZ,GAAkC,aAAlC;AACAxB,WAAW,CAACyB,WAAZ,GAA0B,aAA1B;AACAzB,WAAW,CAAC0B,gBAAZ,GAA+B,IAA/B","sourcesContent":["import React, { ReactNode, useContext, useLayoutEffect } from 'react';\n\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\nimport { Sticky } from '../Sticky';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useResponsiveLayout } from '../ResponsiveLayout';\nimport { Gapped, GappedProps } from '../Gapped';\nimport { isNonNullable } from '../../lib/utils';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './Modal.styles';\nimport { ModalContext } from './ModalContext';\nimport { ModalSeparator } from './ModalSeparator';\n\nexport interface ModalFooterProps extends CommonProps {\n  /**\n   * Включает серый цвет в футере\n   */\n  panel?: boolean;\n  /**\n   * Закрепляет футер снизу модального окна\n   *\n   * На десктопе по умолчанию равен `true`\n   * На мобильных по умолчанию равен `false`\n   */\n  sticky?: boolean;\n  /**\n   * Контент футера\n   */\n  children?: ReactNode;\n  /**\n   * Задаёт отступ между элементами футера\n   */\n  gap?: GappedProps['gap'];\n}\n\nexport const ModalFooterDataTids = {\n  root: 'ModalFooter__root',\n} as const;\n\n/**\n * Футер модального окна.\n *\n * @visibleName Modal.Footer\n */\nfunction ModalFooter(props: ModalFooterProps) {\n  const emotion = useEmotion();\n  const theme = useTheme();\n  const modal = useContext(ModalContext);\n  const layout = useResponsiveLayout();\n\n  const { sticky = !layout.isMobile, gap, panel, children } = props;\n  const styles = getStyles(emotion);\n\n  useLayoutEffect(() => {\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        {(panel || fixed) && <ModalSeparator fixed={fixed} />}\n        <div\n          data-tid={ModalFooterDataTids.root}\n          className={emotion.cx(\n            styles.footer(theme),\n            fixed && styles.fixedFooter(theme),\n            Boolean(panel) && styles.panel(theme),\n            fixed && Boolean(panel) && styles.fixedPanel(theme),\n            layout.isMobile && styles.mobileFooter(theme),\n          )}\n        >\n          {isNonNullable(gap) ? (\n            <Gapped vertical={layout.isMobile} gap={gap}>\n              {children}\n            </Gapped>\n          ) : (\n            children\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <CommonWrapper {...props}>\n      {sticky ? (\n        <Sticky side=\"bottom\" offset={modal.horizontalScroll ? getScrollWidth() : 0}>\n          {renderContent}\n        </Sticky>\n      ) : (\n        renderContent()\n      )}\n    </CommonWrapper>\n  );\n}\n\nModalFooter.__KONTUR_REACT_UI__ = 'ModalFooter';\nModalFooter.displayName = 'ModalFooter';\nModalFooter.__MODAL_FOOTER__ = true;\n\nexport { ModalFooter };\n"]}