From 93fdbe0d9ac5ad52e069c45131e8f0ca200602ac Mon Sep 17 00:00:00 2001
From: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com>
Date: Wed, 6 Dec 2023 12:47:15 +0100
Subject: [PATCH] [material-next][ButtonGroup] Change `ButtonGroup` files to ts
 (#39794)

---
 .../mui-material-next/src/Button/Button.tsx   |  7 +-
 ...ttonGroup.test.js => ButtonGroup.test.tsx} | 38 +++----
 .../{ButtonGroup.js => ButtonGroup.tsx}       | 98 +++++++++++--------
 ...{ButtonGroup.d.ts => ButtonGroup.types.ts} | 28 +++---
 .../ButtonGroup/ButtonGroupButtonContext.ts   |  4 +-
 .../src/ButtonGroup/ButtonGroupContext.ts     |  6 +-
 .../src/ButtonGroup/index.d.ts                |  4 -
 .../src/ButtonGroup/{index.js => index.ts}    |  2 +
 8 files changed, 102 insertions(+), 85 deletions(-)
 rename packages/mui-material-next/src/ButtonGroup/{ButtonGroup.test.js => ButtonGroup.test.tsx} (89%)
 rename packages/mui-material-next/src/ButtonGroup/{ButtonGroup.js => ButtonGroup.tsx} (83%)
 rename packages/mui-material-next/src/ButtonGroup/{ButtonGroup.d.ts => ButtonGroup.types.ts} (87%)
 delete mode 100644 packages/mui-material-next/src/ButtonGroup/index.d.ts
 rename packages/mui-material-next/src/ButtonGroup/{index.js => index.ts} (51%)

diff --git a/packages/mui-material-next/src/Button/Button.tsx b/packages/mui-material-next/src/Button/Button.tsx
index abd855b542db19..42757a3d1d994a 100644
--- a/packages/mui-material-next/src/Button/Button.tsx
+++ b/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 && (
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.js b/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx
similarity index 89%
rename from packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.js
rename to packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.tsx
index 74c70dabaeabe6..520593c6e52180 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.test.js
+++ b/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', () => {
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.js b/packages/mui-material-next/src/ButtonGroup/ButtonGroup.tsx
similarity index 83%
rename from packages/mui-material-next/src/ButtonGroup/ButtonGroup.js
rename to packages/mui-material-next/src/ButtonGroup/ButtonGroup.tsx
index b22bd12819c49a..b879feed5b287a 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.js
+++ b/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;
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.d.ts b/packages/mui-material-next/src/ButtonGroup/ButtonGroup.types.ts
similarity index 87%
rename from packages/mui-material-next/src/ButtonGroup/ButtonGroup.d.ts
rename to packages/mui-material-next/src/ButtonGroup/ButtonGroup.types.ts
index 2215539bb411c6..1115098d5e8536 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroup.d.ts
+++ b/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,18 +85,6 @@ 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 = {},
@@ -104,4 +92,16 @@ export type ButtonGroupProps<
   component?: React.ElementType;
 };
 
-export default ButtonGroup;
+export interface ButtonGroupOwnerState
+  extends PartiallyRequired<
+    ButtonGroupProps,
+    | 'color'
+    | 'disabled'
+    | 'disableElevation'
+    | 'disableRipple'
+    | 'disableTouchRipple'
+    | 'fullWidth'
+    | 'orientation'
+    | 'size'
+    | 'variant'
+  > {}
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroupButtonContext.ts b/packages/mui-material-next/src/ButtonGroup/ButtonGroupButtonContext.ts
index 8a93fe171954ef..a93c0436fb729a 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroupButtonContext.ts
+++ b/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';
diff --git a/packages/mui-material-next/src/ButtonGroup/ButtonGroupContext.ts b/packages/mui-material-next/src/ButtonGroup/ButtonGroupContext.ts
index 25cea93815c950..179c343793af2e 100644
--- a/packages/mui-material-next/src/ButtonGroup/ButtonGroupContext.ts
+++ b/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';
diff --git a/packages/mui-material-next/src/ButtonGroup/index.d.ts b/packages/mui-material-next/src/ButtonGroup/index.d.ts
deleted file mode 100644
index cb8b2e7907c4b4..00000000000000
--- a/packages/mui-material-next/src/ButtonGroup/index.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './ButtonGroup';
-export * from './ButtonGroup';
-export { default as buttonGroupClasses } from './buttonGroupClasses';
-export * from './buttonGroupClasses';
diff --git a/packages/mui-material-next/src/ButtonGroup/index.js b/packages/mui-material-next/src/ButtonGroup/index.ts
similarity index 51%
rename from packages/mui-material-next/src/ButtonGroup/index.js
rename to packages/mui-material-next/src/ButtonGroup/index.ts
index 3a585146bc9596..36b1a38cd0f773 100644
--- a/packages/mui-material-next/src/ButtonGroup/index.js
+++ b/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';