@megafon/ui-core 8.17.1 → 8.17.4

package/dist/lib/components/Chips/components/ChipsScrollPanel/ChipsScrollPanel.js

@@ -0,0 +1,95 @@
+"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"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.map.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Chip = _interopRequireDefault(require("../../Chip"));
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var HALF_DIVIDER = 2;
+var cn = (0, _uiHelpers.cnCreate)('mfui-chips-scroll-panel');
+var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
+  var _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    value = _ref.value,
+    items = _ref.items,
+    color = _ref.color,
+    onClick = _ref.onClick;
+  var _React$useState = React.useState(),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentValue = _React$useState2[0],
+    setCurrentValue = _React$useState2[1];
+  var containerRef = React.useRef(null);
+  var checkedItemRef = React.useRef(null);
+  var scrollToActiveItem = React.useCallback(function () {
+    var _a, _b;
+    if (!containerRef.current || !checkedItemRef.current) {
+      return;
+    }
+    var activeItemElement = checkedItemRef.current;
+    var _activeItemElement$ge = activeItemElement.getBoundingClientRect(),
+      itemWidth = _activeItemElement$ge.width;
+    var itemOffsetLeft = activeItemElement.offsetLeft;
+    var panelCenter = containerRef.current.getBoundingClientRect().width / HALF_DIVIDER;
+    var itemCenter = itemWidth / HALF_DIVIDER;
+    var activeItemPosition = itemOffsetLeft - panelCenter + itemCenter;
+    (_b = (_a = containerRef.current).scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, {
+      left: activeItemPosition,
+      behavior: 'smooth'
+    });
+  }, []);
+  var handleClick = React.useCallback(function (e, id) {
+    onClick(e, id);
+    scrollToActiveItem();
+  }, [onClick, scrollToActiveItem]);
+  React.useEffect(function () {
+    var isCurrentValueActual = currentValue === value;
+    if (isCurrentValueActual) {
+      scrollToActiveItem();
+    } else {
+      setCurrentValue(value);
+    }
+  }, [value, currentValue, scrollToActiveItem]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn([classes.root]),
+    ref: containerRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('inner', [classes.inner]),
+    tabIndex: -1
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), items.map(function (_a) {
+    var id = _a.id,
+      children = _a.children,
+      rest = __rest(_a, ["id", "children"]);
+    var checked = id === value;
+    return /*#__PURE__*/React.createElement("div", {
+      key: id,
+      className: cn('slide')
+    }, /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({}, rest, {
+      id: id,
+      checked: checked,
+      color: color,
+      onClick: handleClick,
+      rootRef: checked ? checkedItemRef : null
+    }), children));
+  })));
+};
+var _default = exports["default"] = ChipsScrollPanel;

