@ultraviolet/ui 3.4.0 → 3.5.1

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) => {
@@ -22,7 +23,12 @@ const searchRegex = (data, query) => data.filter((option) => {
 });
 const findClosestOption = (options, searchInput) => {
   if (searchInput) {
-    if (!Array.isArray(options)) {
+    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(
@@ -36,11 +42,6 @@ const findClosestOption = (options, searchInput) => {
         const firstFit = Object.keys(possibleOptions).map((group) => possibleOptions[group][0]).find((value) => !!value);
         return firstFit;
       }
-    } else {
-      const possibleOption = [...options].find((option) => !option.disabled);
-      if (possibleOption) {
-        return possibleOption;
-      }
     }
   }
   return null;
@@ -64,7 +65,13 @@ const SearchBarDropdown = ({
   } = useSelectInput();
   const handleChange = (search) => {
     if (search.length > 0) {
-      if (!Array.isArray(options)) {
+      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(
@@ -74,28 +81,23 @@ const SearchBarDropdown = ({
           return null;
         });
         onSearch(filteredOptions);
-      } else {
-        const filteredOptions = searchRegex(
-          [...options],
-          escapeRegExp(search.toString())
-        );
-        onSearch(filteredOptions);
       }
     } else {
       onSearch(options);
     }
     setSearchInput(search);
   };
-  const handleKeyDown = (key, 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) ? Object.keys(options).find(
+            group: Array.isArray(options) ? void 0 : Object.keys(options).find(
               (group) => options[group].includes(closestOption)
-            ) : void 0,
+            ),
             type: "selectOption"
           });
           onChange?.(
@@ -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,
@@ -67,7 +64,7 @@ const DisplayValues = ({
             className: selectBarTags.visible,
             "data-testid": "selected-options-tags",
             disabled,
-            onClose: !readOnly ? (event) => {
+            onClose: readOnly ? void 0 : (event) => {
               event.stopPropagation();
               setSelectedData({
                 clickedOption: option,
@@ -77,7 +74,7 @@ const DisplayValues = ({
                 (val) => val !== option.value
               );
               onChange?.(newSelectedValues);
-            } : void 0,
+            },
             sentiment: "neutral",
             style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
               [minWidthTag]: "auto",
@@ -208,10 +205,10 @@ const SelectBar = ({
             const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
             const canBeVisible = newAccumulatedWidth <= innerWidth;
             return {
-              accumulatedWidth: !canBeVisible ? accumulator.accumulatedWidth : newAccumulatedWidth,
+              accumulatedWidth: canBeVisible ? newAccumulatedWidth : accumulator.accumulatedWidth,
               lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
               lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index].label : accumulator.lastVisibleLabel,
-              measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
+              measuredHiddenTags: accumulator.measuredHiddenTags + (canBeVisible ? 0 : 1),
               measuredVisibleTags: [
                 ...accumulator.measuredVisibleTags,
                 canBeVisible && potentiallyNonOverflowedValues[index]
@@ -300,10 +297,10 @@ const SelectBar = ({
       onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0,
       onKeyDown: (event) => {
         if (event.key === "ArrowDown") {
-          if (!isDropdownVisible) {
-            setIsDropdownVisible(true);
+          if (isDropdownVisible) {
+            document.getElementById("option-0")?.focus();
           } else {
-            document.getElementById(`option-0`)?.focus();
+            setIsDropdownVisible(true);
           }
         }
         if (event.key === " ") {

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

@@ -5,6 +5,7 @@ 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: {
@@ -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"}

package/dist/components/SelectInput/components/dropdown.css.js

@@ -7,16 +7,19 @@ var dropdownContainerUnGrouped = "uv_5kpm8k3";
 var dropdownGroup = "uv_5kpm8k4";
 var dropdownGroupSelectable = "uv_5kpm8k5";
 var dropdownGroupWrapper = "uv_5kpm8k6";
-var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k9" }, disabled: { true: "uv_5kpm8ka" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
-var footer = "uv_5kpm8kb";
-var dropdownCheckbox = "uv_5kpm8kc";
-var dropdownEmptyState = "uv_5kpm8kd";
-var dropdownLoadMore = "uv_5kpm8ke";
-var dropdownInfo = "uv_5kpm8kf";
-var dropdownInfoTextItem = "uv_5kpm8kg";
-var dropdownInfoContainer = "uv_5kpm8kh";
-var searchBar = "uv_5kpm8ki";
+var emptyStateGroupStyle = "uv_5kpm8k7";
+var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k9 uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8ka" }, disabled: { true: "uv_5kpm8kb" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
+var footer = "uv_5kpm8kc";
+var dropdownCheckbox = "uv_5kpm8kd";
+var dropdownEmptyState = "uv_5kpm8ke";
+var dropdownLoadMore = "uv_5kpm8kf";
+var dropdownInfo = "uv_5kpm8kg";
+var dropdownInfoTextItem = "uv_5kpm8kh";
+var dropdownInfoContainer = "uv_5kpm8ki";
+var searchBar = "uv_5kpm8kj";
+var comboboxCreate = "uv_5kpm8kk uv_5kpm8k8 uv_5kpm8k7";
 export {
+  comboboxCreate,
   dropdown,
   dropdownCheckbox,
   dropdownContainer,
@@ -31,6 +34,7 @@ export {
   dropdownItem,
   dropdownLoadMore,
   dropdownWidth,
+  emptyStateGroupStyle,
   footer,
   searchBar
 };

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

@@ -4,23 +4,52 @@ export declare const selectbarState: Record<"large" | "small", string>;
 export declare const selectinputPlaceholder: string;
 export declare const selectBarBase: string;
 export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            cursor: "not-allowed";
+            selectors: {
+                '&:hover': {
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
+    };
+    dropdownVisible: {
+        true: {
+            borderColor: `var(--${string})`;
+        };
+    };
+    readOnly: {
+        true: {
+            background: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            cursor: "default";
+            selectors: {
+                '&:hover': {
+                    borderColor: `var(--${string})`;
+                };
+            };
+        };
+    };
     size: {
-        small: {
+        large: {
             height: `var(--${string})`;
-            padding: number;
             paddingInline: `var(--${string})`;
         };
         medium: {
             height: `var(--${string})`;
             paddingInline: `var(--${string})`;
         };
-        large: {
+        small: {
             height: `var(--${string})`;
+            padding: number;
             paddingInline: `var(--${string})`;
         };
     };
     state: {
-        neutral: {
+        danger: {
             selectors: {
                 '&:not([data-disabled="true"])': {
                     border: string;
@@ -29,16 +58,16 @@ export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
                     borderColor: `var(--${string})`;
                     boxShadow: string;
                 };
-                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
-                    borderColor: `var(--${string})`;
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
                     outline: string;
                 };
-                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
+                    borderColor: `var(--${string})`;
                     outline: string;
                 };
             };
         };
-        success: {
+        neutral: {
             selectors: {
                 '&:not([data-disabled="true"])': {
                     border: string;
@@ -47,16 +76,16 @@ export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
                     borderColor: `var(--${string})`;
                     boxShadow: string;
                 };
-                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
-                    borderColor: `var(--${string})`;
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
                     outline: string;
                 };
-                '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
+                    borderColor: `var(--${string})`;
                     outline: string;
                 };
             };
         };
-        danger: {
+        success: {
             selectors: {
                 '&:not([data-disabled="true"])': {
                     border: string;
@@ -65,41 +94,12 @@ export declare const selectBar: import("@vanilla-extract/recipes").RuntimeFn<{
                     borderColor: `var(--${string})`;
                     boxShadow: string;
                 };
-                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
-                    borderColor: `var(--${string})`;
-                    outline: string;
-                };
                 '&:not([data-disabled="true"]):not([data-readonly="true"]):focus-visible': {
                     outline: string;
                 };
-            };
-        };
-    };
-    dropdownVisible: {
-        true: {
-            borderColor: `var(--${string})`;
-        };
-    };
-    readOnly: {
-        true: {
-            background: `var(--${string})`;
-            borderColor: `var(--${string})`;
-            cursor: "default";
-            selectors: {
-                '&:hover': {
-                    borderColor: `var(--${string})`;
-                };
-            };
-        };
-    };
-    disabled: {
-        true: {
-            background: `var(--${string})`;
-            borderColor: `var(--${string})`;
-            cursor: "not-allowed";
-            selectors: {
-                '&:hover': {
+                '&:not([data-disabled="true"]):not([data-readonly="true"]):hover': {
                     borderColor: `var(--${string})`;
+                    outline: string;
                 };
             };
         };

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

@@ -1 +1 @@
-{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/selectBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAGjC,CAAA;AAgCF,eAAO,MAAM,aAAa,QAaxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;+BA9BT,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HjB,CAAA;AASF,eAAO,MAAM,aAAa,sCAMxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/selectBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAGjC,CAAA;AAgCF,eAAO,MAAM,aAAa,QAaxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA9BT,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;EA2HjB,CAAA;AASF,eAAO,MAAM,aAAa,sCAMxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}

package/dist/components/SelectInput/components/selectBar.css.js

@@ -2,9 +2,9 @@
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var maxWidthTag = "var(--uv_1ba7knd0)";
 var minWidthTag = "var(--uv_1ba7knd1)";
-var selectbarState = { small: "uv_1ba7knd2", large: "uv_1ba7knd3" };
+var selectbarState = { large: "uv_1ba7knd2", small: "uv_1ba7knd3" };
 var selectinputPlaceholder = "uv_1ba7knd4";
-var selectBar = createRuntimeFn({ defaultClassName: "uv_1ba7knd6 uv_1ba7knd5", variantClassNames: { size: { small: "uv_1ba7knd7", medium: "uv_1ba7knd8", large: "uv_1ba7knd9" }, state: { neutral: "uv_1ba7knda", success: "uv_1ba7kndb", danger: "uv_1ba7kndc" }, dropdownVisible: { true: "uv_1ba7kndd" }, readOnly: { true: "uv_1ba7knde" }, disabled: { true: "uv_1ba7kndf" } }, defaultVariants: { state: "neutral", size: "large", dropdownVisible: false, readOnly: false, disabled: false }, compoundVariants: [[{ dropdownVisible: true, state: "neutral" }, "uv_1ba7kndg"], [{ dropdownVisible: true, state: "success" }, "uv_1ba7kndh"], [{ dropdownVisible: true, state: "danger" }, "uv_1ba7kndi"]] });
+var selectBar = createRuntimeFn({ defaultClassName: "uv_1ba7knd6 uv_1ba7knd5", variantClassNames: { disabled: { true: "uv_1ba7knd7" }, dropdownVisible: { true: "uv_1ba7knd8" }, readOnly: { true: "uv_1ba7knd9" }, size: { large: "uv_1ba7knda", medium: "uv_1ba7kndb", small: "uv_1ba7kndc" }, state: { danger: "uv_1ba7kndd", neutral: "uv_1ba7knde", success: "uv_1ba7kndf" } }, defaultVariants: { disabled: false, dropdownVisible: false, readOnly: false, size: "large", state: "neutral" }, compoundVariants: [[{ dropdownVisible: true, state: "neutral" }, "uv_1ba7kndg"], [{ dropdownVisible: true, state: "success" }, "uv_1ba7kndh"], [{ dropdownVisible: true, state: "danger" }, "uv_1ba7kndi"]] });
 var selectBarTags = { hidden: "uv_1ba7kndk uv_1ba7kndj", visible: "uv_1ba7kndl uv_1ba7kndj" };
 var selectedValues = "uv_1ba7kndm";
 var plusTag = "uv_1ba7kndn";

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

@@ -0,0 +1,13 @@
+export declare const DROPDOWN_MAX_HEIGHT = 256;
+export declare const OPTION_SELECTOR = "#items > div[role=\"option\"]:not([aria-disabled=\"true\"]), #add-option";
+export declare const SIZES_TAG: {
+    gap: number;
+    paddings: number;
+    plusTag: number;
+};
+export declare const INPUT_SIZE_HEIGHT: {
+    readonly large: "600";
+    readonly medium: "500";
+    readonly small: "400";
+};
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,MAAM,CAAA;AAGtC,eAAO,MAAM,eAAe,6EAC4C,CAAA;AAExE,eAAO,MAAM,SAAS;;;;CAIrB,CAAA;AAED,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAA"}

package/dist/components/SelectInput/constants.js

@@ -0,0 +1,18 @@
+const DROPDOWN_MAX_HEIGHT = 256;
+const OPTION_SELECTOR = '#items > div[role="option"]:not([aria-disabled="true"]), #add-option';
+const SIZES_TAG = {
+  gap: 8,
+  paddings: 16
+};
+const INPUT_SIZE_HEIGHT = {
+  large: "600",
+  medium: "500",
+  small: "400"
+  // sizing theme tokens key
+};
+export {
+  DROPDOWN_MAX_HEIGHT,
+  INPUT_SIZE_HEIGHT,
+  OPTION_SELECTOR,
+  SIZES_TAG
+};

package/dist/components/SelectInput/findOptionInOptions.js

@@ -1,9 +1,9 @@
 const findOptionInOptions = (options, optionValue) => {
   let flatOptions = [];
-  if (!Array.isArray(options)) {
-    flatOptions = Object.keys(options).flatMap((group) => options[group]);
-  } else {
+  if (Array.isArray(options)) {
     flatOptions = options;
+  } else {
+    flatOptions = Object.keys(options).flatMap((group) => options[group]);
   }
   return flatOptions.find((option) => option.value === optionValue);
 };

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

@@ -30,10 +30,6 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
      * Message to show when no option available
      */
     emptyState?: ReactNode;
-    /**
-     * Whether it is possible to search through the input
-     */
-    searchable?: boolean;
     /**
      * Whether the component in disabled
      */
@@ -74,6 +70,14 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
      * Display an error message under the select bar
      */
     error?: string | boolean;
+    searchable?: boolean;
+    /**
+     * When searchable, set a combobox to dynamically add an option
+     */
+    addOption?: {
+        text: string;
+        onClick: (searchText: string) => void;
+    };
     /**
      * Display a success message under the select bar
      */
@@ -123,10 +127,12 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
      * Please wrap that definition in useCallback
      */
     onOpen?: () => void;
+    groupError?: Record<string, ReactNode>;
+    groupEmptyState?: Record<string, ReactNode>;
 } & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className' | 'style'>;
 /**
  * SelectInput component is used to select one or many elements from a selection.
  */
-export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, style, }: SelectInputProps<IsMulti>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, groupEmptyState, groupError, style, addOption, }: SelectInputProps<IsMulti>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectInput/index.js

@@ -47,7 +47,10 @@ const SelectInput = ({
   dropdownAlign,
   portalTarget,
   onOpen,
-  style
+  groupEmptyState,
+  groupError,
+  style,
+  addOption
 }) => {
   const localId = useId();
   const finalId = id ?? localId;
@@ -82,10 +85,13 @@ const SelectInput = ({
             /* @__PURE__ */ jsx(
               Dropdown,
               {
+                addOption,
                 descriptionDirection,
                 dropdownAlign,
                 emptyState,
                 footer,
+                groupEmptyState,
+                groupError,
                 id: dropdownId,
                 isLoading,
                 loadMore,
@@ -128,7 +134,7 @@ const SelectInput = ({
                 ] })
               }
             ),
-            !error && !success && helper ? /* @__PURE__ */ jsx(
+            !(error || success) && helper ? /* @__PURE__ */ jsx(
               Text,
               {
                 as: "p",

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

@@ -36,9 +36,4 @@ export type ReducerAction = {
     selectedValues: ReducerState['selectedValues'];
     selectedGroups: ReducerState['selectedGroups'];
 };
-export declare const INPUT_SIZE_HEIGHT: {
-    readonly large: "600";
-    readonly medium: "500";
-    readonly small: "400";
-};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,CACA;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GACtC;IACE,KAAK,EAAE,SAAS,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;CACnB,CACJ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,CAAA;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,aAAa,EAAE,UAAU,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GACD;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IACE,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC9C,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAC/C,CAAA;AAEL,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,CACA;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GACtC;IACE,KAAK,EAAE,SAAS,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;CACnB,CACJ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,CAAA;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,aAAa,EAAE,UAAU,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GACD;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IACE,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC9C,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAC/C,CAAA"}

package/dist/components/SelectableCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAIzD,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EAIjB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,OAAO,KAAK,EAAE,SAAS,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAiB5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EACL,CAAC,CAAC,EACA,QAAQ,EACR,OAAO,GACR,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,KAAK,SAAS,CAAC,GACnE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACA;IACE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,GACD;IACE,WAAW,CAAC,EAAE,8BAA8B,CAC1C,MAAM,OAAO,WAAW,EACxB,aAAa,CACd,CAAA;IACD,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,GACC,SAAS,CAAA;AAEX;;;GAGG;AACH,eAAO,MAAM,cAAc,gHA6Q1B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAIzD,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EAIjB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,OAAO,KAAK,EAAE,SAAS,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAiB5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EACL,CAAC,CAAC,EACA,QAAQ,EACR,OAAO,GACR,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,KAAK,SAAS,CAAC,GACnE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,CACA;IACE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,GACD;IACE,WAAW,CAAC,EAAE,8BAA8B,CAC1C,MAAM,OAAO,WAAW,EACxB,aAAa,CACd,CAAA;IACD,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,GACC,SAAS,CAAA;AAEX;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAgR1B,CAAA"}

package/dist/components/SelectableCard/index.js

@@ -59,7 +59,10 @@ const SelectableCard = forwardRef(
         }).catch(() => null);
       }
     });
-    const ProductIconUsed = productIcon ? ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`] : null;
+    const ProductIconUsed = productIcon ? (
+      // biome-ignore lint/performance/noDynamicNamespaceImportAccess: to fix
+      ProductIcon[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`]
+    ) : null;
     const ParentContainer = useCallback(
       ({ children: subChildren }) => {
         if (tooltip) {
@@ -126,7 +129,7 @@ const SelectableCard = forwardRef(
             `label[for="${inputElement.id}"]`
           );
           const targetNode = event.target;
-          if (!inputElement.contains(targetNode) && !labelElement?.contains(targetNode)) {
+          if (!(inputElement.contains(targetNode) || labelElement?.contains(targetNode))) {
             inputElement.click();
           }
         }
@@ -136,7 +139,7 @@ const SelectableCard = forwardRef(
     return /* @__PURE__ */ jsx(ParentContainer, { children: /* @__PURE__ */ jsx(
       Stack,
       {
-        alignItems: "start",
+        alignItems: "flex-start",
         className: cn(
           className,
           containerSelectableCard({
@@ -159,8 +162,8 @@ const SelectableCard = forwardRef(
         role: "button",
         style: {
           ...assignInlineVars({
-            [inputDisplay]: !showTick ? "none" : "inline",
-            [labelDisplay]: !showTick && !label ? "none" : "inline",
+            [inputDisplay]: showTick ? "inline" : "none",
+            [labelDisplay]: showTick || label ? "inline" : "none",
             [widthSelectable]: label ? "100%" : "auto"
           }),
           ...style

package/dist/components/SelectableCard/styles.css.d.ts

@@ -1,6 +1,13 @@
 export declare const containerSelectableCard: import("@vanilla-extract/recipes").RuntimeFn<{
+    cursor: {
+        custom: {
+            cursor: "pointer";
+        };
+        default: {
+            cursor: "default";
+        };
+    };
     image: {
-        none: {};
         icon: {
             padding: `var(--${string})`;
             paddingRight: `var(--${string})`;
@@ -8,14 +15,7 @@ export declare const containerSelectableCard: import("@vanilla-extract/recipes")
         illustration: {
             padding: `var(--${string})`;
         };
-    };
-    cursor: {
-        default: {
-            cursor: "default";
-        };
-        custom: {
-            cursor: "pointer";
-        };
+        none: {};
     };
 }>;
 export declare const labelContainerSelectableCard: Record<"label" | "noLabel", string>;