@megafon/ui-core 5.7.1 → 5.9.0

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

@@ -145,3 +145,16 @@
 .mfui-switcher_disabled .mfui-switcher__content {
   color: var(--spbSky3);
 }
+.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked),
+.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__input:not(.mfui-switcher__input_checked):not(.mfui-switcher__input_disabled):hover {
+  background-color: var(--spbSky3);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__input_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky3);
+}
+.mfui-switcher_theme_on-gray .mfui-switcher__timer-icon {
+  fill: var(--spbSky3);
+}

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

@@ -12,11 +12,13 @@ export interface ISwitcherProps {
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Тема */
+    theme?: 'on-white' | 'on-gray';
     /** Управление состоянием вкл/выкл компонента */
     checked?: boolean;
     /** Состояние ожидание */
     waiting?: boolean;
-    /** сот */
+    /** Состояние отключения */
     disabled?: boolean;
     /** Состояние загрузки */
     showLoader?: boolean;

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

@@ -19,6 +19,8 @@ var cn = cnCreate('mfui-switcher');
 var Switcher = function Switcher(_ref) {
   var dataAttrs = _ref.dataAttrs,
       className = _ref.className,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'on-white' : _ref$theme,
       _ref$checked = _ref.checked,
       checked = _ref$checked === void 0 ? false : _ref$checked,
       _ref$disabled = _ref.disabled,
@@ -48,7 +50,8 @@ var Switcher = function Switcher(_ref) {
   }, [isInteractiveDisabled, onChange]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      disabled: disabled
+      disabled: disabled,
+      theme: theme
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
     className: cn('content', {
@@ -89,6 +92,7 @@ Switcher.propTypes = {
   className: PropTypes.string,
   textSize: PropTypes.oneOf(['small', 'medium']),
   textPosition: PropTypes.oneOf(['left', 'right']),
+  theme: PropTypes.oneOf(['on-white', 'on-gray']),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   waiting: PropTypes.bool,

package/dist/es/components/Tabs/Tabs.css

@@ -80,12 +80,20 @@
   left: auto;
   z-index: 0;
   border-radius: 8px;
-  background-color: var(--stcWhite);
+  overflow: hidden;
+  background-color: var(--base);
   -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
+.mfui-tabs__underline:before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--stcWhite20);
+}
 .mfui-tabs__arrow {
   position: absolute;
   top: 50%;
@@ -178,9 +186,9 @@
   padding-left: 8px;
 }
 .mfui-tabs__tab-inner_current {
-  color: var(--stcBlack);
+  color: var(--content);
   cursor: auto;
-  fill: var(--stcBlack);
+  fill: var(--content);
 }
 .mfui-tabs__tab-icon {
   width: 32px;

package/dist/es/components/TextField/i/textarea-resizer.svg

@@ -0,0 +1 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M1 11L11 1M7 11l4-4"/></svg>

package/dist/es/index.d.ts

@@ -7,9 +7,12 @@ export { default as Caption } from './components/Caption/Caption';
 export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
-export { default as Chip } from './components/Chip/Chip';
+export { default as Chip } from './components/Chips/Chip';
+export { default as Chips } from './components/Chips/Chips';
+export { default as ChipsDropdown } from './components/Chips/components/ChipsDropdown';
 export { default as Collapse } from './components/Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
+export { default as ContentView } from './components/ContentView/ContentView';
 export { default as Counter } from './components/Counter/Counter';
 export { default as CounterBadge } from './components/Badges/components/CounterBadge/CounterBadge';
 export { default as countGraphemes } from './components/TextField/utils/countGraphemes';
@@ -17,7 +20,6 @@ export { default as Day } from './components/Calendar/components/Day/Day';
 export { default as Grid } from './components/Grid/Grid';
 export { default as GridColumn } from './components/Grid/GridColumn';
 export { default as Header } from './components/Header/Header';
-export { default as helpers } from './components/Pagination/helpers';
 export { default as Link } from './components/Link/Link';
 export { default as List } from './components/List/List';
 export { default as ListItem } from './components/List/ListItem';
@@ -38,6 +40,11 @@ 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 Slider } from './components/Sliders/Slider/Slider';
+export { default as SliderDisplayValue } from './components/Sliders/components/SliderDisplayValue/SliderDisplayValue';
+export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
+export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
+export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as Switcher } from './components/Switcher/Switcher';

package/dist/es/index.js

@@ -7,9 +7,12 @@ export { default as Caption } from "./components/Caption/Caption";
 export { default as Carousel } from "./components/Carousel/Carousel";
 export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
-export { default as Chip } from "./components/Chip/Chip";
+export { default as Chip } from "./components/Chips/Chip";
+export { default as Chips } from "./components/Chips/Chips";
+export { default as ChipsDropdown } from "./components/Chips/components/ChipsDropdown";
 export { default as Collapse } from "./components/Collapse/Collapse";
 export { default as ContentArea } from "./components/ContentArea/ContentArea";
+export { default as ContentView } from "./components/ContentView/ContentView";
 export { default as Counter } from "./components/Counter/Counter";
 export { default as CounterBadge } from "./components/Badges/components/CounterBadge/CounterBadge";
 export { default as countGraphemes } from "./components/TextField/utils/countGraphemes";
@@ -17,7 +20,6 @@ export { default as Day } from "./components/Calendar/components/Day/Day";
 export { default as Grid } from "./components/Grid/Grid";
 export { default as GridColumn } from "./components/Grid/GridColumn";
 export { default as Header } from "./components/Header/Header";
-export { default as helpers } from "./components/Pagination/helpers";
 export { default as Link } from "./components/Link/Link";
 export { default as List } from "./components/List/List";
 export { default as ListItem } from "./components/List/ListItem";
@@ -38,6 +40,11 @@ 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 Slider } from "./components/Sliders/Slider/Slider";
+export { default as SliderDisplayValue } from "./components/Sliders/components/SliderDisplayValue/SliderDisplayValue";
+export { default as SliderRange } from "./components/Sliders/SliderRange/SliderRange";
+export { default as SliderRatio } from "./components/Sliders/SliderRatio/SliderRatio";
+export { default as SliderScale } from "./components/Sliders/components/SliderScale/SliderScale";
 export { default as Snackbar } from "./components/Snackbar/Snackbar";
 export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";
 export { default as Switcher } from "./components/Switcher/Switcher";

package/dist/lib/components/{Chip → Chips}/Chip.css

@@ -11,9 +11,6 @@
           align-items: center;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  min-width: -webkit-fit-content;
-  min-width: -moz-fit-content;
-  min-width: fit-content;
   padding: 8px 20px;
   border: none;
   border-radius: 20px;
@@ -43,6 +40,47 @@
 .mfui-chip:hover {
   background-color: var(--spbSky1);
 }
+.mfui-chip__inner {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.mfui-chip__counter {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: 6px;
+  color: var(--spbSky3);
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__counter {
+    margin-left: 4px;
+  }
+}
+.mfui-chip__icon,
+.mfui-chip__icon-arrow {
+  display: block;
+  width: 20px;
+  min-width: 20px;
+  max-height: 20px;
+}
+.mfui-chip__icon svg,
+.mfui-chip__icon-arrow svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.mfui-chip__icon {
+  margin-right: 6px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chip__icon {
+    margin-right: 4px;
+  }
+}
 .mfui-chip_disabled,
 .mfui-chip_disabled:hover {
   color: var(--spbSky3);
@@ -54,6 +92,10 @@
 .mfui-chip_disabled:hover svg {
   fill: var(--spbSky3);
 }
+.mfui-chip_disabled .mfui-chip__counter,
+.mfui-chip_disabled:hover .mfui-chip__counter {
+  color: var(--spbSky2);
+}
 .mfui-chip_checked,
 .mfui-chip_checked:hover {
   color: var(--stcWhite);
@@ -63,6 +105,10 @@
 .mfui-chip_checked:hover svg {
   fill: var(--stcWhite);
 }
+.mfui-chip_checked .mfui-chip__counter,
+.mfui-chip_checked:hover .mfui-chip__counter {
+  color: var(--stcWhite);
+}
 .mfui-chip_checked.mfui-chip_color_black,
 .mfui-chip_checked.mfui-chip_color_black:hover {
   color: var(--base);
@@ -72,6 +118,10 @@
 .mfui-chip_checked.mfui-chip_color_black:hover svg {
   fill: var(--base);
 }
+.mfui-chip_checked.mfui-chip_color_black .mfui-chip__counter,
+.mfui-chip_checked.mfui-chip_color_black:hover .mfui-chip__counter {
+  color: var(--base);
+}
 .mfui-chip_with-icon {
   padding-left: 16px;
 }
@@ -80,32 +130,3 @@
     padding-left: 8px;
   }
 }
-.mfui-chip__inner {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  white-space: nowrap;
-}
-.mfui-chip__icon {
-  display: block;
-  width: 20px;
-  min-width: 20px;
-  max-height: 20px;
-  margin-right: 6px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-chip__icon {
-    margin-right: 4px;
-  }
-}
-.mfui-chip__icon svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}

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

@@ -0,0 +1,74 @@
+import React, { Ref } from 'react';
+import * as PropTypes from 'prop-types';
+import './Chip.less';
+export declare type ChipIdType = number | string;
+export declare const ChipColors: {
+    readonly DEFAULT: "default";
+    readonly BLACK: "black";
+};
+export declare 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 interface IChipProps {
+    /** Идентификатор */
+    id: ChipIdType;
+    /** Набор цветов для компонента */
+    color?: ChipColorsType;
+    /** Отображение в отмеченном (зажатом) состоянии */
+    checked?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Иконка */
+    icon?: JSX.Element;
+    /** Значение счетчика */
+    counterValue?: number;
+    /** Стрелка вверх или вниз */
+    arrow?: ChipArrowType;
+    /** Обработчик нажатия */
+    onClick?: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+        icon?: string;
+        counter?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+        icon?: Record<string, string>;
+        counter?: Record<string, string>;
+        arrow?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: 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;

package/dist/lib/components/{Chip → Chips}/Chip.js

@@ -5,10 +5,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ChipPropType = exports.ChipArrow = exports.ChipColors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+require("core-js/modules/es.object.values.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -21,6 +23,36 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var ArrowDown = function ArrowDown(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M6 8h8l-4 5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+var ArrowUp = function ArrowUp(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 12H6l4-5z",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }));
+};
+
+var ChipColors = {
+  DEFAULT: 'default',
+  BLACK: 'black'
+};
+exports.ChipColors = ChipColors;
+var ChipArrow = {
+  UP: 'up',
+  DOWN: 'down'
+};
+exports.ChipArrow = ChipArrow;
 var cn = (0, _uiHelpers.cnCreate)('mfui-chip');
 
 var Chip = function Chip(_ref) {
@@ -32,6 +64,8 @@ var Chip = function Chip(_ref) {
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       icon = _ref.icon,
+      counterValue = _ref.counterValue,
+      arrow = _ref.arrow,
       onClick = _ref.onClick,
       children = _ref.children,
       className = _ref.className,
@@ -60,23 +94,31 @@ var Chip = function Chip(_ref) {
     className: cn('icon', [classes.icon])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
     className: cn('inner', [classes.inner])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children));
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children), !!counterValue && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({
+    className: cn('counter', [classes.counter])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('icon-arrow')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/_react["default"].createElement(ArrowUp, null) : /*#__PURE__*/_react["default"].createElement(ArrowDown, null)));
 };
 
