@megafon/ui-core 8.4.0 → 8.5.0

package/dist/es/components/Chips/Chip.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width: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{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.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{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.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{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.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}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width: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{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.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{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.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{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.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}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}

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

@@ -14,6 +14,8 @@ export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
 export interface IChipProps {
     /** Идентификатор */
     id: ChipIdType;
+    /** Заголовок */
+    title?: string;
     /** Набор цветов для компонента */
     color?: ChipColorsType;
     /** Отображение в отмеченном (зажатом) состоянии */
@@ -35,6 +37,7 @@ export interface IChipProps {
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         root?: string;
+        checked?: string;
         inner?: string;
         icon?: string;
         counter?: string;

package/dist/es/components/Chips/Chip.js

@@ -31,6 +31,7 @@ export var ChipArrow = {
 var cn = cnCreate('mfui-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
+    title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$checked = _ref.checked,
@@ -47,6 +48,7 @@ var Chip = function Chip(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
+  var checkedClass = checked ? classes.checked : undefined;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -57,7 +59,7 @@ var Chip = function Chip(_ref) {
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
-    }, [className, classes.root])
+    }, [className, classes.root, checkedClass])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
     onClick: handleClick,
@@ -66,7 +68,7 @@ var Chip = function Chip(_ref) {
     className: cn('icon', [classes.icon])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), icon), /*#__PURE__*/React.createElement("span", _extends({
     className: cn('inner', [classes.inner])
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.createElement("span", _extends({
     className: cn('counter', [classes.counter])
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.counter)), counterValue), !!arrow && /*#__PURE__*/React.createElement("div", _extends({
     className: cn('icon-arrow')

package/dist/es/components/Chips/Chips.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.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))}
+h1,h2,h3,h4,h5{margin:0}.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))}.mfui-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -4,10 +4,16 @@ import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
     items: IChipProps[];
-    /** Значение */
-    value: ChipIdType;
+    /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
+    value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Горизонтальное выравнивание */
+    align?: 'left' | 'center';
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
+    isScrollable?: boolean;
     /** Количество отображаемых элементов на всех разрешениях экрана */
     visibleItemsCountAll?: number;
     /** Количество отображаемых элементов на разрешении 768 - 1023 */
@@ -22,6 +28,14 @@ export interface IChipsProps {
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Chips: React.FC<IChipsProps>;
 export default Chips;

package/dist/es/components/Chips/Chips.js

@@ -1,13 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.slice.js";
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import * as React from 'react';
-import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import throttleTime from "../../constants/throttleTime";
 import Chip from "./Chip";
-import ChipsDropdown from "./components/ChipsDropdown";
+import ChipsDropdown from "./components/ChipsDropdown/ChipsDropdown";
+import ChipsScrollPanel from "./components/ChipsScrollPanel/ChipsScrollPanel";
 import "./Chips.css";
 var DESKTOP_SMALL_START = breakpoints.DESKTOP_SMALL_START,
   DESKTOP_MIDDLE_START = breakpoints.DESKTOP_MIDDLE_START,
@@ -24,12 +35,20 @@ var Chips = function Chips(_ref) {
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
     visibleItemsCountWide = _ref.visibleItemsCountWide,
+    _ref$isScrollable = _ref.isScrollable,
+    isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    align = _ref.align,
     onChange = _ref.onChange,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
   var _React$useState = React.useState(value),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    selectedId = _React$useState2[0],
-    setSelectedId = _React$useState2[1];
+    innerSelectedId = _React$useState2[0],
+    setInnerSelectedId = _React$useState2[1];
   var _React$useState3 = React.useState(visibleItemsCountAll),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     visibleItemsCount = _React$useState4[0],
@@ -42,13 +61,40 @@ var Chips = function Chips(_ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     hiddenItems = _React$useState8[0],
     setHiddenItems = _React$useState8[1];
+  var _React$useState9 = React.useState(isScrollable && !visibleItemsCount),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isScrollableMode = _React$useState10[0],
+    setIsScrollableMode = _React$useState10[1];
+  var selectedId = isControlled ? value : innerSelectedId;
   var handleClick = React.useCallback(function (e, id) {
     e.persist();
-    if (id) {
-      setSelectedId(id);
+    if (id && id !== selectedId) {
+      !isControlled && setInnerSelectedId(id);
       onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
     }
-  }, [onChange]);
+  }, [isControlled, onChange, selectedId]);
+  var renderItems = function renderItems() {
+    if (isScrollableMode) {
+      return /*#__PURE__*/React.createElement(ChipsScrollPanel, {
+        value: selectedId,
+        items: visibleItems,
+        color: color,
+        onClick: handleClick
+      });
+    }
+    return visibleItems.map(function (_a) {
+      var id = _a.id,
+        children = _a.children,
+        rest = __rest(_a, ["id", "children"]);
+      return /*#__PURE__*/React.createElement(Chip, _extends({
+        key: id,
+        id: id,
+        checked: id === selectedId,
+        color: color,
+        onClick: handleClick
+      }, rest), !!children && children);
+    });
+  };
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
       var windowWidth = window.innerWidth;
@@ -82,19 +128,15 @@ var Chips = function Chips(_ref) {
       setHiddenItems(null);
     }
   }, [items, visibleItemsCount]);
-  return /*#__PURE__*/React.createElement("div", {
+  React.useEffect(function () {
+    setIsScrollableMode(isScrollable && !visibleItemsCount);
+  }, [isScrollable, visibleItemsCount]);
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      hidden: !!hiddenItems
-    }, [className])
-  }, visibleItems.map(function (item) {
-    return /*#__PURE__*/React.createElement(Chip, _extends({
-      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.createElement(ChipsDropdown, {
+      hidden: !!hiddenItems,
+      align: align
+    }, [className, classes.root])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderItems(), !!hiddenItems && /*#__PURE__*/React.createElement(ChipsDropdown, {
     value: selectedId,
     items: hiddenItems,
     moreTitle: moreTitle,

package/dist/{lib/components/Chips/components → es/components/Chips/components/ChipsDropdown}/ChipsDropdown.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../Chip';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
     moreTitle: string;
-    value: ChipIdType;
+    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
     onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;

package/dist/es/components/Chips/components/{ChipsDropdown.js → ChipsDropdown/ChipsDropdown.js}

@@ -5,7 +5,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.to-string.js";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import Chip from "../Chip";
+import Chip from "../../Chip";
 import "./ChipsDropdown.css";
 var cn = cnCreate('mfui-chips-dropdown');
 var ChipsDropdown = function ChipsDropdown(_ref) {
@@ -71,16 +71,19 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/React.createElement("div", {
     className: cn('list-inner')
   }, items.map(function (item, key) {
+    var children = item.children,
+      title = item.title,
+      icon = item.icon;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: cn('list-item', {
-        'with-icon': !!item.icon
+        'with-icon': !!icon
       }),
       onClick: handleItemClick(item),
       onKeyDown: handleItemClick(item)
-    }, !!(item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
+    }, !!icon && /*#__PURE__*/React.createElement("span", {
       className: cn('icon')
-    }, item.icon), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+    }, icon), children || title);
   }))));
 };
 export default ChipsDropdown;

package/dist/es/components/Chips/components/ChipsScrollPanel/ChipsScrollPanel.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-scroll-panel{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.mfui-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-chips-scroll-panel__inner{gap:8px}}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import './ChipsScrollPanel.scss';
+export interface IChipsScrollPanelProps {
+    value?: ChipIdType;
+    items: IChipProps[];
+    color: ChipColorsType;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+}
+declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;
+export default ChipsScrollPanel;

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

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

package/dist/es/index.d.ts

@@ -10,7 +10,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
 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 ChipsDropdown } from './components/Chips/components/ChipsDropdown/ChipsDropdown';
+export { default as ChipsScrollPanel } from './components/Chips/components/ChipsScrollPanel/ChipsScrollPanel';
 export { default as Collapse } from './components/_Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
 export { default as ContentView } from './components/ContentView/ContentView';

package/dist/es/index.js

@@ -10,7 +10,8 @@ export { default as Checkbox } from "./components/Checkbox/Checkbox";
 export { default as checkBreakpointsPropTypes } from "./components/Carousel/checkBreakpointsPropTypes";
 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 ChipsDropdown } from "./components/Chips/components/ChipsDropdown/ChipsDropdown";
+export { default as ChipsScrollPanel } from "./components/Chips/components/ChipsScrollPanel/ChipsScrollPanel";
 export { default as Collapse } from "./components/_Collapse/Collapse";
 export { default as ContentArea } from "./components/ContentArea/ContentArea";
 export { default as ContentView } from "./components/ContentView/ContentView";

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width: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{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.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{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.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{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.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}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-chip{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:20px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);overflow:hidden;padding:8px 20px;text-align:center;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;outline:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s}.mfui-chip svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-chip{padding:4px 12px}}.mfui-chip:hover{background-color:var(--spbSky1)}.mfui-chip__inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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;color:var(--spbSky3);margin-left:6px}@media screen and (max-width:767px){.mfui-chip__counter{margin-left:4px}}.mfui-chip__icon,.mfui-chip__icon-arrow{display:block;max-height:20px;min-width:20px;width:20px}.mfui-chip__icon svg,.mfui-chip__icon-arrow svg{display:block;height:100%;width: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{background-color:var(--spbSky0);color:var(--spbSky3);cursor:default;pointer-events:none}.mfui-chip_disabled svg,.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{background-color:var(--night);color:var(--stcWhite)}.mfui-chip_checked svg,.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{background-color:var(--content);color:var(--base)}.mfui-chip_checked.mfui-chip_color_black svg,.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}@media screen and (max-width:767px){.mfui-chip_with-icon{padding-left:8px}}

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

@@ -14,6 +14,8 @@ export type ChipArrowType = (typeof ChipArrow)[keyof typeof ChipArrow];
 export interface IChipProps {
     /** Идентификатор */
     id: ChipIdType;
+    /** Заголовок */
+    title?: string;
     /** Набор цветов для компонента */
     color?: ChipColorsType;
     /** Отображение в отмеченном (зажатом) состоянии */
@@ -35,6 +37,7 @@ export interface IChipProps {
     /** Дополнительные классы для внутренних элементов */
     classes?: {
         root?: string;
+        checked?: string;
         inner?: string;
         icon?: string;
         counter?: string;

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

@@ -40,6 +40,7 @@ var ChipArrow = exports.ChipArrow = {
 var cn = (0, _uiHelpers.cnCreate)('mfui-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
+    title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     _ref$checked = _ref.checked,
@@ -56,6 +57,7 @@ var Chip = function Chip(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
+  var checkedClass = checked ? classes.checked : undefined;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -66,7 +68,7 @@ var Chip = function Chip(_ref) {
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
-    }, [className, classes.root])
+    }, [className, classes.root, checkedClass])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
     onClick: handleClick,
@@ -75,7 +77,7 @@ 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.createElement("span", (0, _extends2["default"])({
     className: cn('inner', [classes.inner])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children), !!counterValue && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), children || title), !!counterValue && /*#__PURE__*/React.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.createElement("div", (0, _extends2["default"])({
     className: cn('icon-arrow')

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.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))}
+h1,h2,h3,h4,h5{margin:0}.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))}.mfui-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -4,10 +4,16 @@ import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
     items: IChipProps[];
-    /** Значение */
-    value: ChipIdType;
+    /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
+    value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Горизонтальное выравнивание */
+    align?: 'left' | 'center';
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
+    isScrollable?: boolean;
     /** Количество отображаемых элементов на всех разрешениях экрана */
     visibleItemsCountAll?: number;
     /** Количество отображаемых элементов на разрешении 768 - 1023 */
@@ -22,6 +28,14 @@ export interface IChipsProps {
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Chips: React.FC<IChipsProps>;
 export default Chips;

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.js");
 require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.array.slice.js");
 var React = _interopRequireWildcard(require("react"));
@@ -14,10 +16,19 @@ var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 var _Chip = _interopRequireDefault(require("./Chip"));
-var _ChipsDropdown = _interopRequireDefault(require("./components/ChipsDropdown"));
+var _ChipsDropdown = _interopRequireDefault(require("./components/ChipsDropdown/ChipsDropdown"));
+var _ChipsScrollPanel = _interopRequireDefault(require("./components/ChipsScrollPanel/ChipsScrollPanel"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 var DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
   DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START,
   MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START;
@@ -33,12 +44,20 @@ var Chips = function Chips(_ref) {
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
     visibleItemsCountWide = _ref.visibleItemsCountWide,
+    _ref$isScrollable = _ref.isScrollable,
+    isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
+    _ref$isControlled = _ref.isControlled,
+    isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+    align = _ref.align,
     onChange = _ref.onChange,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs;
   var _React$useState = React.useState(value),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    selectedId = _React$useState2[0],
-    setSelectedId = _React$useState2[1];
+    innerSelectedId = _React$useState2[0],
+    setInnerSelectedId = _React$useState2[1];
   var _React$useState3 = React.useState(visibleItemsCountAll),
     _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     visibleItemsCount = _React$useState4[0],
@@ -51,13 +70,40 @@ var Chips = function Chips(_ref) {
     _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     hiddenItems = _React$useState8[0],
     setHiddenItems = _React$useState8[1];
+  var _React$useState9 = React.useState(isScrollable && !visibleItemsCount),
+    _React$useState10 = (0, _slicedToArray2["default"])(_React$useState9, 2),
+    isScrollableMode = _React$useState10[0],
+    setIsScrollableMode = _React$useState10[1];
+  var selectedId = isControlled ? value : innerSelectedId;
   var handleClick = React.useCallback(function (e, id) {
     e.persist();
-    if (id) {
-      setSelectedId(id);
+    if (id && id !== selectedId) {
+      !isControlled && setInnerSelectedId(id);
       onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
     }
-  }, [onChange]);
+  }, [isControlled, onChange, selectedId]);
+  var renderItems = function renderItems() {
+    if (isScrollableMode) {
+      return /*#__PURE__*/React.createElement(_ChipsScrollPanel["default"], {
+        value: selectedId,
+        items: visibleItems,
+        color: color,
+        onClick: handleClick
+      });
+    }
+    return visibleItems.map(function (_a) {
+      var id = _a.id,
+        children = _a.children,
+        rest = __rest(_a, ["id", "children"]);
+      return /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({
+        key: id,
+        id: id,
+        checked: id === selectedId,
+        color: color,
+        onClick: handleClick
+      }, rest), !!children && children);
+    });
+  };
   React.useEffect(function () {
     var resizeHandler = function resizeHandler() {
       var windowWidth = window.innerWidth;
@@ -91,19 +137,15 @@ var Chips = function Chips(_ref) {
       setHiddenItems(null);
     }
   }, [items, visibleItemsCount]);
-  return /*#__PURE__*/React.createElement("div", {
+  React.useEffect(function () {
+    setIsScrollableMode(isScrollable && !visibleItemsCount);
+  }, [isScrollable, visibleItemsCount]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
-      hidden: !!hiddenItems
-    }, [className])
-  }, visibleItems.map(function (item) {
-    return /*#__PURE__*/React.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.createElement(_ChipsDropdown["default"], {
+      hidden: !!hiddenItems,
+      align: align
+    }, [className, classes.root])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderItems(), !!hiddenItems && /*#__PURE__*/React.createElement(_ChipsDropdown["default"], {
     value: selectedId,
     items: hiddenItems,
     moreTitle: moreTitle,

package/dist/{es/components/Chips/components → lib/components/Chips/components/ChipsDropdown}/ChipsDropdown.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../Chip';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
     moreTitle: string;
-    value: ChipIdType;
+    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
     onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;

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

@@ -12,7 +12,7 @@ require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
-var _Chip = _interopRequireDefault(require("../Chip"));
+var _Chip = _interopRequireDefault(require("../../Chip"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -80,16 +80,19 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list)), /*#__PURE__*/React.createElement("div", {
     className: cn('list-inner')
   }, items.map(function (item, key) {
+    var children = item.children,
+      title = item.title,
+      icon = item.icon;
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: cn('list-item', {
-        'with-icon': !!item.icon
+        'with-icon': !!icon
       }),
       onClick: handleItemClick(item),
       onKeyDown: handleItemClick(item)
-    }, !!(item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/React.createElement("span", {
+    }, !!icon && /*#__PURE__*/React.createElement("span", {
       className: cn('icon')
-    }, item.icon), !!(item === null || item === void 0 ? void 0 : item.children) && item.children);
+    }, icon), children || title);
   }))));
 };
 var _default = exports["default"] = ChipsDropdown;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-chips-scroll-panel{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;position:relative;-ms-overflow-style:none;scrollbar-width:none}.mfui-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-chips-scroll-panel__inner{gap:8px}}

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import './ChipsScrollPanel.scss';
+export interface IChipsScrollPanelProps {
+    value?: ChipIdType;
+    items: IChipProps[];
+    color: ChipColorsType;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
+}
+declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;
+export default ChipsScrollPanel;

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

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

package/dist/lib/index.d.ts

@@ -10,7 +10,8 @@ export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
 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 ChipsDropdown } from './components/Chips/components/ChipsDropdown/ChipsDropdown';
+export { default as ChipsScrollPanel } from './components/Chips/components/ChipsScrollPanel/ChipsScrollPanel';
 export { default as Collapse } from './components/_Collapse/Collapse';
 export { default as ContentArea } from './components/ContentArea/ContentArea';
 export { default as ContentView } from './components/ContentView/ContentView';

package/dist/lib/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "ChipsDropdown", {
     return _ChipsDropdown["default"];
   }
 });
