ecomlab-components-next 0.1.19 → 0.1.21

package/dist/components/Inputs/DropDownSelector/DownSelector.js

@@ -0,0 +1,580 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+var _close_icon_disabled = _interopRequireDefault(require("./img/close_icon_disabled.svg"));
+var _async = _interopRequireDefault(require("react-select/async"));
+var _Checkbox = _interopRequireDefault(require("../../Checkbox/Checkbox/Checkbox"));
+require("./DropdownSelector.scss");
+var _excluded = ["taskOptions", "err", "options_prop", "setState", "placeholder", "className", "style", "multi", "name", "isClearable", "isSearchable", "disabled", "defaultValue", "state", "loadOptions", "showIndicator", "icon", "iconPlaceholder", "id", "fetchCallback", "setInputChange", "queryValue", "range", "noUpwardPaging", "resetPageOnChange", "tooltip", "color", "size", "width", "required", "lang", "refPosition", "minMenuHeight", "positionMenu", "onBlur", "all", "onClickSingle"],
+  _excluded2 = ["index", "getValue"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _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); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var activeLang = localStorage.getItem('lang');
+var translateNotFound = function translateNotFound() {
+  if (activeLang == 'en') return 'not found';
+  if (activeLang == 'tr') return 'bulunmamış';
+  return 'Не найдено';
+};
+var translateSelected = function translateSelected() {
+  if (activeLang == 'en') return 'Selected';
+  if (activeLang == 'tr') return 'Seçilmiş';
+  return 'Выбранные';
+};
+var translateNotSelected = function translateNotSelected() {
+  if (activeLang == 'en') return 'Not Selected';
+  if (activeLang == 'tr') return 'Seçilmemiş';
+  return 'Не выбрано';
+};
+var translateAll = function translateAll() {
+  if (activeLang == 'en') return 'All';
+  if (activeLang == 'tr') return 'Hepsi';
+  return 'Все';
+};
+var MenuList = function MenuList(props) {
+  var _props$selectProps$va, _props$options$filter, _state_selected$;
+  var state_selected = ((_props$selectProps$va = props.selectProps.value) === null || _props$selectProps$va === void 0 ? void 0 : _props$selectProps$va.length) > 0 ? props.selectProps.value : [];
+  var ref = (0, _react.useRef)();
+  var isAll = (_props$options$filter = props.options.filter(function (_ref) {
+    var value = _ref.value;
+    return value === 'all';
+  })) === null || _props$options$filter === void 0 ? void 0 : _props$options$filter.length;
+
+  // const positionDropElement = () => {
+  //     const width_el = ref?.current?.getBoundingClientRect().width
+  //     const height_el = ref?.current?.getBoundingClientRect().height
+
+  //     console.log(width_el, height_el)
+  // }
+
+  // useEffect(() => {
+  //     positionDropElement()
+  // }, []);
+  // console.log(ref?.current)
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "react-select__wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_reactSelect.components.MenuList, _extends({}, props, {
+    ref: ref
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "react-select__drop-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "react-select__col"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "react-select__label",
+    onClick: function onClick(e) {
+      if (isAll) {
+        props.setValue([{
+          label: translateAll(),
+          value: 'all'
+        }]);
+      }
+    }
+  }, translateSelected(), isAll !== 0 && /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+    onChange: function onChange(e) {
+      if (isAll) {
+        props.setValue([{
+          label: translateAll(),
+          value: 'all'
+        }]);
+      }
+    },
+    value: state_selected.length > 0 && ((_state_selected$ = state_selected[0]) === null || _state_selected$ === void 0 ? void 0 : _state_selected$.value) == 'all'
+  })), state_selected === null || state_selected === void 0 ? void 0 : state_selected.map(function (_ref2) {
+    var label = _ref2.label,
+      value = _ref2.value;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "react-select__item",
+      onClick: function onClick(e) {
+        var val = value;
+        var new_state = state_selected.filter(function (_ref3) {
+          var value = _ref3.value;
+          return value !== val;
+        });
+        props.setValue(new_state);
+        // setState(new_state)
+      }
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      className: "text"
+    }, label));
+  }), (state_selected === null || state_selected === void 0 ? void 0 : state_selected.length) < 1 && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "react-select__no-options"
+  }, translateNotFound())), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "react-select__col"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "react-select__label",
+    onClick: function onClick(e) {
+      props.setValue([]);
+    }
+  }, translateNotSelected(), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "react-select__btn-close",
+    onClick: function onClick(e) {
+      return props.setValue([]);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _close_icon["default"]
+  }))), props.children))));
+};
+var DropDownSelector = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, selectRef) {
+  var taskOptions = _ref4.taskOptions,
+    err = _ref4.err,
+    options_prop = _ref4.options_prop,
+    _ref4$setState = _ref4.setState,
+    setState = _ref4$setState === void 0 ? false : _ref4$setState,
+    placeholder = _ref4.placeholder,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? '' : _ref4$className,
+    style = _ref4.style,
+    multi = _ref4.multi,
+    name = _ref4.name,
+    _ref4$isClearable = _ref4.isClearable,
+    isClearable = _ref4$isClearable === void 0 ? true : _ref4$isClearable,
+    _ref4$isSearchable = _ref4.isSearchable,
+    isSearchable = _ref4$isSearchable === void 0 ? true : _ref4$isSearchable,
+    _ref4$disabled = _ref4.disabled,
+    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
+    _ref4$defaultValue = _ref4.defaultValue,
+    defaultValue = _ref4$defaultValue === void 0 ? false : _ref4$defaultValue,
+    _ref4$state = _ref4.state,
+    state = _ref4$state === void 0 ? [] : _ref4$state,
+    _ref4$loadOptions = _ref4.loadOptions,
+    loadOptions = _ref4$loadOptions === void 0 ? false : _ref4$loadOptions,
+    _ref4$showIndicator = _ref4.showIndicator,
+    showIndicator = _ref4$showIndicator === void 0 ? true : _ref4$showIndicator,
+    _ref4$icon = _ref4.icon,
+    icon = _ref4$icon === void 0 ? false : _ref4$icon,
+    _ref4$iconPlaceholder = _ref4.iconPlaceholder,
+    iconPlaceholder = _ref4$iconPlaceholder === void 0 ? false : _ref4$iconPlaceholder,
+    id = _ref4.id,
+    _ref4$fetchCallback = _ref4.fetchCallback,
+    fetchCallback = _ref4$fetchCallback === void 0 ? false : _ref4$fetchCallback,
+    _ref4$setInputChange = _ref4.setInputChange,
+    setInputChange = _ref4$setInputChange === void 0 ? false : _ref4$setInputChange,
+    queryValue = _ref4.queryValue,
+    _ref4$range = _ref4.range,
+    range = _ref4$range === void 0 ? false : _ref4$range,
+    noUpwardPaging = _ref4.noUpwardPaging,
+    resetPageOnChange = _ref4.resetPageOnChange,
+    _ref4$tooltip = _ref4.tooltip,
+    tooltip = _ref4$tooltip === void 0 ? false : _ref4$tooltip,
+    _ref4$color = _ref4.color,
+    color = _ref4$color === void 0 ? false : _ref4$color,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 's' : _ref4$size,
+    _ref4$width = _ref4.width,
+    width = _ref4$width === void 0 ? multi ? '200%' : '140%' : _ref4$width,
+    _ref4$required = _ref4.required,
+    required = _ref4$required === void 0 ? false : _ref4$required,
+    _ref4$lang = _ref4.lang,
+    lang = _ref4$lang === void 0 ? 'rus' : _ref4$lang,
+    refPosition = _ref4.refPosition,
+    minMenuHeight = _ref4.minMenuHeight,
+    positionMenu = _ref4.positionMenu,
+    _ref4$onBlur = _ref4.onBlur,
+    onBlur = _ref4$onBlur === void 0 ? false : _ref4$onBlur,
+    _ref4$all = _ref4.all,
+    all = _ref4$all === void 0 ? true : _ref4$all,
+    _ref4$onClickSingle = _ref4.onClickSingle,
+    onClickSingle = _ref4$onClickSingle === void 0 ? false : _ref4$onClickSingle,
+    props = _objectWithoutProperties(_ref4, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTopPlaceholder = _useState2[0],
+    setIsTopPlaceholder = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocus = _useState4[0],
+    setIsFocus = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectorPage = _useState6[0],
+    setSelectorPage = _useState6[1];
+  var inputId = (0, _react.useId)();
+  var _useState7 = (0, _react.useState)(defaultValue),
+    _useState8 = _slicedToArray(_useState7, 2),
+    currentValue = _useState8[0],
+    setCurrentValue = _useState8[1];
+  var initialStateRef = (0, _react.useRef)(defaultValue);
+  (0, _react.useEffect)(function () {
+    // setCurrentValue(defaultValue);
+    initialStateRef.current = defaultValue;
+  }, [defaultValue]);
+  var handleBlur = function handleBlur() {
+    setIsFocus(false);
+    var isChanged = JSON.stringify(currentValue) !== JSON.stringify(initialStateRef.current);
+    if (isChanged && onBlur) {
+      console.log('onBlur is called');
+      onBlur();
+      initialStateRef.current = currentValue;
+    }
+  };
+  var onChange = function onChange(option, _ref5) {
+    var action = _ref5.action;
+    setCurrentValue(option);
+    if (action === 'clear') {
+      setState(multi ? [] : '');
+    } else {
+      if (resetPageOnChange) setSelectorPage(1);
+      if (option.length > 1) {
+        var indexAll = -1;
+        option.forEach(function (el, ind) {
+          if ((el === null || el === void 0 ? void 0 : el.value) === 'all') indexAll = ind;
+        });
+        if (indexAll !== -1) {
+          setState(option === null || option === void 0 ? void 0 : option.filter(function (el, ind) {
+            return indexAll === 0 ? ind !== 0 : ind === indexAll;
+          }));
+        } else {
+          setState(option);
+        }
+      } else {
+        setState(option);
+        onClickSingle();
+      }
+    }
+  };
+  var MoreSelectedBadge = function MoreSelectedBadge(_ref6) {
+    var items = _ref6.items;
+    var title = items.join(', ');
+    var length = items.length;
+    var translateSelected = function translateSelected() {
+      if (activeLang == 'en') return "Selected ".concat(length, " from");
+      if (activeLang == 'tr') return "Dan ".concat(length, " se\xE7ilmi\u015F");
+      return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E ".concat(length, " \u0438\u0437");
+    };
+    var label = (state === null || state === void 0 ? void 0 : state.length) > 0 && state[0].value == 'all' || (state === null || state === void 0 ? void 0 : state.length) == (options_prop === null || options_prop === void 0 ? void 0 : options_prop.length) && all ? translateAll() : "".concat(translateSelected(), " ").concat(options_prop === null || options_prop === void 0 ? void 0 : options_prop.length, " ");
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "react-select__count",
+      title: title
+    }, label);
+  };
+  var MultiValue = function MultiValue(_ref7) {
+    var index = _ref7.index,
+      getValue = _ref7.getValue,
+      props = _objectWithoutProperties(_ref7, _excluded2);
+    var maxToShow = 0;
+    var overflow = getValue().slice(maxToShow).map(function (x) {
+      return x.label;
+    });
+    return index < maxToShow ? /*#__PURE__*/_react["default"].createElement(_reactSelect.components.MultiValue, props) : index === maxToShow ? /*#__PURE__*/_react["default"].createElement(MoreSelectedBadge, {
+      items: overflow
+    }) : null;
+  };
+  var MultiValueRemove = function MultiValueRemove(props) {
+    return /*#__PURE__*/_react["default"].createElement(_reactSelect.components.MultiValueRemove, props, /*#__PURE__*/_react["default"].createElement("img", {
+      src: disabled ? _close_icon_disabled["default"] : _close_icon["default"]
+    }));
+  };
+  var dot = function dot() {
+    return {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      caretColor: 'red',
+      ':before': {
+        backgroundImage: "url(".concat(icon, ")"),
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        content: '" "',
+        display: 'block',
+        marginRight: 5,
+        height: 12,
+        minWidth: 12
+      }
+    };
+  };
+  var DefaulOption = function DefaulOption(_ref8) {
+    var innerProps = _ref8.innerProps,
+      isDisabled = _ref8.isDisabled,
+      label = _ref8.label,
+      value = _ref8.value,
+      isSelected = _ref8.isSelected;
+    return !isDisabled ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, innerProps, {
+      className: "option-item",
+      style: {
+        padding: '8px 20px'
+      }
+    }), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "text"
+    }, label)) : null;
+  };
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    positionScroll = _useState10[0],
+    setPositionScroll = _useState10[1];
+  var refScroll = (0, _react.useRef)();
+  var savePositionScroll = function savePositionScroll() {
+    var el = document.getElementById('react-select-3-listbox');
+    var scroll_y = refScroll === null || refScroll === void 0 ? void 0 : refScroll.current.scrollTop;
+    setPositionScroll(scroll_y);
+  };
+  (0, _react.useLayoutEffect)(function () {
+    if (refScroll !== null && refScroll !== void 0 && refScroll.current) {
+      refScroll.current.scrollTop = positionScroll;
+    }
+  }, [state]);
+  (0, _react.useEffect)(function () {
+    if (setState) {
+      defaultValue ? setState(defaultValue) : setState(state);
+    }
+  }, []);
+  var OptionTask = function OptionTask(_ref9) {
+    var innerProps = _ref9.innerProps,
+      label = _ref9.label,
+      value = _ref9.value;
+    var author = value.author;
+    var name = author.name;
+    return /*#__PURE__*/_react["default"].createElement("div", _extends({}, innerProps, {
+      className: "option-task",
+      style: {
+        padding: '8px 20px'
+      }
+    }), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "text",
+      style: {
+        color: 'black'
+      }
+    }, label), /*#__PURE__*/_react["default"].createElement("p", {
+      className: "text_min"
+    }, "\u0410\u0432\u0442\u043E\u0440: ", /*#__PURE__*/_react["default"].createElement("span", null, name ? name : '')));
+  };
+  var onMenuScrollHandler = function onMenuScrollHandler(page) {
+    if (fetchCallback) {
+      setSelectorPage(function (prev) {
+        var currPage = prev + page;
+        if (page < 1) currPage = 1;
+        fetchCallback(currPage);
+        return currPage;
+      });
+    }
+  };
+  var components_multi = multi ? {
+    MenuList: MenuList,
+    MultiValue: MultiValue
+  } : '';
+  var _useState11 = (0, _react.useState)('auto'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    position = _useState12[0],
+    setPosition = _useState12[1];
+  var selectProps = _objectSpread({
+    inputId: inputId,
+    options: multi && all ? [{
+      label: translateAll(),
+      value: 'all'
+    }].concat(_toConsumableArray(options_prop)) : options_prop,
+    value: state,
+    onChange: onChange,
+    ref: selectRef,
+    className: err ? 'dropdown_selector dropdown_selector__err' : 'dropdown_selector',
+    placeholder: '',
+    defaultValue: defaultValue,
+    isMulti: multi,
+    openMenuOnFocus: true,
+    isClearable: isClearable,
+    name: name,
+    isSearchable: isSearchable,
+    isDisabled: disabled,
+    menuPlacement: 'auto',
+    // minMenuHeight: minMenuHeight ? minMenuHeight : '',
+    // menuPortalTarget: refPosition ? refPosition : document.body,
+    closeMenuOnSelect: multi ? false : true,
+    //закрывать при выборе пункта
+    onFocus: function onFocus() {
+      setIsFocus(true);
+    },
+    onBlur: function onBlur() {
+      return handleBlur();
+    },
+    // onClick: () => {
+    //   onClickSingle();
+    //   console.log('aaa');
+    // },
+    noOptionsMessage: function noOptionsMessage() {
+      return /*#__PURE__*/_react["default"].createElement("p", {
+        className: "no-options"
+      }, translateNotFound());
+    },
+    components: _objectSpread({
+      Option: taskOptions ? OptionTask : DefaulOption,
+      MultiValueRemove: MultiValueRemove
+    }, components_multi),
+    onMenuScrollToBottom: function onMenuScrollToBottom() {
+      return onMenuScrollHandler(1);
+    },
+    onMenuScrollToTop: function onMenuScrollToTop() {
+      return noUpwardPaging ? {} : onMenuScrollHandler(-1);
+    },
+    onInputChange: function onInputChange(value) {
+      setIsTopPlaceholder((value === null || value === void 0 ? void 0 : value.length) > 0 ? true : false);
+      if (setInputChange !== false) {
+        setInputChange(value);
+      }
+    },
+    // defaultMenuIsOpen:true,
+    cacheOption: true,
+    allowCreateWhileLoading: true,
+    styles: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      menu: function menu(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          right: positionMenu ? 0 : '',
+          borderRadius: '8px',
+          boxShadow: '0px 16px 32px 0px rgba(0, 0, 0, 0.04)',
+          border: 'none',
+          outline: 'none',
+          zIndex: 2,
+          minWidth: width
+        });
+      },
+      menuList: function menuList(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          webkitOverflowScrolling: 'auto',
+          borderRadius: '8px',
+          overflow: 'auto',
+          maxHeight: '608px',
+          padding: 0,
+          border: '1px solid #E0E7F2',
+          background: 'white',
+          openMenuOnClick: true
+        });
+      },
+      clearIndicator: function clearIndicator(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          paddingLeft: '4px',
+          paddingTop: '0px',
+          paddingBottom: '0px',
+          paddingRight: '2px',
+          width: '22px'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          paddingLeft: '0px',
+          paddingTop: '0px',
+          paddingBottom: '0px',
+          paddingRight: '8px',
+          width: '26px'
+        });
+      },
+      valueContainer: function valueContainer(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          fontSize: '14px',
+          color: '#020617',
+          padding: '6px 12px'
+        });
+      },
+      noOptionsMessage: function noOptionsMessage(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          fontSize: '12px'
+        });
+      },
+      multiValueLabel: function multiValueLabel(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          paddingLeft: '0px',
+          background: '#fff',
+          border: 'none',
+          color: disabled ? '#D3DEE7' : '#020617',
+          fontSize: '13px',
+          fontFamily: 'Golos Text',
+          borderRadius: '0px',
+          margin: '0px'
+        });
+      }
+    }, "valueContainer", function valueContainer(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        color: disabled ? '#D3DEE7' : '#020617',
+        fontSize: '14px',
+        paddingLeft: '12px',
+        paddingRight: '12px'
+      });
+    }), "multiValueRemove", function multiValueRemove(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        background: '#fff',
+        color: disabled ? '#D3DEE7' : '#475569',
+        padding: '0px',
+        border: 'none',
+        borderLeft: 'none',
+        borderRadius: '0px',
+        ':hover': {
+          background: '#fff'
+        }
+      });
+    }), "indicatorSeparator", function indicatorSeparator(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        display: 'none'
+      });
+    }), "singleValue", function singleValue(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        color: '#020617'
+      });
+    }), "indicatorsContainer", function indicatorsContainer(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        padding: '0px',
+        display: showIndicator ? 'flex' : 'none'
+      });
+    }), "input", icon ? function (styles) {
+      return _objectSpread(_objectSpread(_objectSpread({}, styles), dot()), {}, {
+        color: '#020617'
+      });
+    } : null), "singleValue", icon ? function (styles, _ref10) {
+      var data = _ref10.data;
+      return _objectSpread(_objectSpread({}, styles), {}, {
+        cursor: 'pointer'
+      }, dot(data === null || data === void 0 ? void 0 : data.color));
+    } : null)
+  }, props);
+  try {
+    var _state$label, _state$label2;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "selector_wrapper ".concat(disabled ? 'selector_wrapper_disabled' : '', " ").concat(size == 'l' ? 'selector_wrapper_size-l' : '', " ").concat(placeholder && !multi ? 'value-content-bottom' : ''),
+      tabIndex: "0",
+      style: style ? style : {}
+    }, /*#__PURE__*/_react["default"].createElement("div", null, placeholder && multi ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: _typeof(state === null || state === void 0 ? void 0 : state.label) == 'object' || (state === null || state === void 0 ? void 0 : state.length) > 0 || queryValue || isTopPlaceholder ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+    }, /*#__PURE__*/_react["default"].createElement("label", null, placeholder, required ? /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        color: 'red'
+      }
+    }, " *") : '')) : placeholder && /*#__PURE__*/_react["default"].createElement("div", {
+      className: _typeof(state === null || state === void 0 ? void 0 : state.label) == 'object' || (state === null || state === void 0 ? void 0 : state.length) > 0 || (state === null || state === void 0 || (_state$label = state.label) === null || _state$label === void 0 ? void 0 : _state$label.length) > 0 || state !== null && state !== void 0 && (_state$label2 = state.label) !== null && _state$label2 !== void 0 && (_state$label2 = _state$label2.props) !== null && _state$label2 !== void 0 && _state$label2.children || queryValue || isTopPlaceholder ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+    }, /*#__PURE__*/_react["default"].createElement("label", null, placeholder, required ? /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        color: 'red'
+      }
+    }, " *") : ''))), loadOptions ? /*#__PURE__*/_react["default"].createElement(_async["default"], selectProps) : /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], selectProps)), tooltip && /*#__PURE__*/_react["default"].createElement("p", {
+      className: "selector_wrapper__text_tooltip"
+    }, tooltip));
+  } catch (error) {
+    console.error(error);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "selector_wrapper ".concat(disabled ? 'selector_wrapper_disabled' : '', " ").concat(size == 'l' ? 'selector_wrapper_size-l' : '', " ").concat(placeholder && !multi ? 'value-content-bottom' : ''),
+      tabIndex: "0",
+      style: {}
+    }, /*#__PURE__*/_react["default"].createElement("div", null), loadOptions ? /*#__PURE__*/_react["default"].createElement(_async["default"], selectProps) : /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], selectProps)));
+  }
+});
+var _default = exports["default"] = DropDownSelector;