@megafon/ui-core 5.10.1 → 5.12.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.12.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.11.0...@megafon/ui-core@5.12.0) (2024-05-14)
+
+
+### Features
+
+* **sliders:** add support for non-multiple min value ([51ed0cf](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/51ed0cfa3829bb4fab446086729a3b1ea1dcff61))
+
+
+
+
+
+# [5.11.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.10.1...@megafon/ui-core@5.11.0) (2024-05-06)
+
+
+### Features
+
+* **notificationbadge:** create component NotificationBadge ([6b89be0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6b89be0e0e568f71f3a2340f924fbb837e61a221))
+* **pricebadge:** add purple color ([3943148](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/3943148c1eee233c73830fc705ff2d11dd68721a))
+* **snackbar:** update snackbar component ([e7231de](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e7231de8447b2a51335b56c5344baf703af7647b))
+
+
+
+
+
 ## [5.10.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.10.0...@megafon/ui-core@5.10.1) (2024-04-24)
 
 

package/dist/es/components/Badges/components/NotificationBadge/NotificationBadge.css

@@ -0,0 +1,49 @@
+.mfui-notification-badge {
+  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;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  overflow: hidden;
+  color: var(--stcWhite);
+}
+.mfui-notification-badge_theme_green {
+  background-color: var(--brandGreen);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+}
+.mfui-notification-badge_theme_red {
+  background-color: var(--warmRedC);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+}
+.mfui-notification-badge_auto-width {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 24px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.mfui-notification-badge_size_small {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+.mfui-notification-badge_size_small .mfui-notification-badge__text {
+  display: none;
+}
+.mfui-notification-badge__text {
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+}

package/dist/es/components/Badges/components/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import './NotificationBadge.less';
+export declare const NotificationBadgeTheme: {
+    readonly GREEN: "green";
+    readonly RED: "red";
+};
+declare type NotificationBadgeThemeType = typeof NotificationBadgeTheme[keyof typeof NotificationBadgeTheme];
+export declare const NotificationBadgeSize: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+declare type NotificationBadgeSizeType = typeof NotificationBadgeSize[keyof typeof NotificationBadgeSize];
+export interface INotificationBadgeProps {
+    /** Цветовая тема */
+    theme?: NotificationBadgeThemeType;
+    /** Размер бейджа */
+    size?: NotificationBadgeSizeType;
+    /** Ширина по размеру содержимого */
+    autoWidth?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+}
+declare const NotificationBadge: React.FC<INotificationBadgeProps>;
+export default NotificationBadge;

package/dist/es/components/Badges/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./NotificationBadge.css";
+export var NotificationBadgeTheme = {
+  GREEN: 'green',
+  RED: 'red'
+};
+export var NotificationBadgeSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+var cn = cnCreate('mfui-notification-badge');
+
+var NotificationBadge = function NotificationBadge(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$autoWidth = _ref.autoWidth,
+      autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      size: size,
+      'auto-width': autoWidth
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+NotificationBadge.propTypes = {
+  theme: PropTypes.oneOf(Object.values(NotificationBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(NotificationBadgeSize)),
+  autoWidth: PropTypes.bool,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.node
+};
+export default NotificationBadge;

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.css

@@ -55,6 +55,15 @@
 .mfui-price-badge_theme_green .mfui-price-badge__icon {
   fill: var(--brandGreen);
 }
+.mfui-price-badge_theme_purple {
+  background-color: var(--brandPurple80);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__text {
+  color: var(--stcWhite);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__icon {
+  fill: var(--stcWhite);
+}
 .mfui-price-badge_theme_red {
   background-color: var(--fury20);
 }

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -7,6 +7,7 @@ export declare const PriceBadgeTheme: {
     readonly ORANGE: "orange";
     readonly LIGHT: "light";
     readonly DARK: "dark";
+    readonly PURPLE: "purple";
 };
 export declare const PriceBadgeIcon: {
     readonly TIMER: "timer";

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js

@@ -119,7 +119,8 @@ export var PriceBadgeTheme = {
   GREEN: 'green',
   ORANGE: 'orange',
   LIGHT: 'light',
-  DARK: 'dark'
+  DARK: 'dark',
+  PURPLE: 'purple'
 };
 export var PriceBadgeIcon = {
   TIMER: 'timer',

package/dist/es/components/Selector/Selector.css

@@ -19,7 +19,6 @@
   cursor: pointer;
 }
 .mfui-selector__custom-input {
-  position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -31,8 +30,8 @@
           justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 20px;
-  height: 20px;
+  width: 28px;
+  height: 28px;
   border: 2px solid;
   border-radius: 50%;
   -webkit-transition: background-color, border-color;
@@ -42,8 +41,8 @@
 }
 .mfui-selector__icon {
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 12px;
   opacity: 0;
   -webkit-transition: fill, opacity;
   transition: fill, opacity;

package/dist/es/components/Selector/Selector.js

@@ -1,6 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/es.string.includes.js";
@@ -9,16 +9,8 @@ import "core-js/modules/es.array.concat.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
+import CheckedIcon from "./i/\u0441heck.svg";
 import "./Selector.css";
-
-var CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
-  }));
-};
-
 var cn = cnCreate('mfui-selector');
 
 var Selector = function Selector(_ref) {

package/dist/es/components/Selector/doc/Selector.example.css

@@ -1,14 +1,17 @@
 .top-right {
+  position: absolute;
   top: 10px;
   right: 10px;
 }
 .center {
+  position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translateX(-50%) translateY(-50%);
           transform: translateX(-50%) translateY(-50%);
 }
 .bottom-left {
+  position: absolute;
   bottom: 10px;
   left: 10px;
 }

package/dist/es/components/Selector/i//321/201heck.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg"><path d="M4.523 8.368L12.386 0 14 1.914 4.523 12 0 7.187l1.614-1.914 2.909 3.095z"/></svg>

package/dist/es/components/Sliders/Slider/Slider.css

@@ -23,6 +23,7 @@
   margin-left: auto;
 }
 .mfui-slider__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 12px;
   margin: 6px 0;
   border-radius: 100px;

package/dist/es/components/Sliders/Slider/Slider.js

@@ -84,7 +84,6 @@ var Slider = function Slider(_ref) {
     value: rangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleInputChange(true),
     disabled: disabled,
     style: {

package/dist/es/components/Sliders/SliderRange/SliderRange.css

@@ -27,8 +27,10 @@
   position: relative;
   height: 12px;
   margin: 6px 0;
+  cursor: pointer;
 }
 .mfui-slider-range__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: absolute;
   top: 50%;
   width: 100%;

package/dist/es/components/Sliders/SliderRange/SliderRange.js

@@ -19,10 +19,8 @@ var SliderRange = function SliderRange(_ref) {
       displayLeftValuePrefix = _ref.displayLeftValuePrefix,
       displayRightValuePrefix = _ref.displayRightValuePrefix,
       displayValueUnit = _ref.displayValueUnit,
-      _ref$leftValue = _ref.leftValue,
-      outerLeftValue = _ref$leftValue === void 0 ? 0 : _ref$leftValue,
-      _ref$rightValue = _ref.rightValue,
-      outerRightValue = _ref$rightValue === void 0 ? 0 : _ref$rightValue,
+      outerLeftValue = _ref.leftValue,
+      outerRightValue = _ref.rightValue,
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
       _ref$isControlled = _ref.isControlled,
@@ -35,8 +33,8 @@ var SliderRange = function SliderRange(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       dataAttrs = _ref.dataAttrs,
       onChange = _ref.onChange;
-  var defaultLeftRangeValue = outerLeftValue || minValue;
-  var defaultRightRangeValue = outerRightValue || maxValue;
+  var outerLeftRangeValue = getRangeValue(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
+  var outerRightRangeValue = getRangeValue(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
   var rangeTrackInnerRef = React.useRef(null);
 
   var _React$useState = React.useState(null),
@@ -49,18 +47,18 @@ var SliderRange = function SliderRange(_ref) {
       rawRightInputValue = _React$useState4[0],
       setRawRightInputValue = _React$useState4[1];
 
-  var _React$useState5 = React.useState(defaultLeftRangeValue),
+  var _React$useState5 = React.useState(outerLeftRangeValue),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       innerLeftRangeValue = _React$useState6[0],
       setInnerLeftRangeValue = _React$useState6[1];
 
-  var _React$useState7 = React.useState(defaultRightRangeValue),
+  var _React$useState7 = React.useState(outerRightRangeValue),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       innerRightRangeValue = _React$useState8[0],
       setInnerRightRangeValue = _React$useState8[1];
 
-  var leftRangeValue = isControlled ? outerLeftValue : innerLeftRangeValue;
-  var rightRangeValue = isControlled ? outerRightValue : innerRightRangeValue;
+  var leftRangeValue = isControlled ? outerLeftRangeValue : innerLeftRangeValue;
+  var rightRangeValue = isControlled ? outerRightRangeValue : innerRightRangeValue;
   var trackSize = getTrackSize(leftRangeValue, rightRangeValue, minValue, maxValue);
   var isThumbAtEndOfTrack = checkForThumbAtEndOfTrack(leftRangeValue, minValue, maxValue, THUMB_SIZE);
   var showHead = !!label || !!displayValueType;
@@ -160,7 +158,6 @@ var SliderRange = function SliderRange(_ref) {
     value: leftRangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleLeftInputChange(true),
     disabled: disabled
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput))), /*#__PURE__*/React.createElement("input", _extends({
@@ -171,7 +168,6 @@ var SliderRange = function SliderRange(_ref) {
     value: rightRangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleRightInputChange(true),
     disabled: disabled
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput))), /*#__PURE__*/React.createElement("div", {

package/dist/es/components/Sliders/SliderRatio/SliderRatio.css

@@ -28,6 +28,7 @@
   width: 100%;
 }
 .mfui-slider-ratio__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
   z-index: 1;
   display: block;

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css

@@ -50,6 +50,7 @@
   color: var(--spbSky3);
 }
 .mfui-slider-display-value__input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   display: block;
   width: 10px;
   min-width: 100%;

package/dist/es/components/Sliders/helpers.js

@@ -1,21 +1,22 @@
 import "core-js/modules/es.number.constructor.js";
 import "core-js/modules/es.number.to-fixed.js";
 export var getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
-  var numberValue = Number(value);
+  var sourceValue = Number(value);
 
-  if (numberValue < minValue) {
+  if (minValue === maxValue || sourceValue < minValue) {
     return minValue;
   }
 
-  if (numberValue > maxValue) {
+  if (sourceValue > maxValue) {
     return maxValue;
   }
 
   var valueDifference = maxValue - minValue;
   var expectedStepCount = valueDifference / step;
-  var receivedStepCount = valueDifference / numberValue;
+  var receivedStepCount = valueDifference / sourceValue;
   var stepPosition = Math.round(expectedStepCount / receivedStepCount);
-  return step * stepPosition;
+  var valueWithStep = step * stepPosition;
+  return valueWithStep < minValue ? minValue : valueWithStep;
 };
 export var getTrackSize = function getTrackSize() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

package/dist/es/components/Snackbar/Snackbar.js

@@ -214,7 +214,7 @@ var Snackbar = function Snackbar(_ref) {
       mobile: true
     }, [classes.text]),
     variant: "medium",
-    color: "white",
+    color: "inherit",
     hasMargin: false,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text

package/dist/es/index.d.ts

@@ -27,6 +27,7 @@ export { default as Logo } from './components/Logo/Logo';
 export { default as Month } from './components/Calendar/components/Month/Month';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
+export { default as NotificationBadge } from './components/Badges/components/NotificationBadge/NotificationBadge';
 export { default as Pagination } from './components/Pagination/Pagination';
 export { default as PaginationButton } from './components/Pagination/components/PaginationButton/PaginationButton';
 export { default as PaginationButtons } from './components/Pagination/components/PaginationButtons/PaginationButtons';

package/dist/es/index.js

@@ -27,6 +27,7 @@ export { default as Logo } from "./components/Logo/Logo";
 export { default as Month } from "./components/Calendar/components/Month/Month";
 export { default as NavArrow } from "./components/NavArrow/NavArrow";
 export { default as Notification } from "./components/Notification/Notification";
+export { default as NotificationBadge } from "./components/Badges/components/NotificationBadge/NotificationBadge";
 export { default as Pagination } from "./components/Pagination/Pagination";
 export { default as PaginationButton } from "./components/Pagination/components/PaginationButton/PaginationButton";
 export { default as PaginationButtons } from "./components/Pagination/components/PaginationButtons/PaginationButtons";

package/dist/lib/components/Badges/components/NotificationBadge/NotificationBadge.css

@@ -0,0 +1,49 @@
+.mfui-notification-badge {
+  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;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  overflow: hidden;
+  color: var(--stcWhite);
+}
+.mfui-notification-badge_theme_green {
+  background-color: var(--brandGreen);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(0, 185, 86, 0.5);
+}
+.mfui-notification-badge_theme_red {
+  background-color: var(--warmRedC);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(235, 90, 64, 0.5);
+}
+.mfui-notification-badge_auto-width {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  min-width: 24px;
+  padding: 5px 8px;
+  border-radius: 12px;
+}
+.mfui-notification-badge_size_small {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border-radius: 50%;
+}
+.mfui-notification-badge_size_small .mfui-notification-badge__text {
+  display: none;
+}
+.mfui-notification-badge__text {
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 14px;
+}

package/dist/lib/components/Badges/components/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import './NotificationBadge.less';
+export declare const NotificationBadgeTheme: {
+    readonly GREEN: "green";
+    readonly RED: "red";
+};
+declare type NotificationBadgeThemeType = typeof NotificationBadgeTheme[keyof typeof NotificationBadgeTheme];
+export declare const NotificationBadgeSize: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+declare type NotificationBadgeSizeType = typeof NotificationBadgeSize[keyof typeof NotificationBadgeSize];
+export interface INotificationBadgeProps {
+    /** Цветовая тема */
+    theme?: NotificationBadgeThemeType;
+    /** Размер бейджа */
+    size?: NotificationBadgeSizeType;
+    /** Ширина по размеру содержимого */
+    autoWidth?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data-атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+}
+declare const NotificationBadge: React.FC<INotificationBadgeProps>;
+export default NotificationBadge;

package/dist/lib/components/Badges/components/NotificationBadge/NotificationBadge.js

@@ -0,0 +1,70 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NotificationBadgeSize = exports.NotificationBadgeTheme = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.object.values.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var NotificationBadgeTheme = {
+  GREEN: 'green',
+  RED: 'red'
+};
+exports.NotificationBadgeTheme = NotificationBadgeTheme;
+var NotificationBadgeSize = {
+  SMALL: 'small',
+  MEDIUM: 'medium'
+};
+exports.NotificationBadgeSize = NotificationBadgeSize;
+var cn = (0, _uiHelpers.cnCreate)('mfui-notification-badge');
+
+var NotificationBadge = function NotificationBadge(_ref) {
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'green' : _ref$theme,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$autoWidth = _ref.autoWidth,
+      autoWidth = _ref$autoWidth === void 0 ? false : _ref$autoWidth,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme,
+      size: size,
+      'auto-width': autoWidth
+    }, className)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: cn('text')
+  }, children));
+};
+
+NotificationBadge.propTypes = {
+  theme: PropTypes.oneOf(Object.values(NotificationBadgeTheme)),
+  size: PropTypes.oneOf(Object.values(NotificationBadgeSize)),
+  autoWidth: PropTypes.bool,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  children: PropTypes.node
+};
+var _default = NotificationBadge;
+exports["default"] = _default;

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.css

@@ -55,6 +55,15 @@
 .mfui-price-badge_theme_green .mfui-price-badge__icon {
   fill: var(--brandGreen);
 }
+.mfui-price-badge_theme_purple {
+  background-color: var(--brandPurple80);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__text {
+  color: var(--stcWhite);
+}
+.mfui-price-badge_theme_purple .mfui-price-badge__icon {
+  fill: var(--stcWhite);
+}
 .mfui-price-badge_theme_red {
   background-color: var(--fury20);
 }

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -7,6 +7,7 @@ export declare const PriceBadgeTheme: {
     readonly ORANGE: "orange";
     readonly LIGHT: "light";
     readonly DARK: "dark";
+    readonly PURPLE: "purple";
 };
 export declare const PriceBadgeIcon: {
     readonly TIMER: "timer";

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -137,7 +137,8 @@ var PriceBadgeTheme = {
   GREEN: 'green',
   ORANGE: 'orange',
   LIGHT: 'light',
-  DARK: 'dark'
+  DARK: 'dark',
+  PURPLE: 'purple'
 };
 exports.PriceBadgeTheme = PriceBadgeTheme;
 var PriceBadgeIcon = {

package/dist/lib/components/Selector/Selector.css

@@ -19,7 +19,6 @@
   cursor: pointer;
 }
 .mfui-selector__custom-input {
-  position: absolute;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -31,8 +30,8 @@
           justify-content: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: 20px;
-  height: 20px;
+  width: 28px;
+  height: 28px;
   border: 2px solid;
   border-radius: 50%;
   -webkit-transition: background-color, border-color;
@@ -42,8 +41,8 @@
 }
 .mfui-selector__icon {
   display: block;
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 12px;
   opacity: 0;
   -webkit-transition: fill, opacity;
   transition: fill, opacity;

package/dist/lib/components/Selector/Selector.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 require("core-js/modules/es.function.name.js");
 
 require("core-js/modules/es.array.includes.js");
@@ -29,20 +29,14 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
+var _сheck = _interopRequireDefault(require("./i/\u0441heck.svg"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
-  }));
-};
-
 var cn = (0, _uiHelpers.cnCreate)('mfui-selector');
 
 var Selector = function Selector(_ref) {
@@ -95,7 +89,7 @@ var Selector = function Selector(_ref) {
     ref: inputRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('custom-input', classes.customInput)
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(_сheck["default"], {
     className: cn('icon')
   })), children));
 };

package/dist/lib/components/Selector/doc/Selector.example.css

@@ -1,14 +1,17 @@
 .top-right {
+  position: absolute;
   top: 10px;
   right: 10px;
 }
 .center {
+  position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translateX(-50%) translateY(-50%);
           transform: translateX(-50%) translateY(-50%);
 }
 .bottom-left {
+  position: absolute;
   bottom: 10px;
   left: 10px;
 }

package/dist/lib/components/Selector/i//321/201heck.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 12" xmlns="http://www.w3.org/2000/svg"><path d="M4.523 8.368L12.386 0 14 1.914 4.523 12 0 7.187l1.614-1.914 2.909 3.095z"/></svg>

package/dist/lib/components/Sliders/Slider/Slider.css

@@ -23,6 +23,7 @@
   margin-left: auto;
 }
 .mfui-slider__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 12px;
   margin: 6px 0;
   border-radius: 100px;

package/dist/lib/components/Sliders/Slider/Slider.js

@@ -107,7 +107,6 @@ var Slider = function Slider(_ref) {
     value: rangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleInputChange(true),
     disabled: disabled,
     style: {

package/dist/lib/components/Sliders/SliderRange/SliderRange.css

@@ -27,8 +27,10 @@
   position: relative;
   height: 12px;
   margin: 6px 0;
+  cursor: pointer;
 }
 .mfui-slider-range__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: absolute;
   top: 50%;
   width: 100%;

package/dist/lib/components/Sliders/SliderRange/SliderRange.js

@@ -43,10 +43,8 @@ var SliderRange = function SliderRange(_ref) {
       displayLeftValuePrefix = _ref.displayLeftValuePrefix,
       displayRightValuePrefix = _ref.displayRightValuePrefix,
       displayValueUnit = _ref.displayValueUnit,
-      _ref$leftValue = _ref.leftValue,
-      outerLeftValue = _ref$leftValue === void 0 ? 0 : _ref$leftValue,
-      _ref$rightValue = _ref.rightValue,
-      outerRightValue = _ref$rightValue === void 0 ? 0 : _ref$rightValue,
+      outerLeftValue = _ref.leftValue,
+      outerRightValue = _ref.rightValue,
       minValue = _ref.minValue,
       maxValue = _ref.maxValue,
       _ref$isControlled = _ref.isControlled,
@@ -59,8 +57,8 @@ var SliderRange = function SliderRange(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       dataAttrs = _ref.dataAttrs,
       onChange = _ref.onChange;
-  var defaultLeftRangeValue = outerLeftValue || minValue;
-  var defaultRightRangeValue = outerRightValue || maxValue;
+  var outerLeftRangeValue = (0, _helpers.getRangeValue)(outerLeftValue !== null && outerLeftValue !== void 0 ? outerLeftValue : minValue, minValue, maxValue, step);
+  var outerRightRangeValue = (0, _helpers.getRangeValue)(outerRightValue !== null && outerRightValue !== void 0 ? outerRightValue : maxValue, minValue, maxValue, step);
   var rangeTrackInnerRef = React.useRef(null);
 
   var _React$useState = React.useState(null),
@@ -73,18 +71,18 @@ var SliderRange = function SliderRange(_ref) {
       rawRightInputValue = _React$useState4[0],
       setRawRightInputValue = _React$useState4[1];
 
-  var _React$useState5 = React.useState(defaultLeftRangeValue),
+  var _React$useState5 = React.useState(outerLeftRangeValue),
       _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
       innerLeftRangeValue = _React$useState6[0],
       setInnerLeftRangeValue = _React$useState6[1];
 
-  var _React$useState7 = React.useState(defaultRightRangeValue),
+  var _React$useState7 = React.useState(outerRightRangeValue),
       _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
       innerRightRangeValue = _React$useState8[0],
       setInnerRightRangeValue = _React$useState8[1];
 
-  var leftRangeValue = isControlled ? outerLeftValue : innerLeftRangeValue;
-  var rightRangeValue = isControlled ? outerRightValue : innerRightRangeValue;
+  var leftRangeValue = isControlled ? outerLeftRangeValue : innerLeftRangeValue;
+  var rightRangeValue = isControlled ? outerRightRangeValue : innerRightRangeValue;
   var trackSize = (0, _helpers2.getTrackSize)(leftRangeValue, rightRangeValue, minValue, maxValue);
   var isThumbAtEndOfTrack = (0, _helpers2.checkForThumbAtEndOfTrack)(leftRangeValue, minValue, maxValue, THUMB_SIZE);
   var showHead = !!label || !!displayValueType;
@@ -184,7 +182,6 @@ var SliderRange = function SliderRange(_ref) {
     value: leftRangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleLeftInputChange(true),
     disabled: disabled
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftRangeInput))), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
@@ -195,7 +192,6 @@ var SliderRange = function SliderRange(_ref) {
     value: rightRangeValue,
     min: minValue,
     max: maxValue,
-    step: step,
     onChange: handleRightInputChange(true),
     disabled: disabled
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightRangeInput))), /*#__PURE__*/React.createElement("div", {

package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css

@@ -28,6 +28,7 @@
   width: 100%;
 }
 .mfui-slider-ratio__range-input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
   z-index: 1;
   display: block;

package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css

@@ -50,6 +50,7 @@
   color: var(--spbSky3);
 }
 .mfui-slider-display-value__input {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   display: block;
   width: 10px;
   min-width: 100%;

package/dist/lib/components/Sliders/helpers.js

@@ -10,21 +10,22 @@ require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.number.to-fixed.js");
 
 var getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
-  var numberValue = Number(value);
+  var sourceValue = Number(value);
 
-  if (numberValue < minValue) {
+  if (minValue === maxValue || sourceValue < minValue) {
     return minValue;
   }
 
-  if (numberValue > maxValue) {
+  if (sourceValue > maxValue) {
     return maxValue;
   }
 
   var valueDifference = maxValue - minValue;
   var expectedStepCount = valueDifference / step;
-  var receivedStepCount = valueDifference / numberValue;
+  var receivedStepCount = valueDifference / sourceValue;
   var stepPosition = Math.round(expectedStepCount / receivedStepCount);
-  return step * stepPosition;
+  var valueWithStep = step * stepPosition;
+  return valueWithStep < minValue ? minValue : valueWithStep;
 };
 
 exports.getRangeValue = getRangeValue;

package/dist/lib/components/Snackbar/Snackbar.js

@@ -241,7 +241,7 @@ var Snackbar = function Snackbar(_ref) {
       mobile: true
     }, [classes.text]),
     variant: "medium",
-    color: "white",
+    color: "inherit",
     hasMargin: false,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text

package/dist/lib/index.d.ts

@@ -27,6 +27,7 @@ export { default as Logo } from './components/Logo/Logo';
 export { default as Month } from './components/Calendar/components/Month/Month';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
+export { default as NotificationBadge } from './components/Badges/components/NotificationBadge/NotificationBadge';
 export { default as Pagination } from './components/Pagination/Pagination';
 export { default as PaginationButton } from './components/Pagination/components/PaginationButton/PaginationButton';
 export { default as PaginationButtons } from './components/Pagination/components/PaginationButtons/PaginationButtons';

package/dist/lib/index.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "Notification", {
     return _Notification["default"];
   }
 });
+Object.defineProperty(exports, "NotificationBadge", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationBadge["default"];
+  }
+});
 Object.defineProperty(exports, "Pagination", {
   enumerable: true,
   get: function get() {
@@ -422,6 +428,8 @@ var _NavArrow = _interopRequireDefault(require("./components/NavArrow/NavArrow")
 
 var _Notification = _interopRequireDefault(require("./components/Notification/Notification"));
 
+var _NotificationBadge = _interopRequireDefault(require("./components/Badges/components/NotificationBadge/NotificationBadge"));
+
 var _Pagination = _interopRequireDefault(require("./components/Pagination/Pagination"));
 
 var _PaginationButton = _interopRequireDefault(require("./components/Pagination/components/PaginationButton/PaginationButton"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.10.1",
+  "version": "5.12.0",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.22.1",
+    "@megafon/ui-icons": "^2.23.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "88317ae63c14449b3ab9dd1ea8c6215ec3385059"
+  "gitHead": "41cea5802cbc51e28d7f4c3d214996b12f3e5439"
 }