@megafon/ui-core 9.2.1 → 9.3.0

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

@@ -4,13 +4,20 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChipThemes = exports.ChipColors = exports.ChipArrow = void 0;
+exports["default"] = exports.ChipType = 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");
 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 TurnOn = function TurnOn(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.352 12a2 2 0 110 4 2 2 0 010-4zm-2.828 1.25c-.06.24-.094.49-.094.75s.034.51.094.75H2.73A.74.74 0 012 14a.74.74 0 01.729-.75h6.795zm7.747 0A.74.74 0 0118 14a.74.74 0 01-.729.75h-2.108c.06-.24.096-.49.096-.75s-.036-.51-.096-.75h2.108zM7.46 4a2 2 0 110 4 2 2 0 010-4zM4.667 5.25c-.06.24-.095.49-.095.75s.035.51.095.75H2.729A.74.74 0 012 6a.74.74 0 01.729-.75h1.938zm12.604 0A.74.74 0 0118 6a.74.74 0 01-.729.75h-6.965c.06-.24.094-.49.094-.75s-.034-.51-.094-.75h6.966z"
+  }));
+};
 var ArrowDown = function ArrowDown(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -33,6 +40,11 @@ var ChipThemes = exports.ChipThemes = {
   WHITE: 'white',
   GRAY: 'gray'
 };
+var ChipType = exports.ChipType = {
+  DEFAULT: 'default',
+  FILTER: 'filter'
+};
+// DEPRECATED -------------------------------------------------------
 var ChipArrow = exports.ChipArrow = {
   UP: 'up',
   DOWN: 'down'
@@ -41,17 +53,22 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-9-chip');
 var Chip = function Chip(_ref) {
   var id = _ref.id,
     title = _ref.title,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
     _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$opened = _ref.opened,
+    opened = _ref$opened === void 0 ? false : _ref$opened,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     icon = _ref.icon,
     counterValue = _ref.counterValue,
     arrow = _ref.arrow,
+    showArrow = _ref.showArrow,
     onClick = _ref.onClick,
     children = _ref.children,
     className = _ref.className,
@@ -60,6 +77,9 @@ var Chip = function Chip(_ref) {
     dataAttrs = _ref.dataAttrs,
     rootRef = _ref.rootRef;
   var checkedClass = checked ? classes.checked : undefined;
+  var filterIcon = type === 'filter' ? /*#__PURE__*/React.createElement(TurnOn, null) : undefined;
+  var finalIcon = icon || filterIcon;
+  var content = children || title;
   var handleClick = React.useCallback(function (e) {
     onClick === null || onClick === void 0 ? void 0 : onClick(e, id);
   }, [onClick, id]);
@@ -67,10 +87,14 @@ var Chip = function Chip(_ref) {
     type: "button",
     className: cn({
       color: color,
+      type: type,
       theme: theme,
       checked: checked,
+      opened: opened,
       disabled: disabled,
-      'with-icon': !!icon
+      'with-arrow': !!arrow || showArrow,
+      'with-counter': !!counterValue,
+      'with-icon': !!finalIcon
     }, [className, classes.root, checkedClass])
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     disabled: disabled,
@@ -78,14 +102,16 @@ var Chip = function Chip(_ref) {
     ref: rootRef
   }, checked && {
     tabIndex: -1
-  }), !!icon && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }), !!finalIcon && /*#__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"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.icon)), finalIcon), !!content && /*#__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 || title), !!counterValue && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), content), !!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', [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)));
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), arrow === 'up' ? /*#__PURE__*/React.createElement(ArrowUp, null) : /*#__PURE__*/React.createElement(ArrowDown, null)), showArrow && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('icon-arrow', [classes.arrow])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrow)), /*#__PURE__*/React.createElement(ArrowDown, null)));
 };
 var _default = exports["default"] = Chip;

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

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chip-badge__badge{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-bottom:-4px;margin-left:auto}.mfui-9-chip-badge__chip{width:100%}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IChipProps } from './Chip';
+import './ChipBadge.scss';
+export interface IChipBadgeProps extends IChipProps {
+    badge?: React.ReactNode;
+}
+declare const ChipBadge: React.FC<IChipBadgeProps>;
+export default ChipBadge;

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

