@megafon/ui-core 8.17.1 → 8.17.4

package/dist/lib/components/Modal/utils/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCorrectMaxHeight = exports["default"] = exports.changeBodyPadding = void 0;
+require("core-js/modules/es.parse-int.js");
+var _uiHelpers = require("@megafon/ui-helpers");
+var getAdditionalSize = function getAdditionalSize(refs) {
+  var overlayNode = refs.overlayNode,
+    headerNode = refs.headerNode,
+    footerNode = refs.footerNode,
+    containerBodyNode = refs.containerBodyNode;
+  if (!(overlayNode && containerBodyNode)) {
+    return {
+      modalOverlayPadding: 0,
+      popupContainerBodyPaddings: 0,
+      popupHeaderHeight: 0,
+      popupFooterHeight: 0
+    };
+  }
+  var modalOverlayPadding = parseInt(getComputedStyle(overlayNode).paddingTop, 10);
+  var popupHeaderHeight = (headerNode === null || headerNode === void 0 ? void 0 : headerNode.offsetHeight) || 0;
+  var popupFooterHeight = (footerNode === null || footerNode === void 0 ? void 0 : footerNode.offsetHeight) || 0;
+  var popupContainerBodyPaddingTop = parseInt(getComputedStyle(containerBodyNode).paddingTop, 10);
+  var popupContainerBodyPaddingBottom = parseInt(getComputedStyle(containerBodyNode).paddingBottom, 10);
+  var popupContainerBodyPaddings = popupContainerBodyPaddingTop + popupContainerBodyPaddingBottom;
+  return {
+    modalOverlayPadding: modalOverlayPadding,
+    popupContainerBodyPaddings: popupContainerBodyPaddings,
+    popupHeaderHeight: popupHeaderHeight,
+    popupFooterHeight: popupFooterHeight
+  };
+};
+var getCorrectMaxHeight = exports.getCorrectMaxHeight = function getCorrectMaxHeight(_ref) {
+  var refs = _ref.refs,
+    props = _ref.props;
+  var isStickyFooter = props.isStickyFooter,
+    isStickyHeader = props.isStickyHeader,
+    isBottomView = props.isBottomView;
+  var windowHeight = window.innerHeight;
+  var windowWidth = window.innerWidth;
+  var isMobile = windowWidth < _uiHelpers.breakpoints.MOBILE_BIG_START;
+  var _getAdditionalSize = getAdditionalSize(refs),
+    modalOverlayPadding = _getAdditionalSize.modalOverlayPadding,
+    popupContainerBodyPaddings = _getAdditionalSize.popupContainerBodyPaddings,
+    popupHeaderHeight = _getAdditionalSize.popupHeaderHeight,
+    popupFooterHeight = _getAdditionalSize.popupFooterHeight;
+  var maxHeightDesktop = windowHeight - modalOverlayPadding * 2 - popupHeaderHeight - popupContainerBodyPaddings;
+  var maxHeightMobileDefault = windowHeight - popupContainerBodyPaddings;
+  var maxHeightMobileHeader = isStickyHeader ? maxHeightMobileDefault - popupHeaderHeight : maxHeightMobileDefault;
+  var maxHeightMobileView = isBottomView ? maxHeightMobileHeader - modalOverlayPadding : maxHeightMobileHeader;
+  var maxHeightResize = isMobile ? maxHeightMobileView : maxHeightDesktop;
+  var correctMaxHeight = isStickyFooter ? maxHeightResize - popupFooterHeight : maxHeightResize;
+  return correctMaxHeight;
+};
+var changeBodyPadding = exports.changeBodyPadding = function changeBodyPadding(isOpened) {
+  var windowWidth = window.innerWidth;
+  var documentClientWidth = document.documentElement.clientWidth;
+  var scrollBarWidth = windowWidth - documentClientWidth;
+  var bodyEl = document.body;
+  if (!isOpened) {
+    bodyEl.style.paddingRight = '';
+    return;
+  }
+  if (scrollBarWidth === 0) {
+    return;
+  }
+  var computedBodyPaddingRight = parseInt(getComputedStyle(bodyEl).paddingRight, 10);
+  bodyEl.style.paddingRight = "".concat(computedBodyPaddingRight + scrollBarWidth, "px");
+};
+var _default = exports["default"] = null;

