@megafon/ui-core 8.16.3 → 8.17.1

package/dist/es/components/Search/Search.js

@@ -1,576 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.parse-float.js";
-import "core-js/modules/es.regexp.constructor.js";
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.regexp.sticky.js";
-import "core-js/modules/es.regexp.to-string.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.string.split.js";
-import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import debounce from 'lodash.debounce';
-import throttle from 'lodash.throttle';
-import throttleTime from "../../constants/throttleTime";
-import Caption from "../Caption/Caption";
-import Header from "../Header/Header";
-import Preloader from "../Preloader/Preloader";
-import ScrollBar from "../ScrollBar/ScrollBar";
-import "./Search.css";
-var SearchIcon16 = function SearchIcon16(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M17 9a7 7 0 10-3.32 6l2.49 3 .77-.64-2.47-3A7 7 0 0017 9zM4 9a6 6 0 116 6 6 6 0 01-6-6z"
-  }));
-};
-var SearchIcon = function SearchIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 32 32"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M16 24a9.94 9.94 0 005.7-1.8l4.83 5.8L28 26.72l-4.78-5.82A10 10 0 1016 24zm0-18a8 8 0 11-8 8 8 8 0 018-8z"
-  }));
-};
-var ClearIcon = function ClearIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    className: "ClearIcon__st0",
-    d: "M10 8.8L6.2 5 5 6.2 8.8 10 5 13.8 6.2 15l3.8-3.8 3.8 3.8 1.2-1.2-3.8-3.8L15 6.2 13.8 5 10 8.8z"
-  }));
-};
-var ResizeIcon = function ResizeIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 12,
-    height: 12
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M1 11L11 1M7 11l4-4"
-  }));
-};
-var DEFAULT_ROW_COUNT = 3;
-var MAX_ROW_COUNT = 6;
-var TEXTAREA_ROW_HEIGHT = 24;
-var TEXTAREA_MAX_HEIGHT = TEXTAREA_ROW_HEIGHT * MAX_ROW_COUNT;
-var DEFAULT_LABEL_TOP_POSITION = 16;
-var SEARCH_QUERY_REGEX = /[^A-Z-a-zА-ЯЁа-яё0-9]/g;
-var MAX_POPULAR_ITEMS_LENGTH = 5;
-export var MinTextareaHeight = {
-  ONE_ROW: TEXTAREA_ROW_HEIGHT,
-  THREE_ROWS: TEXTAREA_ROW_HEIGHT * DEFAULT_ROW_COUNT
-};
-export var Verification = {
-  VALID: 'valid',
-  ERROR: 'error'
-};
-export var SearchItemsPaddings = {
-  SMALL: 'small',
-  LARGE: 'large'
-};
-var cn = cnCreate('mfui-search');
-var Search = function Search(_ref) {
-  var dataAttrs = _ref.dataAttrs,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    label = _ref.label,
-    _ref$searchId = _ref.searchId,
-    searchId = _ref$searchId === void 0 ? 'mfuiSearchId' : _ref$searchId,
-    placeholder = _ref.placeholder,
-    hideIcon = _ref.hideIcon,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$changeDelay = _ref.changeDelay,
-    changeDelay = _ref$changeDelay === void 0 ? 250 : _ref$changeDelay,
-    verification = _ref.verification,
-    disabled = _ref.disabled,
-    required = _ref.required,
-    noticeText = _ref.noticeText,
-    maxLength = _ref.maxLength,
-    _ref$maxHeightScrollB = _ref.maxHeightScrollBar,
-    maxHeightScrollBar = _ref$maxHeightScrollB === void 0 ? 350 : _ref$maxHeightScrollB,
-    className = _ref.className,
-    classes = _ref.classes,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'textfield' : _ref$type,
-    textarea = _ref.textarea,
-    showLoader = _ref.showLoader,
-    showNotFound = _ref.showNotFound,
-    textNotFound = _ref.textNotFound,
-    _ref$popularItems = _ref.popularItems,
-    popularItems = _ref$popularItems === void 0 ? [] : _ref$popularItems,
-    popularTitle = _ref.popularTitle,
-    listRef = _ref.listRef,
-    _ref$minTextareaHeigh = _ref.minTextareaHeight,
-    minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
-    showResizer = _ref.showResizer,
-    inputRef = _ref.inputRef,
-    onChange = _ref.onChange,
-    onSubmit = _ref.onSubmit,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    onPopularItemClick = _ref.onPopularItemClick;
-  var _React$useState = React.useState(value),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchQuery = _React$useState2[0],
-    setSearchQuery = _React$useState2[1];
-  var _React$useState3 = React.useState(-1),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeIndex = _React$useState4[0],
-    setActiveIndex = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isFocused = _React$useState6[0],
-    setFocus = _React$useState6[1];
-  var _React$useState7 = React.useState(-1),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    popularActiveIndex = _React$useState8[0],
-    setPopularActiveIndex = _React$useState8[1];
-  var _React$useState9 = React.useState(TEXTAREA_ROW_HEIGHT),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    textareaHeight = _React$useState10[0],
-    setTextareaHeight = _React$useState10[1];
-  var _React$useState11 = React.useState(false),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    isTextareaResizing = _React$useState12[0],
-    setIsTextareaResizing = _React$useState12[1];
-  var _React$useState13 = React.useState(false),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    isTextareaResized = _React$useState14[0],
-    setIsTextareaResized = _React$useState14[1];
-  var debouncedOnChange = React.useRef(debounce(function (inputValue) {
-    return onChange && onChange(inputValue);
-  }, changeDelay));
-  var highlightedItem = React.useRef(null);
-  var containerRef = React.useRef(null);
-  var fieldRef = React.useRef(null);
-  var labelRef = React.useRef(null);
-  var resizerRef = React.useRef(null);
-  var correctPopularItems = React.useMemo(function () {
-    return popularItems.slice(0, MAX_POPULAR_ITEMS_LENGTH);
-  }, [popularItems]);
-  var isCompact = type === 'compact';
-  var isTextarea = textarea && !isCompact;
-  var showClearIcon = isCompact && !!searchQuery;
-  var showTextFieldSubmit = !hideIcon && !isCompact && !showLoader;
-  var showAdditionalElement = !hideIcon || showLoader || showClearIcon;
-  var showPopularItems = !!correctPopularItems.length;
-  var getFieldRef = function getFieldRef(node) {
-    if (!node) {
-      return;
-    }
-    fieldRef.current = node;
-    inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
-  };
-  var textareaResize = React.useCallback(function () {
-    if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
-      return;
-    }
-    fieldRef.current.style.height = "".concat(minTextareaHeight, "px");
-    var scrollHeight = fieldRef.current.scrollHeight;
-    var _window$getComputedSt = window.getComputedStyle(fieldRef.current),
-      paddingTop = _window$getComputedSt.paddingTop,
-      paddingBottom = _window$getComputedSt.paddingBottom;
-    var innerHeight = scrollHeight - parseFloat(paddingTop) - parseFloat(paddingBottom);
-    if (innerHeight >= TEXTAREA_MAX_HEIGHT) {
-      fieldRef.current.style.height = "".concat(TEXTAREA_MAX_HEIGHT, "px");
-      return;
-    }
-    fieldRef.current.style.height = "".concat(innerHeight, "px");
-  }, [isTextareaResized, minTextareaHeight, isTextarea]);
-  var handleChange = React.useCallback(function (e) {
-    var _e$target$value = e.target.value,
-      inputValue = _e$target$value === void 0 ? '' : _e$target$value;
-    setSearchQuery(inputValue);
-    setActiveIndex(-1);
-    if (changeDelay === 0) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      debouncedOnChange.current(inputValue);
-    }
-    textareaResize();
-  }, [changeDelay, onChange, textareaResize]);
-  var handleHoverItem = React.useCallback(function (index) {
-    return function () {
-      setActiveIndex(index);
-    };
-  }, []);
-  var handlePopularItemHover = React.useCallback(function (index) {
-    return function () {
-      setPopularActiveIndex(index);
-    };
-  }, []);
-  var handleSearchSubmit = React.useCallback(function () {
-    onSubmit && searchQuery && onSubmit(searchQuery);
-  }, [searchQuery, onSubmit]);
-  var handleItemSubmit = React.useCallback(function (index) {
-    if (disabled) {
-      return;
-    }
-    var chosenItem = items[index];
-    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenItem.value);
-    if (chosenItem.href) {
-      window.location.href = chosenItem.href;
-    }
-  }, [disabled, items, onSubmit]);
-  var handleSelectSubmit = React.useCallback(function (index) {
-    return function () {
-      handleItemSubmit(index);
-    };
-  }, [handleItemSubmit]);
-  var handleFocus = React.useCallback(function (e) {
-    setFocus(true);
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-  }, [onFocus]);
-  var handleBlur = React.useCallback(function (e) {
-    setFocus(false);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-  }, [onBlur]);
-  var handleClick = React.useCallback(function () {
-    if (activeIndex >= 0) {
-      setActiveIndex(-1);
-    }
-  }, [activeIndex]);
-  var handlePopularItemMouseDown = React.useCallback(function (e) {
-    e.preventDefault();
-  }, []);
-  var handlePopularItemMouseUp = React.useCallback(function () {
-    var _a;
-    var chosenValue = popularItems[popularActiveIndex].title;
-    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-    onPopularItemClick === null || onPopularItemClick === void 0 ? void 0 : onPopularItemClick(chosenValue);
-  }, [onPopularItemClick, popularActiveIndex, popularItems]);
-  var handleKeyDownPopularItems = React.useCallback(function (e) {
-    var _a;
-    switch (true) {
-      case e.key === 'ArrowDown' && popularActiveIndex < popularItems.length - 1:
-        setPopularActiveIndex(function (index) {
-          return index + 1;
-        });
-        e.preventDefault();
-        break;
-      case e.key === 'ArrowUp' && popularActiveIndex > -1:
-        setPopularActiveIndex(function (index) {
-          return index - 1;
-        });
-        e.preventDefault();
-        break;
-      case e.key === 'Enter' && popularActiveIndex > -1:
-        {
-          var currentHref = (_a = popularItems[popularActiveIndex]) === null || _a === void 0 ? void 0 : _a.href;
-          handlePopularItemMouseUp();
-          e.preventDefault();
-          if (currentHref) {
-            window.location.href = currentHref;
-          }
-          break;
-        }
-      default:
-        break;
-    }
-    return false;
-  }, [popularActiveIndex, popularItems, handlePopularItemMouseUp]);
-  var handleKeyDownItems = React.useCallback(function (e) {
-    switch (true) {
-      case e.key === 'ArrowDown' && activeIndex < items.length - 1:
-        setActiveIndex(function (index) {
-          return index + 1;
-        });
-        e.preventDefault();
-        break;
-      case e.key === 'ArrowUp' && activeIndex > -1:
-        setActiveIndex(function (index) {
-          return index - 1;
-        });
-        e.preventDefault();
-        break;
-      case e.key === 'Enter' && activeIndex > -1:
-        handleItemSubmit(activeIndex);
-        e.preventDefault();
-        break;
-      case e.key === 'Enter' && activeIndex === -1:
-        if (isTextarea && e.shiftKey) {
-          return false;
-        }
-        handleSearchSubmit();
-        e.preventDefault();
-        break;
-      default:
-        break;
-    }
-    return false;
-  }, [activeIndex, handleItemSubmit, handleSearchSubmit, items.length, isTextarea]);
-  var handleKeyDown = React.useCallback(function (e) {
-    if (showNotFound && showPopularItems) {
-      return handleKeyDownPopularItems(e);
-    }
-    return handleKeyDownItems(e);
-  }, [handleKeyDownItems, handleKeyDownPopularItems, showNotFound, showPopularItems]);
-  var handleClearClick = function handleClearClick() {
-    var _a;
-    !!debouncedOnChange.current && debouncedOnChange.current.cancel();
-    onChange === null || onChange === void 0 ? void 0 : onChange('');
-    setSearchQuery('');
-    (_a = fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-  };
-  var handleTextareaScroll = function handleTextareaScroll() {
-    if (!(fieldRef === null || fieldRef === void 0 ? void 0 : fieldRef.current) || !(labelRef === null || labelRef === void 0 ? void 0 : labelRef.current)) {
-      return;
-    }
-    var scrollTop = fieldRef.current.scrollTop;
-    if (!scrollTop) {
-      labelRef.current.style.top = '';
-      return;
-    }
-    labelRef.current.style.top = "".concat(DEFAULT_LABEL_TOP_POSITION - scrollTop, "px");
-  };
-  React.useEffect(function () {
-    return setSearchQuery(value);
-  }, [value]);
-  React.useEffect(function () {
-    if (value !== searchQuery) {
-      return;
-    }
-    textareaResize();
-  }, [searchQuery, value, textareaResize]);
-  React.useEffect(function () {
-    if (!resizerRef.current || !isTextarea || !showResizer) {
-      return;
-    }
-    var originalHeight;
-    var originalCoordinateY;
-    var handleResize = throttle(function (moveEvent) {
-      var currentCoordinateY = moveEvent.clientY || moveEvent.touches[0].clientY;
-      var resizeHeight = originalHeight + (currentCoordinateY - originalCoordinateY);
-      var updatedHeight = resizeHeight < minTextareaHeight ? minTextareaHeight : resizeHeight;
-      setTextareaHeight(updatedHeight);
-      setIsTextareaResized(true);
-    }, throttleTime.resizeTextarea);
-    var _handleResizeCancel = function handleResizeCancel() {
-      setIsTextareaResizing(false);
-      window.removeEventListener('mousemove', handleResize);
-      window.removeEventListener('touchmove', handleResize);
-      window.removeEventListener('mouseup', _handleResizeCancel);
-      window.removeEventListener('touchend', _handleResizeCancel);
-    };
-    var handleStartResize = function handleStartResize(event) {
-      if (!fieldRef.current) {
-        return;
-      }
-      setIsTextareaResizing(true);
-      event.preventDefault();
-      originalHeight = parseFloat(getComputedStyle(fieldRef.current).getPropertyValue('height').replace('px', ''));
-      originalCoordinateY = event.clientY || event.touches[0].clientY;
-      window.addEventListener('mousemove', handleResize);
-      window.addEventListener('touchmove', handleResize);
-      window.addEventListener('mouseup', _handleResizeCancel);
-      window.addEventListener('touchend', _handleResizeCancel);
-    };
-    resizerRef.current.addEventListener('mousedown', handleStartResize);
-    resizerRef.current.addEventListener('touchstart', handleStartResize);
-  }, [isTextarea, minTextareaHeight, showResizer]);
-  React.useEffect(function () {
-    debouncedOnChange.current = debounce(function (inputValue) {
-      return onChange && onChange(inputValue);
-    }, changeDelay);
-  }, [changeDelay, onChange]);
-  React.useEffect(function () {
-    if (isFocused && disabled) {
-      setFocus(false);
-    }
-  }, [disabled, isFocused]);
-  React.useEffect(function () {
-    var _a, _b;
-    if (activeIndex !== -1) {
-      (_b = (_a = highlightedItem.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
-  }, [activeIndex, items]);
-  var highlightString = function highlightString(title) {
-    var query = searchQuery.replace(SEARCH_QUERY_REGEX, function (w) {
-      return "\\".concat(w);
-    });
-    var stringFragments = title.split(RegExp("(".concat(query, ")"), 'ig'));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, stringFragments.map(function (fragment, i) {
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: i
-      }, fragment.toLowerCase() === searchQuery.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
-        className: cn('highlighted-fragment')
-      }, fragment) : fragment);
-    }));
-  };
-  var renderSubmitButton = function renderSubmitButton() {
-    var Icon = isCompact ? SearchIcon16 : SearchIcon;
-    return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.submit), {
-      className: cn('submit-button', [classes === null || classes === void 0 ? void 0 : classes.submitButton]),
-      onClick: handleSearchSubmit,
-      type: "button"
-    }), /*#__PURE__*/React.createElement(Icon, {
-      className: cn('submit-icon', [classes === null || classes === void 0 ? void 0 : classes.icon])
-    }));
-  };
-  var renderClearButton = function renderClearButton() {
-    return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.clearButton), {
-      onClick: handleClearClick,
-      type: "button",
-      className: cn('clear')
-    }), /*#__PURE__*/React.createElement(ClearIcon, {
-      className: cn('clear-icon')
-    }));
-  };
-  var renderList = function renderList() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
-      ref: listRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
-    }, /*#__PURE__*/React.createElement(ScrollBar, {
-      maxHeight: maxHeightScrollBar
-    }, items.map(function (_ref2, i) {
-      var itemValue = _ref2.value,
-        searchView = _ref2.searchView,
-        _ref2$paddings = _ref2.paddings,
-        paddings = _ref2$paddings === void 0 ? SearchItemsPaddings.LARGE : _ref2$paddings;
-      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
-        ref: activeIndex === i ? highlightedItem : null,
-        className: cn('list-item', {
-          active: activeIndex === i,
-          paddings: paddings
-        }),
-        onMouseDown: handleSelectSubmit(i),
-        onMouseEnter: handleHoverItem(i),
-        key: i
-      }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, i + 1), {
-        className: cn('item-title', [classes === null || classes === void 0 ? void 0 : classes.listItemTitle])
-      }), searchView || highlightString(itemValue)));
-    }))));
-  };
-  var renderPopularItems = function renderPopularItems() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('popular-list')
-    }, correctPopularItems.map(function (_ref3, i) {
-      var title = _ref3.title,
-        href = _ref3.href,
-        icon = _ref3.icon;
-      var Elem = href ? 'a' : 'div';
-      return /*#__PURE__*/React.createElement(Elem, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.popularItem, i + 1), {
-        className: cn('popular-item', {
-          active: popularActiveIndex === i
-        }, [classes === null || classes === void 0 ? void 0 : classes.popularItem]),
-        key: i,
-        href: href,
-        onMouseDown: handlePopularItemMouseDown,
-        onMouseUp: handlePopularItemMouseUp,
-        onMouseEnter: handlePopularItemHover(i)
-      }), icon && /*#__PURE__*/React.createElement("span", {
-        className: cn('popular-icon')
-      }, icon), /*#__PURE__*/React.createElement(Header, {
-        className: cn('popular-item-title'),
-        as: "h5"
-      }, title));
-    }));
-  };
-  var renderNotFound = function renderNotFound() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('list', {
-        'not-found': true
-      })
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('list-inner')
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cn('not-found-text', {
-        'show-popular': showPopularItems
-      }, [classes === null || classes === void 0 ? void 0 : classes.textNotFound])
-    }, textNotFound || 'Ничего не нашлось'), showPopularItems && /*#__PURE__*/React.createElement("div", {
-      className: cn('popular-wrap')
-    }, /*#__PURE__*/React.createElement(Caption, {
-      className: cn('popular-title', [classes === null || classes === void 0 ? void 0 : classes.popularTitle]),
-      variant: "medium",
-      color: "gray",
-      hasMargin: false
-    }, popularTitle || 'Популярные действия'), renderPopularItems())));
-  };
-  var renderLabel = /*#__PURE__*/React.createElement("label", {
-    className: cn('label', [classes === null || classes === void 0 ? void 0 : classes.label]),
-    htmlFor: searchId,
-    ref: labelRef
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: cn('require-mark')
-  }, "*"));
-  var renderInput = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
-    id: searchId,
-    className: cn('field', {
-      filled: !!searchQuery,
-      labeled: !!label
-    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
-    placeholder: placeholder,
-    value: searchQuery,
-    maxLength: maxLength,
-    onChange: handleChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    disabled: disabled,
-    type: "text",
-    autoComplete: "off",
-    ref: getFieldRef
-  })), label && renderLabel);
-  var renderTextarea = /*#__PURE__*/React.createElement(React.Fragment, null, showResizer && /*#__PURE__*/React.createElement("div", _extends({
-    className: cn('resizer', [classes === null || classes === void 0 ? void 0 : classes.resizer]),
-    ref: resizerRef
-  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.resizer)), /*#__PURE__*/React.createElement(ResizeIcon, null)), /*#__PURE__*/React.createElement("div", {
-    className: cn('textarea-wrapper')
-  }, /*#__PURE__*/React.createElement("textarea", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.searchField), {
-    id: searchId,
-    className: cn('field', {
-      filled: !!searchQuery,
-      labeled: !!label
-    }, [classes === null || classes === void 0 ? void 0 : classes.input]),
-    style: {
-      height: "".concat(textareaHeight, "px")
-    },
-    placeholder: placeholder,
-    value: searchQuery,
-    maxLength: maxLength,
-    onChange: handleChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onKeyDown: handleKeyDown,
-    onClick: handleClick,
-    onScroll: handleTextareaScroll,
-    autoComplete: "off",
-    ref: getFieldRef
-  })), label && renderLabel));
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn({
-      open: isFocused,
-      disabled: disabled,
-      type: type,
-      textarea: isTextarea,
-      error: verification === Verification.ERROR,
-      success: verification === Verification.VALID
-    }, [className])
-  }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
-    className: cn('control', {
-      focused: isTextareaResizing
-    }, [classes === null || classes === void 0 ? void 0 : classes.control]),
-    ref: containerRef
-  }), isCompact && renderSubmitButton(), isTextarea ? renderTextarea : renderInput, showAdditionalElement && /*#__PURE__*/React.createElement("div", {
-    className: cn('icons')
-  }, showTextFieldSubmit && renderSubmitButton(), showLoader && /*#__PURE__*/React.createElement(Preloader, {
-    delay: false,
-    className: cn('loader'),
-    sizeAll: "small"
-  }), showClearIcon && renderClearButton()), !!items.length && !showNotFound && renderList(), showNotFound && renderNotFound()), noticeText && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.notice), {
-    className: cn('notice', {
-      error: verification === Verification.ERROR,
-      success: verification === Verification.VALID
-    })
-  }), noticeText));
-};
-export default Search;

