@megafon/ui-core 9.0.0-alpha.2 → 9.0.0-alpha.21

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChipColors = exports.ChipArrow = void 0;
+exports["default"] = exports.ChipThemes = exports.ChipColors = exports.ChipArrow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -15,24 +15,24 @@ var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M6 8h8l-4 5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M10.465 11.798a.609.609 0 01-.907 0L7.187 9.25c-.41-.44-.1-1.25.476-1.25h4.679c.575 0 .879.811.47 1.25l-2.347 2.548z"
   }));
 };
 var ArrowUp = function ArrowUp(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M14 12H6l4-5z",
-    fillRule: "evenodd",
-    clipRule: "evenodd"
+    d: "M9.535 8.202a.609.609 0 01.907 0l2.371 2.547c.41.44.1 1.251-.476 1.251H7.658c-.576 0-.879-.811-.47-1.25l2.347-2.548z"
   }));
 };
 var ChipColors = exports.ChipColors = {
   DEFAULT: 'default',
   BLACK: 'black'
 };
+var ChipThemes = exports.ChipThemes = {
+  WHITE: 'white',
+  GRAY: 'gray'
+};
 var ChipArrow = exports.ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -43,6 +43,8 @@ var Chip = function Chip(_ref) {
     title = _ref.title,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
     _ref$disabled = _ref.disabled,
@@ -65,6 +67,7 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      theme: theme,
       checked: checked,
       disabled: disabled,
       'with-icon': !!icon
@@ -73,6 +76,8 @@ var Chip = function Chip(_ref) {
     disabled: disabled,
     onClick: handleClick,
     ref: rootRef
+  }, checked && {
+    tabIndex: -1
   }), !!icon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
     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"])({
