Olá. Estou atuando em uma task front-end aqui na empresa e preciso criar uma caixa de seleção que permite que o usuário escolha várias opções de períodos (últimos 7 dias, 15 dias, etc). O front utiliza Material UI (MUI) para compor esse tipo de componente.
O problema é que eles precisam de duas informações sendo exibida dentro das opções do menu: um texto principal (exemplo: "Hoje") e um texto auxiliar com essa data/período (No caso do exemplo de hoje, seria "14/12/2022")
Pra ficar mais óbvio o que preciso fazer, a imagem abaixo é do protótipo que me foi enviado.
Eu já tentei fazer da seguinte forma:
<FormControl sx={{ width: "300px" }}>
<InputLabel id="demo-simple-select-label">Comparar com</InputLabel>
<Select
size="small"
labelId="demo-simple-select-label"
id="demo-simple-select"
value={1}
label="Comparar com"
onChange={() => {}}
>
<MenuItem value={1}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Typography sx={{ mr: 1 }}>Hoje</Typography>
<Typography variant="subtitle2">
{dayjs().format("DD/MM/YYYY")}
</Typography>
</Stack>
</MenuItem>
<MenuItem value={20}>placeholder</MenuItem>
<MenuItem value={30}>placeholder</MenuItem>
</Select>
</FormControl>
E tive o seguinte resultado:
Porém, existem dois comportamentos que não estão de acordo com o esperado. Como exibido no protótipo (primeira imagem anexada), ao selecionar uma das opções, a "label" do select precisa exibir apenas o texto auxiliar (que contém a data selecionada, ex: 14/12/2022, ao invés de "Hoje" ou "07/12-2022 - 14/12/2022" ao invés de "Últimos 7 dias").
Além disso, por algum motivo o justifyContent="space-between"
aplicado no <MenuItem>
não é aplicado dentro das opções, apenas quando a opção é selecionada e exibida no select.
Gostaria de saber se é possível resolver esses dois problemas com o MUI e como posso me aproximar o máximo possível do protótipo utilizando MUI.