@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/SelectInput/components/DropdownOption.d.ts

@@ -3,7 +3,8 @@ type DisplayOptionProps = {
     option: OptionType;
     descriptionDirection: 'row' | 'column';
     optionalInfoPlacement: 'left' | 'right';
+    textVariant: 'body' | 'bodySmall' | 'caption';
 };
-export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, textVariant, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DropdownOption.d.ts.map

package/dist/components/SelectInput/components/DropdownOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/DropdownOption.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,0DAI3B,kBAAkB,4CAkKpB,CAAA"}
+{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/DropdownOption.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,aAAa,wIAmLzB,CAAA"}

package/dist/components/SelectInput/components/DropdownOption.js

@@ -1,186 +1,155 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../../Stack/index.js";
-import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
-import { dropdownInfoContainer, dropdownInfoTextItem, dropdownInfo } from "./dropdown.css.js";
-const DisplayOption = ({
-  option,
-  optionalInfoPlacement,
-  descriptionDirection
-}) => {
-  if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
-    return /* @__PURE__ */ jsx(Tooltip, { disableAnimation: true, text: option.tooltip, children: /* @__PURE__ */ jsx(
-      Stack,
-      {
-        "data-testid": `option-stack-${option.value}`,
-        direction: "row",
-        gap: 0.5,
-        justifyContent: "left",
-        children: /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            alignItems: "center",
-            className: dropdownInfoContainer,
-            direction: "row",
-            gap: 0.5,
-            children: [
-              option.optionalInfo ?? null,
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  as: "span",
-                  className: dropdownInfoTextItem,
-                  placement: "left",
-                  variant: "body",
-                  children: option.label
-                }
-              ),
-              option.description ? /* @__PURE__ */ jsx(
-                Text,
-                {
-                  as: "span",
-                  placement: "left",
-                  prominence: "weak",
-                  sentiment: option.disabled ? void 0 : "neutral",
-                  variant: "bodySmall",
-                  children: option.description
-                }
-              ) : null
-            ]
-          }
-        )
-      }
-    ) });
-  }
-  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: 0.5,
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              alignItems: "baseline",
-              className: dropdownInfoContainer,
-              direction: "row",
-              gap: 0.5,
-              children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    className: dropdownInfoTextItem,
-                    placement: "left",
-                    variant: "body",
-                    children: option.label
-                  }
-                ),
-                option.description ? /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "bodySmall", children: option.description }) : null
-              ]
-            }
-          ),
-          option.optionalInfo ? /* @__PURE__ */ jsx("div", { className: 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: 0.5,
-        justifyContent: option.optionalInfo ? "left" : "space-between",
-        children: [
-          option.optionalInfo ?? null,
-          /* @__PURE__ */ jsxs(
-            Stack,
-            {
-              className: dropdownInfoContainer,
-              "data-testid": `option-stack-${option.value}`,
-              direction: "column",
-              gap: 0.5,
-              children: [
-                /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    className: dropdownInfoTextItem,
-                    placement: "left",
-                    variant: "body",
-                    children: option.label
-                  }
-                ),
-                option.description ? /* @__PURE__ */ jsx(
-                  Text,
-                  {
-                    as: "span",
-                    placement: "left",
-                    prominence: "weak",
-                    sentiment: option.disabled ? void 0 : "neutral",
-                    variant: "bodySmall",
-                    children: option.description
-                  }
-                ) : null
-              ]
-            }
-          )
-        ]
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(Tooltip, { disableAnimation: true, text: option.tooltip, children: /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      alignItems: "normal",
-      "data-testid": `option-stack-${option.value}`,
-      direction: "column",
-      gap: 0.5,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            className: dropdownInfoContainer,
-            direction: "row",
-            gap: 0.5,
-            justifyContent: "space-between",
-            children: [
-              /* @__PURE__ */ jsx(
-                Text,
-                {
-                  as: "span",
-                  className: dropdownInfoTextItem,
-                  placement: "left",
-                  variant: "body",
-                  children: option.label
-                }
-              ),
-              option.optionalInfo ? /* @__PURE__ */ jsx("div", { className: dropdownInfo, children: option.optionalInfo }) : null
-            ]
-          }
-        ),
-        option.description ? /* @__PURE__ */ jsx(
-          Text,
-          {
-            as: "span",
-            placement: "left",
-            prominence: "weak",
-            sentiment: option.disabled ? void 0 : "neutral",
-            variant: "bodySmall",
-            children: option.description
-          }
-        ) : null
-      ]
-    }
-  ) });
-};
-export {
-  DisplayOption
+import { Text } from "../../Text/index.js";
+import { dropdownInfo, dropdownInfoContainer, dropdownInfoTextItem } from "./dropdown.css.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SelectInput/components/DropdownOption.tsx
+const DisplayOption = ({ option, optionalInfoPlacement, descriptionDirection, textVariant }) => {
+	const captionSize = useMemo(() => {
+		if (textVariant === "body") return "bodySmall";
+		if (textVariant === "bodySmall") return "caption";
+		return "captionSmall";
+	}, [textVariant]);
+	if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
+		var _option$optionalInfo;
+		return /* @__PURE__ */ jsx(Tooltip, {
+			disableAnimation: true,
+			text: option.tooltip,
+			children: /* @__PURE__ */ jsx(Stack, {
+				"data-testid": `option-stack-${option.value}`,
+				direction: "row",
+				gap: .5,
+				justifyContent: "left",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					className: dropdownInfoContainer,
+					direction: "row",
+					gap: .5,
+					children: [
+						(_option$optionalInfo = option.optionalInfo) !== null && _option$optionalInfo !== void 0 ? _option$optionalInfo : null,
+						/* @__PURE__ */ jsx(Text, {
+							as: "span",
+							className: dropdownInfoTextItem,
+							placement: "left",
+							variant: textVariant,
+							children: option.label
+						}),
+						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 === "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",
+				className: dropdownInfoContainer,
+				direction: "row",
+				gap: .5,
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: dropdownInfoTextItem,
+					placement: "left",
+					variant: textVariant,
+					children: option.label
+				}), option.description ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					placement: "left",
+					variant: captionSize,
+					children: option.description
+				}) : null]
+			}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
+				className: dropdownInfo,
+				children: option.optionalInfo
+			}) : null]
+		})
+	});
+	if (descriptionDirection === "column" && optionalInfoPlacement === "left") {
+		var _option$optionalInfo2;
+		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",
+				children: [(_option$optionalInfo2 = option.optionalInfo) !== null && _option$optionalInfo2 !== void 0 ? _option$optionalInfo2 : null, /* @__PURE__ */ jsxs(Stack, {
+					className: dropdownInfoContainer,
+					"data-testid": `option-stack-${option.value}`,
+					direction: "column",
+					gap: .5,
+					children: [/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}), option.description ? /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						placement: "left",
+						prominence: "weak",
+						sentiment: option.disabled ? void 0 : "neutral",
+						variant: captionSize,
+						children: option.description
+					}) : null]
+				})]
+			})
+		});
+	}
+	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: dropdownInfoContainer,
+				direction: "row",
+				gap: .5,
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: dropdownInfoTextItem,
+					placement: "left",
+					variant: textVariant,
+					children: option.label
+				}), option.optionalInfo ? /* @__PURE__ */ jsx("div", {
+					className: dropdownInfo,
+					children: option.optionalInfo
+				}) : null]
+			}), option.description ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				placement: "left",
+				prominence: "weak",
+				sentiment: option.disabled ? void 0 : "neutral",
+				variant: captionSize,
+				children: option.description
+			}) : null]
+		})
+	});
 };
