[material-next][ButtonGroup] Change ButtonGroup files to ts (#39794)

packages/mui-material-next/src/Button/Button.tsx

@@ -374,7 +374,10 @@ const Button = React.forwardRef(function Button<
 >(inProps: ButtonProps<BaseComponentType>, ref: React.ForwardedRef<any>) {
   const contextProps = React.useContext(ButtonGroupContext);
   const buttonGroupButtonContextPositionClassName = React.useContext(ButtonGroupButtonContext);
-  const resolvedProps = resolveProps(contextProps as ButtonProps<BaseComponentType>, inProps);
+  const resolvedProps = resolveProps(
+    (contextProps ?? {}) as ButtonProps<BaseComponentType>,
+    inProps,
+  );
   const props = useThemeProps({ props: resolvedProps, name: 'MuiButton' });
   const {
     children,
@@ -412,7 +415,7 @@ const Button = React.forwardRef(function Button<
       ref,
     },
     ownerState,
-    className: clsx(contextProps.className, positionClassName),
+    className: clsx(contextProps?.className, positionClassName),
   });
 
   const startIcon = startIconProp && (

packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.js → packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx

@@ -4,19 +4,20 @@ import { createRenderer, describeConformance, screen } from '@mui-internal/test-
 import ButtonGroup, { buttonGroupClasses as classes } from '@mui/material-next/ButtonGroup';
 import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
 import Button, { buttonClasses } from '@mui/material-next/Button';
-import ButtonGroupContext from './ButtonGroupContext';
+import ButtonGroupContext, { ButtonGroupContextType } from './ButtonGroupContext';
 
 describe('<ButtonGroup />', () => {
   const { render } = createRenderer();
 
-  let originalMatchmedia;
+  let originalMatchmedia: typeof window.matchMedia;
 
   beforeEach(() => {
     originalMatchmedia = window.matchMedia;
-    window.matchMedia = () => ({
-      addListener: () => {},
-      removeListener: () => {},
-    });
+    window.matchMedia = () =>
+      ({
+        addListener: () => {},
+        removeListener: () => {},
+      } as unknown as MediaQueryList);
   });
   afterEach(() => {
     window.matchMedia = originalMatchmedia;
@@ -119,9 +120,10 @@ describe('<ButtonGroup />', () => {
   });
 
   it('should have a ripple by default', () => {
+    const props = { TouchRippleProps: { classes: { root: 'touchRipple' } } };
     const { container } = render(
       <ButtonGroup>
-        <Button TouchRippleProps={{ classes: { root: 'touchRipple' } }}>Hello World</Button>
+        <Button {...props}>Hello World</Button>
       </ButtonGroup>,
     );
     expect(container.querySelector('.touchRipple')).not.to.equal(null);
@@ -138,9 +140,10 @@ describe('<ButtonGroup />', () => {
   });
 
   it('can disable the ripple', () => {
+    const props = { TouchRippleProps: { classes: { root: 'touchRipple' } } };
     const { container } = render(
       <ButtonGroup disableRipple>
-        <Button TouchRippleProps={{ classes: { root: 'touchRipple' } }}>Hello World</Button>
+        <Button {...props}>Hello World</Button>
       </ButtonGroup>,
     );
     expect(container.querySelector('.touchRipple')).to.equal(null);
@@ -181,24 +184,25 @@ describe('<ButtonGroup />', () => {
   });
 
   it('should forward the context to children', () => {
-    let context;
+    let context: ButtonGroupContextType | null;
     render(
       <ButtonGroup size="large" variant="contained">
         <ButtonGroupContext.Consumer>
           {(value) => {
             context = value;
+            return <Button />;
           }}
         </ButtonGroupContext.Consumer>
       </ButtonGroup>,
     );
-    expect(context.variant).to.equal('contained');
-    expect(context.size).to.equal('large');
-    expect(context.fullWidth).to.equal(false);
-    expect(context.disableRipple).to.equal(false);
-    expect(context.disableTouchRipple).to.equal(false);
-    expect(context.disableElevation).to.equal(false);
-    expect(context.disabled).to.equal(false);
-    expect(context.color).to.equal('primary');
+    expect(context!.variant).to.equal('contained');
+    expect(context!.size).to.equal('large');
+    expect(context!.fullWidth).to.equal(false);
+    expect(context!.disableRipple).to.equal(false);
+    expect(context!.disableTouchRipple).to.equal(false);
+    expect(context!.disableElevation).to.equal(false);
+    expect(context!.disabled).to.equal(false);
+    expect(context!.color).to.equal('primary');
   });
 
   describe('theme default props on Button', () => {

packages/mui-material-next/src/ButtonGroup/ButtonGroup.js → packages/mui-material-next/src/ButtonGroup/ButtonGroup.tsx

@@ -5,47 +5,15 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
 import { alpha } from '@mui/system';
 import { getValidReactChildren, unstable_capitalize as capitalize } from '@mui/utils';
+import { OverridableComponent } from '@mui/types';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
 import ButtonGroupContext from './ButtonGroupContext';
 import ButtonGroupButtonContext from './ButtonGroupButtonContext';
+import { ButtonGroupOwnerState, ButtonGroupProps, ButtonGroupTypeMap } from './ButtonGroup.types';
 
-const overridesResolver = (props, styles) => {
-  const { ownerState } = props;
-
-  return [
-    { [`& .${buttonGroupClasses.grouped}`]: styles.grouped },
-    {
-      [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.orientation)}`],
-    },
-    { [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}`] },
-    {
-      [`& .${buttonGroupClasses.grouped}`]:
-        styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`],
-    },
-    {
-      [`& .${buttonGroupClasses.grouped}`]:
-        styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`],
-    },
-    {
-      [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton,
-    },
-    {
-      [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton,
-    },
-    {
-      [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton,
-    },
-    styles.root,
-    styles[ownerState.variant],
-    ownerState.disableElevation === true && styles.disableElevation,
-    ownerState.fullWidth && styles.fullWidth,
-    ownerState.orientation === 'vertical' && styles.vertical,
-  ];
-};
-
-const useUtilityClasses = (ownerState) => {
+const useUtilityClasses = (ownerState: ButtonGroupOwnerState) => {
   const { classes, color, disabled, disableElevation, fullWidth, orientation, variant } =
     ownerState;
 
@@ -76,8 +44,42 @@ const useUtilityClasses = (ownerState) => {
 const ButtonGroupRoot = styled('div', {
   name: 'MuiButtonGroup',
   slot: 'Root',
-  overridesResolver,
-})(({ theme, ownerState }) => ({
+  overridesResolver(props, styles) {
+    const {
+      ownerState: { color, disableElevation, fullWidth, orientation, variant },
+    } = props;
+
+    return [
+      { [`& .${buttonGroupClasses.grouped}`]: styles.grouped },
+      {
+        [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(orientation)}`],
+      },
+      { [`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(variant)}`] },
+      {
+        [`& .${buttonGroupClasses.grouped}`]:
+          styles[`grouped${capitalize(variant)}${capitalize(orientation)}`],
+      },
+      {
+        [`& .${buttonGroupClasses.grouped}`]:
+          styles[`grouped${capitalize(variant)}${capitalize(color)}`],
+      },
+      {
+        [`& .${buttonGroupClasses.firstButton}`]: styles.firstButton,
+      },
+      {
+        [`& .${buttonGroupClasses.lastButton}`]: styles.lastButton,
+      },
+      {
+        [`& .${buttonGroupClasses.middleButton}`]: styles.middleButton,
+      },
+      styles.root,
+      styles[variant],
+      disableElevation === true && styles.disableElevation,
+      fullWidth && styles.fullWidth,
+      orientation === 'vertical' && styles.vertical,
+    ];
+  },
+})<{ ownerState: ButtonGroupOwnerState }>(({ theme, ownerState }) => ({
   display: 'inline-flex',
   borderRadius: (theme.vars || theme).shape.borderRadius,
   ...(ownerState.variant === 'contained' && {
@@ -197,7 +199,19 @@ const ButtonGroupRoot = styled('div', {
   },
 }));
 
-const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
+/**
+ *
+ * Demos:
+ *
+ * - [Button Group](https://mui.com/material-ui/react-button-group/)
+ *
+ * API:
+ *
+ * - [ButtonGroup API](https://mui.com/material-ui/api/button-group/)
+ */
+const ButtonGroup = React.forwardRef(function ButtonGroup<
+  BaseComponentType extends React.ElementType = ButtonGroupTypeMap['defaultComponent'],
+>(inProps: ButtonGroupProps<BaseComponentType>, ref: React.ForwardedRef<HTMLDivElement>) {
   const props = useThemeProps({ props: inProps, name: 'MuiButtonGroup' });
   const {
     children,
@@ -259,7 +273,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
   const validChildren = getValidReactChildren(children);
   const childrenCount = validChildren.length;
 
-  const getButtonPositionClassName = (index) => {
+  const getButtonPositionClassName = (index: number) => {
     const isFirstButton = index === 0;
     const isLastButton = index === childrenCount - 1;
 
@@ -298,12 +312,12 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(inProps, ref) {
       </ButtonGroupContext.Provider>
     </ButtonGroupRoot>
   );
-});
+}) as OverridableComponent<ButtonGroupTypeMap>;
 
 ButtonGroup.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * The content of the component.
@@ -387,6 +401,6 @@ ButtonGroup.propTypes /* remove-proptypes */ = {
     PropTypes.oneOf(['contained', 'outlined', 'text']),
     PropTypes.string,
   ]),
-};
+} as any;
 
 export default ButtonGroup;

packages/mui-material-next/src/ButtonGroup/ButtonGroup.d.ts → packages/mui-material-next/src/ButtonGroup/ButtonGroup.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { OverridableComponent, OverridableStringUnion, OverrideProps } from '@mui/types';
+import { OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types';
 import { Theme } from '../styles';
 import { ButtonGroupClasses } from './buttonGroupClasses';
 
@@ -85,23 +85,23 @@ export interface ButtonGroupTypeMap<
   defaultComponent: RootComponent;
 }
 
-/**
- *
- * Demos:
- *
- * - [Button Group](https://mui.com/material-ui/react-button-group/)
- *
- * API:
- *
- * - [ButtonGroup API](https://mui.com/material-ui/api/button-group/)
- */
-declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
-
 export type ButtonGroupProps<
   RootComponent extends React.ElementType = ButtonGroupTypeMap['defaultComponent'],
   AdditionalProps = {},
 > = OverrideProps<ButtonGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
   component?: React.ElementType;
 };
 
-export default ButtonGroup;
+export interface ButtonGroupOwnerState
+  extends PartiallyRequired<
+    ButtonGroupProps,
+    | 'color'
+    | 'disabled'
+    | 'disableElevation'
+    | 'disableRipple'
+    | 'disableTouchRipple'
+    | 'fullWidth'
+    | 'orientation'
+    | 'size'
+    | 'variant'
+  > {}

packages/mui-material-next/src/ButtonGroup/ButtonGroupButtonContext.ts

@@ -5,9 +5,7 @@ type ButtonPositionClassName = string;
 /**
  * @ignore - internal component.
  */
-const ButtonGroupButtonContext = React.createContext<ButtonPositionClassName | undefined>(
-  undefined,
-);
+const ButtonGroupButtonContext = React.createContext<ButtonPositionClassName | null>(null);
 
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';

packages/mui-material-next/src/ButtonGroup/ButtonGroupContext.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { ButtonGroupProps } from './ButtonGroup';
+import type { ButtonGroupProps } from './ButtonGroup.types';
 
-interface ButtonGroupContextType {
+export interface ButtonGroupContextType {
   className?: string;
   color?: ButtonGroupProps['color'];
   disabled?: boolean;
@@ -16,7 +16,7 @@ interface ButtonGroupContextType {
 /**
  * @ignore - internal component.
  */
-const ButtonGroupContext = React.createContext<ButtonGroupContextType>({});
+const ButtonGroupContext = React.createContext<ButtonGroupContextType | null>(null);
 
 if (process.env.NODE_ENV !== 'production') {
   ButtonGroupContext.displayName = 'ButtonGroupContext';

packages/mui-material-next/src/ButtonGroup/index.js → packages/mui-material-next/src/ButtonGroup/index.ts

@@ -2,3 +2,5 @@
 export { default } from './ButtonGroup';
 export { default as buttonGroupClasses } from './buttonGroupClasses';
 export * from './buttonGroupClasses';
+export { default as ButtonGroupButtonContext } from './ButtonGroupButtonContext';
+export { default as ButtonGroupContext } from './ButtonGroupContext';