intelicoreact 1.6.0 → 1.6.2

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

@@ -1,73 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-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 _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-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;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    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];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import cn from "classnames";
+import { createPortal } from "react-dom";
+import { Check, ChevronDown, ChevronUp, Code, MoreHorizontal, Trash2, X } from "react-feather";
+import { formatToOnlyASCIICodeText } from "../../../Functions/fieldValueFormatters";
+import { useDebounce } from "../../../Functions/useDebounce";
+import useIsMobile from "../../../Functions/useIsMobile/useIsMobile";
+import CheckboxInput from "../../FormElements/CheckboxInput/CheckboxInput";
+import Input from "../../FormElements/Input/Input";
+import Button from "../../UI/Button/Button";
+import Tag from "../../UI/Tag/Tag";
+import TagList from "../../UI/TagList/TagList";
+import "./TagsDropdown.scss";
 const RC = "tags-dropdown";
 const MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
 const COLORS = [
@@ -86,38 +30,38 @@ const COLORS = [
 ];
 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 inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const dropdownListRef = useRef(null);
+    const editOptionModalRef = useRef(null);
+    const dropdownListWrapperRef = useRef(null);
+    const { isMobile: isMobileProp } = useIsMobile();
     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)({
+    const [dropdownId] = useState(id || fieldKey || Math.random().toString(16).slice(2));
+    const [isOpen, setIsOpen] = useState(false);
+    const [windowScrollTop, setWindowScrollTop] = useState(0);
+    const [listPos, setListPos] = useState(null);
+    const [initListHeight, setInitListHeight] = useState(null);
+    const [isScrollableList, setIsScrollableList] = useState(null);
+    const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollHeight, setScrollHeight] = useState(1);
+    const searchValueRef = useRef(null);
+    const [searchValue, setSearchValue] = useState("");
+    const debouncedSearchTerm = useDebounce({
         searchValue,
         delay: 600
     });
-    const [isValueDeleted, setIsValueDeleted] = (0, _react.useState)(false);
+    const [isValueDeleted, setIsValueDeleted] = 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 editingOptionInputRef = useRef(null);
+    const [options, setOptions] = useState([]);
+    const [editingOption, setEditingOptionState] = useState(null);
     const setEditingOption = (data)=>{
         setEditingOptionState((editingOption)=>!data ? data : {
                 ...editingOption !== null && editingOption !== void 0 ? editingOption : {},
@@ -125,15 +69,15 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                 isChanged: Boolean(editingOption)
             });
     };
-    const isEditingOptionError = (0, _react.useMemo)(()=>{
+    const isEditingOptionError = 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 [localOptionsStore, setLocalOptionsStore] = useState({});
+    const randomColorForNewOption = useMemo(()=>{
         const getRandomIndex = (min, max)=>{
             return Math.floor(Math.random() * (max - min + 1)) + min;
         };
@@ -260,7 +204,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         const lc = getListContainer();
         if (!lc) return null;
         // eslint-disable-next-line no-use-before-define
-        return /*#__PURE__*/ (0, _reactdom.createPortal)(getListMarkUp(), lc);
+        return /*#__PURE__*/ createPortal(getListMarkUp(), lc);
     };
     // --- LIST CONTAINER FUNCTIONS END --- //
     // --- CREATABLE LOGIC BEGIN --- //
@@ -271,7 +215,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                 backgroundColor: randomColorForNewOption
             },
             isEditable: true,
-            ref: /*#__PURE__*/ (0, _react.createRef)()
+            ref: /*#__PURE__*/ createRef()
         };
         var // eslint-disable-next-line no-promise-executor-return
         _onOptionCreate;
@@ -349,14 +293,14 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         editOptionModalRef.current.style.transform = `translate(${xTranslate}, ${yTranslate})`;
     };
     const renderEditOptionModal = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        return /*#__PURE__*/ _jsxs("div", {
             ref: editOptionModalRef,
-            className: (0, _classnames.default)(`${RC}__edit-option-modal`),
+            className: cn(`${RC}__edit-option-modal`),
             children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: cn(`${RC}__edit-option-modal-section`),
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+                        /*#__PURE__*/ _jsx(Input, {
                             value: editingOption.label,
                             onChange: (v)=>setEditingOption((state)=>({
                                         ...state,
@@ -369,28 +313,28 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                             symbolsLimit: "50",
                             ref: editingOptionInputRef
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button.default, {
+                        /*#__PURE__*/ _jsx(Button, {
                             variant: "link",
-                            icon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Trash2, {}),
+                            icon: /*#__PURE__*/ _jsx(Trash2, {}),
                             label: "Delete",
                             onClick: onOptionDeleteClick
                         })
                     ]
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section-divider`)
+                /*#__PURE__*/ _jsx("div", {
+                    className: cn(`${RC}__edit-option-modal-section-divider`)
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: (0, _classnames.default)(`${RC}__edit-option-modal-section`),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: cn(`${RC}__edit-option-modal-section`),
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                        /*#__PURE__*/ _jsx("h3", {
                             children: "Colors"
                         }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                            className: (0, _classnames.default)(`${RC}__edit-option-modal-section-colors`),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: cn(`${RC}__edit-option-modal-section-colors`),
                             children: COLORS.map((color)=>{
                                 var _editingOption_style;
-                                return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                return /*#__PURE__*/ _jsx("div", {
                                     className: "color-block",
                                     style: {
                                         backgroundColor: color
@@ -402,7 +346,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                                                     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
+                                    children: (editingOption === null || editingOption === void 0 ? void 0 : (_editingOption_style = editingOption.style) === null || _editingOption_style === void 0 ? void 0 : _editingOption_style.backgroundColor) === color ? /*#__PURE__*/ _jsx(Check, {}) : null
                                 }, color);
                             })
                         })
@@ -459,7 +403,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
             }
             return result;
         }, []);
-    const getTotalOptions = (0, _react.useCallback)(()=>{
+    const getTotalOptions = 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;
@@ -496,7 +440,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
     };
     const onSearchHandler = (name)=>{
         let inputValue = name;
-        if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+        if (!isNotValidateASCII) inputValue = formatToOnlyASCIICodeText(inputValue);
         setSearchValueInterceptor(inputValue);
     };
     const onWrapperClick = (e)=>{
@@ -529,7 +473,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         }), "chosenOptions");
         if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
     };
-    const doScrollCallback = (0, _react.useCallback)((e)=>{
+    const doScrollCallback = useCallback((e)=>{
         if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
             if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
                 doLiveSearchRequest(searchValueRef.current, true);
@@ -546,31 +490,31 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
             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", {
+            return /*#__PURE__*/ _jsxs("pre", {
                 className: "inherit-styles",
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    /*#__PURE__*/ _jsx("span", {
                         children: title.substring(0, index)
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                    /*#__PURE__*/ _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", {
+                    /*#__PURE__*/ _jsx("span", {
                         children: title.substring(index + (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length))
                     })
                 ]
             });
         };
         var _item_customMobileIcon;
-        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+        return /*#__PURE__*/ _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`, {
+            className: cn(`${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
@@ -580,43 +524,43 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                 [`${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`, {
+                !isMobile && /*#__PURE__*/ _jsx("span", {
+                    className: cn(`${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, {
+                    children: /*#__PURE__*/ _jsx(Check, {
                         width: 16,
                         height: 16,
                         className: "color--text"
                     })
                 }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                    className: (0, _classnames.default)(`${RC}__list-item-body`),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: cn(`${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, {
+                        renderOptionsAsTags ? /*#__PURE__*/ _jsx(Tag, {
+                            className: cn(`${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),
+                        }, item === null || item === void 0 ? void 0 : item.value) : /*#__PURE__*/ _jsx("span", {
+                            className: cn(`${RC}__list-item-title`, item.labelClassName),
                             children: hightlightSearchValue(title)
                         }),
-                        description && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            className: (0, _classnames.default)(`${RC}__list-item-description`),
+                        description && /*#__PURE__*/ _jsx("span", {
+                            className: cn(`${RC}__list-item-description`),
                             children: description
                         })
                     ]
                 }),
-                !isMobile && (item === null || item === void 0 ? void 0 : item.isEditable) && onOptionEdit && onOptionDelete && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                !isMobile && (item === null || item === void 0 ? void 0 : item.isEditable) && onOptionEdit && onOptionDelete && /*#__PURE__*/ _jsx("div", {
                     id: `editTrigger${item === null || item === void 0 ? void 0 : item.value}`,
-                    className: (0, _classnames.default)(`${RC}__list-item-edit-trigger`),
+                    className: cn(`${RC}__list-item-edit-trigger`),
                     onClick: (e)=>onOptionEditClick(e, item),
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.MoreHorizontal, {})
+                    children: /*#__PURE__*/ _jsx(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, {
+                isMobile ? (_item_customMobileIcon = item === null || item === void 0 ? void 0 : item.customMobileIcon) !== null && _item_customMobileIcon !== void 0 ? _item_customMobileIcon : /*#__PURE__*/ _jsx(CheckboxInput, {
                     value: chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some((value)=>value === item.value),
                     onChange: ()=>{
                         onChangeHandler(item);
@@ -632,10 +576,10 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         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),
+                arrToPrint.push(/*#__PURE__*/ _jsxs("div", {
+                    className: cn(`${RC}-group`, option.className),
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        /*#__PURE__*/ _jsx("span", {
                             className: `${RC}-group__name`,
                             children: option.groupName
                         }),
@@ -645,38 +589,38 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
             } else arrToPrint.push(getMarkupForElement(option));
         }
         var _document_getElementById;
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-            className: (0, _classnames.default)(`${RC}__container-wrapper`),
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(`${RC}__container-wrapper`),
             ref: wrapperRef,
             onClick: isMobile ? onWrapperClick : ()=>{},
-            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            children: /*#__PURE__*/ _jsxs("div", {
                 ref: dropdownListWrapperRef,
-                className: (0, _classnames.default)(`${RC}__selector-wrapper`, {
+                className: cn(`${RC}__selector-wrapper`, {
                     [`${RC}__selector-wrapper--fixed-height`]: isFixedMaxHeight && isMobile
                 }),
                 children: [
-                    headerContent || isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(`${RC}__header`, {
+                    headerContent || isMobile ? /*#__PURE__*/ _jsxs("div", {
+                        className: cn(`${RC}__header`, {
                             [`${RC}__header-with-shadow`]: isScrollableList && isMobile,
                             [`${RC}__header-with-shadow-hidden`]: scrollTop === 0
                         }),
                         children: [
-                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            isMobile && /*#__PURE__*/ _jsxs(_Fragment, {
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                                        className: (0, _classnames.default)(`${RC}__header-row`),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: cn(`${RC}__header-row`),
                                         children: [
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                                className: (0, _classnames.default)(`${RC}__label`),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: cn(`${RC}__label`),
                                                 children: label
                                             }),
-                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                                className: (0, _classnames.default)(`${RC}__close-icon`),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: cn(`${RC}__close-icon`),
                                                 onClick: (e)=>{
                                                     e.stopPropagation();
                                                     setIsOpen(false);
                                                 },
-                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {
+                                                children: /*#__PURE__*/ _jsx(X, {
                                                     onClick: (e)=>{
                                                         e.stopPropagation();
                                                         setIsOpen(false);
@@ -685,9 +629,9 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                                             })
                                         ]
                                     }),
-                                    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, {
+                                    getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /*#__PURE__*/ _jsx("div", {
+                                        className: cn(`${RC}__header-row`),
+                                        children: /*#__PURE__*/ _jsx(Input, {
                                             className: `${RC}__input`,
                                             value: searchValue,
                                             onChange: (v)=>setSearchValueInterceptor(v),
@@ -703,39 +647,39 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                                     })
                                 ]
                             }),
-                            headerContent && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                                className: (0, _classnames.default)(`${RC}__header-row`),
+                            headerContent && /*#__PURE__*/ _jsx("div", {
+                                className: cn(`${RC}__header-row`),
                                 children: headerContent
                             })
                         ]
                     }) : null,
-                    withSearchInputInList && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(`${RC}__input-list-wrapper`),
+                    withSearchInputInList && /*#__PURE__*/ _jsx("div", {
+                        className: cn(`${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`),
+                    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__*/ _jsx("div", {
+                        className: cn(`${RC}__creatable-helper`),
                         children: "Select an option or create one"
                     }) : null,
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    /*#__PURE__*/ _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", {
+                            ((_filteredOptions_filter = filteredOptions.filter(({ value })=>value !== "open_modal")) === null || _filteredOptions_filter === void 0 ? void 0 : _filteredOptions_filter.length) === 0 && (!withCreateLogic || !searchValue) ? /*#__PURE__*/ _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`, {
+                    (footerContent || isMobile) && ((_filteredOptions_filter1 = filteredOptions.filter(({ value })=>value !== "open_modal")) === null || _filteredOptions_filter1 === void 0 ? void 0 : _filteredOptions_filter1.length) > 0 ? /*#__PURE__*/ _jsxs("div", {
+                        className: cn(`${RC}__footer`, {
                             [`${RC}__footer-with-shadow`]: isMobile && isScrollableList,
                             [`${RC}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
                         }),
                         children: [
                             footerContent,
-                            isMobile && /*#__PURE__*/ (0, _jsxruntime.jsxs)("button", {
+                            isMobile && /*#__PURE__*/ _jsxs("button", {
                                 onClick: ()=>setIsOpen(false),
                                 children: [
                                     "Apply",
@@ -744,13 +688,13 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                             })
                         ]
                     }) : 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`),
+                    editingOption && /*#__PURE__*/ 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__*/ _jsxs("div", {
+                        className: cn(`${RC}__create-option`),
                         onClick: onOptionCreateClick,
                         children: [
                             "Create",
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Tag.default, {
+                            /*#__PURE__*/ _jsx(Tag, {
                                 label: searchValue,
                                 style: {
                                     backgroundColor: randomColorForNewOption
@@ -764,9 +708,9 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         });
     };
     const renderSearchInput = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, {
+        return /*#__PURE__*/ _jsx(Input, {
             ref: inputRef,
-            className: (0, _classnames.default)(`${RC}__input`, {
+            className: cn(`${RC}__input`, {
                 [`${RC}__input--in-list`]: withSearchInputInList
             }),
             value: searchValue,
@@ -786,10 +730,10 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
             } : {}
         });
     };
-    const renderDropdownTrigger = (0, _react.useCallback)(()=>{
+    const renderDropdownTrigger = useCallback(()=>{
         const renderDefaultDropdownTrigger = ()=>{
-            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(`${RC}__trigger`, {
+            return /*#__PURE__*/ _jsxs("div", {
+                className: cn(`${RC}__trigger`, {
                     "tags-dropdown__error": error,
                     [`${RC}__trigger--with-actions`]: withActions
                 }),
@@ -801,7 +745,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                     }
                 },
                 children: [
-                    noTagsWrap ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_TagList.default, {
+                    noTagsWrap ? /*#__PURE__*/ _jsx(TagList, {
                         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);
@@ -817,8 +761,8 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                     }) : 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, {
+                        return /*#__PURE__*/ _jsx(Tag, {
+                            className: cn(tagClassname, tag === null || tag === void 0 ? void 0 : tag.labelClassName, {
                                 "tag_with-btn": !(tag === null || tag === void 0 ? void 0 : tag.isFreezed)
                             }),
                             label: label,
@@ -828,15 +772,15 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
                         }, value);
                     }),
                     chosenOptions.length === 0 || !noTagsWrap ? renderSearchInput() : "",
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                        className: (0, _classnames.default)(`${RC}__arrow`, {
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn(`${RC}__arrow`, {
                             [`${RC}__arrow_active`]: isOpen
                         }),
-                        children: isMobile ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Code, {
+                        children: isMobile ? /*#__PURE__*/ _jsx(Code, {
                             className: "mobile-icon"
-                        }) : isOpen ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronUp, {
+                        }) : isOpen ? /*#__PURE__*/ _jsx(ChevronUp, {
                             className: "color--text"
-                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.ChevronDown, {
+                        }) : /*#__PURE__*/ _jsx(ChevronDown, {
                             className: "color--text"
                         })
                     })
@@ -860,7 +804,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         isOpen
     ]);
     // --- RENDER FUNCTIONS END --- //
-    (0, _react.useLayoutEffect)(()=>{
+    useLayoutEffect(()=>{
         initListContainer();
         if (isDefaultOpened && !isMobileProp) setIsOpen(true);
         return ()=>{
@@ -869,7 +813,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
             (_getListContainerWrapper = getListContainerWrapper()) === null || _getListContainerWrapper === void 0 ? void 0 : _getListContainerWrapper.remove();
         };
     }, []);
-    (0, _react.useLayoutEffect)(()=>{
+    useLayoutEffect(()=>{
         var _getListContainer;
         if (!isMobile) {
             window.addEventListener("mousewheel", closeList);
@@ -895,7 +839,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         getListContainer,
         isMobile
     ]);
-    (0, _react.useLayoutEffect)(()=>{
+    useLayoutEffect(()=>{
         if (isOpen) {
             setListContainerStyles();
             setEditOptionModalStyles();
@@ -909,7 +853,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         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)(()=>{
+    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])) {
@@ -924,7 +868,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         chosenOptions,
         isUseLocalOptionsStore
     ]);
-    (0, _react.useEffect)(()=>{
+    useEffect(()=>{
         var _selectAllButtonRef_current, _unselectAllButtonRef_current;
         const windowScrollEventHandler = (e)=>{
             setWindowScrollTop(window.scrollY);
@@ -960,7 +904,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
     }, [
         isOpen
     ]);
-    (0, _react.useEffect)(()=>{
+    useEffect(()=>{
         const setScrollTopValue = (e)=>{
             setScrollTop(parseInt(e.target.scrollTop, 10));
         };
@@ -996,7 +940,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         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)(()=>{
+    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));
@@ -1005,7 +949,7 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         scrollTop,
         dropdownListRef === null || dropdownListRef === void 0 ? void 0 : dropdownListRef.current
     ]);
-    (0, _react.useEffect)(()=>{
+    useEffect(()=>{
         if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) {
             doLiveSearchRequest === null || doLiveSearchRequest === void 0 ? void 0 : doLiveSearchRequest(debouncedSearchTerm);
         }
@@ -1014,15 +958,15 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         debouncedSearchTerm,
         isValueDeleted
     ]);
-    (0, _react.useEffect)(()=>{
+    useEffect(()=>{
         setOptions(optionsProp.map((option)=>({
                 ...option,
-                ref: /*#__PURE__*/ (0, _react.createRef)()
+                ref: /*#__PURE__*/ createRef()
             })));
     }, [
         optionsProp
     ]);
-    (0, _react.useEffect)(()=>{
+    useEffect(()=>{
         if (editingOption) {
             var _editingOptionInputRef_current_focus, _editingOptionInputRef_current;
             setEditOptionModalStyles();
@@ -1031,8 +975,8 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
     }, [
         editingOption === null || editingOption === void 0 ? void 0 : editingOption.value
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        className: (0, _classnames.default)(RC, className, {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(RC, className, {
             [`${RC}_disabled`]: disabled,
             [`${RC}-mobile`]: isMobile,
             [`${RC}--focused`]: isOpen && !(customTriggerRef === null || customTriggerRef === void 0 ? void 0 : customTriggerRef.current) && !isMobile,
@@ -1041,18 +985,18 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         ref: dropdownRef,
         children: [
             renderDropdownTrigger(),
-            withActions && /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(`${RC}__actions`),
+            withActions && /*#__PURE__*/ _jsxs("div", {
+                className: cn(`${RC}__actions`),
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(`${RC}__actions-item`),
                         onClick: onActionConfirmClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.Check, {})
+                        children: /*#__PURE__*/ _jsx(Check, {})
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(`${RC}__actions-item`),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(`${RC}__actions-item`),
                         onClick: onActionCancelClick,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactfeather.X, {})
+                        children: /*#__PURE__*/ _jsx(X, {})
                     })
                 ]
             }),
@@ -1060,4 +1004,4 @@ const TagsDropdown = ({ options: optionsProp, chosenOptions = [], onChange, clas
         ]
     });
 };
-const _default = TagsDropdown;
+export default TagsDropdown;