@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

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

@@ -4,5 +4,5 @@ type DisplayOptionProps = {
     descriptionDirection: 'row' | 'column';
     optionalInfoPlacement: 'left' | 'right';
 };
-export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
@@ -10,37 +10,186 @@ const DisplayOption = ({
   descriptionDirection
 }) => {
   if (descriptionDirection === "row" && optionalInfoPlacement === "left") {
-    return /* @__PURE__ */ jsx(Tooltip, { 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: "neutral", variant: "bodySmall", children: option.description }) : null
-    ] }) }) });
+    return /* @__PURE__ */ jsx(Tooltip, { 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: "neutral",
+                  variant: "bodySmall",
+                  children: option.description
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ) });
   }
   if (descriptionDirection === "row" && optionalInfoPlacement === "right") {
-    return /* @__PURE__ */ jsx(Tooltip, { 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", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: option.description }) : null
-      ] }),
-      option.optionalInfo ? /* @__PURE__ */ jsx("div", { className: dropdownInfo, children: option.optionalInfo }) : null
-    ] }) });
+    return /* @__PURE__ */ jsx(Tooltip, { 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",
+                    prominence: "weak",
+                    sentiment: "neutral",
+                    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, { 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: "neutral", variant: "bodySmall", children: option.description }) : null
-      ] })
-    ] }) });
+    return /* @__PURE__ */ jsx(Tooltip, { 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: "neutral",
+                    variant: "bodySmall",
+                    children: option.description
+                  }
+                ) : null
+              ]
+            }
+          )
+        ]
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx(Tooltip, { 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: "neutral", variant: "bodySmall", children: option.description }) : null
-  ] }) });
+  return /* @__PURE__ */ jsx(Tooltip, { 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: "neutral",
+            variant: "bodySmall",
+            children: option.description
+          }
+        ) : null
+      ]
+    }
+  ) });
 };
 export {
   DisplayOption

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

@@ -5,5 +5,5 @@ type SearchBarProps = {
     displayedOptions: DataType;
     setSearchBarActive: Dispatch<SetStateAction<boolean>>;
 };
-export declare const SearchBarDropdown: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SearchBarDropdown: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
 import { SearchIcon } from "@ultraviolet/icons";
 import { useRef, useEffect } from "react";
@@ -23,14 +23,16 @@ const searchRegex = (data, query) => data.filter((option) => {
 const findClosestOption = (options, searchInput) => {
   if (searchInput) {
     if (!Array.isArray(options)) {
-      const possibleOptions = {
-        ...options
-      };
+      const possibleOptions = { ...options };
       Object.keys(possibleOptions).map((group) => {
-        possibleOptions[group] = possibleOptions[group].filter((option) => !option.disabled);
+        possibleOptions[group] = possibleOptions[group].filter(
+          (option) => !option.disabled
+        );
         return null;
       });
-      if (Object.keys(possibleOptions).some((group) => possibleOptions[group].length > 0)) {
+      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;
       }
@@ -63,16 +65,20 @@ const SearchBarDropdown = ({
   const handleChange = (search) => {
     if (search.length > 0) {
       if (!Array.isArray(options)) {
-        const filteredOptions = {
-          ...options
-        };
+        const filteredOptions = { ...options };
         Object.keys(filteredOptions).map((group) => {
-          filteredOptions[group] = searchRegex(filteredOptions[group], escapeRegExp(search.toString()));
+          filteredOptions[group] = searchRegex(
+            filteredOptions[group],
+            escapeRegExp(search.toString())
+          );
           return null;
         });
         onSearch(filteredOptions);
       } else {
-        const filteredOptions = searchRegex([...options], escapeRegExp(search.toString()));
+        const filteredOptions = searchRegex(
+          [...options],
+          escapeRegExp(search.toString())
+        );
         onSearch(filteredOptions);
       }
     } else {
@@ -87,10 +93,14 @@ const SearchBarDropdown = ({
         if (multiselect) {
           setSelectedData({
             clickedOption: closestOption,
-            group: !Array.isArray(options) ? Object.keys(options).find((group) => options[group].includes(closestOption)) : void 0,
+            group: !Array.isArray(options) ? Object.keys(options).find(
+              (group) => options[group].includes(closestOption)
+            ) : void 0,
             type: "selectOption"
           });
-          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
+          onChange?.(
+            selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]
+          );
         } else {
           setSelectedData({
             clickedOption: closestOption,
@@ -113,7 +123,23 @@ const SearchBarDropdown = ({
       }
     };
   }, []);
-  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.key, searchInput), placeholder, prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }), ref: searchInputRef, size: "medium", value: searchInput });
+  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.key, searchInput),
+      placeholder,
+      prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }),
+      ref: searchInputRef,
+      size: "medium",
+      value: searchInput
+    }
+  );
 };
 export {
   SearchBarDropdown

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

@@ -15,5 +15,5 @@ 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("@emotion/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 };