@ultraviolet/ui 3.5.0 → 3.6.0

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { PlusIcon } from "@ultraviolet/icons";
 import { useTheme } from "@ultraviolet/themes";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -10,12 +11,11 @@ import { Popup } from "../../Popup/index.js";
 import { Skeleton } from "../../Skeleton/index.js";
 import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
+import { DROPDOWN_MAX_HEIGHT, INPUT_SIZE_HEIGHT, OPTION_SELECTOR } from "../constants.js";
 import { useSelectInput } from "../SelectInputProvider.js";
-import { INPUT_SIZE_HEIGHT } from "../types.js";
 import { DisplayOption } from "./DropdownOption.js";
-import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownCheckbox, dropdownItem, dropdownLoadMore, dropdownContainer, dropdownContainerUnGrouped, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup } from "./dropdown.css.js";
+import { footer, dropdown, dropdownWidth, dropdownEmptyState, comboboxCreate, dropdownCheckbox, dropdownItem, dropdownLoadMore, dropdownContainer, dropdownContainerUnGrouped, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, emptyStateGroupStyle } from "./dropdown.css.js";
 import { SearchBarDropdown } from "./SearchBarDropdown.js";
-const DROPDOWN_MAX_HEIGHT = 256;
 const NON_SEARCHABLE_KEYS = [
   "Tab",
   " ",
@@ -29,9 +29,7 @@ const NON_SEARCHABLE_KEYS = [
   "Escape"
 ];
 const moveFocusDown = () => {
-  const options = document.querySelectorAll(
-    '#items > div[role="option"]:not([disabled])'
-  );
+  const options = document.querySelectorAll(OPTION_SELECTOR);
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options?.length; i += 1) {
@@ -43,9 +41,7 @@ const moveFocusDown = () => {
   }
 };
 const moveFocusUp = () => {
-  const options = document.querySelectorAll(
-    '#items > div[role="option"]:not([disabled])'
-  );
+  const options = document.querySelectorAll(OPTION_SELECTOR);
   const activeItem = document.activeElement;
   if (options) {
     for (let i = 0; i < options.length; i += 1) {
@@ -106,7 +102,11 @@ const CreateDropdown = ({
   loadMore,
   optionalInfoPlacement,
   defaultSearchValue,
-  isLoading
+  isLoading,
+  groupEmptyState,
+  groupError,
+  addOption,
+  searchable
 }) => {
   const {
     setIsDropdownVisible,
@@ -116,8 +116,11 @@ const CreateDropdown = ({
     selectAll,
     selectAllGroup,
     displayedOptions,
+    onSearch,
     setSelectedData,
-    selectedData
+    selectedData,
+    searchInput,
+    setSearchInput
   } = useSelectInput();
   const focusedItemRef = useRef(null);
   useEffect(() => {
@@ -125,9 +128,56 @@ const CreateDropdown = ({
       focusedItemRef.current.focus();
     }
   }, [defaultSearchValue]);
-  if (isEmpty) {
+  const handleClickCustomValue = () => {
+    const newOption = { label: searchInput, value: searchInput };
+    addOption?.onClick(searchInput);
+    onSearch([newOption]);
+    setIsDropdownVisible(multiselect);
+    setSearchInput("");
+  };
+  if (isEmpty && !addOption) {
     return /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: dropdownEmptyState, gap: 2, children: emptyState ?? /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: "No options" }) });
   }
+  if (isEmpty && addOption && searchable) {
+    const text = /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
+      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
+      /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
+        addOption.text,
+        " ",
+        searchInput
+      ] })
+    ] });
+    const option = {
+      label: text,
+      searchText: searchInput,
+      value: `${addOption.text} ${searchInput}`
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-selected": "false",
+        className: comboboxCreate,
+        "data-testid": "add-option",
+        id: "add-option",
+        onClick: handleClickCustomValue,
+        onKeyDown: (event) => {
+          if (["Enter", " "].includes(event.key)) {
+            handleClickCustomValue();
+          }
+        },
+        role: "option",
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(
+          DisplayOption,
+          {
+            descriptionDirection: "row",
+            option,
+            optionalInfoPlacement: "left"
+          }
+        )
+      }
+    );
+  }
   const handleClick = ({
     clickedOption,
     group,
@@ -201,6 +251,42 @@ const CreateDropdown = ({
       onKeyDown: handleKeyDownSelect,
       role: "listbox",
       children: [
+        addOption && searchInput && searchable ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-selected": "false",
+            className: comboboxCreate,
+            "data-testid": "add-option",
+            id: "add-option",
+            onClick: handleClickCustomValue,
+            onKeyDown: (event) => {
+              if (["Enter", " "].includes(event.key)) {
+                handleClickCustomValue();
+              }
+            },
+            role: "option",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(
+              DisplayOption,
+              {
+                descriptionDirection: "row",
+                option: {
+                  label: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
+                    /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
+                    /* @__PURE__ */ jsxs(Text, { as: "span", sentiment: "primary", variant: "bodySmallStrong", children: [
+                      addOption.text,
+                      " ",
+                      searchInput
+                    ] })
+                  ] }),
+                  searchText: searchInput,
+                  value: `${addOption.text} ${searchInput}`
+                },
+                optionalInfoPlacement: "left"
+              }
+            )
+          }
+        ) : null,
         selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsx(
           "div",
           {
@@ -326,6 +412,50 @@ const CreateDropdown = ({
       role: "listbox",
       children: [
         isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          addOption && searchInput && searchable ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-selected": "false",
+              className: comboboxCreate,
+              "data-testid": "add-option",
+              id: "add-option",
+              onClick: handleClickCustomValue,
+              onKeyDown: (event) => {
+                if (["Enter", " "].includes(event.key)) {
+                  handleClickCustomValue();
+                }
+              },
+              role: "option",
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsx(
+                DisplayOption,
+                {
+                  descriptionDirection: "row",
+                  option: {
+                    label: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
+                      /* @__PURE__ */ jsx(PlusIcon, { sentiment: "primary", size: "small" }),
+                      /* @__PURE__ */ jsxs(
+                        Text,
+                        {
+                          as: "span",
+                          sentiment: "primary",
+                          variant: "bodySmallStrong",
+                          children: [
+                            addOption.text,
+                            " ",
+                            searchInput
+                          ]
+                        }
+                      )
+                    ] }),
+                    searchText: searchInput,
+                    value: `${addOption.text} ${searchInput}`
+                  },
+                  optionalInfoPlacement: "left"
+                }
+              )
+            }
+          ) : null,
           selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { id: "items", children: /* @__PURE__ */ jsx(
             "div",
             {
@@ -370,144 +500,180 @@ const CreateDropdown = ({
               )
             }
           ) }) : null,
