[InputUnstyled] ownerState is a required field for componentsProps and is appended to a DOM element

[gabunia-nick]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Currently, ownerState field is required as per type definition of componentsProps

componentsProps?: {
    root?: React.ComponentPropsWithRef<'div'> & {
        ownerState: InputOwnerState;
    };
    input?: React.ComponentPropsWithRef<'input'> & {
        ownerState: InputOwnerState;
    };
};

And the ownerState prop itself is being appended to input DOM element:

Expected behavior 🤔

ownerState is not a required field as per this guide and is not appended to en input DOM element

Steps to reproduce 🕹

Steps:

1. Import InputUnstyled component
2. Defined componentsProps property of component
3. See that ownerState is required
4. Define ownerState
5. See that ownerState is being appended to DOM element

Context 🔦

The issue makes development more complicated, as the need to understand some undescribed props appears and to understand it you need to dive deep into type definitions of components. In addition, unnecessary data is being appended to a DOM elements

Your environment 🌎

`npx @mui/envinfo`

    System:
    OS: Linux 5.13 Ubuntu 20.04.2 LTS (Focal Fossa)
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.74
    Firefox: 99.0
  npmPackages:
    @mui/base: ^5.0.0-alpha.79 => 5.0.0-alpha.79 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @types/react: ^18.0.5 => 18.0.5 
    react: ^18.0.0 => 18.0.0 
    react-dom: ^18.0.0 => 18.0.0 
    typescript: ^4.6.3 => 4.6.3 

tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "es2021.intl",
      "ES2017.Intl",
      "ES2018.Intl"
    ],
    "baseUrl": "src/",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.tsx"
  ]
}

[ZeeshanTamboli]

Hi @gabunia-nick ,

Can you provide a CodeSandbox showing the issue? It would really help us investigate.

[gabunia-nick]

Hi @ZeeshanTamboli
Here is CodeSandbox showing the issue: https://codesandbox.io/s/sad-bassi-cvdk08?file=/src/App.tsx

[ZeeshanTamboli]

Hi @gabunia-nick ,

It will be fixed when #32491 is released. There are quite a few type changes there.

I can confirm with the preview package: https://codesandbox.io/s/mui-material-ui-forked-315rvr?file=/src/App.tsx.

Will link this issue in the PR.