@ultraviolet/ui 3.4.0 → 3.5.0

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

@@ -13,7 +13,7 @@ import { Text } from "../../Text/index.js";
 import { useSelectInput } from "../SelectInputProvider.js";
 import { INPUT_SIZE_HEIGHT } from "../types.js";
 import { DisplayOption } from "./DropdownOption.js";
-import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownCheckbox, dropdownItem, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
+import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownCheckbox, dropdownItem, dropdownLoadMore, dropdownContainer, dropdownContainerUnGrouped, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup } from "./dropdown.css.js";
 import { SearchBarDropdown } from "./SearchBarDropdown.js";
 const DROPDOWN_MAX_HEIGHT = 256;
 const NON_SEARCHABLE_KEYS = [
@@ -73,7 +73,16 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
     const currentSearch = search + event.key;
     setSearch(currentSearch);
     ref.current.focus();
-    if (!Array.isArray(options)) {
+    if (Array.isArray(options)) {
+      const closestOption = [...options].find(
+        (option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch)
+      );
+      if (closestOption) {
+        setDefaultSearch(closestOption.searchText ?? closestOption.value);
+      } else {
+        setDefaultSearch(null);
+      }
+    } else {
       const closestOptions = { ...options };
       Object.keys(closestOptions).map((group) => {
         closestOptions[group] = closestOptions[group].filter(
@@ -87,15 +96,6 @@ const handleKeyDown = (event, ref, options, searchBarActive, setSearch, setDefau
       } else {
         setDefaultSearch(null);
       }
-    } else {
-      const closestOption = [...options].find(
-        (option) => option.searchText ? option.searchText.toLocaleLowerCase().startsWith(currentSearch) : option.value.toLocaleLowerCase().startsWith(currentSearch)
-      );
-      if (closestOption) {
-        setDefaultSearch(closestOption.searchText ?? closestOption.value);
-      } else {
-        setDefaultSearch(null);
-      }
     }
   }
 };
@@ -157,7 +157,9 @@ const CreateDropdown = ({
         onChange([]);
       } else {
         const allValues = [];
-        if (!Array.isArray(options)) {
+        if (Array.isArray(options)) {
+          options.map((option) => allValues.push(option));
+        } else {
           Object.keys(options).map(
             (group) => options[group].map((option) => {
               if (!option.disabled) {
@@ -166,8 +168,6 @@ const CreateDropdown = ({
               return null;
             })
           );
-        } else {
-          options.map((option) => allValues.push(option));
         }
         onChange?.(allValues.map((value) => value.value));
       }
@@ -192,7 +192,131 @@ const CreateDropdown = ({
       }
     }
   };
-  return !Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(
+  return Array.isArray(displayedOptions) ? /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: cn(dropdownContainer, dropdownContainerUnGrouped),
+      gap: 0.25,
+      id: "select-dropdown",
+      onKeyDown: handleKeyDownSelect,
+      role: "listbox",
+      children: [
+        selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-disabled": false,
+            "aria-label": "select-all",
+            "aria-selected": selectedData.allSelected,
+            className: cn(dropdownItem({ selected: selectedData.allSelected })),
+            "data-testid": "select-all",
+            onClick: selectAllOptions,
+            onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
+            role: "option",
+            tabIndex: 0,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selectedData.allSelected,
+                className: dropdownCheckbox,
+                "data-testid": "select-all-checkbox",
+                disabled: false,
+                onChange: selectAllOptions,
+                tabIndex: -1,
+                value: "select-all",
+                children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
+                  /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "span",
+                      placement: "left",
+                      prominence: "weak",
+                      sentiment: "neutral",
+                      variant: "bodySmall",
+                      children: selectAll.description
+                    }
+                  )
+                ] })
+              }
+            )
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs(Stack, { gap: 0.25, id: "items", children: [
+          isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__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-${index}`,
+              onClick: (event) => {
+                if (!option.disabled) {
+                  handleClick({
+                    clickedOption: option,
+                    event
+                  });
+                }
+              },
+              onKeyDown: (event) => {
+                const shouldClick = [" ", "Enter"].includes(event.key);
+                if (shouldClick) {
+                  handleClick({
+                    clickedOption: option,
+                    event
+                  });
+                }
+              },
+              ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
+              role: "option",
+              tabIndex: option.disabled ? -1 : 0,
+              children: multiselect ? /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
+                  className: dropdownCheckbox,
+                  disabled: option.disabled,
+                  onChange: (event) => {
+                    if (!option.disabled) {
+                      handleClick({
+                        clickedOption: option,
+                        event
+                      });
+                    }
+                  },
+                  tabIndex: -1,
+                  value: option.value,
+                  children: /* @__PURE__ */ jsx(
+                    DisplayOption,
+                    {
+                      descriptionDirection,
+                      option,
+                      optionalInfoPlacement
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                DisplayOption,
+                {
+                  descriptionDirection,
+                  option,
+                  optionalInfoPlacement
+                }
+              )
+            },
+            option.value
+          )),
+          loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(
     Stack,
     {
       className: dropdownContainer,
@@ -252,58 +376,61 @@ const CreateDropdown = ({
               {
                 className: dropdownGroupWrapper,
                 id: selectAllGroup ? "items" : void 0,
-                children: group ? /* @__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);
-                      }
+                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()
+                        }
+                      )
                     },
-                    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
+                    group
+                  )
                 ) : null
               }
             ) : null,
@@ -342,7 +469,7 @@ const CreateDropdown = ({
                 },
                 ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
                 role: "option",
-                tabIndex: !option.disabled ? 0 : -1,
+                tabIndex: option.disabled ? -1 : 0,
                 children: multiselect ? /* @__PURE__ */ jsx(
                   Checkbox,
                   {
@@ -385,130 +512,6 @@ const CreateDropdown = ({
         loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
       ]
     }
-  ) : /* @__PURE__ */ jsxs(
-    Stack,
-    {
-      className: cn(dropdownContainer, dropdownContainerUnGrouped),
-      gap: 0.25,
-      id: "select-dropdown",
-      onKeyDown: handleKeyDownSelect,
-      role: "listbox",
-      children: [
-        selectAll && multiselect ? /* @__PURE__ */ jsx(Stack, { gap: 0.25, id: "items", tabIndex: -1, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-disabled": false,
-            "aria-label": "select-all",
-            "aria-selected": selectedData.allSelected,
-            className: cn(dropdownItem({ selected: selectedData.allSelected })),
-            "data-testid": "select-all",
-            onClick: selectAllOptions,
-            onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
-            role: "option",
-            tabIndex: 0,
-            children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                checked: selectedData.allSelected,
-                className: dropdownCheckbox,
-                "data-testid": "select-all-checkbox",
-                disabled: false,
-                onChange: selectAllOptions,
-                tabIndex: -1,
-                value: "select-all",
-                children: /* @__PURE__ */ jsxs(Stack, { direction: "column", children: [
-                  /* @__PURE__ */ jsx(Text, { as: "span", placement: "left", variant: "body", children: selectAll.label }),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      as: "span",
-                      placement: "left",
-                      prominence: "weak",
-                      sentiment: "neutral",
-                      variant: "bodySmall",
-                      children: selectAll.description
-                    }
-                  )
-                ] })
-              }
-            )
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs(Stack, { gap: 0.25, id: "items", children: [
-          isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "block" }) : displayedOptions.map((option, index) => /* @__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-${index}`,
-              onClick: (event) => {
-                if (!option.disabled) {
-                  handleClick({
-                    clickedOption: option,
-                    event
-                  });
-                }
-              },
-              onKeyDown: (event) => {
-                const shouldClick = [" ", "Enter"].includes(event.key);
-                if (shouldClick) {
-                  handleClick({
-                    clickedOption: option,
-                    event
-                  });
-                }
-              },
-              ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
-              role: "option",
-              tabIndex: !option.disabled ? 0 : -1,
-              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
-                      });
-                    }
-                  },
-                  tabIndex: -1,
-                  value: option.value,
-                  children: /* @__PURE__ */ jsx(
-                    DisplayOption,
-                    {
-                      descriptionDirection,
-                      option,
-                      optionalInfoPlacement
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx(
-                DisplayOption,
-                {
-                  descriptionDirection,
-                  option,
-                  optionalInfoPlacement
-                }
-              )
-            },
-            option.value
-          )),
-          loadMore ? /* @__PURE__ */ jsx(Stack, { className: dropdownLoadMore, children: loadMore }) : null
-        ] })
-      ]
-    }
   );
 };
 const Dropdown = ({

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

@@ -22,7 +22,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 +41,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 +64,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,12 +80,6 @@ const SearchBarDropdown = ({
           return null;
         });
         onSearch(filteredOptions);
-      } else {
-        const filteredOptions = searchRegex(
-          [...options],
-          escapeRegExp(search.toString())
-        );
-        onSearch(filteredOptions);
       }
     } else {
       onSearch(options);
@@ -93,9 +93,9 @@ const SearchBarDropdown = ({
         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?.(

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

@@ -67,7 +67,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 +77,7 @@ const DisplayValues = ({
                 (val) => val !== option.value
               );
               onChange?.(newSelectedValues);
-            } : void 0,
+            },
             sentiment: "neutral",
             style: index === nonOverflowedValues.length - 1 && overflow ? assignInlineVars({
               [minWidthTag]: "auto",
@@ -208,10 +208,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 +300,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

@@ -7,11 +7,6 @@ export declare const dropdownGroupSelectable: string;
 export declare const dropdownGroupWrapper: 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})`;
@@ -26,6 +21,11 @@ export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<
             };
         };
     };
+    selected: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
 }>;
 export declare const footer: string;
 export declare const dropdownCheckbox: string;

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

@@ -7,7 +7,7 @@ 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 dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { disabled: { true: "uv_5kpm8k9" }, selected: { true: "uv_5kpm8ka" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
 var footer = "uv_5kpm8kb";
 var dropdownCheckbox = "uv_5kpm8kc";
 var dropdownEmptyState = "uv_5kpm8kd";