+
+//#endregion
+export { DisplayOption };

package/dist/components/SelectInput/components/SearchBarDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBarDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SearchBarDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,UAAU,CAAA;AAGpD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAqED,eAAO,MAAM,iBAAiB,GAAI,wDAI/B,cAAc,4CA6GhB,CAAA"}
+{"version":3,"file":"SearchBarDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SearchBarDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAKpE,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,UAAU,CAAA;AAGpD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAqED,eAAO,MAAM,iBAAiB,qHAuH7B,CAAA"}

package/dist/components/SelectInput/components/SearchBarDropdown.js

@@ -1,152 +1,109 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
-import { SearchIcon } from "@ultraviolet/icons/SearchIcon";
-import { useRef, useEffect } from "react";
-import { TextInput } from "../../TextInput/index.js";
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { OPTION_SELECTOR } from "../constants.js";
 import { useSelectInput } from "../SelectInputProvider.js";
 import { searchBar } from "./dropdown.css.js";
+import { TextInput } from "../../TextInput/index.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
+import { SearchIcon } from "@ultraviolet/icons/SearchIcon";
+
+//#region src/components/SelectInput/components/SearchBarDropdown.tsx
 const getReferenceText = (option) => {
-  if (option.searchText) {
-    return normalizeString(option.searchText);
-  }
-  if (typeof option.label === "string") {
-    return normalizeString(option.label);
-  }
-  return "";
+	if (option.searchText) return normalizeString(option.searchText);
+	if (typeof option.label === "string") return normalizeString(option.label);
+	return "";
 };
 const searchRegex = (data, query) => data.filter((option) => {
-  const referenceText = getReferenceText(option);
-  const regex = new RegExp(query, "i");
-  return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
+	const referenceText = getReferenceText(option);
+	const regex = new RegExp(query, "i");
+	return (query.length > 2 ? isFuzzyMatch(query, referenceText) : referenceText.match(regex)) || typeof option.description === "string" && option.description.match(regex) || option.value.match(regex);
 });
 const findClosestOption = (options, searchInput) => {
-  if (searchInput) {
-    if (Array.isArray(options)) {
-      const possibleOption = [...options].find((option) => !option.disabled);
-      if (possibleOption) {
-        return possibleOption;
-      }
-    } else {
-      const possibleOptions = { ...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
-      )) {
-        const firstFit = Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
-        return firstFit;
-      }
-    }
-  }
-  return null;
+	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;
 };
 const escapeRegExp = (string) => string.replace(/[.*+?^{}()|[\]\\]/g, String.raw`\$&`);