package/dist/lib/components/ContentArea/ContentArea.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-content-area_background-color_transparent{background-color:transparent}.mfui-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-content-area__inner_background-color_transparent{background-color:transparent}.mfui-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import './ContentArea.scss';
+declare const BACKGROUND_COLORS: {
+    readonly TRANSPARENT: "transparent";
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+};
+export type BackgroundColorType = (typeof BACKGROUND_COLORS)[keyof typeof BACKGROUND_COLORS];
+declare const DisableIndents: {
+    readonly MOBILE: "mobile";
+    readonly MOBILE_TABLET: "mobile-tablet";
+    readonly TABLET_DESKTOP: "tablet-desktop";
+    readonly ALL: "all";
+};
+declare const Indents: {
+    readonly SMALL_MOBILE: "small-mobile";
+};
+type DisableIndentsType = (typeof DisableIndents)[keyof typeof DisableIndents];
+type IndentsType = (typeof Indents)[keyof typeof Indents];
+export interface IConrentAreaProps {
+    /** Фоновый цвет внешнего контейнера */
+    outerBackgroundColor?: BackgroundColorType;
+    /** Фоновый цвет внутреннего контейнера */
+    innerBackgroundColor?: BackgroundColorType;
+    /** Отключение отступов на различных разрешениях */
+    disableIndents?: DisableIndentsType;
+    /** Изменение отступов на различных разрешениях */
+    indents?: IndentsType;
+    /** Дополнительные классы для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
+    children: React.ReactNode;
+}
+declare const ContentArea: React.FC<IConrentAreaProps>;
+export default ContentArea;

package/dist/lib/components/ContentArea/ContentArea.js

@@ -0,0 +1,57 @@
+"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"] = 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 BACKGROUND_COLORS = {
+  TRANSPARENT: 'transparent',
+  BLACK: 'black',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  SPB_SKY_0: 'spbSky0',
+  SPB_SKY_1: 'spbSky1',
+  SPB_SKY_2: 'spbSky2'
+};
+var DisableIndents = {
+  MOBILE: 'mobile',
+  MOBILE_TABLET: 'mobile-tablet',
+  TABLET_DESKTOP: 'tablet-desktop',
+  ALL: 'all'
+};
+var Indents = {
+  SMALL_MOBILE: 'small-mobile'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-content-area');
+var ContentArea = function ContentArea(_ref) {
+  var _ref$outerBackgroundC = _ref.outerBackgroundColor,
+    outerBackgroundColor = _ref$outerBackgroundC === void 0 ? 'transparent' : _ref$outerBackgroundC,
+    _ref$innerBackgroundC = _ref.innerBackgroundColor,
+    innerBackgroundColor = _ref$innerBackgroundC === void 0 ? 'transparent' : _ref$innerBackgroundC,
+    disableIndents = _ref.disableIndents,
+    indents = _ref.indents,
+    children = _ref.children,
+    className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'background-color': outerBackgroundColor
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+  }), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner), {
+    className: cn('inner', {
+      'disable-indents': disableIndents,
+      'background-color': innerBackgroundColor,
+      indents: indents
+    }, classes === null || classes === void 0 ? void 0 : classes.inner)
+  }), children));
+};
+var _default = exports["default"] = ContentArea;

package/dist/lib/components/ContentView/ContentView.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-content-view__image{max-width:144px}.mfui-content-view__bg-image,.mfui-content-view__image{display:inline-block;margin-bottom:24px;vertical-align:top}.mfui-content-view__bg-image{background-repeat:no-repeat;background-size:100%;height:144px;width:144px}.mfui-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-content-view__buttons{gap:12px;padding-top:32px}.mfui-content-view__buttons,.mfui-content-view_fullscreen{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:center;-ms-flex-align:center;align-items:center}.mfui-content-view_fullscreen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-content-view_fullscreen .mfui-content-view__content{margin-top:auto}.mfui-content-view_fullscreen .mfui-content-view__buttons{margin-top:auto;padding-bottom:24px}

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import './ContentView.scss';
+type ElementType = {
+    /** Текст */
+    text?: string;
+    /** Атрибут href */
+    href?: string;
+    /** Атрибут target */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Отключение кнопки */
+    disabled?: boolean;
+    /** Показать загрузку */
+    showLoader?: boolean;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IContentViewProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        title?: string;
+        button?: string;
+        link?: string;
+        bgImage?: string;
+    };
+    /** Заголовок */
+    title: string;
+    /** Тип встроенного изображения */
+    type?: 'waiting' | 'error' | 'submit' | 'success' | 'fail' | 'update' | 'alarm' | 'empty' | 'searchNoResult';
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Ссылка на изображение */
+    src?: string;
+    /** Параметры кнопки */
+    buttonParams?: ElementType;
+    /** Параметры ссылки */
+    linkParams?: ElementType;
+    /** Полноэкранный режим */
+    isFullscreen?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        link?: Record<string, string>;
+        bgImage?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+}
+declare const ContentView: React.FC<IContentViewProps>;
+export default ContentView;

package/dist/lib/components/ContentView/ContentView.js

@@ -0,0 +1,75 @@
+"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"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.link.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+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 cn = (0, _uiHelpers.cnCreate)('mfui-content-view');
+var ContentView = function ContentView(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    title = _ref.title,
+    type = _ref.type,
+    _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    src = _ref.src,
+    buttonParams = _ref.buttonParams,
+    linkParams = _ref.linkParams,
+    isFullscreen = _ref.isFullscreen,
+    dataAttrs = _ref.dataAttrs,
+    children = _ref.children;
+  var showButtons = !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) || !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      fullscreen: isFullscreen
+    }, [className])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, !!type && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.bgImage), {
+    className: cn('bg-image', {
+      type: type
+    }, [classes.bgImage])
+  })), !!src && !type && /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: src,
+    alt: alt
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('title', [classes.title])
+  }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!children && /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, children)), showButtons && /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons')
+  }, !!(buttonParams === null || buttonParams === void 0 ? void 0 : buttonParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    className: cn('button', [classes.button]),
+    href: buttonParams.href,
+    target: buttonParams.target,
+    disabled: buttonParams.disabled,
+    showLoader: buttonParams.showLoader,
+    onClick: buttonParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  }, buttonParams.text), !!(linkParams === null || linkParams === void 0 ? void 0 : linkParams.text) && /*#__PURE__*/React.createElement(_Button["default"], {
+    className: cn('link', [classes.link]),
+    type: "text",
+    href: linkParams.href,
+    target: linkParams.target,
+    disabled: linkParams.disabled,
+    showLoader: linkParams.showLoader,
+    onClick: linkParams.onClick,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    }
+  }, linkParams.text)));
+};
+var _default = exports["default"] = ContentView;

