@megafon/ui-core 9.0.0-alpha.7 → 9.0.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/es/components/Modal/Modal.d.ts +11 -2
  2. package/dist/es/components/Modal/Modal.js +4 -0
  3. package/dist/es/components/Modal/_ModalContent/ModalContent.css +1 -1
  4. package/dist/es/components/Modal/_ModalContent/ModalContent.js +26 -9
  5. package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
  6. package/dist/es/components/Modal/_ModalMobile/ModalMobile.css +1 -1
  7. package/dist/es/components/Notification/Notification.css +1 -1
  8. package/dist/es/components/Notification/Notification.d.ts +0 -11
  9. package/dist/es/components/Notification/Notification.js +7 -30
  10. package/dist/lib/components/Modal/Modal.d.ts +11 -2
  11. package/dist/lib/components/Modal/Modal.js +5 -1
  12. package/dist/lib/components/Modal/_ModalContent/ModalContent.css +1 -1
  13. package/dist/lib/components/Modal/_ModalContent/ModalContent.js +26 -9
  14. package/dist/lib/components/Modal/_ModalDesktop/ModalDesktop.css +1 -1
  15. package/dist/lib/components/Modal/_ModalMobile/ModalMobile.css +1 -1
  16. package/dist/lib/components/Notification/Notification.css +1 -1
  17. package/dist/lib/components/Notification/Notification.d.ts +0 -11
  18. package/dist/lib/components/Notification/Notification.js +6 -29
  19. package/package.json +2 -2
package/dist/es/components/Modal/Modal.d.ts CHANGED
@@ -6,6 +6,11 @@ declare const ModalMobileViews: {
6
6
  readonly BOTTOM: "bottom";
7
7
  };
8
8
  type ModalMobileViewsType = (typeof ModalMobileViews)[keyof typeof ModalMobileViews];
9
+ export declare const HeaderButtonsTheme: {
10
+ readonly DEFAULT: "default";
11
+ readonly WHITE: "white";
12
+ };
13
+ export type HeaderButtonsThemeType = (typeof HeaderButtonsTheme)[keyof typeof HeaderButtonsTheme];
9
14
  export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
10
15
  INITIAL_STEP = "initial-step",
11
16
  MOVE_STEP = "move-step",
@@ -44,13 +49,17 @@ export type ModalHeaderPropsType = {
44
49
  showBackButton?: boolean;
45
50
  /** Скрыть крестик */
46
51
  hideCloseButton?: boolean;
47
- /** Отобразить дополнительный контент в шапке */
52
+ /** Дополнительный контент в шапке */
48
53
  headerAdditionalContent?: JSX.Element | JSX.Element[] | string | null;
54
+ /** Кастомный контент в шапке */
55
+ headerCustomContent?: JSX.Element | JSX.Element[] | string | null;
56
+ /** Цветовая тема кнопок */
57
+ buttonsTheme?: HeaderButtonsThemeType;
49
58
  /** Отобразить тень у шапки */
50
59
  hasHeaderShadow?: boolean;
51
60
  /** Закрепленная шапка */
52
61
  isStickyHeader?: boolean;
53
- /** Кнопки находятся вне основной шапке */
62
+ /** Кнопки находятся вне основной шапки */
54
63
  isOutSideHeaderButtons?: boolean;
55
64
  /** Использовать серый фон в шапке */
56
65
  isGrayColorHeader?: boolean;
package/dist/es/components/Modal/Modal.js CHANGED
@@ -18,6 +18,10 @@ var ModalMobileViews = {
18
18
  // use camelCase for simple using in props from backend
19
19
  BOTTOM: 'bottom'
20
20
  };
21
+ export var HeaderButtonsTheme = {
22
+ DEFAULT: 'default',
23
+ WHITE: 'white'
24
+ };
21
25
  export var MODAL_TRANSITIONS_STEPS_ENUM;
22
26
  (function (MODAL_TRANSITIONS_STEPS_ENUM) {
23
27
  MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";
package/dist/es/components/Modal/_ModalContent/ModalContent.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray);border-top-left-radius:32px;border-top-right-radius:32px}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-custom-content{width:100%}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;overflow:hidden;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner{background-color:var(--stcWhite);position:relative}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:after{background-color:var(--stcBlack);bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:hover:after{opacity:.1}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:active:after{opacity:.2}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-icon{fill:var(--stcBlack)}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
package/dist/es/components/Modal/_ModalContent/ModalContent.js CHANGED
@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import * as React from 'react';
4
4
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
5
  import { CSSTransition } from 'react-transition-group';
6
- import ButtonClose from "../../Buttons/ButtonClose/ButtonClose";
7
6
  import ScrollBar from "../../ScrollBar/ScrollBar";
8
7
  import "./ModalContent.css";
9
8
  var ArrowLeft24 = function ArrowLeft24(props) {
@@ -13,6 +12,14 @@ var ArrowLeft24 = function ArrowLeft24(props) {
13
12
  d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
14
13
  }));
15
14
  };
15
+ var Cancel24 = function Cancel24(props) {
16
+ return /*#__PURE__*/React.createElement("svg", _extends({
17
+ viewBox: "0 0 32 32"
18
+ }, props), /*#__PURE__*/React.createElement("path", {
19
+ className: "Cancel24__st0",
20
+ d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
21
+ }));
22
+ };
16
23
  var cn = cnCreate('mfui-9-modal-content');
