intelicoreact 2.0.18 → 2.0.19

package/dist/es/Molecular/InputAddress/InputAddress.styles.css

@@ -0,0 +1,353 @@
+/* COLORS*/
+/*GRID*/
+/*FONTS*/
+/*Z-INDEX*/
+/*OTHER*/
+/* THEME COLORS */
+/* COLORS */
+/* GRID */
+/* FONTS */
+:export {
+  primaryColor: #3f51b5;
+  secondaryColor: #f50057;
+  successColor: #4caf50;
+  warningColor: #ff9800;
+  errorColor: #f44336;
+  infoColor: #2196f3;
+  backgroundColor: #ffffff;
+  textColor: #212121;
+  textSecondaryColor: #757575;
+}
+
+.input-address {
+  position: relative;
+  width: 100%;
+}
+.input-address--error .input__wrap {
+  border-color: #fa564c !important;
+}
+.input-address__clear-query {
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  display: flex;
+  visibility: hidden;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.input-address__alert {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: flex;
+  visibility: hidden;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.input-address__alert--visible {
+  visibility: visible;
+}
+.input-address__alert svg {
+  width: 16px;
+  height: 16px;
+  color: #fa564c;
+}
+.input-address__input-wrapper:hover .input-address__clear-query, .input-address__clear-query--input-focused {
+  visibility: visible;
+}
+.input-address__list {
+  position: absolute;
+  z-index: 999;
+  overflow-y: auto;
+  box-sizing: border-box;
+  width: 100%;
+  max-height: 100px;
+  margin-top: 8px;
+  border: 1px solid #e2e5ec;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.input-address__list--loader, .input-address__list--no-items {
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px 8px;
+}
+.input-address__list--loader {
+  opacity: 0.5;
+}
+.input-address__list--no-items {
+  opacity: 0.8;
+}
+.input-address__list--item {
+  position: relative;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+.input-address__list--item:hover, .input-address__list--item-hightlighted {
+  background: #f0f1f4;
+}
+
+@media (max-width: 768px) {
+  .input-address__list {
+    position: relative;
+    z-index: 1;
+    overflow-y: auto;
+    box-sizing: border-box;
+    max-height: 100%;
+    margin: 0;
+    padding: 0 16px 40px;
+    border: unset;
+    border-radius: unset;
+    background-color: unset;
+  }
+  .input-address__list--no-items {
+    font-family: Sarabun;
+    font-size: 16px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 24px;
+    letter-spacing: 0.2px;
+    color: #757f8c;
+  }
+  .input-address__list--item {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    gap: 16px;
+    padding: 10px 8px;
+    font-family: Sarabun;
+    font-size: 16px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 24px; /* 150% */
+    letter-spacing: 0.2px;
+    color: var(--Black-black, #171d33);
+    border-radius: 6px;
+  }
+  .input-address__list--item:hover {
+    background: none;
+  }
+  .input-address__list--item:focus {
+    background: #f0f1f4;
+  }
+  .input-address__list--item-custom {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+    padding-right: 32px;
+    font-family: Sarabun;
+    font-size: 14px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    border-bottom: 1px solid rgba(58, 72, 122, 0.15);
+    border-radius: 0;
+  }
+  .input-address__list--item-custom svg {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    width: 16px;
+    height: 16px;
+    color: #a0a4b0;
+    transform: translateY(-50%);
+  }
+  .input-address__list--item-custom span {
+    font-family: Sarabun;
+    font-size: 12px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #757f8c;
+  }
+  .input-address__list--with-bottom-shadow::after {
+    position: absolute;
+    z-index: 6;
+    bottom: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+    transform: rotate(180deg);
+  }
+  .input-address__list--with-bottom-shadow-hidden::after {
+    opacity: 0;
+  }
+  .input-address__list-overlay {
+    position: fixed;
+    z-index: 999;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100dvw;
+    height: 100dvh;
+    max-height: 100dvh;
+    background: rgba(23, 29, 51, 0.5);
+    animation-name: fadeIn;
+    animation-duration: 0.25s;
+    animation-timing-function: ease;
+    animation-fill-mode: forwards;
+  }
+  .input-address__list-wrapper {
+    position: absolute;
+    z-index: 2;
+    top: auto;
+    bottom: 0;
+    box-sizing: border-box;
+    width: calc(100% - 16px);
+    height: 500px;
+    max-height: 500px;
+    margin: 0 8px 8px;
+    padding-bottom: 40px;
+    border-radius: 24px;
+    background: #fff;
+    box-shadow: 0px 24px 50px -10px rgba(0, 0, 0, 0.25);
+    animation-name: slideup;
+    animation-duration: 0.4s;
+  }
+  .input-address__list-header {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #3b414b;
+  }
+  .input-address__list-header-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: 24px;
+  }
+  .input-address__list-header-row:first-child {
+    padding-right: 50px;
+  }
+  .input-address__list-header-row .input__wrap {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-right: 8px;
+    border: 1px solid var(--form-input-border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--black-bg-color, #f8fbff) !important;
+  }
+  .input-address__list-header-row .input__wrap input {
+    background: unset !important;
+  }
+  .input-address__list-header-row .input__close {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: 2px;
+    background: var(--bg-gray-box, #f0f1f4);
+  }
+  .input-address__list-header-row .input__close::before, .input-address__list-header-row .input__close::after {
+    top: 50%;
+    height: 12px;
+    border-radius: 8px;
+    background-color: #171d33;
+    transform: translateY(-50%) rotate(45deg);
+  }
+  .input-address__list-header-row .input__close::after {
+    transform: translateY(-50%) rotate(-45deg);
+  }
+  .input-address__list-header-with-shadow::after {
+    position: absolute;
+    z-index: 10;
+    bottom: -15px;
+    left: 0;
+    width: 100%;
+    height: 15px;
+    content: "";
+    opacity: 1;
+    background: linear-gradient(180deg, rgba(212, 218, 230, 0.5) 0%, rgba(212, 218, 230, 0.3) 21.35%, rgba(247, 248, 250, 0) 100%);
+    transition: all 0.2s;
+  }
+  .input-address__list-header-with-shadow-hidden::after {
+    opacity: 0;
+  }
+  .input-address__list-header .input-address__input-wrapper {
+    width: 100%;
+  }
+  .input-address__list-close-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    width: 50px;
+    height: 50px;
+    padding: 16px;
+  }
+  .input-address__list-close-icon svg {
+    width: 16px;
+    height: 16px;
+    color: #a0a4b0;
+  }
+  .input-address__input-wrapper {
+    position: relative;
+  }
+  .input-address__input-wrapper .input__wrap {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    align-self: stretch;
+    gap: 8px;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 0px 40px 0px 8px;
+    border: 1px solid var(--Form-Input-Border, #e1e8f1);
+    border-radius: 6px;
+    background: var(--Black-BG-color, #f8fbff);
+  }
+  .input-address__input-wrapper .input__wrap input {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 8px 0;
+  }
+  .input-address__clear-query {
+    right: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: 2px;
+    background: var(--BG-gray-box, #f0f1f4);
+  }
+}
+@keyframes slideup {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/es/Molecular/InputCustomFetch/InputCustomFetch.js

@@ -0,0 +1,355 @@
+import '../../styles/base.css';
+import Spinner from "../../Atomic/Layout/Spinner/Spinner.js";
+import Input from "../../Atomic/FormElements/Input/Input.js";
+import useIsMobile from "../../Functions/useIsMobile/useIsMobile.js";
+import Hint from "../../Atomic/UI/Hint/Hint.js";
+import { useDebouncedCallback } from "./lib/hooks/useDebouncedCallback.js";
+import { compareValues, getIsValidNumber } from "./lib/utils.js";
+import { useFetchWithAbort } from "./lib/hooks/useFetchWithAbort.js";
+import './InputCustomFetch.styles.css';/* empty css                      */
+import cn from "classnames";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, X } from "react-feather";
+//#region src/Molecular/InputCustomFetch/InputCustomFetch.tsx
+var RC = "input-custom-fetch";
+var DEFAULT_HINT_MESSAGE = "Please select a valid option from the list";
+function noop() {}
+function InputCustomFetch(props) {
+	const { label, className = "", isClearable = true, isKeyboardControlled = true, fieldKey = "", testId = "", throttle: throttleTime = 500, loader = "", noItemsMessage = "", error, value = "", onChange = noop, onChangeValueTransformer, disabled, isDisabled, noValidate = false, attributesOfNativeInput, optionToValue, valueToSearchString, isValidValue, renderSelectedItem, renderListItem, renderHintMessage } = props;
+	const { isMobile } = useIsMobile();
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const listOverlayRef = useRef(null);
+	const listWrapperRef = useRef(null);
+	const listHeaderRef = useRef(null);
+	const previousValueRef = useRef(value);
+	const [isScrollableList] = useState(null);
+	const [scrollTop] = useState(0);
+	const [innerValue, setInnerValue] = useState(value);
+	const [tempInnerValue, setTempInnerValue] = useState(null);
+	const [listItems, setListItems] = useState([]);
+	const [isLoading] = useState(false);
+	const [isListLoading, setIsListLoading] = useState(false);
+	const [hightlightedIndex, setHightlightedIndex] = useState(null);
+	const [isFocused, setIsFocused] = useState(false);
+	const [isListVisible, setIsListVisible] = useState(false);
+	const { fetchWithAbort, abortControllerRef } = useFetchWithAbort(props);
+	const debouncedExecute = useDebouncedCallback(useCallback(async (searchQuery) => {
+		if (!searchQuery?.length) return;
+		setIsListLoading(true);
+		try {
+			const items = await fetchWithAbort(searchQuery);
+			setListItems(items);
+		} catch {
+			setListItems([]);
+		} finally {
+			setIsListLoading(false);
+		}
+	}, [fetchWithAbort]), getIsValidNumber(throttleTime) ? throttleTime : 0);
+	const getOptionsList = useCallback(() => {
+		const searchString = valueToSearchString(innerValue);
+		if (!searchString?.length) return;
+		debouncedExecute(searchString);
+	}, [
+		innerValue,
+		valueToSearchString,
+		debouncedExecute
+	]);
+	const isWrongValue = useMemo(() => {
+		if (noValidate) return false;
+		if (valueToSearchString(innerValue) === "") return false;
+		if (isValidValue) return !isValidValue(innerValue);
+		return false;
+	}, [
+		innerValue,
+		noValidate,
+		isValidValue,
+		valueToSearchString
+	]);
+	const setItemAsInnerValue = useCallback((e, item) => {
+		if (e instanceof Event) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+		setTimeout(() => {
+			const newValue = optionToValue(item);
+			setInnerValue(newValue);
+			if (isMobile) setIsListVisible(false);
+		}, 0);
+	}, [optionToValue, isMobile]);
+	const onClearClick = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!isMobile) setIsListVisible(false);
+		setInnerValue("");
+		inputRef?.current?.focus();
+		setTimeout(() => setIsFocused(true), 0);
+	}, [isMobile]);
+	const onOverlayClick = useCallback((e) => {
+		if (e.target === listOverlayRef?.current) {
+			e.stopPropagation();
+			e.preventDefault();
+			setIsListVisible(false);
+			if (tempInnerValue !== null) {
+				setInnerValue(tempInnerValue);
+				onChange(!onChangeValueTransformer || typeof onChangeValueTransformer !== "function" ? tempInnerValue : onChangeValueTransformer(tempInnerValue));
+			}
+		}
+	}, [
+		tempInnerValue,
+		onChange,
+		onChangeValueTransformer
+	]);
+	const onKeyDown = useCallback((keyCode) => {
+		if (!isListVisible || !isKeyboardControlled) return;
+		if (keyCode === 13) {
+			if (hightlightedIndex !== null && listItems[hightlightedIndex]) {
+				setItemAsInnerValue(null, listItems[hightlightedIndex]);
+				setHightlightedIndex(null);
+				inputRef?.current?.blur();
+			}
+		} else {
+			let newHightlightedIndex = null;
+			const listItemsElements = document.getElementsByClassName(`${RC}__list--item`);
+			const listHeight = listRef?.current?.getBoundingClientRect()?.height || 0;
+			const listScrollTop = listRef?.current?.scrollTop || 0;
+			const lastItemIndex = listItems.length - 1;
+			if (keyCode === 40) {
+				if (hightlightedIndex === null || hightlightedIndex === lastItemIndex) newHightlightedIndex = 0;
+				else if (hightlightedIndex + 1 < listItems.length) newHightlightedIndex = hightlightedIndex + 1;
+			} else if (keyCode === 38) {
+				if (hightlightedIndex === null || hightlightedIndex === 0) newHightlightedIndex = lastItemIndex;
+				else if (hightlightedIndex - 1 >= 0) newHightlightedIndex = hightlightedIndex - 1;
+			}
+			if (newHightlightedIndex !== null) {
+				const newHightlightedElement = listItemsElements[newHightlightedIndex];
+				const newHightlightedElementHeight = newHightlightedElement?.getBoundingClientRect()?.height || 0;
+				const newHightlightedElementTopInList = newHightlightedElement?.offsetTop || 0;
+				if (newHightlightedElementTopInList + newHightlightedElementHeight > listScrollTop + listHeight) if (Math.abs(newHightlightedElementTopInList + newHightlightedElementHeight - (listScrollTop + listHeight)) <= newHightlightedElementHeight) listRef?.current?.scrollTo(0, listScrollTop + newHightlightedElementHeight);
+				else listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
+				else if (newHightlightedElementTopInList < listScrollTop) if (Math.abs(newHightlightedElementTopInList - listScrollTop) < newHightlightedElementHeight) listRef?.current?.scrollTo(0, listScrollTop - newHightlightedElementHeight);
+				else listRef?.current?.scrollTo(0, newHightlightedElementTopInList);
+				if (!isMobile) setHightlightedIndex(newHightlightedIndex);
+			}
+		}
+	}, [
+		isListVisible,
+		isKeyboardControlled,
+		hightlightedIndex,
+		listItems,
+		isMobile,
+		setItemAsInnerValue
+	]);
+	const getHintMessage = useCallback(() => {
+		if (!renderHintMessage || typeof renderHintMessage !== "function") return DEFAULT_HINT_MESSAGE;
+		return renderHintMessage(innerValue);
+	}, [renderHintMessage, innerValue]);
+	const getSelectedItemLabel = useCallback((val = innerValue) => {
+		if (!val) return "";
+		const searchString = valueToSearchString(val);
+		if (typeof searchString === "string") return searchString;
+		if (typeof renderSelectedItem === "function") return renderSelectedItem(val);
+		return String(val);
+	}, [
+		innerValue,
+		valueToSearchString,
+		renderSelectedItem
+	]);
+	const getListItemLabel = useCallback((item) => {
+		if (!renderListItem || typeof renderListItem !== "function") return String(item);
+		return renderListItem(item);
+	}, [renderListItem]);
+	const setListHeight = useCallback(() => {
+		if (listWrapperRef?.current && listHeaderRef?.current && listRef.current) {
+			const listWrapperHeight = listWrapperRef?.current?.getBoundingClientRect()?.height || 0;
+			const listWrapperStyles = getComputedStyle(listWrapperRef?.current);
+			const listHeight = listWrapperHeight - (listHeaderRef?.current?.getBoundingClientRect()?.height || 0) - Number.parseInt(listWrapperStyles.paddingBottom || "0", 10);
+			listRef.current.style.maxHeight = `${listHeight}px`;
+		}
+	}, []);
+	const resetListHeight = useCallback(() => {
+		if (listRef.current) listRef.current.style.maxHeight = `initial`;
+	}, []);
+	useEffect(() => {
+		if (!compareValues(innerValue, previousValueRef.current)) if (valueToSearchString(innerValue)) {
+			onChange(!onChangeValueTransformer || typeof onChangeValueTransformer !== "function" ? innerValue : onChangeValueTransformer(innerValue));
+			if (!isListVisible) setIsListVisible(true);
+			if (isFocused) getOptionsList();
+		} else onChange(innerValue);
+	}, [
+		innerValue,
+		valueToSearchString,
+		onChange,
+		onChangeValueTransformer,
+		isListVisible,
+		isFocused,
+		getOptionsList
+	]);
+	useEffect(() => {
+		if (!isFocused && !isMobile) {
+			setIsListVisible(false);
+			setHightlightedIndex(null);
+		}
+	}, [isFocused, isMobile]);
+	useEffect(() => {
+		if (!isListVisible) {
+			setListItems([]);
+			resetListHeight();
+		}
+		if (isMobile && isListVisible) {
+			setTempInnerValue(innerValue);
+			setListHeight();
+		}
+	}, [
+		isListVisible,
+		isMobile,
+		innerValue,
+		resetListHeight,
+		setListHeight
+	]);
+	useEffect(() => {
+		if (!compareValues(value, innerValue)) setInnerValue(value);
+		previousValueRef.current = value;
+	}, [value, innerValue]);
+	useEffect(() => {
+		return () => {
+			if (abortControllerRef.current) abortControllerRef.current.abort();
+		};
+	}, [abortControllerRef]);
+	const renderSearchableInput = () => {
+		const inputValue = getSelectedItemLabel();
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn(`${RC}__input-wrapper`),
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					ref: inputRef,
+					testId: `${RC}--input--key-${testId || fieldKey}`,
+					className: cn(`${RC}__input`, className),
+					value: inputValue,
+					onChange: (val) => setInnerValue(val),
+					onFocus: () => setIsFocused(true),
+					onBlur: () => setIsFocused(false),
+					onKeyDown,
+					attributesOfNativeInput,
+					disabled: disabled || isDisabled
+				}),
+				isWrongValue && /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__alert`, { [`${RC}__alert--visible`]: !isFocused }),
+					children: /* @__PURE__ */ jsx(Hint, {
+						side: "left",
+						hint: getHintMessage(),
+						icon: /* @__PURE__ */ jsx(AlertTriangle, {}),
+						handleOpenType: "hover"
+					})
+				}),
+				isClearable && (!isWrongValue || isFocused) && !(disabled || isDisabled) && inputValue && /* @__PURE__ */ jsx("div", {
+					className: cn(`${RC}__clear-query`, { [`${RC}__clear-query--input-focused`]: isFocused }),
+					children: /* @__PURE__ */ jsx(X, { onClick: onClearClick })
+				})
+			]
+		});
+	};
+	const renderInput = () => {
+		const inputValue = getSelectedItemLabel(isListVisible ? tempInnerValue || innerValue : innerValue);
+		return /* @__PURE__ */ jsx("div", {
+			className: cn(`${RC}__input-wrapper`),
+			children: /* @__PURE__ */ jsx(Input, {
+				testId: `${RC}--input--key-${testId || fieldKey}`,
+				className: cn(`${RC}__input`, className),
+				value: inputValue,
+				onChange: (val) => setInnerValue(val),
+				onFocus: (e) => {
+					setIsListVisible(true);
+					e?.target?.blur();
+					setTimeout(() => inputRef?.current?.focus(), 200);
+				},
+				disabled: disabled || isDisabled
+			})
+		});
+	};
+	const renderLoader = () => {
+		return /* @__PURE__ */ jsx("div", {
+			className: `${RC}__list--loader`,
+			children: loader || "Loading..."
+		});
+	};
+	const renderList = () => {
+		const renderListItemComponent = (item, i) => {
+			return /* @__PURE__ */ jsx("div", {
+				className: cn(`${RC}__list--item`, { [`${RC}__list--item-hightlighted`]: i === hightlightedIndex }),
+				onMouseDown: (e) => setItemAsInnerValue(e, item),
+				children: getListItemLabel(item)
+			}, `${RC}__list-item${i}`);
+		};
+		const renderNoItems = () => {
+			return /* @__PURE__ */ jsx("div", {
+				className: `${RC}__list--no-items`,
+				children: isMobile && !valueToSearchString(innerValue)?.length ? "Please begin typing" : noItemsMessage || "No Items"
+			});
+		};
+		const renderListDesktop = () => {
+			return /* @__PURE__ */ jsx("div", {
+				className: `${RC}__list-wrapper`,
+				ref: listWrapperRef,
+				children: /* @__PURE__ */ jsx("div", {
+					className: `${RC}__list`,
+					ref: listRef,
+					children: isListLoading ? renderLoader() : listItems?.length ? listItems?.map(renderListItemComponent) : renderNoItems()
+				})
+			});
+		};
+		const renderListMobile = () => {
+			return /* @__PURE__ */ jsx("div", {
+				className: `${RC}__list-overlay`,
+				ref: listOverlayRef,
+				onClick: onOverlayClick,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: `${RC}__list-wrapper`,
+					ref: listWrapperRef,
+					children: [isMobile && /* @__PURE__ */ jsxs("div", {
+						ref: listHeaderRef,
+						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 || "Select"
+							}), /* @__PURE__ */ jsx("div", {
+								className: cn(`${RC}__list-close-icon`),
+								onClick: () => setIsListVisible(false),
+								children: /* @__PURE__ */ jsx(X, { onClick: () => setIsListVisible(false) })
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: cn(`${RC}__list-header-row`),
+							children: renderSearchableInput()
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: `${RC}__list`,
+						ref: listRef,
+						children: isListLoading ? renderLoader() : listItems?.length ? listItems?.map(renderListItemComponent) : renderNoItems()
+					})]
+				})
+			});
+		};
+		return isMobile ? renderListMobile() : renderListDesktop();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(RC, {
+			[`${RC}--error`]: error || isWrongValue && !isFocused,
+			[`${RC}--disabled`]: disabled || isDisabled
+		}),
+		children: [
+			isLoading && /* @__PURE__ */ jsx(Spinner, { size: "small" }),
+			isMobile ? renderInput() : renderSearchableInput(),
+			isListVisible && renderList()
+		]
+	});
+}
+//#endregion
+export { InputCustomFetch as default };
+
+//# sourceMappingURL=InputCustomFetch.js.map