[Autocomplete] Enable global customization of different options

[nicolas-ot]

• I have followed (at least) the PR section of the contributing guide.

Closes #33423.

getOptionLabel can now be extracted through ownerState as fourth parameter to renderOption

This PR also add a test to check that getOptionLabel can be called through ownerState and that the function works properly.

New feature in action: codesandbox

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 4de3fc1

[nicolas-ot]

@ZeeshanTamboli please review

[ZeeshanTamboli]

We should add the same in Joy UI's Autocomplete. Also adding demos demonstrating the use-case shown in #33423 (comment) would be great.

[nicolas-ot]

@ZeeshanTamboli i will now also add the same for Autocomplete in JoyUI. I've made the demo for material UI. Should I add a similar demo too for Joy UI?

You can check the demo here : demo

edit: renderOption of Autocomplete of JoyUI actually already has ownerState in the parameter. So I think I've done all of your review. Please re-review :)

[ZeeshanTamboli]

@nicolas-ot The Autocomplete in the demo is not visible in light mode because the demo's ThemeProvider overrides the docs' internal ThemeProvider. To determine the color mode of the docs, useTheme would need to be used, but this may not be a good demonstration for developers who would question the need for useTheme. Therefore, in my opinion, the best solution currently is to not showcase a demo and let developers rely on the API docs instead. What are your thoughts?

[nicolas-ot]

@ZeeshanTamboli that is unfortunate, I didn't realize that. Personally I believe this demo is useful to show how you can easily customize the component for the whole app. I think it's important because one of the main reason people might be reluctant to use Material UI is that they might not really be too fond of Material Design and they don't know that Material UI is easily customizable like that.

It also showcases how to utilise ownerState. It's true that the API docs also explains it, but a quick glance on the demo with all the same styling might push user to find other alternative before finding the API.

As for using useTheme, I think a simple comment above it such as "to determine dark/light mode" should suffice. It might not be ideal, but the advantage far outweights the disadvantage.

[ZeeshanTamboli]

@nicolas-ot I'm discussing it with the team and will inform you about the next steps.

If you want to research till then, this is how I did it recently in #36805.

[nicolas-ot]

@ZeeshanTamboli any update?

[ZeeshanTamboli]

@ZeeshanTamboli any update?

@nicolas-ot We haven't found a solution yet because the demo creates a new theme. Let's go ahead by using the useTheme hook and adding a comment explaining its purpose in determining light/dark mode. Afterward, we can seek someone else's opinion on it.

[nicolas-ot]

I would do that, but would it be possible to seek someone's else opinion first before I actually implemented it? @ZeeshanTamboli

[michaldudak]

I'm OK with useTheme, but let's also add a comment explaining why it's needed.

[nicolas-ot]

@ZeeshanTamboli I've changed it as discussed. Please review.

[nicolas-ot]

@ZeeshanTamboli I'm done updating. Please review again

[ZeeshanTamboli]

Looks generally good! Just two more comments.

[nicolas-ot]

please review @ZeeshanTamboli

[ZeeshanTamboli]

@nicolas-ot It looks good to me. Nice work.