Bump typescript to ^4.8.2 (#33031)

Co-authored-by: Michał Dudak <[email protected]> Co-authored-by: siriwatknp <[email protected]>
mui · Sep 5, 2022 · 2cb9664 · 2cb9664
1 parent f2fa470
commit 2cb9664
Show file tree

Hide file tree

Showing 21 changed files with 71 additions and 109 deletions.
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const Button = React.forwardRef(function Button<TValue>(
+const Button = React.forwardRef(function Button<TValue extends {}>(
   props: SelectUnstyledRootSlotProps<TValue>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {
@@ -143,7 +143,7 @@ const StyledPopper = styled(PopperUnstyled)`
   z-index: 1;
 `;
 
-const CustomSelect = React.forwardRef(function CustomSelect<TValue>(
+const CustomSelect = React.forwardRef(function CustomSelect<TValue extends {}>(
   props: SelectUnstyledProps<TValue>,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) {

diff --git a/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx b/docs/src/pages/premium-themes/onepirate/modules/withRoot.tsx
@@ -3,7 +3,9 @@ import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 
-export default function withRoot<P>(Component: React.ComponentType<P>) {
+export default function withRoot<P extends JSX.IntrinsicAttributes>(
+  Component: React.ComponentType<P>,
+) {
   function WithRoot(props: P) {
     return (
       <ThemeProvider theme={theme}>

diff --git a/package.json b/package.json
@@ -186,7 +186,7 @@
     "terser-webpack-plugin": "^5.3.5",
     "thenify": "3.3.1",
     "tslint": "5.14.0",
-    "typescript": "^4.6.4",
+    "typescript": "^4.8.2",
     "unist-util-visit": "^2.0.3",
     "util": "^0.12.4",
     "webpack": "^5.74.0",

diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx
@@ -138,7 +138,7 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
       <AspectRatioContent {...contentProps}>
         {React.Children.map(children, (child, index) =>
           index === 0 && React.isValidElement(child)
-            ? React.cloneElement(child, { 'data-first-child': '' })
+            ? React.cloneElement(child, { 'data-first-child': '' } as Record<string, string>)
             : child,
         )}
       </AspectRatioContent>

diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -121,10 +121,10 @@ const Card = React.forwardRef(function Card(inProps, ref) {
             return child;
           }
           if (index === 0) {
-            return React.cloneElement(child, { 'data-first-child': '' });
+            return React.cloneElement(child, { 'data-first-child': '' } as Record<string, string>);
           }
           if (index === React.Children.count(children) - 1) {
-            return React.cloneElement(child, { 'data-last-child': '' });
+            return React.cloneElement(child, { 'data-last-child': '' } as Record<string, string>);
           }
           return child;
         })}

diff --git a/packages/mui-joy/src/CardCover/CardCover.tsx b/packages/mui-joy/src/CardCover/CardCover.tsx
@@ -75,7 +75,7 @@ const CardCover = React.forwardRef(function CardCover(inProps, ref) {
     >
       {React.Children.map(children, (child, index) =>
         index === 0 && React.isValidElement(child)
-          ? React.cloneElement(child, { 'data-first-child': '' })
+          ? React.cloneElement(child, { 'data-first-child': '' } as Record<string, string>)
           : child,
       )}
     </CardCoverRoot>

diff --git a/packages/mui-joy/src/RadioGroup/RadioGroup.tsx b/packages/mui-joy/src/RadioGroup/RadioGroup.tsx
@@ -126,7 +126,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(inProps, ref) {
                 ...(index === 0 && { 'data-first-child': '' }),
                 ...(index === React.Children.count(children) - 1 && { 'data-last-child': '' }),
                 'data-parent': 'RadioGroup',
-              })
+              } as Record<string, string>)
             : child,
         )}
       </RadioGroupRoot>

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -248,7 +248,7 @@ const SelectIndicator = styled('span', {
   marginInlineEnd: 'calc(var(--Select-paddingInline) / -4)',
 });
 
-const Select = React.forwardRef(function Select<TValue>(
+const Select = React.forwardRef(function Select<TValue extends {}>(
   inProps: SelectOwnProps<TValue>,
   ref: React.ForwardedRef<any>,
 ) {

diff --git a/packages/mui-joy/src/Select/SelectProps.ts b/packages/mui-joy/src/Select/SelectProps.ts
@@ -116,7 +116,7 @@ export interface SelectOwnProps<TValue extends {}> extends SelectStaticProps {
   value?: TValue | null;
 }
 
-export interface SelectOwnerState<TValue> extends SelectOwnProps<TValue> {
+export interface SelectOwnerState<TValue extends {}> extends SelectOwnProps<TValue> {
   /**
    * If `true`, the select button is active.
    */

diff --git a/packages/mui-joy/src/TextField/TextField.tsx b/packages/mui-joy/src/TextField/TextField.tsx
@@ -306,82 +306,29 @@ TextField.propTypes /* remove-proptypes */ = {
   /**
    * @ignore
    */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'button',
-      'checkbox',
-      'color',
-      'date',
-      'datetime-local',
-      'email',
-      'file',
-      'hidden',
-      'image',
-      'month',
-      'number',
-      'password',
-      'radio',
-      'range',
-      'reset',
-      'search',
-      'submit',
-      'tel',
-      'text',
-      'time',
-      'url',
-      'week',
-    ]),
-    PropTypes.shape({
-      '__@iterator@91': PropTypes.func.isRequired,
-      anchor: PropTypes.func.isRequired,
-      at: PropTypes.func.isRequired,
-      big: PropTypes.func.isRequired,
-      blink: PropTypes.func.isRequired,
-      bold: PropTypes.func.isRequired,
-      charAt: PropTypes.func.isRequired,
-      charCodeAt: PropTypes.func.isRequired,
-      codePointAt: PropTypes.func.isRequired,
-      concat: PropTypes.func.isRequired,
-      endsWith: PropTypes.func.isRequired,
-      fixed: PropTypes.func.isRequired,
-      fontcolor: PropTypes.func.isRequired,
-      fontsize: PropTypes.func.isRequired,
-      includes: PropTypes.func.isRequired,
-      indexOf: PropTypes.func.isRequired,
-      italics: PropTypes.func.isRequired,
-      lastIndexOf: PropTypes.func.isRequired,
-      length: PropTypes.number.isRequired,
-      link: PropTypes.func.isRequired,
-      localeCompare: PropTypes.func.isRequired,
-      match: PropTypes.func.isRequired,
-      matchAll: PropTypes.func.isRequired,
-      normalize: PropTypes.func.isRequired,
-      padEnd: PropTypes.func.isRequired,
-      padStart: PropTypes.func.isRequired,
-      repeat: PropTypes.func.isRequired,
-      replace: PropTypes.func.isRequired,
-      search: PropTypes.func.isRequired,
-      slice: PropTypes.func.isRequired,
-      small: PropTypes.func.isRequired,
-      split: PropTypes.func.isRequired,
-      startsWith: PropTypes.func.isRequired,
-      strike: PropTypes.func.isRequired,
-      sub: PropTypes.func.isRequired,
-      substr: PropTypes.func.isRequired,
-      substring: PropTypes.func.isRequired,
-      sup: PropTypes.func.isRequired,
-      toLocaleLowerCase: PropTypes.func.isRequired,
-      toLocaleUpperCase: PropTypes.func.isRequired,
-      toLowerCase: PropTypes.func.isRequired,
-      toString: PropTypes.func.isRequired,
-      toUpperCase: PropTypes.func.isRequired,
-      trim: PropTypes.func.isRequired,
-      trimEnd: PropTypes.func.isRequired,
-      trimLeft: PropTypes.func.isRequired,
-      trimRight: PropTypes.func.isRequired,
-      trimStart: PropTypes.func.isRequired,
-      valueOf: PropTypes.func.isRequired,
-    }),
+  type: PropTypes /* @typescript-to-proptypes-ignore */.oneOf([
+    'button',
+    'checkbox',
+    'color',
+    'date',
+    'datetime-local',
+    'email',
+    'file',
+    'hidden',
+    'image',
+    'month',
+    'number',
+    'password',
+    'radio',
+    'range',
+    'reset',
+    'search',
+    'submit',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week',
   ]),
   /**
    * @ignore

diff --git a/packages/mui-joy/src/styles/useThemeProps.ts b/packages/mui-joy/src/styles/useThemeProps.ts
@@ -1,6 +1,12 @@
 import { useThemeProps as systemUseThemeProps } from '@mui/system';
 import defaultTheme from './defaultTheme';
 
-export default function useThemeProps<T>({ props, name }: { props: T; name: string }) {
+export default function useThemeProps<T extends {}>({
+  props,
+  name,
+}: {
+  props: T & {};
+  name: string;
+}) {
   return systemUseThemeProps({ props, name, defaultTheme: { ...defaultTheme, components: {} } });
 }
diff --git a/packages/mui-material/src/Link/Link.spec.tsx b/packages/mui-material/src/Link/Link.spec.tsx
@@ -12,9 +12,8 @@ import { expectType } from '@mui/types';
 
 <Link
   component="button"
-  // @ts-expect-error Implicit any
   ref={(elem) => {
-    expectType<any, typeof elem>(elem);
+    expectType<HTMLButtonElement | null, typeof elem>(elem);
   }}
 >
   Home

diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js
@@ -254,7 +254,7 @@ ToggleButton.propTypes /* remove-proptypes */ = {
    * The value to associate with the button when selected in a
    * ToggleButtonGroup.
    */
-  value: PropTypes.any.isRequired,
+  value: PropTypes /* @typescript-to-proptypes-ignore */.any.isRequired,
 };
 
 export default ToggleButton;
diff --git a/packages/mui-material/test/typescript/OverridableComponent.spec.tsx b/packages/mui-material/test/typescript/OverridableComponent.spec.tsx
@@ -118,8 +118,9 @@ declare const Foo: OverridableComponent<{
 
 <Foo
   component={MyOverrideComponent}
-  // @ts-expect-error
-  myCallback={(n) => console.log(n)} // n has type any
+  myCallback={(n) => {
+    expectType<number, typeof n>(n);
+  }}
   numberProp={3}
 />;
 

diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts
@@ -131,7 +131,11 @@ export interface CreateStyledComponent<
   ): StyledComponent<ComponentProps & AdditionalProps, SpecificComponentProps, JSXProps>;
 }
 
-export interface CreateMUIStyled<MUIStyledCommonProps, MuiStyledOptions, Theme extends object> {
+export interface CreateMUIStyled<
+  MUIStyledCommonProps extends {},
+  MuiStyledOptions,
+  Theme extends object,
+> {
   <
     C extends React.ComponentClass<React.ComponentProps<C>>,
     ForwardedProps extends keyof React.ComponentProps<C> = keyof React.ComponentProps<C>,

diff --git a/packages/mui-system/src/Stack/createStack.tsx b/packages/mui-system/src/Stack/createStack.tsx
@@ -37,7 +37,7 @@ const defaultCreateStyledComponent = (systemStyled as CreateMUIStyled<any>)('div
   overridesResolver: (props, styles) => styles.root,
 });
 
-function useThemePropsDefault<T>(props: T) {
+function useThemePropsDefault<T extends {}>(props: T) {
   return useThemePropsSystem({
     props,
     name: 'MuiStack',

diff --git a/packages/mui-system/src/Unstable_Grid/createGrid.tsx b/packages/mui-system/src/Unstable_Grid/createGrid.tsx
@@ -35,7 +35,7 @@ const defaultCreateStyledComponent = (systemStyled as CreateMUIStyled<any>)('div
   overridesResolver: (props, styles) => styles.root,
 });
 
-function useThemePropsDefault<T>(props: T) {
+function useThemePropsDefault<T extends {}>(props: T) {
   return useThemePropsSystem({
     props,
     name: 'MuiGrid',

diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts
@@ -19,13 +19,16 @@ type NestedRecord<V = any> = {
  * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
  * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
  */
-export const assignNestedKeys = <Object = NestedRecord, Value = any>(
-  obj: Object,
+export const assignNestedKeys = <
+  T extends Record<string, any> | null | undefined | string = NestedRecord,
+  Value = any,
+>(
+  obj: T,
   keys: Array<string>,
   value: Value,
   arrayKeys: Array<string> = [],
 ) => {
-  let temp: Record<string, any> = obj;
+  let temp: T = obj;
   keys.forEach((k, index) => {
     if (index === keys.length - 1) {
       if (Array.isArray(temp)) {

diff --git a/packages/mui-system/src/useThemeProps/getThemeProps.d.ts b/packages/mui-system/src/useThemeProps/getThemeProps.d.ts
@@ -10,8 +10,8 @@ type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   ? Props
   : {};
 
-export default function getThemeProps<
-  Theme extends ThemeWithProps<any>,
-  Props,
-  Name extends keyof any,
->(params: { props: Props; name: Name; theme?: Theme }): Props & ThemedProps<Theme, Name>;
+export default function getThemeProps<Theme, Props, Name extends keyof any>(params: {
+  props: Props;
+  name: Name;
+  theme?: Theme;
+}): Props & ThemedProps<Theme, Name>;
diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json
@@ -38,7 +38,7 @@
     "@babel/types": "^7.18.13",
     "doctrine": "^3.0.0",
     "lodash": "^4.17.21",
-    "typescript": "^4.6.4",
+    "typescript": "^4.8.2",
     "uuid": "^8.3.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -15714,10 +15714,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@^4.6.4:
-  version "4.6.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
-  integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
+typescript@^4.8.2:
+  version "4.8.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.8.2.tgz#e3b33d5ccfb5914e4eeab6699cf208adee3fd790"
+  integrity sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==
 
 ua-parser-js@^0.7.30:
   version "0.7.31"