-Chip.propTypes = {
-  id: PropTypes.string.isRequired,
-  color: PropTypes.oneOf(['default', 'black']),
+var ChipPropType = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.oneOf(Object.values(ChipColors)),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   icon: PropTypes.element,
+  counterValue: PropTypes.number,
+  arrow: PropTypes.oneOf(Object.values(ChipArrow)),
+  onClick: PropTypes.func,
+  children: PropTypes.node,
   className: PropTypes.string,
   classes: PropTypes.objectOf(PropTypes.string),
   dataAttrs: PropTypes.objectOf(PropTypes.object),
-  onClick: PropTypes.func,
-  children: PropTypes.node,
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])])
 };
+exports.ChipPropType = ChipPropType;
+Chip.propTypes = ChipPropType;
 var _default = Chip;
 exports["default"] = _default;

package/dist/lib/components/Chips/Chips.css

@@ -0,0 +1,19 @@
+.mfui-chips {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 12px;
+  width: 100%;
+}
+@media screen and (max-width: 767px) {
+  .mfui-chips {
+    gap: 8px;
+  }
+}
+.mfui-chips_hidden {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minMax(0, -webkit-min-content));
+  grid-template-columns: repeat(auto-fit, minMax(0, min-content));
+}

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
+import './Chips.less';
+export interface IChipsProps {
+    /** Массив элементов */
+    items: IChipProps[];
+    /** Значение */
+    value: ChipIdType;
+    /** Цвет активного элемента */
+    color?: ChipColorsType;
+    /** Количество отображаемых элементов на всех разрешениях экрана */
+    visibleItemsCountAll?: number;
+    /** Количество отображаемых элементов на разрешении 768 - 1023 */
+    visibleItemsCountTablet?: number;
+    /** Количество отображаемых элементов на разрешении 1024 - 1279 */
+    visibleItemsCountDesktop?: number;
+    /** Количество отображаемых элементов на разрешении 1280+ */
+    visibleItemsCountWide?: number;
+    /** Название дополнительной кнопки */
+    moreTitle?: string;
+    /** Обработчик изменения значения */
+    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+}
+declare const Chips: React.FC<IChipsProps>;
+export default Chips;

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

