[types] Bump minimum required TypeScript version to 3.5 (#24795)

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>

docs/src/pages/css-in-js/basics/AdaptingHook.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 interface Props {
   color: 'red' | 'blue';

docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 interface MyButtonProps {
   color: 'red' | 'blue';

docs/src/pages/getting-started/supported-platforms/supported-platforms.md

@@ -47,4 +47,4 @@ Have a look at the older [versions](https://material-ui.com/versions/) for backw
 
 ## TypeScript
 
-Material-UI requires a minimum version of TypeScript 3.2.
+Material-UI requires a minimum version of TypeScript 3.5.

docs/src/pages/guides/composition/ButtonRouter.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { MemoryRouter as Router } from 'react-router';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 import Button from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(
   (props, ref) => (

docs/src/pages/guides/composition/LinkRouter.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { MemoryRouter as Router } from 'react-router';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
 import Link from '@material-ui/core/Link';
-import { Omit } from '@material-ui/types';
 
 const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(
   (props, ref) => (

docs/src/pages/guides/composition/ListRouter.tsx

@@ -11,7 +11,6 @@ import DraftsIcon from '@material-ui/icons/Drafts';
 import Typography from '@material-ui/core/Typography';
 import { Route, MemoryRouter } from 'react-router';
 import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
-import { Omit } from '@material-ui/types';
 
 interface ListItemLinkProps {
   icon?: React.ReactElement;

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -72,6 +72,13 @@ Support for non-ref-forwarding class components in the `component` prop or as im
 Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate.
 This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`)
 
+### Supported TypeScript version
+
+The minimum supported version of TypeScript was increased from v3.2 to v3.5.
+We try to align with types released from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) (i.e. packages published on npm under the `@types` namespace).
+We will not change the minimum supported version in a major version of Material-UI.
+However, we generally recommend to not use a TypeScript version older than the [lowest supported version of DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped#older-versions-of-typescript-33-and-earlier)
+
 ### Styled engine
 
 The styled engine used in v5 by default is [`emotion`](https://github.com/emotion-js/emotion). While migration from JSS to emotion, if you are using JSS style overrides for your components (for example overrides created by `makeStyles`), you need to take care of the CSS injection order. In order to do this, you need to have on the top of your application the `StylesProvider` with the `injectFirst` option. Here is an example of it:
@@ -1266,3 +1273,12 @@ As the core components use emotion as a styled engine, the props used by emotion
     },
   });
   ```
+
+### `@material-ui/types`
+
+- Rename the exported `Omit` type in `@material-ui/types`. The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797).
+
+```diff
+-import { Omit } from '@material-ui/types';
++import { DistributiveOmit } from '@material-ui/types';
+```

docs/src/pages/premium-themes/paperbase/Navigator.tsx

@@ -22,7 +22,6 @@ import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponen
 import TimerIcon from '@material-ui/icons/Timer';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PhonelinkSetupIcon from '@material-ui/icons/PhonelinkSetup';
-import { Omit } from '@material-ui/types';
 
 const categories = [
   {

docs/src/pages/styles/basics/AdaptingHOC.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { withStyles, createStyles, WithStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 const styles = createStyles({
   root: {

docs/src/pages/styles/basics/AdaptingHook.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Button, { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 interface Props {
   color: 'red' | 'blue';

docs/src/pages/styles/basics/AdaptingStyledComponents.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
-import { Omit } from '@material-ui/types';
 
 interface MyButtonProps {
   color: 'red' | 'blue';

packages/material-ui-lab/src/TabList/TabList.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabsTypeMap } from '@material-ui/core/Tabs';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
 
 export interface TabListTypeMap<
@@ -12,7 +12,7 @@ export interface TabListTypeMap<
      * A list of `<Tab />` elements.
      */
     children?: React.ReactElement[];
-  } & Omit<TabsTypeMap['props'], 'children' | 'value'>;
+  } & DistributiveOmit<TabsTypeMap['props'], 'children' | 'value'>;
   defaultComponent: D;
 }
 /**

packages/material-ui-styles/src/makeStyles/makeStyles.d.ts

@@ -1,5 +1,4 @@
 import { ClassNameMap, Styles, WithStylesOptions } from '@material-ui/styles/withStyles';
-import { Omit } from '@material-ui/types';
 import { DefaultTheme } from '../defaultTheme';
 
 export default function makeStyles<

packages/material-ui-styles/src/styled/styled.d.ts

@@ -1,4 +1,4 @@
-import { Omit, Overwrite } from '@material-ui/types';
+import { DistributiveOmit, Overwrite } from '@material-ui/types';
 import {
   CreateCSSProperties,
   StyledComponentProps,
@@ -22,7 +22,7 @@ export type ComponentCreator<Component extends React.ElementType> = <
     | ((props: { theme: Theme } & Props) => CreateCSSProperties<Props>),
   options?: WithStylesOptions<Theme>
 ) => StyledComponent<
-  Omit<
+  DistributiveOmit<
     JSX.LibraryManagedAttributes<Component, React.ComponentProps<Component>>,
     'classes' | 'className'
   > &

packages/material-ui-styles/src/withTheme/withTheme.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConsistentWith, Omit, PropInjector } from '@material-ui/types';
+import { ConsistentWith, DistributiveOmit, PropInjector } from '@material-ui/types';
 import { DefaultTheme } from '../defaultTheme';
 
 export interface WithThemeCreatorOption<Theme = DefaultTheme> {
@@ -30,7 +30,10 @@ export default function withTheme<
 >(
   component: C
 ): React.ComponentType<
-  Omit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, keyof WithTheme<Theme>> &
+  DistributiveOmit<
+    JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>,
+    keyof WithTheme<Theme>
+  > &
     Partial<WithTheme<Theme>> &
     ThemedComponentProps
 >;

packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.d.ts

@@ -55,6 +55,3 @@ export type SxProps<Theme extends object = {}> = SystemStyleObject<Theme>;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function unstable_styleFunctionSx(props: object): object;
-
-// utils
-export type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

packages/material-ui-types/index.d.ts

@@ -27,16 +27,17 @@ export type PropInjector<InjectedProps, AdditionalProps = {}> = <
 >(
   component: C
 ) => React.JSXElementConstructor<
-  Omit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, keyof InjectedProps> &
+  DistributiveOmit<JSX.LibraryManagedAttributes<C, React.ComponentProps<C>>, keyof InjectedProps> &
     AdditionalProps
 >;
 
 /**
  * Remove properties `K` from `T`.
+ * Distributive for union types.
  *
  * @internal
  */
-export type Omit<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
 
 /**
  * Generate a set of string literal types with the given default record `T` and
@@ -54,7 +55,7 @@ export type OverridableStringUnion<T, U = {}> = GenerateStringUnion<Overwrite<T,
  *
  * @internal
  */
-export type Overwrite<T, U> = Omit<T, keyof U> & U;
+export type Overwrite<T, U> = DistributiveOmit<T, keyof U> & U;
 
 type GenerateStringUnion<T> = Extract<
   {

packages/material-ui-unstyled/src/OverridableComponent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 
 /**
  * A component whose root component can be controlled via a `component` prop.
@@ -28,7 +28,7 @@ export type OverrideProps<
   C extends React.ElementType
 > = (
   & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+  & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
 );
 
 /**
@@ -37,7 +37,7 @@ export type OverrideProps<
 // prettier-ignore
 export type DefaultComponentProps<M extends OverridableTypeMap> =
   & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+  & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
 
 /**
  * Props defined on the component (+ common material-ui props).

packages/material-ui-utils/src/isMuiElement.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { DistributiveOmit } from '@material-ui/types';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
@@ -15,7 +16,10 @@ export interface StyledComponentProps<ClassKey extends string = string> {
  * However, we don't declare classes on this type.
  * It is recommended to declare them manually with an interface so that each class can have a separate JSDOC.
  */
-export type StandardProps<C, Removals extends keyof C = never> = Omit<C, 'classes' | Removals> &
+export type StandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
+  C,
+  'classes' | Removals
+> &
   // each component declares it's classes in a separate interface for proper JSDOC
   StyledComponentProps<never> & {
     ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;

packages/material-ui/src/Backdrop/Backdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
-import { Omit, InternalStandardProps as StandardProps, Theme } from '..';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 import { FadeProps } from '../Fade';
 import { TransitionProps } from '../transitions/transition';
 

packages/material-ui/src/Fade/Fade.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Omit } from '..';
 import { TransitionProps } from '../transitions/transition';
 
 export interface FadeProps extends Omit<TransitionProps, 'children'> {

packages/material-ui/src/GlobalStyles/GlobalStyles.d.ts

@@ -1,11 +1,11 @@
 import { GlobalStylesProps } from '@material-ui/styled-engine';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 /**
  *
  * API:
  *
  * - [Global API](https://material-ui.com/api/global/)
  */
 export default function GlobalStyles(
-  props: Omit<GlobalStylesProps, 'defaultTheme'>
+  props: DistributiveOmit<GlobalStylesProps, 'defaultTheme'>
 ): React.ReactElement;

packages/material-ui/src/Grow/Grow.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
 import { TransitionProps } from '../transitions/transition';
 
 export interface GrowProps extends Omit<TransitionProps, 'timeout'> {

packages/material-ui/src/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 import { SxProps } from '@material-ui/system';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
@@ -73,7 +73,7 @@ declare const Link: OverridableComponent<LinkTypeMap>;
 export type LinkClassKey = keyof NonNullable<LinkTypeMap['props']['classes']>;
 
 export type LinkBaseProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> &
-  Omit<TypographyProps, 'children' | 'component' | 'color' | 'variant'>;
+  DistributiveOmit<TypographyProps, 'children' | 'component' | 'color' | 'variant'>;
 
 export type LinkProps<
   D extends React.ElementType = LinkTypeMap['defaultComponent'],

packages/material-ui/src/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 import { ListItemTypeMap, ListItemProps } from '../ListItem';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ExtendButtonBase } from '../ButtonBase';
@@ -7,7 +7,7 @@ export type MenuItemClassKey = keyof NonNullable<MenuItemTypeMap['props']['class
 
 export interface MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> {
   props: P &
-    Omit<ListItemTypeMap<P, D>['props'], 'children'> & {
+    DistributiveOmit<ListItemTypeMap<P, D>['props'], 'children'> & {
       /**
        * The content of the component.
        */

packages/material-ui/src/OverridableComponent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 import { StyledComponentProps } from './styles';
 
 /**
@@ -29,7 +29,7 @@ export type OverrideProps<
   C extends React.ElementType
 > = (
   & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
+  & DistributiveOmit<React.ComponentPropsWithRef<C>, keyof BaseProps<M>>
 );
 
 /**
@@ -38,7 +38,7 @@ export type OverrideProps<
 // prettier-ignore
 export type DefaultComponentProps<M extends OverridableTypeMap> =
   & BaseProps<M>
-  & Omit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
+  & DistributiveOmit<React.ComponentPropsWithRef<M['defaultComponent']>, keyof BaseProps<M>>;
 
 /**
  * Props defined on the component (+ common material-ui props).

packages/material-ui/src/Popper/Popper.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Instance, VirtualElement, Options, OptionsGeneric } from '@popperjs/core';
-import { Omit } from '..';
 import { PortalProps } from '../Portal';
 
 export type PopperPlacementType = Options['placement'];

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
 import { DrawerProps } from '../Drawer';
 
 export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'open'> {

packages/material-ui/src/TablePagination/TablePagination.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { TablePaginationActionsProps } from './TablePaginationActions';
 import { TableCellProps } from '../TableCell';

packages/material-ui/src/TextareaAutosize/TextareaAutosize.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Omit } from '..';
 
 export interface TextareaAutosizeProps
   extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> {

packages/material-ui/src/index.d.ts

@@ -1,27 +1,20 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
 import { StyledComponentProps } from './styles';
 
 export { StyledComponentProps };
 
-/**
- * @deprecated
- * Import from `@material-ui/types` instead
- *
- * TODO: to remove in v5
- */
-export { Omit };
-
 /**
  * All standard components exposed by `material-ui` are `StyledComponents` with
  * certain `classes`, on which one can also set a top-level `className` and inline
  * `style`.
  * @deprecated will be removed in v5 for internal usage only
  */
-export type StandardProps<C, ClassKey extends string, Removals extends keyof C = never> = Omit<
+export type StandardProps<
   C,
-  'classes' | Removals
-> &
+  ClassKey extends string,
+  Removals extends keyof C = never
+> = DistributiveOmit<C, 'classes' | Removals> &
   StyledComponentProps<ClassKey> & {
     className?: string;
     ref?: C extends { ref?: infer RefType } ? RefType : React.Ref<unknown>;
@@ -35,7 +28,7 @@ export type StandardProps<C, ClassKey extends string, Removals extends keyof C =
  * However, we don't declare classes on this type.
  * It is recommended to declare them manually with an interface so that each class can have a separate JSDOC.
  */
-export type InternalStandardProps<C, Removals extends keyof C = never> = Omit<
+export type InternalStandardProps<C, Removals extends keyof C = never> = DistributiveOmit<
   C,
   'classes' | Removals
 > &