intelicoreact 2.0.18 → 2.0.19

package/dist/es/Atomic/FormElements/Dropdown/useDropdown.js

@@ -0,0 +1,118 @@
+import useIsMobile_default from "../../../Functions/useIsMobile/index.js";
+import { getListContainer, getListContainerWrapper, getParentNode, getPreparedOptionLabel, getSortedOptions, getTotalOptions, moveOtherToEnd } from "./_utils.js";
+import { useMemo, useRef, useState } from "react";
+//#region src/Atomic/FormElements/Dropdown/useDropdown.tsx
+function useDropdown({ id, fieldKey, value, sortAlphabetical, withMobileLogic, options, minItemsForShowMobileSearch, isSearchable: isSearchableProp, isDoNotPullOutListOfMainContainer } = {}) {
+	const { isMobile: isMobileProp } = useIsMobile_default();
+	const isMobile = isMobileProp && withMobileLogic;
+	const [dropdownId] = useState((id || fieldKey || Math.random().toString(16).slice(2)).toString());
+	const [isOpen, setIsOpen] = useState(false);
+	const [valueToApply, setValueToApplyState] = useState(null);
+	const valueToApplyRef = useRef(null);
+	const setValueToApply = (value) => {
+		valueToApplyRef.current = value;
+		setValueToApplyState(value);
+	};
+	const [searchValue, setSearchValue] = useState();
+	const dropdownRef = useRef(null);
+	const dropdownListRef = useRef(null);
+	const dropdownFooterRef = useRef(null);
+	const dropdownListWrapperRef = useRef(null);
+	const searchInputRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const [initListHeight, setInitListHeight] = useState(null);
+	const [isSearchChanged, setIsSearchChanged] = useState(false);
+	const [isSearchInputFocused, setIsSearchInputFocused] = useState(false);
+	const [isScrollableList, setIsScrollableList] = useState(false);
+	const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [scrollHeight, setScrollHeight] = useState(1);
+	const [maxListContainerHeight, setMaxListContainerHeight] = useState(0);
+	const totalOptionsLength = useMemo(() => options ? getTotalOptions(options) : 0, [options]);
+	const isSearchable = useMemo(() => {
+		return isMobile ? totalOptionsLength > (minItemsForShowMobileSearch || 10) : isSearchableProp;
+	}, [
+		isMobile,
+		isSearchableProp,
+		totalOptionsLength,
+		minItemsForShowMobileSearch,
+		10
+	]);
+	const optionsWithOtherAtTheEnd = useMemo(() => moveOtherToEnd(options ?? []), [options]);
+	const filteredGroups = useMemo(() => optionsWithOtherAtTheEnd.map((item) => ({
+		...item,
+		items: !isSearchable || !isSearchChanged ? item?.items : item.items?.slice().filter((el) => el?.label?.toLowerCase().includes(searchValue?.toString()?.toLowerCase() || "") || !el?.value || el?.value === "")
+	})).filter((item) => (item.items?.length ?? 0) > 0), [
+		optionsWithOtherAtTheEnd,
+		searchValue,
+		isSearchable,
+		isSearchChanged
+	]);
+	const filteredItems = useMemo(() => optionsWithOtherAtTheEnd.filter((item) => !item.items?.length).filter((item) => {
+		if (!isSearchable || !isSearchChanged) return true;
+		return item?.label?.toLowerCase().includes(searchValue?.toString()?.toLowerCase() || "") || !item?.value || item?.value === "";
+	}), [
+		optionsWithOtherAtTheEnd,
+		searchValue,
+		isSearchable,
+		isSearchChanged
+	]);
+	const filteredOptions = useMemo(() => [...filteredItems, ...filteredGroups], [filteredItems, filteredGroups]);
+	const selectedLabel = useMemo(() => options?.find((el) => el.value === value)?.label ?? options?.reduce((acc, item) => {
+		if (!acc?.length) return item.items?.find((el) => el.value === value)?.label ?? "";
+		return acc;
+	}, ""), [options, value]);
+	return {
+		isMobile,
+		dropdownId,
+		isOpen,
+		setIsOpen,
+		searchValue,
+		setSearchValue,
+		initListHeight,
+		setInitListHeight,
+		isSearchChanged,
+		setIsSearchChanged,
+		isSearchInputFocused,
+		setIsSearchInputFocused,
+		isScrollableList,
+		setIsScrollableList,
+		isFixedMaxHeight,
+		setIsFixedMaxHeight,
+		scrollTop,
+		setScrollTop,
+		scrollHeight,
+		setScrollHeight,
+		maxListContainerHeight,
+		setMaxListContainerHeight,
+		getListContainer: () => getListContainer(dropdownId),
+		getListContainerWrapper: () => getListContainerWrapper(dropdownId),
+		getParentNode: () => getParentNode(dropdownRef, isDoNotPullOutListOfMainContainer),
+		getPreparedOptionLabel: (text, postfix, description) => getPreparedOptionLabel(searchValue, text, isSearchable, postfix, description),
+		getSortedOptions: (data) => getSortedOptions(data, sortAlphabetical),
+		filteredGroups,
+		filteredItems,
+		filteredOptions,
+		selectedLabel,
+		postfixText: useMemo(() => selectedLabel && filteredOptions.find((option) => option.value === value)?.postfix || null, [
+			selectedLabel,
+			filteredOptions,
+			value
+		]),
+		dropdownRef,
+		dropdownListRef,
+		dropdownListWrapperRef,
+		dropdownFooterRef,
+		searchInputRef,
+		wrapperRef,
+		totalOptionsLength,
+		isSearchable,
+		valueToApply,
+		valueToApplyRef,
+		setValueToApply
+	};
+}
+//#endregion
+export { useDropdown as default };
+
+//# sourceMappingURL=useDropdown.js.map