@@ -80,7 +85,7 @@ var Chip = function Chip(_ref) {
   }, (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')
+    className: cn('icon-arrow', [classes.arrow])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 var _default = exports["default"] = Chip;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
+import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
@@ -8,6 +9,8 @@ export interface IChipsProps {
     value?: ChipIdType;
     /** Цвет активного элемента */
     color?: ChipColorsType;
+    /** Цвет неактивных элементов */
+    theme?: ChipsThemeType;
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -24,6 +27,10 @@ export interface IChipsProps {
     visibleItemsCountWide?: number;
     /** Название дополнительной кнопки */
     moreTitle?: string;
+    /** Попап выпадающего списка короче в высоту */
+    isDropdownShort?: boolean;
+    /** Отступы элементов списка выпадающего списка */
+    dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
     onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
@@ -32,13 +39,21 @@ export interface IChipsProps {
     classes?: {
         root?: string;
         dropdown?: string;
+        dropdownPopup?: string;
         dropdownList?: string;
+        dropdownItem?: string;
+        scroll?: string;
+        scrollInner?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
         dropdown?: Record<string, string>;
+        dropdownPopup?: Record<string, string>;
         dropdownList?: Record<string, string>;
+        dropdownItem?: Record<string, string>;
+        scroll?: Record<string, string>;
+        scrollInner?: Record<string, string>;
     };
 }
 declare const Chips: React.FC<IChipsProps>;

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

@@ -38,8 +38,13 @@ var Chips = function Chips(_ref) {
     value = _ref.value,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? 'white' : _ref$theme,
     _ref$moreTitle = _ref.moreTitle,
     moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
+    _ref$isDropdownShort = _ref.isDropdownShort,
+    isDropdownShort = _ref$isDropdownShort === void 0 ? false : _ref$isDropdownShort,
+    dropdownPaddings = _ref.dropdownPaddings,
     visibleItemsCountAll = _ref.visibleItemsCountAll,
     visibleItemsCountTablet = _ref.visibleItemsCountTablet,
     visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
@@ -85,9 +90,18 @@ var Chips = function Chips(_ref) {
   var renderItems = function renderItems() {
     if (isScrollableMode) {
       return /*#__PURE__*/React.createElement(_ChipsScrollPanel["default"], {
+        classes: {
+          root: classes.scroll,
+          inner: classes.scrollInner
+        },
+        dataAttrs: {
+          root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scroll,
+          inner: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scrollInner
+        },
         value: selectedId,
         items: visibleItems,
         color: color,
+        theme: theme,
         onClick: handleClick
       });
     }
@@ -100,6 +114,7 @@ var Chips = function Chips(_ref) {
         id: id,
         checked: id === selectedId,
         color: color,
+        theme: theme,
         onClick: handleClick
       }, rest), !!children && children);
     });
@@ -146,19 +161,26 @@ var Chips = function Chips(_ref) {
       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,
     color: color,
-    onClick: handleClick,
+    theme: theme,
+    moreTitle: moreTitle,
+    "short": isDropdownShort,
+    value: selectedId,
+    paddings: dropdownPaddings,
     classes: {
       root: classes.dropdown,
-      list: classes.dropdownList
+      popup: classes.dropdownPopup,
+      list: classes.dropdownList,
+      item: classes.dropdownItem
     },
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdown,
-      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList
-    }
+      popup: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownPopup,
+      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList,
+      item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownItem
+    },
+    onClick: handleClick
   }));
 };
 var _default = exports["default"] = Chips;

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}@-webkit-keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes listAppear{0%{opacity:0;-webkit-transform:translateY(-25px);transform:translateY(-25px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__list{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:listAppear;animation-name:listAppear;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.08);box-shadow:0 4px 12px rgba(0,0,0,.08);display:block;left:0;position:absolute;top:100%;z-index:100}.mfui-9-chips-dropdown__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:320px;max-width:256px;overflow-wrap:normal;overflow-y:auto;padding:16px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar{width:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--spbSky2);border:6px solid transparent;border-radius:16px}.mfui-9-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover{background-color:var(--spbSky3)}.mfui-9-chips-dropdown__list-item{background-color:transparent;border-radius:12px;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;padding:12px 32px}.mfui-9-chips-dropdown__list-item:hover{background-color:var(--spbSky0)}.mfui-9-chips-dropdown__list-item_with-icon{padding-left:16px;padding-right:16px}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.mfui-9-chips-dropdown__arrow{-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s}.mfui-9-chips-dropdown__arrow_open{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-chips-dropdown__dropdown{max-width:256px;width:-webkit-max-content;width:-moz-max-content;width:max-content}.mfui-9-chips-dropdown__list-item{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-9-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-9-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}

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

@@ -1,20 +1,28 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import { DropdownItemsPaddingType } from '../../../../Dropdown/Dropdown';
+import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
-    moreTitle: string;
-    value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
-    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    theme: ChipsThemeType;
+    moreTitle: string;
+    short: boolean;
+    value?: ChipIdType;
+    paddings?: DropdownItemsPaddingType;
     classes?: {
         root?: string;
+        popup?: string;
         list?: string;
+        item?: string;
     };
     dataAttrs?: {
         root?: Record<string, string>;
+        popup?: Record<string, string>;
         list?: Record<string, string>;
+        item?: Record<string, string>;
     };
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
 }
 declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
 export default ChipsDropdown;

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

@@ -12,27 +12,44 @@ 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 _Dropdown = _interopRequireDefault(require("../../../../Dropdown/Dropdown"));
 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 cn = (0, _uiHelpers.cnCreate)('mfui-9-chips-dropdown');
 var ChipsDropdown = function ChipsDropdown(_ref) {
-  var color = _ref.color,
-    moreTitle = _ref.moreTitle,
-    _ref$items = _ref.items,
+  var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
+    color = _ref.color,
+    theme = _ref.theme,
+    moreTitle = _ref.moreTitle,
+    _short = _ref["short"],
     value = _ref.value,
-    onClick = _ref.onClick,
+    paddings = _ref.paddings,
     _ref$classes = _ref.classes,
     classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    onClick = _ref.onClick;
+  var _a;
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isDropdownOpen = _React$useState2[0],
     setIsDropdownOpen = _React$useState2[1];
   var dropdownRef = React.useRef(null);
-  var listRef = React.useRef(null);
+  var dropdownItems = items.map(function (item) {
+    var _a, _b, _c, _d;
+    return {
+      title: item.title || '',
+      value: item.id,
+      view: /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        className: cn('list-item', [item.className, (_a = item.classes) === null || _a === void 0 ? void 0 : _a.root])
+      }, (0, _uiHelpers.filterDataAttrs)((_b = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _b === void 0 ? void 0 : _b.root)), !!item.icon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+        className: cn('icon', [(_c = item.classes) === null || _c === void 0 ? void 0 : _c.icon])
+      }, (0, _uiHelpers.filterDataAttrs)((_d = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _d === void 0 ? void 0 : _d.icon)), item.icon), item.children || item.title || ''),
+      paddings: paddings
+    };
+  });
   var currentItem = React.useMemo(function () {
     return items.find(function (item) {
       return item.id === value;
@@ -41,61 +58,52 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
       children: moreTitle
     };
   }, [items, value, moreTitle]);
-  var handleOutsideClick = React.useCallback(function (event) {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-      setIsDropdownOpen(false);
-    }
-  }, []);
   var handleOpenItemList = function handleOpenItemList() {
     setIsDropdownOpen(true);
-    document.addEventListener('mousedown', handleOutsideClick);
   };
