@megafon/ui-core 9.2.1 → 9.3.0

package/dist/lib/components/MultipleSelect/MultipleSelect.js

@@ -0,0 +1,244 @@
+"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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.some.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiHelpers = require("@megafon/ui-helpers");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _Dropdown = _interopRequireDefault(require("../Dropdown/Dropdown"));
+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 ClearIcon = function ClearIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.762 5.76a1 1 0 011.415 0l2.795 2.79 2.788-2.785a1.001 1.001 0 011.415 1.414l-2.788 2.785 2.789 2.787a1 1 0 01-1.414 1.414l-2.79-2.787-2.796 2.794A1 1 0 115.76 12.76l2.796-2.794-2.795-2.792a1 1 0 010-1.414z"
+  }));
+};
+var ArrowIcon = function ArrowIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M16.774 18.697a1.092 1.092 0 01-1.51 0l-3.953-3.82c-.682-.66-.165-1.877.794-1.877h7.798c.96 0 1.465 1.217.783 1.876l-3.912 3.82z"
+  }));
+};
+var isItemSelected = function isItemSelected(item, selectedItems) {
+  return selectedItems.some(function (selectedItem) {
+    return selectedItem.value === item.value;
+  });
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-9-multiple-select');
+var MultipleSelect = function MultipleSelect(_ref) {
+  var items = _ref.items,
+    _ref$selectedItems = _ref.selectedItems,
+    selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+    placeholder = _ref.placeholder,
+    selectLimit = _ref.selectLimit,
+    maxLength = _ref.maxLength,
+    className = _ref.className,
+    _ref$notFoundText = _ref.notFoundText,
+    notFoundText = _ref$notFoundText === void 0 ? 'Ничего не нашлось' : _ref$notFoundText,
+    noticeText = _ref.noticeText,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    customSearchFilter = _ref.customSearchFilter,
+    onSelect = _ref.onSelect,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onSearch = _ref.onSearch,
+    searchDelay = _ref.searchDelay,
+    isControlled = _ref.isControlled,
+    _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 _React$useState3 = React.useState(selectedItems),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    innerSelectedItems = _React$useState4[0],
+    setInnerSelectedItems = _React$useState4[1];
+  var _React$useState5 = React.useState(items),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
+    innerCurrentItems = _React$useState6[0],
+    setInnerCurrentItems = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
+    searchQuery = _React$useState8[0],
+    setSearchQuery = _React$useState8[1];
+  var containerRef = React.useRef(null);
+  var inputRef = React.useRef(null);
+  var currentItems = isControlled ? items : innerCurrentItems;
+  var currentSelectedItems = isControlled ? selectedItems : innerSelectedItems;
+  var isSelectActive = !selectLimit || currentSelectedItems.length < selectLimit;
+  var filteredItems = currentSelectedItems.length ? currentItems.filter(function (item) {
+    return !isItemSelected(item, currentSelectedItems);
+  }) : currentItems;
+  var showItemsList = isDropdownOpen && isSelectActive;
+  var debouncedSearch = React.useMemo(function () {
+    return (0, _lodash["default"])(function (query) {
+      return onSearch === null || onSearch === void 0 ? void 0 : onSearch(query);
+    }, searchDelay);
+  }, [onSearch, searchDelay]);
+  var filterItemsBySearch = React.useCallback(function (itemsToFilter, query) {
+    if (!query) {
+      return itemsToFilter;
+    }
+    if (customSearchFilter) {
+      return itemsToFilter.filter(function (item) {
+        return customSearchFilter(item, query);
+      });
+    }
+    return itemsToFilter.filter(function (item) {
+      return item.title.toLowerCase().includes(query.toLowerCase());
+    });
+  }, [customSearchFilter]);
+  var handleInputChange = React.useCallback(function (e) {
+    var _e$target$value = e.target.value,
+      inputValue = _e$target$value === void 0 ? '' : _e$target$value;
+    setSearchQuery(inputValue);
+    if (!isControlled) {
+      var matchesItems = filterItemsBySearch(items, inputValue);
+      setInnerCurrentItems(matchesItems);
+    }
+    if (!searchDelay) {
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue);
+    } else {
+      debouncedSearch(inputValue);
+    }
+  }, [debouncedSearch, filterItemsBySearch, isControlled, items, onSearch, searchDelay]);
+  var handleSelectItem = React.useCallback(function (item) {
+    if (!isSelectActive) {
+      return;
+    }
+    var newSelectedItems = [].concat((0, _toConsumableArray2["default"])(currentSelectedItems), [item]);
+    !isControlled && setInnerSelectedItems(newSelectedItems);
+    setSearchQuery('');
+    inputRef.current && inputRef.current.focus();
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedItems);
+  }, [isControlled, isSelectActive, onSelect, currentSelectedItems]);
+  var handleSelect = function handleSelect(index) {
+    return function () {
+      var targetItem = filteredItems[index];
+      handleSelectItem(targetItem);
+    };
+  };
+  var handleFocus = React.useCallback(function (e) {
+    setIsDropdownOpen(true);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+  }, [onFocus]);
+  var handleBlur = React.useCallback(function (e) {
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
+  }, [onBlur]);
+  var removeSelectedItem = React.useCallback(function (itemToRemove) {
+    return function () {
+      var newSelectedItems = currentSelectedItems.filter(function (item) {
+        return item.value !== itemToRemove.value;
+      });
+      !isControlled && setInnerSelectedItems(newSelectedItems);
+      setIsDropdownOpen(true);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(newSelectedItems);
+    };
+  }, [currentSelectedItems, isControlled, onSelect]);
+  var handleToggleDropdown = React.useCallback(function () {
+    setIsDropdownOpen(function (prev) {
+      return !prev;
+    });
+  }, []);
+  var handleDropdownClose = function handleDropdownClose() {
+    setIsDropdownOpen(false);
+  };
+  React.useEffect(function () {
+    if (!searchQuery && !isControlled) {
+      setInnerCurrentItems(items);
+    }
+  }, [isControlled, items, searchQuery]);
+  var renderList = function renderList() {
+    return /*#__PURE__*/React.createElement(_Dropdown["default"], {
+      isOpen: showItemsList,
+      targetRef: containerRef,
+      items: filteredItems,
+      emptyText: notFoundText,
+      onItemClick: handleSelect,
+      onClose: handleDropdownClose,
+      classes: {
+        list: classes === null || classes === void 0 ? void 0 : classes.list,
+        item: classes === null || classes === void 0 ? void 0 : classes.listItem
+      },
+      dataAttrs: {
+        list: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list,
+        item: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.listItem
+      }
+    });
+  };
+  var renderItemTag = function renderItemTag(item, i) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      key: item.value,
+      className: cn('tag', [classes === null || classes === void 0 ? void 0 : classes.tag])
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tag, i + 1)), /*#__PURE__*/React.createElement("span", {
+      className: cn('tag-title')
+    }, item.title), /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({
+      className: cn('tag-button', [classes === null || classes === void 0 ? void 0 : classes.tagButton])
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tagButton, i + 1), {
+      type: "button",
+      disabled: disabled,
+      onClick: removeSelectedItem(item)
+    }), /*#__PURE__*/React.createElement(ClearIcon, {
+      className: cn('tag-button-icon')
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      open: showItemsList,
+      disabled: disabled
+    }, [className, classes.root])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('control', {
+      active: isSelectActive
+    }),
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('input-container')
+  }, currentSelectedItems === null || currentSelectedItems === void 0 ? void 0 : currentSelectedItems.map(function (item, i) {
+    return renderItemTag(item, i);
+  }), isSelectActive && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input', [classes.input])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
+    id: "search",
+    placeholder: placeholder,
+    value: searchQuery,
+    maxLength: maxLength,
+    disabled: disabled,
+    onChange: handleInputChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    type: "text",
+    autoComplete: "off",
+    ref: inputRef
+  }))), /*#__PURE__*/React.createElement("button", {
+    className: cn('arrow-button'),
+    type: "button",
+    disabled: !isSelectActive || disabled,
+    onClick: handleToggleDropdown
+  }, /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: cn('arrow-icon')
+  })), renderList()), noticeText && /*#__PURE__*/React.createElement("div", {
+    className: cn('notice-text')
+  }, noticeText));
+};
+var _default = exports["default"] = MultipleSelect;

