@megafon/ui-core 5.2.2 → 5.3.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.3...@megafon/ui-core@5.3.0) (2023-11-08)
+
+
+### Features
+
+* **selector:** create component Selector ([73d6aec](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/73d6aec573fe500471f0b557f0cbe0a9485b1fa3))
+
+
+
+
+
+## [5.2.3](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.2...@megafon/ui-core@5.2.3) (2023-10-17)
+
+
+### Bug Fixes
+
+* **preloader:** add new prop disableAnimate ([5b1fc46](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/5b1fc469ccab408679e07e64ce3e04474a410c09))
+* **switcher:** add new prop waiting ([78b8bb9](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/78b8bb9d115ed0a45d529a1204f5a3d5d132a330))
+
+
+
+
+
 ## [5.2.2](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.1...@megafon/ui-core@5.2.2) (2023-09-14)
 
 

package/dist/es/components/Preloader/Preloader.css

@@ -138,6 +138,10 @@
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
+.mfui-preloader_disable-animate .mfui-preloader__item:before {
+  -webkit-animation: none;
+          animation: none;
+}
 @-webkit-keyframes scaling {
   0% {
     -webkit-transform: scale(1);

package/dist/es/components/Preloader/Preloader.d.ts

@@ -26,6 +26,8 @@ export interface IPreloaderProps {
     sizeTablet?: PreloaderSizesType;
     /** Размер на разрешении экрана 0-767 */
     sizeMobile?: PreloaderSizesType;
+    /** Отмена анимации  */
+    disableAnimate?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/es/components/Preloader/Preloader.js

@@ -24,6 +24,8 @@ var Preloader = function Preloader(_ref) {
       sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? true : _ref$delay,
+      _ref$disableAnimate = _ref.disableAnimate,
+      disableAnimate = _ref$disableAnimate === void 0 ? false : _ref$disableAnimate,
       sizeWide = _ref.sizeWide,
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
@@ -55,7 +57,8 @@ var Preloader = function Preloader(_ref) {
       'size-wide': sizeWide,
       'size-desktop': sizeDesktop,
       'size-tablet': sizeTablet,
-      'size-mobile': sizeMobile
+      'size-mobile': sizeMobile,
+      'disable-animate': disableAnimate
     }, className)
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('item', {
@@ -79,6 +82,7 @@ Preloader.propTypes = {
   sizeDesktop: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeTablet: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeMobile: PropTypes.oneOf(Object.values(PreloaderSizes)),
+  disableAnimate: PropTypes.bool,
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)

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

@@ -0,0 +1,98 @@
+.mfui-selector__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-selector__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.mfui-selector__custom-input {
+  position: absolute;
+  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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-color: var(--spbSky2);
+  border-radius: 50%;
+  background-color: var(--base);
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  -webkit-transition: fill, opacity;
+  transition: fill, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  fill: var(--stcWhite);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+}
+.mfui-selector__label_disabled {
+  cursor: default;
+}
+.mfui-selector__label_disabled .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label_error .mfui-selector__custom-input {
+  border-color: var(--fury);
+}

package/dist/es/components/Selector/Selector.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Selector.less';
+export interface ISelectorProps {
+    /** Базовый тип компонента */
+    type?: 'radio' | 'checkbox';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Управление состоянием компонента при типе checkbox */
+    checkedOptions?: string[];
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        label?: string;
+        customInput?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string | string[]) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const Selector: React.FC<ISelectorProps>;
+export default Selector;

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

@@ -0,0 +1,94 @@
+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";
+import "core-js/modules/es.array.filter.js";
+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 "./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) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type,
+      value = _ref.value,
+      name = _ref.name,
+      checked = _ref.checked,
+      _ref$checkedOptions = _ref.checkedOptions,
+      checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      inputRef = _ref.inputRef;
+
+  var handleChange = function handleChange() {
+    if (type === 'radio') {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+
+    var isChecked = checkedOptions.includes(value);
+    var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
+      return option !== value;
+    }) : [].concat(_toConsumableArray(checkedOptions), [value]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('', className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", _extends({
+    className: cn('label', {
+      disabled: disabled,
+      error: error
+    }, classes.label)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input'),
+    type: type,
+    name: name,
+    value: value,
+    checked: type === 'radio' ? checked : checkedOptions.includes(value),
+    disabled: disabled,
+    onChange: handleChange,
+    ref: inputRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('custom-input', classes.customInput)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children));
+};
+
+Selector.propTypes = {
+  type: PropTypes.oneOf(['radio', 'checkbox']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
+  error: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default Selector;

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

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

package/dist/es/components/Switcher/Switcher.css

@@ -75,6 +75,27 @@
             transform: translateX(0);
   }
 }
+.mfui-switcher__timer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--base);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-switcher__timer-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  fill: var(--spbSky2);
+}
 .mfui-switcher__input {
   position: relative;
   -ms-flex-item-align: start;
@@ -96,7 +117,8 @@
   background-color: var(--spbSky1);
 }
 .mfui-switcher__input_disabled,
-.mfui-switcher__input_loaded {
+.mfui-switcher__input_loaded,
+.mfui-switcher__input_waiting {
   cursor: default;
 }
 .mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {

package/dist/es/components/Switcher/Switcher.d.ts

@@ -7,12 +7,16 @@ export interface ISwitcherProps {
         root?: Record<string, string>;
         input?: Record<string, string>;
         loader?: Record<string, string>;
+        pointer?: Record<string, string>;
+        timer?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
-    /** Отключение переключателя */
+    /** Состояние ожидание */
+    waiting?: boolean;
+    /** сот */
     disabled?: boolean;
     /** Состояние загрузки */
     showLoader?: boolean;

package/dist/es/components/Switcher/Switcher.js

@@ -3,6 +3,17 @@ import * as React from 'react';
 import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Switcher.css";
+
+var WaitingIcon = function WaitingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+
 var cn = cnCreate('mfui-switcher');
 
 var Switcher = function Switcher(_ref) {
@@ -14,6 +25,8 @@ var Switcher = function Switcher(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$showLoader = _ref.showLoader,
       showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      _ref$waiting = _ref.waiting,
+      waiting = _ref$waiting === void 0 ? false : _ref$waiting,
       children = _ref.children,
       _ref$textSize = _ref.textSize,
       textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
@@ -23,7 +36,9 @@ var Switcher = function Switcher(_ref) {
   var isTouch = detectTouch();
   var isLeftContent = !!children && textPosition === 'left';
   var isRightContent = !!children && textPosition === 'right';
-  var isInteractiveDisabled = showLoader || disabled;
+  var isNoProcesses = disabled || waiting;
+  var isInteractiveDisabled = showLoader || isNoProcesses;
+  var isLoaderDisplayed = showLoader && !isNoProcesses;
   var handleChange = React.useCallback(function (e) {
     if (isInteractiveDisabled || !checkEventIsClickOrEnterPress(e)) {
       return;
@@ -42,19 +57,23 @@ var Switcher = function Switcher(_ref) {
     })
   }, children), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', {
-      checked: checked,
-      disabled: disabled,
-      loaded: showLoader,
+      checked: checked && !waiting,
+      disabled: isNoProcesses,
+      loaded: showLoader && !waiting,
       'no-touch': !isTouch
     }),
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", _extends({
+  }), isLoaderDisplayed && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('loader')
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), /*#__PURE__*/React.createElement("div", {
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), waiting ? /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('timer')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer)), /*#__PURE__*/React.createElement(WaitingIcon, {
+    className: cn('timer-icon')
+  })) : /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pointer), {
     className: cn('pointer')
-  })), isRightContent && /*#__PURE__*/React.createElement("div", {
+  }))), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
       size: textSize
     })