-          Object.keys(displayedOptions).map((group, index) => /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
-            displayedOptions[group].length > 0 ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: dropdownGroupWrapper,
-                id: selectAllGroup ? "items" : void 0,
-                children: group ? (
-                  // biome-ignore  lint/a11y/noInteractiveElementToNoninteractiveRole: to fix
-                  /* @__PURE__ */ jsx(
-                    "button",
+          Object.keys(displayedOptions).map((group, index) => {
+            const hasElements = displayedOptions[group].length > 0;
+            const emptyStateGroup = groupEmptyState?.[group] ?? null;
+            const errorGroup = groupError?.[group] ?? null;
+            return /* @__PURE__ */ jsxs(Stack, { gap: 0.25, children: [
+              hasElements || emptyStateGroup ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: dropdownGroupWrapper,
+                  id: selectAllGroup ? "items" : void 0,
+                  children: group ? (
+                    // biome-ignore  lint/a11y/noInteractiveElementToNoninteractiveRole: to fix
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: cn(
+                          selectAllGroup ? dropdownGroupSelectable : "",
+                          dropdownGroup
+                        ),
+                        "data-selectgroup": selectAllGroup,
+                        "data-testid": `group-${index}`,
+                        onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
+                        onKeyDown: (event) => {
+                          if ([" ", "Enter"].includes(event.key)) {
+                            event.preventDefault();
+                            handleSelectGroup(group);
+                          }
+                        },
+                        role: "group",
+                        tabIndex: selectAllGroup ? 0 : -1,
+                        type: "button",
+                        children: selectAllGroup ? /* @__PURE__ */ jsx(
+                          Checkbox,
+                          {
+                            checked: selectedData.selectedGroups.includes(
+                              group
+                            ),
+                            className: dropdownCheckbox,
+                            "data-testid": "select-group",
+                            disabled: false,
+                            onChange: () => selectAllGroup ? handleSelectGroup(group) : null,
+                            tabIndex: -1,
+                            value: group,
+                            children: /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                as: "span",
+                                placement: "left",
+                                sentiment: "neutral",
+                                variant: "caption",
+                                children: group.toUpperCase()
+                              }
+                            )
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: "span",
+                            placement: "left",
+                            sentiment: "neutral",
+                            variant: "caption",
+                            children: group.toUpperCase()
+                          }
+                        )
+                      },
+                      group
+                    )
+                  ) : null
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs(Stack, { gap: "0.25", id: "items", children: [
+                hasElements ? null : /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    className: emptyStateGroupStyle,
+                    prominence: "weak",
+                    sentiment: "neutral",
+                    variant: "body",
+                    children: emptyStateGroup
+                  }
+                ),
+                errorGroup ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    className: emptyStateGroupStyle,
+                    sentiment: "danger",
+                    variant: "body",
+                    children: errorGroup
+                  }
+                ) : null,
+                displayedOptions[group].map(
+                  (option, indexOption) => errorGroup ? null : /* @__PURE__ */ jsx(
+                    "div",
                     {
+                      "aria-disabled": !!option.disabled,
+                      "aria-label": option.value,
+                      "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
                       className: cn(
-                        selectAllGroup ? dropdownGroupSelectable : "",
-                        dropdownGroup
+                        dropdownItem({
+                          disabled: !!option.disabled,
+                          selected: selectedData.selectedValues.includes(
+                            option.value
+                          ) && !option.disabled
+                        })
                       ),
-                      "data-selectgroup": selectAllGroup,
-                      "data-testid": `group-${index}`,
-                      onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
+                      "data-testid": `option-${option.value}`,
+                      id: `option-${indexOption}`,
+                      onClick: (event) => {
+                        if (!option.disabled) {
+                          handleClick({
+                            clickedOption: option,
+                            event,
+                            group
+                          });
+                        }
+                      },
                       onKeyDown: (event) => {
-                        if ([" ", "Enter"].includes(event.key)) {
-                          event.preventDefault();
-                          handleSelectGroup(group);
+                        const shouldClick = [" ", "Enter"].includes(event.key);
+                        if (shouldClick) {
+                          handleClick({
+                            clickedOption: option,
+                            event,
+                            group
+                          });
                         }
                       },
-                      role: "group",
-                      tabIndex: selectAllGroup ? 0 : -1,
-                      type: "button",
-                      children: selectAllGroup ? /* @__PURE__ */ jsx(
+                      ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+                      role: "option",
+                      tabIndex: option.disabled ? -1 : 0,
+                      children: multiselect ? /* @__PURE__ */ jsx(
                         Checkbox,
                         {
-                          checked: selectedData.selectedGroups.includes(group),
+                          checked: selectedData.selectedValues.includes(
+                            option.value
+                          ) && !option.disabled,
                           className: dropdownCheckbox,
-                          "data-testid": "select-group",
-                          disabled: false,
-                          onChange: () => selectAllGroup ? handleSelectGroup(group) : null,
+                          disabled: option.disabled,
+                          onChange: (event) => {
+                            if (!option.disabled) {
+                              handleClick({
+                                clickedOption: option,
+                                event,
+                                group
+                              });
+                            }
+                          },
                           tabIndex: -1,
-                          value: group,
+                          value: option.value,
                           children: /* @__PURE__ */ jsx(
-                            Text,
+                            DisplayOption,
                             {
-                              as: "span",
-                              placement: "left",
-                              sentiment: "neutral",
-                              variant: "caption",
-                              children: group.toUpperCase()
+                              descriptionDirection,
+                              option,
+                              optionalInfoPlacement
                             }
                           )
                         }
                       ) : /* @__PURE__ */ jsx(
-                        Text,
+                        DisplayOption,
                         {
-                          as: "span",
-                          placement: "left",
-                          sentiment: "neutral",
-                          variant: "caption",
-                          children: group.toUpperCase()
+                          descriptionDirection,
+                          option,
+                          optionalInfoPlacement
                         }
                       )
                     },
-                    group
+                    option.value
                   )
-                ) : null
-              }
-            ) : null,
-            /* @__PURE__ */ jsx(Stack, { gap: "0.25", id: "items", children: displayedOptions[group].map((option, indexOption) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                "aria-disabled": !!option.disabled,
-                "aria-label": option.value,
-                "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-                className: cn(
-                  dropdownItem({
-                    disabled: !!option.disabled,
-                    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,
-                      group
-                    });
-                  }
-                },
-                onKeyDown: (event) => {
-                  const shouldClick = [" ", "Enter"].includes(event.key);
-                  if (shouldClick) {
-                    handleClick({
-                      clickedOption: option,
-                      event,
-                      group
-                    });
-                  }
-                },
-                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: dropdownCheckbox,
-                    disabled: option.disabled,
-                    onChange: (event) => {
-                      if (!option.disabled) {
-                        handleClick({
-                          clickedOption: option,
-                          event,
-                          group
-                        });
-                      }
-                    },
-                    tabIndex: -1,
-                    value: option.value,
-                    children: /* @__PURE__ */ jsx(
-                      DisplayOption,
-                      {
-                        descriptionDirection,
-                        option,
-                        optionalInfoPlacement
-                      }
-                    )
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  DisplayOption,
-                  {
-                    descriptionDirection,
-                    option,
-                    optionalInfoPlacement
-                  }
                 )
-              },
-              option.value
-            )) })
-          ] }, group))
+              ] })
+            ] }, group);
+          })
         ] }),
         loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
       ]
