intelicoreact 2.0.18 → 2.0.20

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

@@ -0,0 +1,800 @@
+import '../../../styles/base.css';
+import Button from "../../UI/Button/Button.js";
+import CheckboxInput from "../CheckboxInput/CheckboxInput.js";
+import { formatToOnlyASCIICodeText } from "../../../Functions/fieldValueFormatters.js";
+import Input from "../Input/Input.js";
+import useIsMobile from "../../../Functions/useIsMobile/useIsMobile.js";
+import { useDebounce } from "../../../Functions/useDebounce.js";
+import Tag$1 from "../../UI/Tag/Tag.js";
+import TagList from "../../UI/TagList/TagList.js";
+import './TagsDropdown.styles.css';/* empty css                  */
+import cn from "classnames";
+import { createRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronUp, Code, MoreHorizontal, Trash2, X } from "react-feather";
+import { createPortal } from "react-dom";
+//#region src/Atomic/FormElements/TagsDropdown/TagsDropdown.tsx
+var RC = "tags-dropdown";
+var MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH = 10;
+var COLORS = [
+	"#F1F0F0",
+	"#E3E2E0",
+	"#EEDFDA",
+	"#F9DEC9",
+	"#FDECC8",
+	"#DBECDB",
+	"#D3E4EF",
+	"#E8DEEE",
+	"#F4E0E9",
+	"#FFE2DD",
+	"#D3EFED",
+	"#ECEEDE"
+];
+var TagsDropdown = ({ options: optionsProp, tagsFullList, 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, isUseInTable, recalculateListContainerStylesTrigger }) => {
+	const inputRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const dropdownRef = useRef(null);
+	const dropdownListRef = useRef(null);
+	const editOptionModalRef = useRef(null);
+	const dropdownListWrapperRef = useRef(null);
+	const { isMobile: isMobileProp } = useIsMobile();
+	const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
+	const [dropdownId] = useState(id || fieldKey || Math.random().toString(16).slice(2));
+	const [isOpen, setIsOpen] = useState(false);
+	const [windowScrollTop, setWindowScrollTop] = useState(0);
+	const [listPos, setListPos] = useState(null);
+	const [initListHeight, setInitListHeight] = useState(null);
+	const [isScrollableList, setIsScrollableList] = useState(null);
+	const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [scrollHeight, setScrollHeight] = useState(1);
+	const searchValueRef = useRef(null);
+	const [searchValue, setSearchValue] = useState("");
+	const debouncedSearchTerm = useDebounce({
+		searchValue,
+		delay: 600
+	});
+	const [isValueDeleted, setIsValueDeleted] = useState(false);
+	const setSearchValueInterceptor = (value) => {
+		setSearchValue(value);
+		setIsValueDeleted(searchValue !== value && value === "");
+		searchValueRef.current = value;
+	};
+	const editingOptionInputRef = useRef(null);
+	const [options, setOptions] = useState([]);
+	const [editingOption, setEditingOptionState] = useState(null);
+	const setEditingOption = (data) => {
+		setEditingOptionState((editingOption) => {
+			if (!data) return null;
+			const nextData = typeof data === "function" ? data(editingOption) : data;
+			return {
+				...editingOption ?? {},
+				...nextData,
+				isChanged: Boolean(editingOption)
+			};
+		});
+	};
+	const isEditingOptionError = useMemo(() => {
+		if (!editingOption) return false;
+		return options.filter(({ value }) => value !== editingOption.value).some(({ label }) => label === editingOption.label) ? true : null;
+	}, [options, editingOption]);
+	const [localOptionsStore, setLocalOptionsStore] = useState({});
+	const randomColorForNewOption = useMemo(() => {
+		const getRandomIndex = (min, max) => {
+			return Math.floor(Math.random() * (max - min + 1)) + min;
+		};
+		return COLORS[getRandomIndex(0, COLORS?.length - 1)];
+	}, [options?.length]);
+	const singleLevelOptions = options?.reduce((acc, item) => {
+		const checkUniqAndPush = (acc, item) => {
+			const isExist = acc?.findIndex(({ value }) => String(value) === String(item?.value));
+			if (isExist !== -1) acc[isExist] = item;
+			else acc.push(item);
+		};
+		if (item.groupName) item.list?.map((item) => checkUniqAndPush(acc, item));
+		else checkUniqAndPush(acc, item);
+		return acc;
+	}, isUseLocalOptionsStore ? Object.keys(localOptionsStore)?.map((value) => ({
+		value,
+		label: localOptionsStore?.[value] ?? ""
+	})) : []);
+	const deleteChosen = (value) => {
+		if (isMobile ? closeOnRemoveMobile : closeOnRemove) setIsOpen(false);
+		if (isUseLocalOptionsStore) setLocalOptionsStore((options) => {
+			return {
+				...options,
+				[value]: void 0
+			};
+		});
+		onChange?.(chosenOptions.filter((item) => item !== value), "chosenOptions");
+	};
+	const getParentNode = () => {
+		return document.querySelector("div#root") ?? document.querySelector("div#app") ?? document.querySelector("div#storybook-root");
+	};
+	const initListContainer = () => {
+		const dropdownList = document.createElement("div");
+		dropdownList.setAttribute("id", dropdownId);
+		dropdownList.classList.add("tags-dropdown__container");
+		listClassName && dropdownList.classList.add(listClassName);
+		if (isMobile) dropdownList.addEventListener("click", (e) => {
+			if (e.target && e.target.id === dropdownId) setIsOpen(false);
+		});
+		if (isMobile) {
+			try {
+				document.getElementById(`mlw-${dropdownId}`)?.remove();
+			} catch {}
+			const dropdownMobileListWrapper = document.createElement("div");
+			dropdownMobileListWrapper.classList.add("tags-dropdown-mobile");
+			dropdownMobileListWrapper.setAttribute("id", `mlw-${dropdownId}`);
+			dropdownMobileListWrapper?.append(dropdownList);
+			getParentNode()?.append(dropdownMobileListWrapper);
+		} else getParentNode()?.append(dropdownList);
+	};
+	const getListContainer = () => {
+		return document.getElementById(dropdownId);
+	};
+	const getListContainerWrapper = () => {
+		return document.getElementById(`mlw-${dropdownId}`);
+	};
+	const setListContainerStyles = () => {
+		const listContainer = getListContainer();
+		if (!listContainer || !isOpen) return false;
+		const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+		const { width, height = 0, left, top = 0 } = dropdownRef?.current?.getBoundingClientRect() ?? {};
+		const selectorWrapper = dropdownListWrapperRef?.current;
+		const dropdownList = listContainer.getElementsByClassName("tags-dropdown__list")[0];
+		const listHeader = selectorWrapper?.getElementsByClassName("tags-dropdown__header")[0];
+		const listFooter = selectorWrapper?.getElementsByClassName("tags-dropdown__footer")[0];
+		const margin = Number.parseInt(getComputedStyle(selectorWrapper)?.marginTop?.replace("px", "") ?? "0", 10);
+		let selectorWrapperHeight = selectorWrapper?.getBoundingClientRect()?.height ?? 0;
+		const maxSelectorWrapperHeight = 500 - (listHeader?.getBoundingClientRect()?.height ?? 0) - (listFooter?.getBoundingClientRect()?.height ?? 0);
+		if (!isMobile || !withMobileLogic) {
+			const dropdownListMaxHeightInPx = getComputedStyle(dropdownList)?.maxHeight;
+			const maxHeight = initListHeight ?? Number.parseInt(dropdownListMaxHeightInPx?.replace("px", "") ?? "0", 10);
+			if (initListHeight === null && !Number.isNaN(maxHeight)) setInitListHeight(maxHeight);
+			if (selectorWrapperHeight !== void 0 && selectorWrapperHeight > maxHeight && !Number.isNaN(maxHeight)) selectorWrapperHeight = maxHeight - 2 * margin;
+			const toTop = renderCustomTrigger ? top - margin - (customTriggerRef?.current?.getBoundingClientRect()?.height ?? 0) : top - margin;
+			const toBottom = windowHeight - top - height - margin * 2;
+			let listPosition = listPos;
+			if (!listPos && options?.length) {
+				listPosition = toTop < toBottom || toBottom >= selectorWrapperHeight ? "bottom" : "top";
+				setListPos(listPosition);
+			}
+			if (selectorWrapperHeight > (listPosition === "top" ? toTop : toBottom)) {
+				selectorWrapperHeight = (listPosition === "top" ? toTop : toBottom) - 3 * margin;
+				if (selectorWrapperHeight < 200) selectorWrapperHeight = 200;
+				if (selectorWrapper) 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;
+		return createPortal(getListMarkUp(), lc);
+	};
+	const onOptionCreateClick = () => {
+		const newOption = {
+			label: searchValue,
+			style: { backgroundColor: randomColorForNewOption },
+			isEditable: true,
+			ref: createRef()
+		};
+		Promise.resolve(onOptionCreate?.(newOption) ?? 1).then((result) => {
+			const tempId = Math.random().toString(16).slice(2);
+			newOption.value = result?.id ?? tempId;
+			setOptions((state) => [...state, newOption]);
+			setSearchValue("");
+			onChangeHandler(newOption);
+		});
+	};
+	const onOptionEditClick = (e, item) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		setEditingOption(editingOption?.value === item?.value ? null : item);
+	};
+	const onOptionDeleteClick = () => {
+		Promise.resolve(onOptionDelete?.(editingOption) ?? 1).then(() => {
+			if (editingOption?.value) deleteChosen(editingOption?.value);
+			setOptions((options) => options.filter(({ value }) => value !== editingOption?.value));
+			setEditingOption(null);
+		});
+	};
+	const saveEditingOption = () => {
+		if (!editingOption?.isChanged || isEditingOptionError) {
+			setEditingOption(null);
+			return false;
+		}
+		onOptionEdit?.(editingOption);
+		setOptions((options) => options?.map((option) => {
+			if (editingOption && option.value === editingOption?.value) {
+				const tmp = { ...editingOption };
+				setEditingOption(null);
+				return tmp;
+			}
+			return option;
+		}));
+	};
+	const setEditOptionModalStyles = () => {
+		if (!editingOption || !editOptionModalRef?.current) return null;
+		const modalSize = 200;
+		const { scrollX, scrollY } = window;
+		const positionClasses = {
+			left: "modal-left",
+			right: "modal-right",
+			top: "modal-top",
+			bottom: "modal-bottom"
+		};
+		const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+		const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+		const { x = 0, y = 0, width = 0, height = 0 } = ((editingOption?.ref)?.current)?.getBoundingClientRect() ?? {};
+		const containerPosition = dropdownListWrapperRef?.current?.getBoundingClientRect();
+		const distanceToRight = windowWidth - (containerPosition?.x ?? 0) - (containerPosition?.width ?? 0);
+		const distanceToBottom = windowHeight - y - scrollY - height;
+		Object.values(positionClasses)?.map((className) => {
+			if (editOptionModalRef.current) editOptionModalRef.current.classList.remove(className);
+			return className;
+		});
+		editOptionModalRef.current.classList.add(positionClasses?.[distanceToRight < modalSize ? "left" : "right"] ?? "");
+		editOptionModalRef.current.classList.add(positionClasses?.[distanceToBottom < modalSize ? "top" : "bottom"] ?? "");
+		const xTranslate = distanceToRight < modalSize ? "calc(-100% + 7px)" : "-35px";
+		const yTranslate = distanceToBottom < modalSize ? `calc(-100% - ${height + 10}px)` : "10px";
+		if (editOptionModalRef.current instanceof HTMLElement) {
+			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__ */ jsxs("div", {
+			ref: editOptionModalRef,
+			className: cn(`${RC}__edit-option-modal`),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(`${RC}__edit-option-modal-section`),
+					children: [/* @__PURE__ */ jsx(Input, {
+						value: editingOption?.label,
+						onChange: (v) => setEditingOption((state) => ({
+							...state,
+							label: v
+						})),
+						error: !!isEditingOptionError,
+						onKeyDown: (keyCode) => {
+							if (keyCode === 13) saveEditingOption();
+						},
+						symbolsLimit: "50",
+						ref: editingOptionInputRef
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "link",
+						icon: /* @__PURE__ */ jsx(Trash2, {}),
+						label: "Delete",
+						onClick: onOptionDeleteClick
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", { className: cn(`${RC}__edit-option-modal-section-divider`) }),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(`${RC}__edit-option-modal-section`),
+					children: [/* @__PURE__ */ jsx("h3", { children: "Colors" }), /* @__PURE__ */ jsx("div", {
+						className: cn(`${RC}__edit-option-modal-section-colors`),
+						children: COLORS?.map((color) => /* @__PURE__ */ jsx("div", {
+							className: "color-block",
+							style: { backgroundColor: color },
+							onClick: () => setEditingOption((state) => ({
+								...state,
+								style: {
+									...state ? state.style : {},
+									backgroundColor: color
+								}
+							})),
+							children: editingOption?.style?.backgroundColor === color ? /* @__PURE__ */ jsx(Check, {}) : null
+						}, color))
+					})]
+				})
+			]
+		}, `editOptionModal${editingOption?.value}`);
+	};
+	const handleClickOutside = (e) => {
+		const { target } = e;
+		if (isOpen && !getListContainer()?.contains(target) && !editOptionModalRef.current && !dropdownRef?.current?.contains(target)) {
+			setIsOpen(false);
+			onDropdownListClose?.(e);
+		} else if (editOptionModalRef.current && !editOptionModalRef.current?.contains(target)) {
+			if (!document?.getElementById?.(`editTrigger${editingOption?.value}`)?.contains?.(target)) saveEditingOption();
+		}
+	};
+	const closeList = (e) => {
+		handleClickOutside(e);
+		if (!e.target.isEqualNode(inputRef?.current)) inputRef?.current?.blur();
+	};
+	const isTargetInParent = (target) => {
+		if (target?.tagName === "svg" && (target?.parentNode)?.className === "tag__button" || target?.tagName === "line") return false;
+		if (target?.tagName === "svg" && (target?.parentNode)?.className !== "tag__button" || target?.className?.indexOf?.("tag__label") !== -1 || target?.className?.indexOf?.("tag-list_wrapper") !== -1 || target?.className.indexOf(`${RC}__trigger`) !== -1 || target?.className === "tags-dropdown__arrow") return true;
+		return false;
+	};
+	const isItemMatchesSearch = (item) => {
+		if (item.isHiddenInList) return false;
+		const title = item.title || item.label;
+		return searchValue?.length ? !!title?.toLowerCase().includes(searchValue?.toLowerCase() || "") : true;
+	};
+	const prepareOptions = (options) => {
+		return options?.map((option) => option?.groupName ? option?.list ?? [] : option).flat();
+	};
+	const getFilteredOptions = (options) => options?.reduce((result, option) => {
+		if (option.groupName) {
+			const filteredGroupItems = option?.list?.filter((item) => isItemMatchesSearch(item));
+			if (filteredGroupItems?.length) result.push({
+				...option,
+				list: filteredGroupItems
+			});
+		} else if (isItemMatchesSearch(option)) result.push(option);
+		return result;
+	}, []);
+	const getTotalOptions = useCallback(() => {
+		return options?.reduce((result, item) => {
+			if (item?.list) result += item?.list?.length || 0;
+			else ++result;
+			return result;
+		}, 0);
+	}, [options]);
+	const onChangeHandler = (item) => {
+		if (item?.isFreezed) return false;
+		if (item?.closeOnOptionSelect !== void 0) {
+			if (item.closeOnOptionSelect) setIsOpen(false);
+		} else if (isMobile ? closeOnSelectMobile : closeOnSelect) setIsOpen(false);
+		if (inputRef?.current?.focus) {
+			inputRef.current.focus();
+			const len = inputRef.current?.value?.length ?? 0;
+			inputRef.current.setSelectionRange(len, len);
+		}
+		if (item.value && chosenOptions.includes(item.value)) {
+			deleteChosen(item.value);
+			return null;
+		}
+		if (item.value && isUseLocalOptionsStore) setLocalOptionsStore((options) => {
+			if (item.value) return {
+				...options,
+				[item.value]: item?.label
+			};
+			else return options;
+		});
+		if (item.value) onChange?.([...chosenOptions, item.value], "chosenOptions");
+		return null;
+	};
+	const onSearchHandler = (name) => {
+		let inputValue = name;
+		if (!isNotValidateASCII) inputValue = formatToOnlyASCIICodeText(inputValue);
+		setSearchValueInterceptor(inputValue);
+	};
+	const onWrapperClick = (e) => {
+		if (e.target === wrapperRef?.current) {
+			e.stopPropagation();
+			e.preventDefault();
+			setIsOpen(false);
+		}
+	};
+	const selectAllItems = () => {
+		const preparedOptions = prepareOptions(options)?.filter(({ isFreezed, value }) => value && !isFreezed && !chosenOptions?.includes(value || value?.toString()) && value !== "open_modal");
+		if (isUseLocalOptionsStore) setLocalOptionsStore((options) => preparedOptions?.reduce((result, { value, label }) => {
+			if (value) result[value] = label;
+			return result;
+		}, options));
+		onChange?.([...chosenOptions, ...preparedOptions?.map(({ value }) => value ?? "") || []], "chosenOptions");
+		if (isMobile ? closeOnSelectAllMobile : closeOnSelectAll) setIsOpen(false);
+	};
+	const unselectAllItems = () => {
+		if (isUseLocalOptionsStore) setLocalOptionsStore({});
+		onChange?.(chosenOptions?.filter((item) => prepareOptions(options)?.find(({ value }) => value === item)?.isFreezed), "chosenOptions");
+		if (isMobile ? closeOnRemoveAllMobile : closeOnRemoveAll) setIsOpen(false);
+	};
+	const doScrollCallback = useCallback((e) => {
+		if (doLiveSearchRequest && typeof doLiveSearchRequest === "function") {
+			if (+Math.round(e.target.clientHeight + e.target.scrollTop) === +e.target.scrollHeight) doLiveSearchRequest(searchValueRef.current, true);
+		}
+	}, [options]);
+	const getMarkupForElement = (item) => {
+		const { description } = item;
+		const title = item.title || item.label;
+		const hightlightSearchValue = (title) => {
+			const index = title?.toLowerCase()?.indexOf(searchValue?.toLowerCase());
+			if (index === -1) return title;
+			return /* @__PURE__ */ jsxs("pre", {
+				className: "inherit-styles",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: title.substring(0, index) }),
+					/* @__PURE__ */ jsx("span", {
+						className: "search-match",
+						children: title.substring(index, index + searchValue?.length)
+					}),
+					/* @__PURE__ */ jsx("span", { children: title.substring(index + searchValue?.length) })
+				]
+			});
+		};
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			ref: item?.ref,
+			onClick: (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onChangeHandler(item);
+			},
+			className: cn(`${RC}__list-item`, { [`${RC}__list-item_active`]: chosenOptions?.some((value) => value === item.value) }, { [`${RC}__list-item_disabled`]: item.disabled }, { [`${RC}__list-item_freezed`]: item?.isFreezed }, { [`${RC}__list-item--editing`]: item?.value === editingOption?.value }, item.className),
+			children: [
+				!isMobile && /* @__PURE__ */ jsx("span", {
+					className: cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: chosenOptions?.some((value) => value === item.value) }),
+					children: /* @__PURE__ */ jsx(Check, {
+						width: 16,
+						height: 16,
+						className: "color--text"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cn(`${RC}__list-item-body`),
+					children: [renderOptionsAsTags ? /* @__PURE__ */ jsx(Tag$1, {
+						className: cn(`${RC}__list-item-title`, item?.labelClassName, { "tag_with-btn": !item?.isFreezed }),
+						label: title ? hightlightSearchValue(title) : "",
+						style: item?.style,
+						isUseInTable,
+						isNoDismiss: true
+					}, item?.value) : /* @__PURE__ */ jsx("span", {
+						className: cn(`${RC}__list-item-title`, item.labelClassName),
+						children: title ? hightlightSearchValue(title) : ""
+					}), description && /* @__PURE__ */ jsx("span", {
+						className: cn(`${RC}__list-item-description`),
+						children: description
+					})]
+				}),
+				!isMobile && item?.isEditable && onOptionEdit && onOptionDelete && /* @__PURE__ */ jsx("div", {
+					id: `editTrigger${item?.value}`,
+					className: cn(`${RC}__list-item-edit-trigger`),
+					onClick: (e) => onOptionEditClick(e, item),
+					children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+				}),
+				isMobile ? item?.customMobileIcon ?? /* @__PURE__ */ jsx(CheckboxInput, {
+					value: chosenOptions?.some((value) => value === item.value),
+					onChange: () => {
+						onChangeHandler(item);
+					},
+					label: "",
+					id: ""
+				}) : ""
+			]
+		}, `${RC}__list-item-${item.id || item.value}`);
+	};
+	const getListMarkUp = () => {
+		const filteredOptions = getFilteredOptions(options);
+		const arrToPrint = [];
+		for (const option of filteredOptions) if (option.groupName) arrToPrint.push(/* @__PURE__ */ jsxs("div", {
+			className: cn(`${RC}-group`, option.className),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `${RC}-group__name`,
+				children: option.groupName
+			}), option.list?.map((item) => getMarkupForElement(item))]
+		}, option.groupName?.toString()?.replace(/ /g, "_").concat(Date.now()?.toString())));
+		else if (!option.readOnly) arrToPrint.push(getMarkupForElement(option));
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__container-wrapper`),
+			ref: wrapperRef,
+			onClick: isMobile ? onWrapperClick : () => {},
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: dropdownListWrapperRef,
+				className: cn(`${RC}__selector-wrapper`, { [`${RC}__selector-wrapper--fixed-height`]: isFixedMaxHeight && isMobile }),
+				children: [
+					headerContent || isMobile ? /* @__PURE__ */ jsxs("div", {
+						className: cn(`${RC}__header`, {
+							[`${RC}__header-with-shadow`]: isScrollableList && isMobile,
+							[`${RC}__header-with-shadow-hidden`]: scrollTop === 0
+						}),
+						children: [isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+							className: cn(`${RC}__header-row`),
+							children: [/* @__PURE__ */ jsx("div", {
+								className: cn(`${RC}__label`),
+								children: label
+							}), /* @__PURE__ */ jsx("div", {
+								className: cn(`${RC}__close-icon`),
+								onClick: (e) => {
+									e.stopPropagation();
+									setIsOpen(false);
+								},
+								children: /* @__PURE__ */ jsx(X, { onClick: (e) => {
+									e.stopPropagation();
+									setIsOpen(false);
+								} })
+							})]
+						}), getTotalOptions() > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH) && /* @__PURE__ */ jsx("div", {
+							className: cn(`${RC}__header-row`),
+							children: /* @__PURE__ */ jsx(Input, {
+								className: `${RC}__input`,
+								value: searchValue,
+								onChange: (v) => setSearchValueInterceptor(v),
+								placeholder: mobileSearchPlaceholder || "Search",
+								withDelete: true,
+								onMouseDown: () => {
+									if (!isOpen) setIsOpen(true);
+								},
+								...attributesOfNativeInput
+							})
+						})] }), headerContent && /* @__PURE__ */ jsx("div", {
+							className: cn(`${RC}__header-row`),
+							children: headerContent
+						})]
+					}) : null,
+					withSearchInputInList && /* @__PURE__ */ jsx("div", {
+						className: cn(`${RC}__input-list-wrapper`),
+						children: renderSearchInput()
+					}),
+					withCreateLogic && onOptionCreate && searchValue && filteredOptions?.length && singleLevelOptions.every(({ label }) => label?.toLowerCase() !== searchValue?.toLowerCase()) ? /* @__PURE__ */ jsx("div", {
+						className: cn(`${RC}__creatable-helper`),
+						children: "Select an option or create one"
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						ref: dropdownListRef,
+						className: `${RC}__list ${headerContent || isMobile ? `${RC}__list--with-header` : ""} ${footerContent ? `${RC}__list--with-footer` : ""}`,
+						children: [arrToPrint, filteredOptions.filter(({ value }) => value !== "open_modal")?.length === 0 && (!withCreateLogic || !searchValue) ? /* @__PURE__ */ jsx("div", {
+							className: `${RC}__no-options`,
+							children: noOptionsText
+						}) : null]
+					}),
+					(footerContent || isMobile) && filteredOptions.filter(({ value }) => value !== "open_modal")?.length > 0 ? /* @__PURE__ */ jsxs("div", {
+						className: cn(`${RC}__footer`, {
+							[`${RC}__footer-with-shadow`]: isMobile && isScrollableList,
+							[`${RC}__footer-with-shadow-hidden`]: scrollTop === scrollHeight
+						}),
+						children: [footerContent, isMobile && /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => setIsOpen(false),
+							children: ["Apply", chosenOptions?.length ? `(${chosenOptions?.length})` : ""]
+						})]
+					}) : null,
+					editingOption && createPortal(renderEditOptionModal(), document.getElementById("root") ?? document.body),
+					withCreateLogic && onOptionCreate && searchValue && singleLevelOptions.every(({ label }) => label?.toLowerCase() !== searchValue?.toLowerCase()) && /* @__PURE__ */ jsxs("div", {
+						className: cn(`${RC}__create-option`),
+						onClick: onOptionCreateClick,
+						children: ["Create", /* @__PURE__ */ jsx(Tag$1, {
+							isUseInTable,
+							label: searchValue,
+							style: { backgroundColor: randomColorForNewOption },
+							isNoDismiss: true
+						})]
+					})
+				]
+			})
+		});
+	};
+	const renderSearchInput = () => {
+		return /* @__PURE__ */ jsx(Input, {
+			ref: inputRef,
+			className: cn(`${RC}__input`, { [`${RC}__input--in-list`]: withSearchInputInList }),
+			value: searchValue,
+			onChange: onSearchHandler,
+			placeholder: placeholder || "Select from list",
+			attributesOfNativeInput: {
+				...attributesOfNativeInput,
+				onKeyDown: (e) => {
+					if (e.keyCode === 13 && withCreateLogic && onOptionCreate && singleLevelOptions.every(({ label }) => label?.toLowerCase() !== searchValue?.toLowerCase())) onOptionCreateClick();
+					onKeyPress?.(e, searchValue);
+				}
+			},
+			...withCreateLogic ? { symbolsLimit: 50 } : {}
+		});
+	};
+	const renderDropdownTrigger = useCallback(() => {
+		const renderDefaultDropdownTrigger = () => {
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn(`${RC}__trigger`, {
+					"tags-dropdown__error": error,
+					[`${RC}__trigger--with-actions`]: withActions
+				}),
+				onClick: ({ target }) => {
+					if (target?.tagName === "INPUT") setIsOpen(true);
+					else if (isTargetInParent(target)) setIsOpen((isOpen) => !isOpen);
+				},
+				children: [
+					noTagsWrap ? /* @__PURE__ */ jsx(TagList, {
+						items: chosenOptions?.map((value, i) => {
+							const tag = singleLevelOptions?.find((el) => String(el.value) === String(value));
+							return {
+								value,
+								label: isValuesInTags ? tag?.value : tag?.label || tag?.name || tag?.title,
+								id: i,
+								className: tag?.labelClassName,
+								style: tag?.style
+							};
+						}),
+						isUseInTable,
+						disableShowMore: true
+					}) : chosenOptions?.map((value) => {
+						const tag = singleLevelOptions?.find((el) => String(el.value) === String(value));
+						const label = isValuesInTags ? tag?.value : tag?.label || tag?.name || tag?.title;
+						return /* @__PURE__ */ jsx(Tag$1, {
+							className: cn(tagClassname, tag?.labelClassName, { "tag_with-btn": !tag?.isFreezed }),
+							label,
+							style: tag?.style,
+							removeItem: tag?.isFreezed || tag?.readOnly ? void 0 : () => deleteChosen(value),
+							isNoDismiss: false,
+							isUseInTable
+						}, value);
+					}),
+					chosenOptions?.length === 0 || !noTagsWrap ? renderSearchInput() : "",
+					/* @__PURE__ */ jsx("span", {
+						className: cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen }),
+						children: isMobile ? /* @__PURE__ */ jsx(Code, { className: "mobile-icon" }) : isOpen ? /* @__PURE__ */ jsx(ChevronUp, { className: "color--text" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "color--text" })
+					})
+				]
+			});
+		};
+		return renderCustomTrigger?.({
+			chosenOptions,
+			singleLevelOptions,
+			deleteChosen,
+			inputRef,
+			onSearchHandler,
+			isOpen,
+			setIsOpen
+		}) ?? renderDefaultDropdownTrigger();
+	}, [
+		chosenOptions,
+		singleLevelOptions,
+		inputRef,
+		isOpen
+	]);
+	useLayoutEffect(() => {
+		initListContainer();
+		if (isDefaultOpened && !isMobileProp) setIsOpen(true);
+		return () => {
+			getListContainer()?.remove();
+			getListContainerWrapper()?.remove();
+		};
+	}, []);
+	useLayoutEffect(() => {
+		if (!isMobile) {
+			window.addEventListener("mousewheel", closeList);
+			window.addEventListener("wheel", closeList);
+			window.addEventListener("touchmove", closeList);
+			window.addEventListener("mouseup", handleClickOutside);
+		} else {
+			window.removeEventListener("mousewheel", closeList);
+			window.removeEventListener("wheel", closeList);
+			window.removeEventListener("touchmove", closeList);
+			window.removeEventListener("mouseup", handleClickOutside);
+		}
+		getListContainer()?.addEventListener("click", closeList);
+		return () => {
+			window.removeEventListener("mousewheel", closeList);
+			window.removeEventListener("mouseup", handleClickOutside);
+			window.removeEventListener("wheel", closeList);
+			window.removeEventListener("touchmove", closeList);
+			getListContainer()?.removeEventListener("click", closeList);
+		};
+	}, [getListContainer, isMobile]);
+	useLayoutEffect(() => {
+		if (isOpen) {
+			setListContainerStyles();
+			setEditOptionModalStyles();
+		}
+	}, [
+		isOpen,
+		optionsProp,
+		chosenOptions,
+		searchValue,
+		isMobile,
+		dropdownListWrapperRef?.current?.getBoundingClientRect()?.height,
+		recalculateListContainerStylesTrigger
+	]);
+	useEffect(() => {
+		if (isUseLocalOptionsStore && chosenOptions?.length !== Object.keys(localOptionsStore)?.length) options.map((option) => {
+			if (option?.value && !localOptionsStore?.[option?.value?.toString()]) setLocalOptionsStore((options) => {
+				if (option.value) return {
+					...options,
+					[option?.value?.toString()]: option?.label
+				};
+				else return options;
+			});
+			return option;
+		});
+	}, [chosenOptions, isUseLocalOptionsStore]);
+	useEffect(() => {
+		const windowScrollEventHandler = () => {
+			setWindowScrollTop(window.scrollY);
+		};
+		const fn = isOpen ? "addEventListener" : "removeEventListener";
+		selectAllButtonRef?.current?.[fn]("click", selectAllItems, true);
+		unselectAllButtonRef?.current?.[fn]("click", unselectAllItems, true);
+		if (isOpen) {
+			if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", windowScrollEventHandler);
+			if (customTriggerRef?.current) customTriggerRef.current.style.pointerEvents = "none";
+			getListContainer()?.classList.add("tags-dropdown__container--opened");
+			if (!isMobile) inputRef?.current?.focus?.();
+			else inputRef?.current?.blur?.();
+		} else {
+			if (!isMobile || !withMobileLogic) window.addEventListener("scroll", windowScrollEventHandler);
+			if (customTriggerRef?.current) customTriggerRef.current.style.pointerEvents = "auto";
+			getListContainer()?.classList.remove("tags-dropdown__container--opened");
+			if (withSearchInputInList) setSearchValueInterceptor("");
+			searchValueRef.current = "";
+			setListPos(null);
+			setSearchValue("");
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		const setScrollTopValue = (e) => {
+			setScrollTop(Number.parseInt(e.target.scrollTop?.toString(), 10));
+		};
+		const preventWindowScrolling = (e) => {
+			e.preventDefault();
+			window.scrollTo({ top: windowScrollTop });
+		};
+		if (isOpen && isMobile && dropdownListRef?.current) {
+			dropdownListRef?.current?.addEventListener("scroll", setScrollTopValue);
+			setIsScrollableList(dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
+			if (isScrollableList === null) setIsFixedMaxHeight(dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
+		}
+		if (isOpen && dropdownListRef && dropdownListRef.current) {
+			dropdownListRef.current.addEventListener("scroll", doScrollCallback);
+			if (!isMobile || !withMobileLogic) window.addEventListener("scroll", preventWindowScrolling);
+		}
+		return () => {
+			if (!isMobile || !withMobileLogic) window.removeEventListener("scroll", preventWindowScrolling);
+			dropdownListRef?.current?.removeEventListener("scroll", doScrollCallback);
+			dropdownListRef?.current?.removeEventListener("scroll", setScrollTopValue);
+		};
+	}, [
+		isOpen,
+		isMobile,
+		dropdownListRef?.current,
+		dropdownListRef?.current?.scrollHeight,
+		dropdownListRef?.current?.clientHeight
+	]);
+	useEffect(() => {
+		if (dropdownListRef?.current) setScrollHeight(Number.parseInt((dropdownListRef?.current?.scrollHeight - dropdownListRef?.current?.clientHeight)?.toString(), 10));
+	}, [scrollTop, dropdownListRef?.current]);
+	useEffect(() => {
+		if (isSearchable && useLiveSearch && (debouncedSearchTerm || isValueDeleted || isOpen)) doLiveSearchRequest?.(searchValue ? debouncedSearchTerm : "");
+	}, [
+		isOpen,
+		debouncedSearchTerm,
+		isValueDeleted
+	]);
+	useEffect(() => {
+		setOptions((tagsFullList || optionsProp)?.map((option) => ({
+			...option,
+			ref: createRef()
+		})));
+	}, [optionsProp, tagsFullList]);
+	useEffect(() => {
+		if (editingOption) {
+			setEditOptionModalStyles();
+			editingOptionInputRef?.current?.focus?.();
+		}
+	}, [editingOption?.value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, className, {
+			[`${RC}_disabled`]: disabled,
+			[`${RC}-mobile`]: isMobile,
+			[`${RC}--focused`]: isOpen && !customTriggerRef?.current && !isMobile,
+			[`${RC}--custom-trigger`]: Boolean(customTriggerRef?.current)
+		}),
+		ref: dropdownRef,
+		children: [
+			renderDropdownTrigger(),
+			withActions && /* @__PURE__ */ jsxs("div", {
+				className: cn(`${RC}__actions`),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__actions-item`),
+					onClick: onActionConfirmClick,
+					children: /* @__PURE__ */ jsx(Check, {})
+				}), /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__actions-item`),
+					onClick: onActionCancelClick,
+					children: /* @__PURE__ */ jsx(X, {})
+				})]
+			}),
+			isOpen && renderListContainer()
+		]
+	});
+};
+//#endregion
+export { TagsDropdown as default };
+
+//# sourceMappingURL=TagsDropdown.js.map