@groupeactual/ui-kit 1.0.5 → 1.0.7

package/src/components/Form/AutoCompleteMulti/AutoCompleteMulti.tsx

@@ -26,7 +26,7 @@ import Chip from '../../Chip/Chip';
 interface AutocompleteMultipleSelectProps<T>
   extends Omit<
     AutocompleteProps<T, true, true, false>,
-    'value' | 'onChange' | 'defaultValue' | 'options' | 'renderInput' | 'error'
+    'onChange' | 'defaultValue' | 'options' | 'renderInput' | 'error'
   > {
   label?: string;
   helperText?: string;
@@ -65,7 +65,7 @@ const AutocompleteMultipleSelect = <T,>({
   const [inputValue, setInputValue] = useState('');
 
   const handleValueChange = (
-    event: React.SyntheticEvent<Element, Event>,
+    _event: React.SyntheticEvent<Element, Event>,
     newValue: T[]
   ) => {
     setValue(newValue);
@@ -76,7 +76,7 @@ const AutocompleteMultipleSelect = <T,>({
   };
 
   const handleInputChange = (
-    event: React.SyntheticEvent<Element, Event>,
+    _event: React.SyntheticEvent<Element, Event>,
     newInputValue: string
   ) => {
     setInputValue(newInputValue);
@@ -88,9 +88,14 @@ const AutocompleteMultipleSelect = <T,>({
   };
 
   const handleDeleteChip = (chipValue: T) => {
-    const newValue = value?.filter((val) => val !== chipValue);
-    if (onChange) onChange(newValue);
-    setValue(newValue);
+    const newValue = props?.value ?
+      props?.value?.filter((val) => val !== chipValue) :
+      value?.filter((val) => val !== chipValue);
+
+    if (newValue) {
+      if (onChange) onChange(newValue);
+      setValue(newValue);
+    }
   };
 
   const preventEventPropagation = (event: React.MouseEvent) => {
@@ -100,10 +105,10 @@ const AutocompleteMultipleSelect = <T,>({
   const addFormControlClassName = useMemo(() => {
     const classNames: string[] = ['DsAutoComplete DsAutoCompleteMulti'];
     if (disabled) classNames.push('Mui-disabled');
-    if (value?.length > 0) classNames.push('Mui-filled');
+    if ((props.value && props.value?.length > 0) || value?.length > 0) classNames.push('Mui-filled');
 
     return classNames.join(' ');
-  }, [value, disabled]);
+  }, [value, disabled, props?.value]);
 
   const addInputLabelClassName = useMemo(() => {
     const classNames: string[] = [];
@@ -111,10 +116,10 @@ const AutocompleteMultipleSelect = <T,>({
     if (error) classNames.push('Mui-error');
     if (color === 'success') classNames.push('Mui-success');
     if (disabled) classNames.push('Mui-disabled');
-    if (value?.length > 0) classNames.push('Mui-Input-filled');
+    if ((props.value && props.value?.length > 0) || value?.length > 0) classNames.push('Mui-Input-filled');
 
     return classNames.join(' ');
-  }, [error, disabled]);
+  }, [error, disabled, props?.value, value]);
 
   return (
     <Box sx={{ width }}>
@@ -127,12 +132,12 @@ const AutocompleteMultipleSelect = <T,>({
           value={value}
           onChange={handleValueChange}
           onInputChange={handleInputChange}
+          inputValue={inputValue}
           {...props}
           placeholder={value.length || label === placeholder ? '' : placeholder}
           disableCloseOnSelect
           multiple
           disabled={disabled}
-          inputValue={inputValue}
           options={options}
           clearIcon={
             <>
@@ -154,10 +159,10 @@ const AutocompleteMultipleSelect = <T,>({
               size={color === 'success' ? 'md' : 'sm'}
             />
           }
-          renderTags={(value: T[]) => {
+          renderTags={(tag: T[]) => {
             return (
               <>
-                {value.map((selectedOption: T, index: number) => (
+                {tag.map((selectedOption: T, _index: number) => (
                   <Chip
                     key={getKeyValue(selectedOption)}
                     variant="filled"

package/src/components/Form/AutoCompleteSingle/AutoCompleteSingle.tsx

@@ -23,7 +23,7 @@ import IconProvider from '../../Icon';
 interface Props<T>
   extends Omit<
     AutocompleteProps<T, false, false, false>,
-    'value' | 'onChange' | 'defaultValue' | 'options' | 'renderInput' | 'error'
+    'onChange' | 'defaultValue' | 'options' | 'renderInput' | 'error'
   > {
   label: string;
   options: T[];
@@ -84,10 +84,10 @@ const AutoCompleteSingle = <T extends {}>({
   const getFormControlClassName = useMemo(() => {
     const classNames: string[] = ['DsAutoComplete DsAutoCompleteSingle'];
     if (disabled) classNames.push('Mui-disabled');
-    if (value) classNames.push('Mui-filled');
+    if (props?.value || value) classNames.push('Mui-filled');
 
     return classNames.join(' ');
-  }, [value, disabled]);
+  }, [value, props?.value, disabled]);
 
   const getInputLabelClassName = useMemo(() => {
     const classNames: string[] = [];