@ultraviolet/ui 1.49.0 → 1.51.0

package/dist/index.d.ts

@@ -3534,7 +3534,7 @@ type OptionType = {
 };
 type DataType = Record<string, OptionType[]> | OptionType[];
 
-type SelectInputV2Props = {
+type SelectInputV2Props<IsMulti extends undefined | boolean = false> = {
     /**
      * Input name
      */
@@ -3631,31 +3631,21 @@ type SelectInputV2Props = {
      */
     selectAllGroup?: boolean;
     autofocus?: boolean;
-    'data-testid'?: string;
-    onChange?: (value: string[]) => void;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'> & ({
-    /**
-     * Whether it is possible to select multiple options
-     */
-    multiselect: true;
-    /**
-     * Default value, must be one of the options
-     */
-    value?: string[];
-} | {
     /**
      * Whether it is possible to select multiple options
      */
-    multiselect?: false | undefined;
+    multiselect?: IsMulti;
     /**
      * Default value, must be one of the options
      */
-    value?: string;
-});
+    value?: IsMulti extends true ? string[] : string;
+    onChange?: IsMulti extends true ? (value: string[]) => void : (value: string) => void;
+    'data-testid'?: string;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
 /**
  * SelectInputV2 component is used to select one or many elements from a selection.
  */
-declare const SelectInputV2: ({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SelectInputV2: <IsMulti extends boolean | undefined>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, }: SelectInputV2Props<IsMulti>) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const getUUID: (prefix?: string) => string;
 

package/dist/src/components/SelectInputV2/Dropdown.js

@@ -207,7 +207,6 @@ const CreateDropdown = ({
   isEmpty,
   emptyState,
   descriptionDirection,
-  onChange,
   loadMore,
   optionalInfoPlacement,
   defaultSearchValue,
@@ -215,6 +214,7 @@ const CreateDropdown = ({
 }) => {
   const {
     setIsDropdownVisible,
+    onChange,
     options,
     multiselect,
     selectAll,
@@ -253,44 +253,48 @@ const CreateDropdown = ({
         onChange?.([...selectedData.selectedValues, clickedOption.value]);
       }
     } else {
-      onChange?.([clickedOption.value]);
+      onChange?.(clickedOption.value);
     }
     setIsDropdownVisible(multiselect); // hide the dropdown on click when single select only
   };
   const selectAllOptions = () => {
-    setSelectedData({
-      type: 'selectAll'
-    });
-    if (selectedData.allSelected && onChange) {
-      onChange?.([]);
-    } else {
-      const allValues = [];
-      if (!Array.isArray(options)) {
-        Object.keys(options).map(group => options[group].map(option => {
-          if (!option.disabled) {
-            allValues.push(option);
-          }
-          return null;
-        }));
+    if (multiselect) {
+      setSelectedData({
+        type: 'selectAll'
+      });
+      if (selectedData.allSelected && onChange) {
+        onChange([]);
       } else {
-        options.map(option => allValues.push(option));
+        const allValues = [];
+        if (!Array.isArray(options)) {
+          Object.keys(options).map(group => options[group].map(option => {
+            if (!option.disabled) {
+              allValues.push(option);
+            }
+            return null;
+          }));
+        } else {
+          options.map(option => allValues.push(option));
+        }
+        onChange?.(allValues.map(value => value.value));
       }
-      onChange?.(allValues.map(value => value.value));
     }
   };
   const handleSelectGroup = group => {
-    setSelectedData({
-      type: 'selectGroup',
-      selectedGroup: group
-    });
-    if (!Array.isArray(options)) {
-      if (selectedData.selectedGroups.includes(group)) {
-        const newSelectedValues = [...selectedData.selectedValues].filter(selectedValue => !options[group].find(option => option.value === selectedValue));
-        onChange?.(newSelectedValues);
-      } else {
-        const newSelectedValues = [...selectedData.selectedValues];
-        options[group].map(option => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
-        onChange?.(newSelectedValues);
+    if (multiselect) {
+      setSelectedData({
+        type: 'selectGroup',
+        selectedGroup: group
+      });
+      if (!Array.isArray(options)) {
+        if (selectedData.selectedGroups.includes(group)) {
+          const newSelectedValues = [...selectedData.selectedValues].filter(selectedValue => !options[group].find(option => option.value === selectedValue));
+          onChange?.(newSelectedValues);
+        } else {
+          const newSelectedValues = [...selectedData.selectedValues];
+          options[group].map(option => newSelectedValues.includes(option.value) || option.disabled ? null : newSelectedValues.push(option.value));
+          onChange?.(newSelectedValues);
+        }
       }
     }
   };
@@ -504,7 +508,6 @@ const Dropdown = ({
   searchable,
   placeholder,
   footer,
-  onChange,
   refSelect,
   loadMore,
   optionalInfoPlacement,
@@ -562,13 +565,11 @@ const Dropdown = ({
       children: [searchable && !isLoading ? jsx(SearchBarDropdown, {
         placeholder: placeholder,
         displayedOptions: displayedOptions,
-        setSearchBarActive: setSearchBarActive,
-        onChange: onChange
+        setSearchBarActive: setSearchBarActive
       }) : null, jsx(CreateDropdown, {
         isEmpty: isEmpty,
         emptyState: emptyState,
         descriptionDirection: descriptionDirection,
-        onChange: onChange,
         loadMore: loadMore,
         optionalInfoPlacement: optionalInfoPlacement,
         defaultSearchValue: defaultSearchValue,

package/dist/src/components/SelectInputV2/SearchBarDropdown.js

@@ -1,5 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
+import { useRef, useEffect } from 'react';
 import { TextInputV2 } from '../TextInputV2/index.js';
 import { useSelectInput } from './SelectInputProvider.js';
 import { jsx } from '@emotion/react/jsx-runtime';
@@ -41,10 +42,11 @@ const findClosestOption = (options, searchInput) => {
 const SearchBarDropdown = ({
   placeholder,
   displayedOptions,
-  setSearchBarActive,
-  onChange
+  setSearchBarActive
 }) => {
+  const searchInputRef = useRef(null);
   const {
+    onChange,
     onSearch,
     setSearchInput,
     searchInput,
@@ -92,11 +94,18 @@ const SearchBarDropdown = ({
             type: 'selectOption',
             clickedOption: closestOption
           });
-          onChange?.(selectedData.selectedValues);
+          onChange?.(selectedData.selectedValues[0] ?? '');
         }
       }
     }
   };
+  useEffect(() => {
+    // TODO: Remove me and use autoFocus when popup is fixed
+    // Explanation : Actually the component render at -999px -999px then it will be placed according to child position and it broke the autoFocus (scroll -999px to top)
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 50);
+  }, []);
   return jsx(StyledInput, {
     value: searchInput,
     onChange: event => handleChange(event),
@@ -110,9 +119,9 @@ const SearchBarDropdown = ({
       sentiment: "neutral"
     }),
     onKeyDown: event => handleKeyDown(event.key, searchInput),
-    autoFocus: true,
     size: "medium",
-    "aria-label": "search-bar"
+    "aria-label": "search-bar",
+    ref: searchInputRef
   });
 };
 

package/dist/src/components/SelectInputV2/SelectBar.js

@@ -72,52 +72,56 @@ const StyledPlaceholder = /*#__PURE__*/_styled(Text, {
 }) => theme.colors.neutral.textWeakDisabled, ";}");
 const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled)) : options.some(option => option.value === selectedValue && !option.disabled);
 const DisplayValues = ({
-  multiselect,
   refTag,
   nonOverflowedValues,
   disabled,
   readOnly,
-  onChange,
   overflowed,
   overflowAmount,
-  setSelectedData,
-  selectedData,
-  size,
-  options
-}) => multiselect ? jsxs(Stack, {
-  direction: "row",
-  gap: "1",
-  wrap: "nowrap",
-  ref: refTag,
-  alignItems: "center",
-  children: [nonOverflowedValues.map(option => jsx(CustomTag, {
-    "data-testid": "selected-options-tags",
-    sentiment: "neutral",
-    disabled: disabled,
-    onClose: !readOnly ? event => {
-      event.stopPropagation();
-      setSelectedData({
-        type: 'selectOption',
-        clickedOption: option
-      });
-      const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option.value);
-      onChange?.(newSelectedValues);
-    } : undefined,
-    children: option?.label
-  }, option?.value)), overflowed ? jsxs(Tag, {
-    sentiment: "neutral",
-    disabled: disabled,
-    "data-testid": "plus-tag",
-    "aria-label": "Plus tag",
-    children: [jsx(Icon, {
-      name: "plus"
-    }), overflowAmount]
-  }, "+") : null]
-}) : jsx(Text, {
-  as: "p",
-  variant: size === 'large' ? 'body' : 'bodySmall',
-  children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
-});
+  size
+}) => {
+  const {
+    multiselect,
+    selectedData,
+    setSelectedData,
+    options,
+    onChange
+  } = useSelectInput();
+  return multiselect ? jsxs(Stack, {
+    direction: "row",
+    gap: "1",
+    wrap: "nowrap",
+    ref: refTag,
+    alignItems: "center",
+    children: [nonOverflowedValues.map(option => jsx(CustomTag, {
+      "data-testid": "selected-options-tags",
+      sentiment: "neutral",
+      disabled: disabled,
+      onClose: !readOnly ? event => {
+        event.stopPropagation();
+        setSelectedData({
+          type: 'selectOption',
+          clickedOption: option
+        });
+        const newSelectedValues = selectedData.selectedValues?.filter(val => val !== option.value);
+        onChange?.(newSelectedValues);
+      } : undefined,
+      children: option?.label
+    }, option?.value)), overflowed ? jsxs(Tag, {
+      sentiment: "neutral",
+      disabled: disabled,
+      "data-testid": "plus-tag",
+      "aria-label": "Plus tag",
+      children: [jsx(Icon, {
+        name: "plus"
+      }), overflowAmount]
+    }, "+") : null]
+  }) : jsx(Text, {
+    as: "p",
+    variant: size === 'large' ? 'body' : 'bodySmall',
+    children: selectedData.selectedValues[0] ? findOptionInOptions(options, selectedData.selectedValues[0])?.label : null
+  });
+};
 const SelectBar = ({
   size,
   clearable,
@@ -126,17 +130,17 @@ const SelectBar = ({
   placeholder,
   success,
   error,
-  onChange,
   autoFocus,
   innerRef
 }) => {
   const {
     isDropdownVisible,
+    onChange,
     setIsDropdownVisible,
     options,
-    multiselect,
     selectedData,
-    setSelectedData
+    setSelectedData,
+    multiselect
   } = useSelectInput();
   const openable = !(readOnly || disabled);
   const refTag = useRef(null);
@@ -223,18 +227,13 @@ const SelectBar = ({
     "aria-controls": "select-dropdown",
     tabIndex: 0,
     children: [selectedData.selectedValues.length > 0 ? jsx(DisplayValues, {
-      multiselect: multiselect,
       refTag: refTag,
       nonOverflowedValues: nonOverflowedValues,
       disabled: disabled,
       readOnly: readOnly,
-      selectedData: selectedData,
-      setSelectedData: setSelectedData,
-      onChange: onChange,
       overflowed: overflowed,
       overflowAmount: overflowAmount,
-      size: size,
-      options: options
+      size: size
     }) : jsx(StyledPlaceholder, {
       as: "p",
       variant: size === 'large' ? 'body' : 'bodySmall',
@@ -261,7 +260,11 @@ const SelectBar = ({
           setSelectedData({
             type: 'clearAll'
           });
-          onChange?.([]);
+          if (multiselect) {
+            onChange?.([]);
+          } else {
+            onChange?.('');
+          }
         },
         sentiment: "neutral",
         "data-testid": "clear-all"

package/dist/src/components/SelectInputV2/SelectInputProvider.js

@@ -20,7 +20,8 @@ const SelectInputContext = /*#__PURE__*/createContext({
     selectedGroups: [],
     selectedValues: []
   },
-  setSelectedData: () => {}
+  setSelectedData: () => {},
+  onChange: () => {}
 });
 const useSelectInput = () => useContext(SelectInputContext);
 const SelectInputProvider = ({
@@ -30,7 +31,8 @@ const SelectInputProvider = ({
   value,
   selectAllGroup,
   numberOfOptions,
-  children
+  children,
+  onChange
 }) => {
   const currentValue = useMemo(() => {
     if (value) {
@@ -155,8 +157,9 @@ const SelectInputProvider = ({
     numberOfOptions,
     displayedOptions,
     selectedData,
-    setSelectedData
-  }), [displayedOptions, isDropdownVisible, multiselect, numberOfOptions, options, searchInput, selectAll, selectAllGroup, selectedData]);
+    setSelectedData,
+    onChange
+  }), [displayedOptions, isDropdownVisible, multiselect, numberOfOptions, options, searchInput, selectAll, selectAllGroup, selectedData, onChange]);
   return jsx(SelectInputContext.Provider, {
     value: providerValue,
     children: children

package/dist/src/components/SelectInputV2/index.js

@@ -72,6 +72,7 @@ const SelectInputV2 = ({
     value: value,
     selectAllGroup: selectAllGroup,
     numberOfOptions: numberOfOptions,
+    onChange: onChange,
     children: jsxs(SelectInputContainer, {
       id: id,
       onBlur: onBlur,
@@ -85,7 +86,6 @@ const SelectInputV2 = ({
         searchable: searchable,
         placeholder: placeholderSearch,
         footer: footer,
-        onChange: onChange,
         refSelect: ref,
         loadMore: loadMore,
         optionalInfoPlacement: optionalInfoPlacement,
@@ -113,7 +113,6 @@ const SelectInputV2 = ({
             placeholder: placeholder,
             success: success,
             error: error,
-            onChange: onChange,
             autoFocus: autofocus,
             innerRef: ref
           })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.49.0",
+  "version": "1.51.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {