intelicoreact 1.5.41 → 1.6.0

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -1,947 +1,1063 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _reactDom = require("react-dom");
-var _reactFeather = require("react-feather");
-var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
-var _useDebounce = require("../../../Functions/useDebounce");
-var _useIsMobile = _interopRequireDefault(require("../../../Functions/useIsMobile"));
-var _CheckboxInput = _interopRequireDefault(require("../../FormElements/CheckboxInput/CheckboxInput"));
-var _Input = _interopRequireDefault(require("../../FormElements/Input/Input"));
-var _Button = _interopRequireDefault(require("../../UI/Button/Button"));
-var _Tag = _interopRequireDefault(require("../../UI/Tag/Tag"));
-var _TagList = _interopRequireDefault(require("../../UI/TagList/TagList"));
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _reactdom = require("react-dom");
+const _reactfeather = require("react-feather");
+const _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+const _useDebounce = require("../../../Functions/useDebounce");
+const _useIsMobile = /*#__PURE__*/ _interop_require_default(require("../../../Functions/useIsMobile/useIsMobile"));
+const _CheckboxInput = /*#__PURE__*/ _interop_require_default(require("../../FormElements/CheckboxInput/CheckboxInput"));
+const _Input = /*#__PURE__*/ _interop_require_default(require("../../FormElements/Input/Input"));
+const _Button = /*#__PURE__*/ _interop_require_default(require("../../UI/Button/Button"));
+const _Tag = /*#__PURE__*/ _interop_require_default(require("../../UI/Tag/Tag"));
+const _TagList = /*#__PURE__*/ _interop_require_default(require("../../UI/TagList/TagList"));
 require("./TagsDropdown.scss");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-const RC = "tags-dropdown";
-const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
-const COLORS = ["#F1F0F0", "#E3E2E0", "#EEDFDA", "#F9DEC9", "#FDECC8", "#DBECDB", "#D3E4EF", "#E8DEEE", "#F4E0E9", "#FFE2DD", "#D3EFED", "#ECEEDE"];
-const TagsDropdown = _ref => {
-  let {
-    options: optionsProp,
-    chosenOptions = [],
-    onChange,
-    className,
-    tagClassname,
-    listClassName,
-    onKeyPress = () => {},
-    placeholder,
-    label,
-    disabled,
-    isValuesInTags,
-    error,
-    isNotValidateASCII = false,
-    noTagsWrap = false,
-    headerContent = null,
-    footerContent = null,
-    selectAllButtonRef = null,
-    unselectAllButtonRef = null,
-    closeOnSelect = false,
-    closeOnRemove = false,
-    closeOnRemoveAll = false,
-    closeOnSelectAll = false,
-    closeOnSelectMobile = false,
-    closeOnRemoveMobile = false,
-    closeOnRemoveAllMobile = false,
-    closeOnSelectAllMobile = false,
-    fieldKey,
-    id,
-    noOptionsText = "No options available",
-    mobileSearchPlaceholder,
-    isSearchable = true,
-    useLiveSearch,
-    doRequest: doLiveSearchRequest,
-    attributesOfNativeInput = {},
-    isUseLocalOptionsStore = true,
-    isDefaultOpened = false,
-    withMobileLogic,
-    withCreateLogic,
-    withActions,
-    withSearchInputInList,
-    renderOptionsAsTags,
-    minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH,
-    onOptionCreate,
-    onOptionEdit,
-    onOptionDelete,
-    onActionConfirmClick,
-    onActionCancelClick,
-    onDropdownListClose,
-    customTriggerRef,
-    renderCustomTrigger,
-    recalculateListContainerStylesTrigger
-  } = _ref;
-  const inputRef = (0, _react.useRef)(null);
-  const wrapperRef = (0, _react.useRef)(null);
-  const dropdownRef = (0, _react.useRef)(null);
-  const dropdownListRef = (0, _react.useRef)(null);
-  const editOptionModalRef = (0, _react.useRef)(null);
-  const dropdownListWrapperRef = (0, _react.useRef)(null);
-  const {
-    isMobile: isMobileProp
-  } = (0, _useIsMobile.default)();
-  const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
-  const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const [windowScrollTop, setWindowScrollTop] = (0, _react.useState)(0);
-  const [listPos, setListPos] = (0, _react.useState)(null);
-  const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
-  const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
-  const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
-  const [scrollTop, setScrollTop] = (0, _react.useState)(0);
-  const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
-  const searchValueRef = (0, _react.useRef)(null);
-  const [searchValue, setSearchValue] = (0, _react.useState)("");
-  const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
-    searchValue,
-    delay: 600
-  });
-  const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
-  const setSearchValueInterceptor = value => {
-    setSearchValue(value);
-    setIsValueDeleted(searchValue !== value && value === "");
-    searchValueRef.current = value;
-  };
-  const editingOptionInputRef = (0, _react.useRef)(null);
-  const [options, setOptions] = (0, _react.useState)([]);
-  const [editingOption, setEditingOptionState] = (0, _react.useState)(null);
-  const setEditingOption = data => {
-    setEditingOptionState(editingOption => !data ? data : {
-      ...(editingOption ?? {}),
-      ...(typeof data === "function" ? data?.(editingOption) : data),
-      isChanged: Boolean(editingOption)
-    });
-  };
-  const isEditingOptionError = (0, _react.useMemo)(() => {
-    if (!editingOption) return false;
-    return options.filter(_ref2 => {
-      let {
-        value
-      } = _ref2;
-      return value !== editingOption.value;
-    }).some(_ref3 => {
-      let {
-        label
-      } = _ref3;
-      return label === editingOption.label;
-    }) ? true : null;
-  }, [options, editingOption]);
-  const [localOptionsStore, setLocalOptionsStore] = (0, _react.useState)({});
-  const randomColorForNewOption = (0, _react.useMemo)(() => {
-    const getRandomIndex = (min, max) => {
-      return Math.floor(Math.random() * (max - min + 1)) + min;
-    };
-    const randomIndex = getRandomIndex(0, COLORS.length - 1);
-    return COLORS[randomIndex];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options.length]);
-  const singleLevelOptions = options?.reduce((acc, item) => {
-    const checkUniqAndPush = (acc, item) => {
-      const isExist = acc?.findIndex(_ref4 => {
-        let {
-          value
-        } = _ref4;
-        return value === item?.value;
-      });
-      if (isExist !== -1) {
-        acc[isExist] = item;
-      } else {
-        acc.push(item);
-      }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
     };
-    if (item.groupName) {
-      item.list?.map(item => checkUniqAndPush(acc, item));
-    } else {
-      checkUniqAndPush(acc, item);
-    }
-    return acc;
-  }, isUseLocalOptionsStore ? Object.keys(localOptionsStore)?.map(value => ({
-    value,
-    label: localOptionsStore?.[value]
-  })) : []);
-  const deleteChosen = value => {
-    if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
-    if (isUseLocalOptionsStore) {
-      setLocalOptionsStore(options => ({
-        ...options,
-        [value]: undefined
-      }));
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
     }
-    onChange(chosenOptions.filter(item => item !== value), "chosenOptions");
-  };
-
-  // --- LIST CONTAINER FUNCTIONS BEGIN --- //
-  const getParentNode = () => {
-    return document.querySelector("div#root") ?? document.querySelector("div#app") ?? document.querySelector("div#storybook-root");
-  };
-  const initListContainer = () => {
-    const dropdownList = document.createElement("div");
-    dropdownList.setAttribute("id", dropdownId);
-    dropdownList.classList.add("tags-dropdown__container");
-    listClassName && dropdownList.classList.add(listClassName);
-    if (isMobile) {
-      dropdownList.addEventListener("click", e => {
-        if (e.target.id === dropdownId) setIsOpen(false);
-      });
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
     }
-    if (isMobile) {
-      try {
-        document.getElementById(`mlw-${dropdownId}`)?.remove();
-        // eslint-disable-next-line no-empty
-      } catch (e) {}
-      const dropdownMobileListWrapper = document.createElement("div");
-      dropdownMobileListWrapper.classList.add("tags-dropdown-mobile");
-      dropdownMobileListWrapper.setAttribute("id", `mlw-${dropdownId}`);
-      dropdownMobileListWrapper?.append(dropdownList);
-      getParentNode()?.append(dropdownMobileListWrapper);
-    } else {
-      getParentNode()?.append(dropdownList);
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
     }
-  };
-  const getListContainer = () => {
-    return document.getElementById(dropdownId);
-  };
-  const getListContainerWrapper = () => {
-    return document.getElementById(`mlw-${dropdownId}`);
-  };
-  const setListContainerStyles = () => {
-    const listContainer = getListContainer();
-    if (!listContainer || !isOpen) return false;
-    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-    const {
-      width,
-      height,
-      left,
-      top
-    } = dropdownRef?.current?.getBoundingClientRect() ?? {};
-    const selectorWrapper = dropdownListWrapperRef?.current;
-    const dropdownList = listContainer.getElementsByClassName("tags-dropdown__list")[0];
-    const listHeader = selectorWrapper?.getElementsByClassName("tags-dropdown__header")[0];
-    const listFooter = selectorWrapper?.getElementsByClassName("tags-dropdown__footer")[0];
-    const margin = parseInt(getComputedStyle(selectorWrapper)?.marginTop?.replace("px", "") ?? 0, 10);
-    let selectorWrapperHeight = selectorWrapper?.getBoundingClientRect()?.height;
-    const maxSelectorWrapperHeight = 500 - (listHeader?.getBoundingClientRect()?.height ?? 0) - (listFooter?.getBoundingClientRect()?.height ?? 0);
-    if (!isMobile || !withMobileLogic) {
-      const dropdownListMaxHeightInPx = getComputedStyle(dropdownList)?.maxHeight;
-      const maxHeight = initListHeight ?? parseInt(dropdownListMaxHeightInPx?.replace("px", "") ?? 0, 10);
-      if (initListHeight === null && !isNaN(maxHeight)) setInitListHeight(maxHeight);
-      if (selectorWrapperHeight > maxHeight && !isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
-      const toTop = renderCustomTrigger ? top - margin - (customTriggerRef?.current?.getBoundingClientRect()?.height ?? 0) : top - margin;
-      const toBottom = windowHeight - top - height - margin * 2;
-      let listPosition = listPos;
-      if (!listPos && options.length) {
-        listPosition = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
-        setListPos(listPosition);
-      }
-      if (selectorWrapperHeight > (listPosition === "top" ? toTop : toBottom)) {
-        selectorWrapperHeight = (listPosition === "top" ? toTop : toBottom) - 3 * margin;
-        if (selectorWrapperHeight < 200) {
-          selectorWrapperHeight = 200;
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
         }
-        selectorWrapper.style.maxHeight = `${selectorWrapperHeight}px`;
-      }
-      listContainer.style.minWidth = `${width}px`;
-      listContainer.style.left = `${left}px`;
-      listContainer.style.top = `${listPosition === "bottom" ? top + height : top - selectorWrapperHeight - 2 * margin}px`;
-    } else {
-      dropdownList.style.maxHeight = `${maxSelectorWrapperHeight}px`;
     }
-  };
-  const renderListContainer = () => {
-    const lc = getListContainer();
-    if (!lc) return null;
-
-    // eslint-disable-next-line no-use-before-define
-    return /*#__PURE__*/(0, _reactDom.createPortal)(getListMarkUp(), lc);
-  };
-  // --- LIST CONTAINER FUNCTIONS END --- //
-
-  // --- CREATABLE LOGIC BEGIN --- //
-  const onOptionCreateClick = () => {
-    const newOption = {
-      label: searchValue,
-      style: {
-        backgroundColor: randomColorForNewOption
-      },
-      isEditable: true,
-      ref: /*#__PURE__*/(0, _react.createRef)()
-    };
-
-    // eslint-disable-next-line no-promise-executor-return
-    (onOptionCreate?.(newOption) ?? new Promise(r => r())).then(result => {
-      const tempId = Math.random().toString(16).slice(2);
-      newOption.value = result?.id ?? tempId;
-      setOptions(state => [...state, newOption]);
-      setSearchValue("");
-      onChangeHandler(newOption);
-    });
-  };
-  const onOptionEditClick = (e, item) => {
-    e?.preventDefault();
-    e?.stopPropagation();
-    setEditingOption(editingOption?.value === item?.value ? null : item);
-  };
-  const onOptionDeleteClick = () => {
-    // eslint-disable-next-line no-promise-executor-return
-    (onOptionDelete?.(editingOption) ?? new Promise(r => r())).then(() => {
-      deleteChosen(editingOption?.value);
-      setOptions(options => options.filter(_ref5 => {
-        let {
-          value
-        } = _ref5;
-        return value !== editingOption?.value;
-      }));
-      setEditingOption(null);
-    });
-  };
-  const saveEditingOption = () => {
-    if (!editingOption?.isChanged || isEditingOptionError) {
-      setEditingOption(null);
-      return false;
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
     }
-    onOptionEdit?.(editingOption);
-    setOptions(options => options.map(option => {
-      if (editingOption && option.value === editingOption?.value) {
-        const tmp = {
-          ...editingOption
+    return newObj;
+}
+const RC = "tags-dropdown";
+const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
+const COLORS = [
+    "#F1F0F0",
+    "#E3E2E0",
+    "#EEDFDA",
+    "#F9DEC9",
+    "#FDECC8",
+    "#DBECDB",
+    "#D3E4EF",
+    "#E8DEEE",
+    "#F4E0E9",
+    "#FFE2DD",
+    "#D3EFED",
+    "#ECEEDE"
+];
+const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, className, tagClassname, listClassName, onKeyPress = ()=>{}, placeholder, label, disabled, isValuesInTags, error, isNotValidateASCII = false, noTagsWrap = false, headerContent = null, footerContent = null, selectAllButtonRef = null, unselectAllButtonRef = null, closeOnSelect = false, closeOnRemove = false, closeOnRemoveAll = false, closeOnSelectAll = false, closeOnSelectMobile = false, closeOnRemoveMobile = false, closeOnRemoveAllMobile = false, closeOnSelectAllMobile = false, fieldKey, id, noOptionsText = "No options available", mobileSearchPlaceholder, isSearchable = true, useLiveSearch, doRequest: doLiveSearchRequest, attributesOfNativeInput = {}, isUseLocalOptionsStore = true, isDefaultOpened = false, withMobileLogic, withCreateLogic, withActions, withSearchInputInList, renderOptionsAsTags, minItemsForShowMobileSearch = MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH, onOptionCreate, onOptionEdit, onOptionDelete, onActionConfirmClick, onActionCancelClick, onDropdownListClose, customTriggerRef, renderCustomTrigger, recalculateListContainerStylesTrigger })=>{
+    var _Object_keys, _dropdownListWrapperRef_current_getBoundingClientRect, _dropdownListWrapperRef_current, _dropdownListRef_current, _dropdownListRef_current1;
+    const inputRef = (0, _react.useRef)(null);
+    const wrapperRef = (0, _react.useRef)(null);
+    const dropdownRef = (0, _react.useRef)(null);
+    const dropdownListRef = (0, _react.useRef)(null);
+    const editOptionModalRef = (0, _react.useRef)(null);
+    const dropdownListWrapperRef = (0, _react.useRef)(null);
+    const { isMobile: isMobileProp } = (0, _useIsMobile.default)();
+    const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
+    const [dropdownId] = (0, _react.useState)(id || fieldKey || Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = (0, _react.useState)(false);
+    const [windowScrollTop, setWindowScrollTop] = (0, _react.useState)(0);
+    const [listPos, setListPos] = (0, _react.useState)(null);
+    const [initListHeight, setInitListHeight] = (0, _react.useState)(null);
+    const [isScrollableList, setIsScrollableList] = (0, _react.useState)(null);
+    const [isFixedMaxHeight, setIsFixedMaxHeight] = (0, _react.useState)(false);
+    const [scrollTop, setScrollTop] = (0, _react.useState)(0);
+    const [scrollHeight, setScrollHeight] = (0, _react.useState)(1);
+    const searchValueRef = (0, _react.useRef)(null);
+    const [searchValue, setSearchValue] = (0, _react.useState)("");
+    const debouncedSearchTerm = (0, _useDebounce.useDebounce)({
+        searchValue,
+        delay: 600
+    });
+    const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
+    const setSearchValueInterceptor = (value)=>{
+        setSearchValue(value);
+        setIsValueDeleted(searchValue !== value && value === "");
+        searchValueRef.current = value;
+    };
+    const editingOptionInputRef = (0, _react.useRef)(null);
+    const [options, setOptions] = (0, _react.useState)([]);
+    const [editingOption, setEditingOptionState] = (0, _react.useState)(null);
+    const setEditingOption = (data)=>{
+        setEditingOptionState((editingOption)=>!data ? data : {
+                ...editingOption !== null && editingOption !== void 0 ? editingOption : {},
+                ...typeof data === "function" ? data === null || data === void 0 ? void 0 : data(editingOption) : data,
+                isChanged: Boolean(editingOption)
+            });
+    };
+    const isEditingOptionError = (0, _react.useMemo)(()=>{
+        if (!editingOption) return false;
+        return options.filter(({ value })=>value !== editingOption.value).some(({ label })=>label === editingOption.label) ? true : null;
+    }, [
+        options,
+        editingOption
+    ]);
+    const [localOptionsStore, setLocalOptionsStore] = (0, _react.useState)({});
+    const randomColorForNewOption = (0, _react.useMemo)(()=>{
+        const getRandomIndex = (min, max)=>{
+            return Math.floor(Math.random() * (max - min + 1)) + min;
         };
-        setEditingOption(null);
-        return tmp;
-      }
-      return option;
-    }));
-  };
-  const setEditOptionModalStyles = () => {
-    if (!editingOption || !editOptionModalRef?.current) return null;
-    const modalSize = 200;
-    const {
-      scrollX,
-      scrollY
-    } = window;
-    const positionClasses = {
-      left: "modal-left",
-      right: "modal-right",
-      top: "modal-top",
-      bottom: "modal-bottom"
+        const randomIndex = getRandomIndex(0, COLORS.length - 1);
+        return COLORS[randomIndex];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        options.length
+    ]);
+    const singleLevelOptions = options === null || options === void 0 ? void 0 : options.reduce((acc, item)=>{
+        const checkUniqAndPush = (acc, item)=>{
+            const isExist = acc === null || acc === void 0 ? void 0 : acc.findIndex(({ value })=>value === (item === null || item === void 0 ? void 0 : item.value));
+            if (isExist !== -1) {
+                acc[isExist] = item;
+            } else {
+                acc.push(item);
+            }
+        };
+        if (item.groupName) {
+            var _item_list;
+            (_item_list = item.list) === null || _item_list === void 0 ? void 0 : _item_list.map((item)=>checkUniqAndPush(acc, item));
+        } else {
+            checkUniqAndPush(acc, item);
+        }
+        return acc;
+    }, isUseLocalOptionsStore ? (_Object_keys = Object.keys(localOptionsStore)) === null || _Object_keys === void 0 ? void 0 : _Object_keys.map((value)=>({
+            value,
+            label: localOptionsStore === null || localOptionsStore === void 0 ? void 0 : localOptionsStore[value]
+        })) : []);
+    const deleteChosen = (value)=>{
+        if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
+        if (isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>({
+                    ...options,
+                    [value]: undefined
+                }));
+        }
+        onChange(chosenOptions.filter((item)=>item !== value), "chosenOptions");
     };
-    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
-    const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-    const el = editingOption?.ref?.current;
-    const {
-      x,
-      y,
-      width,
-      height
-    } = el?.getBoundingClientRect() ?? {};
-    const containerPosition = dropdownListWrapperRef?.current?.getBoundingClientRect();
-    const distanceToRight = windowWidth - containerPosition?.x - containerPosition?.width;
-    const distanceToBottom = windowHeight - y - scrollY - height;
-    Object.values(positionClasses).map(className => editOptionModalRef.current.classList.remove(className));
-    editOptionModalRef.current.classList.add(positionClasses?.[distanceToRight < modalSize ? "left" : "right"] ?? "");
-    editOptionModalRef.current.classList.add(positionClasses?.[distanceToBottom < modalSize ? "top" : "bottom"] ?? "");
-    const xTranslate = distanceToRight < modalSize ? "calc(-100% + 7px)" : "-35px";
-    const yTranslate = distanceToBottom < modalSize ? `calc(-100% - ${height + 10}px)` : "10px";
-    editOptionModalRef.current.style.left = `${x + scrollX + width}px`;
-    editOptionModalRef.current.style.top = `${y + scrollY + height}px`;
-    editOptionModalRef.current.style.transform = `translate(${xTranslate}, ${yTranslate})`;
-  };
-  const renderEditOptionModal = () => {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      key: `editOptionModal${editingOption?.value}`,
-      ref: editOptionModalRef,
-      className: (0, _classnames.default)(`${RC}__edit-option-modal`)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__edit-option-modal-section`)
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-      value: editingOption.label,
-      onChange: v => setEditingOption(state => ({
-        ...state,
-        label: v
-      })),
-      error: isEditingOptionError,
-      onKeyDown: keyCode => {
-        if (keyCode === 13) saveEditingOption();
-      },
-      symbolsLimit: "50",
-      ref: editingOptionInputRef
-    }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-      variant: "link",
-      icon: /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, null),
-      label: "Delete",
-      onClick: onOptionDeleteClick
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__edit-option-modal-section-divider`)
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__edit-option-modal-section`)
-    }, /*#__PURE__*/_react.default.createElement("h3", null, "Colors"), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__edit-option-modal-section-colors`)
-    }, COLORS.map(color => /*#__PURE__*/_react.default.createElement("div", {
-      key: color,
-      className: "color-block",
-      style: {
-        backgroundColor: color
-      },
-      onClick: () => setEditingOption(state => ({
-        ...state,
-        style: {
-          ...state.style,
-          backgroundColor: color
+    // --- LIST CONTAINER FUNCTIONS BEGIN --- //
+    const getParentNode = ()=>{
+        var _document_querySelector, _ref;
+        return (_ref = (_document_querySelector = document.querySelector("div#root")) !== null && _document_querySelector !== void 0 ? _document_querySelector : document.querySelector("div#app")) !== null && _ref !== void 0 ? _ref : document.querySelector("div#storybook-root");
+    };
+    const initListContainer = ()=>{
+        const dropdownList = document.createElement("div");
+        dropdownList.setAttribute("id", dropdownId);
+        dropdownList.classList.add("tags-dropdown__container");
+        listClassName && dropdownList.classList.add(listClassName);
+        if (isMobile) {
+            dropdownList.addEventListener("click", (e)=>{
+                if (e.target.id === dropdownId) setIsOpen(false);
+            });
         }
-      }))
-    }, editingOption?.style?.backgroundColor === color ? /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null) : null)))));
-  };
-  // --- CREATABLE LOGIC END --- //
-
-  // --- GENERAL FUNCTIONS BEGIN --- //
-  const handleClickOutside = e => {
-    const {
-      target
-    } = e;
-    if (isOpen && !getListContainer()?.contains(target) && !editOptionModalRef.current
-    // &&
-    // (
-    //   customTriggerRef?.current ? customTriggerRef?.current?.contains(target) : true
-    // )
-    ) {
-      setIsOpen(false);
-      onDropdownListClose?.(e);
-    } else if (editOptionModalRef.current && !editOptionModalRef.current?.contains(target)) {
-      if (!document?.getElementById?.(`editTrigger${editingOption?.value}`)?.contains?.(target)) saveEditingOption();
-    }
-  };
-  const closeList = e => {
-    handleClickOutside(e);
-    if (!e.target.isEqualNode(inputRef?.current)) inputRef?.current?.blur();
-  };
-  const isTargetInParent = target => {
-    if (target?.tagName === "svg" && target?.parentNodclassName === "tag__button" || target?.tagName === "line") return false;
-    if (target?.tagName === "svg" && target?.parentNodclassName !== "tag__button" || target?.className?.indexOf?.("tag__label") !== -1 || target?.className?.indexOf?.("tag-list_wrapper") !== -1 || target?.className.indexOf(`${RC}__trigger`) !== -1 || target?.className === "tags-dropdown__arrow") return true;
-    return false;
-  };
-  const isItemMatchesSearch = item => {
-    if (item.isHiddenInList) return false;
-    const title = item.title || item.label;
-    return searchValue.length ? title?.toLowerCase().includes(searchValue?.toLowerCase() || "") : true;
-  };
-  // --- GENERAL FUNCTIONS END --- //
-
-  const prepareOptions = options => {
-    return options?.map(option => option?.groupName ? option?.list : option).flat();
-  };
-  const getFilteredOptions = options => options?.reduce((result, option) => {
-    if (option.groupName) {
-      const filteredGroupItems = option?.list?.filter(item => isItemMatchesSearch(item));
-      if (filteredGroupItems?.length) {
-        result.push({
-          ...option,
-          list: filteredGroupItems
+        if (isMobile) {
+            var _getParentNode;
+            try {
+                var _document_getElementById;
+                (_document_getElementById = document.getElementById(`mlw-${dropdownId}`)) === null || _document_getElementById === void 0 ? void 0 : _document_getElementById.remove();
+            // eslint-disable-next-line no-empty
+            } catch (e) {}
+            const dropdownMobileListWrapper = document.createElement("div");
+            dropdownMobileListWrapper.classList.add("tags-dropdown-mobile");
+            dropdownMobileListWrapper.setAttribute("id", `mlw-${dropdownId}`);
+            dropdownMobileListWrapper === null || dropdownMobileListWrapper === void 0 ? void 0 : dropdownMobileListWrapper.append(dropdownList);
+            (_getParentNode = getParentNode()) === null || _getParentNode === void 0 ? void 0 : _getParentNode.append(dropdownMobileListWrapper);
+        } else {
+            var _getParentNode1;
+            (_getParentNode1 = getParentNode()) === null || _getParentNode1 === void 0 ? void 0 : _getParentNode1.append(dropdownList);
+        }
+    };
+    const getListContainer = ()=>{
+        return document.getElementById(dropdownId);
+    };
+    const getListContainerWrapper = ()=>{
+        return document.getElementById(`mlw-${dropdownId}`);
+    };
+    const setListContainerStyles = ()=>{
+        var _dropdownRef_current, _getComputedStyle_marginTop, _getComputedStyle, _selectorWrapper_getBoundingClientRect, _listHeader_getBoundingClientRect, _listFooter_getBoundingClientRect;
+        const listContainer = getListContainer();
+        if (!listContainer || !isOpen) return false;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        var _dropdownRef_current_getBoundingClientRect;
+        const { width, height, left, top } = (_dropdownRef_current_getBoundingClientRect = dropdownRef === null || dropdownRef === void 0 ? void 0 : (_dropdownRef_current = dropdownRef.current) === null || _dropdownRef_current === void 0 ? void 0 : _dropdownRef_current.getBoundingClientRect()) !== null && _dropdownRef_current_getBoundingClientRect !== void 0 ? _dropdownRef_current_getBoundingClientRect : {};
+        const selectorWrapper = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : dropdownListWrapperRef.current;
+        const dropdownList = listContainer.getElementsByClassName("tags-dropdown__list")[0];
+        const listHeader = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName("tags-dropdown__header")[0];
+        const listFooter = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : selectorWrapper.getElementsByClassName("tags-dropdown__footer")[0];
+        var _getComputedStyle_marginTop_replace;
+        const margin = parseInt((_getComputedStyle_marginTop_replace = (_getComputedStyle = getComputedStyle(selectorWrapper)) === null || _getComputedStyle === void 0 ? void 0 : (_getComputedStyle_marginTop = _getComputedStyle.marginTop) === null || _getComputedStyle_marginTop === void 0 ? void 0 : _getComputedStyle_marginTop.replace("px", "")) !== null && _getComputedStyle_marginTop_replace !== void 0 ? _getComputedStyle_marginTop_replace : 0, 10);
+        let selectorWrapperHeight = selectorWrapper === null || selectorWrapper === void 0 ? void 0 : (_selectorWrapper_getBoundingClientRect = selectorWrapper.getBoundingClientRect()) === null || _selectorWrapper_getBoundingClientRect === void 0 ? void 0 : _selectorWrapper_getBoundingClientRect.height;
+        var _listHeader_getBoundingClientRect_height, _listFooter_getBoundingClientRect_height;
+        const maxSelectorWrapperHeight = 500 - ((_listHeader_getBoundingClientRect_height = listHeader === null || listHeader === void 0 ? void 0 : (_listHeader_getBoundingClientRect = listHeader.getBoundingClientRect()) === null || _listHeader_getBoundingClientRect === void 0 ? void 0 : _listHeader_getBoundingClientRect.height) !== null && _listHeader_getBoundingClientRect_height !== void 0 ? _listHeader_getBoundingClientRect_height : 0) - ((_listFooter_getBoundingClientRect_height = listFooter === null || listFooter === void 0 ? void 0 : (_listFooter_getBoundingClientRect = listFooter.getBoundingClientRect()) === null || _listFooter_getBoundingClientRect === void 0 ? void 0 : _listFooter_getBoundingClientRect.height) !== null && _listFooter_getBoundingClientRect_height !== void 0 ? _listFooter_getBoundingClientRect_height : 0);
+        if (!isMobile || !withMobileLogic) {
+            var _getComputedStyle1, _customTriggerRef_current_getBoundingClientRect, _customTriggerRef_current;
+            const dropdownListMaxHeightInPx = (_getComputedStyle1 = getComputedStyle(dropdownList)) === null || _getComputedStyle1 === void 0 ? void 0 : _getComputedStyle1.maxHeight;
+            var _dropdownListMaxHeightInPx_replace;
+            const maxHeight = initListHeight !== null && initListHeight !== void 0 ? initListHeight : parseInt((_dropdownListMaxHeightInPx_replace = dropdownListMaxHeightInPx === null || dropdownListMaxHeightInPx === void 0 ? void 0 : dropdownListMaxHeightInPx.replace("px", "")) !== null && _dropdownListMaxHeightInPx_replace !== void 0 ? _dropdownListMaxHeightInPx_replace : 0, 10);
+            if (initListHeight === null && !isNaN(maxHeight)) setInitListHeight(maxHeight);
+            if (selectorWrapperHeight > maxHeight && !isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
+            var _customTriggerRef_current_getBoundingClientRect_height;
+            const toTop = renderCustomTrigger ? top - margin - ((_customTriggerRef_current_getBoundingClientRect_height = customTriggerRef === null || customTriggerRef === void 0 ? void 0 : (_customTriggerRef_current = customTriggerRef.current) === null || _customTriggerRef_current === void 0 ? void 0 : (_customTriggerRef_current_getBoundingClientRect = _customTriggerRef_current.getBoundingClientRect()) === null || _customTriggerRef_current_getBoundingClientRect === void 0 ? void 0 : _customTriggerRef_current_getBoundingClientRect.height) !== null && _customTriggerRef_current_getBoundingClientRect_height !== void 0 ? _customTriggerRef_current_getBoundingClientRect_height : 0) : top - margin;
+            const toBottom = windowHeight - top - height - margin * 2;
+            let listPosition = listPos;
+            if (!listPos && options.length) {
+                listPosition = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
+                setListPos(listPosition);
+            }
+            if (selectorWrapperHeight > (listPosition === "top" ? toTop : toBottom)) {
+                selectorWrapperHeight = (listPosition === "top" ? toTop : toBottom) - 3 * margin;
+                if (selectorWrapperHeight < 200) {
+                    selectorWrapperHeight = 200;
+                }
+                selectorWrapper.style.maxHeight = `${selectorWrapperHeight}px`;
+            }
+            listContainer.style.minWidth = `${width}px`;
+            listContainer.style.left = `${left}px`;
+            listContainer.style.top = `${listPosition === "bottom" ? top + height : top - selectorWrapperHeight - 2 * margin}px`;
+        } else {
+            dropdownList.style.maxHeight = `${maxSelectorWrapperHeight}px`;
+        }
+    };
+    const renderListContainer = ()=>{
+        const lc = getListContainer();
+        if (!lc) return null;
+        // eslint-disable-next-line no-use-before-define
+        return /*#__PURE__*/ (0, _reactdom.createPortal)(getListMarkUp(), lc);
+    };
+    // --- LIST CONTAINER FUNCTIONS END --- //
+    // --- CREATABLE LOGIC BEGIN --- //
+    const onOptionCreateClick = ()=>{
+        const newOption = {
+            label: searchValue,
+            style: {
+                backgroundColor: randomColorForNewOption
+            },
+            isEditable: true,
+            ref: /*#__PURE__*/ (0, _react.createRef)()
+        };
+        var // eslint-disable-next-line no-promise-executor-return
+        _onOptionCreate;
+        ((_onOptionCreate = onOptionCreate === null || onOptionCreate === void 0 ? void 0 : onOptionCreate(newOption)) !== null && _onOptionCreate !== void 0 ? _onOptionCreate : new Promise((r)=>r())).then((result)=>{
+            const tempId = Math.random().toString(16).slice(2);
+            var _result_id;
+            newOption.value = (_result_id = result === null || result === void 0 ? void 0 : result.id) !== null && _result_id !== void 0 ? _result_id : tempId;
+            setOptions((state)=>[
+                    ...state,
+                    newOption
+                ]);
+            setSearchValue("");
+            onChangeHandler(newOption);
         });
-      }
-    } else if (isItemMatchesSearch(option)) {
-      result.push(option);
-    }
-    return result;
-  }, []);
-  const getTotalOptions = (0, _react.useCallback)(() => {
-    return options?.reduce((result, item) => {
-      if (item?.list) {
-        result += item?.list?.length || 0;
-      } else {
-        ++result;
-      }
-      return result;
-    }, 0);
-  }, [options]);
-  const onChangeHandler = item => {
-    if (item?.isFreezed) return false;
-    if (item?.closeOnOptionSelect !== undefined) {
-      if (item.closeOnOptionSelect) setIsOpen(false);
-    } else if (isMobile ? closeOnSelectMobile : closeOnSelect) setIsOpen(false);
-    setSearchValueInterceptor("");
-    if (chosenOptions.some(el => el === item.value)) {
-      deleteChosen(item.value);
-      return null;
-    }
-    if (isUseLocalOptionsStore) {
-      setLocalOptionsStore(options => ({
-        ...options,
-        [item?.value]: item?.label
-      }));
-    }
-    onChange([...chosenOptions, item.value], "chosenOptions");
-    return null;
-  };
-  const onSearchHandler = name => {
-    let inputValue = name;
-    if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
-    setSearchValueInterceptor(inputValue);
-  };
-  const onWrapperClick = e => {
-    if (e.target === wrapperRef?.current) {
-      e.stopPropagation();
-      e.preventDefault();
-      setIsOpen(false);
-    }
-  };
-  const selectAllItems = () => {
-    const preparedOptions = prepareOptions(options)?.filter(_ref6 => {
-      let {
-        isFreezed,
-        value
-      } = _ref6;
-      return !isFreezed && !chosenOptions?.includes(value) && value !== "open_modal";
-    });
-    if (isUseLocalOptionsStore) {
-      setLocalOptionsStore(options => preparedOptions?.reduce((result, _ref7) => {
-        let {
-          value,
-          label
-        } = _ref7;
-        result[value] = label;
-        return result;
-      }, options));
-    }
-    onChange([...chosenOptions, ...(preparedOptions?.map(_ref8 => {
-      let {
-        value
-      } = _ref8;
-      return value;
-    }) || [])], "chosenOptions");
-    if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
-  };
-  const unselectAllItems = () => {
-    if (isUseLocalOptionsStore) setLocalOptionsStore({});
-    onChange(chosenOptions?.filter(item => prepareOptions(options)?.find(_ref9 => {
-      let {
-        value
-      } = _ref9;
-      return value === item;
-    })?.isFreezed), "chosenOptions");
-    if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
-  };
-  const doScrollCallback = (0, _react.useCallback)(e => {
-    if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
-      if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
-        doLiveSearchRequest(searchValueRef.current, true);
-      }
-    }
-  }, [options]);
-
-  // --- RENDER FUNCTIONS BEGIN --- //
-
-  const getMarkupForElement = item => {
-    const {
-      description
-    } = item;
-    const title = item.title || item.label;
-    const hightlightSearchValue = title => {
-      const index = title?.toLowerCase()?.indexOf(searchValue?.toLowerCase());
-      if (index === -1) return title;
-      return /*#__PURE__*/_react.default.createElement("pre", {
-        className: "inherit-styles"
-      }, /*#__PURE__*/_react.default.createElement("span", null, title.substring(0, index)), /*#__PURE__*/_react.default.createElement("span", {
-        className: "search-match bg--yellow"
-      }, title.substring(index, index + searchValue?.length)), /*#__PURE__*/_react.default.createElement("span", null, title.substring(index + searchValue?.length)));
     };
-    return /*#__PURE__*/_react.default.createElement("button", {
-      ref: item?.ref,
-      key: `${RC}__list-item-${item.id || item.value}`,
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        onChangeHandler(item);
-      },
-      className: (0, _classnames.default)(`${RC}__list-item`, {
-        [`${RC}__list-item_active`]: chosenOptions?.some(value => value === item.value)
-      }, {
-        [`${RC}__list-item_disabled`]: item.disabled
-      }, {
-        [`${RC}__list-item_freezed`]: item?.isFreezed
-      }, {
-        [`${RC}__list-item--editing`]: item?.value === editingOption?.value
-      }, item.className)
-    }, !isMobile && /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(`${RC}__active-icon`, {
-        [`${RC}__active-icon_active`]: chosenOptions?.some(value => value === item.value)
-      })
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, {
-      width: 16,
-      height: 16,
-      className: "color--text"
-    })), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__list-item-body`)
-    }, renderOptionsAsTags ? /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      key: item?.value,
-      className: (0, _classnames.default)(`${RC}__list-item-title`, item?.labelClassName, {
-        "tag_with-btn": !item?.isFreezed
-      }),
-      label: hightlightSearchValue(title),
-      style: item?.style,
-      isNoDismiss: true
-    }) : /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(`${RC}__list-item-title`, item.labelClassName)
-    }, hightlightSearchValue(title)), description && /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)(`${RC}__list-item-description`)
-    }, description)), !isMobile && item?.isEditable && onOptionEdit && onOptionDelete && /*#__PURE__*/_react.default.createElement("div", {
-      id: `editTrigger${item?.value}`,
-      className: (0, _classnames.default)(`${RC}__list-item-edit-trigger`),
-      onClick: e => onOptionEditClick(e, item)
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.MoreHorizontal, null)), isMobile ? item?.customMobileIcon ?? /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, {
-      value: chosenOptions?.some(value => value === item.value),
-      onChange: () => {
-        onChangeHandler(item);
-      }
-    }) : "");
-  };
-  const getListMarkUp = () => {
-    const filteredOptions = getFilteredOptions(options);
-    const arrToPrint = [];
-    for (const option of filteredOptions) {
-      if (option.groupName) {
-        arrToPrint.push(/*#__PURE__*/_react.default.createElement("div", {
-          key: option.groupName?.toString()?.replace(/ /g, "_").concat(Date.now()),
-          className: (0, _classnames.default)(`${RC}-group`, option.className)
-        }, /*#__PURE__*/_react.default.createElement("span", {
-          className: `${RC}-group__name`
-        }, option.groupName), option.list?.map(item => getMarkupForElement(item))));
-      } else arrToPrint.push(getMarkupForElement(option));
-    }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__container-wrapper`),
-      ref: wrapperRef,
-      onClick: isMobile ? onWrapperClick : () => {}
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      ref: dropdownListWrapperRef,
-      className: (0, _classnames.default)(`${RC}__selector-wrapper`, {
-        [`${RC}__selector-wrapper--fixed-height`]: isFixedMaxHeight && isMobile
-      })
-    }, headerContent || isMobile ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__header`, {
-        [`${RC}__header-with-shadow`]: isScrollableList && isMobile,
-        [`${RC}__header-with-shadow-hidden`]: scrollTop === 0
-      })
-    }, isMobile && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__header-row`)
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__label`)
-    }, label), /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__close-icon`),
-      onClick: e => {
-        e.stopPropagation();
-        setIsOpen(false);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {
-      onClick: e => {
-        e.stopPropagation();
-        setIsOpen(false);
-      }
-    }))), getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__header-row`)
-    }, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-      className: `${RC}__input`,
-      value: searchValue,
-      onChange: v => setSearchValueInterceptor(v),
-      placeholder: mobileSearchPlaceholder || "Search",
-      withDelete: true,
-      onMouseDown: () => {
-        if (!isOpen) {
-          setIsOpen(true);
+    const onOptionEditClick = (e, item)=>{
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setEditingOption((editingOption === null || editingOption === void 0 ? void 0 : editingOption.value) === (item === null || item === void 0 ? void 0 : item.value) ? null : item);
+    };
+    const onOptionDeleteClick = ()=>{
+        var // eslint-disable-next-line no-promise-executor-return
+        _onOptionDelete;
+        ((_onOptionDelete = onOptionDelete === null || onOptionDelete === void 0 ? void 0 : onOptionDelete(editingOption)) !== null && _onOptionDelete !== void 0 ? _onOptionDelete : new Promise((r)=>r())).then(()=>{
+            deleteChosen(editingOption === null || editingOption === void 0 ? void 0 : editingOption.value);
+            setOptions((options)=>options.filter(({ value })=>value !== (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)));
+            setEditingOption(null);
+        });
+    };
+    const saveEditingOption = ()=>{
+        if (!(editingOption === null || editingOption === void 0 ? void 0 : editingOption.isChanged) || isEditingOptionError) {
+            setEditingOption(null);
+            return false;
+        }
+        onOptionEdit === null || onOptionEdit === void 0 ? void 0 : onOptionEdit(editingOption);
+        setOptions((options)=>options.map((option)=>{
+                if (editingOption && option.value === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)) {
+                    const tmp = {
+                        ...editingOption
+                    };
+                    setEditingOption(null);
+                    return tmp;
+                }
+                return option;
+            }));
+    };
+    const setEditOptionModalStyles = ()=>{
+        var _editingOption_ref, _dropdownListWrapperRef_current;
+        if (!editingOption || !(editOptionModalRef === null || editOptionModalRef === void 0 ? void 0 : editOptionModalRef.current)) return null;
+        const modalSize = 200;
+        const { scrollX, scrollY } = window;
+        const positionClasses = {
+            left: "modal-left",
+            right: "modal-right",
+            top: "modal-top",
+            bottom: "modal-bottom"
+        };
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        const el = editingOption === null || editingOption === void 0 ? void 0 : (_editingOption_ref = editingOption.ref) === null || _editingOption_ref === void 0 ? void 0 : _editingOption_ref.current;
+        var _el_getBoundingClientRect;
+        const { x, y, width, height } = (_el_getBoundingClientRect = el === null || el === void 0 ? void 0 : el.getBoundingClientRect()) !== null && _el_getBoundingClientRect !== void 0 ? _el_getBoundingClientRect : {};
+        const containerPosition = dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperRef_current = dropdownListWrapperRef.current) === null || _dropdownListWrapperRef_current === void 0 ? void 0 : _dropdownListWrapperRef_current.getBoundingClientRect();
+        const distanceToRight = windowWidth - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.x) - (containerPosition === null || containerPosition === void 0 ? void 0 : containerPosition.width);
+        const distanceToBottom = windowHeight - y - scrollY - height;
+        Object.values(positionClasses).map((className)=>editOptionModalRef.current.classList.remove(className));
+        var _positionClasses_;
+        editOptionModalRef.current.classList.add((_positionClasses_ = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToRight < modalSize ? "left" : "right"]) !== null && _positionClasses_ !== void 0 ? _positionClasses_ : "");
+        var _positionClasses_1;
+        editOptionModalRef.current.classList.add((_positionClasses_1 = positionClasses === null || positionClasses === void 0 ? void 0 : positionClasses[distanceToBottom < modalSize ? "top" : "bottom"]) !== null && _positionClasses_1 !== void 0 ? _positionClasses_1 : "");
+        const xTranslate = distanceToRight < modalSize ? "calc(-100% + 7px)" : "-35px";
+        const yTranslate = distanceToBottom < modalSize ? `calc(-100% - ${height + 10}px)` : "10px";
+        editOptionModalRef.current.style.left = `${x + scrollX + width}px`;
+        editOptionModalRef.current.style.top = `${y + scrollY + height}px`;
+        editOptionModalRef.current.style.transform = `translate(${xTranslate}, ${yTranslate})`;
+    };
+    const renderEditOptionModal = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            ref: editOptionModalRef,
+            className: (0, _classnames.default)(`${RC}__edit-option-modal`),
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                            value: editingOption.label,
+                            onChange: (v)=>setEditingOption((state)=>({
+                                        ...state,
+                                        label: v
+                                    })),
+                            error: isEditingOptionError,
+                            onKeyDown: (keyCode)=>{
+                                if (keyCode === 13) saveEditingOption();
+                            },
+                            symbolsLimit: "50",
+                            ref: editingOptionInputRef
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                            variant: "link",
+                            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {}),
+                            label: "Delete",
+                            onClick: onOptionDeleteClick
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section-divider`)
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                            children: "Colors"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(`${RC}__edit-option-modal-section-colors`),
+                            children: COLORS.map((color)=>{
+                                var _editingOption_style;
+                                return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    className: "color-block",
+                                    style: {
+                                        backgroundColor: color
+                                    },
+                                    onClick: ()=>setEditingOption((state)=>({
+                                                ...state,
+                                                style: {
+                                                    ...state.style,
+                                                    backgroundColor: color
+                                                }
+                                            })),
+                                    children: (editingOption === null || editingOption === void 0 ? void 0 : (_editingOption_style = editingOption.style) === null || _editingOption_style === void 0 ? void 0 : _editingOption_style.backgroundColor) === color ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {}) : null
+                                }, color);
+                            })
+                        })
+                    ]
+                })
+            ]
+        }, `editOptionModal${editingOption === null || editingOption === void 0 ? void 0 : editingOption.value}`);
+    };
+    // --- CREATABLE LOGIC END --- //
+    // --- GENERAL FUNCTIONS BEGIN --- //
+    const handleClickOutside = (e)=>{
+        var _getListContainer, _editOptionModalRef_current;
+        const { target } = e;
+        if (isOpen && !((_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.contains(target)) && !editOptionModalRef.current) {
+            setIsOpen(false);
+            onDropdownListClose === null || onDropdownListClose === void 0 ? void 0 : onDropdownListClose(e);
+        } else if (editOptionModalRef.current && !((_editOptionModalRef_current = editOptionModalRef.current) === null || _editOptionModalRef_current === void 0 ? void 0 : _editOptionModalRef_current.contains(target))) {
+            var _document_getElementById_contains, _document_getElementById, _document_getElementById1, _document;
+            if (!((_document = document) === null || _document === void 0 ? void 0 : (_document_getElementById1 = _document.getElementById) === null || _document_getElementById1 === void 0 ? void 0 : (_document_getElementById = _document_getElementById1.call(_document, `editTrigger${editingOption === null || editingOption === void 0 ? void 0 : editingOption.value}`)) === null || _document_getElementById === void 0 ? void 0 : (_document_getElementById_contains = _document_getElementById.contains) === null || _document_getElementById_contains === void 0 ? void 0 : _document_getElementById_contains.call(_document_getElementById, target))) saveEditingOption();
         }
-      }
-    }, attributesOfNativeInput)))), headerContent && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__header-row`)
-    }, headerContent)) : null, withSearchInputInList && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__input-list-wrapper`)
-    }, renderSearchInput()), withCreateLogic && onOptionCreate && searchValue && filteredOptions.length && singleLevelOptions.every(_ref10 => {
-      let {
-        label
-      } = _ref10;
-      return label?.toLowerCase() !== searchValue?.toLowerCase();
-    }) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__creatable-helper`)
-    }, "Select an option or create one") : null, /*#__PURE__*/_react.default.createElement("div", {
-      ref: dropdownListRef,
-      className: `${RC}__list ${headerContent || isMobile ? `${RC}__list--with-header` : ""} ${footerContent ? `${RC}__list--with-footer` : ""}`
-    }, arrToPrint, filteredOptions.filter(_ref11 => {
-      let {
-        value
-      } = _ref11;
-      return value !== "open_modal";
-    })?.length === 0 && (!withCreateLogic || !searchValue) ? /*#__PURE__*/_react.default.createElement("div", {
-      className: `${RC}__no-options`
-    }, noOptionsText) : null), (footerContent || isMobile) && filteredOptions.filter(_ref12 => {
-      let {
-        value
-      } = _ref12;
-      return value !== "open_modal";
-    })?.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__footer`, {
-        [`${RC}__footer-with-shadow`]: isMobile && isScrollableList,
-        [`${RC}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
-      })
-    }, footerContent, isMobile && /*#__PURE__*/_react.default.createElement("button", {
-      onClick: () => setIsOpen(false)
-    }, "Apply", chosenOptions?.length ? `(${chosenOptions?.length})` : "")) : null, editingOption && /*#__PURE__*/(0, _reactDom.createPortal)(renderEditOptionModal(), document.getElementById("app") ?? document.body), withCreateLogic && onOptionCreate && searchValue && singleLevelOptions.every(_ref13 => {
-      let {
-        label
-      } = _ref13;
-      return label?.toLowerCase() !== searchValue?.toLowerCase();
-    }) && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)(`${RC}__create-option`),
-      onClick: onOptionCreateClick
-    }, "Create", /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      label: searchValue,
-      style: {
-        backgroundColor: randomColorForNewOption
-      },
-      isNoDismiss: true
-    }))));
-  };
-  const renderSearchInput = () => {
-    return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
-      ref: inputRef,
-      className: (0, _classnames.default)(`${RC}__input`, {
-        [`${RC}__input--in-list`]: withSearchInputInList
-      }),
-      value: searchValue,
-      onChange: onSearchHandler,
-      placeholder: placeholder || "Select from list",
-      attributesOfNativeInput: {
-        ...attributesOfNativeInput,
-        onKeyDown: e => {
-          if (e.keyCode === 13 && withCreateLogic && onOptionCreate && singleLevelOptions.every(_ref14 => {
-            let {
-              label
-            } = _ref14;
-            return label?.toLowerCase() !== searchValue?.toLowerCase();
-          })) {
-            onOptionCreateClick();
-          }
-          onKeyPress(e, searchValue);
+    };
+    const closeList = (e)=>{
+        var _inputRef_current;
+        handleClickOutside(e);
+        if (!e.target.isEqualNode(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)) inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
+    };
+    const isTargetInParent = (target)=>{
+        var _target_className_indexOf, _target_className, _target_className_indexOf1, _target_className1;
+        if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) === "tag__button" || (target === null || target === void 0 ? void 0 : target.tagName) === "line") return false;
+        if ((target === null || target === void 0 ? void 0 : target.tagName) === "svg" && (target === null || target === void 0 ? void 0 : target.parentNodclassName) !== "tag__button" || (target === null || target === void 0 ? void 0 : (_target_className = target.className) === null || _target_className === void 0 ? void 0 : (_target_className_indexOf = _target_className.indexOf) === null || _target_className_indexOf === void 0 ? void 0 : _target_className_indexOf.call(_target_className, "tag__label")) !== -1 || (target === null || target === void 0 ? void 0 : (_target_className1 = target.className) === null || _target_className1 === void 0 ? void 0 : (_target_className_indexOf1 = _target_className1.indexOf) === null || _target_className_indexOf1 === void 0 ? void 0 : _target_className_indexOf1.call(_target_className1, "tag-list_wrapper")) !== -1 || (target === null || target === void 0 ? void 0 : target.className.indexOf(`${RC}__trigger`)) !== -1 || (target === null || target === void 0 ? void 0 : target.className) === "tags-dropdown__arrow") return true;
+        return false;
+    };
+    const isItemMatchesSearch = (item)=>{
+        if (item.isHiddenInList) return false;
+        const title = item.title || item.label;
+        return searchValue.length ? title === null || title === void 0 ? void 0 : title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || "") : true;
+    };
+    // --- GENERAL FUNCTIONS END --- //
+    const prepareOptions = (options)=>{
+        return options === null || options === void 0 ? void 0 : options.map((option)=>(option === null || option === void 0 ? void 0 : option.groupName) ? option === null || option === void 0 ? void 0 : option.list : option).flat();
+    };
+    const getFilteredOptions = (options)=>options === null || options === void 0 ? void 0 : options.reduce((result, option)=>{
+            if (option.groupName) {
+                var _option_list;
+                const filteredGroupItems = option === null || option === void 0 ? void 0 : (_option_list = option.list) === null || _option_list === void 0 ? void 0 : _option_list.filter((item)=>isItemMatchesSearch(item));
+                if (filteredGroupItems === null || filteredGroupItems === void 0 ? void 0 : filteredGroupItems.length) {
+                    result.push({
+                        ...option,
+                        list: filteredGroupItems
+                    });
+                }
+            } else if (isItemMatchesSearch(option)) {
+                result.push(option);
+            }
+            return result;
+        }, []);
+    const getTotalOptions = (0, _react.useCallback)(()=>{
+        return options === null || options === void 0 ? void 0 : options.reduce((result, item)=>{
+            if (item === null || item === void 0 ? void 0 : item.list) {
+                var _item_list;
+                result += (item === null || item === void 0 ? void 0 : (_item_list = item.list) === null || _item_list === void 0 ? void 0 : _item_list.length) || 0;
+            } else {
+                ++result;
+            }
+            return result;
+        }, 0);
+    }, [
+        options
+    ]);
+    const onChangeHandler = (item)=>{
+        if (item === null || item === void 0 ? void 0 : item.isFreezed) return false;
+        if ((item === null || item === void 0 ? void 0 : item.closeOnOptionSelect) !== undefined) {
+            if (item.closeOnOptionSelect) setIsOpen(false);
+        } else if (isMobile ? closeOnSelectMobile : closeOnSelect) setIsOpen(false);
+        setSearchValueInterceptor("");
+        if (chosenOptions.some((el)=>el === item.value)) {
+            deleteChosen(item.value);
+            return null;
         }
-        // onFocus: (e) => {
-        //   if (isMobile) e?.target?.blur();
-        // },
-      }
-    }, withCreateLogic ? {
-      symbolsLimit: 50
-    } : {}));
-  };
-  const renderDropdownTrigger = (0, _react.useCallback)(() => {
-    const renderDefaultDropdownTrigger = () => {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(`${RC}__trigger`, {
-          "tags-dropdown__error": error,
-          [`${RC}__trigger--with-actions`]: withActions
-        }),
-        onClick: _ref15 => {
-          let {
-            target
-          } = _ref15;
-          if (target?.tagName === "INPUT") {
-            setIsOpen(true);
-          } else if (isTargetInParent(target)) {
-            setIsOpen(isOpen => !isOpen);
-          }
+        if (isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>({
+                    ...options,
+                    [item === null || item === void 0 ? void 0 : item.value]: item === null || item === void 0 ? void 0 : item.label
+                }));
         }
-      }, noTagsWrap ? /*#__PURE__*/_react.default.createElement(_TagList.default, {
-        items: chosenOptions?.map((value, i) => {
-          const tag = singleLevelOptions?.find(el => el.value == value);
-          const label = isValuesInTags ? tag?.value : tag?.label || tag?.name || tag?.title;
-          return {
-            value,
-            label,
-            id: i,
-            className: tag?.labelClassName,
-            style: tag?.style
-          };
-        }),
-        disableShowMore: true
-      }) : chosenOptions?.map(value => {
-        const tag = singleLevelOptions?.find(el => el.value == value);
-        const label = isValuesInTags ? tag?.value : tag?.label || tag?.name || tag?.title;
-        return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-          key: value,
-          className: (0, _classnames.default)(tagClassname, tag?.labelClassName, {
-            "tag_with-btn": !tag?.isFreezed
-          }),
-          label: label,
-          style: tag?.style,
-          removeItem: tag?.isFreezed ? null : () => deleteChosen(value),
-          isNoDismiss: false
-        });
-      }), chosenOptions.length === 0 || !noTagsWrap ? renderSearchInput() : "", /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _classnames.default)(`${RC}__arrow`, {
-          [`${RC}__arrow_active`]: isOpen
-        })
-      }, isMobile ? /*#__PURE__*/_react.default.createElement(_reactFeather.Code, {
-        className: "mobile-icon"
-      }) : isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, {
-        className: "color--text"
-      }) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
-        className: "color--text"
-      })));
+        onChange([
+            ...chosenOptions,
+            item.value
+        ], "chosenOptions");
+        return null;
     };
-    return renderCustomTrigger?.({
-      chosenOptions,
-      singleLevelOptions,
-      deleteChosen,
-      inputRef,
-      onSearchHandler,
-      isOpen,
-      setIsOpen
-    }) ?? renderDefaultDropdownTrigger();
-  }, [chosenOptions, singleLevelOptions, inputRef, isOpen]);
-  // --- RENDER FUNCTIONS END --- //
-
-  (0, _react.useLayoutEffect)(() => {
-    initListContainer();
-    if (isDefaultOpened && !isMobileProp) setIsOpen(true);
-    return () => {
-      getListContainer()?.remove();
-      getListContainerWrapper()?.remove();
+    const onSearchHandler = (name)=>{
+        let inputValue = name;
+        if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+        setSearchValueInterceptor(inputValue);
     };
-  }, []);
-  (0, _react.useLayoutEffect)(() => {
-    if (!isMobile) {
-      window.addEventListener("mousewheel", closeList);
-      window.addEventListener("wheel", closeList);
-      window.addEventListener("touchmove", closeList);
-      window.addEventListener("mouseup", handleClickOutside);
-    } else {
-      window.removeEventListener("mousewheel", closeList);
-      window.removeEventListener("wheel", closeList);
-      window.removeEventListener("touchmove", closeList);
-      window.removeEventListener("mouseup", handleClickOutside);
-    }
-    getListContainer()?.addEventListener("click", closeList);
-    return () => {
-      window.removeEventListener("mousewheel", closeList);
-      window.removeEventListener("mouseup", handleClickOutside);
-      window.removeEventListener("wheel", closeList);
-      window.removeEventListener("touchmove", closeList);
-      getListContainer()?.removeEventListener("click", closeList);
+    const onWrapperClick = (e)=>{
+        if (e.target === (wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
+            e.stopPropagation();
+            e.preventDefault();
+            setIsOpen(false);
+        }
     };
-  }, [getListContainer, isMobile]);
-  (0, _react.useLayoutEffect)(() => {
-    if (isOpen) {
-      setListContainerStyles();
-      setEditOptionModalStyles();
-    }
-  }, [isOpen, optionsProp, chosenOptions, searchValue, isMobile, dropdownListWrapperRef?.current?.getBoundingClientRect()?.height, recalculateListContainerStylesTrigger]);
-  (0, _react.useEffect)(() => {
-    if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
-      options.map(option => {
-        if (!localOptionsStore?.[option?.value]) {
-          setLocalOptionsStore(options => ({
-            ...options,
-            [option?.value]: option?.label
-          }));
+    const selectAllItems = ()=>{
+        var _prepareOptions;
+        const preparedOptions = (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : _prepareOptions.filter(({ isFreezed, value })=>!isFreezed && !(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.includes(value)) && value !== "open_modal");
+        if (isUseLocalOptionsStore) {
+            setLocalOptionsStore((options)=>preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.reduce((result, { value, label })=>{
+                    result[value] = label;
+                    return result;
+                }, options));
         }
-      });
-    }
-  }, [chosenOptions, isUseLocalOptionsStore]);
-  (0, _react.useEffect)(() => {
-    const windowScrollEventHandler = e => {
-      setWindowScrollTop(window.scrollY);
+        onChange([
+            ...chosenOptions,
+            ...(preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.map(({ value })=>value)) || []
+        ], "chosenOptions");
+        if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
     };
-    const fn = isOpen ? "addEventListener" : "removeEventListener";
-    selectAllButtonRef?.current?.[fn]("click", selectAllItems, true);
-    unselectAllButtonRef?.current?.[fn]("click", unselectAllItems, true);
-    if (isOpen) {
-      if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", windowScrollEventHandler);
-      if (customTriggerRef?.current) {
-        customTriggerRef.current.style.pointerEvents = "none";
-      }
-      getListContainer()?.classList.add("tags-dropdown__container--opened");
-      if (!isMobile) {
-        inputRef?.current?.focus?.();
-      } else {
-        inputRef?.current?.blur?.();
-      }
-    } else {
-      if (!isMobile || !withMobileLogic) window.addEventListener("scroll", windowScrollEventHandler);
-      if (customTriggerRef?.current) {
-        customTriggerRef.current.style.pointerEvents = "auto";
-      }
-      getListContainer()?.classList.remove("tags-dropdown__container--opened");
-      if (withSearchInputInList) setSearchValueInterceptor("");
-      setListPos(null);
-      setSearchValue("");
-    }
-  }, [isOpen]);
-  (0, _react.useEffect)(() => {
-    const setScrollTopValue = e => {
-      setScrollTop(parseInt(e.target.scrollTop, 10));
+    const unselectAllItems = ()=>{
+        if (isUseLocalOptionsStore) setLocalOptionsStore({});
+        onChange(chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.filter((item)=>{
+            var _prepareOptions_find, _prepareOptions;
+            return (_prepareOptions = prepareOptions(options)) === null || _prepareOptions === void 0 ? void 0 : (_prepareOptions_find = _prepareOptions.find(({ value })=>value === item)) === null || _prepareOptions_find === void 0 ? void 0 : _prepareOptions_find.isFreezed;
+        }), "chosenOptions");
+        if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
     };
-    const preventWindowScrolling = e => {
-      e.preventDefault();
-      window.scrollTo({
-        top: windowScrollTop
-      });
+    const doScrollCallback = (0, _react.useCallback)((e)=>{
+        if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
+            if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
+                doLiveSearchRequest(searchValueRef.current, true);
+            }
+        }
+    }, [
+        options
+    ]);
+    // --- RENDER FUNCTIONS BEGIN --- //
+    const getMarkupForElement = (item)=>{
+        const { description } = item;
+        const title = item.title || item.label;
+        const hightlightSearchValue = (title)=>{
+            var _title_toLowerCase;
+            const index = title === null || title === void 0 ? void 0 : (_title_toLowerCase = title.toLowerCase()) === null || _title_toLowerCase === void 0 ? void 0 : _title_toLowerCase.indexOf(searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase());
+            if (index === -1) return title;
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("pre", {
+                className: "inherit-styles",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: title.substring(0, index)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "search-match bg--yellow",
+                        children: title.substring(index, index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))
+                    })
+                ]
+            });
+        };
+        var _item_customMobileIcon;
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+            ref: item === null || item === void 0 ? void 0 : item.ref,
+            onClick: (e)=>{
+                e.preventDefault();
+                e.stopPropagation();
+                onChangeHandler(item);
+            },
+            className: (0, _classnames.default)(`${RC}__list-item`, {
+                [`${RC}__list-item_active`]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value)
+            }, {
+                [`${RC}__list-item_disabled`]: item.disabled
+            }, {
+                [`${RC}__list-item_freezed`]: item === null || item === void 0 ? void 0 : item.isFreezed
+            }, {
+                [`${RC}__list-item--editing`]: (item === null || item === void 0 ? void 0 : item.value) === (editingOption === null || editingOption === void 0 ? void 0 : editingOption.value)
+            }, item.className),
+            children: [
+                !isMobile && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    className: (0, _classnames.default)(`${RC}__active-icon`, {
+                        [`${RC}__active-icon_active`]: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value)
+                    }),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {
+                        width: 16,
+                        height: 16,
+                        className: "color--text"
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}__list-item-body`),
+                    children: [
+                        renderOptionsAsTags ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            className: (0, _classnames.default)(`${RC}__list-item-title`, item === null || item === void 0 ? void 0 : item.labelClassName, {
+                                "tag_with-btn": !(item === null || item === void 0 ? void 0 : item.isFreezed)
+                            }),
+                            label: hightlightSearchValue(title),
+                            style: item === null || item === void 0 ? void 0 : item.style,
+                            isNoDismiss: true
+                        }, item === null || item === void 0 ? void 0 : item.value) : /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__list-item-title`, item.labelClassName),
+                            children: hightlightSearchValue(title)
+                        }),
+                        description && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: (0, _classnames.default)(`${RC}__list-item-description`),
+                            children: description
+                        })
+                    ]
+                }),
+                !isMobile && (item === null || item === void 0 ? void 0 : item.isEditable) && onOptionEdit && onOptionDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    id: `editTrigger${item === null || item === void 0 ? void 0 : item.value}`,
+                    className: (0, _classnames.default)(`${RC}__list-item-edit-trigger`),
+                    onClick: (e)=>onOptionEditClick(e, item),
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.MoreHorizontal, {})
+                }),
+                isMobile ? (_item_customMobileIcon = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item_customMobileIcon !== void 0 ? _item_customMobileIcon : /*#__PURE__*/ (0, _jsxruntime.jsx)(_CheckboxInput.default, {
+                    value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value),
+                    onChange: ()=>{
+                        onChangeHandler(item);
+                    }
+                }) : ""
+            ]
+        }, `${RC}__list-item-${item.id || item.value}`);
     };
-    if (isOpen && isMobile && dropdownListRef?.current) {
-      dropdownListRef?.current?.addEventListener("scroll", setScrollTopValue);
-      setIsScrollableList(dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
-      if (isScrollableList === null) {
-        setIsFixedMaxHeight(dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
-      }
-    }
-    if (isOpen && dropdownListRef && dropdownListRef.current) {
-      dropdownListRef.current.addEventListener("scroll", doScrollCallback);
-      if (!isMobile || !withMobileLogic) window.addEventListener("scroll", preventWindowScrolling);
-    }
-    return () => {
-      if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", preventWindowScrolling);
-      dropdownListRef?.current?.removeEventListener("scroll", doScrollCallback);
-      dropdownListRef?.current?.removeEventListener("scroll", setScrollTopValue);
+    const getListMarkUp = ()=>{
+        var _filteredOptions_filter, _filteredOptions_filter1;
+        const filteredOptions = getFilteredOptions(options);
+        const arrToPrint = [];
+        for (const option of filteredOptions){
+            if (option.groupName) {
+                var _option_list, _option_groupName_toString, _option_groupName;
+                arrToPrint.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    className: (0, _classnames.default)(`${RC}-group`, option.className),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                            className: `${RC}-group__name`,
+                            children: option.groupName
+                        }),
+                        (_option_list = option.list) === null || _option_list === void 0 ? void 0 : _option_list.map((item)=>getMarkupForElement(item))
+                    ]
+                }, (_option_groupName = option.groupName) === null || _option_groupName === void 0 ? void 0 : (_option_groupName_toString = _option_groupName.toString()) === null || _option_groupName_toString === void 0 ? void 0 : _option_groupName_toString.replace(/ /g, "_").concat(Date.now())));
+            } else arrToPrint.push(getMarkupForElement(option));
+        }
+        var _document_getElementById;
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(`${RC}__container-wrapper`),
+            ref: wrapperRef,
+            onClick: isMobile ? onWrapperClick : ()=>{},
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                ref: dropdownListWrapperRef,
+                className: (0, _classnames.default)(`${RC}__selector-wrapper`, {
+                    [`${RC}__selector-wrapper--fixed-height`]: isFixedMaxHeight && isMobile
+                }),
+                children: [
+                    headerContent || isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__header`, {
+                            [`${RC}__header-with-shadow`]: isScrollableList && isMobile,
+                            [`${RC}__header-with-shadow-hidden`]: scrollTop === 0
+                        }),
+                        children: [
+                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                        className: (0, _classnames.default)(`${RC}__header-row`),
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(`${RC}__label`),
+                                                children: label
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                                className: (0, _classnames.default)(`${RC}__close-icon`),
+                                                onClick: (e)=>{
+                                                    e.stopPropagation();
+                                                    setIsOpen(false);
+                                                },
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                                                    onClick: (e)=>{
+                                                        e.stopPropagation();
+                                                        setIsOpen(false);
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                        className: (0, _classnames.default)(`${RC}__header-row`),
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                                            className: `${RC}__input`,
+                                            value: searchValue,
+                                            onChange: (v)=>setSearchValueInterceptor(v),
+                                            placeholder: mobileSearchPlaceholder || "Search",
+                                            withDelete: true,
+                                            onMouseDown: ()=>{
+                                                if (!isOpen) {
+                                                    setIsOpen(true);
+                                                }
+                                            },
+                                            ...attributesOfNativeInput
+                                        })
+                                    })
+                                ]
+                            }),
+                            headerContent && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(`${RC}__header-row`),
+                                children: headerContent
+                            })
+                        ]
+                    }) : null,
+                    withSearchInputInList && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__input-list-wrapper`),
+                        children: renderSearchInput()
+                    }),
+                    withCreateLogic && onOptionCreate && searchValue && filteredOptions.length && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase())) ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__creatable-helper`),
+                        children: "Select an option or create one"
+                    }) : null,
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        ref: dropdownListRef,
+                        className: `${RC}__list ${headerContent || isMobile ? `${RC}__list--with-header` : ""} ${footerContent ? `${RC}__list--with-footer` : ""}`,
+                        children: [
+                            arrToPrint,
+                            ((_filteredOptions_filter = filteredOptions.filter(({ value })=>value !== "open_modal")) === null || _filteredOptions_filter === void 0 ? void 0 : _filteredOptions_filter.length) === 0 && (!withCreateLogic || !searchValue) ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                className: `${RC}__no-options`,
+                                children: noOptionsText
+                            }) : null
+                        ]
+                    }),
+                    (footerContent || isMobile) && ((_filteredOptions_filter1 = filteredOptions.filter(({ value })=>value !== "open_modal")) === null || _filteredOptions_filter1 === void 0 ? void 0 : _filteredOptions_filter1.length) > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__footer`, {
+                            [`${RC}__footer-with-shadow`]: isMobile && isScrollableList,
+                            [`${RC}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
+                        }),
+                        children: [
+                            footerContent,
+                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                                onClick: ()=>setIsOpen(false),
+                                children: [
+                                    "Apply",
+                                    (chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length) ? `(${chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.length})` : ""
+                                ]
+                            })
+                        ]
+                    }) : null,
+                    editingOption && /*#__PURE__*/ (0, _reactdom.createPortal)(renderEditOptionModal(), (_document_getElementById = document.getElementById("app")) !== null && _document_getElementById !== void 0 ? _document_getElementById : document.body),
+                    withCreateLogic && onOptionCreate && searchValue && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase())) && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(`${RC}__create-option`),
+                        onClick: onOptionCreateClick,
+                        children: [
+                            "Create",
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                                label: searchValue,
+                                style: {
+                                    backgroundColor: randomColorForNewOption
+                                },
+                                isNoDismiss: true
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
     };