package/dist/lib/components/Counter/Counter.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-counter{-webkit-box-pack:justify;-ms-flex-pack:justify;height:32px;justify-content:space-between;width:120px}.mfui-counter,.mfui-counter__btn{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-counter__btn{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--base);border:1px solid var(--spbSky2);cursor:pointer;font-size:20px;height:100%;justify-content:center;margin:0;max-width:32px;outline:none;padding:0;text-decoration:none;width:100%;fill:var(--content);-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-counter__btn:hover{background-color:var(--spbSky0)}.mfui-counter__btn:disabled{background-color:var(--spbSky1);cursor:default}.mfui-counter__btn:disabled .mfui-counter__icon{fill:var(--spbSky2)}.mfui-counter__btn_left{border-bottom-left-radius:50px;border-top-left-radius:50px}.mfui-counter__btn_right{border-bottom-right-radius:50px;border-top-right-radius:50px}.mfui-counter__icon{display:block;height:20px;width:20px}.mfui-counter__input-box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid var(--spbSky2);border-top:1px solid var(--spbSky2);overflow:hidden}.mfui-counter__input,.mfui-counter__input-box{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%}.mfui-counter__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--base);border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;margin:0;outline:none;overflow:auto;padding:0;text-align:center;width:100%}.mfui-counter_disabled .mfui-counter__btn,.mfui-counter_disabled .mfui-counter__input{background-color:var(--spbSky1);cursor:default}.mfui-counter_disabled .mfui-counter__input{color:var(--spbSky3)}.mfui-counter_disabled .mfui-counter__icon{fill:var(--spbSky2)}

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import './Counter.scss';
+export interface ICounterProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        minus?: Record<string, string>;
+        plus?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Внешнее значение для контролируемого компонента */
+    value?: number;
+    /** Начальное значение */
+    initialValue?: number;
+    /** Минимальное доступное значение */
+    min?: number;
+    /** Максимальное доступное значение */
+    max?: number;
+    /** Отключение счетчика */
+    disabled?: boolean;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: number) => void;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        buttonMinus?: string;
+        buttonPlus?: string;
+        input?: string;
+    };
+}
+declare const Counter: React.FC<ICounterProps>;
+export default Counter;

package/dist/lib/components/Counter/Counter.js

@@ -0,0 +1,130 @@
+"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"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.number.constructor.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+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 IconMinus = function IconMinus(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5 9h10v2H5z"
+  }));
+};
+var IconPlus = function IconPlus(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11 5H9v4H5v2h4v4h2v-4h4V9h-4V5z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-counter');
+var Counter = function Counter(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    _ref$value = _ref.value,
+    outerValue = _ref$value === void 0 ? 0 : _ref$value,
+    initialValue = _ref.initialValue,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 999999 : _ref$max,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var currentInitialValue = initialValue || min;
+  var _React$useState = React.useState(currentInitialValue),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    innerValue = _React$useState2[0],
+    setInnerValue = _React$useState2[1];
+  var currentValue = isControlled ? outerValue : innerValue;
+  React.useEffect(function () {
+    setInnerValue(currentInitialValue);
+  }, [currentInitialValue]);
+  var handleValueChange = React.useCallback(function (inputValue) {
+    if (!isControlled) {
+      setInnerValue(inputValue);
+    }
+    if (inputValue < min) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(min);
+    }
+    if (inputValue > max) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(max);
+    }
+    if (inputValue >= min && inputValue <= max) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+    }
+  }, [min, max, onChange, isControlled]);
+  var handleMinusClick = React.useCallback(function () {
+    handleValueChange(currentValue - 1);
+  }, [handleValueChange, currentValue]);
+  var handlePlusClick = React.useCallback(function () {
+    handleValueChange(currentValue + 1);
+  }, [handleValueChange, currentValue]);
+  var handleInputChange = React.useCallback(function (e) {
+    var pattern = /^[0-9\b]+$/;
+    var inputValue = e.target.value;
+    if (inputValue !== '' && !pattern.test(inputValue)) {
+      return;
+    }
+    handleValueChange(Number(inputValue));
+  }, [handleValueChange]);
+  var handleInputBlur = React.useCallback(function (e) {
+    var inputValue = e.target.value;
+    var numberValue = Number(inputValue);
+    if (numberValue < min) {
+      handleValueChange(min);
+      return;
+    }
+    if (numberValue > max) {
+      handleValueChange(max);
+    }
+  }, [handleValueChange, min, max]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      disabled: disabled
+    }, [className, classes.root])
+  }), /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.minus), {
+    className: cn('btn', {
+      left: true
+    }, classes.buttonMinus),
+    type: "button",
+    disabled: disabled || currentValue <= min,
+    onClick: handleMinusClick
+  }), /*#__PURE__*/React.createElement(IconMinus, {
+    className: cn('icon')
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('input-box')
+  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    className: cn('input', classes.input),
+    value: currentValue,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    disabled: disabled
+  }))), /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.plus), {
+    className: cn('btn', {
+      right: true
+    }, classes.buttonPlus),
+    type: "button",
+    disabled: disabled || currentValue >= max,
+    onClick: handlePlusClick
+  }), /*#__PURE__*/React.createElement(IconPlus, {
+    className: cn('icon')
+  })));
+};
+var _default = exports["default"] = Counter;