-  var handleItemClick = React.useCallback(function (item) {
+  var handleDropdownItemClick = React.useCallback(function (index) {
     return function (e) {
       e.persist();
       setIsDropdownOpen(false);
-      onClick(e, item.id);
+      onClick(e, items[index].id);
     };
-  }, [onClick]);
-  React.useEffect(function () {
-    if (!isDropdownOpen) {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    }
-  }, [handleOutsideClick, isDropdownOpen]);
-  React.useEffect(function () {
-    return function () {
-      return document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [handleOutsideClick]);
+  }, [items, onClick]);
+  var handleDropdownClose = function handleDropdownClose() {
+    setIsDropdownOpen(false);
+  };
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn([classes.root]),
     ref: dropdownRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({}, currentItem, {
     className: cn('button', [currentItem.className]),
+    classes: (0, _extends2["default"])((0, _extends2["default"])({}, currentItem.classes), {
+      arrow: cn('arrow', {
+        open: isDropdownOpen
+      }, [(_a = currentItem.classes) === null || _a === void 0 ? void 0 : _a.arrow])
+    }),
     color: color,
+    theme: theme,
     checked: !!currentItem.id,
-    arrow: isDropdownOpen ? 'up' : 'down',
+    arrow: "down",
     onClick: handleOpenItemList
-  })), isDropdownOpen && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn('list', [classes.list]),
-    ref: listRef
-  }, (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 _a, _b;
-    var children = item.children,
-      title = item.title,
-      icon = item.icon;
-    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-      key: key,
-      className: cn('list-item', {
-        'with-icon': !!icon
-      }, [item.className, (_a = item.classes) === null || _a === void 0 ? void 0 : _a.root]),
-      onClick: handleItemClick(item),
-      onKeyDown: handleItemClick(item)
-    }, (0, _uiHelpers.filterDataAttrs)((_b = item === null || item === void 0 ? void 0 : item.dataAttrs) === null || _b === void 0 ? void 0 : _b.root)), !!icon && /*#__PURE__*/React.createElement("span", {
-      className: cn('icon')
-    }, icon), children || title);
-  }))));
+  })), /*#__PURE__*/React.createElement(_Dropdown["default"], {
+    items: dropdownItems,
+    value: value,
+    isOpen: isDropdownOpen,
+    targetRef: dropdownRef,
+    "short": _short,
+    onItemClick: handleDropdownItemClick,
+    onClose: handleDropdownClose,
+    classes: {
+      root: cn('dropdown', [classes.popup]),
+      list: classes.list,
+      item: classes.item
+    },
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popup,
+      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list,
+      item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item
+    }
+  }));
 };
 var _default = exports["default"] = ChipsDropdown;

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

@@ -1,10 +1,19 @@
 import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from '../../Chip';
+import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
 import './ChipsScrollPanel.scss';
 export interface IChipsScrollPanelProps {
+    classes?: {
+        root?: string;
+        inner?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        inner?: Record<string, string>;
+    };
     value?: ChipIdType;
     items: IChipProps[];
     color: ChipColorsType;
+    theme: ChipsThemeType;
     onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
 }
 declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;

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