package/dist/lib/components/NavArrow/NavArrow.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-nav-arrow{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin:0;outline:none;-webkit-transition:background-color .3s,opacity .3s;transition:background-color .3s,opacity .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-nav-arrow:disabled{cursor:default;opacity:.3;pointer-events:none}.mfui-nav-arrow__icon{display:block;height:100%;width:100%;fill:var(--stcWhite)}.mfui-nav-arrow_size_middle{height:40px;padding:4px;width:40px}.mfui-nav-arrow_size_large{height:64px;padding:12px;width:64px}.mfui-nav-arrow_theme_purple{background-color:var(--brandPurple)}.mfui-nav-arrow_theme_purple:hover{background-color:var(--buttonHoverPurple)}.mfui-nav-arrow_theme_purple:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_dark{background-color:var(--stcBlack20)}.mfui-nav-arrow_theme_dark:hover{background-color:var(--stcBlack50)}.mfui-nav-arrow_theme_dark:active{background-color:var(--buttonDown)}.mfui-nav-arrow_theme_white{background-color:var(--stcWhite);-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-nav-arrow_theme_white:active{-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,.16);box-shadow:0 2px 8px 0 rgba(0,0,0,.16)}.mfui-nav-arrow_theme_white .mfui-nav-arrow__icon{fill:var(--stcBlack)}

package/dist/lib/components/NavArrow/NavArrow.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './NavArrow.scss';
+export declare const Theme: {
+    readonly PURPLE: "purple";
+    readonly DARK: "dark";
+    readonly WHITE: "white";
+};
+export declare const View: {
+    readonly PREV: "prev";
+    readonly NEXT: "next";
+};
+export declare const Size: {
+    readonly MIDDLE: "middle";
+    readonly LARGE: "large";
+};
+export type ThemeType = (typeof Theme)[keyof typeof Theme];
+type ViewType = (typeof View)[keyof typeof View];
+type SizeType = (typeof Size)[keyof typeof Size];
+export interface INavArrowProps {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        prevArrow?: Record<string, string>;
+        nextArrow?: Record<string, string>;
+    };
+    className?: string;
+    theme?: ThemeType;
+    view?: ViewType;
+    size?: SizeType;
+    disabled?: boolean;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+declare const NavArrow: React.FC<INavArrowProps>;
+export default NavArrow;

package/dist/lib/components/NavArrow/NavArrow.js

@@ -0,0 +1,107 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.View = exports.Theme = exports.Size = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+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); }
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ArrowLeft24 = function ArrowLeft24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M19.5 20.8L14.7 16l4.8-4.8-1.6-1.7-6.4 6.5 6.4 6.5z"
+  }));
+};
+var ArrowRight24 = function ArrowRight24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+var ArrowLeft32 = function ArrowLeft32(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M24 26l-6-6 6-6-2-2-8 8 8 8z"
+  }));
+};
+var ArrowRight32 = function ArrowRight32(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16 26l6-6-6-6 2-2 8 8-8 8z"
+  }));
+};
+var Theme = exports.Theme = {
+  PURPLE: 'purple',
+  DARK: 'dark',
+  WHITE: 'white'
+};
+var View = exports.View = {
+  PREV: 'prev',
+  NEXT: 'next'
+};
+var Size = exports.Size = {
+  MIDDLE: 'middle',
+  LARGE: 'large'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-nav-arrow');
+var NavArrow = function NavArrow(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    _ref$view = _ref.view,
+    view = _ref$view === void 0 ? View.PREV : _ref$view,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? Theme.PURPLE : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.MIDDLE : _ref$size,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onClick = _ref.onClick;
+  var getIcons = function getIcons() {
+    switch (size) {
+      case Size.LARGE:
+        return {
+          ArrowLeft: ArrowLeft32,
+          ArrowRight: ArrowRight32
+        };
+      default:
+        return {
+          ArrowLeft: ArrowLeft24,
+          ArrowRight: ArrowRight24
+        };
+    }
+  };
+  var renderIcon = function renderIcon() {
+    var _getIcons = getIcons(),
+      ArrowLeft = _getIcons.ArrowLeft,
+      ArrowRight = _getIcons.ArrowRight;
+    switch (view) {
+      case View.PREV:
+        return /*#__PURE__*/React.createElement(ArrowLeft, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prevArrow), {
+          className: cn('icon')
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(ArrowRight, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.nextArrow), {
+          className: cn('icon')
+        }));
+    }
+  };
+  return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    type: "button",
+    className: cn({
+      theme: theme,
+      size: size
+    }, className),
+    onClick: onClick,
+    disabled: disabled
+  }), renderIcon());
+};
+var _default = exports["default"] = NavArrow;

