@ultraviolet/ui 1.48.1 → 1.50.0

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

@@ -1,4 +1,4 @@
-import { useState, useReducer, useMemo, createContext, useContext } from 'react';
+import { useMemo, useState, useReducer, createContext, useContext } from 'react';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const SelectInputContext = /*#__PURE__*/createContext({
@@ -20,7 +20,8 @@ const SelectInputContext = /*#__PURE__*/createContext({
     selectedGroups: [],
     selectedValues: []
   },
-  setSelectedData: () => {}
+  setSelectedData: () => {},
+  onChange: () => {}
 });
 const useSelectInput = () => useContext(SelectInputContext);
 const SelectInputProvider = ({
@@ -30,25 +31,39 @@ const SelectInputProvider = ({
   value,
   selectAllGroup,
   numberOfOptions,
-  children
+  children,
+  onChange
 }) => {
-  const defaultValue = value ? [value] : [];
+  const currentValue = useMemo(() => {
+    if (value) {
+      if (Array.isArray(value)) {
+        return value;
+      }
+      return [value];
+    }
+    return [];
+  }, [value]);
+  const selectedGroups = useMemo(() => {
+    if (Array.isArray(options)) {
+      return [];
+    }
+    return Object.keys(options).filter(group => options[group].every(groupOption => currentValue.includes(groupOption.value)));
+  }, [currentValue, options]);
   const [displayedOptions, setDisplayedOptions] = useState(options);
   const [isDropdownVisible, setIsDropdownVisible] = useState(false);
   const [searchInput, setSearchInput] = useState('');
-  const allValues = [];
-  const allGroups = [];
-  if (!Array.isArray(options)) {
-    Object.keys(options).map(group => options[group].map(option => {
-      if (!option.disabled) {
-        allValues.push(option);
-      }
-      return null;
-    }));
-    Object.keys(options).forEach(group => allGroups.push(group));
-  } else {
-    options.map(option => allValues.push(option));
-  }
+  const allValues = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options).map(group => options[group].filter(option => !option.disabled)).flat();
+    }
+    return options;
+  }, [options]);
+  const allGroups = useMemo(() => {
+    if (!Array.isArray(options)) {
+      return Object.keys(options);
+    }
+    return [];
+  }, [options]);
   const reducer = (state, action) => {
     switch (action.type) {
       case 'selectAll':
@@ -60,7 +75,7 @@ const SelectInputProvider = ({
           };
         }
         return {
-          selectedValues: allValues,
+          selectedValues: allValues.map(option => option.value),
           allSelected: true,
           selectedGroups: allGroups
         };
@@ -68,13 +83,13 @@ const SelectInputProvider = ({
         if (!Array.isArray(options)) {
           if (state.selectedGroups.includes(action.selectedGroup)) {
             return {
-              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].includes(selectedValue)),
+              selectedValues: [...state.selectedValues].filter(selectedValue => !options[action.selectedGroup].find(option => option.value === selectedValue)),
               allSelected: false,
               selectedGroups: state.selectedGroups.filter(selectedGroup => selectedGroup !== action.selectedGroup)
             };
           }
           const newSelectedValues = [...state.selectedValues];
-          options[action.selectedGroup].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
+          options[action.selectedGroup].map(option => newSelectedValues.find(aValue => aValue === option.value) || option.disabled ? null : newSelectedValues.push(option.value));
           return {
             selectedValues: newSelectedValues,
             allSelected: newSelectedValues.length === numberOfOptions,
@@ -84,21 +99,21 @@ const SelectInputProvider = ({
         return state;
       case 'selectOption':
         if (multiselect) {
-          if (state.selectedValues.includes(action.clickedOption)) {
+          if (state.selectedValues.includes(action.clickedOption.value)) {
             return {
-              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption),
+              selectedValues: state.selectedValues.filter(val => val !== action.clickedOption.value),
               allSelected: false,
               selectedGroups: action.group && state.selectedGroups.includes(action.group) ? state.selectedGroups.filter(selectedGroup => selectedGroup !== action.group) : []
             };
           }
           return {
-            selectedValues: [...state.selectedValues, action.clickedOption],
+            selectedValues: [...state.selectedValues, action.clickedOption.value],
             allSelected: state.selectedValues.length + 1 === numberOfOptions,
-            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption].includes(option) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
+            selectedGroups: !Array.isArray(options) && action.group && options[action.group].every(option => [...state.selectedValues, action.clickedOption.value].includes(option.value) || option.disabled) ? [...state.selectedGroups, action.group] : state.selectedGroups
           };
         }
         return {
-          selectedValues: [action.clickedOption],
+          selectedValues: [action.clickedOption.value],
           allSelected: false,
           selectedGroups: state.selectedGroups
         };
@@ -115,9 +130,9 @@ const SelectInputProvider = ({
           allSelected: state.allSelected,
           selectedValues: state.selectedValues.filter(selectedValue => {
             if (!Array.isArray(options)) {
-              return Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled));
+              return Object.keys(options).some(group => options[group].some(option => option.value === selectedValue && !option.disabled));
             }
-            return options.some(option => option === selectedValue && !option.disabled);
+            return options.some(option => option.value === selectedValue && !option.disabled);
           })
         };
       default:
@@ -125,9 +140,9 @@ const SelectInputProvider = ({
     }
   };
   const [selectedData, setSelectedData] = useReducer(reducer, {
-    selectedValues: defaultValue,
+    selectedValues: currentValue,
     allSelected: false,
-    selectedGroups: []
+    selectedGroups
   });
   const providerValue = useMemo(() => ({
     onSearch: setDisplayedOptions,
@@ -142,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/findOptionInOptions.js

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

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,
@@ -100,7 +100,7 @@ const SelectInputV2 = ({
               as: "label",
               variant: size === 'large' ? 'bodyStrong' : 'bodySmallStrong',
               children: label
-            }) : null, required ? jsx(Icon, {
+            }) : null, required && label ? jsx(Icon, {
               name: "asterisk",
               sentiment: "danger",
               size: 8
@@ -113,7 +113,6 @@ const SelectInputV2 = ({
             placeholder: placeholder,
             success: success,
             error: error,
-            onChange: onChange,
             autoFocus: autofocus,
             innerRef: ref
           })]

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

@@ -117,7 +117,7 @@ const SelectableCardGroup = ({
             }) : null]
           }) : null, jsx(Row, {
             gap: 2,
-            templateColumns: `repeat(${columns}, auto)`,
+            templateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             children: children
           })]
         })

package/dist/src/index.js

@@ -20,6 +20,7 @@ export { Carousel } from './components/Carousel/index.js';
 export { Checkbox } from './components/Checkbox/index.js';
 export { CopyButton } from './components/CopyButton/index.js';
 export { DateInput } from './components/DateInput/index.js';
+export { Dialog } from './components/Dialog/index.js';
 export { EmptyState } from './components/EmptyState/index.js';
 export { Expandable } from './components/Expandable/index.js';
 export { LineChart } from './components/LineChart/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.48.1",
+  "version": "1.50.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "engines": {
     "node": ">=18.x",
-    "pnpm": ">=8.0.0"
+    "pnpm": ">=9.x"
   },
   "os": [
     "darwin",
@@ -56,7 +56,7 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scales": "0.80.0",
-    "@scaleway/random-name": "5.0.1",
+    "@scaleway/random-name": "5.0.2",
     "@scaleway/use-media": "3.0.1",
     "deepmerge": "4.3.1",
     "react-datepicker": "4.25.0",