@megafon/ui-core 8.17.0 → 8.17.1

package/dist/lib/components/Checkbox/Checkbox.js

@@ -1,95 +0,0 @@
-"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-require("core-js/modules/es.function.name.js");
-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 CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
-  }));
-};
-var CHANGE_KEY = 'change';
-var cn = (0, _uiHelpers.cnCreate)('mfui-checkbox');
-var Checkbox = function Checkbox(_ref) {
-  var className = _ref.className,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
-    name = _ref.name,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'dark' : _ref$color,
-    value = _ref.value,
-    _ref$checked = _ref.checked,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    disabled = _ref.disabled,
-    error = _ref.error,
-    children = _ref.children,
-    extraContent = _ref.extraContent,
-    dataAttrs = _ref.dataAttrs,
-    classes = _ref.classes,
-    _ref$disableBottomMar = _ref.disableBottomMargin,
-    disableBottomMargin = _ref$disableBottomMar === void 0 ? false : _ref$disableBottomMar,
-    onChange = _ref.onChange;
-  var isTouch = (0, _uiHelpers.detectTouch)();
-  var _React$useState = React.useState(checked),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isChecked = _React$useState2[0],
-    setIsChecked = _React$useState2[1];
-  React.useEffect(function () {
-    setIsChecked(checked);
-  }, [checked]);
-  var handleChange = function handleChange(e) {
-    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e) || e.type === CHANGE_KEY) {
-      setIsChecked(!isChecked);
-      onChange === null || onChange === void 0 ? void 0 : onChange(!isChecked);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn('', {
-      'font-size': fontSize,
-      color: color,
-      checked: isChecked,
-      disabled: disabled,
-      error: error,
-      'bottom-margin': !disableBottomMargin,
-      single: !children && !extraContent
-    }, className)
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.inner)), /*#__PURE__*/React.createElement("label", {
-    className: cn('label', {
-      'no-touch': !isTouch
-    })
-  }, /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
-    className: cn('input'),
-    type: "checkbox",
-    tabIndex: -1,
-    name: name,
-    value: value,
-    checked: isChecked,
-    onChange: handleChange,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput), {
-    tabIndex: 0,
-    role: "checkbox",
-    "aria-checked": isChecked,
-    className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
-    onKeyDown: handleChange
-  }), /*#__PURE__*/React.createElement(CheckedIcon, {
-    className: cn('icon')
-  })), children), extraContent && /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraContent), {
-    className: cn('extra-content')
-  }), extraContent)));
-};
-var _default = exports["default"] = Checkbox;

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

@@ -1 +0,0 @@
-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

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

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

@@ -1,86 +0,0 @@
-"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"] = 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 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"
-  }));
-};
-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"
-  }));
-};
-var ChipColors = exports.ChipColors = {
-  DEFAULT: 'default',
-  BLACK: 'black'
-};
-var ChipArrow = exports.ChipArrow = {
-  UP: 'up',
-  DOWN: 'down'
-};
-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,
-    checked = _ref$checked === void 0 ? false : _ref$checked,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    icon = _ref.icon,
-    counterValue = _ref.counterValue,
-    arrow = _ref.arrow,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    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]);
-  return /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({
-    type: "button",
-    className: cn({
-      color: color,
-      checked: checked,
-      disabled: disabled,
-      'with-icon': !!icon
-    }, [className, classes.root, checkedClass])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    disabled: disabled,
-    onClick: handleClick,
-    ref: rootRef
-  }), !!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"])({
-    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"])({
-    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')
-  }, (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.css

@@ -1 +0,0 @@
-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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { ChipColorsType, ChipIdType, IChipProps } from './Chip';
-import './Chips.scss';
-export interface IChipsProps {
-    /** Массив элементов */
-    items: IChipProps[];
-    /** Значение (идентификатор активного элемента). Начальное значение в неконтролируемом состоянии */
-    value?: ChipIdType;
-    /** Цвет активного элемента */
-    color?: ChipColorsType;
-    /** Горизонтальное выравнивание */
-    align?: 'left' | 'center';
-    /** Переводит компонент в контролируемое состояние */
-    isControlled?: boolean;
-    /** Горизонтальный скролл (отключается на разрешениях, для которых задан лимит отображаемых элементов) */
-    isScrollable?: boolean;
-    /** Количество отображаемых элементов на всех разрешениях экрана */
-    visibleItemsCountAll?: number;
-    /** Количество отображаемых элементов на разрешении 768 - 1023 */
-    visibleItemsCountTablet?: number;
-    /** Количество отображаемых элементов на разрешении 1024 - 1279 */
-    visibleItemsCountDesktop?: number;
-    /** Количество отображаемых элементов на разрешении 1280+ */
-    visibleItemsCountWide?: number;
-    /** Название дополнительной кнопки */
-    moreTitle?: string;
-    /** Обработчик изменения значения */
-    onChange?: (id: ChipIdType, e?: React.SyntheticEvent<EventTarget>) => void;
-    /** Дополнительный класс корневого элемента */
-    className?: string;
-    /** Дополнительные классы для внутренних элементов */
-    classes?: {
-        root?: string;
-        dropdown?: string;
-        dropdownList?: string;
-        scroll?: string;
-        scrollInner?: string;
-    };
-    /** Дополнительные data атрибуты к внутренним элементам */
-    dataAttrs?: {
-        root?: Record<string, string>;
-        dropdown?: Record<string, string>;
-        dropdownList?: Record<string, string>;
-        scroll?: Record<string, string>;
-        scrollInner?: Record<string, string>;
-    };
-}
-declare const Chips: React.FC<IChipsProps>;
-export default Chips;

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

@@ -1,172 +0,0 @@
-"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");
-require("core-js/modules/es.array.slice.js");
-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 _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;
-var cn = (0, _uiHelpers.cnCreate)('mfui-chips');
-var Chips = function Chips(_ref) {
-  var items = _ref.items,
-    value = _ref.value,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
-    _ref$moreTitle = _ref.moreTitle,
-    moreTitle = _ref$moreTitle === void 0 ? 'Еще' : _ref$moreTitle,
-    visibleItemsCountAll = _ref.visibleItemsCountAll,
-    visibleItemsCountTablet = _ref.visibleItemsCountTablet,
-    visibleItemsCountDesktop = _ref.visibleItemsCountDesktop,
-    visibleItemsCountWide = _ref.visibleItemsCountWide,
-    _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,
-    _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),
-    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],
-    setVisibleItemsCount = _React$useState4[1];
-  var _React$useState5 = React.useState([]),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-    visibleItems = _React$useState6[0],
-    setVisibleItems = _React$useState6[1];
-  var _React$useState7 = React.useState(null),
-    _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 && id !== selectedId) {
-      !isControlled && setInnerSelectedId(id);
-      onChange === null || onChange === void 0 ? void 0 : onChange(id, e);
-    }
-  }, [isControlled, onChange, selectedId]);
-  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,
-        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;
-      if (visibleItemsCountWide && windowWidth >= DESKTOP_MIDDLE_START) {
-        setVisibleItemsCount(visibleItemsCountWide);
-        return;
-      }
-      if (visibleItemsCountDesktop && windowWidth >= DESKTOP_SMALL_START && windowWidth < DESKTOP_MIDDLE_START) {
-        setVisibleItemsCount(visibleItemsCountDesktop);
-        return;
-      }
-      if (visibleItemsCountTablet && windowWidth >= MOBILE_BIG_START && windowWidth < DESKTOP_SMALL_START) {
-        setVisibleItemsCount(visibleItemsCountTablet);
-        return;
-      }
-      setVisibleItemsCount(visibleItemsCountAll);
-    };
-    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
-    resizeHandler();
-    window.addEventListener('resize', resizeHandlerThrottled);
-    return function () {
-      window.removeEventListener('resize', resizeHandlerThrottled);
-    };
-  }, [visibleItemsCountAll, visibleItemsCountDesktop, visibleItemsCountTablet, visibleItemsCountWide]);
-  React.useEffect(function () {
-    if (visibleItemsCount && items.length > visibleItemsCount) {
-      setVisibleItems(items.slice(0, visibleItemsCount));
-      setHiddenItems(items.slice(visibleItemsCount));
-    } else {
-      setVisibleItems(items);
-      setHiddenItems(null);
-    }
-  }, [items, visibleItemsCount]);
-  React.useEffect(function () {
-    setIsScrollableMode(isScrollable && !visibleItemsCount);
-  }, [isScrollable, visibleItemsCount]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn({
-      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,
-    color: color,
-    onClick: handleClick,
-    classes: {
-      root: classes.dropdown,
-      list: classes.dropdownList
-    },
-    dataAttrs: {
-      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdown,
-      list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.dropdownList
-    }
-  }));
-};
-var _default = exports["default"] = Chips;

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