17
24
  var ModalContent = function ModalContent(_ref) {
18
25
  var classes = _ref.classes,
@@ -24,6 +31,8 @@ var ModalContent = function ModalContent(_ref) {
24
31
  showBackButton = _ref$headerProps2.showBackButton,
25
32
  hideCloseButton = _ref$headerProps2.hideCloseButton,
26
33
  headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
34
+ headerCustomContent = _ref$headerProps2.headerCustomContent,
35
+ buttonsTheme = _ref$headerProps2.buttonsTheme,
27
36
  hasHeaderShadow = _ref$headerProps2.hasHeaderShadow,
28
37
  _ref$headerProps2$isS = _ref$headerProps2.isStickyHeader,
29
38
  isStickyHeaderProps = _ref$headerProps2$isS === void 0 ? true : _ref$headerProps2$isS,
@@ -60,7 +69,7 @@ var ModalContent = function ModalContent(_ref) {
60
69
  showHeaderShadow = _React$useState2[0],
61
70
  setShowHeaderShadow = _React$useState2[1];
62
71
  var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
63
- var showHeader = showHeaderMain || !!headerAdditionalContent;
72
+ var showHeader = showHeaderMain || !!headerAdditionalContent || !!headerCustomContent;
64
73
  var isStickyHeader = showHeader && isStickyHeaderProps;
65
74
  var isStaticHeader = showHeader && !isStickyHeaderProps;
66
75
  var isStickyFooter = !!footer && !!isStickyFooterProps;
@@ -71,7 +80,8 @@ var ModalContent = function ModalContent(_ref) {
71
80
  }, []);
72
81
  var renderBackButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
73
82
  className: cn('header-button', {
74
- back: true
83
+ back: true,
84
+ theme: buttonsTheme
75
85
  }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
76
86
  type: "button",
77
87
  onClick: onBackButtonClick
@@ -80,13 +90,18 @@ var ModalContent = function ModalContent(_ref) {
80
90
  }, /*#__PURE__*/React.createElement(ArrowLeft24, {
81
91
  className: cn('header-icon')
82
92
  })));
83
- var renderCloseButton = /*#__PURE__*/React.createElement(ButtonClose, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
93
+ var renderCloseButton = /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
84
94
  className: cn('header-button', {
85
- close: true
95
+ close: true,
96
+ theme: buttonsTheme
86
97
  }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
87
- size: "medium",
98
+ type: "button",
88
99
  onClick: onPopupClose
89
- }));
100
+ }), /*#__PURE__*/React.createElement("div", {
101
+ className: cn('header-inner')
102
+ }, /*#__PURE__*/React.createElement(Cancel24, {
103
+ className: cn('header-icon')
104
+ })));
90
105
  var renderHeader = /*#__PURE__*/React.createElement("div", {
91
106
  className: cn('header', {
92
107
  shadow: showHeaderShadow,
@@ -96,11 +111,13 @@ var ModalContent = function ModalContent(_ref) {
96
111
  ref: headerRef
97
112
  }, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
98
113
  className: cn('header-main')
99
- }, showBackButton && renderBackButton, !!headerTitle && /*#__PURE__*/React.createElement("div", {
114
+ }, showBackButton && renderBackButton, !!headerCustomContent && /*#__PURE__*/React.createElement("div", {
115
+ className: cn('header-custom-content')
116
+ }, headerCustomContent), !!headerTitle && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
100
117
  className: cn('title-area', classes === null || classes === void 0 ? void 0 : classes.titleArea)
101
118
  }, /*#__PURE__*/React.createElement("div", {
102
119
  className: cn('title', classes === null || classes === void 0 ? void 0 : classes.title)
103
- }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && /*#__PURE__*/React.createElement("div", {
120
+ }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
104
121
  className: cn('header-additional')
105
122
  }, headerAdditionalContent));
106
123
  var renderFooter = /*#__PURE__*/React.createElement("div", {
package/dist/es/components/Modal/_ModalDesktop/ModalDesktop.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px;overflow:hidden}
package/dist/es/components/Modal/_ModalMobile/ModalMobile.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto;overflow:hidden}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
package/dist/es/components/Notification/Notification.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{background-color:var(--base);border-radius:12px;padding:20px 12px 20px 32px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:8px;top:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:50%;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}@media screen and (min-width:768px){.mfui-9-notification__close{height:32px;right:12px;top:12px;width:32px}}.mfui-9-notification__close:hover{background-color:var(--spbSky1)}.mfui-9-notification__close:active{background-color:var(--spbSky2)}.mfui-9-notification__close:after{background-color:var(--content);border-radius:50%;content:"";height:100%;opacity:.05;position:absolute;width:100%}.mfui-9-notification__close-icon{height:10px;opacity:.5;width:10px;fill:var(--content)}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--fury20)}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background-color:var(--brandGreen20)}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background-color:var(--137C20)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background-color:var(--sky20)}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}.mfui-9-notification_colored .mfui-9-notification__icon-container{background-color:var(--base)}.mfui-9-notification_colored.mfui-9-notification_type_info{background-color:var(--sky20)}.mfui-9-notification_colored.mfui-9-notification_type_warning{background-color:var(--137C20)}.mfui-9-notification_colored.mfui-9-notification_type_success{background-color:var(--brandGreen20)}.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__title{color:var(--content)}.mfui-9-notification_colored.mfui-9-notification_type_error{background-color:var(--fury80)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-button,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__title{color:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-arrow,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link-arrow{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover){background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover) .mfui-9-notification__close-icon{opacity:1;fill:var(--stcWhite)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{border:1px solid transparent;border-radius:24px;overflow:hidden;padding:20px 12px 20px 20px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification:before{border-radius:50%;content:"";-webkit-filter:blur(30px);filter:blur(30px);height:80px;left:-14px;position:absolute;top:-6px;width:80px;z-index:0}@media screen and (max-width:767px){.mfui-9-notification:after{border-radius:50%;content:"";-webkit-filter:blur(45px);filter:blur(45px);height:128px;position:absolute;right:-32px;top:45px;width:128px;z-index:0}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:2;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border:.3px solid transparent;border-radius:12px;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{position:absolute;right:1px;top:1px;z-index:100}.mfui-9-notification_type_error{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffacb2 98.41%) border-box}.mfui-9-notification_type_error:before{background:linear-gradient(46.7deg,#f62434 16.91%,rgba(246,36,52,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_error:after{background:linear-gradient(46.7deg,rgba(246,36,52,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(246,36,52,0) 5.8%,#f62434 48.19%) border-box}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,rgba(62,255,110,.7) 98.41%) border-box}.mfui-9-notification_type_success:before{background:linear-gradient(46.7deg,#00b956 16.91%,rgba(0,185,86,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_success:after{background:linear-gradient(46.7deg,rgba(0,185,86,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(0,185,86,0) 5.8%,#00b956 48.19%) border-box}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffdea7 98.41%) border-box}.mfui-9-notification_type_warning:before{background:linear-gradient(46.7deg,#ffab23 16.91%,rgba(255,171,35,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_warning:after{background:linear-gradient(46.7deg,rgba(255,171,35,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(255,171,35,0) 5.8%,#ffab23 48.19%) border-box}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#a5dfff 98.41%) border-box}.mfui-9-notification_type_info:before{background:linear-gradient(46.7deg,#3cb9ff 16.91%,rgba(60,185,255,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_info:after{background:linear-gradient(46.7deg,rgba(60,185,255,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(60,185,255,0) 5.8%,#3cb9ff 48.19%) border-box}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}
package/dist/es/components/Notification/Notification.d.ts CHANGED
@@ -7,13 +7,6 @@ declare const NotificationTypes: {
7
7
  readonly INFO: "info";
8
8
  };
9
9
  type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
10
- declare const ShadowTypes: {
11
- readonly ZERO: "zero";
12
- readonly HOVER: "hover";
13
- readonly PRESSED: "pressed";
14
- readonly DEFAULT: "default";
15
- };
16
- type ShadowType = (typeof ShadowTypes)[keyof typeof ShadowTypes];
17
10
  export interface INotificationProps {
18
11
  /** Дополнительный класс корневого элемента */
19
12
  className?: string;
@@ -26,10 +19,6 @@ export interface INotificationProps {
26
19
  };
27
20
  /** Тип отображения */
28
21
  type?: NotificationType;
29
- /** Уровень тени */
30
- shadowLevel?: ShadowType;
31
- /** Наличие фоновой заливки у уведомления */
32
- isColored?: boolean;
33
22
  /** Наличие кнопки-крестика "Закрыть" */
34
23
  hasCloseButton?: boolean;
35
24
  /** Заголовок */
package/dist/es/components/Notification/Notification.js CHANGED
@@ -3,8 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  import "core-js/modules/es.string.link.js";
4
4
  import "core-js/modules/web.timers.js";
5
5
  import * as React from 'react';
6
- import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
6
+ import { cnCreate, convert, filterDataAttrs, textConvertConfig, titleConvertConfig } from '@megafon/ui-helpers';
7
7
  import Button from "../Buttons/Button/Button";
8
+ import ButtonClose from "../Buttons/ButtonClose/ButtonClose";
8
9
  import TextLink from "../TextLink/TextLink";
9
10
  import Tile from "../Tile/Tile";
10
11
  import "./Notification.css";
@@ -54,15 +55,6 @@ var InfoIcon = function InfoIcon(props) {
54
55
  d: "M15 12h2v-2h-2v2zm0 10h2v-8h-2v8zm1 6C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zm0-22C10.5 6 6 10.5 6 16s4.5 10 10 10 10-4.5 10-10S21.5 6 16 6z"
55
56
  }));
56
57
  };
57
- var CancelIcon = function CancelIcon(props) {
58
- return /*#__PURE__*/React.createElement("svg", _extends({
59
- viewBox: "0 0 10 10"
60
- }, props), /*#__PURE__*/React.createElement("path", {
61
- fillRule: "evenodd",
62
- clipRule: "evenodd",
63
- d: "M5 3.75L1.25 0 0 1.25 3.75 5 0 8.75 1.25 10 5 6.25 8.75 10 10 8.75 6.25 5 10 1.25 8.75 0 5 3.75z"
64
- }));
65
- };
66
58
  var TIMEOUT_DELAY = 400;
67
59
  var useEffect = React.useEffect,
68
60
  useRef = React.useRef,
@@ -73,12 +65,6 @@ var NotificationTypes = {
73
65
  ERROR: 'error',
74
66
  INFO: 'info'
75
67
  };
76
- var ShadowTypes = {
77
- ZERO: 'zero',
78
- HOVER: 'hover',
79
- PRESSED: 'pressed',
80
- DEFAULT: 'default'
81
- };
82
68
  export var testIdPrefix = 'Notification';
83
69
  var cn = cnCreate('mfui-9-notification');
84
70
  var Notification = function Notification(_ref) {
@@ -92,10 +78,6 @@ var Notification = function Notification(_ref) {
92
78
  children = _ref.children,
93
79
  _ref$type = _ref.type,
94
80
  type = _ref$type === void 0 ? 'info' : _ref$type,
95
- _ref$shadowLevel = _ref.shadowLevel,
96
- shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
97
- _ref$isColored = _ref.isColored,
98
- isColored = _ref$isColored === void 0 ? true : _ref$isColored,
99
81
  hasCloseButton = _ref.hasCloseButton,
100
82
  title = _ref.title,
101
83
  shortText = _ref.shortText,
@@ -145,7 +127,6 @@ var Notification = function Notification(_ref) {
145
127
  textClasses = _useState6[0],
146
128
  setTextClass = _useState6[1];
147
129
  var hasBottom = shortText || buttonText || link;
148
- var isErrorType = type === NotificationTypes.ERROR;
149
130
  useEffect(function () {
150
131
  setShowFullText(isCollapseOpened);
151
132
  }, [isCollapseOpened]);
@@ -193,7 +174,7 @@ var Notification = function Notification(_ref) {
193
174
  },
194
175
  className: cn('link', [linkClass]),
195
176
  onClick: onLinkClick,
196
- color: isErrorType && isColored ? 'white' : 'green',
177
+ color: "green",
197
178
  rel: rel,
198
179
  href: href,
199
180
  target: target
@@ -209,7 +190,7 @@ var Notification = function Notification(_ref) {
209
190
  },
210
191
  sizeAll: "small",
211
192
  sizeMobile: "extra-small",
212
- theme: isErrorType && isColored ? 'white' : 'green',
193
+ theme: "green",
213
194
  showLoader: buttonLoader,
214
195
  disabled: buttonDisable,
215
196
  ellipsis: !buttonLoader,
@@ -247,11 +228,10 @@ var Notification = function Notification(_ref) {
247
228
  };
248
229
  return /*#__PURE__*/React.createElement(Tile, {
249
230
  className: cn({
250
- type: type,
251
- colored: isColored
231
+ type: type
252
232
  }, [className, rootClass]),
253
233
  radius: "rounded",
254
- shadowLevel: shadowLevel,
234
+ radiusSize: "xl",
255
235
  dataAttrs: {
256
236
  root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
257
237
  }
@@ -287,12 +267,9 @@ var Notification = function Notification(_ref) {
287
267
  })
288
268
  }, (buttonText || link) && /*#__PURE__*/React.createElement("div", {
289
269
  className: cn('bottom-block')
290
- }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
270
+ }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/React.createElement(ButtonClose, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
291
271
  className: cn('close'),
292
- type: "button",
293
272
  onClick: onClose
294
- }), /*#__PURE__*/React.createElement(CancelIcon, {
295
- className: cn('close-icon')
296
273
  })));
297
274
  };
298
275
  export default Notification;
package/dist/lib/components/Modal/Modal.d.ts CHANGED
@@ -6,6 +6,11 @@ declare const ModalMobileViews: {
6
6
  readonly BOTTOM: "bottom";
7
7
  };
8
8
  type ModalMobileViewsType = (typeof ModalMobileViews)[keyof typeof ModalMobileViews];
9
+ export declare const HeaderButtonsTheme: {
10
+ readonly DEFAULT: "default";
11
+ readonly WHITE: "white";
12
+ };
13
+ export type HeaderButtonsThemeType = (typeof HeaderButtonsTheme)[keyof typeof HeaderButtonsTheme];
9
14
  export declare enum MODAL_TRANSITIONS_STEPS_ENUM {
10
15
  INITIAL_STEP = "initial-step",
11
16
  MOVE_STEP = "move-step",
@@ -44,13 +49,17 @@ export type ModalHeaderPropsType = {
44
49
  showBackButton?: boolean;
45
50
  /** Скрыть крестик */
46
51
  hideCloseButton?: boolean;
47
- /** Отобразить дополнительный контент в шапке */
52
+ /** Дополнительный контент в шапке */
48
53
  headerAdditionalContent?: JSX.Element | JSX.Element[] | string | null;
54
+ /** Кастомный контент в шапке */
55
+ headerCustomContent?: JSX.Element | JSX.Element[] | string | null;
56
+ /** Цветовая тема кнопок */
57
+ buttonsTheme?: HeaderButtonsThemeType;
49
58
  /** Отобразить тень у шапки */
50
59
  hasHeaderShadow?: boolean;
51
60
  /** Закрепленная шапка */
52
61
  isStickyHeader?: boolean;
53
- /** Кнопки находятся вне основной шапке */
62
+ /** Кнопки находятся вне основной шапки */
54
63
  isOutSideHeaderButtons?: boolean;
55
64
  /** Использовать серый фон в шапке */
56
65
  isGrayColorHeader?: boolean;
package/dist/lib/components/Modal/Modal.js CHANGED
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = void 0;
7
+ exports["default"] = exports.MODAL_TRANSITIONS_STEPS_ENUM = exports.HeaderButtonsTheme = void 0;
8
8
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var React = _interopRequireWildcard(require("react"));
@@ -27,6 +27,10 @@ var ModalMobileViews = {
27
27
  // use camelCase for simple using in props from backend
28
28
  BOTTOM: 'bottom'
29
29
  };
30
+ var HeaderButtonsTheme = exports.HeaderButtonsTheme = {
31
+ DEFAULT: 'default',
32
+ WHITE: 'white'
33
+ };
30
34
  var MODAL_TRANSITIONS_STEPS_ENUM;
31
35
  (function (MODAL_TRANSITIONS_STEPS_ENUM) {
32
36
  MODAL_TRANSITIONS_STEPS_ENUM["INITIAL_STEP"] = "initial-step";
package/dist/lib/components/Modal/_ModalContent/ModalContent.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray);border-top-left-radius:32px;border-top-right-radius:32px}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;position:relative;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-content__background{background-color:rgba(0,0,0,.8);bottom:0;left:0;position:fixed;right:0;top:0}.mfui-9-modal-content__container-wrap{-webkit-animation:show-popup .3s ease-out;animation:show-popup .3s ease-out;position:relative;width:100%}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap{-webkit-transition:height .1s;transition:height .1s;width:740px}}.mfui-9-modal-content__container-inner{background-color:var(--background);font-family:inherit;width:100%}.mfui-9-modal-content__container-inner_native-scroll{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width:768px){.mfui-9-modal-content__container-inner_native-scroll{max-height:80vh}}.mfui-9-modal-content__header{position:relative}.mfui-9-modal-content__header_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__header_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__header_native-scroll{background-color:var(--background);border-radius:12px;position:sticky;top:0}.mfui-9-modal-content__header-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:64px}@media screen and (min-width:768px){.mfui-9-modal-content__header-main{min-height:64px}}.mfui-9-modal-content__header-custom-content{width:100%}.mfui-9-modal-content__header-button{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;top:12px;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background:transparent;border:none;cursor:pointer;height:44px;justify-content:center;outline:none;width:44px}.mfui-9-modal-content__header-button_back{left:14px}.mfui-9-modal-content__header-button_close{right:18px}.mfui-9-modal-content__header-inner{background-color:var(--spbSky0);border-radius:12px;height:32px;overflow:hidden;position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;width:32px}.mfui-9-modal-content__header-inner:hover{background-color:var(--spbSky1)}.mfui-9-modal-content__header-inner:active{background-color:var(--spbSky2)}.mfui-9-modal-content__header-icon{height:32px;min-width:32px;width:32px;fill:var(--content)}.mfui-9-modal-content__title-area{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 48px;padding:12px}@media screen and (min-width:768px){.mfui-9-modal-content__title-area{margin:0 56px;padding:16px}}.mfui-9-modal-content__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;text-align:center}@media screen and (min-width:1280px){.mfui-9-modal-content__title{font-size:20px;line-height:28px}}@media screen and (min-width:768px){.mfui-9-modal-content__title{font-size:20px;font-weight:500;letter-spacing:.5px;line-height:28px}}.mfui-9-modal-content__header-additional{-webkit-box-sizing:border-box;box-sizing:border-box;padding:8px 16px;text-align:center}@media screen and (min-width:768px){.mfui-9-modal-content__header-additional{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:24px;padding-right:6px}@media screen and (min-width:768px){.mfui-9-modal-content__container-body{padding-bottom:32px;padding-right:12px}}.mfui-9-modal-content__container-body_native-scroll{-webkit-box-flex:1;-ms-flex-positive:1;background-color:var(--base);border-bottom-left-radius:32px;border-top-left-radius:32px;flex-grow:1;overflow-x:hidden;overflow-y:auto}.mfui-9-modal-content__container-body_gray{background-color:var(--backgroundGray)}.mfui-9-modal-content__container-body_gray-with-footer{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__children{-webkit-box-sizing:border-box;box-sizing:border-box;padding-left:16px;padding-right:4px;padding-top:24px}@media screen and (min-width:768px){.mfui-9-modal-content__children{padding-left:32px;padding-right:14px}}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner{background-color:var(--stcWhite);position:relative}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:after{background-color:var(--stcBlack);bottom:0;content:"";left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;transition:opacity .3s}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:hover:after{opacity:.1}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-inner:active:after{opacity:.2}.mfui-9-modal-content__header-button_theme_white .mfui-9-modal-content__header-icon{fill:var(--stcBlack)}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__children{overflow-x:hidden;padding-top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-bottom:24px;margin-left:-16px;margin-right:-16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header{margin-left:-32px;margin-right:-32px}}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-main{min-height:40px}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__header-button{top:0}.mfui-9-modal-content__container-wrap_static-header .mfui-9-modal-content__title-area{padding-bottom:4px;padding-top:4px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_hide-header .mfui-9-modal-content__children{padding-top:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__container-body{padding-bottom:0}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:16px;padding-right:16px}@media screen and (min-width:768px){.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer{padding-left:32px;padding-right:32px}}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_native-scroll{background-color:var(--background);border-radius:12px;bottom:0;position:sticky}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-modal-content__container-wrap_sticky-footer .mfui-9-modal-content__footer_gray{background-color:var(--backgroundGray);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.mfui-9-modal-content__container-wrap_out-side-buttons .mfui-9-modal-content__container-body{padding-top:24px}.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__children,.mfui-9-modal-content__container-wrap_native-scroll .mfui-9-modal-content__container-body{padding:0}.mfui-9-modal-content__container-wrap_transition-end{-webkit-animation:hide-popup .2s ease-in;animation:hide-popup .2s ease-in}@-webkit-keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@keyframes show-popup{0%{-webkit-transform:scale(95%);transform:scale(95%);-webkit-transform-origin:top;transform-origin:top}to{-webkit-transform:scale(100%);transform:scale(100%)}}@-webkit-keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}@keyframes hide-popup{0%{-webkit-transform:scale(100%);transform:scale(100%)}to{-webkit-transform:scale(95%);transform:scale(95%)}}
package/dist/lib/components/Modal/_ModalContent/ModalContent.js CHANGED
@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _uiHelpers = require("@megafon/ui-helpers");
12
12
  var _reactTransitionGroup = require("react-transition-group");
13
- var _ButtonClose = _interopRequireDefault(require("../../Buttons/ButtonClose/ButtonClose"));
14
13
  var _ScrollBar = _interopRequireDefault(require("../../ScrollBar/ScrollBar"));
15
14
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
15
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -22,6 +21,14 @@ var ArrowLeft24 = function ArrowLeft24(props) {
22
21
  d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
23
22
  }));
24
23
  };
24
+ var Cancel24 = function Cancel24(props) {
25
+ return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
26
+ viewBox: "0 0 32 32"
27
+ }, props), /*#__PURE__*/React.createElement("path", {
28
+ className: "Cancel24__st0",
29
+ d: "M16 14.5L11.5 10 10 11.5l4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5-1.5-1.5-4.5 4.5z"
30
+ }));
31
+ };
25
32
  var cn = (0, _uiHelpers.cnCreate)('mfui-9-modal-content');