package/dist/lib/components/ErrorLoad/ErrorLoad.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-error-load{background:inherit}.mfui-error-load_cardinal_vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-error-load_cardinal_horizontal,.mfui-error-load_cardinal_vertical{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-error-load_cardinal_horizontal{gap:8px;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-error-load__header{text-align:center}.mfui-error-load__text .mfui-error-load__caption_background_on-color,.mfui-error-load__text .mfui-error-load__header_background_on-color{color:var(--stcWhite)}.mfui-error-load__text .mfui-error-load__caption_background_on-base{color:var(--spbSky3)}.mfui-error-load__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.mfui-error-load__text_cardinal_vertical{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IButtonProps } from '../Button/Button';
+import './ErrorLoad.scss';
+type ButtonProps = Pick<IButtonProps, 'disabled' | 'showLoader' | 'onClick'>;
+export interface IErrorLoadProps {
+    /** Размер блока */
+    big?: boolean;
+    /** Цветовая тема */
+    background?: 'on-base' | 'on-color';
+    /** Ориентация блока */
+    cardinalDirection?: 'vertical' | 'horizontal';
+    /** Параметры кнопки */
+    buttonParams?: ButtonProps;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+}
+declare const ErrorLoad: React.FC<IErrorLoadProps>;
+export default ErrorLoad;

package/dist/lib/components/ErrorLoad/ErrorLoad.js

@@ -0,0 +1,68 @@
+"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"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.string.big.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+var _Header = _interopRequireDefault(require("../Header/Header"));
+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 RefreshIcon24 = function RefreshIcon24(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16.064 8C11.604 8 8 11.588 8 16s3.604 8 8.064 8c4.1 0 7.478-3.033 7.995-6.948l1.983.262C25.393 22.223 21.17 26 16.064 26 10.513 26 6 21.53 6 16S10.513 6 16.064 6c3.456 0 6.507 1.731 8.32 4.371l.704-2.345 1.915.575-1.419 4.726a1 1 0 01-1.228.675l-4.855-1.364.541-1.925 2.664.748A8.074 8.074 0 0016.064 8z"
+  }));
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-error-load');
+var ErrorLoad = function ErrorLoad(_ref) {
+  var _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'on-base' : _ref$background,
+    _ref$big = _ref.big,
+    big = _ref$big === void 0 ? true : _ref$big,
+    _ref$cardinalDirectio = _ref.cardinalDirection,
+    cardinalDirection = _ref$cardinalDirectio === void 0 ? 'horizontal' : _ref$cardinalDirectio,
+    className = _ref.className,
+    dataAttrs = _ref.dataAttrs,
+    buttonParams = _ref.buttonParams;
+  var isBaseBackground = background === 'on-base';
+  var isSmallIconSize = cardinalDirection === 'horizontal' || !big;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      cardinal: cardinalDirection
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('text', {
+      cardinal: cardinalDirection
+    })
+  }, /*#__PURE__*/React.createElement(_Header["default"], {
+    as: big ? 'h3' : 'h5',
+    className: cn('header', {
+      background: background
+    })
+  }, "\u0414\u0430\u043D\u043D\u044B\u0435 \u043D\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043B\u0438\u0441\u044C"), big && /*#__PURE__*/React.createElement(_Caption["default"], {
+    hasMargin: false,
+    className: cn('caption', {
+      background: background
+    })
+  }, "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0439\u0434\u0438\u0442\u0435 \u043F\u043E\u0437\u0436\u0435")), /*#__PURE__*/React.createElement(_Button["default"], (0, _extends2["default"])({
+    icon: /*#__PURE__*/React.createElement(RefreshIcon24, null),
+    theme: isBaseBackground ? 'green' : 'white',
+    sizeAll: isSmallIconSize ? 'small' : 'medium'
+  }, buttonParams, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    }
+  })));
+};
+var _default = exports["default"] = ErrorLoad;