@@ -72,6 +91,7 @@ Switcher.propTypes = {
   textPosition: PropTypes.oneOf(['left', 'right']),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  waiting: PropTypes.bool,
   showLoader: PropTypes.bool,
   onChange: PropTypes.func
 };

package/dist/es/index.d.ts

@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';

package/dist/es/index.js

@@ -35,6 +35,7 @@ export { default as PromoBadge } from "./components/Badges/components/PromoBadge
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";
+export { default as Selector } from "./components/Selector/Selector";
 export { default as selectReducer } from "./components/Select/reducer/selectReducer";
 export { default as Snackbar } from "./components/Snackbar/Snackbar";
 export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";

package/dist/lib/components/Preloader/Preloader.css

@@ -138,6 +138,10 @@
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
+.mfui-preloader_disable-animate .mfui-preloader__item:before {
+  -webkit-animation: none;
+          animation: none;
+}
 @-webkit-keyframes scaling {
   0% {
     -webkit-transform: scale(1);

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

@@ -26,6 +26,8 @@ export interface IPreloaderProps {
     sizeTablet?: PreloaderSizesType;
     /** Размер на разрешении экрана 0-767 */
     sizeMobile?: PreloaderSizesType;
+    /** Отмена анимации  */
+    disableAnimate?: boolean;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные data атрибуты к внутренним элементам */

package/dist/lib/components/Preloader/Preloader.js

@@ -47,6 +47,8 @@ var Preloader = function Preloader(_ref) {
       sizeAll = _ref$sizeAll === void 0 ? 'medium' : _ref$sizeAll,
       _ref$delay = _ref.delay,
       delay = _ref$delay === void 0 ? true : _ref$delay,
+      _ref$disableAnimate = _ref.disableAnimate,
+      disableAnimate = _ref$disableAnimate === void 0 ? false : _ref$disableAnimate,
       sizeWide = _ref.sizeWide,
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
@@ -78,7 +80,8 @@ var Preloader = function Preloader(_ref) {
       'size-wide': sizeWide,
       'size-desktop': sizeDesktop,
       'size-tablet': sizeTablet,
-      'size-mobile': sizeMobile
+      'size-mobile': sizeMobile,
+      'disable-animate': disableAnimate
     }, className)
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('item', {
@@ -102,6 +105,7 @@ Preloader.propTypes = {
   sizeDesktop: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeTablet: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeMobile: PropTypes.oneOf(Object.values(PreloaderSizes)),
+  disableAnimate: PropTypes.bool,
   className: PropTypes.string,
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)

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

@@ -0,0 +1,98 @@
+.mfui-selector__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-selector__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.mfui-selector__custom-input {
+  position: absolute;
+  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;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-color: var(--spbSky2);
+  border-radius: 50%;
+  background-color: var(--base);
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  -webkit-transition: fill, opacity;
+  transition: fill, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  fill: var(--stcWhite);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+}
+.mfui-selector__label_disabled {
+  cursor: default;
+}
+.mfui-selector__label_disabled .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label_error .mfui-selector__custom-input {
+  border-color: var(--fury);
+}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Selector.less';
+export interface ISelectorProps {
+    /** Базовый тип компонента */
+    type?: 'radio' | 'checkbox';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Управление состоянием компонента при типе checkbox */
+    checkedOptions?: string[];
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        label?: string;
+        customInput?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string | string[]) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const Selector: React.FC<ISelectorProps>;
+export default Selector;

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

@@ -0,0 +1,118 @@
+"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"] = void 0;
+
+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");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.concat.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 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) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type,
+      value = _ref.value,
+      name = _ref.name,
+      checked = _ref.checked,
+      _ref$checkedOptions = _ref.checkedOptions,
+      checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      inputRef = _ref.inputRef;
+
+  var handleChange = function handleChange() {
+    if (type === 'radio') {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+
+    var isChecked = checkedOptions.includes(value);
+    var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
+      return option !== value;
+    }) : [].concat((0, _toConsumableArray2["default"])(checkedOptions), [value]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
+  };
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('', className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
+    className: cn('label', {
+      disabled: disabled,
+      error: error
+    }, classes.label)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input'),
+    type: type,
+    name: name,
+    value: value,
+    checked: type === 'radio' ? checked : checkedOptions.includes(value),
+    disabled: disabled,
+    onChange: handleChange,
+    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, {
+    className: cn('icon')
+  })), children));
+};
+
+Selector.propTypes = {
+  type: PropTypes.oneOf(['radio', 'checkbox']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
+  error: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+var _default = Selector;
+exports["default"] = _default;

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

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

package/dist/lib/components/Switcher/Switcher.css

@@ -75,6 +75,27 @@
             transform: translateX(0);
   }
 }