26
33
  var ModalContent = function ModalContent(_ref) {
27
34
  var classes = _ref.classes,
@@ -33,6 +40,8 @@ var ModalContent = function ModalContent(_ref) {
33
40
  showBackButton = _ref$headerProps2.showBackButton,
34
41
  hideCloseButton = _ref$headerProps2.hideCloseButton,
35
42
  headerAdditionalContent = _ref$headerProps2.headerAdditionalContent,
43
+ headerCustomContent = _ref$headerProps2.headerCustomContent,
44
+ buttonsTheme = _ref$headerProps2.buttonsTheme,
36
45
  hasHeaderShadow = _ref$headerProps2.hasHeaderShadow,
37
46
  _ref$headerProps2$isS = _ref$headerProps2.isStickyHeader,
38
47
  isStickyHeaderProps = _ref$headerProps2$isS === void 0 ? true : _ref$headerProps2$isS,
@@ -69,7 +78,7 @@ var ModalContent = function ModalContent(_ref) {
69
78
  showHeaderShadow = _React$useState2[0],
70
79
  setShowHeaderShadow = _React$useState2[1];
71
80
  var showHeaderMain = !!showBackButton || !!headerTitle || !hideCloseButton;
72
- var showHeader = showHeaderMain || !!headerAdditionalContent;
81
+ var showHeader = showHeaderMain || !!headerAdditionalContent || !!headerCustomContent;
73
82
  var isStickyHeader = showHeader && isStickyHeaderProps;
74
83
  var isStaticHeader = showHeader && !isStickyHeaderProps;
75
84
  var isStickyFooter = !!footer && !!isStickyFooterProps;
@@ -80,7 +89,8 @@ var ModalContent = function ModalContent(_ref) {
80
89
  }, []);
81
90
  var renderBackButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerBackButton), {
82
91
  className: cn('header-button', {
83
- back: true
92
+ back: true,
93
+ theme: buttonsTheme
84
94
  }, classes === null || classes === void 0 ? void 0 : classes.headerBackButton),
85
95
  type: "button",
86
96
  onClick: onBackButtonClick
@@ -89,13 +99,18 @@ var ModalContent = function ModalContent(_ref) {
89
99
  }, /*#__PURE__*/React.createElement(ArrowLeft24, {
90
100
  className: cn('header-icon')
91
101
  })));
