@megafon/ui-core 5.18.1 → 6.0.0-beta.2

package/dist/es/components/Carousel/Carousel.js

@@ -2,26 +2,36 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-var _defaultSlidesSetting;
-
-import "core-js/modules/es.array.is-array.js";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import * as React from 'react';
 import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
-import * as PropTypes from 'prop-types';
-import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
+import { Autoplay, Pagination, EffectFade } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import throttleTime from "../../constants/throttleTime";
 import usePrevious from "../../hooks/usePrevious";
-import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
+import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import useGradient from "./useGradient";
 import "./Carousel.css";
-SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',
   GREEN: 'green'
@@ -41,7 +51,6 @@ var GradientTheme = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2'
 };
-
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -50,87 +59,80 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
     stopOnLastSlide: true
   };
 };
-
-var defaultSlidesSettings = (_defaultSlidesSetting = {}, _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_SMALL_START, {
+var defaultSlidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_BIG_START, {
+}), breakpoints.MOBILE_BIG_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), _defineProperty(_defaultSlidesSetting, breakpoints.DESKTOP_MIDDLE_START, {
+}), breakpoints.DESKTOP_MIDDLE_START, {
   slidesPerView: 4,
   spaceBetween: 20
-}), _defaultSlidesSetting);
+});
 var cn = cnCreate('mfui-carousel');
-
 var Carousel = function Carousel(_ref) {
   var rootRef = _ref.rootRef,
-      className = _ref.className,
-      _ref$classes = _ref.classes;
-  _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
-  var rootClass = _ref$classes.root,
-      innerIndentsClass = _ref$classes.innerIndents,
-      prevClass = _ref$classes.prev,
-      nextClass = _ref$classes.next,
-      containerClass = _ref$classes.container,
-      containerModifier = _ref$classes.containerModifier,
-      slideClass = _ref$classes.slide,
-      dataAttrs = _ref.dataAttrs,
-      _ref$slidesSettings = _ref.slidesSettings,
-      slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
-      _ref$autoPlay = _ref.autoPlay,
-      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-      _ref$autoPlayDelay = _ref.autoPlayDelay,
-      autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
-      _ref$loop = _ref.loop,
-      loop = _ref$loop === void 0 ? false : _ref$loop,
-      _ref$transitionSpeed = _ref.transitionSpeed,
-      transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
-      threshold = _ref.threshold,
-      _ref$initialSlide = _ref.initialSlide,
-      initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
-      _ref$disableTouchMove = _ref.disableTouchMove,
-      disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
-      _ref$centeredSlides = _ref.centeredSlides,
-      centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
-      _ref$navTheme = _ref.navTheme,
-      navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
-      _ref$effectTheme = _ref.effectTheme,
-      effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
-      noSwipingSelector = _ref.noSwipingSelector,
-      children = _ref.children,
-      pagination = _ref.pagination,
-      getSwiper = _ref.getSwiper,
-      onNextClick = _ref.onNextClick,
-      onPrevClick = _ref.onPrevClick,
-      onChange = _ref.onChange,
-      _ref$slideToClickedSl = _ref.slideToClickedSlide,
-      slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
-      _ref$gradient = _ref.gradient,
-      gradient = _ref$gradient === void 0 ? false : _ref$gradient,
-      _ref$gradientColor = _ref.gradientColor,
-      gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
-
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    _ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
+    rootClass = _ref$classes2.root,
+    innerIndentsClass = _ref$classes2.innerIndents,
+    prevClass = _ref$classes2.prev,
+    nextClass = _ref$classes2.next,
+    containerClass = _ref$classes2.container,
+    containerModifier = _ref$classes2.containerModifier,
+    slideClass = _ref$classes2.slide,
+    dataAttrs = _ref.dataAttrs,
+    _ref$slidesSettings = _ref.slidesSettings,
+    slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    _ref$autoPlayDelay = _ref.autoPlayDelay,
+    autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop,
+    _ref$transitionSpeed = _ref.transitionSpeed,
+    transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
+    threshold = _ref.threshold,
+    _ref$initialSlide = _ref.initialSlide,
+    initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
+    _ref$disableTouchMove = _ref.disableTouchMove,
+    disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
+    _ref$centeredSlides = _ref.centeredSlides,
+    centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
+    _ref$navTheme = _ref.navTheme,
+    navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+    _ref$effectTheme = _ref.effectTheme,
+    effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
+    noSwipingSelector = _ref.noSwipingSelector,
+    children = _ref.children,
+    pagination = _ref.pagination,
+    getSwiper = _ref.getSwiper,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick,
+    onChange = _ref.onChange,
+    _ref$slideToClickedSl = _ref.slideToClickedSlide,
+    slideToClickedSlide = _ref$slideToClickedSl === void 0 ? false : _ref$slideToClickedSl,
+    _ref$gradient = _ref.gradient,
+    gradient = _ref$gradient === void 0 ? false : _ref$gradient,
+    _ref$gradientColor = _ref.gradientColor,
+    gradientColor = _ref$gradientColor === void 0 ? 'default' : _ref$gradientColor;
   var _React$useState = React.useState(),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      swiperInstance = _React$useState2[0],
-      setSwiperInstance = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    swiperInstance = _React$useState2[0],
+    setSwiperInstance = _React$useState2[1];
   var _React$useState3 = React.useState(true),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isBeginning = _React$useState4[0],
-      setBeginning = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isBeginning = _React$useState4[0],
+    setBeginning = _React$useState4[1];
   var _React$useState5 = React.useState(false),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isEnd = _React$useState6[0],
-      setEnd = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isEnd = _React$useState6[0],
+    setEnd = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isLocked = _React$useState8[0],
-      setLocked = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isLocked = _React$useState8[0],
+    setLocked = _React$useState8[1];
   var childrenLen = Array.isArray(children) ? children.length : 0;
   var prevChildrenLen = usePrevious(childrenLen) || 0;
   var isChildrenLenDiff = childrenLen !== prevChildrenLen;
@@ -141,14 +143,12 @@ var Carousel = function Carousel(_ref) {
   });
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
-        autoplay = _ref2.autoplay;
-
+      autoplay = _ref2.autoplay;
     if (_typeof(params.autoplay) !== 'object' || !autoplay.running) {
       return;
     }