package/dist/es/Atomic/FormElements/Dropdown/useDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdown.js","names":[],"sources":["../../../../../src/Atomic/FormElements/Dropdown/useDropdown.tsx"],"sourcesContent":["import type { IDropdownOption, IDropdownProps, IUseDropdown } from './Dropdown.interface';\nimport { useMemo, useRef, useState } from 'react'\nimport useIsMobile from '../../../Functions/useIsMobile';\nimport { getListContainer, getListContainerWrapper, getParentNode, getPreparedOptionLabel, getSortedOptions, getTotalOptions, moveOtherToEnd } from './_utils';\nimport { MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH } from './Dropdown';\n\nfunction useDropdown({ id, fieldKey, value, sortAlphabetical, withMobileLogic, options, minItemsForShowMobileSearch, isSearchable: isSearchableProp, isDoNotPullOutListOfMainContainer }: Partial<IDropdownProps> = {}): IUseDropdown {\n  const { isMobile: isMobileProp } = useIsMobile();\n  const isMobile = isMobileProp && withMobileLogic;\n\n  const [dropdownId] = useState(\n    (id || fieldKey || Math.random().toString(16).slice(2)).toString(),\n  );\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [valueToApply, setValueToApplyState] = useState<string | number | null>(null);\n  const valueToApplyRef = useRef<string | number | null>(null);\n  const setValueToApply = (value: string | number | null): void => {\n    valueToApplyRef.current = value;\n    setValueToApplyState(value);\n  }\n\n  const [searchValue, setSearchValue] = useState<string | null>();\n  const dropdownRef = useRef<Element | null>(null);\n  const dropdownListRef = useRef<Element | null>(null);\n  const dropdownFooterRef = useRef<Element | null>(null);\n  const dropdownListWrapperRef = useRef<Element | null>(null);\n  const searchInputRef = useRef<HTMLInputElement | Omit<HTMLInputElement, 'value'> | null>(null);\n  const wrapperRef = useRef<Element | null>(null);\n\n  const [initListHeight, setInitListHeight] = useState<number | null>(null);\n  const [isSearchChanged, setIsSearchChanged] = useState(false);\n  const [isSearchInputFocused, setIsSearchInputFocused] = useState(false);\n\n  const [isScrollableList, setIsScrollableList] = useState(false);\n  const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [scrollHeight, setScrollHeight] = useState(1);\n\n  const [maxListContainerHeight, setMaxListContainerHeight] = useState(0);\n\n  const totalOptionsLength = useMemo(() => options ? getTotalOptions(options) : 0, [options]);\n  const isSearchable = useMemo(() => {\n    return isMobile\n      ? totalOptionsLength\n      > (minItemsForShowMobileSearch || MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH)\n      : isSearchableProp;\n  }, [isMobile, isSearchableProp, totalOptionsLength, minItemsForShowMobileSearch, MIN_ITEMS_FOR_SHOW_MOBILE_SEARCH]);\n\n  const optionsWithOtherAtTheEnd: IDropdownOption[] = useMemo(() => moveOtherToEnd(options ?? []), [options]);\n\n  const filteredGroups = useMemo(() => optionsWithOtherAtTheEnd\n    .map((item: IDropdownOption) => ({\n      ...item,\n      items:\n        !isSearchable || !isSearchChanged\n          ? item?.items\n          : item.items\n            ?.slice()\n            .filter(\n              el =>\n                el?.label\n                  ?.toLowerCase()\n                  .includes(searchValue?.toString()?.toLowerCase() || '')\n                  || !el?.value\n                  || el?.value === '',\n            ),\n    }))\n    .filter(item => (item.items?.length ?? 0) > 0), [optionsWithOtherAtTheEnd, searchValue, isSearchable, isSearchChanged]);\n\n  const filteredItems = useMemo(() => optionsWithOtherAtTheEnd\n    .filter((item: IDropdownOption) => !item.items?.length)\n    .filter((item: IDropdownOption) => {\n      if (!isSearchable || !isSearchChanged) return true;\n\n      return (\n        item?.label?.toLowerCase().includes(searchValue?.toString()?.toLowerCase() || '')\n        || !item?.value\n        || item?.value === ''\n      );\n    }), [optionsWithOtherAtTheEnd, searchValue, isSearchable, isSearchChanged]);\n\n  const filteredOptions = useMemo(() => [...filteredItems, ...filteredGroups], [filteredItems, filteredGroups]);\n\n  const selectedLabel = useMemo(() => options?.find(el => el.value === value)?.label\n    ?? options?.reduce(\n      (acc, item) => {\n        if (!acc?.length) return item.items?.find(el => el.value === value)?.label ?? '';\n\n        return acc;\n      },\n      '',\n    ), [options, value]);\n\n  const postfixText = useMemo(() => (selectedLabel\n    && (filteredOptions.find((option: IDropdownOption) => option.value === value) as IDropdownOption)?.postfix)\n  || null, [selectedLabel, filteredOptions, value]);\n\n  return ({\n    isMobile,\n    dropdownId,\n    isOpen,\n    setIsOpen,\n    searchValue,\n    setSearchValue,\n    initListHeight,\n    setInitListHeight,\n    isSearchChanged,\n    setIsSearchChanged,\n    isSearchInputFocused,\n    setIsSearchInputFocused,\n    isScrollableList,\n    setIsScrollableList,\n    isFixedMaxHeight,\n    setIsFixedMaxHeight,\n    scrollTop,\n    setScrollTop,\n    scrollHeight,\n    setScrollHeight,\n    maxListContainerHeight,\n    setMaxListContainerHeight,\n\n    getListContainer: () => getListContainer(dropdownId),\n    getListContainerWrapper: () => getListContainerWrapper(dropdownId),\n    getParentNode: () => getParentNode(dropdownRef, isDoNotPullOutListOfMainContainer),\n    getPreparedOptionLabel: (text: string, postfix?: string, description?: string) => getPreparedOptionLabel(searchValue, text, isSearchable, postfix, description),\n    getSortedOptions: (data: IDropdownOption[]) => getSortedOptions(data, sortAlphabetical),\n\n    filteredGroups,\n    filteredItems,\n    filteredOptions,\n    selectedLabel,\n    postfixText,\n\n    dropdownRef,\n    dropdownListRef,\n    dropdownListWrapperRef,\n    dropdownFooterRef,\n    searchInputRef,\n    wrapperRef,\n\n    totalOptionsLength,\n    isSearchable,\n\n    valueToApply,\n    valueToApplyRef,\n    setValueToApply,\n  });\n}\n\nexport default useDropdown;\n"],"mappings":"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"}

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