92
- var renderCloseButton = /*#__PURE__*/React.createElement(_ButtonClose["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
102
+ var renderCloseButton = /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.headerCloseButton), {
93
103
  className: cn('header-button', {
94
- close: true
104
+ close: true,
105
+ theme: buttonsTheme
95
106
  }, classes === null || classes === void 0 ? void 0 : classes.headerCloseButton),
96
- size: "medium",
107
+ type: "button",
97
108
  onClick: onPopupClose
98
- }));
109
+ }), /*#__PURE__*/React.createElement("div", {
110
+ className: cn('header-inner')
111
+ }, /*#__PURE__*/React.createElement(Cancel24, {
112
+ className: cn('header-icon')
113
+ })));
99
114
  var renderHeader = /*#__PURE__*/React.createElement("div", {
100
115
  className: cn('header', {
101
116
  shadow: showHeaderShadow,
@@ -105,11 +120,13 @@ var ModalContent = function ModalContent(_ref) {
105
120
  ref: headerRef
106
121
  }, !!isOutSideHeaderButtons && showBackButton && renderBackButton, !isOutSideHeaderButtons && showHeaderMain && /*#__PURE__*/React.createElement("div", {
107
122
  className: cn('header-main')
108
- }, showBackButton && renderBackButton, !!headerTitle && /*#__PURE__*/React.createElement("div", {
123
+ }, showBackButton && renderBackButton, !!headerCustomContent && /*#__PURE__*/React.createElement("div", {
124
+ className: cn('header-custom-content')
125
+ }, headerCustomContent), !!headerTitle && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
109
126
  className: cn('title-area', classes === null || classes === void 0 ? void 0 : classes.titleArea)
110
127
  }, /*#__PURE__*/React.createElement("div", {
111
128
  className: cn('title', classes === null || classes === void 0 ? void 0 : classes.title)
112
- }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && /*#__PURE__*/React.createElement("div", {
129
+ }, headerTitle)), !hideCloseButton && renderCloseButton), !!isOutSideHeaderButtons && !hideCloseButton && renderCloseButton, !!headerAdditionalContent && !headerCustomContent && /*#__PURE__*/React.createElement("div", {
113
130
  className: cn('header-additional')
114
131
  }, headerAdditionalContent));
115
132
  var renderFooter = /*#__PURE__*/React.createElement("div", {
package/dist/lib/components/Modal/_ModalDesktop/ModalDesktop.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-desktop__container-inner{border-radius:32px;overflow:hidden}
package/dist/lib/components/Modal/_ModalMobile/ModalMobile.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-mobile{width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-wrap{display:block;height:calc(var(--vh)*100 - 72px);width:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__container-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow-y:auto}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__children-content{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-content,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-init,.mfui-9-modal-mobile_full-view .mfui-9-modal-mobile__scroll-root{height:100%}.mfui-9-modal-mobile__container-wrap{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;position:fixed;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-animation:show-popup-from-bottom .3s linear;animation:show-popup-from-bottom .3s linear;height:auto;justify-content:flex-end;max-height:100%;overflow:hidden;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.mfui-9-modal-mobile__container-wrap:before{content:"";display:block;-ms-flex-item-align:end;align-self:flex-end;background-color:var(--spbSky2);border-radius:10px;height:6px;margin:0 auto 8px;width:40px}.mfui-9-modal-mobile__container-wrap_move{-webkit-transition:none;transition:none}.mfui-9-modal-mobile__container-wrap_transition-end{-webkit-animation:hide-popup-to-bottom .2s linear forwards;animation:hide-popup-to-bottom .2s linear forwards}.mfui-9-modal-mobile__container-inner{-webkit-box-flex:0;-ms-flex-positive:0;border-top-left-radius:32px;border-top-right-radius:32px;flex-grow:0;height:auto;overflow:hidden}@-webkit-keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes show-popup-from-bottom{0%{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes hide-popup-to-bottom{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}
package/dist/lib/components/Notification/Notification.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{background-color:var(--base);border-radius:12px;padding:20px 12px 20px 32px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:50%;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:8px;top:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border:none;border-radius:50%;cursor:pointer;height:24px;justify-content:center;padding:0;width:24px}@media screen and (min-width:768px){.mfui-9-notification__close{height:32px;right:12px;top:12px;width:32px}}.mfui-9-notification__close:hover{background-color:var(--spbSky1)}.mfui-9-notification__close:active{background-color:var(--spbSky2)}.mfui-9-notification__close:after{background-color:var(--content);border-radius:50%;content:"";height:100%;opacity:.05;position:absolute;width:100%}.mfui-9-notification__close-icon{height:10px;opacity:.5;width:10px;fill:var(--content)}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--fury20)}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background-color:var(--brandGreen20)}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background-color:var(--137C20)}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background-color:var(--sky20)}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}.mfui-9-notification_colored .mfui-9-notification__icon-container{background-color:var(--base)}.mfui-9-notification_colored.mfui-9-notification_type_info{background-color:var(--sky20)}.mfui-9-notification_colored.mfui-9-notification_type_warning{background-color:var(--137C20)}.mfui-9-notification_colored.mfui-9-notification_type_success{background-color:var(--brandGreen20)}.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_info .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_success .mfui-9-notification__title,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_warning .mfui-9-notification__title{color:var(--content)}.mfui-9-notification_colored.mfui-9-notification_type_error{background-color:var(--fury80)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-button,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__text,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__title{color:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__collapse-arrow,.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__link-arrow{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container{background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--stcWhite)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover){background-color:var(--stcWhite20)}.mfui-9-notification_colored.mfui-9-notification_type_error .mfui-9-notification__close:not(:hover) .mfui-9-notification__close-icon{opacity:1;fill:var(--stcWhite)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-9-notification{border:1px solid transparent;border-radius:24px;overflow:hidden;padding:20px 12px 20px 20px;position:relative}@media screen and (max-width:767px){.mfui-9-notification{padding:16px 12px}}.mfui-9-notification:before{border-radius:50%;content:"";-webkit-filter:blur(30px);filter:blur(30px);height:80px;left:-14px;position:absolute;top:-6px;width:80px;z-index:0}@media screen and (max-width:767px){.mfui-9-notification:after{border-radius:50%;content:"";-webkit-filter:blur(45px);filter:blur(45px);height:128px;position:absolute;right:-32px;top:45px;width:128px;z-index:0}}.mfui-9-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-notification__title{color:var(--content);display:block;font-size:15px;font-weight:500;line-height:18px;margin-bottom:4px}@media screen and (min-width:1280px){.mfui-9-notification__title{line-height:24px}}.mfui-9-notification__title_close-padding{padding-right:20px}.mfui-9-notification__text{color:var(--content);font-size:12px;line-height:18px;margin:0;max-width:100%;position:relative;-webkit-transition:height .3s;transition:height .3s}@media screen and (min-width:768px){.mfui-9-notification__text{font-size:15px;line-height:24px}}.mfui-9-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__full-text,.mfui-9-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-9-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-9-notification__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:center;align-self:center;margin-left:12px;overflow:hidden;width:100%}.mfui-9-notification__icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:2;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-pack:center;-ms-flex-pack:center;border:.3px solid transparent;border-radius:12px;height:40px;justify-content:center;min-width:40px;width:40px}.mfui-9-notification__attention-icon,.mfui-9-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-9-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-9-notification__text-container{margin-right:72px}}.mfui-9-notification__bottom{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:1;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-9-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-9-notification__bottom_has-button{margin-top:12px}.mfui-9-notification__link{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--brandGreen);cursor:pointer}.mfui-9-notification__button+.mfui-9-notification__link{margin-left:16px}.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-9-notification__collapse-button,.mfui-9-notification__link{font-size:12px;line-height:14px}}.mfui-9-notification__collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;background-color:transparent;border:none;color:var(--brandGreen);cursor:pointer;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;text-align:right}@media screen and (max-width:767px){.mfui-9-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-9-notification__collapse-arrow,.mfui-9-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-9-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-9-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-9-notification__link-arrow{margin-bottom:-4px}}.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-9-notification__bottom-block+.mfui-9-notification__collapse-button{margin-left:16px}}.mfui-9-notification__collapse_hidden{visibility:hidden}.mfui-9-notification__close{position:absolute;right:1px;top:1px;z-index:100}.mfui-9-notification_type_error{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffacb2 98.41%) border-box}.mfui-9-notification_type_error:before{background:linear-gradient(46.7deg,#f62434 16.91%,rgba(246,36,52,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_error:after{background:linear-gradient(46.7deg,rgba(246,36,52,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_error .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(246,36,52,0) 5.8%,#f62434 48.19%) border-box}.mfui-9-notification_type_error .mfui-9-notification__icon-container svg{fill:var(--fury)}.mfui-9-notification_type_success{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,rgba(62,255,110,.7) 98.41%) border-box}.mfui-9-notification_type_success:before{background:linear-gradient(46.7deg,#00b956 16.91%,rgba(0,185,86,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_success:after{background:linear-gradient(46.7deg,rgba(0,185,86,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_success .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(0,185,86,0) 5.8%,#00b956 48.19%) border-box}.mfui-9-notification_type_success .mfui-9-notification__icon-container svg{fill:var(--brandGreen)}.mfui-9-notification_type_warning{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#ffdea7 98.41%) border-box}.mfui-9-notification_type_warning:before{background:linear-gradient(46.7deg,#ffab23 16.91%,rgba(255,171,35,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_warning:after{background:linear-gradient(46.7deg,rgba(255,171,35,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_warning .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(255,171,35,0) 5.8%,#ffab23 48.19%) border-box}.mfui-9-notification_type_warning .mfui-9-notification__icon-container svg{fill:var(--137C)}.mfui-9-notification_type_info{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(301.79deg,hsla(0,0%,51%,.2) 72.68%,#a5dfff 98.41%) border-box}.mfui-9-notification_type_info:before{background:linear-gradient(46.7deg,#3cb9ff 16.91%,rgba(60,185,255,0) 86.98%)}@media screen and (max-width:767px){.mfui-9-notification_type_info:after{background:linear-gradient(46.7deg,rgba(60,185,255,.17) 16.91%,hsla(0,0%,100%,.17) 86.98%)}}.mfui-9-notification_type_info .mfui-9-notification__icon-container{background:linear-gradient(var(--base),var(--base)) padding-box,linear-gradient(225deg,rgba(60,185,255,0) 5.8%,#3cb9ff 48.19%) border-box}.mfui-9-notification_type_info .mfui-9-notification__icon-container svg{fill:var(--sky)}
package/dist/lib/components/Notification/Notification.d.ts CHANGED
@@ -7,13 +7,6 @@ declare const NotificationTypes: {
7
7
  readonly INFO: "info";
8
8
  };
9
9
  type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
10
- declare const ShadowTypes: {
11
- readonly ZERO: "zero";
12
- readonly HOVER: "hover";
13
- readonly PRESSED: "pressed";
14
- readonly DEFAULT: "default";
15
- };
16
- type ShadowType = (typeof ShadowTypes)[keyof typeof ShadowTypes];
17
10
  export interface INotificationProps {
18
11
  /** Дополнительный класс корневого элемента */
19
12
  className?: string;
@@ -26,10 +19,6 @@ export interface INotificationProps {
26
19
  };
27
20
  /** Тип отображения */
28
21
  type?: NotificationType;
29
- /** Уровень тени */
30
- shadowLevel?: ShadowType;
31
- /** Наличие фоновой заливки у уведомления */
32
- isColored?: boolean;
33
22
  /** Наличие кнопки-крестика "Закрыть" */
34
23
  hasCloseButton?: boolean;
35
24
  /** Заголовок */
package/dist/lib/components/Notification/Notification.js CHANGED
@@ -12,6 +12,7 @@ require("core-js/modules/web.timers.js");
12
12
  var React = _interopRequireWildcard(require("react"));
13
13
  var _uiHelpers = require("@megafon/ui-helpers");
14
14
  var _Button = _interopRequireDefault(require("../Buttons/Button/Button"));
15
+ var _ButtonClose = _interopRequireDefault(require("../Buttons/ButtonClose/ButtonClose"));
15
16
  var _TextLink = _interopRequireDefault(require("../TextLink/TextLink"));
16
17
  var _Tile = _interopRequireDefault(require("../Tile/Tile"));
17
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -63,15 +64,6 @@ var InfoIcon = function InfoIcon(props) {
63
64
  d: "M15 12h2v-2h-2v2zm0 10h2v-8h-2v8zm1 6C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zm0-22C10.5 6 6 10.5 6 16s4.5 10 10 10 10-4.5 10-10S21.5 6 16 6z"
64
65
  }));
65
66
  };
