[material-ui] ToggleButtonGroupClasses type is missing selected

[Twipped]

Steps to reproduce

The below file gets added to our components theme configuration.

// ToggleButtonGroup.theme.js
import { toggleButtonGroupClasses as classes } from '@mui/material/ToggleButtonGroup';

/**
 * Exports a theme customization object for the ToggleButtonGroup component styling.
 * Add component to #src/styles/theme/components.js
 *
 * @module ToggleButtonGroup.theme
 * @see {@link https://mui.com/customization/theming/ MUI Theming}
 */
export default {
  defaultProps: {
    color: 'primary',
    density: 'relaxed',
    fullWidth: false,
    orientation: 'horizontal',
    size: 'small',
    variant: 'contained'
  },
  variants: [
    {
      props: ({ density }) => density === 'relaxed',
      style: ({ theme }) => ({
        gap: `calc(${theme.spacing(1)} + -1px)`,
        [`& .${classes.grouped}`]: {
          borderRadius: theme.shape.rounded.lg,
          margin: '0 !important'
        }
      })
    },
    {
      props: ({ density, variant }) => density === 'relaxed' && variant === 'outlined',
      style: ({ ownerState, theme }) => ({
        [`& .${classes.grouped}`]: {
          borderColor: theme.palette.divider,

          [`&.${classes.selected}`]: {
            borderColor: 'inherit'
          }
        },
        ...(ownerState.orientation === 'horizontal' && {
          [`.${classes.grouped}.${classes.selected} + .${classes.grouped}.${classes.selected}`]: {
            borderLeft: `1px solid ${theme.palette[ownerState.color].main}`
          }
        }),
        ...(ownerState.orientation === 'vertical' && {
          [`.${classes.grouped}.${classes.selected} + .${classes.grouped}.${classes.selected}`]: {
            borderTop: `1px solid ${theme.palette[ownerState.color].main}`
          }
        })
      })
    },
    {
      props: ({ density, variant }) => density === 'relaxed' && variant !== 'outlined',
      style: ({ ownerState, theme }) => ({
        [`& .${classes.grouped}`]: {
          borderWidth: theme.shape.rounded.none,

          // Add border between spaced items
          [`&:not(.${classes.lastButton}):after`]: {
            content: '""',
            display: 'block',
            position: 'absolute',
            ...(ownerState.orientation === 'horizontal' && {
              height: '100%',
              right: theme.spacing(-0.5),
              borderInlineEnd: `1px solid ${theme.palette.divider}`
            }),
            ...(ownerState.orientation === 'vertical' && {
              width: '100%',
              bottom: theme.spacing(-0.5),
              borderBlockStart: `1px solid ${theme.palette.divider}`
            })
          }
        }
      })
    },
    {
      props: ({ density, variant }) => density === 'compact' && variant === 'outlined',
      style: () => ({
        [`& .${classes.grouped}.${classes.selected}`]: {
          borderColor: 'inherit'
        }
      })
    },
    {
      props: ({ density, variant }) => density === 'compact' && variant !== 'outlined',
      style: ({ ownerState, theme }) => ({
        [`& .${classes.grouped}`]: {
          [`&:not(.${classes.lastButton})`]: {
            ...(ownerState.orientation === 'horizontal' && {
              borderInlineEnd: `1px solid ${theme.palette.divider}`
            }),
            ...(ownerState.orientation === 'vertical' && {
              borderBlockStart: `1px solid ${theme.palette.divider}`
            })
          }
        }
      })
    }
  ]
};

Attempting to validate this file in typescript produces an error for every use of classes.selected:

src/ToggleButtonGroup/ToggleButtonGroup.theme.js:36:25 - error TS2339: Property 'selected' does not exist on type 'ToggleButtonGroupClasses'.

36           [`&.${classes.selected}`]: {

Current behavior

toggleButtonGroupClasses includes a css class for selected.

The related typescript interface, ToggleButtonGroupClasses is missing that key, causing typescript to throw an error if you try to style against it.

Expected behavior

I expect both types to match.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.4.1
  Binaries:
    Node: 18.20.1 - ~/.nvm/versions/node/v18.20.1/bin/node
    npm: 10.3.0 - ~/.nvm/versions/node/v18.20.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.202
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.15 
    @mui/lab: 5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.15 => 5.15.15 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system: ^5.15.15 => 5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    typescript: ^5.4.5 => 5.4.5 

Search keywords: ToggleButtonGroupClasses

[mnajdova]

Nice catch, would you like to create a PR for it? This is the type that needs to be updated: https://github.com/mui/material-ui/blob/next/packages/mui-material/src/ToggleButton/toggleButtonClasses.ts#L4

[divyammadhok]

@mnajdova - Do let me know if you need my assistance, I would love to take this up.

[mnajdova]

Looks like @tarunrajput already handled it :)