package/dist/es/components/Select/Select.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-select{-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);font-family:inherit;font-size:15px;font-weight:400;line-height:24px;min-height:40px;z-index:1}.mfui-select,.mfui-select__inner{position:relative}.mfui-select__control{background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:pointer;height:60px;overflow:hidden;-webkit-transition:border-color .3s;transition:border-color .3s}.mfui-select__combobox,.mfui-select__control{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none;width:100%}.mfui-select__combobox{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;color:var(--content);cursor:text;font-size:15px;font-weight:400;height:100%;line-height:24px;opacity:1;overflow:auto;padding:0 45px 0 16px;position:relative;z-index:1}.mfui-select_no-touch .mfui-select__control:focus-within,.mfui-select_no-touch .mfui-select__control:hover{border-color:var(--content)}.mfui-select__title{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;outline:none;width:100%}.mfui-select__title:after{border:5px solid transparent;border-bottom:none;border-top:6px solid;color:var(--brandGreen);content:"";cursor:pointer;display:block;position:absolute;right:27px;top:50%;-webkit-transition:-webkit-transform .6s;transition:-webkit-transform .6s;transition:transform .6s;transition:transform .6s,-webkit-transform .6s;z-index:1}.mfui-select__title-value{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.mfui-select__title-inner_hide-value .mfui-select__title-value{color:var(--spbSky3)}.mfui-select__title-inner{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;overflow:hidden;padding:0 45px 0 16px;white-space:nowrap}.mfui-select__title-inner:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--base)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--base));bottom:0;content:"";position:absolute;right:40px;top:0;width:40px}.mfui-select__require-mark{color:var(--fury);font-size:20px;line-height:0;margin-left:1px}.mfui-select__list{background-color:var(--base);border-radius:12px;-webkit-box-shadow:0 1px 16px rgba(0,0,0,.2);box-shadow:0 1px 16px rgba(0,0,0,.2);display:none;left:0;position:absolute;right:0;top:100%;z-index:11}.mfui-select__list-inner{-webkit-box-sizing:border-box;box-sizing:border-box;max-height:368px;overflow-y:auto;padding:16px;scrollbar-color:var(--spbSky2) transparent;scrollbar-width:thin}.mfui-select__list-inner_short{max-height:235px}.mfui-select__list-inner::-webkit-scrollbar{width:16px}.mfui-select__list-inner::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:#d8d8d8;border:6px solid transparent;border-radius:16px}.mfui-select__list-inner::-webkit-scrollbar-thumb:hover{background-color:#999}.mfui-select__list-item{background-color:var(--base);border-radius:16px;cursor:pointer;font-family:inherit;padding-bottom:12px;padding-top:12px}.mfui-select__list-item_hovered{background-color:var(--spbSky0)}.mfui-select__list-item_paddings_large{padding-left:32px;padding-right:32px}.mfui-select__list-item_paddings_small{padding-left:12px;padding-right:12px}.mfui-select__item-title-part:not(:last-child){margin-right:2px}.mfui-select__item-title{position:relative}.mfui-select__item-title_custom{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-select__item-title_active{font-weight:600}.mfui-select__list-item_hovered .mfui-select__item-title:after{background:-webkit-gradient(linear,left top,right top,from(hsla(0,0%,100%,0)),to(var(--spbSky0)));background:linear-gradient(to right,hsla(0,0%,100%,0),var(--spbSky0))}.mfui-select__not-found{opacity:.5;padding:8px 32px}.mfui-select__text{color:var(--spbSky3);font-size:12px;line-height:18px;margin-top:8px}.mfui-select__highlighted-fragment{font-weight:700}.mfui-select__label{color:var(--spbSky3);display:block;font-family:inherit;font-size:15px;line-height:24px;overflow:auto;pointer-events:none;position:absolute;top:17px;-webkit-transition:top .5s,-webkit-transform .5s;transition:top .5s,-webkit-transform .5s;transition:transform .5s,top .5s;transition:transform .5s,top .5s,-webkit-transform .5s;z-index:1}.mfui-select__combobox+.mfui-select__label{left:16px}.mfui-select__combobox::-webkit-input-placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-select__combobox:-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-select__combobox::-moz-placeholder{color:var(--spbSky3);opacity:0;-moz-transition:opacity .2s;transition:opacity .2s}.mfui-select__combobox::-ms-input-placeholder{color:var(--spbSky3);opacity:0;-ms-transition:opacity .2s;transition:opacity .2s}.mfui-select__combobox::placeholder{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-select__title-inner:not(.mfui-select__title-inner_hide-value) .mfui-select__label,.mfui-select_open .mfui-select__label{-webkit-transform:scale(.8) translate(-12%,-75%);transform:scale(.8) translate(-12%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-select__combobox:not(.mfui-select__combobox_hide-value)+.mfui-select__label{-webkit-transform:scale(.8) translate(-12.5%,-75%);transform:scale(.8) translate(-12.5%,-75%);-webkit-transition-duration:.2s,.01s;transition-duration:.2s,.01s}.mfui-select__control_labeled .mfui-select__title-inner_hide-value .mfui-select__title-value{color:var(--spbSky3);opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s}.mfui-select__control_labeled .mfui-select__combobox,.mfui-select__control_labeled .mfui-select__title-inner{padding-top:22px}.mfui-select__control_labeled .mfui-select__combobox:focus::-webkit-input-placeholder{opacity:1}.mfui-select__control_labeled .mfui-select__combobox:focus:-ms-input-placeholder{opacity:1}.mfui-select__control_labeled .mfui-select__combobox:focus::-moz-placeholder{opacity:1}.mfui-select__control_labeled .mfui-select__combobox:focus::-ms-input-placeholder{opacity:1}.mfui-select__control_labeled .mfui-select__combobox:focus::placeholder{opacity:1}.mfui-select_open{z-index:12}.mfui-select_open .mfui-select__title:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.mfui-select_open .mfui-select__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;display:block}.mfui-select_open .mfui-select__control{border-color:var(--content)}.mfui-select_open .mfui-select__title-inner_hide-value .mfui-select__title-value{opacity:1}.mfui-select_valid .mfui-select__control{border-color:var(--brandGreen)!important}.mfui-select_error .mfui-select__control{border-color:var(--fury)!important}.mfui-select_error .mfui-select__text{color:var(--fury)}.mfui-select_disabled .mfui-select__control{background-color:var(--spbSky1);border-color:var(--spbSky1);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfui-select_disabled .mfui-select__title-inner:after{display:none}.mfui-select_disabled .mfui-select__title:after{color:var(--content);opacity:.5}