66
- var CancelIcon = function CancelIcon(props) {
67
- return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
68
- viewBox: "0 0 10 10"
69
- }, props), /*#__PURE__*/React.createElement("path", {
70
- fillRule: "evenodd",
71
- clipRule: "evenodd",
72
- d: "M5 3.75L1.25 0 0 1.25 3.75 5 0 8.75 1.25 10 5 6.25 8.75 10 10 8.75 6.25 5 10 1.25 8.75 0 5 3.75z"
73
- }));
74
- };
75
67
  var TIMEOUT_DELAY = 400;
76
68
  var useEffect = React.useEffect,
77
69
  useRef = React.useRef,
@@ -82,12 +74,6 @@ var NotificationTypes = {
82
74
  ERROR: 'error',
83
75
  INFO: 'info'
84
76
  };
85
- var ShadowTypes = {
86
- ZERO: 'zero',
87
- HOVER: 'hover',
88
- PRESSED: 'pressed',
89
- DEFAULT: 'default'
90
- };
91
77
  var testIdPrefix = exports.testIdPrefix = 'Notification';
92
78
  var cn = (0, _uiHelpers.cnCreate)('mfui-9-notification');
93
79
  var Notification = function Notification(_ref) {
@@ -101,10 +87,6 @@ var Notification = function Notification(_ref) {
101
87
  children = _ref.children,
102
88
  _ref$type = _ref.type,
103
89
  type = _ref$type === void 0 ? 'info' : _ref$type,
104
- _ref$shadowLevel = _ref.shadowLevel,
105
- shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
106
- _ref$isColored = _ref.isColored,
107
- isColored = _ref$isColored === void 0 ? true : _ref$isColored,
108
90
  hasCloseButton = _ref.hasCloseButton,
109
91
  title = _ref.title,
110
92
  shortText = _ref.shortText,
@@ -154,7 +136,6 @@ var Notification = function Notification(_ref) {
154
136
  textClasses = _useState6[0],
155
137
  setTextClass = _useState6[1];
156
138
  var hasBottom = shortText || buttonText || link;
157
- var isErrorType = type === NotificationTypes.ERROR;
158
139
  useEffect(function () {
159
140
  setShowFullText(isCollapseOpened);
160
141
  }, [isCollapseOpened]);
@@ -202,7 +183,7 @@ var Notification = function Notification(_ref) {
202
183
  },
203
184
  className: cn('link', [linkClass]),
204
185
  onClick: onLinkClick,
205
- color: isErrorType && isColored ? 'white' : 'green',
186
+ color: "green",
206
187
  rel: rel,
207
188
  href: href,
208
189
  target: target
@@ -218,7 +199,7 @@ var Notification = function Notification(_ref) {
218
199
  },
219
200
  sizeAll: "small",
220
201
  sizeMobile: "extra-small",
221
- theme: isErrorType && isColored ? 'white' : 'green',
202
+ theme: "green",
222
203
  showLoader: buttonLoader,
223
204
  disabled: buttonDisable,
224
205
  ellipsis: !buttonLoader,
@@ -256,11 +237,10 @@ var Notification = function Notification(_ref) {
256
237
  };
257
238
  return /*#__PURE__*/React.createElement(_Tile["default"], {
258
239
  className: cn({
259
- type: type,
260
- colored: isColored
240
+ type: type
261
241
  }, [className, rootClass]),
262
242
  radius: "rounded",
263
- shadowLevel: shadowLevel,
243
+ radiusSize: "xl",
264
244
  dataAttrs: {
265
245
  root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
266
246
  }
@@ -296,12 +276,9 @@ var Notification = function Notification(_ref) {
296
276
  })
297
277
  }, (buttonText || link) && /*#__PURE__*/React.createElement("div", {
298
278
  className: cn('bottom-block')
299
- }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
279
+ }, buttonText && renderButton(), link && !shortText && renderLink()), shortText && renderCollapseButton()))), hasCloseButton && /*#__PURE__*/React.createElement(_ButtonClose["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
300
280
  className: cn('close'),
301
- type: "button",
302
281
  onClick: onClose
303
- }), /*#__PURE__*/React.createElement(CancelIcon, {
304
- className: cn('close-icon')
305
282
  })));
306
283
  };
307
284
  var _default = exports["default"] = Notification;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "9.0.0-alpha.7",
3
+ "version": "9.0.0-alpha.9",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -104,5 +104,5 @@
104
104
  "simplebar-react": "^3.2.5",
105
105
  "swiper": "^11.1.1"
106
106
  },
107
- "gitHead": "dc4d27d35da75e1ecfd1a8fc74965179c7abd56d"
107
+ "gitHead": "2a1e7af00b2047b8514fa07a89293cf51ad64e73"
108
108
  }