package/dist/lib/components/Notification/Notification.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-notification{background-color:var(--base);border-radius:12px;padding:20px 12px 20px 32px;position:relative}@media screen and (max-width:767px){.mfui-notification{padding:16px 12px}}.mfui-notification__container{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-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-notification__title{line-height:24px}}.mfui-notification__title_close-padding{padding-right:20px}.mfui-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-notification__text{font-size:15px;line-height:24px}}.mfui-notification__short-text{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-notification__full-text,.mfui-notification__short-text_hidden{opacity:0;position:absolute;top:0;-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.mfui-notification__full-text_visible{opacity:1;position:static;-webkit-transition:opacity .2s;transition:opacity .2s;visibility:visible}.mfui-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-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-notification__attention-icon,.mfui-notification__icon-container svg{height:32px;min-width:32px;width:32px}.mfui-notification__text-container{margin-right:56px;width:85%}@media screen and (min-width:768px){.mfui-notification__text-container{margin-right:72px}}.mfui-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-notification__bottom-block{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden}.mfui-notification__bottom_has-button{margin-top:12px}.mfui-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-notification__button+.mfui-notification__link{margin-left:16px}.mfui-notification__collapse-button,.mfui-notification__link{font-family:inherit;font-size:15px;font-weight:500;line-height:18px}@media screen and (max-width:767px){.mfui-notification__collapse-button,.mfui-notification__link{font-size:12px;line-height:14px}}.mfui-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-notification__collapse-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.mfui-notification__collapse-arrow,.mfui-notification__link-arrow{height:20px;min-width:20px;width:20px;fill:var(--brandGreen)}.mfui-notification__collapse-arrow_close{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.mfui-notification__link-arrow{margin-bottom:-2px}@media screen and (min-width:768px){.mfui-notification__link-arrow{margin-bottom:-4px}}.mfui-notification__bottom-block+.mfui-notification__collapse-button{margin-left:20px}@media screen and (max-width:767px){.mfui-notification__bottom-block+.mfui-notification__collapse-button{margin-left:16px}}.mfui-notification__collapse_hidden{visibility:hidden}.mfui-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-notification__close{height:32px;right:12px;top:12px;width:32px}}.mfui-notification__close:hover{background-color:var(--spbSky1)}.mfui-notification__close:active{background-color:var(--spbSky2)}.mfui-notification__close:after{background-color:var(--content);border-radius:50%;content:"";height:100%;opacity:.05;position:absolute;width:100%}.mfui-notification__close-icon{height:10px;opacity:.5;width:10px;fill:var(--content)}.mfui-notification_type_error .mfui-notification__icon-container{background-color:var(--fury20)}.mfui-notification_type_error .mfui-notification__icon-container svg{fill:var(--fury)}.mfui-notification_type_success .mfui-notification__icon-container{background-color:var(--brandGreen20)}.mfui-notification_type_success .mfui-notification__icon-container svg{fill:var(--brandGreen)}.mfui-notification_type_warning .mfui-notification__icon-container{background-color:var(--137C20)}.mfui-notification_type_warning .mfui-notification__icon-container svg{fill:var(--137C)}.mfui-notification_type_info .mfui-notification__icon-container{background-color:var(--sky20)}.mfui-notification_type_info .mfui-notification__icon-container svg{fill:var(--sky)}.mfui-notification_colored .mfui-notification__icon-container{background-color:var(--base)}.mfui-notification_colored.mfui-notification_type_info{background-color:var(--sky20)}.mfui-notification_colored.mfui-notification_type_warning{background-color:var(--137C20)}.mfui-notification_colored.mfui-notification_type_success{background-color:var(--brandGreen20)}.mfui-notification_colored.mfui-notification_type_info .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_info .mfui-notification__title,.mfui-notification_colored.mfui-notification_type_success .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_success .mfui-notification__title,.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__title{color:var(--content)}.mfui-notification_colored.mfui-notification_type_error{background-color:var(--fury80)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-button,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__title{color:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__collapse-arrow,.mfui-notification_colored.mfui-notification_type_error .mfui-notification__link-arrow{fill:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container{background-color:var(--stcWhite20)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg{fill:var(--stcWhite)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__close:not(:hover){background-color:var(--stcWhite20)}.mfui-notification_colored.mfui-notification_type_error .mfui-notification__close:not(:hover) .mfui-notification__close-icon{opacity:1;fill:var(--stcWhite)}

package/dist/lib/components/Notification/Notification.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import './Notification.scss';
+declare const NotificationTypes: {
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly INFO: "info";
+};
+type NotificationType = (typeof NotificationTypes)[keyof typeof NotificationTypes];
+declare const ShadowTypes: {
+    readonly ZERO: "zero";
+    readonly HOVER: "hover";
+    readonly PRESSED: "pressed";
+    readonly DEFAULT: "default";
+};
+type ShadowType = (typeof ShadowTypes)[keyof typeof ShadowTypes];
+export interface INotificationProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        content?: string;
+        link?: string;
+    };
+    /** Тип отображения */
+    type?: NotificationType;
+    /** Уровень тени */
+    shadowLevel?: ShadowType;
+    /** Наличие фоновой заливки у уведомления */
+    isColored?: boolean;
+    /** Наличие кнопки-крестика "Закрыть" */
+    hasCloseButton?: boolean;
+    /** Заголовок */
+    title?: string;
+    /** Короткий текст, отображаемый при закрытом расхлопе */
+    shortText?: string;
+    /** заголовок закрытого расхлопа */
+    closeCollapseTitle?: string;
+    /** заголовок открытого расхлопа */
+    openCollapseTitle?: string;
+    /** Управление состоянием открыт/закрыт расхлопа "Подробнее" */
+    isCollapseOpened?: boolean;
+    /** Текст кнопки */
+    buttonText?: string;
+    /** Лоадер кнопки */
+    buttonLoader?: boolean;
+    /** Заблокировать кнопку */
+    buttonDisable?: boolean;
+    /** Текст ссылки внизу уведомления */
+    link?: string;
+    /** rel - аргумент тега <a> для ссылки */
+    rel?: string;
+    /** href - аргумент тега <a> для ссылки */
+    href?: string;
+    /** target - аргумент тега <a> */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+        close?: Record<string, string>;
+        button?: Record<string, string>;
+        collapseButton?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    children?: React.ReactNode;
+    /** Обработчик на закрытие */
+    onClose?: () => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: () => void;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик клика по кнопке расхлопа */
+    onCollapseButtonClick?: (value: boolean) => void;
+}
+export declare const testIdPrefix = "Notification";
+declare const Notification: React.FC<INotificationProps>;
+export default Notification;

package/dist/lib/components/Notification/Notification.js

@@ -0,0 +1,307 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIdPrefix = exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.link.js");
+require("core-js/modules/web.timers.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _TextLink = _interopRequireDefault(require("../TextLink/TextLink"));
+var _Tile = _interopRequireDefault(require("../Tile/Tile"));
+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); }
+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; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ErrorIcon = function ErrorIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15 20.72V23h2v-2.28a2 2 0 10-2 0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M16 4a6 6 0 00-6 6v2H8v8a8 8 0 0016 0v-8h-2v-2a6 6 0 00-6-6zm-4 6a4 4 0 018 0v2h-8zm10 10a6 6 0 01-12 0v-6h12z"
+  }));
+};
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+var RightArrow = function RightArrow(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+  }));
+};
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+  }));
+};
+var SuccessIcon = function SuccessIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+  }));
+};
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 10 10"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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"
+  }));
+};
+var TIMEOUT_DELAY = 400;
+var useEffect = React.useEffect,
+  useRef = React.useRef,
+  useState = React.useState;
+var NotificationTypes = {
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  ERROR: 'error',
+  INFO: 'info'
+};
+var ShadowTypes = {
+  ZERO: 'zero',
+  HOVER: 'hover',
+  PRESSED: 'pressed',
+  DEFAULT: 'default'
+};
+var testIdPrefix = exports.testIdPrefix = 'Notification';
+var cn = (0, _uiHelpers.cnCreate)('mfui-notification');
+var Notification = function Notification(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClass = _ref$classes2.root,
+    containerClass = _ref$classes2.container,
+    contentClass = _ref$classes2.content,
+    linkClass = _ref$classes2.link,
+    children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'info' : _ref$type,
+    _ref$shadowLevel = _ref.shadowLevel,
+    shadowLevel = _ref$shadowLevel === void 0 ? 'zero' : _ref$shadowLevel,
+    _ref$isColored = _ref.isColored,
+    isColored = _ref$isColored === void 0 ? true : _ref$isColored,
+    hasCloseButton = _ref.hasCloseButton,
+    title = _ref.title,
+    shortText = _ref.shortText,
+    _ref$closeCollapseTit = _ref.closeCollapseTitle,
+    closeCollapseTitle = _ref$closeCollapseTit === void 0 ? 'Подробнее' : _ref$closeCollapseTit,
+    _ref$openCollapseTitl = _ref.openCollapseTitle,
+    openCollapseTitle = _ref$openCollapseTitl === void 0 ? 'Свернуть' : _ref$openCollapseTitl,
+    _ref$isCollapseOpened = _ref.isCollapseOpened,
+    isCollapseOpened = _ref$isCollapseOpened === void 0 ? false : _ref$isCollapseOpened,
+    buttonText = _ref.buttonText,
+    _ref$buttonLoader = _ref.buttonLoader,
+    buttonLoader = _ref$buttonLoader === void 0 ? false : _ref$buttonLoader,
+    _ref$buttonDisable = _ref.buttonDisable,
+    buttonDisable = _ref$buttonDisable === void 0 ? false : _ref$buttonDisable,
+    link = _ref.link,
+    rel = _ref.rel,
+    href = _ref.href,
+    target = _ref.target,
+    icon = _ref.icon,
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    onClose = _ref.onClose,
+    onLinkClick = _ref.onLinkClick,
+    onButtonClick = _ref.onButtonClick,
+    onCollapseButtonClick = _ref.onCollapseButtonClick;
+  var shortTextRef = useRef(null);
+  var fullTextRef = useRef(null);
+  var wrapTextRef = useRef(null);
+  var _useState = useState(isCollapseOpened),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showFullText = _useState2[0],
+    setShowFullText = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    updateTextHeight = _useState4[0],
+    setUpdateTextHeight = _useState4[1];
+  var initialTextClasses = {
+    "short": {
+      hidden: shortText && showFullText
+    },
+    full: {
+      visible: showFullText
+    }
+  };
+  var _useState5 = useState(initialTextClasses),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    textClasses = _useState6[0],
+    setTextClass = _useState6[1];
+  var hasBottom = shortText || buttonText || link;
+  var isErrorType = type === NotificationTypes.ERROR;
+  useEffect(function () {
+    setShowFullText(isCollapseOpened);
+  }, [isCollapseOpened]);
+  useEffect(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+    var visibleElement = showFullText ? shortTextRef.current : fullTextRef.current;
+    var _visibleElement$getBo = visibleElement.getBoundingClientRect(),
+      height = _visibleElement$getBo.height;
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    return setUpdateTextHeight(!updateTextHeight);
+    // не должен запускаться при изменении флага updateTextHeight;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showFullText]);
+  useEffect(function () {
+    if (!fullTextRef.current || !shortTextRef.current || !wrapTextRef.current) {
+      return undefined;
+    }
+    var hiddenElement = showFullText ? fullTextRef.current : shortTextRef.current;
+    var _hiddenElement$getBou = hiddenElement.getBoundingClientRect(),
+      height = _hiddenElement$getBou.height;
+    wrapTextRef.current.style.height = "".concat(height, "px");
+    setTextClass(initialTextClasses);
+    var timeoutId = setTimeout(function () {
+      if (wrapTextRef.current) {
+        wrapTextRef.current.style.height = 'auto';
+      }
+    }, TIMEOUT_DELAY);
+    return function () {
+      clearTimeout(timeoutId);
+    };
+    // не должен запускаться при изменении флага showFullText;
+    // запускается по флагу updateTextHeight, который изменяется в предыдущем эффекте.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [updateTextHeight]);
+  var handleCollapseButtonClick = function handleCollapseButtonClick() {
+    setShowFullText(!showFullText);
+    onCollapseButtonClick === null || onCollapseButtonClick === void 0 ? void 0 : onCollapseButtonClick(!showFullText);
+  };
+  var renderLink = function renderLink() {
+    return /*#__PURE__*/React.createElement(_TextLink["default"], {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
+      className: cn('link', [linkClass]),
+      onClick: onLinkClick,
+      color: isErrorType && isColored ? 'white' : 'green',
+      rel: rel,
+      href: href,
+      target: target
+    }, link, /*#__PURE__*/React.createElement(RightArrow, {
+      className: cn('link-arrow')
+    }));
+  };
+  var renderButton = function renderButton() {
+    return /*#__PURE__*/React.createElement(_Button["default"], {
+      className: cn('button'),
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      sizeAll: "small",
+      sizeMobile: "extra-small",
+      theme: isErrorType && isColored ? 'white' : 'green',
+      showLoader: buttonLoader,
+      disabled: buttonDisable,
+      ellipsis: !buttonLoader,
+      onClick: onButtonClick
+    }, buttonText);
+  };
+  var renderCollapseButton = function renderCollapseButton() {
+    return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapseButton), {
+      type: "button",
+      className: cn('collapse-button'),
+      onClick: handleCollapseButtonClick
+    }), showFullText ? openCollapseTitle : closeCollapseTitle, /*#__PURE__*/React.createElement(ArrowDown, {
+      className: cn('collapse-arrow', {
+        close: showFullText
+      })
+    }));
+  };
+  var renderIcon = function renderIcon() {
+    if (icon) {
+      return icon;
+    }
+    var SUCCESS = NotificationTypes.SUCCESS,
+      ERROR = NotificationTypes.ERROR,
+      WARNING = NotificationTypes.WARNING;
+    switch (type) {
+      case SUCCESS:
+        return /*#__PURE__*/React.createElement(SuccessIcon, null);
+      case ERROR:
+        return /*#__PURE__*/React.createElement(ErrorIcon, null);
+      case WARNING:
+        return /*#__PURE__*/React.createElement(WarningIcon, null);
+      default:
+        return /*#__PURE__*/React.createElement(InfoIcon, null);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Tile["default"], {
+    className: cn({
+      type: type,
+      colored: isColored
+    }, [className, rootClass]),
+    radius: "rounded",
+    shadowLevel: shadowLevel,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testIdPrefix, "-container"),
+    className: cn('container', [containerClass]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('icon-container')
+  }, renderIcon()), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testIdPrefix, "-content"),
+    className: cn('content', [contentClass])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('text-container')
+  }, title && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
+    className: cn('title')
+  }), (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    ref: wrapTextRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text', {
+      'close-padding': hasCloseButton && !title
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: shortTextRef,
+    className: cn('short-text', textClasses["short"])
+  }, shortText && (0, _uiHelpers.convert)(shortText, _uiHelpers.textConvertConfig) || children), shortText && /*#__PURE__*/React.createElement("div", {
+    ref: fullTextRef,
+    className: cn('full-text', textClasses.full)
+  }, children))), hasBottom && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testIdPrefix, "-bottom"),
+    className: cn('bottom', {
+      'has-button': !!buttonText
+    })
+  }, (buttonText || link) && /*#__PURE__*/React.createElement("div", {
+    className: cn('bottom-block')
+  }, 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), {
+    className: cn('close'),
+    type: "button",
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
+    className: cn('close-icon')
+  })));
+};
+var _default = exports["default"] = Notification;

package/dist/lib/components/Pagination/Pagination.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:767px){.mfui-pagination{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}}.mfui-pagination__input,.mfui-pagination__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-pagination__input{gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-pagination__input-caption{min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content}.mfui-pagination__input-field{width:90px}

package/dist/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { PaginationTypesType, ThemeType, ValueType } from './types';
+import './Pagination.scss';
+interface IPaginationProps {
+    /** Общее количество страниц */
+    totalPages: number;
+    /** Номер текущей страницы */
+    activePage: number;
+    /** Тип компонента. DEPRECATED: 'classic' */
+    type?: PaginationTypesType;
+    /** Цветовая тема компонента */
+    theme?: ThemeType;
+    /** Отобразить поле ввода номера страницы */
+    showSelectPage?: boolean;
+    /** Обработчик изменения активной страницы */
+    onChange: (value: ValueType) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        button?: Record<string, string>;
+        skipPrev?: Record<string, string>;
+        skipNext?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+}
+declare const Pagination: React.FC<IPaginationProps>;
+export default Pagination;