package/dist/lib/components/Row/Row.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row: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)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (max-width:767px){.mfui-9-row__icon-container{margin-left:-4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-row__icon-container{height:52px;margin-right:16px;width:52px}}@media screen and (min-width:1280px){.mfui-9-row__icon-container{height:56px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:url(#row-icon-linear-gradient)}.mfui-9-row__gradient-defs{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.mfui-9-row__icon-container_gray-simple{background-color:var(--spbSky0);border-radius:12px}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (max-width:767px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}@media screen and (max-width:767px){.mfui-9-row__title{font-size:15px;font-weight:500;line-height:24px}}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (max-width:767px){.mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:12px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}}@media screen and (min-width:768px){.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (max-width:767px){.mfui-9-row_has-icon{padding:12px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}}@media screen and (min-width:1024px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:48px;width:48px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon,.mfui-9-row_size_small .mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}@media screen and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}
+h1,h2,h3,h4,h5{margin:0}.mfui-9-row{background-color:var(--base);border:none;border-radius:16px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:12px 16px;position:relative;text-decoration:none;-webkit-transition:background-color,color,-webkit-box-shadow;transition:background-color,color,-webkit-box-shadow;transition:background-color,color,box-shadow;transition:background-color,color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}.mfui-9-row: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)}}@keyframes focus-outline-shrink{0%{outline:0 solid var(--137C)}to{outline:4px solid var(--137C)}}.mfui-9-row:focus{outline:none}@media screen and (min-width:768px){.mfui-9-row{padding:20px 24px}}@media screen and (min-width:1024px){.mfui-9-row{padding:24px 32px}}.mfui-9-row:hover{text-decoration:none}.mfui-9-row__wrapper{width:100%}.mfui-9-row__icon-container,.mfui-9-row__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-9-row__icon-container{-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;height:40px;justify-content:center;margin-right:8px;width:40px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row__icon-container{height:48px;margin-right:12px;width:48px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-9-row__icon-container{height:52px;margin-right:16px;width:52px}}@media screen and (min-width:1280px){.mfui-9-row__icon-container{height:56px;width:56px}}.mfui-9-row__icon-container svg{fill:var(--content)}.mfui-9-row__icon-container_colored{background-color:var(--brandGreen20);border-radius:12px}.mfui-9-row__icon-container_colored svg{fill:url(#row-icon-linear-gradient)}.mfui-9-row__gradient-defs{height:0;overflow:hidden;pointer-events:none;position:absolute;width:0}.mfui-9-row__icon-container_gray-simple{background-color:var(--spbSky0);border-radius:12px}.mfui-9-row__icon,.mfui-9-row__icon svg{height:32px;min-width:32px;width:32px}@media screen and (max-width:767px){.mfui-9-row__icon,.mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}.mfui-9-row__header{margin-right:auto;padding-right:12px}.mfui-9-row__sub-title{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:2px}@media screen and (min-width:768px){.mfui-9-row__sub-title:not(.mfui-9-row_size_small){font-size:15px;line-height:24px;margin-top:4px}}.mfui-9-row__arrow{height:32px;min-width:32px;width:32px;fill:var(--spbSky3)}@media screen and (max-width:767px){.mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}@media screen and (min-width:768px){.mfui-9-row__arrow{margin-left:4px}}@media screen and (min-width:1024px){.mfui-9-row__arrow{margin-left:12px}}.mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}@media screen and (min-width:768px){.mfui-9-row__children{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}}@media screen and (min-width:768px) and (min-width:1280px){.mfui-9-row__children{font-size:20px;line-height:28px}}.mfui-9-row_view_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-9-row_view_stroke{background-color:inherit;border:1px solid var(--spbSky2)}.mfui-9-row_view_gray{background-color:var(--spbSky0)}.mfui-9-row_view_gray .mfui-9-row__icon-container{background-color:var(--base);border-radius:12px}.mfui-9-row_view_white{background-color:var(--base)}.mfui-9-row_pointer{cursor:pointer}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_shadow:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_pointer.mfui-9-row_view_stroke:hover{background-color:var(--spbSky0)}.mfui-9-row_pointer.mfui-9-row_view_gray:hover{background-color:var(--spbSky1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-9-row_pointer.mfui-9-row_view_white:hover:after{background-color:var(--stcWhite10);border-radius:12px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.mfui-9-row_has-arrow{padding-right:12px}@media screen and (min-width:768px){.mfui-9-row_has-arrow{padding-right:16px}}@media screen and (min-width:1024px){.mfui-9-row_has-arrow{padding-right:20px}}@media screen and (min-width:768px){.mfui-9-row_has-arrow.mfui-9-row_size_small{padding-right:16px}}@media screen and (max-width:767px){.mfui-9-row_has-icon{padding:12px}}@media screen and (min-width:768px){.mfui-9-row_size_small{padding:16px 24px 16px 20px}}@media screen and (min-width:1024px){.mfui-9-row_size_small{padding:20px 24px}.mfui-9-row_size_small .mfui-9-row__sub-title{font-size:15px;line-height:24px;margin-top:4px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:40px;width:40px}}@media screen and (min-width:1024px){.mfui-9-row_size_small .mfui-9-row__icon-container{height:48px;width:48px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__icon,.mfui-9-row_size_small .mfui-9-row__icon svg{height:20px;min-width:20px;width:20px}}@media screen and (max-width:1023px){.mfui-9-row_size_small .mfui-9-row__arrow{height:20px;margin-left:4px;min-width:20px;width:20px}}.mfui-9-row_size_small .mfui-9-row__children{font-size:15px;font-weight:500;line-height:24px}.mfui-9-row_auto-height{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto}

package/dist/lib/components/Row/Row.js

@@ -52,7 +52,7 @@ var Row = function Row(_ref) {
   var ElementType = href ? 'a' : 'div';
   var isActive = !showLoader && (!!href || !!onClick);
   var isSmallSize = size === 'small';
-  var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow');
+  var isGraySimpleIcon = !isIconColored && (backgroundView === 'stroke' || backgroundView === 'shadow' || backgroundView === 'white');
   var _useResolution = (0, _useResolution2["default"])(),
     isMobile = _useResolution.isMobile;
   var getTitleStyle = function getTitleStyle() {

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

@@ -58,6 +58,12 @@ export interface ITooltipProps {
     title?: string;
     /** Текст кнопки */
     buttonText?: string;
+    /** Ссылка кнопки */
+    buttonHref?: string;
+    /** Target - свойство тега <a> кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> кнопки */
+    buttonRel?: string;
     /** Текст */
     text?: string;
     /** Наличие кнопки-крестика "Закрыть" */

package/dist/lib/components/Tooltip/Tooltip.js

@@ -107,6 +107,10 @@ var Tooltip = function Tooltip(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'big' : _ref$size,
     buttonText = _ref.buttonText,
+    buttonHref = _ref.buttonHref,
+    _ref$buttonTarget = _ref.buttonTarget,
+    buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
+    buttonRel = _ref.buttonRel,
     hasCloseButton = _ref.hasCloseButton,
     _ref$colorTheme = _ref.colorTheme,
     theme = _ref$colorTheme === void 0 ? 'white' : _ref$colorTheme,
@@ -325,25 +329,34 @@ var Tooltip = function Tooltip(_ref) {
   var renderedFullContent = useMemo(function () {
     var hasButtonMargin = !!title || !!text;
     var hasChildrenMargin = hasButtonMargin || !!buttonText;
+    var isLink = !!buttonHref;
+    var ButtonElementType = isLink ? 'a' : 'button';
+    var linkProps = {
+      href: buttonHref,
+      target: buttonTarget,
+      rel: buttonRel,
+      onClick: onClick
+    };
+    var buttonProps = {
+      onClick: onClick,
+      type: 'button'
+    };
     return /*#__PURE__*/React.createElement(React.Fragment, null, !!title && /*#__PURE__*/React.createElement(_Header["default"], {
       className: cn('title'),
       as: "h5",
       space: "tight"
-    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement("button", (0, _extends2["default"])({
-      type: "button",
+    }, title), !!text && renderedText, !!buttonText && /*#__PURE__*/React.createElement(ButtonElementType, (0, _extends2["default"])({
       className: cn('button', {
         margin: hasButtonMargin
       }, [buttonClassName])
-    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), {
-      onClick: onClick
-    }), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), isLink ? linkProps : buttonProps), buttonText, /*#__PURE__*/React.createElement(RightArrow, {
       className: cn('button-arrow')
     })), !!children && /*#__PURE__*/React.createElement("div", {
       className: cn('addititonal-content', {
         margin: hasChildrenMargin
       })
     }, children));
-  }, [title, text, buttonText, children, dataAttrs, renderedText, onClick, buttonClassName]);
+  }, [title, text, buttonText, buttonHref, buttonTarget, buttonRel, onClick, renderedText, buttonClassName, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, children]);
   var template = /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       theme: theme,

package/dist/lib/index.d.ts

@@ -10,6 +10,7 @@ export { default as Carousel } from './components/Carousel/Carousel';
 export { default as Checkbox } from './components/Checkbox/Checkbox';
 export { default as checkBreakpointsPropTypes } from './components/Carousel/checkBreakpointsPropTypes';
 export { default as Chip } from './components/Chips/Chips/Chip';
+export { default as ChipBadge } from './components/Chips/Chips/ChipBadge';
 export { default as Chips } from './components/Chips/Chips/Chips';
 export { default as ChipsDropdown } from './components/Chips/Chips/components/ChipsDropdown/ChipsDropdown';
 export { default as ChipsScrollPanel } from './components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel';
@@ -40,6 +41,7 @@ export { default as ModalContent } from './components/Modal/_ModalContent/ModalC
 export { default as ModalDesktop } from './components/Modal/_ModalDesktop/ModalDesktop';
 export { default as ModalMobile } from './components/Modal/_ModalMobile/ModalMobile';
 export { default as Month } from './components/Calendar/components/_Month/Month';
+export { default as MultipleSelect } from './components/MultipleSelect/MultipleSelect';
 export { default as NavArrow } from './components/NavArrow/NavArrow';
 export { default as Notification } from './components/Notification/Notification';
 export { default as NotificationBadge } from './components/Badges/NotificationBadge/NotificationBadge';

package/dist/lib/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "Chip", {
     return _Chip["default"];
   }
 });
+Object.defineProperty(exports, "ChipBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ChipBadge["default"];
+  }
+});
 Object.defineProperty(exports, "ChipSuggest", {
   enumerable: true,
   get: function get() {
@@ -243,6 +249,12 @@ Object.defineProperty(exports, "Month", {
     return _Month["default"];
   }
 });
+Object.defineProperty(exports, "MultipleSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultipleSelect["default"];
+  }
+});
 Object.defineProperty(exports, "NavArrow", {
   enumerable: true,
   get: function get() {
@@ -561,6 +573,7 @@ var _Carousel = _interopRequireDefault(require("./components/Carousel/Carousel")
 var _Checkbox = _interopRequireDefault(require("./components/Checkbox/Checkbox"));
 var _checkBreakpointsPropTypes = _interopRequireDefault(require("./components/Carousel/checkBreakpointsPropTypes"));
 var _Chip = _interopRequireDefault(require("./components/Chips/Chips/Chip"));
+var _ChipBadge = _interopRequireDefault(require("./components/Chips/Chips/ChipBadge"));
 var _Chips = _interopRequireDefault(require("./components/Chips/Chips/Chips"));
 var _ChipsDropdown = _interopRequireDefault(require("./components/Chips/Chips/components/ChipsDropdown/ChipsDropdown"));
 var _ChipsScrollPanel = _interopRequireDefault(require("./components/Chips/Chips/components/ChipsScrollPanel/ChipsScrollPanel"));
@@ -591,6 +604,7 @@ var _ModalContent = _interopRequireDefault(require("./components/Modal/_ModalCon
 var _ModalDesktop = _interopRequireDefault(require("./components/Modal/_ModalDesktop/ModalDesktop"));
 var _ModalMobile = _interopRequireDefault(require("./components/Modal/_ModalMobile/ModalMobile"));
 var _Month = _interopRequireDefault(require("./components/Calendar/components/_Month/Month"));
+var _MultipleSelect = _interopRequireDefault(require("./components/MultipleSelect/MultipleSelect"));
 var _NavArrow = _interopRequireDefault(require("./components/NavArrow/NavArrow"));
 var _Notification = _interopRequireDefault(require("./components/Notification/Notification"));
 var _NotificationBadge = _interopRequireDefault(require("./components/Badges/NotificationBadge/NotificationBadge"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-core",
-    "version": "9.2.1",
+    "version": "9.3.0",
     "files": [
         "dist",
         "styles"
@@ -104,5 +104,5 @@
         "simplebar-react": "^3.2.5",
         "swiper": "^12.1.2"
     },
-    "gitHead": "8254518bd9c3d11cb69d4f1c6c2d156cc005734a"
+    "gitHead": "e090c9565de565ddb498c09b2ae596972996828c"
 }