@ultraviolet/ui 3.21.1 → 3.22.0

package/dist/components/SelectInput/components/Dropdown/Item.js

@@ -8,79 +8,81 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/components/Dropdown/Item.tsx
 var Item;
-var init_Item = __esmMin(() => {
-	init_Checkbox();
-	init_SelectInputProvider();
-	init_Option();
-	init_styles_css();
-	Item = ({ option, indexOption, group, defaultSearchValue, focusedItemRef, descriptionDirection, textVariant, optionalInfoPlacement }) => {
-		const { setIsDropdownVisible, onChange, multiselect, setSelectedData, selectedData, size } = useSelectInput();
-		const handleClick = ({ clickedOption, event }) => {
-			event.stopPropagation();
-			setSelectedData({
-				clickedOption,
-				group,
-				type: "selectOption"
-			});
-			if (multiselect) if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
-			else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
-			else onChange === null || onChange === void 0 || onChange(clickedOption.value);
-			setIsDropdownVisible(multiselect);
-		};
-		return /* @__PURE__ */ jsx("div", {
-			"aria-disabled": !!option.disabled,
-			"aria-label": option.value,
-			"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-			className: cn(selectInputStyle.dropdownItem({
-				disabled: !!option.disabled,
-				size,
-				selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-			})),
-			"data-testid": `option-${option.value}`,
-			id: `option-${indexOption}`,
-			onClick: (event) => {
-				if (!option.disabled) handleClick({
-					clickedOption: option,
-					event
-				});
-			},
-			onKeyDown: (event) => {
-				if ([" ", "Enter"].includes(event.key)) handleClick({
-					clickedOption: option,
-					event
+function init_Item() {
+	return (init_Item = __esmMin(() => {
+		init_Checkbox();
+		init_SelectInputProvider();
+		init_Option();
+		init_styles_css();
+		Item = ({ option, indexOption, group, defaultSearchValue, focusedItemRef, descriptionDirection, textVariant, optionalInfoPlacement }) => {
+			const { setIsDropdownVisible, onChange, multiselect, setSelectedData, selectedData, size } = useSelectInput();
+			const handleClick = ({ clickedOption, event }) => {
+				event.stopPropagation();
+				setSelectedData({
+					clickedOption,
+					group,
+					type: "selectOption"
 				});
-			},
-			ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
-			role: "option",
-			tabIndex: option.disabled ? -1 : 0,
-			children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
-				checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
-				className: selectInputStyle.dropdownCheckbox,
-				disabled: option.disabled,
-				onChange: (event) => {
+				if (multiselect) if (selectedData.selectedValues.includes(clickedOption.value)) onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.filter((value) => value !== clickedOption.value));
+				else onChange === null || onChange === void 0 || onChange([...selectedData.selectedValues, clickedOption.value]);
+				else onChange === null || onChange === void 0 || onChange(clickedOption.value);
+				setIsDropdownVisible(multiselect);
+			};
+			return /* @__PURE__ */ jsx("div", {
+				"aria-disabled": !!option.disabled,
+				"aria-label": option.value,
+				"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
+				className: cn(selectInputStyle.dropdownItem({
+					disabled: !!option.disabled,
+					size,
+					selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+				})),
+				"data-testid": `option-${option.value}`,
+				id: `option-${indexOption}`,
+				onClick: (event) => {
 					if (!option.disabled) handleClick({
 						clickedOption: option,
 						event
 					});
 				},
-				tabIndex: -1,
-				tooltip: option.tooltip,
-				value: option.value,
-				children: /* @__PURE__ */ jsx(DisplayOption, {
+				onKeyDown: (event) => {
+					if ([" ", "Enter"].includes(event.key)) handleClick({
+						clickedOption: option,
+						event
+					});
+				},
+				ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+				role: "option",
+				tabIndex: option.disabled ? -1 : 0,
+				children: multiselect ? /* @__PURE__ */ jsx(Checkbox, {
+					checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+					className: selectInputStyle.dropdownCheckbox,
+					disabled: option.disabled,
+					onChange: (event) => {
+						if (!option.disabled) handleClick({
+							clickedOption: option,
+							event
+						});
+					},
+					tabIndex: -1,
+					tooltip: option.tooltip,
+					value: option.value,
+					children: /* @__PURE__ */ jsx(DisplayOption, {
+						descriptionDirection,
+						option,
+						optionalInfoPlacement,
+						textVariant
+					})
+				}) : /* @__PURE__ */ jsx(DisplayOption, {
 					descriptionDirection,
 					option,
 					optionalInfoPlacement,
 					textVariant
 				})
-			}) : /* @__PURE__ */ jsx(DisplayOption, {
-				descriptionDirection,
-				option,
-				optionalInfoPlacement,
-				textVariant
-			})
-		});
-	};
-});
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Item();

package/dist/components/SelectInput/components/Dropdown/Option.js

@@ -9,123 +9,125 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SelectInput/components/Dropdown/Option.tsx
 var DisplayOption;
-var init_Option = __esmMin(() => {
-	init_Stack();
-	init_Text();
-	init_Tooltip();
-	init_styles_css();
-	DisplayOption = ({ option, optionalInfoPlacement, descriptionDirection, textVariant }) => {
-		const captionSize = useMemo(() => textVariant === "body" ? "bodySmall" : "caption", [textVariant]);
-		const optionDescription = option.description ? /* @__PURE__ */ jsx(Text, {
-			as: "span",
-			placement: "left",
-			prominence: "weak",
-			sentiment: option.disabled ? void 0 : "neutral",
-			variant: captionSize,
-			children: option.description
-		}) : null;
-		if (descriptionDirection === "row" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsx(Tooltip, {
-			disableAnimation: true,
-			text: option.tooltip,
-			children: /* @__PURE__ */ jsxs(Stack, {
-				alignItems: optionDescription ? "flex-start" : "center",
-				className: selectInputStyle.dropdownInfoContainer,
-				direction: "row",
-				"data-testid": `option-stack-${option.value}`,
-				gap: .5,
-				children: [
-					option.optionalInfo,
-					/* @__PURE__ */ jsx(Text, {
-						as: "span",
-						className: selectInputStyle.dropdownInfoTextItem,
-						placement: "left",
-						variant: textVariant,
-						children: option.label
-					}),
-					optionDescription
-				]
-			})
-		});
-		if (descriptionDirection === "row" && optionalInfoPlacement === "right") return /* @__PURE__ */ jsx(Tooltip, {
-			disableAnimation: true,
-			text: option.tooltip,
-			children: /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "baseline",
-				"data-testid": `option-stack-${option.value}`,
-				direction: "row",
-				gap: .5,
-				justifyContent: "space-between",
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					alignItems: "baseline",
+function init_Option() {
+	return (init_Option = __esmMin(() => {
+		init_Stack();
+		init_Text();
+		init_Tooltip();
+		init_styles_css();
+		DisplayOption = ({ option, optionalInfoPlacement, descriptionDirection, textVariant }) => {
+			const captionSize = useMemo(() => textVariant === "body" ? "bodySmall" : "caption", [textVariant]);
+			const optionDescription = option.description ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				placement: "left",
+				prominence: "weak",
+				sentiment: option.disabled ? void 0 : "neutral",
+				variant: captionSize,
+				children: option.description
+			}) : null;
+			if (descriptionDirection === "row" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsx(Tooltip, {
+				disableAnimation: true,
+				text: option.tooltip,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: optionDescription ? "flex-start" : "center",
 					className: selectInputStyle.dropdownInfoContainer,
 					direction: "row",
-					gap: .5,
-					children: [/* @__PURE__ */ jsx(Text, {
-						as: "span",
-						className: selectInputStyle.dropdownInfoTextItem,
-						placement: "left",
-						variant: textVariant,
-						children: option.label
-					}), optionDescription]
-				}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
-					className: selectInputStyle.dropdownInfo,
-					children: option.optionalInfo
-				}) : null]
-			})
-		});
-		if (descriptionDirection === "column" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsx(Tooltip, {
-			disableAnimation: true,
-			text: option.tooltip,
-			children: /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "normal",
-				direction: "row",
-				gap: .5,
-				justifyContent: option.optionalInfo ? "left" : "space-between",
-				className: selectInputStyle.optionalInfoPadding,
-				children: [option.optionalInfo, /* @__PURE__ */ jsxs(Stack, {
-					className: selectInputStyle.dropdownInfoContainer,
 					"data-testid": `option-stack-${option.value}`,
-					direction: "column",
 					gap: .5,
-					children: [/* @__PURE__ */ jsx(Text, {
-						as: "span",
-						className: selectInputStyle.dropdownInfoTextItem,
-						placement: "left",
-						variant: textVariant,
-						children: option.label
-					}), optionDescription]
-				})]
-			})
-		});
-		return /* @__PURE__ */ jsx(Tooltip, {
-			disableAnimation: true,
-			text: option.tooltip,
-			children: /* @__PURE__ */ jsxs(Stack, {
-				alignItems: "normal",
-				"data-testid": `option-stack-${option.value}`,
-				direction: "column",
-				gap: .5,
-				children: [/* @__PURE__ */ jsxs(Stack, {
-					className: selectInputStyle.dropdownInfoContainer,
+					children: [
+						option.optionalInfo,
+						/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: selectInputStyle.dropdownInfoTextItem,
+							placement: "left",
+							variant: textVariant,
+							children: option.label
+						}),
+						optionDescription
+					]
+				})
+			});
+			if (descriptionDirection === "row" && optionalInfoPlacement === "right") return /* @__PURE__ */ jsx(Tooltip, {
+				disableAnimation: true,
+				text: option.tooltip,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "baseline",
+					"data-testid": `option-stack-${option.value}`,
 					direction: "row",
 					gap: .5,
 					justifyContent: "space-between",
-					alignItems: optionDescription ? "flex-start" : "center",
-					children: [/* @__PURE__ */ jsx(Text, {
-						as: "span",
-						className: selectInputStyle.dropdownInfoTextItem,
-						placement: "left",
-						variant: textVariant,
-						children: option.label
+					children: [/* @__PURE__ */ jsxs(Stack, {
+						alignItems: "baseline",
+						className: selectInputStyle.dropdownInfoContainer,
+						direction: "row",
+						gap: .5,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: selectInputStyle.dropdownInfoTextItem,
+							placement: "left",
+							variant: textVariant,
+							children: option.label
+						}), optionDescription]
 					}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
 						className: selectInputStyle.dropdownInfo,
 						children: option.optionalInfo
 					}) : null]
-				}), optionDescription]
-			})
-		});
-	};
-});
+				})
+			});
+			if (descriptionDirection === "column" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsx(Tooltip, {
+				disableAnimation: true,
+				text: option.tooltip,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "normal",
+					direction: "row",
+					gap: .5,
+					justifyContent: option.optionalInfo ? "left" : "space-between",
+					className: selectInputStyle.optionalInfoPadding,
+					children: [option.optionalInfo, /* @__PURE__ */ jsxs(Stack, {
+						className: selectInputStyle.dropdownInfoContainer,
+						"data-testid": `option-stack-${option.value}`,
+						direction: "column",
+						gap: .5,
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: selectInputStyle.dropdownInfoTextItem,
+							placement: "left",
+							variant: textVariant,
+							children: option.label
+						}), optionDescription]
+					})]
+				})
+			});
+			return /* @__PURE__ */ jsx(Tooltip, {
+				disableAnimation: true,
+				text: option.tooltip,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "normal",
+					"data-testid": `option-stack-${option.value}`,
+					direction: "column",
+					gap: .5,
+					children: [/* @__PURE__ */ jsxs(Stack, {
+						className: selectInputStyle.dropdownInfoContainer,
+						direction: "row",
+						gap: .5,
+						justifyContent: "space-between",
+						alignItems: optionDescription ? "flex-start" : "center",
+						children: [/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: selectInputStyle.dropdownInfoTextItem,
+							placement: "left",
+							variant: textVariant,
+							children: option.label
+						}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
+							className: selectInputStyle.dropdownInfo,
+							children: option.optionalInfo
+						}) : null]
+					}), optionDescription]
+				})
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_Option();

