[Grid] Difference between prop type of the size prop and the typescript definition for string values

[ablagoev]

Steps to reproduce

Link to live example: https://github.com/ablagoev/pigment-css-grid-size-prop

Steps:

1. Use a Grid component with the size prop equal to "grow" or "auto"
2. Open the developer console

Current behavior

An error message is displayed in the error console about an invalid value used for the size prop of the Grid

Expected behavior

No errors in the dev console

Context

The js prop type does not allow strings, which are needed to support the "grow" and "auto" values, which are present in the typescript typings.

The prop type in the javascript typings is as follows (source):

// https://github.com/mui/pigment-css/blob/master/packages/pigment-css-react/src/Grid.jsx
size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
  PropTypes.arrayOf(PropTypes.number),
  PropTypes.number,
  PropTypes.object,
]),

while the typescript types are (source):

// https://github.com/mui/pigment-css/blob/master/packages/pigment-css-react/src/Grid.d.ts
size?: CssProperty<number | 'grow' | 'auto'>;

The error displayed in the browser console is as follows:

Warning: Failed prop type: Invalid prop `size` supplied to `Grid`, expected one of type [number, object].

Your environment

npx @mui/envinfo

``` Chrome Version 131.0.6778.69 (Official Build) (64-bit) System: OS: Linux 6.10 Arch Linux Binaries: Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node npm: 10.4.0 - ~/.nvm/versions/node/v21.2.0/bin/npm pnpm: 9.13.2 - ~/.nvm/versions/node/v21.2.0/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.13.3 @emotion/styled: 11.13.0 @mui/private-theming: 6.1.7 @mui/styled-engine: 6.1.7 @mui/system: 6.1.7 @mui/types: 7.2.19 @mui/utils: 6.1.7 @pigment-css/react: latest => 0.0.27 @pigment-css/vite-plugin: latest => 0.0.27 @types/react: latest => 18.3.12 react: latest => 18.3.1 react-dom: latest => 18.3.1 typescript: latest => 5.6.3 ```

Search keywords: grid size prop grow auto

[ablagoev]

Sample code that triggers the error:

<Grid container>
  <Grid size="grow">Error</Grid>
</Grid>