@@ -0,0 +1,38 @@
+"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"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.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 cn = (0, _uiHelpers.cnCreate)('mfui-9-chip-badge');
+var ChipBadge = function ChipBadge(_a) {
+  var badge = _a.badge,
+    className = _a.className,
+    chipProps = __rest(_a, ["badge", "className"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, !!badge && /*#__PURE__*/React.createElement("div", {
+    className: cn('badge')
+  }, badge), /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({
+    className: cn('chip', [className])
+  }, chipProps)));
+};
+var _default = exports["default"] = ChipBadge;

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips{gap:8px}}.mfui-9-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-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;width:100%}@media screen and (max-width:767px){.mfui-9-chips{gap:8px}}.mfui-9-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-9-chips_align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { DropdownItemsPaddingType } from '../../Dropdown/Dropdown';
-import { ChipColorsType, ChipIdType, IChipProps, ChipsThemeType } from './Chip';
+import { IChipBadgeProps } from './ChipBadge';
 import './Chips.scss';
 export interface IChipsProps {
     /** Массив элементов */
-    items: IChipProps[];
+    items: IChipBadgeProps[];
     /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
-    value?: ChipIdType;
+    value?: IChipBadgeProps['id'];
     /** Цвет активного элемента */
-    color?: ChipColorsType;
+    color?: IChipBadgeProps['color'];
     /** Цвет неактивных элементов */
-    theme?: ChipsThemeType;
+    theme?: IChipBadgeProps['theme'];
     /** Горизонтальное выравнивание */
     align?: 'left' | 'center';
     /** Переводит компонент в контролируемое состояние */
@@ -32,7 +32,7 @@ export interface IChipsProps {
     /** Отступы элементов списка выпадающего списка */
     dropdownPaddings?: DropdownItemsPaddingType;
     /** Обработчик изменения значения */
-    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
+    onChange?: (id: IChipBadgeProps['id'], e?: React.SyntheticEvent<EventTarget>) => void;
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

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

@@ -15,7 +15,7 @@ var React = _interopRequireWildcard(require("react"));
 var _uiHelpers = require("@megafon/ui-helpers");
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 var _throttleTime = _interopRequireDefault(require("../../../constants/throttleTime"));
-var _Chip = _interopRequireDefault(require("./Chip"));
+var _ChipBadge = _interopRequireDefault(require("./ChipBadge"));
 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); }
@@ -109,7 +109,7 @@ var Chips = function Chips(_ref) {
       var id = _a.id,
         children = _a.children,
         rest = __rest(_a, ["id", "children"]);
-      return /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({
+      return /*#__PURE__*/React.createElement(_ChipBadge["default"], (0, _extends2["default"])({
         key: id,
         id: id,
         checked: id === selectedId,

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

@@ -1 +1 @@
-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)}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-chips-dropdown{position:relative}.mfui-9-chips-dropdown__button{width:100%}.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,14 +1,14 @@
 import * as React from 'react';
 import { DropdownItemsPaddingType } from '../../../../Dropdown/Dropdown';
-import { ChipColorsType, ChipIdType, ChipsThemeType, IChipProps } from '../../Chip';
+import { IChipBadgeProps } from '../../ChipBadge';
 import './ChipsDropdown.scss';
 export interface IChipsDropdownProps {
-    items: IChipProps[];
-    color: ChipColorsType;
-    theme: ChipsThemeType;
+    items: IChipBadgeProps[];
+    color: IChipBadgeProps['color'];
+    theme: IChipBadgeProps['theme'];
     moreTitle: string;
     short: boolean;
-    value?: ChipIdType;
+    value?: IChipBadgeProps['id'];
     paddings?: DropdownItemsPaddingType;
     classes?: {
         root?: string;
@@ -22,7 +22,7 @@ export interface IChipsDropdownProps {
         list?: Record<string, string>;
         item?: Record<string, string>;
     };
-    onClick: (e: React.SyntheticEvent<EventTarget>, id: ChipIdType) => void;
+    onClick: (e: React.SyntheticEvent<EventTarget>, id: IChipBadgeProps['id']) => void;
 }
 declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
 export default ChipsDropdown;

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

@@ -13,7 +13,7 @@ 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"));
+var _ChipBadge = _interopRequireDefault(require("../../ChipBadge"));
 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 }; }
@@ -31,7 +31,6 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
     classes = _ref$classes === void 0 ? {} : _ref$classes,
     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],
@@ -74,17 +73,14 @@ var ChipsDropdown = function ChipsDropdown(_ref) {
   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, {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_ChipBadge["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])
-    }),
+    classes: currentItem.classes,
     color: color,
     theme: theme,
+    opened: isDropdownOpen,
     checked: !!currentItem.id,
-    arrow: "down",
+    showArrow: true,
     onClick: handleOpenItemList
   })), /*#__PURE__*/React.createElement(_Dropdown["default"], {
     items: dropdownItems,

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

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-chips-scroll-panel::-webkit-scrollbar{display:none}.mfui-9-chips-scroll-panel__inner{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:end;-ms-flex-align:end;align-items:end;height:100%}@media screen and (max-width:767px){.mfui-9-chips-scroll-panel__inner{gap:8px}}

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

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

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

@@ -12,7 +12,7 @@ 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"));
+var _ChipBadge = _interopRequireDefault(require("../../ChipBadge"));
 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 }; }
