[docs][base-ui] Improve Select's country select demo

[oliviertassinari]

A quick iteration on #38796 to polish the demo. This feels much clearer for me when reading.

Before: https://master--material-ui.netlify.app/base-ui/react-select/#selected-value-appearance
Preview: https://deploy-preview-38983--material-ui.netlify.app/base-ui/react-select/#selected-value-appearance

---

A side note, I have tried to make this

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index 1144795569..b5d901cbc0 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -7,6 +7,7 @@ import { Popper } from '@mui/base/Popper';
 export default function UnstyledSelectRichOptions() {
   return (
     <CustomSelect placeholder="Select country…">
+      <StyledOption value={undefined} label="">None</StyledOption>
       {countries.map((country) => (
         <StyledOption key={country.code} value={country.code} label={country.label}>
           <img

work to reproduce https://mui.com/material-ui/react-select/#filled-and-standard-variants but it didn't show the placeholder. Should we expect it to?

Screen.Recording.2023-09-14.at.20.33.19.mov

[mui-bot]

Netlify deploy preview

• docs/data/base/components/select/select.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0352e38

[mj12albert]

A side note, I have tried to make this work to reproduce https://mui.com/material-ui/react-select/#filled-and-standard-variants but it didn't show the placeholder. Should we expect it to?

@oliviertassinari It's because label is "" and not null/undefined, so it didn't fall back to the placeholder.
When using renderValue it works, though TS complains about option.value being undefined (not sure if it can be worked around):

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
index cd73f9736d..945d2c73cc 100644
--- a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
+++ b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -6,7 +6,17 @@ import { Popper } from '@mui/base';
 
 export default function UnstyledSelectRichOptions() {
   return (
-    <CustomSelect placeholder="Select country…">
+    <CustomSelect
+      renderValue={(option) => {
+        if (option == null || option.value === null || option.value === undefined) {
+          return 'Select country…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption key="none" value={undefined} label="">
+        None
+      </StyledOption>
       {countries.map((c) => (
         <StyledOption key={c.code} value={c.code} label={c.label}>
           <img

Something else I noticed is that custom props (e.g. phone) passed to the Option component aren't passed to the option arg in renderValue.

A fix could be:

1. If the options param is provided, we can spread everything into the Map here
2. If there is no options param, we could forward external props from useOption to useCompoundItem here

[mj12albert]

Looks good 🙆‍♂️