intelicoreact 1.6.8 → 1.6.10

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

@@ -1,1102 +1 @@
-"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 _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-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;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) {
-            symbols = symbols.filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-            });
-        }
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-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 : _object_spread_props(_object_spread({}, 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;
-        };
-        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)=>_object_spread_props(_object_spread({}, options), {
-                    [value]: undefined
-                }));
-        }
-        onChange(chosenOptions.filter((item)=>item !== value), "chosenOptions");
-    };
-    // --- 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);
-            });
-        }
-        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);
-        });
-    };
-    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 = _object_spread({}, 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)=>_object_spread_props(_object_spread({}, 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)=>_object_spread_props(_object_spread({}, state), {
-                                                style: _object_spread_props(_object_spread({}, 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();
-        }
-    };
-    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(_object_spread_props(_object_spread({}, 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;
-        }
-        if (isUseLocalOptionsStore) {
-            setLocalOptionsStore((options)=>_object_spread_props(_object_spread({}, options), {
-                    [item === null || item === void 0 ? void 0 : item.value]: item === null || item === void 0 ? void 0 : 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 === null || wrapperRef === void 0 ? void 0 : wrapperRef.current)) {
-            e.stopPropagation();
-            e.preventDefault();
-            setIsOpen(false);
-        }
-    };
-    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));
-        }
-        onChange([
-            ...chosenOptions,
-            ...(preparedOptions === null || preparedOptions === void 0 ? void 0 : preparedOptions.map(({ value })=>value)) || []
-        ], "chosenOptions");
-        if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
-    };
-    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 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}`);
-    };
-    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, _object_spread({
-                                            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
-                            })
-                        ]
-                    })
-                ]
-            })
-        });
-    };
-    const renderSearchInput = ()=>{
-        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.default, _object_spread({
-            ref: inputRef,
-            className: (0, _classnames.default)(`${RC}__input`, {
-                [`${RC}__input--in-list`]: withSearchInputInList
-            }),
-            value: searchValue,
-            onChange: onSearchHandler,
-            placeholder: placeholder || "Select from list",
-            attributesOfNativeInput: _object_spread_props(_object_spread({}, 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)=>_object_spread_props(_object_spread({}, 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)=>_object_spread_props(_object_spread({}, 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()
-        ]
-    });
-};
-const _default = TagsDropdown;
-
-//# sourceMappingURL=TagsDropdown.js.map
+function n(n,e){(null==e||e>n.length)&&(e=n.length);for(var l=0,t=Array(e);l<e;l++)t[l]=n[l];return t}function e(n,e,l){return e in n?Object.defineProperty(n,e,{value:l,enumerable:!0,configurable:!0,writable:!0}):n[e]=l,n}function l(n){for(var l=1;l<arguments.length;l++){var t=null!=arguments[l]?arguments[l]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter(function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),o.forEach(function(l){e(n,l,t[l])})}return n}function t(n,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):(function(n,e){var l=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);l.push.apply(l,t)}return l})(Object(e)).forEach(function(l){Object.defineProperty(n,l,Object.getOwnPropertyDescriptor(e,l))}),n}function o(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){var l,t,o=null==n?null:"undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(null!=o){var i=[],r=!0,u=!1;try{for(o=o.call(n);!(r=(l=o.next()).done)&&(i.push(l.value),!e||i.length!==e);r=!0);}catch(n){u=!0,t=n}finally{try{r||null==o.return||o.return()}finally{if(u)throw t}}return i}}(n,e)||r(n,e)||function(){throw TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e){return function(e){if(Array.isArray(e))return n(e)}(e)||function(n){if("undefined"!=typeof Symbol&&null!=n[Symbol.iterator]||null!=n["@@iterator"])return Array.from(n)}(e)||r(e)||function(){throw TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(e,l){if(e){if("string"==typeof e)return n(e,l);var t=Object.prototype.toString.call(e).slice(8,-1);if("Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t)return Array.from(t);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return n(e,l)}}import{jsx as u,jsxs as c,Fragment as a}from"react/jsx-runtime";import{createRef as s,useCallback as d,useEffect as v,useLayoutEffect as m,useMemo as f,useRef as p,useState as h}from"react";import g from"classnames";import{createPortal as _}from"react-dom";import{Check as w,ChevronDown as b,ChevronUp as y,Code as N,MoreHorizontal as C,Trash2 as E,X as O}from"react-feather";import{formatToOnlyASCIICodeText as L}from"../../../Functions/fieldValueFormatters";import{useDebounce as S}from"../../../Functions/useDebounce";import I from"../../../Functions/useIsMobile/useIsMobile";import x from"../../FormElements/CheckboxInput/CheckboxInput";import D from"../../FormElements/Input/Input";import k from"../../UI/Button/Button";import F from"../../UI/Tag/Tag";import j from"../../UI/TagList/TagList";import"./TagsDropdown.scss";var A="tags-dropdown",B=["#F1F0F0","#E3E2E0","#EEDFDA","#F9DEC9","#FDECC8","#DBECDB","#D3E4EF","#E8DEEE","#F4E0E9","#FFE2DD","#D3EFED","#ECEEDE"];export default function(n){var r,H,P,T,M,R,z,U=n.options,q=n.chosenOptions,W=void 0===q?[]:q,K=n.onChange,V=n.className,Y=n.tagClassname,X=n.listClassName,$=n.onKeyPress,G=void 0===$?function(){}:$,J=n.placeholder,Q=n.label,Z=n.disabled,nn=n.isValuesInTags,ne=n.error,nl=n.isNotValidateASCII,nt=void 0!==nl&&nl,no=n.noTagsWrap,ni=void 0!==no&&no,nr=n.headerContent,nu=void 0===nr?null:nr,nc=n.footerContent,na=void 0===nc?null:nc,ns=n.selectAllButtonRef,nd=void 0===ns?null:ns,nv=n.unselectAllButtonRef,nm=void 0===nv?null:nv,nf=n.closeOnSelect,np=void 0!==nf&&nf,nh=n.closeOnRemove,ng=void 0!==nh&&nh,n_=n.closeOnRemoveAll,nw=void 0!==n_&&n_,nb=n.closeOnSelectAll,ny=void 0!==nb&&nb,nN=n.closeOnSelectMobile,nC=void 0!==nN&&nN,nE=n.closeOnRemoveMobile,nO=void 0!==nE&&nE,nL=n.closeOnRemoveAllMobile,nS=void 0!==nL&&nL,nI=n.closeOnSelectAllMobile,nx=void 0!==nI&&nI,nD=n.fieldKey,nk=n.id,nF=n.noOptionsText,nj=void 0===nF?"No options available":nF,nA=n.mobileSearchPlaceholder,nB=n.isSearchable,nH=void 0===nB||nB,nP=n.useLiveSearch,nT=n.doRequest,nM=n.attributesOfNativeInput,nR=void 0===nM?{}:nM,nz=n.isUseLocalOptionsStore,nU=void 0===nz||nz,nq=n.isDefaultOpened,nW=void 0!==nq&&nq,nK=n.withMobileLogic,nV=n.withCreateLogic,nY=n.withActions,nX=n.withSearchInputInList,n$=n.renderOptionsAsTags,nG=n.minItemsForShowMobileSearch,nJ=void 0===nG?10:nG,nQ=n.onOptionCreate,nZ=n.onOptionEdit,n0=n.onOptionDelete,n1=n.onActionConfirmClick,n2=n.onActionCancelClick,n3=n.onDropdownListClose,n6=n.customTriggerRef,n8=n.renderCustomTrigger,n5=n.recalculateListContainerStylesTrigger,n9=p(null),n4=p(null),n7=p(null),en=p(null),ee=p(null),el=p(null),et=I().isMobile,eo=et&&nK&&window.screen.width<=768,ei=o(h(nk||nD||Math.random().toString(16).slice(2)),1)[0],er=o(h(!1),2),eu=er[0],ec=er[1],ea=o(h(0),2),es=ea[0],ed=ea[1],ev=o(h(null),2),em=ev[0],ef=ev[1],ep=o(h(null),2),eh=ep[0],eg=ep[1],e_=o(h(null),2),ew=e_[0],eb=e_[1],ey=o(h(!1),2),eN=ey[0],eC=ey[1],eE=o(h(0),2),eO=eE[0],eL=eE[1],eS=o(h(1),2),eI=eS[0],ex=eS[1],eD=p(null),ek=o(h(""),2),eF=ek[0],ej=ek[1],eA=S({searchValue:eF,delay:600}),eB=o(h(!1),2),eH=eB[0],eP=eB[1],eT=function(n){ej(n),eP(eF!==n&&""===n),eD.current=n},eM=p(null),eR=o(h([]),2),ez=eR[0],eU=eR[1],eq=o(h(null),2),eW=eq[0],eK=eq[1],eV=function(n){eK(function(e){return n?t(l({},null!=e?e:{},"function"==typeof n?null==n?void 0:n(e):n),{isChanged:!!e}):n})},eY=f(function(){return!!eW&&(!!ez.filter(function(n){return n.value!==eW.value}).some(function(n){return n.label===eW.label})||null)},[ez,eW]),eX=o(h({}),2),e$=eX[0],eG=eX[1],eJ=f(function(){var n=Math.floor(Math.random()*(B.length-1-0+1))+0;return B[n]},[ez.length]),eQ=null==ez?void 0:ez.reduce(function(n,e){var l,t=function(n,e){var l=null==n?void 0:n.findIndex(function(n){return n.value===(null==e?void 0:e.value)});-1!==l?n[l]=e:n.push(e)};return e.groupName?null==(l=e.list)||l.map(function(e){return t(n,e)}):t(n,e),n},nU?null==(H=Object.keys(e$))?void 0:H.map(function(n){return{value:n,label:null==e$?void 0:e$[n]}}):[]),eZ=function(n){(eo?nO:ng)&&ec(!1),nU&&eG(function(o){return t(l({},o),e({},n,void 0))}),K(W.filter(function(e){return e!==n}),"chosenOptions")},e0=function(){var n,e;return null!=(e=null!=(n=document.querySelector("div#root"))?n:document.querySelector("div#app"))?e:document.querySelector("div#storybook-root")},e1=function(){var n,e=document.createElement("div");if(e.setAttribute("id",ei),e.classList.add("tags-dropdown__container"),X&&e.classList.add(X),eo&&e.addEventListener("click",function(n){n.target.id===ei&&ec(!1)}),eo){try{null==(t=document.getElementById("mlw-".concat(ei)))||t.remove()}catch(n){}var l,t,o=document.createElement("div");o.classList.add("tags-dropdown-mobile"),o.setAttribute("id","mlw-".concat(ei)),null==o||o.append(e),null==(l=e0())||l.append(o)}else null==(n=e0())||n.append(e)},e2=function(){return document.getElementById(ei)},e3=function(){var n=e2();if(!n||!eu)return!1;var e=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,l=null!=(b=null==n7||null==(f=n7.current)?void 0:f.getBoundingClientRect())?b:{},t=l.width,o=l.height,i=l.left,r=l.top,u=null==el?void 0:el.current,c=n.getElementsByClassName("tags-dropdown__list")[0],a=null==u?void 0:u.getElementsByClassName("tags-dropdown__header")[0],s=null==u?void 0:u.getElementsByClassName("tags-dropdown__footer")[0],d=parseInt(null!=(y=null==(h=getComputedStyle(u))||null==(p=h.marginTop)?void 0:p.replace("px",""))?y:0,10),v=null==u||null==(g=u.getBoundingClientRect())?void 0:g.height,m=500-(null!=(N=null==a||null==(_=a.getBoundingClientRect())?void 0:_.height)?N:0)-(null!=(C=null==s||null==(w=s.getBoundingClientRect())?void 0:w.height)?C:0);if(eo&&nK)c.style.maxHeight="".concat(m,"px");else{var f,p,h,g,_,w,b,y,N,C,E,O,L,S,I,x=null==(E=getComputedStyle(c))?void 0:E.maxHeight,D=null!=eh?eh:parseInt(null!=(S=null==x?void 0:x.replace("px",""))?S:0,10);null!==eh||isNaN(D)||eg(D),v>D&&!isNaN(D)&&(v=D-2*d);var k=n8?r-d-(null!=(I=null==n6||null==(L=n6.current)||null==(O=L.getBoundingClientRect())?void 0:O.height)?I:0):r-d,F=e-r-o-2*d,j=em;!em&&ez.length&&ef(j=k<F||F>=v?"bottom":"top"),v>("top"===j?k:F)&&((v=("top"===j?k:F)-3*d)<200&&(v=200),u.style.maxHeight="".concat(v,"px")),n.style.minWidth="".concat(t,"px"),n.style.left="".concat(i,"px"),n.style.top="".concat("bottom"===j?r+o:r-v-2*d,"px")}},e6=function(){var n,e={label:eF,style:{backgroundColor:eJ},isEditable:!0,ref:s()};(null!=(n=null==nQ?void 0:nQ(e))?n:new Promise(function(n){return n()})).then(function(n){var l,t=Math.random().toString(16).slice(2);e.value=null!=(l=null==n?void 0:n.id)?l:t,eU(function(n){return i(n).concat([e])}),ej(""),li(e)})},e8=function(n,e){null==n||n.preventDefault(),null==n||n.stopPropagation(),eV((null==eW?void 0:eW.value)===(null==e?void 0:e.value)?null:e)},e5=function(){var n;(null!=(n=null==n0?void 0:n0(eW))?n:new Promise(function(n){return n()})).then(function(){eZ(null==eW?void 0:eW.value),eU(function(n){return n.filter(function(n){return n.value!==(null==eW?void 0:eW.value)})}),eV(null)})},e9=function(){if(!(null==eW?void 0:eW.isChanged)||eY)return eV(null),!1;null==nZ||nZ(eW),eU(function(n){return n.map(function(n){if(eW&&n.value===(null==eW?void 0:eW.value)){var e=l({},eW);return eV(null),e}return n})})},e4=function(){if(!eW||!(null==ee?void 0:ee.current))return null;var n,e,l,t,o,i=window.scrollX,r=window.scrollY,u={left:"modal-left",right:"modal-right",top:"modal-top",bottom:"modal-bottom"},c=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,s=null==eW||null==(n=eW.ref)?void 0:n.current,d=null!=(l=null==s?void 0:s.getBoundingClientRect())?l:{},v=d.x,m=d.y,f=d.width,p=d.height,h=null==el||null==(e=el.current)?void 0:e.getBoundingClientRect(),g=c-(null==h?void 0:h.x)-(null==h?void 0:h.width),_=a-m-r-p;Object.values(u).map(function(n){return ee.current.classList.remove(n)}),ee.current.classList.add(null!=(t=null==u?void 0:u[g<200?"left":"right"])?t:""),ee.current.classList.add(null!=(o=null==u?void 0:u[_<200?"top":"bottom"])?o:""),ee.current.style.left="".concat(v+i+f,"px"),ee.current.style.top="".concat(m+r+p,"px"),ee.current.style.transform="translate(".concat(g<200?"calc(-100% + 7px)":"-35px",", ").concat(_<200?"calc(-100% - ".concat(p+10,"px)"):"10px",")")},e7=function(n){var e,l,t,o,i,r,u=n.target;!eu||(null==(e=e2())?void 0:e.contains(u))||ee.current?ee.current&&!(null==(l=ee.current)?void 0:l.contains(u))&&((null==(r=document)||null==(i=r.getElementById)||null==(o=i.call(r,"editTrigger".concat(null==eW?void 0:eW.value)))||null==(t=o.contains)?void 0:t.call(o,u))||e9()):(ec(!1),null==n3||n3(n))},ln=function(n){var e;e7(n),n.target.isEqualNode(null==n9?void 0:n9.current)||null==n9||null==(e=n9.current)||e.blur()},le=function(n){var e,l,t,o;return((null==n?void 0:n.tagName)!=="svg"||(null==n?void 0:n.parentNodclassName)!=="tag__button")&&(null==n?void 0:n.tagName)!=="line"&&((null==n?void 0:n.tagName)==="svg"&&(null==n?void 0:n.parentNodclassName)!=="tag__button"||(null==n||null==(l=n.className)||null==(e=l.indexOf)?void 0:e.call(l,"tag__label"))!==-1||(null==n||null==(o=n.className)||null==(t=o.indexOf)?void 0:t.call(o,"tag-list_wrapper"))!==-1||(null==n?void 0:n.className.indexOf("".concat(A,"__trigger")))!==-1||(null==n?void 0:n.className)==="tags-dropdown__arrow")},ll=function(n){if(n.isHiddenInList)return!1;var e=n.title||n.label;return!eF.length||(null==e?void 0:e.toLowerCase().includes((null==eF?void 0:eF.toLowerCase())||""))},lt=function(n){return null==n?void 0:n.map(function(n){return(null==n?void 0:n.groupName)?null==n?void 0:n.list:n}).flat()},lo=d(function(){return null==ez?void 0:ez.reduce(function(n,e){if(null==e?void 0:e.list){var l;n+=(null==e||null==(l=e.list)?void 0:l.length)||0}else++n;return n},0)},[ez]),li=function(n){return(null==n||!n.isFreezed)&&(((null==n?void 0:n.closeOnOptionSelect)!==void 0?n.closeOnOptionSelect&&ec(!1):(eo?nC:np)&&ec(!1),eT(""),W.some(function(e){return e===n.value}))?eZ(n.value):(nU&&eG(function(o){return t(l({},o),e({},null==n?void 0:n.value,null==n?void 0:n.label))}),K(i(W).concat([n.value]),"chosenOptions")),null)},lr=function(n){var e=n;nt||(e=L(e)),eT(e)},lu=function(n){n.target===(null==n4?void 0:n4.current)&&(n.stopPropagation(),n.preventDefault(),ec(!1))},lc=function(){var n,e=null==(n=lt(ez))?void 0:n.filter(function(n){var e=n.isFreezed,l=n.value;return!e&&!(null==W?void 0:W.includes(l))&&"open_modal"!==l});nU&&eG(function(n){return null==e?void 0:e.reduce(function(n,e){var l=e.value,t=e.label;return n[l]=t,n},n)}),K(i(W).concat(i((null==e?void 0:e.map(function(n){return n.value}))||[])),"chosenOptions"),(eo?nx:ny)&&ec(!1)},la=function(){nU&&eG({}),K(null==W?void 0:W.filter(function(n){var e,l;return null==(l=lt(ez))||null==(e=l.find(function(e){return e.value===n}))?void 0:e.isFreezed}),"chosenOptions"),(eo?nS:nw)&&ec(!1)},ls=d(function(n){nT&&"function"==typeof nT&&Math.round(n.target.clientHeight+n.target.scrollTop)==n.target.scrollHeight&&nT(eD.current,!0)},[ez]),ld=function(n){var l,t=n.description,o=n.title||n.label,i=function(n){var e,l=null==n||null==(e=n.toLowerCase())?void 0:e.indexOf(null==eF?void 0:eF.toLowerCase());return -1===l?n:c("pre",{className:"inherit-styles",children:[u("span",{children:n.substring(0,l)}),u("span",{className:"search-match bg--yellow",children:n.substring(l,l+(null==eF?void 0:eF.length))}),u("span",{children:n.substring(l+(null==eF?void 0:eF.length))})]})};return c("button",{ref:null==n?void 0:n.ref,onClick:function(e){e.preventDefault(),e.stopPropagation(),li(n)},className:g("".concat(A,"__list-item"),e({},"".concat(A,"__list-item_active"),null==W?void 0:W.some(function(e){return e===n.value})),e({},"".concat(A,"__list-item_disabled"),n.disabled),e({},"".concat(A,"__list-item_freezed"),null==n?void 0:n.isFreezed),e({},"".concat(A,"__list-item--editing"),(null==n?void 0:n.value)===(null==eW?void 0:eW.value)),n.className),children:[!eo&&u("span",{className:g("".concat(A,"__active-icon"),e({},"".concat(A,"__active-icon_active"),null==W?void 0:W.some(function(e){return e===n.value}))),children:u(w,{width:16,height:16,className:"color--text"})}),c("div",{className:g("".concat(A,"__list-item-body")),children:[n$?u(F,{className:g("".concat(A,"__list-item-title"),null==n?void 0:n.labelClassName,{"tag_with-btn":!(null==n?void 0:n.isFreezed)}),label:i(o),style:null==n?void 0:n.style,isNoDismiss:!0},null==n?void 0:n.value):u("span",{className:g("".concat(A,"__list-item-title"),n.labelClassName),children:i(o)}),t&&u("span",{className:g("".concat(A,"__list-item-description")),children:t})]}),!eo&&(null==n?void 0:n.isEditable)&&nZ&&n0&&u("div",{id:"editTrigger".concat(null==n?void 0:n.value),className:g("".concat(A,"__list-item-edit-trigger")),onClick:function(e){return e8(e,n)},children:u(C,{})}),eo?null!=(l=null==n?void 0:n.customMobileIcon)?l:u(x,{value:null==W?void 0:W.some(function(e){return e===n.value}),onChange:function(){li(n)}}):""]},"".concat(A,"__list-item-").concat(n.id||n.value))},lv=function(){return u(D,l({ref:n9,className:g("".concat(A,"__input"),e({},"".concat(A,"__input--in-list"),nX)),value:eF,onChange:lr,placeholder:J||"Select from list",attributesOfNativeInput:t(l({},nR),{onKeyDown:function(n){13===n.keyCode&&nV&&nQ&&eQ.every(function(n){var e=n.label;return(null==e?void 0:e.toLowerCase())!==(null==eF?void 0:eF.toLowerCase())})&&e6(),G(n,eF)}})},nV?{symbolsLimit:50}:{}))},lm=d(function(){var n;return null!=(n=null==n8?void 0:n8({chosenOptions:W,singleLevelOptions:eQ,deleteChosen:eZ,inputRef:n9,onSearchHandler:lr,isOpen:eu,setIsOpen:ec}))?n:c("div",{className:g("".concat(A,"__trigger"),e({"tags-dropdown__error":ne},"".concat(A,"__trigger--with-actions"),nY)),onClick:function(n){var e=n.target;(null==e?void 0:e.tagName)==="INPUT"?ec(!0):le(e)&&ec(function(n){return!n})},children:[ni?u(j,{items:null==W?void 0:W.map(function(n,e){var l=null==eQ?void 0:eQ.find(function(e){return e.value==n});return{value:n,label:nn?null==l?void 0:l.value:(null==l?void 0:l.label)||(null==l?void 0:l.name)||(null==l?void 0:l.title),id:e,className:null==l?void 0:l.labelClassName,style:null==l?void 0:l.style}}),disableShowMore:!0}):null==W?void 0:W.map(function(n){var e=null==eQ?void 0:eQ.find(function(e){return e.value==n}),l=nn?null==e?void 0:e.value:(null==e?void 0:e.label)||(null==e?void 0:e.name)||(null==e?void 0:e.title);return u(F,{className:g(Y,null==e?void 0:e.labelClassName,{"tag_with-btn":!(null==e?void 0:e.isFreezed)}),label:l,style:null==e?void 0:e.style,removeItem:(null==e?void 0:e.isFreezed)?null:function(){return eZ(n)},isNoDismiss:!1},n)}),0!==W.length&&ni?"":lv(),u("span",{className:g("".concat(A,"__arrow"),e({},"".concat(A,"__arrow_active"),eu)),children:eo?u(N,{className:"mobile-icon"}):eu?u(y,{className:"color--text"}):u(b,{className:"color--text"})})]})},[W,eQ,n9,eu]);return m(function(){return e1(),nW&&!et&&ec(!0),function(){var n,e;null==(n=e2())||n.remove(),null==(e=document.getElementById("mlw-".concat(ei)))||e.remove()}},[]),m(function(){var n;return eo?(window.removeEventListener("mousewheel",ln),window.removeEventListener("wheel",ln),window.removeEventListener("touchmove",ln),window.removeEventListener("mouseup",e7)):(window.addEventListener("mousewheel",ln),window.addEventListener("wheel",ln),window.addEventListener("touchmove",ln),window.addEventListener("mouseup",e7)),null==(n=e2())||n.addEventListener("click",ln),function(){var n;window.removeEventListener("mousewheel",ln),window.removeEventListener("mouseup",e7),window.removeEventListener("wheel",ln),window.removeEventListener("touchmove",ln),null==(n=e2())||n.removeEventListener("click",ln)}},[e2,eo]),m(function(){eu&&(e3(),e4())},[eu,U,W,eF,eo,null==el||null==(T=el.current)||null==(P=T.getBoundingClientRect())?void 0:P.height,n5]),v(function(){nU&&W.length!==Object.keys(e$).length&&ez.map(function(n){(null==e$?void 0:e$[null==n?void 0:n.value])||eG(function(o){return t(l({},o),e({},null==n?void 0:n.value,null==n?void 0:n.label))})})},[W,nU]),v(function(){var n,e,l,t,o,i,r,u,c=function(n){ed(window.scrollY)},a=eu?"addEventListener":"removeEventListener";null==nd||null==(n=nd.current)||n[a]("click",lc,!0),null==nm||null==(e=nm.current)||e[a]("click",la,!0),eu?(eo&&nK||window.removeEventListener("scroll",c),(null==n6?void 0:n6.current)&&(n6.current.style.pointerEvents="none"),null==(l=e2())||l.classList.add("tags-dropdown__container--opened"),eo?null==n9||null==(r=n9.current)||null==(i=r.blur)||i.call(r):null==n9||null==(o=n9.current)||null==(t=o.focus)||t.call(o)):(eo&&nK||window.addEventListener("scroll",c),(null==n6?void 0:n6.current)&&(n6.current.style.pointerEvents="auto"),null==(u=e2())||u.classList.remove("tags-dropdown__container--opened"),nX&&eT(""),ef(null),ej(""))},[eu]),v(function(){var n,e,l,t,o,i=function(n){eL(parseInt(n.target.scrollTop,10))},r=function(n){n.preventDefault(),window.scrollTo({top:es})};return eu&&eo&&(null==en?void 0:en.current)&&(null==en||null==(n=en.current)||n.addEventListener("scroll",i),eb((null==en||null==(e=en.current)?void 0:e.scrollHeight)>(null==en||null==(l=en.current)?void 0:l.clientHeight)),null===ew&&eC((null==en||null==(t=en.current)?void 0:t.scrollHeight)>(null==en||null==(o=en.current)?void 0:o.clientHeight))),eu&&en&&en.current&&(en.current.addEventListener("scroll",ls),eo&&nK||window.addEventListener("scroll",r)),function(){var n,e;eo&&nK||window.removeEventListener("scroll",r),null==en||null==(n=en.current)||n.removeEventListener("scroll",ls),null==en||null==(e=en.current)||e.removeEventListener("scroll",i)}},[eu,eo,null==en?void 0:en.current,null==en||null==(M=en.current)?void 0:M.scrollHeight,null==en||null==(R=en.current)?void 0:R.clientHeight]),v(function(){if(null==en?void 0:en.current){var n,e;ex(parseInt((null==en||null==(n=en.current)?void 0:n.scrollHeight)-(null==en||null==(e=en.current)?void 0:e.clientHeight),10))}},[eO,null==en?void 0:en.current]),v(function(){nH&&nP&&(eA||eH||eu)&&(null==nT||nT(eA))},[eu,eA,eH]),v(function(){eU(U.map(function(n){return t(l({},n),{ref:s()})}))},[U]),v(function(){if(eW){var n,e;e4(),null==eM||null==(e=eM.current)||null==(n=e.focus)||n.call(e)}},[null==eW?void 0:eW.value]),c("div",{className:g(A,V,(e(z={},"".concat(A,"_disabled"),Z),e(z,"".concat(A,"-mobile"),eo),e(z,"".concat(A,"--focused"),eu&&!(null==n6?void 0:n6.current)&&!eo),e(z,"".concat(A,"--custom-trigger"),!!(null==n6?void 0:n6.current)),z)),ref:n7,children:[lm(),nY&&c("div",{className:g("".concat(A,"__actions")),children:[u("div",{className:g("".concat(A,"__actions-item")),onClick:n1,children:u(w,{})}),u("div",{className:g("".concat(A,"__actions-item")),onClick:n2,children:u(O,{})})]}),eu&&((r=e2())?_(function(){var n,o,i,r=null==ez?void 0:ez.reduce(function(n,e){if(e.groupName){var o,i=null==e||null==(o=e.list)?void 0:o.filter(function(n){return ll(n)});(null==i?void 0:i.length)&&n.push(t(l({},e),{list:i}))}else ll(e)&&n.push(e);return n},[]),s=[],d=!0,v=!1,m=void 0;try{for(var f,p,h,b=r[Symbol.iterator]();!(d=(h=b.next()).done);d=!0){var y,N,C,L=h.value;L.groupName?s.push(c("div",{className:g("".concat(A,"-group"),L.className),children:[u("span",{className:"".concat(A,"-group__name"),children:L.groupName}),null==(y=L.list)?void 0:y.map(function(n){return ld(n)})]},null==(C=L.groupName)||null==(N=C.toString())?void 0:N.replace(/ /g,"_").concat(Date.now()))):s.push(ld(L))}}catch(n){v=!0,m=n}finally{try{d||null==b.return||b.return()}finally{if(v)throw m}}return u("div",{className:g("".concat(A,"__container-wrapper")),ref:n4,onClick:eo?lu:function(){},children:c("div",{ref:el,className:g("".concat(A,"__selector-wrapper"),e({},"".concat(A,"__selector-wrapper--fixed-height"),eN&&eo)),children:[nu||eo?c("div",{className:g("".concat(A,"__header"),(e(o={},"".concat(A,"__header-with-shadow"),ew&&eo),e(o,"".concat(A,"__header-with-shadow-hidden"),0===eO),o)),children:[eo&&c(a,{children:[c("div",{className:g("".concat(A,"__header-row")),children:[u("div",{className:g("".concat(A,"__label")),children:Q}),u("div",{className:g("".concat(A,"__close-icon")),onClick:function(n){n.stopPropagation(),ec(!1)},children:u(O,{onClick:function(n){n.stopPropagation(),ec(!1)}})})]}),lo()>(nJ||10)&&u("div",{className:g("".concat(A,"__header-row")),children:u(D,l({className:"".concat(A,"__input"),value:eF,onChange:function(n){return eT(n)},placeholder:nA||"Search",withDelete:!0,onMouseDown:function(){eu||ec(!0)}},nR))})]}),nu&&u("div",{className:g("".concat(A,"__header-row")),children:nu})]}):null,nX&&u("div",{className:g("".concat(A,"__input-list-wrapper")),children:lv()}),nV&&nQ&&eF&&r.length&&eQ.every(function(n){var e=n.label;return(null==e?void 0:e.toLowerCase())!==(null==eF?void 0:eF.toLowerCase())})?u("div",{className:g("".concat(A,"__creatable-helper")),children:"Select an option or create one"}):null,c("div",{ref:en,className:"".concat(A,"__list ").concat(nu||eo?"".concat(A,"__list--with-header"):""," ").concat(na?"".concat(A,"__list--with-footer"):""),children:[s,(null==(f=r.filter(function(n){return"open_modal"!==n.value}))?void 0:f.length)!==0||nV&&eF?null:u("div",{className:"".concat(A,"__no-options"),children:nj})]}),(na||eo)&&(null==(p=r.filter(function(n){return"open_modal"!==n.value}))?void 0:p.length)>0?c("div",{className:g("".concat(A,"__footer"),(e(i={},"".concat(A,"__footer-with-shadow"),eo&&ew),e(i,"".concat(A,"__footer-with-shadow-hidden"),eO===eI),i)),children:[na,eo&&c("button",{onClick:function(){return ec(!1)},children:["Apply",(null==W?void 0:W.length)?"(".concat(null==W?void 0:W.length,")"):""]})]}):null,eW&&_(c("div",{ref:ee,className:g("".concat(A,"__edit-option-modal")),children:[c("div",{className:g("".concat(A,"__edit-option-modal-section")),children:[u(D,{value:eW.label,onChange:function(n){return eV(function(e){return t(l({},e),{label:n})})},error:eY,onKeyDown:function(n){13===n&&e9()},symbolsLimit:"50",ref:eM}),u(k,{variant:"link",icon:u(E,{}),label:"Delete",onClick:e5})]}),u("div",{className:g("".concat(A,"__edit-option-modal-section-divider"))}),c("div",{className:g("".concat(A,"__edit-option-modal-section")),children:[u("h3",{children:"Colors"}),u("div",{className:g("".concat(A,"__edit-option-modal-section-colors")),children:B.map(function(n){var e;return u("div",{className:"color-block",style:{backgroundColor:n},onClick:function(){return eV(function(e){return t(l({},e),{style:t(l({},e.style),{backgroundColor:n})})})},children:(null==eW||null==(e=eW.style)?void 0:e.backgroundColor)===n?u(w,{}):null},n)})})]})]},"editOptionModal".concat(null==eW?void 0:eW.value)),null!=(n=document.getElementById("app"))?n:document.body),nV&&nQ&&eF&&eQ.every(function(n){var e=n.label;return(null==e?void 0:e.toLowerCase())!==(null==eF?void 0:eF.toLowerCase())})&&c("div",{className:g("".concat(A,"__create-option")),onClick:e6,children:["Create",u(F,{label:eF,style:{backgroundColor:eJ},isNoDismiss:!0})]})]})})}(),r):null)]})}