+Object.defineProperty(exports, "ChipsScrollPanel", {
+  enumerable: true,
+  get: function get() {
+    return _ChipsScrollPanel["default"];
+  }
+});
 Object.defineProperty(exports, "Collapse", {
   enumerable: true,
   get: function get() {
@@ -513,7 +519,8 @@ var _Checkbox = _interopRequireDefault(require("./components/Checkbox/Checkbox")
 var _checkBreakpointsPropTypes = _interopRequireDefault(require("./components/Carousel/checkBreakpointsPropTypes"));
 var _Chip = _interopRequireDefault(require("./components/Chips/Chip"));
 var _Chips = _interopRequireDefault(require("./components/Chips/Chips"));
-var _ChipsDropdown = _interopRequireDefault(require("./components/Chips/components/ChipsDropdown"));
+var _ChipsDropdown = _interopRequireDefault(require("./components/Chips/components/ChipsDropdown/ChipsDropdown"));
+var _ChipsScrollPanel = _interopRequireDefault(require("./components/Chips/components/ChipsScrollPanel/ChipsScrollPanel"));
 var _Collapse = _interopRequireDefault(require("./components/_Collapse/Collapse"));
 var _ContentArea = _interopRequireDefault(require("./components/ContentArea/ContentArea"));
 var _ContentView = _interopRequireDefault(require("./components/ContentView/ContentView"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "8.4.0",
+    "version": "8.5.0",
     "files": [
         "dist",
         "styles"
@@ -50,7 +50,7 @@
         "@babel/preset-env": "^7.8.6",
         "@babel/preset-react": "^7.8.3",
         "@babel/preset-typescript": "^7.8.3",
-        "@megafon/ui-icons": "^3.9.2",
+        "@megafon/ui-icons": "^3.9.3",
         "@svgr/core": "^2.4.1",
         "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^11.1.1"
     },
-    "gitHead": "af0cdb99cd17efe392e36532a219bafaf5c986d6"
+    "gitHead": "84114b7863b09c9cfb5e39388a7e6584f83cb3d2"
 }