@evoke-platform/ui-components 1.6.0-dev.5 → 1.6.0-dev.7

package/dist/published/components/custom/FormField/Select/Select.js

@@ -1,4 +1,5 @@
 import { createFilterOptions, List, ListSubheader } from '@mui/material';
+import { uniq } from 'lodash';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { Clear } from '../../../../icons';
 import { Autocomplete, FormControl, FormControlLabel, IconButton, Radio, RadioGroup, TextField, Typography, } from '../../../core';
@@ -15,7 +16,7 @@ const Select = (props) => {
     const [isOtherFocused, setIsOtherFocused] = useState(false);
     const [value, setValue] = useState(defaultValue);
     const [inputValue, setInputValue] = useState(!selectOptions?.some((option) => (typeof option === 'string' && option === defaultValue) ||
-        option.value === defaultValue)
+        option.value === defaultValue) && property.type !== 'array'
         ? defaultValue
         : '');
     const [errorState, setErrorState] = useState();
@@ -27,11 +28,14 @@ const Select = (props) => {
             otherInputRef.current.focus();
         }
     }, [isOther, value]);
+    useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleChange = (event, selected) => {
         if (Array.isArray(selected)) {
             const newValues = selected.map((option) => option.value ?? option);
-            setValue(newValues);
+            setValue(uniq(newValues));
             onChange && onChange(property.id, newValues, property);
         }
         else {
@@ -144,6 +148,7 @@ const Select = (props) => {
                 filtered.push({
                     value: inputValue,
                     label: `Add "${inputValue}"`,
+                    isCustomValue: true,
                 });
             }
             return filtered;
@@ -151,12 +156,19 @@ const Select = (props) => {
             ? (option, value) => isOptionEqualToValue(option, value)
             : undefined, getOptionLabel: getOptionLabel && !isCombobox
             ? (option) => getOptionLabel(option)
-            : (option) => (typeof option === 'string' ? option : option.label), renderOption: renderOption
+            : (option) => {
+                if (typeof option === 'string')
+                    return option;
+                // If the option is a custom value, return the value without the prepended "Add" text.
+                if (option.isCustomValue)
+                    return option.value;
+                return option.label ?? '';
+            }, renderOption: renderOption
             ? (props, option, state) => renderOption(props, option, state)
-            : undefined, ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
+            : (props, option) => React.createElement("li", { ...props }, option.label ?? option), ListboxComponent: ListboxComponent, disableCloseOnSelect: disableCloseOnSelect, sx: {
             '& button.MuiButtonBase-root': {
                 visibility: 'visible',
             },
-        }, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
+        }, forcePopupIcon: true, ...(isCombobox ? { selectOnFocus: true, handleHomeEndKeys: true, freeSolo: true } : {}), ...(additionalProps ?? {}) }));
 };
 export default Select;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.6.0-dev.5",
+    "version": "1.6.0-dev.7",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",