@@ -27,9 +27,13 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var HALF_DIVIDER = 2;
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-chips-scroll-panel');
 var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
-  var value = _ref.value,
+  var _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    value = _ref.value,
     items = _ref.items,
     color = _ref.color,
+    theme = _ref.theme,
     onClick = _ref.onClick;
   var _React$useState = React.useState(),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -66,13 +70,13 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
       setCurrentValue(value);
     }
   }, [value, currentValue, scrollToActiveItem]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(),
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn([classes.root]),
     ref: containerRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn('inner'),
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('inner', [classes.inner]),
     tabIndex: -1
-  }, items.map(function (_a) {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), items.map(function (_a) {
     var id = _a.id,
       children = _a.children,
       rest = __rest(_a, ["id", "children"]);
@@ -84,6 +88,7 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
       id: id,
       checked: checked,
       color: color,
+      theme: theme,
       onClick: handleClick,
       rootRef: checked ? checkedItemRef : null
     }), children));

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;padding:11px 20px;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}@media screen and (max-width:767px){.mfui-9-chip-suggest{padding:7px 12px}}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;margin-right:6px;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_with-icon{padding-left:12px}@media screen and (max-width:767px){.mfui-9-chip-suggest_with-icon{padding-left:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-suggest{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-family:inherit;font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);cursor:pointer;outline:none;overflow:hidden;text-align:center;text-decoration:none;-webkit-transition:background-color .3s,color .3s;transition:background-color .3s,color .3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-9-chip-suggest:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:-4px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-chip-suggest:focus{outline:none}.mfui-9-chip-suggest svg{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--content)}.mfui-9-chip-suggest:hover{background-color:var(--spbSky1)}.mfui-9-chip-suggest:active{background-color:var(--spbSky2)}.mfui-9-chip-suggest__inner{overflow:hidden;white-space:nowrap}.mfui-9-chip-suggest__icon{display:block;max-height:20px;min-width:20px;width:20px}.mfui-9-chip-suggest__icon svg{display:block;height:100%;width:100%}@media screen and (max-width:767px){.mfui-9-chip-suggest__icon{margin-right:4px}}.mfui-9-chip-suggest_theme_white{background-color:var(--base)}.mfui-9-chip-suggest_theme_gray{background-color:var(--spbSky0)}.mfui-9-chip-suggest_size_medium{padding:4px 8px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium{padding:8px 12px}}.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:4px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium .mfui-9-chip-suggest__icon{margin-right:6px}}.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:12px}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_medium.mfui-9-chip-suggest_with-icon{padding-right:20px}}.mfui-9-chip-suggest_size_small{padding:7px 8px}@media screen and (max-width:767px){.mfui-9-chip-suggest_size_small{font-size:12px;line-height:18px}}@media screen and (min-width:768px){.mfui-9-chip-suggest_size_small{padding:4px 8px}}.mfui-9-chip-suggest_size_small .mfui-9-chip-suggest__icon{margin-right:4px}.mfui-9-chip-suggest_size_small.mfui-9-chip-suggest_with-icon{padding-right:12px}

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

@@ -6,6 +6,11 @@ export declare const ChipSuggestThemes: {
     readonly GRAY: "gray";
 };
 export type ChipSuggestThemesType = (typeof ChipSuggestThemes)[keyof typeof ChipSuggestThemes];
