[TextField] Correct the label's `maxWidth` when "select" option is enabled

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The label max-width is the same as a normal text field, which causes the ellipsed label to be behind the dropdown icon

Example

Reproduction with Fix

https://stackblitz.com/edit/react-njhcna?file=demo.tsx

Expected behavior 🤔

The base max-width seems to be calc(100% - 24px) but with the select option it should be calc(100% - 48px) on the outlined and filled textfield, and calc(100% - 24px) on the standard textfield

Example

Steps to reproduce 🕹

Steps:

1. Create a TextField.
2. Add the select option.
3. Add a super long label (I know we're not supposed to but yea).
4. See the ellipsed label behind the icon.

Context 🔦

This can be solved manually by adding this to a textfield, but would be nice if this was included out of the box

InputLabelProps={{
    sx: {
      // avoid when input is focused or filled
      ["&:not(.MuiInputLabel-shrink)"]: {
        // issue with label padding, see: https://github.com/mui/material-ui/issues/31145
        maxWidth:
          variant !== "filled"
            ? "calc(100% - 48px)"
            : "calc(100% - 24px)",
      },
    },
  }}

Your environment 🌎

  System:
    OS: Linux 5.16 Fedora Linux 35 (Workstation Edition)
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: Not Found
  npmPackages:
    @emotion/react:  11.7.1 
    @emotion/styled:  11.6.0 
    @mui/base:  5.0.0-alpha.65 
    @mui/icons-material:  5.3.0 
    @mui/lab:  5.0.0-alpha.65 
    @mui/material:  5.3.0 
    @mui/private-theming:  5.3.0 
    @mui/styled-engine:  5.3.0 
    @mui/system:  5.3.0 
    @mui/types:  7.1.0 
    @mui/utils:  5.3.0 
    @types/react:  17.0.38 
    react:  17.0.2 
    react-dom:  17.0.2 
    typescript:  4.5.5 

Start with the TextField implementation, focusing on how the select option and outlined, filled, and standard variants determine the label max-width. Use the linked StackBlitz reproduction and compare the label with and without a long label. Done means the ellipsed label no longer appears behind the dropdown icon for the described variants.