[joy-ui] Overriding Drawer Size throws browser error in Dev build

[DigilityTB]

Steps to reproduce

Link to live example: https://talosic.net Note: The error is only thrown in a dev build (served under npm run dev) and not with a production build. The live example is a production build for obvious reasons so won't manifest the error

Steps:

1. Static app built using @mui/joy 5.0.0-beta.48
2. main.tsx wraps all content in a theme component

  <React.StrictMode>
    <MaterialCssVarsProvider theme={{ [MATERIAL_THEME_ID]: MaterialTheme}}>
      <JoyCssVarsProvider theme={JoyTheme}>
        <Provider store={store}>
          <RouterProvider router={router} />
        </Provider>
      </JoyCssVarsProvider>
    </MaterialCssVarsProvider>
  </React.StrictMode>

4. JoyTheme includes declaration:

declare module '@mui/joy/Drawer' {
  interface DrawerPropsSizeOverrides {
    "xl": true,
  }
};

5. JoyTheme also includes styleOverride in the extendTheme components definition:

    JoyDrawer: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          ...(ownerState.size === 'xl' && {
            "--Drawer-horizontalSize": "1600px",
          }),
        }),
      },
    },

6. Page includes a drawer defined as follows:

<Drawer
    size="xl"
    anchor="right"
    variant="plain"
    open={false}
    onClose={() => {
        //
    }}
    slotProps={{
    content: {
        sx: {
            bgcolor: 'transparent',
            p: { md: 3, sm: 0 },
            boxShadow: 'none',
        },
    },
    }}
    disableEscapeKeyDown={true}
>
    <Sheet
        sx={{
            borderRadius: 'md',
            p: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            height: '100%',
            overflow: 'auto',
        }}
    >

    </Sheet>
</Drawer>

7. When size is 'xl' the browser throws an error reporting that: Warning: Failed prop type: Invalid prop size of value xl supplied to ForwardRef(Drawer2), expected one of ["sm","md","lg"].

8. The error is not thrown when 'lg' is specified.

9. A similar size override has been defined for @mui/joy/CircularProgress with no error generated using custom and standard sizes

Current behavior

Function is correct, and the drawer is the correct size, but an error is thrown when served in dev mode

Expected behavior

Same functionality but without warning

Context

Trying to allow the use of XL sized drawers

Your environment

npx @mui/envinfo

``` System: OS: Linux 5.14 Red Hat Enterprise Linux 9.3 (Plow) Binaries: Node: 20.11.1 - /usr/bin/node npm: 10.2.4 - /usr/bin/npm pnpm: Not Found Browsers: Chrome: Version 126.0.6478.127 (Official Build) (64-bit) Edge: Version 126.0.2592.102 (Official build) (64-bit) npmPackages: @emotion/react: ^11.11.1 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.4 @mui/joy: ^5.0.0-beta.2 => 5.0.0-beta.48 @mui/material: ^5.14.14 => 5.16.4 @mui/private-theming: 5.16.4 @mui/styled-engine: 5.16.4 @mui/system: 5.16.4 @mui/types: 7.2.15 @mui/utils: 5.16.4 @types/react: ^18.2.15 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.1.6 => 5.5.3 ```

Search keywords: DrawerPropsSizeOverrides JoyDrawer

[DiegoAndai]

@siriwatknp may I ask you to take a look at this one as it related to Joy's Drawer

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI