[Autocomplete] Add ability to render custom single value

[ZeeshanTamboli]

Closes #26440

Based on the upvotes and requests in #26440, this PR introduces a new renderSingleValue prop to customize the display of the selected value. This is separate from renderTags for clarity. I avoided naming it renderTag to prevent potential confusion and typos.

Edit: Decided to go with renderValue as the prop name based on the discussion below. Also deprecated renderTags prop.

Preview: https://deploy-preview-45387--material-ui.netlify.app/material-ui/react-autocomplete/#custom-single-value-rendering

[mui-bot]

Netlify deploy preview

• docs/data/material/components/autocomplete/autocomplete.md

@material-ui/core: parsed: +0.08% , gzip: +0.10%
Autocomplete: parsed: +0.29% , gzip: +0.27%
useAutocomplete: parsed: +3.24% , gzip: +2.72%
@material-ui/lab: parsed: +0.25% , gzip: +0.26%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against cc4d7e9

[ZeeshanTamboli]

@aarongarciah @DiegoAndai @michaldudak I’ve made the discussed changes:

• Deprecated renderTags and renamed the new prop to renderValue.
• The value parameter now adapts based on the multiple prop in TypeScript.

Ready for further review.

[ZeeshanTamboli]

Just a heads-up, this is ready for further review.

[DiegoAndai]

The preview looks good @ZeeshanTamboli 🙌🏼

Internally, some methods and variables still use "tag" since the deprecated renderTags depends on them. Renaming them would mean duplicating methods with the same logic for renderValue.

A question about this, could we modify render tags to use the renamed methods and variables? Or could that introduce breaking changes? What about the data-tag-index attribute?

[ZeeshanTamboli]

@DiegoAndai

A question about this, could we modify render tags to use the renamed methods and variables? Or could that introduce breaking changes?

Yes, we can. Done! 👍 Please review carefully. There should be no breaking changes.

Since renderTags is deprecated, I’ve also deprecated getTagProps and focusedTag returned from useAutocomplete.

Regarding the tag, tagSizeSmall, and tagSizeMedium classes—should we deprecate them? tagSizeSmall and tagSizeMedium are specifically for Chips. What should we do?

What about the data-tag-index attribute?

To maintain backward compatibility with renderTags, the data-tag-index and data-item-index attributes are now added conditionally based on the renderValue prop. If renderValue prop is used, then data-item-index, else data-tag-index.

[michaldudak]

LGTM in general.