package/dist/components/SelectInput/components/Dropdown/SearchBar.js

@@ -1,12 +1,11 @@
 'use client';
 import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
-import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import _objectSpread2, { init_objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.142.0/helpers/esm/objectSpread2.js";
 import { TextInput, init_TextInput } from "../../../TextInput/index.js";
 import { init_styles_css, searchInputStyle } from "../../../SearchInput/styles.css.js";
 import { OPTION_SELECTOR, init_constants } from "../../constants.js";
 import { init_SelectInputProvider, useSelectInput } from "../../SelectInputProvider.js";
 import { init_styles_css as init_styles_css$1, selectInputStyle } from "../../styles.css.js";
-import { init_styles } from "../../../styles.js";
 import { computeSelectedDataMultiselect, computeSelectedDataSingleSelect, init_helpers } from "../helpers.js";
 import { useEffect, useRef } from "react";
 import { cn } from "@ultraviolet/utils";
@@ -16,105 +15,107 @@ import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
 
 //#region src/components/SelectInput/components/Dropdown/SearchBar.tsx
 var getReferenceText, searchRegex, findClosestOption, escapeRegExp, SearchBar;
-var init_SearchBar = __esmMin(() => {
-	init_styles();
-	init_TextInput();
-	init_constants();
-	init_SelectInputProvider();
-	init_helpers();
-	init_styles_css$1();
-	init_objectSpread2();
-	getReferenceText = (option) => {
-		if (option.searchText) return normalizeString(option.searchText);
-		if (typeof option.label === "string") return normalizeString(option.label);
-		return "";
-	};
-	searchRegex = (data, query) => data.filter((option) => {
-		const referenceText = getReferenceText(option);
-		const regex = new RegExp(query, "iu");
-		return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
-	});
-	findClosestOption = (options, searchInput) => {
-		if (searchInput) if (Array.isArray(options)) {
-			const possibleOption = [...options].find((option) => !option.disabled);
-			if (possibleOption) return possibleOption;
-		} else {
-			const possibleOptions = _objectSpread2({}, options);
-			Object.keys(possibleOptions).map((group) => {
-				possibleOptions[group] = possibleOptions[group].filter((option) => !option.disabled);
-				return null;
-			});
-			if (Object.keys(possibleOptions).some((group) => possibleOptions[group].length > 0)) return Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
-		}
-		return null;
-	};
-	escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/gu, String.raw`\$&`);
-	SearchBar = ({ placeholder, displayedOptions, setSearchBarActive }) => {
-		const searchInputRef = useRef(null);
-		const { onChange, onSearch, setSearchInput, searchInput, options, multiselect, setSelectedData, selectedData, size } = useSelectInput();
-		const handleChange = (search) => {
-			if (search.length > 0) if (Array.isArray(options)) {
-				const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
-				onSearch(filteredOptions);
+function init_SearchBar() {
+	return (init_SearchBar = __esmMin(() => {
+		init_styles_css();
+		init_TextInput();
+		init_constants();
+		init_SelectInputProvider();
+		init_helpers();
+		init_styles_css$1();
+		init_objectSpread2();
+		getReferenceText = (option) => {
+			if (option.searchText) return normalizeString(option.searchText);
+			if (typeof option.label === "string") return normalizeString(option.label);
+			return "";
+		};
+		searchRegex = (data, query) => data.filter((option) => {
+			const referenceText = getReferenceText(option);
+			const regex = new RegExp(query, "iu");
+			return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
+		});
+		findClosestOption = (options, searchInput) => {
+			if (searchInput) if (Array.isArray(options)) {
+				const possibleOption = [...options].find((option) => !option.disabled);
+				if (possibleOption) return possibleOption;
 			} else {
-				const filteredOptions = _objectSpread2({}, options);
-				Object.keys(filteredOptions).map((group) => {
-					filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+				const possibleOptions = _objectSpread2({}, options);
+				Object.keys(possibleOptions).map((group) => {
+					possibleOptions[group] = possibleOptions[group].filter((option) => !option.disabled);
 					return null;
 				});
-				onSearch(filteredOptions);
+				if (Object.keys(possibleOptions).some((group) => possibleOptions[group].length > 0)) return Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
 			}
-			else onSearch(options);
-			setSearchInput(search);
+			return null;
 		};
-		const handleKeyDown = (event, search) => {
-			const { key } = event;
-			if (key === "Enter") {
-				const closestOption = findClosestOption(displayedOptions, search);
-				if (closestOption) if (multiselect) {
-					const data = computeSelectedDataMultiselect(closestOption, options, selectedData);
-					setSelectedData(data.computedData);
-					onChange === null || onChange === void 0 || onChange(data.onChangeData);
+		escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/gu, String.raw`\$&`);
+		SearchBar = ({ placeholder, displayedOptions, setSearchBarActive }) => {
+			const searchInputRef = useRef(null);
+			const { onChange, onSearch, setSearchInput, searchInput, options, multiselect, setSelectedData, selectedData, size } = useSelectInput();
+			const handleChange = (search) => {
+				if (search.length > 0) if (Array.isArray(options)) {
+					const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
+					onSearch(filteredOptions);
 				} else {
-					const data = computeSelectedDataSingleSelect(closestOption, selectedData);
-					setSelectedData(data.computedData);
-					onChange === null || onChange === void 0 || onChange(data.onChangeData);
+					const filteredOptions = _objectSpread2({}, options);
+					Object.keys(filteredOptions).map((group) => {
+						filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+						return null;
+					});
+					onSearch(filteredOptions);
 				}
-			} else if (key === "Tab" || key === "ArrowDown") {
-				event === null || event === void 0 || event.preventDefault();
-				const optionsDropdown = document.querySelectorAll(OPTION_SELECTOR);
-				if (optionsDropdown && optionsDropdown.length > 0) optionsDropdown[0].focus();
-			}
-		};
-		useEffect(() => {
-			const timeout = setTimeout(() => {
-				var _searchInputRef$curre;
-				(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
-			}, 50);
-			return () => {
-				if (timeout) clearTimeout(timeout);
+				else onSearch(options);
+				setSearchInput(search);
 			};
-		}, []);
-		return /* @__PURE__ */ jsx(TextInput, {
-			"aria-label": "search-bar",
-			className: cn(selectInputStyle.searchBar, searchInputStyle.searchInput),
-			"data-testid": "search-bar",
-			onBlur: () => setSearchBarActive(false),
-			onChange: (event) => handleChange(event.target.value),
-			onFocus: () => setSearchBarActive(true),
-			onKeyDown: (event) => handleKeyDown(event, searchInput),
-			placeholder,
-			prefix: /* @__PURE__ */ jsx(SearchIcon, {
-				sentiment: "neutral",
-				prominence: "weak",
-				size: "small"
-			}),
-			ref: searchInputRef,
-			size: size === "small" ? "small" : "medium",
-			value: searchInput
-		});
-	};
-});
+			const handleKeyDown = (event, search) => {
+				const { key } = event;
+				if (key === "Enter") {
+					const closestOption = findClosestOption(displayedOptions, search);
+					if (closestOption) if (multiselect) {
+						const data = computeSelectedDataMultiselect(closestOption, options, selectedData);
+						setSelectedData(data.computedData);
+						onChange === null || onChange === void 0 || onChange(data.onChangeData);
+					} else {
+						const data = computeSelectedDataSingleSelect(closestOption, selectedData);
+						setSelectedData(data.computedData);
+						onChange === null || onChange === void 0 || onChange(data.onChangeData);
+					}
+				} else if (key === "Tab" || key === "ArrowDown") {
+					event === null || event === void 0 || event.preventDefault();
+					const optionsDropdown = document.querySelectorAll(OPTION_SELECTOR);
+					if (optionsDropdown && optionsDropdown.length > 0) optionsDropdown[0].focus();
+				}
+			};
+			useEffect(() => {
+				const timeout = setTimeout(() => {
+					var _searchInputRef$curre;
+					(_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+				}, 50);
+				return () => {
+					if (timeout) clearTimeout(timeout);
+				};
+			}, []);
+			return /* @__PURE__ */ jsx(TextInput, {
+				"aria-label": "search-bar",
+				className: cn(selectInputStyle.searchBar, searchInputStyle.searchInput),
+				"data-testid": "search-bar",
+				onBlur: () => setSearchBarActive(false),
+				onChange: (event) => handleChange(event.target.value),
+				onFocus: () => setSearchBarActive(true),
+				onKeyDown: (event) => handleKeyDown(event, searchInput),
+				placeholder,
+				prefix: /* @__PURE__ */ jsx(SearchIcon, {
+					sentiment: "neutral",
+					prominence: "weak",
+					size: "small"
+				}),
+				ref: searchInputRef,
+				size: size === "small" ? "small" : "medium",
+				value: searchInput
+			});
+		};
+	}))();
+}
 
 //#endregion
 init_SearchBar();