-
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
+    // eslint-disable-next-line no-param-reassign
     params.autoplay.delay = autoPlayDelay * 3;
     autoplay.start();
   }, [autoPlayDelay]);
@@ -156,7 +156,6 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -165,7 +164,6 @@ var Carousel = function Carousel(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     increaseAutoplayDelay(swiperInstance);
@@ -180,9 +178,8 @@ var Carousel = function Carousel(_ref) {
   }, []);
   var handleReachEnd = React.useCallback(function (_ref3) {
     var params = _ref3.params,
-        autoplay = _ref3.autoplay;
+      autoplay = _ref3.autoplay;
     setEnd(true);
-
     if (!params.loop && autoplay.running) {
       autoplay.stop();
     }
@@ -193,41 +190,45 @@ var Carousel = function Carousel(_ref) {
   }, []);
   var handleSlideChange = React.useCallback(function (_ref4) {
     var realIndex = _ref4.realIndex,
-        previousIndex = _ref4.previousIndex,
-        params = _ref4.params;
+      previousIndex = _ref4.previousIndex,
+      params = _ref4.params;
     onChange === null || onChange === void 0 ? void 0 : onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
-
   var handleRootClick = function handleRootClick(e) {
     var elem = e.target;
     var isBullet = elem.classList.contains('swiper-pagination-bullet');
-
     if (isBullet && swiperInstance) {
       increaseAutoplayDelay(swiperInstance);
     }
   };
-
   var handleNavDisplay = function handleNavDisplay(swiper) {
     setBeginning(swiper.isBeginning);
     setEnd(swiper.isEnd);
     setLocked(swiper.isBeginning && swiper.isEnd);
-  }; // https://github.com/nolimits4web/Swiper/issues/2346
-
-
+  };
+  // https://github.com/nolimits4web/Swiper/issues/2346
   var handleSwiperResize = React.useCallback(function () {
     throttle(function (swiper) {
       handleNavDisplay(swiper);
-
       if (swiper.params.slidesPerView === SlidesPerView.AUTO) {
-        swiper.slides.css('width', '');
+        var _iterator = _createForOfIteratorHelper(swiper.slides),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var slide = _step.value;
+            slide.style.width = '';
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
       }
     }, throttleTime.resize);
   }, []);
-
   var handleSlideFocus = function handleSlideFocus(index) {
     return function (e) {
       var _a;
-
       if (loop) {
         // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
         // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
@@ -238,26 +239,21 @@ var Carousel = function Carousel(_ref) {
         swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(realIndex);
         return;
       }
-
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
     };
   };
-
   var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
     if (e.nativeEvent.target.closest(".".concat(cn()))) {
       e.nativeEvent.preventDefault();
     }
   };
-
   React.useEffect(function () {
     if (!swiperInstance) {
       return undefined;
     }
-
     var windowResizeHandler = function windowResizeHandler() {
       return handleNavDisplay(swiperInstance);
     };
-
     var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
@@ -286,8 +282,9 @@ var Carousel = function Carousel(_ref) {
       'gradient-color': gradient && gradientColor
     }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
-    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
     watchOverflow: true,
+    modules: [Autoplay, Pagination, EffectFade],
     loop: loop,
     pagination: _extends({
       clickable: true
@@ -344,58 +341,4 @@ var Carousel = function Carousel(_ref) {
     theme: ArrowTheme.PURPLE
   }));
 };
-
-Carousel.propTypes = {
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    innerIndents: PropTypes.string,
-    container: PropTypes.string,
-    containerModifier: PropTypes.string,
-    prev: PropTypes.string,
-    next: PropTypes.string,
-    slide: PropTypes.string
-  }),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    slider: PropTypes.objectOf(PropTypes.string.isRequired),
-    prev: PropTypes.objectOf(PropTypes.string.isRequired),
-    next: PropTypes.objectOf(PropTypes.string.isRequired),
-    slide: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  slidesSettings: PropTypes.objectOf(checkBreakpointsPropTypes({
-    slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
-    spaceBetween: PropTypes.number.isRequired,
-    slidesPerGroup: PropTypes.number
-  })),
-  pagination: PropTypes.shape({
-    el: PropTypes.string,
-    bulletElement: PropTypes.string,
-    dynamicBullets: PropTypes.string,
-    clickable: PropTypes.bool,
-    renderBullet: PropTypes.func,
-    bulletClass: PropTypes.string,
-    bulletActiveClass: PropTypes.string,
-    modifierClass: PropTypes.string
-  }),
-  loop: PropTypes.bool,
-  threshold: PropTypes.number,
-  autoPlay: PropTypes.bool,
-  autoPlayDelay: PropTypes.number,
-  disableTouchMove: PropTypes.bool,
-  centeredSlides: PropTypes.bool,
-  transitionSpeed: PropTypes.number,
-  navTheme: PropTypes.oneOf(Object.values(NavTheme)),
-  effectTheme: PropTypes.oneOf(Object.values(EffectTheme)),
-  noSwipingSelector: PropTypes.string,
-  getSwiper: PropTypes.func,
-  onNextClick: PropTypes.func,
-  onPrevClick: PropTypes.func,
-  onChange: PropTypes.func,
-  gradient: PropTypes.oneOfType([PropTypes.bool]),
-  gradientColor: PropTypes.oneOf(Object.values(GradientTheme))
-};
 export default Carousel;

package/dist/es/components/Carousel/checkBreakpointsPropTypes.d.ts

@@ -1,4 +1,4 @@
-declare type ObjectType = {
+type ObjectType = {
     [key: string]: unknown;
 };
 declare const checkBreakpointsPropTypes: (settingsPropTypes: ObjectType) => (object: ObjectType, key: string, componentName: string) => Error | null;

package/dist/es/components/Carousel/checkBreakpointsPropTypes.js

@@ -1,17 +1,14 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-import "core-js/modules/es.number.constructor.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.number.constructor.js";
 import * as PropTypes from 'prop-types';
-
 var checkBreakpointsPropTypes = function checkBreakpointsPropTypes(settingsPropTypes) {
   return function (object, key, componentName) {
     if (!object[Number(key)]) {
       return new Error("Invalid key name 'breakpoints.".concat(key, "' of type ").concat(_typeof(key), " supplied to ").concat(componentName, ", expected number"));
     }
-
     PropTypes.checkPropTypes(settingsPropTypes, object[key], 'prop', componentName);
     return null;
   };
 };
-
 export default checkBreakpointsPropTypes;

package/dist/es/components/Carousel/useGradient.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import SwiperCore from 'swiper';
 import { SlidesSettingsType } from './Carousel';
-declare type SwiperConfig = {
+type SwiperConfig = {
     instance: SwiperCore | undefined;
     slidesSettings: SlidesSettingsType;
     isLocked: boolean;

package/dist/es/components/Carousel/useGradient.js

@@ -5,30 +5,26 @@ import throttle from 'lodash.throttle';
 import throttleTime from "../../constants/throttleTime";
 export default (function (gradient, swiper) {
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      slidesGap = _useState2[0],
-      setSlidesGap = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    slidesGap = _useState2[0],
+    setSlidesGap = _useState2[1];
   var swiperInstance = swiper.instance,
-      slidesSettings = swiper.slidesSettings,
-      isLocked = swiper.isLocked;
+    slidesSettings = swiper.slidesSettings,
+    isLocked = swiper.isLocked;
   var isGradientEnable = gradient && !isLocked;
   useEffect(function () {
     var isTouch = window.innerWidth < breakpoints.DESKTOP_SMALL_START;
     var isPossibleToSetGap = isGradientEnable && swiperInstance && !isTouch;
-
     if (!isPossibleToSetGap) {
       return undefined;
     }
-
-    var setCurrenSlidesGap = function setCurrenSlidesGap() {
-      var currentBreakpoint = swiperInstance.getBreakpoint(slidesSettings);
+    var setCurrentSlidesGap = function setCurrentSlidesGap() {
+      var currentBreakpoint = swiperInstance.currentBreakpoint;
       var currentSpaceBetweenValue = slidesSettings[currentBreakpoint].spaceBetween;
       setSlidesGap(currentSpaceBetweenValue);
     };
-
-    setCurrenSlidesGap();
-    var throttledHandler = throttle(setCurrenSlidesGap, throttleTime.resize);
+    setCurrentSlidesGap();
+    var throttledHandler = throttle(setCurrentSlidesGap, throttleTime.resize);
     window.addEventListener('resize', throttledHandler);
     return function () {
       window.removeEventListener('resize', throttledHandler);

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import './Checkbox.less';
+import * as React from 'react';
+import './Checkbox.scss';
 export interface ICheckboxProps {
     /** Цвет чекбокса */
     color?: 'dark' | 'light';
@@ -31,8 +31,8 @@ export interface ICheckboxProps {
     /** Отобразить компонент в состоянии ошибки */
     error?: boolean;
     /** Дополнительный контент справа */
-    extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string;
-    children: JSX.Element[] | Element[] | JSX.Element | Element | string;
+    extraContent?: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
+    children: JSX.Element[] | Element[] | JSX.Element | Element | string | React.ReactNode;
     /** Обработчик изменения значения */
     onChange?: (checked: boolean) => void;
 }

package/dist/es/components/Checkbox/Checkbox.js

@@ -1,11 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.function.name.js";
-import React, { useState, useEffect } from 'react';
+import * as React from 'react';
 import { checkEventIsClickOrEnterPress, cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./Checkbox.css";
-
 var CheckedIcon = function CheckedIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -13,45 +11,39 @@ var CheckedIcon = function CheckedIcon(props) {
     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 CHANGE_KEY = 'change';
 var cn = cnCreate('mfui-checkbox');
-
 var Checkbox = function Checkbox(_ref) {
   var className = _ref.className,
-      _ref$fontSize = _ref.fontSize,
-      fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
-      name = _ref.name,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'dark' : _ref$color,
-      value = _ref.value,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      children = _ref.children,
-      extraContent = _ref.extraContent,
-      dataAttrs = _ref.dataAttrs,
-      classes = _ref.classes,
-      onChange = _ref.onChange;
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+    name = _ref.name,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'dark' : _ref$color,
+    value = _ref.value,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    children = _ref.children,
+    extraContent = _ref.extraContent,
+    dataAttrs = _ref.dataAttrs,
+    classes = _ref.classes,
+    onChange = _ref.onChange;
   var isTouch = detectTouch();
-
-  var _useState = useState(checked),
-      _useState2 = _slicedToArray(_useState, 2),
-      isChecked = _useState2[0],
-      setIsChecked = _useState2[1];
-
-  useEffect(function () {
+  var _React$useState = React.useState(checked),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isChecked = _React$useState2[0],
+    setIsChecked = _React$useState2[1];
+  React.useEffect(function () {
     setIsChecked(checked);
   }, [checked]);
-
   var handleChange = function handleChange(e) {
     if (checkEventIsClickOrEnterPress(e) || e.type === CHANGE_KEY) {
       setIsChecked(!isChecked);
       onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked);
     }
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn('', {
       'font-size': fontSize,
@@ -87,25 +79,4 @@ var Checkbox = function Checkbox(_ref) {
     className: cn('extra-content')
   }), extraContent)));
 };
-
-Checkbox.propTypes = {
-  className: PropTypes.string,
-  fontSize: PropTypes.oneOf(['regular', 'small']),
-  color: PropTypes.oneOf(['dark', 'light']),
-  name: PropTypes.string,
-  value: PropTypes.string,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    inner: PropTypes.objectOf(PropTypes.string.isRequired),
-    input: PropTypes.objectOf(PropTypes.string.isRequired),
-    customInput: PropTypes.objectOf(PropTypes.string.isRequired),
-    extraContent: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
-  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
-  onChange: PropTypes.func
-};
 export default Checkbox;

package/dist/es/components/Chips/Chip.d.ts

@@ -1,17 +1,16 @@
-import React, { Ref } from 'react';
-import * as PropTypes from 'prop-types';
-import './Chip.less';
-export declare type ChipIdType = number | string;
+import * as React from 'react';
+import './Chip.scss';
+export type ChipIdType = number | string;
 export declare const ChipColors: {
     readonly DEFAULT: "default";
     readonly BLACK: "black";
 };
-export declare type ChipColorsType = typeof ChipColors[keyof typeof ChipColors];
+export type ChipColorsType = (typeof ChipColors)[keyof typeof ChipColors];
 export declare const ChipArrow: {
     readonly UP: "up";
     readonly DOWN: "down";
 };
-export declare type ChipArrowType = typeof ChipArrow[keyof typeof ChipArrow];
+export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
 export interface IChipProps {
     /** Идентификатор */
     id: ChipIdType;
@@ -49,26 +48,7 @@ export interface IChipProps {
         arrow?: Record<string, string>;
     };
     /** Ссылка на элемент */
-    rootRef?: Ref<HTMLButtonElement>;
+    rootRef?: React.Ref<HTMLButtonElement>;
 }
 declare const Chip: React.FC<IChipProps>;
-export declare const ChipPropType: {
-    id: PropTypes.Validator<string | number>;
-    color: PropTypes.Requireable<"default" | "black">;
-    checked: PropTypes.Requireable<boolean>;
-    disabled: PropTypes.Requireable<boolean>;
-    icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
-    counterValue: PropTypes.Requireable<number>;
-    arrow: PropTypes.Requireable<"down" | "up">;
-    onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    className: PropTypes.Requireable<string>;
-    classes: PropTypes.Requireable<{
-        [x: string]: string | null | undefined;
-    }>;
-    dataAttrs: PropTypes.Requireable<{
-        [x: string]: object | null | undefined;
-    }>;
-    rootRef: PropTypes.Requireable<any>;
-};
 export default Chip;