@@ -84,7 +84,7 @@ var ChipsScrollPanel = function ChipsScrollPanel(_ref) {
     return /*#__PURE__*/React.createElement("div", {
       key: id,
       className: cn('slide')
-    }, /*#__PURE__*/React.createElement(_Chip["default"], (0, _extends2["default"])({}, rest, {
+    }, /*#__PURE__*/React.createElement(_ChipBadge["default"], (0, _extends2["default"])({}, rest, {
       id: id,
       checked: checked,
       color: color,

package/dist/lib/components/Modal/Modal.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-modal-open-body{height:100%;overflow:hidden}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-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:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-modal__overlay{display:-webkit-box;display:-ms-flexbox;display:flex;left:0;position:fixed;top:0;z-index:1000;-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:start;-ms-flex-pack:start;-webkit-animation:show-popup-overlay .3s ease-out forwards;animation:show-popup-overlay .3s ease-out forwards;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;justify-content:flex-start;opacity:0;padding:72px 0;width:100%}.mfui-9-modal__modal-content{margin:auto;position:relative}.mfui-9-modal__modal-content:focus-visible{outline:none}.mfui-9-modal_full-view .mfui-9-modal__overlay{display:block;padding:32px 0 0;top:32px}.mfui-9-modal_full-view .mfui-9-modal__modal-content{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:100%;width:100%}.mfui-9-modal_bottom-view .mfui-9-modal__overlay{bottom:0;display:block;height:auto;overflow:hidden;padding-bottom:0}.mfui-9-modal_bottom-view .mfui-9-modal__modal-content{height:100%;margin:0;outline:none;overflow:hidden}.mfui-9-modal_native-scroll .mfui-9-modal__overlay{overflow-x:hidden;overflow-y:scroll}@media screen and (hover:hover){.mfui-9-modal_native-scroll .mfui-9-modal__overlay{width:calc(100% + 15px)}}.mfui-9-modal_transition-end .mfui-9-modal__overlay{-webkit-animation:hide-popup-overlay .2s ease-in;animation:hide-popup-overlay .2s ease-in}@-webkit-keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@keyframes show-popup-overlay{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}@keyframes hide-popup-overlay{0%{opacity:1}to{opacity:0}}

package/dist/lib/components/Modal/Modal.js

@@ -38,7 +38,6 @@ var MODAL_TRANSITIONS_STEPS_ENUM;
   MODAL_TRANSITIONS_STEPS_ENUM["MOVE_END_STEP"] = "move-end-step";
   MODAL_TRANSITIONS_STEPS_ENUM["END_STEP"] = "end-step";
 })(MODAL_TRANSITIONS_STEPS_ENUM || (exports.MODAL_TRANSITIONS_STEPS_ENUM = MODAL_TRANSITIONS_STEPS_ENUM = {}));
-var bodyCn = (0, _uiHelpers.cnCreate)('mfui-9-modal-open-body');
 var cn = (0, _uiHelpers.cnCreate)('mfui-9-modal');
 var Modal = function Modal(_ref) {
   var className = _ref.className,
@@ -173,9 +172,13 @@ var Modal = function Modal(_ref) {
     handleSetScrollContentMaxHeight();
   }, [isEnabledNativeScroll, handleSetScrollContentMaxHeight]);
   var handleAfterOpen = function handleAfterOpen() {
+    (0, _utils.changeBodyStyles)(true);
     handleSetStyles();
     onAfterModalOpen === null || onAfterModalOpen === void 0 ? void 0 : onAfterModalOpen();
   };
+  var handleAfterClose = function handleAfterClose() {
+    (0, _utils.changeBodyStyles)(false);
+  };
   var handlePopupClose = function handlePopupClose() {
     setTransitionStep(MODAL_TRANSITIONS_STEPS_ENUM.END_STEP);
   };
@@ -192,7 +195,6 @@ var Modal = function Modal(_ref) {
   };
   React.useEffect(function () {
     setIsPopupOpened(isOpened);
-    (0, _utils.changeBodyPadding)(isOpened);
     if (!isOpened) {
       setContainerWrapHeight(undefined);
     }
@@ -252,14 +254,19 @@ var Modal = function Modal(_ref) {
   }, [isEnabledNativeScroll, isFooterPropsDiff, isRecalculateHeight, isHeaderPropsDiff, handleSetScrollContentMaxHeight]);
   React.useEffect(function () {
     return function () {
-      setIsPopupOpened(false);
-      document.body.style.paddingRight = '';
       if (!containerInnerRef.current || !resizeObserver.current) {
         return;
       }
       resizeObserver.current.unobserve(containerInnerRef.current);
     };
   }, []);
+  React.useEffect(function () {
+    return function () {
+      if (isOpened) {
+        (0, _utils.changeBodyStyles)(false);
+      }
+    };
+  }, [isOpened]);
   var contextProps = {
     classes: classes,
     dataAttrs: dataAttrs,
@@ -314,7 +321,7 @@ var Modal = function Modal(_ref) {
       'native-scroll': isEnabledNativeScroll
     }, [className]),
     overlayClassName: cn('overlay', classes === null || classes === void 0 ? void 0 : classes.overlay),
-    bodyOpenClassName: bodyCn('', classes === null || classes === void 0 ? void 0 : classes.bodyOpen),
+    bodyOpenClassName: classes === null || classes === void 0 ? void 0 : classes.bodyOpen,
     isOpen: isPopupOpened,
     ariaHideApp: hideAriaApp,
     contentLabel: contentLabel,
@@ -322,7 +329,8 @@ var Modal = function Modal(_ref) {
     contentRef: getModalContentRef,
     overlayRef: handleGetModalOverlayRef,
     onRequestClose: handlePopupClose,
-    onAfterOpen: handleAfterOpen
+    onAfterOpen: handleAfterOpen,
+    onAfterClose: handleAfterClose
   }, renderContent());
 };
 var _default = exports["default"] = Modal;

package/dist/lib/components/Modal/utils/utils.d.ts

@@ -13,6 +13,6 @@ type CorrectMaxHeightArgsType = {
     };
 };
 export declare const getCorrectMaxHeight: ({ refs, props }: CorrectMaxHeightArgsType) => number;
-export declare const changeBodyPadding: (isOpened: boolean) => void;
+export declare const changeBodyStyles: (isOpened: boolean) => void;
 declare const _default: null;
 export default _default;

package/dist/lib/components/Modal/utils/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCorrectMaxHeight = exports["default"] = exports.changeBodyPadding = void 0;
+exports.getCorrectMaxHeight = exports["default"] = exports.changeBodyStyles = void 0;
 require("core-js/modules/es.parse-int.js");
 var _uiHelpers = require("@megafon/ui-helpers");
 var getAdditionalSize = function getAdditionalSize(refs) {
@@ -54,15 +54,19 @@ var getCorrectMaxHeight = exports.getCorrectMaxHeight = function getCorrectMaxHe
   var correctMaxHeight = isStickyFooter ? maxHeightResize - popupFooterHeight : maxHeightResize;
   return correctMaxHeight;
 };
-var changeBodyPadding = exports.changeBodyPadding = function changeBodyPadding(isOpened) {
+var changeBodyStyles = exports.changeBodyStyles = function changeBodyStyles(isOpened) {
   var windowWidth = window.innerWidth;
   var documentClientWidth = document.documentElement.clientWidth;
   var scrollBarWidth = windowWidth - documentClientWidth;
   var bodyEl = document.body;
   if (!isOpened) {
     bodyEl.style.paddingRight = '';
+    bodyEl.style.height = '';
+    bodyEl.style.overflow = '';
     return;
   }
+  bodyEl.style.height = '100%';
+  bodyEl.style.overflow = 'hidden';
   if (scrollBarWidth === 0) {
     return;
   }

package/dist/lib/components/MultipleSelect/MultipleSelect.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-9-multiple-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;line-height:24px;position:relative;width:100%}.mfui-9-multiple-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:16px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;height:auto;min-height:60px;outline:none;padding:13px 15px;position:relative;-webkit-transition:border-color .3s;transition:border-color .3s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.mfui-9-multiple-select__control:hover{border-color:var(--content)}.mfui-9-multiple-select__input-container{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;overflow:hidden;width:100%}.mfui-9-multiple-select__arrow-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;border-radius:8px;justify-content:center;width:32px}.mfui-9-multiple-select__arrow-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__arrow-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@-webkit-keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__arrow-button:focus{outline:none}.mfui-9-multiple-select__arrow-icon{height:auto;width:100%;fill:var(--spbSky2)}.mfui-9-multiple-select__control_active .mfui-9-multiple-select__arrow-icon{-webkit-transition-duration:.6s;transition-duration:.6s;-webkit-transition-property:color,-webkit-transform;transition-property:color,-webkit-transform;transition-property:transform,color;transition-property:transform,color,-webkit-transform;fill:var(--content)}.mfui-9-multiple-select__input{display:block;position:relative;z-index:1;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;caret-color:var(--brandGreen);color:var(--content);flex-shrink:1;font-family:inherit;font-size:100%;line-height:24px;opacity:1;outline:none;overflow:auto;padding:0;resize:none;width:100px}.mfui-9-multiple-select__input::-webkit-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-moz-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input:-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::-ms-input-placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__input::placeholder{color:var(--spbSky3)}.mfui-9-multiple-select__tag{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--spbSky0);border:none;border-radius:8px;height:32px;max-width:100%;padding:4px 6px 4px 12px}.mfui-9-multiple-select__tag-title{display:block;font-size:15px;font-weight:400;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mfui-9-multiple-select__tag-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:none;padding:0;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:8px;height:20px;min-width:20px;width:20px}.mfui-9-multiple-select__tag-button:disabled{color:inherit;cursor:auto}.mfui-9-multiple-select__tag-button:focus-visible{-webkit-animation:focus-outline-shrink .3s linear forwards;animation:focus-outline-shrink .3s linear forwards;outline-offset:2px}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-multiple-select__tag-button:focus{outline:none}.mfui-9-multiple-select__tag-button-icon{-webkit-transition:fill .3s;transition:fill .3s;fill:var(--spbSky3)}.mfui-9-multiple-select__tag-button:hover .mfui-9-multiple-select__tag-button-icon{fill:var(--content)}.mfui-9-multiple-select__notice-text{color:var(--spbSky3);font-size:12px;font-weight:400;line-height:18px;margin-top:8px}.mfui-9-multiple-select_open .mfui-9-multiple-select__control{border-color:var(--content)}.mfui-9-multiple-select_open .mfui-9-multiple-select__arrow-icon{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-9-multiple-select_disabled{pointer-events:none}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__control{background-color:var(--spbSky0)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__input:not([placeholder]){width:0}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag{background-color:var(--spbSky1)}.mfui-9-multiple-select_disabled .mfui-9-multiple-select__arrow-icon,.mfui-9-multiple-select_disabled .mfui-9-multiple-select__tag-button-icon{fill:var(--spbSky2)}

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './MultipleSelect.scss';
+export type ItemValueType = number | string | undefined;
+export type ItemType = {
+    /** Заголовок элемента */
+    title: string;
+    /** Уникальный идентификатор элемента */
+    value: ItemValueType;
+};
+export interface IMultipleSelectProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Элементы выпадающего списка */
+    items: ItemType[];
+    /** Список выбранных элементов */
+    selectedItems?: ItemType[];
+    /** Ограничение количества выбранных элементов */
+    selectLimit?: number;
+    /** Текст внутри поля по умолчанию */
+    placeholder?: string;
+    /** Максимальное вводимое количество символов */
+    maxLength?: number;
+    /** Текст при отсутствии результатов поиска */
+    notFoundText?: string;
+    /** Дополнительный текст под полем */
+    noticeText?: string;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Пользовательская функция поиска */
+    customSearchFilter?: (item: ItemType, searchQuery: string) => boolean;
+    /** Обработчик выбора элемента селекта */
+    onSelect?: (items: ItemType[]) => void;
+    /** Обработчик выхода из фокуса */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик входа в фокус */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** Обработчик изменения поля при поиске */
+    onSearch?: (query: string) => void;
+    /** Использование функции debounce для onSearch */
+    searchDelay?: number;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        input?: string;
+        list?: string;
+        listItem?: string;
+        tag?: string;
+        tagButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        list?: Record<string, string>;
+        listItem?: Record<string, string>;
+        tag?: Record<string, string>;
+        tagButton?: Record<string, string>;
+    };
+}
+declare const MultipleSelect: React.FC<IMultipleSelectProps>;
+export default MultipleSelect;