+export declare const ChipSuggestSize: {
+    readonly MEDIUM: "medium";
+    readonly SMALL: "small";
+};
+export type ChipSuggestSizeType = (typeof ChipSuggestSize)[keyof typeof ChipSuggestSize];
 export interface IChipSuggestProps {
     /** Идентификатор */
     id: ChipSuggestIdType;
@@ -13,6 +18,8 @@ export interface IChipSuggestProps {
     title?: string;
     /** Цвет компонента */
     theme?: ChipSuggestThemesType;
+    /** Размер компонента */
+    size?: ChipSuggestSizeType;
     /** Иконка */
     icon?: JSX.Element;
     /** Дочерние элементы */

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

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChipSuggestThemes = void 0;
+exports["default"] = exports.ChipSuggestThemes = exports.ChipSuggestSize = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -15,12 +15,18 @@ var ChipSuggestThemes = exports.ChipSuggestThemes = {
   WHITE: 'white',
   GRAY: 'gray'
 };
+var ChipSuggestSize = exports.ChipSuggestSize = {
+  MEDIUM: 'medium',
+  SMALL: 'small'
+};
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-chip-suggest');
 var ChipSuggest = function ChipSuggest(_ref) {
   var id = _ref.id,
     title = _ref.title,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'white' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     icon = _ref.icon,
     onClick = _ref.onClick,
     children = _ref.children,
@@ -36,6 +42,7 @@ var ChipSuggest = function ChipSuggest(_ref) {
     type: "button",
     className: cn({
       theme: theme,
+      size: size,
       'with-icon': !!icon
     }, [className, classes.root])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {

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

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { ChipSuggestThemesType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
+import { ChipSuggestThemesType, ChipSuggestSizeType, ChipSuggestIdType, IChipSuggestProps } from './ChipSuggest';
 import './ChipsSuggest.scss';
 export interface IChipsSuggestProps {
     /** Массив элементов */
     items: IChipSuggestProps[];
-    /** Цвет активного элемента */
+    /** Цвет элементов */
     theme?: ChipSuggestThemesType;
+    /** Размер элементов */
+    size?: ChipSuggestSizeType;
     /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
     isScrollable?: boolean;
     /** Дополнительный класс корневого элемента */

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

@@ -28,6 +28,8 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
   var items = _ref.items,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'white' : _ref$theme,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$isScrollable = _ref.isScrollable,
     isScrollable = _ref$isScrollable === void 0 ? false : _ref$isScrollable,
     onChange = _ref.onChange,
@@ -48,6 +50,7 @@ var ChipsSuggest = function ChipsSuggest(_ref) {
         key: id,
         id: id,
         theme: theme,
+        size: size,
         onClick: handleClick
       }, rest), !!children && children);
     });

package/dist/lib/components/ContentArea/ContentArea.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-content-area_background-color_transparent{background-color:transparent}.mfui-9-content-area_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area_background-color_spbSky2{background-color:var(--spbSky2)}.mfui-9-content-area__inner{-webkit-box-sizing:content-box;box-sizing:content-box;margin:0 auto;max-width:1440px;padding-left:80px;padding-right:80px}@media screen and (max-width:767px){.mfui-9-content-area__inner{padding-left:16px;padding-right:16px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-content-area__inner{padding-left:48px;padding-right:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner{padding-left:64px;padding-right:64px}}@media screen and (max-width:767px){.mfui-9-content-area__inner_disable-indents_mobile{padding-left:0;padding-right:0}}@media screen and (max-width:1023px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small,.mfui-9-content-area__inner_disable-indents_mobile-tablet{padding-left:0;padding-right:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-content-area__inner_disable-indents_mobile-desktop-small{padding-left:0;padding-right:0}}@media screen and (min-width:768px){.mfui-9-content-area__inner_disable-indents_tablet-desktop{padding-left:0;padding-right:0}}.mfui-9-content-area__inner_disable-indents_all{padding-left:0;padding-right:0}@media screen and (max-width:359px){.mfui-9-content-area__inner_indents_small-mobile{padding-left:8px;padding-right:8px}}.mfui-9-content-area__inner_background-color_transparent{background-color:transparent}.mfui-9-content-area__inner_background-color_black{background-color:var(--stcBlack)}.mfui-9-content-area__inner_background-color_white{background-color:var(--stcWhite)}.mfui-9-content-area__inner_background-color_green{background-color:var(--brandGreen)}.mfui-9-content-area__inner_background-color_purple{background-color:var(--brandPurple)}.mfui-9-content-area__inner_background-color_spbSky0{background-color:var(--spbSky0)}.mfui-9-content-area__inner_background-color_spbSky1{background-color:var(--spbSky1)}.mfui-9-content-area__inner_background-color_spbSky2{background-color:var(--spbSky2)}

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

@@ -14,6 +14,7 @@ export type BackgroundColorType = (typeof BACKGROUND_COLORS)[keyof typeof BACKGR
 declare const DisableIndents: {
     readonly MOBILE: "mobile";
     readonly MOBILE_TABLET: "mobile-tablet";
+    readonly MOBILE_DESKTOP_SMALL: "mobile-desktop-small";
     readonly TABLET_DESKTOP: "tablet-desktop";
     readonly ALL: "all";
 };
@@ -22,7 +23,7 @@ declare const Indents: {
 };
 type DisableIndentsType = (typeof DisableIndents)[keyof typeof DisableIndents];
 type IndentsType = (typeof Indents)[keyof typeof Indents];
-export interface IConrentAreaProps {
+export interface IContentAreaProps {
     /** Фоновый цвет внешнего контейнера */
     outerBackgroundColor?: BackgroundColorType;
     /** Фоновый цвет внутреннего контейнера */
@@ -45,5 +46,5 @@ export interface IConrentAreaProps {
     };
     children: React.ReactNode;
 }
-declare const ContentArea: React.FC<IConrentAreaProps>;
+declare const ContentArea: React.FC<IContentAreaProps>;
 export default ContentArea;

package/dist/lib/components/ContentArea/ContentArea.js

@@ -23,8 +23,13 @@ var BACKGROUND_COLORS = {
 };
 var DisableIndents = {
   MOBILE: 'mobile',
+  // <= 767
   MOBILE_TABLET: 'mobile-tablet',
+  // <= 1023
+  MOBILE_DESKTOP_SMALL: 'mobile-desktop-small',
+  // <= 1279
   TABLET_DESKTOP: 'tablet-desktop',
+  // >= 768
   ALL: 'all'
 };
 var Indents = {

package/dist/lib/components/ContentView/ContentView.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{gap:12px;padding-top:32px}.mfui-9-content-view__buttons,.mfui-9-content-view_fullscreen{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-content-view_fullscreen{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-9-content-view_fullscreen .mfui-9-content-view__content{margin-top:auto}.mfui-9-content-view_fullscreen .mfui-9-content-view__buttons{margin-top:auto;padding-bottom:24px}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-content-view{color:var(--content);min-width:240px;padding:0 16px;text-align:center}.mfui-9-content-view__image{display:inline-block;margin-bottom:24px;max-width:144px;vertical-align:top}.mfui-9-content-view__bg-image{background-repeat:no-repeat;background-size:100%;display:inline-block;height:144px;margin-bottom:24px;vertical-align:top;width:144px}.mfui-9-content-view__bg-image_type_waiting{background-image:url(img/waiting.png)}.mfui-9-content-view__bg-image_type_error{background-image:url(img/error.png)}.mfui-9-content-view__bg-image_type_submit{background-image:url(img/submit.png)}.mfui-9-content-view__bg-image_type_success{background-image:url(img/success.png)}.mfui-9-content-view__bg-image_type_fail{background-image:url(img/fail.png)}.mfui-9-content-view__bg-image_type_update{background-image:url(img/update.png)}.mfui-9-content-view__bg-image_type_alarm{background-image:url(img/alarm.png)}.mfui-9-content-view__bg-image_type_empty{background-image:url(img/empty.png)}.mfui-9-content-view__bg-image_type_searchNoResult{background-image:url(img/searchNoResult.png)}.mfui-9-content-view__title{font-size:18px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-content-view__title{font-size:20px;letter-spacing:.5px;line-height:28px}}.mfui-9-content-view__text{font-size:15px;font-weight:400;line-height:24px;margin-top:4px}.mfui-9-content-view__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-top:32px}@media screen and (min-width:768px){.mfui-9-content-view__buttons{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.mfui-9-content-view__buttons_fullwidth{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width:768px){.mfui-9-content-view__link_indent{margin-left:16px}}.mfui-9-content-view_fullscreen{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:100%}.mfui-9-content-view_fullscreen .mfui-9-content-view__content{margin-top:auto}.mfui-9-content-view_fullscreen .mfui-9-content-view__buttons{margin-top:auto;padding-bottom:24px}