@@ -0,0 +1,373 @@
+import '../../../styles/base.css';
+import { formatToOnlyASCIICodeText } from "../../../Functions/fieldValueFormatters.js";
+import Spinner from "../../Layout/Spinner/Spinner.js";
+import RadioInput from "../RadioInput/RadioInput.js";
+import useIsMobile from "../../../Functions/useIsMobile/useIsMobile.js";
+import { useDebounce } from "../../../Functions/useDebounce.js";
+import './DropdownLiveSearch.styles.css';/* empty css                        */
+import cn from "classnames";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown, ChevronUp, Code, X } from "react-feather";
+import { createPortal } from "react-dom";
+//#region src/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.tsx
+var RC = "dropdown-live-search";
+var DropdownLiveSearch = ({ label, value, error, disabled, onChange, placeholder, className, isSearchable, doRequest, isLoading, options, fieldKey, id, isListTop, attributesOfNativeInput, withMobileLogic, tabIndex, isNotValidateASCII = false, noOptionsText = "No options available", testId = "dropdown-live-search" }) => {
+	const [dropdownId] = useState(id || fieldKey || Math.random().toString(16).slice(2));
+	const [isOpen, setIsOpenState] = useState(false);
+	const [isValueDeleted, setIsValueDeleted] = useState(false);
+	const { isMobile: isMobileProp } = useIsMobile();
+	const isMobile = isMobileProp && withMobileLogic && window.screen.width <= 768;
+	const labelByValue = useMemo(() => {
+		return options?.find((item) => item.value === value)?.label ?? "";
+	}, [value, options]);
+	const [searchValue, setSV] = useState("");
+	const [isSearchValueChangedAfterOpen, setIsSearchValueChangedAfterOpen] = useState(false);
+	const dropdownLiveSearchRef = useRef(null);
+	const dropdownListBoxRef = useRef(null);
+	const dropdownListRef = useRef(null);
+	const dropdownListHeaderRef = useRef(null);
+	const searchInputRef = useRef(null);
+	const searchInputModalRef = useRef(null);
+	const searchValueRef = useRef(null);
+	const wrapperRef = useRef(null);
+	const [isFocusedByClick, setIsFocusedByClick] = useState(false);
+	const [isScrollableList, setIsScrollableList] = useState(null);
+	const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [scrollHeight, setScrollHeight] = useState(1);
+	const debouncedSearchTerm = useDebounce({
+		searchValue,
+		delay: 600
+	});
+	const doScrollCallback = useCallback((e) => {
+		if (doRequest && typeof doRequest === "function") {
+			const target = e?.target;
+			if (Math.round(target.clientHeight + target.scrollTop) === target.scrollHeight) doRequest(searchValueRef.current ?? "", true);
+		}
+	}, [options]);
+	const setSearchValue = (val, isChanged = true) => {
+		if (isChanged) setIsSearchValueChangedAfterOpen(true);
+		setSV(val);
+		searchValueRef.current = val;
+	};
+	const setIsOpen = (v) => {
+		setIsOpenState(v);
+		setSearchValue("", false);
+		if (!v) setIsSearchValueChangedAfterOpen(false);
+	};
+	const getParentNode = () => {
+		return document.querySelector("div#root") ?? document.querySelector("div#app") ?? document.querySelector("div#storybook-root");
+	};
+	const getListContainer = () => {
+		return document.getElementById(dropdownId?.toString());
+	};
+	const onWrapperClick = (e) => {
+		if (e.target === wrapperRef?.current) {
+			e.stopPropagation();
+			e.preventDefault();
+			setIsOpen(false);
+		}
+	};
+	const onSearchableInputFocus = (e) => {
+		if (!isOpen) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
+	const handleClickOutside = (event) => {
+		if (dropdownLiveSearchRef.current && !dropdownLiveSearchRef.current.contains(event.target) && (!getListContainer() || !getListContainer()?.contains(event.target))) setIsOpen(false);
+	};
+	const closeListViaEsc = (e) => {
+		if ([27].includes(e.keyCode)) setIsOpen(false);
+	};
+	const closeList = isOpen ? handleClickOutside : () => {};
+	const onInputClick = (e) => {
+		if (!isOpen) setIsOpen(true);
+		if (isMobile && withMobileLogic) {
+			e.preventDefault();
+			e.stopPropagation();
+			if (e.target) e.target?.blur();
+		} else if (e.target) e.target?.select();
+	};
+	const onInputChange = (e) => {
+		let inputValue = e.target?.value;
+		if (!isNotValidateASCII) inputValue = formatToOnlyASCIICodeText(inputValue);
+		setSearchValue(inputValue);
+		if ((searchValue || !isSearchValueChangedAfterOpen) && !e.target.value) {
+			onChange?.("");
+			setSearchValue("");
+			setIsValueDeleted(true);
+		} else setIsValueDeleted(false);
+	};
+	const highlightedText = (text, postfix) => {
+		if (!isSearchable) return text;
+		else {
+			const preparedSearchValue = isSearchValueChangedAfterOpen || isMobile && withMobileLogic ? searchValue : labelByValue;
+			const prepare = (text) => text?.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+			text = text.replace(/["&<>]/g, (a) => {
+				return {
+					"\"": "&quot;",
+					"&": "&amp;",
+					"<": "&lt;",
+					">": "&gt;"
+				}[a] ?? "";
+			});
+			return (preparedSearchValue ? text?.replace(new RegExp(prepare(preparedSearchValue), "i"), (match) => `<span class="bg--yellow">${match}</span>`) : text) + (postfix ? `<span class="dropdown__list-item-postfix">${postfix}</span>` : "");
+		}
+	};
+	const getMarkupForElement = (item, index, optTestId) => {
+		const lowerLabel = item.label.toLowerCase();
+		const lowerSearchValue = searchValue?.toLowerCase();
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-testid": `${testId}-${optTestId || index}-option`,
+			onClick: () => {
+				onChange?.(item.value);
+				setIsOpen(false);
+			},
+			className: cn(`${RC}__list-item`, {
+				[`${RC}__list-item_active`]: item.value === value,
+				[`${RC}__list-item_disabled`]: item.disabled
+			}, item.className),
+			children: [
+				!isMobile || isMobile && !withMobileLogic && /* @__PURE__ */ jsx("span", {
+					className: cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: lowerLabel === lowerSearchValue }),
+					children: /* @__PURE__ */ jsx(Check, {})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					title: item.label,
+					className: item.labelClassName || "",
+					dangerouslySetInnerHTML: { __html: highlightedText(item.label, item.postfix) }
+				}),
+				isMobile ? item?.customMobileIcon ?? /* @__PURE__ */ jsx(RadioInput, {
+					value: item.value,
+					checked: value?.toString()
+				}) : ""
+			]
+		}, item.value?.toString()?.replace(/ /g, "_"));
+	};
+	const getListMarkUp = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__container-wrapper`),
+			ref: wrapperRef,
+			onClick: isMobile ? onWrapperClick : () => {},
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__list-wrapper`, {
+					[`${RC}__list-wrapper--fixed-height`]: isFixedMaxHeight,
+					[`${RC}__list-wrapper--with-bottom-shadow`]: isScrollableList && isMobile,
+					[`${RC}__list-wrapper--with-bottom-shadow-hidden`]: scrollTop === scrollHeight
+				}),
+				children: /* @__PURE__ */ jsxs("div", {
+					id: "dropdown-live-search-list",
+					className: cn(`${RC}__container`, { [`${RC}__list-top`]: isListTop }),
+					ref: dropdownListBoxRef,
+					children: [
+						isMobile && /* @__PURE__ */ jsxs("div", {
+							ref: dropdownListHeaderRef,
+							className: cn(`${RC}__list-header`, {
+								[`${RC}__list-header-with-shadow`]: isScrollableList && isMobile,
+								[`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0
+							}),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: cn(`${RC}__list-header-row`),
+								children: [/* @__PURE__ */ jsx("div", {
+									className: cn(`${RC}__list-label`),
+									children: label
+								}), /* @__PURE__ */ jsx("div", {
+									className: cn(`${RC}__list-close-icon`),
+									onClick: () => setIsOpen(false),
+									children: /* @__PURE__ */ jsx(X, { onClick: () => setIsOpen(false) })
+								})]
+							}), isSearchable && /* @__PURE__ */ jsx("input", {
+								ref: searchInputModalRef,
+								className: `${RC}__input`,
+								value: isOpen ? searchValue : labelByValue,
+								onChange: onInputChange,
+								placeholder,
+								onFocus: onSearchableInputFocus,
+								tabIndex: -1,
+								...attributesOfNativeInput
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: cn(`${RC}__list`, { disabled: isLoading }),
+							ref: dropdownListRef,
+							children: [options?.map((option) => getMarkupForElement(option)), !options?.length && /* @__PURE__ */ jsx("div", {
+								className: `${RC}__list-item ${RC}__list-item--no-options`,
+								children: noOptionsText
+							})]
+						}),
+						isLoading && isOpen && /* @__PURE__ */ jsx(Spinner, { size: (options?.length ?? 0) <= 3 ? "small" : null })
+					]
+				})
+			})
+		});
+	};
+	const initListContainer = () => {
+		const dropdownList = document.createElement("div");
+		dropdownList.setAttribute("id", dropdownId?.toString());
+		dropdownList.classList.add("dropdown__container");
+		if (isMobile) dropdownList.addEventListener("click", (e) => {
+			if (e.target.id === dropdownId) setIsOpen(false);
+		});
+		try {
+			getListContainer()?.remove();
+		} finally {
+			if (isMobile) {
+				try {
+					document.getElementById(`mlw-${dropdownId}`)?.remove();
+				} catch {}
+				const dropdownMobileListWrapper = document.createElement("div");
+				dropdownMobileListWrapper.classList.add("dropdown-live-search-mobile");
+				dropdownMobileListWrapper.setAttribute("id", `mlw-${dropdownId}`);
+				dropdownMobileListWrapper?.append(dropdownList);
+				getParentNode()?.append(dropdownMobileListWrapper);
+			} else getParentNode()?.append(dropdownList);
+		}
+	};
+	const renderListContainer = () => {
+		const lc = getListContainer();
+		if (!lc) return null;
+		return createPortal(getListMarkUp(), lc);
+	};
+	useEffect(() => {
+		document.addEventListener("click", handleClickOutside, true);
+		return () => document.removeEventListener("click", handleClickOutside, true);
+	}, []);
+	useEffect(() => {
+		if (options?.length === 1 && searchValue === options[0].label) {
+			setSearchValue(options[0].label);
+			onChange?.(options[0].value);
+		}
+	}, [options]);
+	useEffect(() => {
+		if (isSearchable && (debouncedSearchTerm || isValueDeleted)) {
+			doRequest?.(debouncedSearchTerm);
+			if (isValueDeleted) setIsValueDeleted(false);
+		}
+	}, [debouncedSearchTerm, isValueDeleted]);
+	useEffect(() => {
+		if (isMobile && withMobileLogic) initListContainer();
+	}, [isMobile, withMobileLogic]);
+	useEffect(() => {
+		if (isOpen && isMobile && dropdownListRef?.current && !searchValue) {
+			setIsScrollableList(dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
+			setIsFixedMaxHeight(isScrollableList || dropdownListRef?.current?.scrollHeight > dropdownListRef?.current?.clientHeight);
+		}
+	}, [
+		isOpen,
+		isMobile,
+		isScrollableList,
+		dropdownListRef?.current,
+		dropdownListRef?.current?.scrollHeight,
+		dropdownListRef?.current?.clientHeight
+	]);
+	useLayoutEffect(() => {
+		const list = document.getElementById("dropdown-live-search-list");
+		if ((list || isOpen) && (!withMobileLogic || !isMobile)) {
+			const dropdownWidth = dropdownLiveSearchRef?.current?.clientWidth;
+			if (list) list.style.minWidth = `${dropdownWidth}px`;
+		}
+	}, [
+		dropdownLiveSearchRef,
+		isOpen,
+		withMobileLogic
+	]);
+	useEffect(() => {
+		if (!isOpen) {
+			setIsFocusedByClick(false);
+			if (withMobileLogic && isMobile) setSearchValue("");
+		}
+		if (isOpen && dropdownListRef && dropdownListRef.current) {
+			if (isMobile && withMobileLogic) {
+				doRequest?.("").then(() => {
+					setTimeout(() => {
+						if (dropdownListRef.current && dropdownListBoxRef?.current && dropdownListHeaderRef?.current) dropdownListRef.current.style.maxHeight = `${dropdownListBoxRef?.current?.getBoundingClientRect()?.height - dropdownListHeaderRef?.current?.getBoundingClientRect()?.height}px`;
+					}, 1);
+				});
+				searchInputModalRef?.current?.focus();
+			} else if (!isMobile) doRequest?.("");
+			dropdownListRef.current.addEventListener("scroll", doScrollCallback);
+		}
+		return () => {
+			removeEventListener("scroll", doScrollCallback);
+		};
+	}, [isOpen, dropdownListRef]);
+	useLayoutEffect(() => {
+		if (!isMobile) {
+			window.addEventListener("mousewheel", closeList);
+			window.addEventListener("scroll", closeList);
+			window.addEventListener("touchmove", closeList);
+		} else {
+			window.removeEventListener("mousewheel", closeList);
+			window.removeEventListener("scroll", closeList);
+			window.removeEventListener("touchmove", closeList);
+		}
+		getListContainer()?.addEventListener("click", closeList);
+		window.addEventListener("keyup", closeListViaEsc);
+		return () => {
+			window.removeEventListener("mousewheel", closeList);
+			window.removeEventListener("scroll", closeList);
+			window.removeEventListener("touchmove", closeList);
+			window.removeEventListener("keyup", closeListViaEsc);
+			getListContainer()?.removeEventListener("click", closeList);
+		};
+	}, [getListContainer]);
+	useEffect(() => {
+		const setScrollTopValue = (e) => {
+			setScrollTop(Number.parseInt(e.target?.scrollTop?.toString(), 10));
+		};
+		if (isOpen && isMobile && dropdownListRef?.current) dropdownListRef?.current?.addEventListener("scroll", setScrollTopValue);
+		return () => {
+			dropdownListRef?.current?.removeEventListener("scroll", setScrollTopValue);
+		};
+	}, [
+		isOpen,
+		isMobile,
+		dropdownListRef?.current
+	]);
+	useEffect(() => {
+		if (dropdownListRef?.current) setScrollHeight(Number.parseInt((dropdownListRef?.current?.scrollHeight - dropdownListRef?.current?.clientHeight)?.toString(), 10));
+	}, [scrollTop, dropdownListRef?.current]);
+	if (!options) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, className, {
+			disabled,
+			[`${RC}-mobile`]: isMobile,
+			[`${RC}--focused`]: isOpen
+		}),
+		ref: dropdownLiveSearchRef,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-testid": testId,
+			className: `${RC}__trigger input__wrap ${isOpen ? "input__wrap--focus" : ""} ${!value ? "placeholder" : ""} ${error ? "error" : ""}`,
+			onClick: () => !isSearchable ? setIsOpen(!isOpen) : null,
+			onMouseDown: () => setIsFocusedByClick(true),
+			onFocus: () => !isFocusedByClick ? setIsOpen(true) : null,
+			tabIndex,
+			children: [isSearchable ? /* @__PURE__ */ jsx("input", {
+				ref: searchInputRef,
+				className: `${RC}__input`,
+				value: isOpen ? isMobile && withMobileLogic || !isSearchValueChangedAfterOpen ? labelByValue : searchValue : labelByValue,
+				onChange: onInputChange,
+				placeholder,
+				onFocus: onSearchableInputFocus,
+				onClick: onInputClick,
+				tabIndex: -1,
+				...attributesOfNativeInput
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text",
+				children: labelByValue || placeholder
+			}), /* @__PURE__ */ jsx("span", {
+				className: cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen }),
+				onClick: () => setIsOpen(!isOpen),
+				children: isMobile ? /* @__PURE__ */ jsx(Code, { className: "mobile-icon" }) : isOpen ? /* @__PURE__ */ jsx(ChevronUp, {}) : /* @__PURE__ */ jsx(ChevronDown, {})
+			})]
+		}), isOpen && (isMobile && withMobileLogic ? renderListContainer() : getListMarkUp())]
+	});
+};
+//#endregion
+export { DropdownLiveSearch as default };
+
+//# sourceMappingURL=DropdownLiveSearch.js.map

package/dist/es/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownLiveSearch.js","names":[],"sources":["../../../../../src/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.tsx"],"sourcesContent":["/* eslint-disable react-web-api/no-leaked-event-listener */\n/* eslint-disable react-web-api/no-leaked-timeout */\n/* eslint-disable react-dom/no-dangerously-set-innerhtml */\nimport type {\n  ChangeEvent,\n  FocusEventHandler,\n  LegacyRef,\n  MouseEventHandler,\n  ReactNode,\n} from 'react';\n\nimport type { IDropdownLiveSearchOption, IDropdownLiveSearchProps } from './DropdownLiveSearch.interface';\nimport cn from 'classnames';\nimport React, {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Check, ChevronDown, ChevronUp, Code, X } from 'react-feather';\nimport { formatToOnlyASCIICodeText } from '../../../Functions/fieldValueFormatters';\nimport { useDebounce } from '../../../Functions/useDebounce';\nimport useIsMobile from '../../../Functions/useIsMobile/useIsMobile';\nimport Spinner from '../../Layout/Spinner/Spinner';\n\nimport RadioInput from '../RadioInput/RadioInput';\nimport './DropdownLiveSearch.scss';\n\nconst RC = 'dropdown-live-search';\n\nconst DropdownLiveSearch: React.FC<IDropdownLiveSearchProps> = ({\n  label,\n  value,\n  error,\n  disabled,\n  onChange,\n  placeholder,\n  className,\n  isSearchable,\n  doRequest,\n  isLoading,\n  options,\n  fieldKey,\n  id,\n  isListTop,\n  attributesOfNativeInput,\n  withMobileLogic,\n  tabIndex,\n  isNotValidateASCII = false,\n  noOptionsText = 'No options available',\n  testId = 'dropdown-live-search',\n}) => {\n  const [dropdownId] = useState(\n    id || fieldKey || Math.random().toString(16).slice(2),\n  );\n  const [isOpen, setIsOpenState] = useState(false);\n  const [isValueDeleted, setIsValueDeleted] = useState(false);\n  const { isMobile: isMobileProp } = useIsMobile();\n  const isMobile\n    = isMobileProp && withMobileLogic && window.screen.width <= 768;\n\n  const labelByValue = useMemo(() => {\n    return options?.find(item => item.value === value)?.label ?? '';\n  }, [value, options]);\n\n  const [searchValue, setSV] = useState<string>('');\n  const [isSearchValueChangedAfterOpen, setIsSearchValueChangedAfterOpen]\n    = useState(false);\n\n  const dropdownLiveSearchRef = useRef<HTMLElement | null>(null);\n  const dropdownListBoxRef = useRef<HTMLElement | null>(null);\n  const dropdownListRef = useRef<HTMLElement | null>(null);\n  const dropdownListHeaderRef = useRef<HTMLElement | null>(null);\n  const searchInputRef = useRef<HTMLElement | null>(null);\n  const searchInputModalRef = useRef<HTMLElement | null>(null);\n  const searchValueRef = useRef<string | null>(null);\n  const wrapperRef = useRef<HTMLElement | null>(null);\n\n  const [isFocusedByClick, setIsFocusedByClick] = useState(false);\n\n  const [isScrollableList, setIsScrollableList] = useState<boolean | null>(null);\n  const [isFixedMaxHeight, setIsFixedMaxHeight] = useState(false);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [scrollHeight, setScrollHeight] = useState(1);\n\n  const debouncedSearchTerm = useDebounce({ searchValue, delay: 600 });\n\n  const doScrollCallback: EventListener = useCallback(\n    (e) => {\n      if (doRequest && typeof doRequest === 'function') {\n        const target = e?.target as Element;\n\n        if (\n          Math.round(target.clientHeight + target.scrollTop)\n          === target.scrollHeight\n        ) {\n          doRequest(searchValueRef.current ?? '', true);\n        }\n      }\n    },\n    [options],\n  );\n\n  const setSearchValue = (val: string, isChanged = true): void => {\n    if (isChanged) setIsSearchValueChangedAfterOpen(true);\n    setSV(val);\n    searchValueRef.current = val;\n  };\n\n  const setIsOpen = (v: boolean): void => {\n    setIsOpenState(v);\n    setSearchValue('', false);\n    if (!v) setIsSearchValueChangedAfterOpen(false);\n  };\n\n  const getParentNode = (): Element | null => {\n    return (\n      document.querySelector('div#root')\n      ?? document.querySelector('div#app')\n      ?? document.querySelector('div#storybook-root')\n    );\n  };\n\n  const getListContainer = (): Element | null => {\n    return document.getElementById(dropdownId?.toString());\n  };\n\n  const onWrapperClick: MouseEventHandler<Element> = (e): void => {\n    if (e.target === wrapperRef?.current) {\n      e.stopPropagation();\n      e.preventDefault();\n\n      setIsOpen(false);\n    }\n  };\n\n  const onSearchableInputFocus: FocusEventHandler<HTMLInputElement> = (e): void => {\n    if (!isOpen) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleClickOutside = (event: Event | MouseEvent): void => {\n    if (\n      dropdownLiveSearchRef.current\n      && !dropdownLiveSearchRef.current.contains(event.target as Node)\n      && (!getListContainer() || !getListContainer()?.contains(event.target as Node))\n    ) {\n      setIsOpen(false);\n    }\n  };\n\n  const closeListViaEsc = (e: KeyboardEvent): void => {\n    if ([27].includes(e.keyCode)) setIsOpen(false);\n  };\n\n  const closeList = isOpen ? handleClickOutside : () => {};\n\n  const onInputClick: MouseEventHandler<HTMLInputElement> = (e): void => {\n    if (!isOpen) setIsOpen(true);\n\n    if (isMobile && withMobileLogic) {\n      e.preventDefault();\n      e.stopPropagation();\n      if (e.target) (e.target as HTMLInputElement)?.blur();\n    }\n    else {\n      if (e.target) (e.target as HTMLInputElement)?.select();\n    }\n  };\n\n  const onInputChange = (e: ChangeEvent): void => {\n    let inputValue = (e.target as HTMLInputElement)?.value;\n    if (!isNotValidateASCII)\n      inputValue = formatToOnlyASCIICodeText(inputValue);\n    setSearchValue(inputValue);\n\n    if ((searchValue || !isSearchValueChangedAfterOpen) && !(e.target as HTMLInputElement).value) {\n      onChange?.('');\n      setSearchValue('');\n      setIsValueDeleted(true);\n    }\n    else {\n      setIsValueDeleted(false);\n    }\n  };\n\n  const highlightedText = (text: string, postfix?: string): string => {\n    if (!isSearchable) {\n      return text;\n    }\n    else {\n      const preparedSearchValue\n        = isSearchValueChangedAfterOpen || (isMobile && withMobileLogic)\n          ? searchValue\n          : labelByValue;\n\n      const prepare = (text: string): string => text?.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&');\n      text = text.replace(/[\"&<>]/g, (a) => {\n        return { '\"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a] ?? '';\n      });\n\n      const main = preparedSearchValue\n        ? text?.replace(\n\n          new RegExp(prepare(preparedSearchValue), 'i'),\n          match => `<span class=\"bg--yellow\">${match}</span>`,\n        )\n        : text;\n      const postfixPart = postfix\n        ? `<span class=\"dropdown__list-item-postfix\">${postfix}</span>`\n        : '';\n\n      return main + postfixPart;\n    }\n  };\n\n  const getMarkupForElement = (item: IDropdownLiveSearchOption, index?: number, optTestId?: string): ReactNode => {\n    const lowerLabel = item.label.toLowerCase();\n    const lowerSearchValue = searchValue?.toLowerCase();\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={`${testId}-${optTestId || index}-option`}\n        key={item.value?.toString()?.replace(/ /g, '_')}\n        onClick={() => {\n          onChange?.(item.value);\n          setIsOpen(false);\n        }}\n        className={cn(\n          `${RC}__list-item`,\n          {\n            [`${RC}__list-item_active`]: item.value === value,\n            [`${RC}__list-item_disabled`]: item.disabled,\n          },\n          item.className,\n        )}\n      >\n        {!isMobile\n          || (isMobile && !withMobileLogic && (\n            <span\n              className={cn(`${RC}__active-icon`, {\n                [`${RC}__active-icon_active`]: lowerLabel === lowerSearchValue,\n              })}\n            >\n              <Check />\n            </span>\n          ))}\n\n        <p\n          title={item.label}\n          className={item.labelClassName || ''}\n          dangerouslySetInnerHTML={{\n            __html: highlightedText(item.label, item.postfix),\n          }}\n        />\n        {isMobile\n          ? item?.customMobileIcon ?? (\n            <RadioInput value={item.value} checked={value?.toString()} />\n          )\n          : ''}\n      </button>\n    );\n  };\n\n  const getListMarkUp = (): ReactNode => {\n    return (\n      <div\n        className={cn(`${RC}__container-wrapper`)}\n        ref={wrapperRef as LegacyRef<HTMLDivElement>}\n        onClick={isMobile ? onWrapperClick : () => {}}\n      >\n        <div\n          className={cn(`${RC}__list-wrapper`, {\n            [`${RC}__list-wrapper--fixed-height`]: isFixedMaxHeight,\n            [`${RC}__list-wrapper--with-bottom-shadow`]:\n              isScrollableList && isMobile,\n            [`${RC}__list-wrapper--with-bottom-shadow-hidden`]:\n              scrollTop === scrollHeight,\n          })}\n        >\n          <div\n            id=\"dropdown-live-search-list\"\n            className={cn(`${RC}__container`, {\n              [`${RC}__list-top`]: isListTop,\n            })}\n            ref={dropdownListBoxRef as LegacyRef<HTMLDivElement>}\n          >\n            {isMobile && (\n              <div\n                ref={dropdownListHeaderRef as LegacyRef<HTMLDivElement>}\n                className={cn(`${RC}__list-header`, {\n                  [`${RC}__list-header-with-shadow`]:\n                    isScrollableList && isMobile,\n                  [`${RC}__list-header-with-shadow-hidden`]: scrollTop === 0,\n                })}\n              >\n                <div className={cn(`${RC}__list-header-row`)}>\n                  <div className={cn(`${RC}__list-label`)}>{label}</div>\n                  <div\n                    className={cn(`${RC}__list-close-icon`)}\n                    onClick={() => setIsOpen(false)}\n                  >\n                    <X onClick={() => setIsOpen(false)} />\n                  </div>\n                </div>\n                {isSearchable && (\n                  <input\n                    ref={searchInputModalRef as LegacyRef<HTMLInputElement>}\n                    className={`${RC}__input`}\n                    value={isOpen ? searchValue : labelByValue}\n                    onChange={onInputChange}\n                    placeholder={placeholder}\n                    onFocus={onSearchableInputFocus}\n                    tabIndex={-1}\n                    {...attributesOfNativeInput}\n                  />\n                )}\n              </div>\n            )}\n            <div\n              className={cn(`${RC}__list`, { disabled: isLoading })}\n              ref={dropdownListRef as LegacyRef<HTMLDivElement>}\n            >\n              {options?.map(option => getMarkupForElement(option))}\n\n              {!options?.length && (\n                <div\n                  className={`${RC}__list-item ${RC}__list-item--no-options`}\n                >\n                  {noOptionsText}\n                </div>\n              )}\n            </div>\n\n            {isLoading && isOpen && (\n              <Spinner size={(options?.length ?? 0) <= 3 ? 'small' : null} />\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  };\n\n  const initListContainer = (): void => {\n    const dropdownList = document.createElement('div');\n\n    dropdownList.setAttribute('id', dropdownId?.toString());\n    dropdownList.classList.add('dropdown__container');\n\n    if (isMobile) {\n      dropdownList.addEventListener('click', (e) => {\n        if ((e.target as HTMLElement).id === dropdownId) setIsOpen(false);\n      });\n    }\n\n    try {\n      getListContainer()?.remove();\n    }\n    finally {\n      if (isMobile) {\n        try {\n          document.getElementById(`mlw-${dropdownId}`)?.remove();\n        }\n        catch {}\n\n        const dropdownMobileListWrapper = document.createElement('div');\n        dropdownMobileListWrapper.classList.add('dropdown-live-search-mobile');\n        dropdownMobileListWrapper.setAttribute('id', `mlw-${dropdownId}`);\n        dropdownMobileListWrapper?.append(dropdownList);\n        getParentNode()?.append(dropdownMobileListWrapper);\n      }\n      else {\n        getParentNode()?.append(dropdownList);\n      }\n    }\n  };\n\n  const renderListContainer = (): React.ReactPortal | null => {\n    const lc = getListContainer();\n\n    if (!lc) return null;\n\n    return createPortal(getListMarkUp(), lc);\n  };\n\n  useEffect(() => {\n    document.addEventListener('click', handleClickOutside, true);\n    return () =>\n      document.removeEventListener('click', handleClickOutside, true);\n  }, []);\n\n  useEffect(() => {\n    if (options?.length === 1 && searchValue === options[0].label) {\n      setSearchValue(options[0].label);\n      onChange?.(options[0].value);\n    }\n  }, [options]);\n\n  useEffect(() => {\n    if (isSearchable && (debouncedSearchTerm || isValueDeleted)) {\n      doRequest?.(debouncedSearchTerm);\n\n      if (isValueDeleted) setIsValueDeleted(false);\n    }\n  }, [debouncedSearchTerm, isValueDeleted]);\n\n  useEffect(() => {\n    if (isMobile && withMobileLogic) {\n      initListContainer();\n    }\n  }, [isMobile, withMobileLogic]);\n\n  useEffect(() => {\n    if (isOpen && isMobile && dropdownListRef?.current && !searchValue) {\n      setIsScrollableList(\n        dropdownListRef?.current?.scrollHeight\n        > dropdownListRef?.current?.clientHeight,\n      );\n      setIsFixedMaxHeight(\n        isScrollableList\n        || dropdownListRef?.current?.scrollHeight\n        > dropdownListRef?.current?.clientHeight,\n      );\n    }\n  }, [\n    isOpen,\n    isMobile,\n    isScrollableList,\n    dropdownListRef?.current,\n    dropdownListRef?.current?.scrollHeight,\n    dropdownListRef?.current?.clientHeight,\n  ]);\n\n  useLayoutEffect(() => {\n    const list = document.getElementById('dropdown-live-search-list');\n\n    if ((list || isOpen) && (!withMobileLogic || !isMobile)) {\n      const dropdownWidth = dropdownLiveSearchRef?.current?.clientWidth;\n      if (list) list.style.minWidth = `${dropdownWidth}px`;\n    }\n  }, [dropdownLiveSearchRef, isOpen, withMobileLogic]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setIsFocusedByClick(false);\n      if (withMobileLogic && isMobile) setSearchValue('');\n    }\n\n    if (isOpen && dropdownListRef && dropdownListRef.current) {\n      if (isMobile && withMobileLogic) {\n        doRequest?.('').then(() => {\n          setTimeout(() => {\n            if (dropdownListRef.current && dropdownListBoxRef?.current && dropdownListHeaderRef?.current) {\n              dropdownListRef.current.style.maxHeight = `${dropdownListBoxRef?.current?.getBoundingClientRect()?.height\n              - dropdownListHeaderRef?.current?.getBoundingClientRect()?.height\n              }px`;\n            }\n          }, 1);\n        });\n        searchInputModalRef?.current?.focus();\n      }\n      else if (!isMobile) {\n        doRequest?.('');\n      }\n      dropdownListRef.current.addEventListener('scroll', doScrollCallback);\n    }\n    return () => {\n      removeEventListener('scroll', doScrollCallback);\n    };\n  }, [isOpen, dropdownListRef]);\n\n  useLayoutEffect(() => {\n    if (!isMobile) {\n      window.addEventListener('mousewheel', closeList);\n      window.addEventListener('scroll', closeList);\n      window.addEventListener('touchmove', closeList);\n    }\n    else {\n      window.removeEventListener('mousewheel', closeList);\n      window.removeEventListener('scroll', closeList);\n      window.removeEventListener('touchmove', closeList);\n    }\n\n    getListContainer()?.addEventListener('click', closeList);\n    window.addEventListener('keyup', closeListViaEsc);\n\n    return () => {\n      window.removeEventListener('mousewheel', closeList);\n      window.removeEventListener('scroll', closeList);\n      window.removeEventListener('touchmove', closeList);\n      window.removeEventListener('keyup', closeListViaEsc);\n      getListContainer()?.removeEventListener('click', closeList);\n    };\n  }, [getListContainer]);\n\n  useEffect(() => {\n    const setScrollTopValue = (e: Event | MouseEvent): void => {\n      setScrollTop(Number.parseInt((e.target as HTMLElement)?.scrollTop?.toString(), 10));\n    };\n\n    if (isOpen && isMobile && dropdownListRef?.current) {\n      dropdownListRef?.current?.addEventListener('scroll', setScrollTopValue);\n    }\n\n    return () => {\n      dropdownListRef?.current?.removeEventListener(\n        'scroll',\n        setScrollTopValue,\n      );\n    };\n  }, [isOpen, isMobile, dropdownListRef?.current]);\n  useEffect(() => {\n    if (dropdownListRef?.current) {\n      setScrollHeight(\n        Number.parseInt(\n          (dropdownListRef?.current?.scrollHeight\n            - dropdownListRef?.current?.clientHeight)?.toString(),\n          10,\n        ),\n      );\n    }\n  }, [scrollTop, dropdownListRef?.current]);\n\n  if (!options) return null;\n\n  return (\n    <div\n      className={cn(RC, className, {\n        disabled,\n        [`${RC}-mobile`]: isMobile,\n        [`${RC}--focused`]: isOpen,\n      })}\n      ref={dropdownLiveSearchRef as LegacyRef<HTMLDivElement>}\n    >\n      <button\n        type=\"button\"\n        data-testid={testId}\n        className={`${RC}__trigger input__wrap ${isOpen ? 'input__wrap--focus' : ''} ${!value ? 'placeholder' : ''} ${\n          error ? 'error' : ''\n        }`}\n        onClick={() => (!isSearchable ? setIsOpen(!isOpen) : null)}\n        onMouseDown={() => setIsFocusedByClick(true)}\n        onFocus={() => (!isFocusedByClick ? setIsOpen(true) : null)}\n        tabIndex={tabIndex}\n      >\n        {isSearchable\n          ? (\n              <input\n                ref={searchInputRef as LegacyRef<HTMLInputElement>}\n                className={`${RC}__input`}\n                value={\n                  isOpen\n                    ? (isMobile && withMobileLogic)\n                    || !isSearchValueChangedAfterOpen\n                        ? labelByValue\n                        : searchValue\n                    : labelByValue\n                }\n                onChange={onInputChange}\n                placeholder={placeholder}\n                onFocus={onSearchableInputFocus}\n                onClick={onInputClick}\n                tabIndex={-1}\n                {...attributesOfNativeInput}\n              />\n            )\n          : (\n              <span className=\"text\">{labelByValue || placeholder}</span>\n            )}\n        <span\n          className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}\n          onClick={() => setIsOpen(!isOpen)}\n        >\n          {isMobile\n            ? (\n                <Code className=\"mobile-icon\" />\n              )\n            : isOpen\n              ? (\n                  <ChevronUp />\n                )\n              : (\n                  <ChevronDown />\n                )}\n        </span>\n      </button>\n      {isOpen\n        && (isMobile && withMobileLogic ? renderListContainer() : getListMarkUp())}\n    </div>\n  );\n};\n\nexport default DropdownLiveSearch;\n"],"mappings":"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"}