Feature/Remake Autocomplete

[dragos-rosca]

I have remade the autocomplete and removed some unnecessary features.

Main changes:

• onChange is no longer a required property.
• valueKey and labelKey are now string or function.
• the following props have been removed:
  • defaultOptions it was useless and overcomplicated.
  • simpleValue we can do without it.
  • typographyContentColor doesn't work with material ui 6.
  • inputSelectedColor doesn't work with material ui 6.
  • stopEventPropagation no longer needed and improved.
• debounce on typing is no longer implemented because we do not have a robust solution yet.
• you can send both options and loadOptions
• infinite scroll works better and doesn't break when the first page doesn't have a scroll bar
• the main functionalities have comments with explanations.
• when creating a new option you will get the correct createOption reason and value will be a string regardless of the option type.
• getOptionDisabled is no longer required when you use isDisabled flag inside an option.
• when isMultiSelection is true you can send a mixed value array of both valueKey and options (ie. [valueKey, valueKey, option, option])
• when you click on the clear button the disabled selections will also be removed. An issue has been raised with material ui 44603.
• the following properties have been reserved for internal purposes and we strongly advise against using them in an option object:
  • __internalShowLoadingOption will put the loadingText node at the end with a reference observer. It is used in the infinite scroll logic
  • __internalDisplay it is used in the creatable logic and will be ${createdLabel} ${inputValue}
  • __internalInputValue it is used in the creatable logic and will be inputValue

🚨 Breaking changes:

• The value provided to the Autocomplete should always have a default. Example:

<Autocomplete value = {myValue || null} />
<Autocomplete withCheckboxes={true} value = {myValue || []} />

• Add <CssBaseline/> to the theme provider in your project:

<ThemeProvider theme={getTheme()}>
    <CssBaseline />
    {children}
</ThemeProvider>

• The onChange behavior of the Creatable Autocomplete component has been updated. When a new value is created, the format of the value passed to the onChange callback has changed.
  Old behavior: When creating a new value, the onChange callback provided an object with the new value text stored in the name property. Example: { label: "New Text", value: "New Text", name: "New Text"}
  New behavior: Now, the onChange callback provides the new value as a primitive string, instead of an object. Example:
  "New Text"

• The onChange behavior of the simpleValue Autocomplete has been updated. When using the Autocomplete with simpleValue mode enabled and options represented as a list of objects, the onChange event no longer automatically retrieves the desired value using the valueKey. You must now manually handle the event to extract the desired value from the selected option.
  Old behavior: When the simpleValue prop was enabled, the onChange event would automatically return the value corresponding to the specified valueKey from the selected option.
  New behavior: With the updated behavior, the onChange event now provides the full selected object. You are responsible for manually extracting the desired value based on the specified valueKey.

const handleChange = useCallback(key=>selected=> prop(key, selected))
<Autocomplete simpleValue valueKey="myKey" onChange={handleChange("myKey")} />  

• To use the new Autocomplete, the following packages must be upgraded:

@emotion/react
@emotion/styled
@mui/icons-material
@mui/material