@@ -528,7 +694,10 @@ const Dropdown = ({
   size,
   dropdownAlign,
   portalTarget,
-  id
+  id,
+  groupError,
+  groupEmptyState,
+  addOption
 }) => {
   const {
     setIsDropdownVisible,
@@ -669,7 +838,7 @@ const Dropdown = ({
       }),
       tabIndex: -1,
       text: /* @__PURE__ */ jsxs(Stack, { children: [
-        searchable && !isLoading && numberOfOptions >= 6 ? /* @__PURE__ */ jsx(
+        searchable && !isLoading && (numberOfOptions >= 6 || addOption) ? /* @__PURE__ */ jsx(
           SearchBarDropdown,
           {
             displayedOptions,
@@ -680,13 +849,17 @@ const Dropdown = ({
         /* @__PURE__ */ jsx(
           CreateDropdown,
           {
+            addOption,
             defaultSearchValue,
             descriptionDirection,
             emptyState,
+            groupEmptyState,
+            groupError,
             isEmpty,
             isLoading,
             loadMore,
-            optionalInfoPlacement
+            optionalInfoPlacement,
+            searchable
           }
         ),
         computedFooter

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,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAIrD,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,4CAqGhB,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,GAAI,wDAI/B,cAAc,4CA6GhB,CAAA"}

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

@@ -4,6 +4,7 @@ import { isFuzzyMatch, normalizeString } from "@scaleway/fuzzy-search";
 import { SearchIcon } from "@ultraviolet/icons";
 import { useRef, useEffect } from "react";
 import { TextInput } from "../../TextInput/index.js";
+import { OPTION_SELECTOR } from "../constants.js";
 import { useSelectInput } from "../SelectInputProvider.js";
 import { searchBar } from "./dropdown.css.js";
 const getReferenceText = (option) => {
@@ -86,7 +87,8 @@ const SearchBarDropdown = ({
     }
     setSearchInput(search);
   };
-  const handleKeyDown = (key, search) => {
+  const handleKeyDown = (event, search) => {
+    const { key } = event;
     if (key === "Enter") {
       const closestOption = findClosestOption(displayedOptions, search);
       if (closestOption) {
@@ -109,8 +111,12 @@ const SearchBarDropdown = ({
           onChange?.(selectedData.selectedValues[0] ?? "");
         }
       }
-    } else if (key === "Tab") {
-      searchInputRef.current?.blur();
+    } else if (key === "Tab" || key === "ArrowDown") {
+      event?.preventDefault();
+      const optionsDropdown = document.querySelectorAll(OPTION_SELECTOR);
+      if (optionsDropdown && optionsDropdown.length > 0) {
+        optionsDropdown[0].focus();
+      }
     }
   };
   useEffect(() => {
@@ -132,7 +138,7 @@ const SearchBarDropdown = ({
       onBlur: () => setSearchBarActive(false),
       onChange: (event) => handleChange(event.target.value),
       onFocus: () => setSearchBarActive(true),
-      onKeyDown: (event) => handleKeyDown(event.key, searchInput),
+      onKeyDown: (event) => handleKeyDown(event, searchInput),
       placeholder,
       prefix: /* @__PURE__ */ jsx(SearchIcon, { sentiment: "neutral", size: "small" }),
       ref: searchInputRef,

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":"AAWA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAmCjD,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":"AAWA,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"}

package/dist/components/SelectInput/components/SelectBar.js

@@ -9,13 +9,10 @@ import { Stack } from "../../Stack/index.js";
 import { Tag } from "../../Tag/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
+import { SIZES_TAG } from "../constants.js";
 import { findOptionInOptions } from "../findOptionInOptions.js";
 import { useSelectInput } from "../SelectInputProvider.js";
 import { selectBar, selectinputPlaceholder, selectbarState, multiselectStack, selectBarTags, maxWidthTag, minWidthTag, plusTag, selectedValues } from "./selectBar.css.js";
-const SIZES_TAG = {
-  gap: 8,
-  paddings: 16
-};
 const DisplayValues = ({
   refTag,
   nonOverflowedValues,

package/dist/components/SelectInput/components/dropdown.css.d.ts

@@ -5,8 +5,14 @@ export declare const dropdownContainerUnGrouped: string;
 export declare const dropdownGroup: string;
 export declare const dropdownGroupSelectable: string;
 export declare const dropdownGroupWrapper: string;
+export declare const emptyStateGroupStyle: string;
 export declare const dropdownItemBase: string;
 export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
+    selected: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
     disabled: {
         true: {
             backgroundColor: `var(--${string})`;
@@ -21,11 +27,6 @@ export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<
             };
         };
     };
-    selected: {
-        true: {
-            backgroundColor: `var(--${string})`;
-        };
-    };
 }>;
 export declare const footer: string;
 export declare const dropdownCheckbox: string;
@@ -35,4 +36,5 @@ export declare const dropdownInfo: string;
 export declare const dropdownInfoTextItem: string;
 export declare const dropdownInfoContainer: string;
 export declare const searchBar: string;
+export declare const comboboxCreate: string;
 //# sourceMappingURL=dropdown.css.d.ts.map

package/dist/components/SelectInput/components/dropdown.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAgB3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA"}
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EAsCvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA"}