@@ -0,0 +1,159 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _throttleTime = _interopRequireDefault(require("@megafon/ui-shared/src/constants/throttleTime"));
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Chip = _interopRequireWildcard(require("./Chip"));
+
+var _ChipsDropdown = _interopRequireDefault(require("./components/ChipsDropdown"));
+
+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 DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
+    DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START,
+    MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START;
+var cn = (0, _uiHelpers.cnCreate)('mfui-chips');
+
+var Chips = function Chips(_ref) {
+  var items = _ref.items,
+      value = _ref.value,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      _ref$moreTitle = _ref.moreTitle,
+      moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
+      visibleItemsCountAll = _ref.visibleItemsCountAll,
+      visibleItemsCountTablet = _ref.visibleItemsCountTablet,
+      visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
+      visibleItemsCountWide = _ref.visibleItemsCountWide,
+      onChange = _ref.onChange,
+      className = _ref.className;
+
+  var _React$useState = _react["default"].useState(value),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      selectedId = _React$useState2[0],
+      setSelectedId = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(visibleItemsCountAll),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      visibleItemsCount = _React$useState4[0],
+      setVisibleItemsCount = _React$useState4[1];
+
+  var _React$useState5 = _react["default"].useState([]),
+      _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+      visibleItems = _React$useState6[0],
+      setVisibleItems = _React$useState6[1];
+
+  var _React$useState7 = _react["default"].useState(null),
+      _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+      hiddenItems = _React$useState8[0],
+      setHiddenItems = _React$useState8[1];
+
+  var handleClick = _react["default"].useCallback(function (e, id) {
+    e.persist();
+    setSelectedId(id);
+    onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
+  }, [onChange]);
+
+  _react["default"].useEffect(function () {
+    var resizeHandler = function resizeHandler() {
+      var windowWidth = window.innerWidth;
+
+      if (visibleItemsCountWide && windowWidth >= DESKTOP_MIDDLE_START) {
+        setVisibleItemsCount(visibleItemsCountWide);
+        return;
+      }
+
+      if (visibleItemsCountDesktop && windowWidth >= DESKTOP_SMALL_START && windowWidth < DESKTOP_MIDDLE_START) {
+        setVisibleItemsCount(visibleItemsCountDesktop);
+        return;
+      }
+
+      if (visibleItemsCountTablet && windowWidth >= MOBILE_BIG_START && windowWidth < DESKTOP_SMALL_START) {
+        setVisibleItemsCount(visibleItemsCountTablet);
+        return;
+      }
+
+      setVisibleItemsCount(visibleItemsCountAll);
+    };
+
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [visibleItemsCountAll, visibleItemsCountDesktop, visibleItemsCountTablet, visibleItemsCountWide]);
+
+  _react["default"].useEffect(function () {
+    if (visibleItemsCount && items.length > visibleItemsCount) {
+      setVisibleItems(items.slice(0, visibleItemsCount));
+      setHiddenItems(items.slice(visibleItemsCount));
+    } else {
+      setVisibleItems(items);
+      setHiddenItems(null);
+    }
+  }, [items, visibleItemsCount]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn({
+      hidden: !!hiddenItems
+    }, [className])
+  }, visibleItems.map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_Chip["default"], (0, _extends2["default"])({
+      key: item.id
+    }, item, {
+      checked: item.id === selectedId,
+      color: color,
+      onClick: handleClick
+    }), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+  }), !!hiddenItems && /*#__PURE__*/_react["default"].createElement(_ChipsDropdown["default"], {
+    value: selectedId,
+    items: hiddenItems,
+    moreTitle: moreTitle,
+    color: color,
+    onClick: handleClick
+  }));
+};
+
+Chips.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(_Chip.ChipPropType).isRequired).isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  color: PropTypes.oneOf(Object.values(_Chip.ChipColors)),
+  visibleItemsCountAll: PropTypes.number,
+  visibleItemsCountTablet: PropTypes.number,
+  visibleItemsCountDesktop: PropTypes.number,
+  visibleItemsCountWide: PropTypes.number,
+  moreTitle: PropTypes.string,
+  onChange: PropTypes.func,
+  className: PropTypes.string
+};
+var _default = Chips;
+exports["default"] = _default;