@@ -1 +0,0 @@
-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-chips-dropdown{position:relative}.mfui-chips-dropdown__button{width:100%}.mfui-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-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-chips-dropdown__list-inner::-webkit-scrollbar{width:16px}.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--spbSky2);border:6px solid transparent;border-radius:16px}.mfui-chips-dropdown__list-inner::-webkit-scrollbar-thumb:hover{background-color:var(--spbSky3)}.mfui-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-chips-dropdown__list-item:hover{background-color:var(--spbSky0)}.mfui-chips-dropdown__list-item_with-icon{padding-left:16px;padding-right:16px}.mfui-chips-dropdown__icon{display:block;margin-right:16px;max-height:24px;min-width:24px;width:24px}.mfui-chips-dropdown__icon svg{display:block;height:100%;width:100%;fill:var(--content)}

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { ChipColorsType, ChipIdType, 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;
-    classes?: {
-        root?: string;
-        list?: string;
-    };
-    dataAttrs?: {
-        root?: Record<string, string>;
-        list?: Record<string, string>;
-    };
-}
-declare const ChipsDropdown: React.FC<IChipsDropdownProps>;
-export default ChipsDropdown;

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

@@ -1,101 +0,0 @@
-"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.array.find.js");
-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"));
-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-chips-dropdown');
-var ChipsDropdown = function ChipsDropdown(_ref) {
-  var color = _ref.color,
-    moreTitle = _ref.moreTitle,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    value = _ref.value,
-    onClick = _ref.onClick,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    dataAttrs = _ref.dataAttrs;
-  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 currentItem = React.useMemo(function () {
-    return items.find(function (item) {
-      return item.id === value;
-    }) || {
-      id: '',
-      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) {
-    return function (e) {
-      e.persist();
-      setIsDropdownOpen(false);
-      onClick(e, item.id);
-    };
-  }, [onClick]);
-  React.useEffect(function () {
-    if (!isDropdownOpen) {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    }
-  }, [handleOutsideClick, isDropdownOpen]);
-  React.useEffect(function () {
-    return function () {
-      return document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  }, [handleOutsideClick]);
-  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]),
-    color: color,
-    checked: !!currentItem.id,
-    arrow: isDropdownOpen ? 'up' : '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);
-  }))));
-};
-var _default = exports["default"] = ChipsDropdown;

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

@@ -1 +0,0 @@
-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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { ChipColorsType, ChipIdType, 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;
-    onClick: (e: React.SyntheticEvent<EventTarget>, id?: ChipIdType) => void;
-}
-declare const ChipsScrollPanel: React.FC<IChipsScrollPanelProps>;
-export default ChipsScrollPanel;