-  }, [isOpen, isMobile, dropdownListRef?.current, dropdownListRef?.current?.scrollHeight, dropdownListRef?.current?.clientHeight]);
-  (0, _react.useEffect)(() => {
-    if (dropdownListRef?.current) {
-      setScrollHeight(parseInt(dropdownListRef?.current?.scrollHeight - dropdownListRef?.current?.clientHeight, 10));
-    }
-  }, [scrollTop, dropdownListRef?.current]);
-  (0, _react.useEffect)(() => {
-    if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) {
-      doLiveSearchRequest?.(debouncedSearchTerm);
-    }
-  }, [isOpen, debouncedSearchTerm, isValueDeleted]);
-  (0, _react.useEffect)(() => {
-    setOptions(optionsProp.map(option => ({
-      ...option,
-      ref: /*#__PURE__*/(0, _react.createRef)()
-    })));
-  }, [optionsProp]);
-  (0, _react.useEffect)(() => {
-    if (editingOption) {
-      setEditOptionModalStyles();
-      editingOptionInputRef?.current?.focus?.();
-    }
-  }, [editingOption?.value]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, className, {
-      [`${RC}_disabled`]: disabled,
-      [`${RC}-mobile`]: isMobile,
-      [`${RC}--focused`]: isOpen && !customTriggerRef?.current && !isMobile,
-      [`${RC}--custom-trigger`]: Boolean(customTriggerRef?.current)
-    }),
-    ref: dropdownRef
-  }, renderDropdownTrigger(), withActions && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${RC}__actions`)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${RC}__actions-item`),
-    onClick: onActionConfirmClick
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(`${RC}__actions-item`),
-    onClick: onActionCancelClick
-  }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null))), isOpen && renderListContainer());
+    const renderSearchInput = ()=>{
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+            ref: inputRef,
+            className: (0, _classnames.default)(`${RC}__input`, {
+                [`${RC}__input--in-list`]: withSearchInputInList
+            }),
+            value: searchValue,
+            onChange: onSearchHandler,
+            placeholder: placeholder || "Select from list",
+            attributesOfNativeInput: {
+                ...attributesOfNativeInput,
+                onKeyDown: (e)=>{
+                    if (e.keyCode === 13 && withCreateLogic && onOptionCreate && singleLevelOptions.every(({ label })=>(label === null || label === void 0 ? void 0 : label.toLowerCase()) !== (searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()))) {
+                        onOptionCreateClick();
+                    }
+                    onKeyPress(e, searchValue);
+                }
+            },
+            ...withCreateLogic ? {
+                symbolsLimit: 50
+            } : {}
+        });
+    };
+    const renderDropdownTrigger = (0, _react.useCallback)(()=>{
+        const renderDefaultDropdownTrigger = ()=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__trigger`, {
+                    "tags-dropdown__error": error,
+                    [`${RC}__trigger--with-actions`]: withActions
+                }),
+                onClick: ({ target })=>{
+                    if ((target === null || target === void 0 ? void 0 : target.tagName) === "INPUT") {
+                        setIsOpen(true);
+                    } else if (isTargetInParent(target)) {
+                        setIsOpen((isOpen)=>!isOpen);
+                    }
+                },
+                children: [
+                    noTagsWrap ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_TagList.default, {
+                        items: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value, i)=>{
+                            const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find((el)=>el.value == value);
+                            const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
+                            return {
+                                value,
+                                label,
+                                id: i,
+                                className: tag === null || tag === void 0 ? void 0 : tag.labelClassName,
+                                style: tag === null || tag === void 0 ? void 0 : tag.style
+                            };
+                        }),
+                        disableShowMore: true
+                    }) : chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map((value)=>{
+                        const tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find((el)=>el.value == value);
+                        const label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
+                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            className: (0, _classnames.default)(tagClassname, tag === null || tag === void 0 ? void 0 : tag.labelClassName, {
+                                "tag_with-btn": !(tag === null || tag === void 0 ? void 0 : tag.isFreezed)
+                            }),
+                            label: label,
+                            style: tag === null || tag === void 0 ? void 0 : tag.style,
+                            removeItem: (tag === null || tag === void 0 ? void 0 : tag.isFreezed) ? null : ()=>deleteChosen(value),
+                            isNoDismiss: false
+                        }, value);
+                    }),
+                    chosenOptions.length === 0 || !noTagsWrap ? renderSearchInput() : "",
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: (0, _classnames.default)(`${RC}__arrow`, {
+                            [`${RC}__arrow_active`]: isOpen
+                        }),
+                        children: isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Code, {
+                            className: "mobile-icon"
+                        }) : isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {
+                            className: "color--text"
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {
+                            className: "color--text"
+                        })
+                    })
+                ]
+            });
+        };
+        var _renderCustomTrigger;
+        return (_renderCustomTrigger = renderCustomTrigger === null || renderCustomTrigger === void 0 ? void 0 : renderCustomTrigger({
+            chosenOptions,
+            singleLevelOptions,
+            deleteChosen,
+            inputRef,
+            onSearchHandler,
+            isOpen,
+            setIsOpen
+        })) !== null && _renderCustomTrigger !== void 0 ? _renderCustomTrigger : renderDefaultDropdownTrigger();
+    }, [
+        chosenOptions,
+        singleLevelOptions,
+        inputRef,
+        isOpen
+    ]);
+    // --- RENDER FUNCTIONS END --- //
+    (0, _react.useLayoutEffect)(()=>{
+        initListContainer();
+        if (isDefaultOpened && !isMobileProp) setIsOpen(true);
+        return ()=>{
+            var _getListContainer, _getListContainerWrapper;
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.remove();
+            (_getListContainerWrapper = getListContainerWrapper()) === null || _getListContainerWrapper === void 0 ? void 0 : _getListContainerWrapper.remove();
+        };
+    }, []);
+    (0, _react.useLayoutEffect)(()=>{
+        var _getListContainer;
+        if (!isMobile) {
+            window.addEventListener("mousewheel", closeList);
+            window.addEventListener("wheel", closeList);
+            window.addEventListener("touchmove", closeList);
+            window.addEventListener("mouseup", handleClickOutside);
+        } else {
+            window.removeEventListener("mousewheel", closeList);
+            window.removeEventListener("wheel", closeList);
+            window.removeEventListener("touchmove", closeList);
+            window.removeEventListener("mouseup", handleClickOutside);
+        }
+        (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.addEventListener("click", closeList);
+        return ()=>{
+            var _getListContainer;
+            window.removeEventListener("mousewheel", closeList);
+            window.removeEventListener("mouseup", handleClickOutside);
+            window.removeEventListener("wheel", closeList);
+            window.removeEventListener("touchmove", closeList);
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.removeEventListener("click", closeList);
+        };
+    }, [
+        getListContainer,
+        isMobile
+    ]);
+    (0, _react.useLayoutEffect)(()=>{
+        if (isOpen) {
+            setListContainerStyles();
+            setEditOptionModalStyles();
+        }
+    }, [
+        isOpen,
+        optionsProp,
+        chosenOptions,
+        searchValue,
+        isMobile,
+        dropdownListWrapperRef === null || dropdownListWrapperRef === void 0 ? void 0 : (_dropdownListWrapperRef_current = dropdownListWrapperRef.current) === null || _dropdownListWrapperRef_current === void 0 ? void 0 : (_dropdownListWrapperRef_current_getBoundingClientRect = _dropdownListWrapperRef_current.getBoundingClientRect()) === null || _dropdownListWrapperRef_current_getBoundingClientRect === void 0 ? void 0 : _dropdownListWrapperRef_current_getBoundingClientRect.height,
+        recalculateListContainerStylesTrigger
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isUseLocalOptionsStore && chosenOptions.length !== Object.keys(localOptionsStore).length) {
+            options.map((option)=>{
+                if (!(localOptionsStore === null || localOptionsStore === void 0 ? void 0 : localOptionsStore[option === null || option === void 0 ? void 0 : option.value])) {
+                    setLocalOptionsStore((options)=>({
+                            ...options,
+                            [option === null || option === void 0 ? void 0 : option.value]: option === null || option === void 0 ? void 0 : option.label
+                        }));
+                }
+            });
+        }
+    }, [
+        chosenOptions,
+        isUseLocalOptionsStore
+    ]);
+    (0, _react.useEffect)(()=>{
+        var _selectAllButtonRef_current, _unselectAllButtonRef_current;
+        const windowScrollEventHandler = (e)=>{
+            setWindowScrollTop(window.scrollY);
+        };
+        const fn = isOpen ? "addEventListener" : "removeEventListener";
+        selectAllButtonRef === null || selectAllButtonRef === void 0 ? void 0 : (_selectAllButtonRef_current = selectAllButtonRef.current) === null || _selectAllButtonRef_current === void 0 ? void 0 : _selectAllButtonRef_current[fn]("click", selectAllItems, true);
+        unselectAllButtonRef === null || unselectAllButtonRef === void 0 ? void 0 : (_unselectAllButtonRef_current = unselectAllButtonRef.current) === null || _unselectAllButtonRef_current === void 0 ? void 0 : _unselectAllButtonRef_current[fn]("click", unselectAllItems, true);
+        if (isOpen) {
+            var _getListContainer;
+            if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", windowScrollEventHandler);
+            if (customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) {
+                customTriggerRef.current.style.pointerEvents = "none";
+            }
+            (_getListContainer = getListContainer()) === null || _getListContainer === void 0 ? void 0 : _getListContainer.classList.add("tags-dropdown__container--opened");
+            if (!isMobile) {
+                var _inputRef_current_focus, _inputRef_current;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : (_inputRef_current_focus = _inputRef_current.focus) === null || _inputRef_current_focus === void 0 ? void 0 : _inputRef_current_focus.call(_inputRef_current);
+            } else {
+                var _inputRef_current_blur, _inputRef_current1;
+                inputRef === null || inputRef === void 0 ? void 0 : (_inputRef_current1 = inputRef.current) === null || _inputRef_current1 === void 0 ? void 0 : (_inputRef_current_blur = _inputRef_current1.blur) === null || _inputRef_current_blur === void 0 ? void 0 : _inputRef_current_blur.call(_inputRef_current1);
+            }
+        } else {
+            var _getListContainer1;
+            if (!isMobile || !withMobileLogic) window.addEventListener("scroll", windowScrollEventHandler);
+            if (customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) {
+                customTriggerRef.current.style.pointerEvents = "auto";
+            }
+            (_getListContainer1 = getListContainer()) === null || _getListContainer1 === void 0 ? void 0 : _getListContainer1.classList.remove("tags-dropdown__container--opened");
+            if (withSearchInputInList) setSearchValueInterceptor("");
+            setListPos(null);
+            setSearchValue("");
+        }
+    }, [
+        isOpen
+    ]);
+    (0, _react.useEffect)(()=>{
+        const setScrollTopValue = (e)=>{
+            setScrollTop(parseInt(e.target.scrollTop, 10));
+        };
+        const preventWindowScrolling = (e)=>{
+            e.preventDefault();
+            window.scrollTo({
+                top: windowScrollTop
+            });
+        };
+        if (isOpen && isMobile && (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current)) {
+            var _dropdownListRef_current, _dropdownListRef_current1, _dropdownListRef_current2;
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.addEventListener("scroll", setScrollTopValue);
+            setIsScrollableList((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current2 = dropdownListRef.current) === null || _dropdownListRef_current2 === void 0 ? void 0 : _dropdownListRef_current2.clientHeight));
+            if (isScrollableList === null) {
+                var _dropdownListRef_current3, _dropdownListRef_current4;
+                setIsFixedMaxHeight((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current3 = dropdownListRef.current) === null || _dropdownListRef_current3 === void 0 ? void 0 : _dropdownListRef_current3.scrollHeight) > (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current4 = dropdownListRef.current) === null || _dropdownListRef_current4 === void 0 ? void 0 : _dropdownListRef_current4.clientHeight));
+            }
+        }
+        if (isOpen && dropdownListRef && dropdownListRef.current) {
+            dropdownListRef.current.addEventListener("scroll", doScrollCallback);
+            if (!isMobile || !withMobileLogic) window.addEventListener("scroll", preventWindowScrolling);
+        }
+        return ()=>{
+            var _dropdownListRef_current, _dropdownListRef_current1;
+            if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", preventWindowScrolling);
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.removeEventListener("scroll", doScrollCallback);
+            dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.removeEventListener("scroll", setScrollTopValue);
+        };
+    }, [
+        isOpen,
+        isMobile,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.scrollHeight,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.clientHeight
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current) {
+            var _dropdownListRef_current, _dropdownListRef_current1;
+            setScrollHeight(parseInt((dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current = dropdownListRef.current) === null || _dropdownListRef_current === void 0 ? void 0 : _dropdownListRef_current.scrollHeight) - (dropdownListRef === null || dropdownListRef === void 0 ? void 0 : (_dropdownListRef_current1 = dropdownListRef.current) === null || _dropdownListRef_current1 === void 0 ? void 0 : _dropdownListRef_current1.clientHeight), 10));
+        }
+    }, [
+        scrollTop,
+        dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) {
+            doLiveSearchRequest === null || doLiveSearchRequest === void 0 ? void 0 : doLiveSearchRequest(debouncedSearchTerm);
+        }
+    }, [
+        isOpen,
+        debouncedSearchTerm,
+        isValueDeleted
+    ]);
+    (0, _react.useEffect)(()=>{
+        setOptions(optionsProp.map((option)=>({
+                ...option,
+                ref: /*#__PURE__*/ (0, _react.createRef)()
+            })));
+    }, [
+        optionsProp
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (editingOption) {
+            var _editingOptionInputRef_current_focus, _editingOptionInputRef_current;
+            setEditOptionModalStyles();
+            editingOptionInputRef === null || editingOptionInputRef === void 0 ? void 0 : (_editingOptionInputRef_current = editingOptionInputRef.current) === null || _editingOptionInputRef_current === void 0 ? void 0 : (_editingOptionInputRef_current_focus = _editingOptionInputRef_current.focus) === null || _editingOptionInputRef_current_focus === void 0 ? void 0 : _editingOptionInputRef_current_focus.call(_editingOptionInputRef_current);
+        }
+    }, [
+        editingOption === null || editingOption === void 0 ? void 0 : editingOption.value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(RC, className, {
+            [`${RC}_disabled`]: disabled,
+            [`${RC}-mobile`]: isMobile,
+            [`${RC}--focused`]: isOpen && !(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) && !isMobile,
+            [`${RC}--custom-trigger`]: Boolean(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current)
+        }),
+        ref: dropdownRef,
+        children: [
+            renderDropdownTrigger(),
+            withActions && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(`${RC}__actions`),
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                        onClick: onActionConfirmClick,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {})
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                        onClick: onActionCancelClick,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
+                    })
+                ]
+            }),
+            isOpen && renderListContainer()
+        ]
+    });
 };
-var _default = exports.default = TagsDropdown;
+const _default = TagsDropdown;