+.mfui-switcher__timer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--base);
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-switcher__timer-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  fill: var(--spbSky2);
+}
 .mfui-switcher__input {
   position: relative;
   -ms-flex-item-align: start;
@@ -96,7 +117,8 @@
   background-color: var(--spbSky1);
 }
 .mfui-switcher__input_disabled,
-.mfui-switcher__input_loaded {
+.mfui-switcher__input_loaded,
+.mfui-switcher__input_waiting {
   cursor: default;
 }
 .mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {

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

@@ -7,12 +7,16 @@ export interface ISwitcherProps {
         root?: Record<string, string>;
         input?: Record<string, string>;
         loader?: Record<string, string>;
+        pointer?: Record<string, string>;
+        timer?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
-    /** Отключение переключателя */
+    /** Состояние ожидание */
+    waiting?: boolean;
+    /** сот */
     disabled?: boolean;
     /** Состояние загрузки */
     showLoader?: boolean;

package/dist/lib/components/Switcher/Switcher.js

@@ -21,6 +21,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var WaitingIcon = function WaitingIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-switcher');
 
 var Switcher = function Switcher(_ref) {
@@ -32,6 +42,8 @@ var Switcher = function Switcher(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$showLoader = _ref.showLoader,
       showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      _ref$waiting = _ref.waiting,
+      waiting = _ref$waiting === void 0 ? false : _ref$waiting,
       children = _ref.children,
       _ref$textSize = _ref.textSize,
       textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
@@ -41,7 +53,9 @@ var Switcher = function Switcher(_ref) {
   var isTouch = (0, _uiHelpers.detectTouch)();
   var isLeftContent = !!children && textPosition === 'left';
   var isRightContent = !!children && textPosition === 'right';
-  var isInteractiveDisabled = showLoader || disabled;
+  var isNoProcesses = disabled || waiting;
+  var isInteractiveDisabled = showLoader || isNoProcesses;
+  var isLoaderDisplayed = showLoader && !isNoProcesses;
   var handleChange = React.useCallback(function (e) {
     if (isInteractiveDisabled || !(0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
       return;
@@ -60,19 +74,23 @@ var Switcher = function Switcher(_ref) {
     })
   }, children), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
     className: cn('input', {
-      checked: checked,
-      disabled: disabled,
-      loaded: showLoader,
+      checked: checked && !waiting,
+      disabled: isNoProcesses,
+      loaded: showLoader && !waiting,
       'no-touch': !isTouch
     }),
     onClick: handleChange,
     onKeyDown: handleChange,
     tabIndex: isInteractiveDisabled ? undefined : 0
-  }), showLoader && !disabled && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+  }), isLoaderDisplayed && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn('loader')
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), /*#__PURE__*/React.createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.loader))), waiting ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('timer')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer)), /*#__PURE__*/React.createElement(WaitingIcon, {
+    className: cn('timer-icon')
+  })) : /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.pointer), {
     className: cn('pointer')
-  })), isRightContent && /*#__PURE__*/React.createElement("div", {
+  }))), isRightContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
       size: textSize
     })
@@ -90,6 +108,7 @@ Switcher.propTypes = {
   textPosition: PropTypes.oneOf(['left', 'right']),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  waiting: PropTypes.bool,
   showLoader: PropTypes.bool,
   onChange: PropTypes.func
 };

package/dist/lib/index.d.ts

@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';

package/dist/lib/index.js

@@ -225,6 +225,12 @@ Object.defineProperty(exports, "Select", {
     return _Select["default"];
   }
 });
+Object.defineProperty(exports, "Selector", {
+  enumerable: true,
+  get: function get() {
+    return _Selector["default"];
+  }
+});
 Object.defineProperty(exports, "selectReducer", {
   enumerable: true,
   get: function get() {
@@ -384,6 +390,8 @@ var _Search = _interopRequireDefault(require("./components/Search/Search"));
 
 var _Select = _interopRequireDefault(require("./components/Select/Select"));
 
+var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
+
 var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
 
 var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "files": [
     "dist",
     "styles"
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "67d1595c72454846b31ebcd4acc8f7550a5f0df3"
+  "gitHead": "0a8f8d140ed863cb8bb9f05e4226edcb7925c74d"
 }