Review the Autocomplete component and implement improvements

[matuzalemsteles]

To go ahead with the #5100 Collection pattern for this component we need to review some implementations to provide the Collection pattern, with data provider integration as well. Some things we need to reconsider and design of this component.

• Composition is a bit verbose and provides few OOTB features
• Developer needs to control focus
• The developer needs to control the visibility of the Menu according to the interaction with the input

Currently an Autocomplete component looks like this:

<ClayAutocomplete>
  <ClayAutocomplete.Input
    aria-label="Numbers: Enter a number from One to Five"
    onChange={(event: any) =>
      setValue(event.target.value)
    }
    value={value}
  />

  <ClayAutocomplete.DropDown active={!!value}>
    <ClayDropDown.ItemList>
      {['one', 'two', 'three', 'four', 'five']
        .filter((item) => item.match(value))
        .map((item) => (
          <ClayAutocomplete.Item
            key={item}
            match={value}
            onClick={() => setValue(item)}
            value={item}
          />
        ))}
    </ClayDropDown.ItemList>
  </ClayAutocomplete.DropDown>
</ClayAutocomplete>

The goal is to redesign the component composition design and resolve the above issues. This way we were able to implement the collection pattern better.

An example of pseudocode:

<Autocomplete
  defaultItems={['one', 'two', 'three']}
>
  {(item) => (
    <Autocomplete.Item>
      {item}
    </Autocomplete.Item>
  )}
</Autocomplete>

This is just an idea of what the component will look like already using the Collection pattern, it will no longer be necessary to declare the Input component it is automatically rendered inside Autocomplete and can be configured by passing properties directly to it.

Observing the usage in DXP, Autocomplete.Input it is more configured to control the focus state and manage the control of the active state, so for this scenario we can still continue providing these callbacks but these functionalities will be controlled by the component itself and reduced implementation on the usage side.

[github-actions]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-163480