@ultraviolet/ui 1.48.1 → 1.50.0

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

@@ -91,7 +91,7 @@ const DropdownItem = /*#__PURE__*/_styled("button", {
   theme
 }) => theme.colors.primary.background, ";color:", ({
   theme
-}) => theme.colors.primary.text, ";cursor:'pointer';outline:none;}&[data-selected='true']{background-color:", ({
+}) => theme.colors.primary.text, ";cursor:pointer;outline:none;}&[data-selected='true']{background-color:", ({
   theme
 }) => theme.colors.primary.background, ";}&[disabled]{background-color:", ({
   theme
@@ -118,13 +118,14 @@ const PopupFooter = /*#__PURE__*/_styled("div", {
 const StyledCheckbox = /*#__PURE__*/_styled(Checkbox, {
   target: "eeucz6c2"
 })(process.env.NODE_ENV === "production" ? {
-  name: "10y07ze",
-  styles: "width:100%;position:static;text-align:left;align-items:center"
+  name: "1l9xw77",
+  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none"
 } : {
-  name: "10y07ze",
-  styles: "width:100%;position:static;text-align:left;align-items:center",
+  name: "1l9xw77",
+  styles: "width:100%;position:static;text-align:left;align-items:center;pointer-events:none",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
+}); // pointer-events: none prevents any error when using the checkbox in a form since it is an unnamed input
+
 const EmptyState = /*#__PURE__*/_styled(Stack, {
   target: "eeucz6c1"
 })("padding:", ({
@@ -206,7 +207,6 @@ const CreateDropdown = ({
   isEmpty,
   emptyState,
   descriptionDirection,
-  onChange,
   loadMore,
   optionalInfoPlacement,
   defaultSearchValue,
@@ -214,6 +214,7 @@ const CreateDropdown = ({
 }) => {
   const {
     setIsDropdownVisible,
+    onChange,
     options,
     multiselect,
     selectAll,
@@ -246,50 +247,54 @@ const CreateDropdown = ({
       group
     });
     if (multiselect) {
-      if (selectedData.selectedValues.includes(clickedOption)) {
-        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption).map(val => val?.value));
+      if (selectedData.selectedValues.includes(clickedOption.value)) {
+        onChange?.(selectedData.selectedValues.filter(val => val !== clickedOption.value));
       } else {
-        onChange?.([...selectedData.selectedValues, clickedOption].map(val => val?.value));
+        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].includes(selectedValue));
-        onChange?.(newSelectedValues.map(value => value.value));
-      } else {
-        const newSelectedValues = [...selectedData.selectedValues];
-        options[group].map(option => newSelectedValues.includes(option) || option.disabled ? null : newSelectedValues.push(option));
-        onChange?.(newSelectedValues.map(value => value.value));
+    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);
+        }
       }
     }
   };
@@ -314,12 +319,12 @@ const CreateDropdown = ({
           id: "select-all",
           role: "option",
           onKeyDown: event => [' ', 'Enter'].includes(event.key) ? selectAllOptions() : null,
+          onClick: selectAllOptions,
           children: jsx(StyledCheckbox, {
             checked: selectedData.allSelected,
             disabled: false,
             value: "select-all",
             "data-testid": "select-all-checkbox",
-            onChange: selectAllOptions,
             tabIndex: -1,
             children: jsxs(Stack, {
               direction: "column",
@@ -339,7 +344,7 @@ const CreateDropdown = ({
             })
           })
         })
-      }) : null, Object.keys(displayedOptions).map(group => jsxs(Stack, {
+      }) : null, Object.keys(displayedOptions).map((group, index) => jsxs(Stack, {
         gap: 0.25,
         children: [displayedOptions[group].length > 0 ? jsx(DropdownGroupWrapper, {
           id: selectAllGroup ? 'items' : undefined,
@@ -353,11 +358,12 @@ const CreateDropdown = ({
             },
             "data-selectgroup": selectAllGroup,
             role: "group",
+            "data-testid": `group-${index}`,
+            onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
             children: selectAllGroup ? jsx(StyledCheckbox, {
               checked: selectedData.selectedGroups.includes(group),
               disabled: false,
               value: group,
-              onChange: () => handleSelectGroup(group),
               "data-testid": "select-group",
               tabIndex: -1,
               children: jsx(Text, {
@@ -376,12 +382,12 @@ const CreateDropdown = ({
         }) : null, jsxs(Stack, {
           id: "items",
           gap: "0.25",
-          children: [displayedOptions[group].map((option, index) => jsx(DropdownItem, {
+          children: [displayedOptions[group].map((option, indexOption) => jsx(DropdownItem, {
             disabled: option.disabled,
-            "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+            "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
             "aria-label": option.value,
-            "data-testid": `option-${index}`,
-            id: `option-${index}`,
+            "data-testid": `option-${option.value}`,
+            id: `option-${indexOption}`,
             role: "option",
             onClick: () => {
               if (!option.disabled) {
@@ -391,19 +397,17 @@ const CreateDropdown = ({
             onKeyDown: event => [' ', 'Enter'].includes(event.key) ? handleClick(option, group) : null,
             ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
             children: multiselect ? jsx(StyledCheckbox, {
-              checked: selectedData.selectedValues.includes(option) && !option.disabled,
+              checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
               disabled: option.disabled,
               value: option.value,
               tabIndex: -1,
               children: jsx(DisplayOption, {
                 option: option,
-                multiselect: multiselect,
                 descriptionDirection: descriptionDirection,
                 optionalInfoPlacement: optionalInfoPlacement
               })
             }) : jsx(DisplayOption, {
               option: option,
-              multiselect: multiselect,
               descriptionDirection: descriptionDirection,
               optionalInfoPlacement: optionalInfoPlacement
             })
@@ -432,12 +436,12 @@ const CreateDropdown = ({
         "data-testid": "select-all",
         role: "option",
         onKeyDown: event => [' ', 'Enter'].includes(event.key) ? selectAllOptions() : null,
+        onClick: selectAllOptions,
         children: jsx(StyledCheckbox, {
           checked: selectedData.allSelected,
           disabled: false,
           value: "select-all",
           "data-testid": "select-all-checkbox",
-          onChange: selectAllOptions,
           tabIndex: -1,
           children: jsxs(Stack, {
             direction: "column",
@@ -464,32 +468,30 @@ const CreateDropdown = ({
         variant: "block"
       }) : displayedOptions.map((option, index) => jsx(DropdownItem, {
         disabled: option.disabled,
-        "data-selected": selectedData.selectedValues.includes(option) && !option.disabled,
+        "data-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
         onClick: () => {
           if (!option.disabled) {
             handleClick(option);
           }
         },
         "aria-label": option.value,
-        "data-testid": `option-${index}`,
+        "data-testid": `option-${option.value}`,
         id: `option-${index}`,
         role: "option",
         ref: option.value === defaultSearchValue || option.searchText === defaultSearchValue ? focusedItemRef : null,
         onKeyDown: event => [' ', 'Enter'].includes(event.key) ? handleClick(option) : null,
         children: multiselect ? jsx(StyledCheckbox, {
-          checked: selectedData.selectedValues.includes(option) && !option.disabled,
+          checked: selectedData.selectedValues.includes(option.value) && !option.disabled,
           disabled: option.disabled,
           value: option.value,
           tabIndex: -1,
           children: jsx(DisplayOption, {
             option: option,
-            multiselect: multiselect,
             descriptionDirection: descriptionDirection,
             optionalInfoPlacement: optionalInfoPlacement
           })
         }) : jsx(DisplayOption, {
           option: option,
-          multiselect: multiselect,
           descriptionDirection: descriptionDirection,
           optionalInfoPlacement: optionalInfoPlacement
         })
@@ -506,7 +508,6 @@ const Dropdown = ({
   searchable,
   placeholder,
   footer,
-  onChange,
   refSelect,
   loadMore,
   optionalInfoPlacement,
@@ -564,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/DropdownOption.js

@@ -16,7 +16,6 @@ const StyledInfo = /*#__PURE__*/_styled("div", {
 });
 const DisplayOption = ({
   option,
-  multiselect,
   optionalInfoPlacement,
   descriptionDirection
 }) => {
@@ -25,7 +24,6 @@ const DisplayOption = ({
       gap: 0.5,
       direction: "row",
       justifyContent: "left",
-      onClick: event => multiselect ? event.stopPropagation() : null,
       "data-testid": `option-stack-${option.value}`,
       children: jsxs(Stack, {
         gap: 0.5,
@@ -52,7 +50,6 @@ const DisplayOption = ({
       gap: 0.5,
       direction: "row",
       justifyContent: "space-between",
-      onClick: event => multiselect ? event.stopPropagation() : null,
       alignItems: "baseline",
       "data-testid": `option-stack-${option.value}`,
       children: [jsxs(Stack, {
@@ -85,7 +82,6 @@ const DisplayOption = ({
       children: [option.optionalInfo ?? null, jsxs(Stack, {
         gap: 0.5,
         direction: "column",
-        onClick: event => multiselect ? event.stopPropagation() : null,
         "data-testid": `option-stack-${option.value}`,
         children: [jsx(Text, {
           as: "span",
@@ -107,7 +103,6 @@ const DisplayOption = ({
     gap: 0.5,
     direction: "column",
     alignItems: "normal",
-    onClick: event => multiselect ? event.stopPropagation() : null,
     "data-testid": `option-stack-${option.value}`,
     children: [jsxs(Stack, {
       gap: 0.5,

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

@@ -41,10 +41,10 @@ const findClosestOption = (options, searchInput) => {
 const SearchBarDropdown = ({
   placeholder,
   displayedOptions,
-  setSearchBarActive,
-  onChange
+  setSearchBarActive
 }) => {
   const {
+    onChange,
     onSearch,
     setSearchInput,
     searchInput,
@@ -85,14 +85,14 @@ const SearchBarDropdown = ({
             clickedOption: closestOption,
             group: !Array.isArray(options) ? Object.keys(options).filter(group => options[group].includes(closestOption))[0] : undefined
           });
-          onChange?.(selectedData.selectedValues.includes(closestOption) ? selectedData.selectedValues.map(val => val?.value) : [...selectedData.selectedValues, closestOption].map(val => val?.value));
+          onChange?.(selectedData.selectedValues.includes(closestOption.value) ? selectedData.selectedValues : [...selectedData.selectedValues, closestOption.value]);
           setSearchInput(closestOption.searchText ?? closestOption.value);
         } else {
           setSelectedData({
             type: 'selectOption',
             clickedOption: closestOption
           });
-          onChange?.(selectedData.selectedValues.map(val => val?.value));
+          onChange?.(selectedData.selectedValues[0] ?? '');
         }
       }
     }

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

@@ -6,6 +6,7 @@ import { Stack } from '../Stack/index.js';
 import { Tag } from '../Tag/index.js';
 import { Text } from '../Text/index.js';
 import { useSelectInput } from './SelectInputProvider.js';
+import { findOptionInOptions } from './findOptionInOptions.js';
 import { INPUT_SIZE_HEIGHT, SIZES_TAG } from './types.js';
 import { jsxs, jsx } from '@emotion/react/jsx-runtime';
 
@@ -25,9 +26,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.neutral.background, ";border-radius:", ({
   theme
-}) => theme.radii.default, ";&:hover,:focus{border-color:", ({
-  theme
-}) => theme.colors.primary.borderHover, ";outline:none;}&[data-readonly='true']{background:", ({
+}) => theme.radii.default, ";&[data-readonly='true']{background:", ({
   theme
 }) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
   theme
@@ -35,7 +34,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
   theme
-}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='larger']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
+}) => theme.colors.neutral.borderDisabled, ";cursor:not-allowed;}&[data-size='small']{height:", INPUT_SIZE_HEIGHT.small, "px;}&[data-size='medium']{height:", INPUT_SIZE_HEIGHT.medium, "px;}&[data-size='large']{height:", INPUT_SIZE_HEIGHT.large, "px;}&[data-state='neutral']{border:1px solid ", ({
   theme
 }) => theme.colors.neutral.border, ";}&[data-state='success']{border:1px solid ", ({
   theme
@@ -45,7 +44,9 @@ const StyledInputWrapper = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.colors.primary.border, ";}&:not([data-disabled='true']):not([data-readonly]):active{box-shadow:", ({
   theme
-}) => theme.shadows.focusPrimary, ";}&[data-dropdownvisible='true']{box-shadow:", ({
+}) => theme.shadows.focusPrimary, ";}&:hover,:focus{border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";outline:none;}&[data-dropdownvisible='true']{box-shadow:", ({
   theme
 }) => theme.shadows.focusPrimary, ";border-color:", ({
   theme
@@ -69,53 +70,58 @@ const StyledPlaceholder = /*#__PURE__*/_styled(Text, {
 }) => theme.typography.body.fontSize, ";display:flex;flex:1;align-self:center;&[data-disabled='true']{color:", ({
   theme
 }) => theme.colors.neutral.textWeakDisabled, ";}");
-const isValidSelectedValue = (selectedValue, options) => !Array.isArray(options) ? Object.keys(options).some(group => options[group].some(option => option === selectedValue && !option.disabled)) : options.some(option => option === selectedValue && !option.disabled);
+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
-}) => 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);
-      onChange?.(newSelectedValues.map(val => val?.value));
-    } : 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]?.label
-});
+}) => {
+  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,
@@ -124,24 +130,30 @@ 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);
   const width = innerRef.current?.offsetWidth;
   const [overflowed, setOverflowed] = useState(false);
   const [overflowAmount, setOverflowAmount] = useState(0);
-  const [nonOverflowedValues, setNonOverFlowedValues] = useState(selectedData.selectedValues[0] ? [selectedData.selectedValues[0]] : []);
+  const [nonOverflowedValues, setNonOverFlowedValues] = useState(() => {
+    if (selectedData.selectedValues[0]) {
+      const firstSelectOption = findOptionInOptions(options, selectedData.selectedValues[0]);
+      return firstSelectOption ? [firstSelectOption] : [];
+    }
+    return [];
+  });
   const state = useMemo(() => {
     if (error) {
       return 'danger';
@@ -158,14 +170,15 @@ const SelectBar = ({
     let computedNonOverflowedValues = [];
     const newSelectedValues = selectedData.selectedValues.filter(selectedValue => isValidSelectedValue(selectedValue, options));
     for (const selectedValue of newSelectedValues) {
-      if (selectedValue && selectedValue.label && width && isValidSelectedValue(selectedValue, options)) {
-        const lengthValue = selectedValue.value.length; // Find a better way to find the number of displayed characters?
+      const selectedOption = findOptionInOptions(options, selectedValue);
+      if (selectedOption?.label && width && isValidSelectedValue(selectedValue, options)) {
+        const lengthValue = selectedOption.value.length; // Find a better way to find the number of displayed characters?
         const totalTagWidth = SIZES_TAG.tagWidth + SIZES_TAG.letterWidth * lengthValue;
         if (totalTagWidth + tagsWidth > width - 100) {
           computedOverflowAmount += 1;
           setOverflowAmount(computedOverflowAmount);
         } else {
-          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedValue];
+          computedNonOverflowedValues = [...computedNonOverflowedValues, selectedOption];
           setNonOverFlowedValues(computedNonOverflowedValues);
           tagsWidth += totalTagWidth;
         }
@@ -214,14 +227,10 @@ 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
@@ -251,7 +260,11 @@ const SelectBar = ({
           setSelectedData({
             type: 'clearAll'
           });
-          onChange?.([]);
+          if (multiselect) {
+            onChange?.([]);
+          } else {
+            onChange?.('');
+          }
         },
         sentiment: "neutral",
         "data-testid": "clear-all"