-const SearchBarDropdown = ({
-  placeholder,
-  displayedOptions,
-  setSearchBarActive
-}) => {
-  const searchInputRef = useRef(null);
-  const {
-    onChange,
-    onSearch,
-    setSearchInput,
-    searchInput,
-    options,
-    multiselect,
-    setSelectedData,
-    selectedData
-  } = useSelectInput();
-  const handleChange = (search) => {
-    if (search.length > 0) {
-      if (Array.isArray(options)) {
-        const filteredOptions = searchRegex(
-          [...options],
-          escapeRegExp(search.toString())
-        );
-        onSearch(filteredOptions);
-      } else {
-        const filteredOptions = { ...options };
-        Object.keys(filteredOptions).map((group) => {
-          filteredOptions[group] = searchRegex(
-            filteredOptions[group],
-            escapeRegExp(search.toString())
-          );
-          return null;
-        });
-        onSearch(filteredOptions);
-      }
-    } else {
-      onSearch(options);
-    }
-    setSearchInput(search);
-  };
-  const handleKeyDown = (event, search) => {
-    const { key } = event;
-    if (key === "Enter") {
-      const closestOption = findClosestOption(displayedOptions, search);
-      if (closestOption) {
-        if (multiselect) {
-          setSelectedData({
-            clickedOption: closestOption,
-            group: Array.isArray(options) ? void 0 : Object.keys(options).find(
-              (group) => options[group].includes(closestOption)
-            ),
-            type: "selectOption"
-          });
-          onChange?.(
-            selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]
-          );
-        } else {
-          setSelectedData({
-            clickedOption: closestOption,
-            type: "selectOption"
-          });
-          onChange?.(selectedData.selectedValues[0] ?? "");
-        }
-      }
-    } else if (key === "Tab" || key === "ArrowDown") {
-      event?.preventDefault();
-      const optionsDropdown = document.querySelectorAll(OPTION_SELECTOR);
-      if (optionsDropdown && optionsDropdown.length > 0) {
-        optionsDropdown[0].focus();
-      }
-    }
-  };
-  useEffect(() => {
-    const timeout = setTimeout(() => {
-      searchInputRef.current?.focus();
-    }, 50);
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      "aria-label": "search-bar",
-      className: searchBar,
-      "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", size: "small" }),
-      ref: searchInputRef,
-      size: "medium",
-      value: searchInput
-    }
-  );
-};
-export {
-  SearchBarDropdown
+const SearchBarDropdown = ({ 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)) onSearch(searchRegex([...options], escapeRegExp(search.toString())));
+		else {
+			const filteredOptions = _objectSpread2({}, options);
+			Object.keys(filteredOptions).map((group) => {
+				filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+				return null;
+			});
+			onSearch(filteredOptions);
+		}
+		else onSearch(options);
+		setSearchInput(search);
+	};
+	const handleKeyDown = (event, search) => {
+		const { key } = event;
+		if (key === "Enter") {
+			const closestOption = findClosestOption(displayedOptions, search);
+			if (closestOption) if (multiselect) {
+				setSelectedData({
+					clickedOption: closestOption,
+					group: Array.isArray(options) ? void 0 : Object.keys(options).find((group) => options[group].includes(closestOption)),
+					type: "selectOption"
+				});
+				onChange === null || onChange === void 0 || onChange(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
+			} else {
+				var _selectedData$selecte;
+				setSelectedData({
+					clickedOption: closestOption,
+					type: "selectOption"
+				});
+				onChange === null || onChange === void 0 || onChange((_selectedData$selecte = selectedData.selectedValues[0]) !== null && _selectedData$selecte !== void 0 ? _selectedData$selecte : "");
+			}
+		} 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: searchBar,
+		"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",
+			size: size === "small" ? "xsmall" : "small"
+		}),
+		ref: searchInputRef,
+		size: size === "small" ? "small" : "medium",
+		value: searchInput
+	});
 };
+
+//#endregion
+export { SearchBarDropdown };

package/dist/components/SelectInput/components/SelectBar.d.ts

@@ -15,6 +15,6 @@ type SelectBarProps = {
     tooltip?: string;
     dropdownId?: string;
 };
-declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, }: SelectBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, 'data-testid': dataTestId, label, dropdownId, }: SelectBarProps) => import("react/jsx-runtime").JSX.Element;
 export { SelectBar };
 //# sourceMappingURL=SelectBar.d.ts.map

package/dist/components/SelectInput/components/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SelectBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AA8BjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmID,QAAA,MAAM,SAAS,GAAI,uJAehB,cAAc,4CA8UhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SelectBar.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AA8BjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmID,QAAA,MAAM,SAAS,oNAwWd,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}