[withWidth] Remove API (#26136)

Author: m4theushw

docs/src/pages/customization/breakpoints/WithWidth.js

@@ -62,24 +62,6 @@ You might want to change the React rendering tree based on the breakpoint value,
 
 You can learn more on the [useMediaQuery](/components/use-media-query/) page.
 
-### withWidth()
-
-> ⚠️ This higher-order component will be deprecated for the [useMediaQuery](/components/use-media-query/) hook.
-
-```jsx
-import withWidth from '@material-ui/core/withWidth';
-
-function MyComponent(props) {
-  return <div>{`Current width: ${props.width}`}</div>;
-}
-
-export default withWidth()(MyComponent);
-```
-
-In the following demo, we change the rendered DOM element (_em_, <u>u</u>, ~~del~~ & span) based on the screen width.
-
-{{"demo": "pages/customization/breakpoints/WithWidth.js"}}
-
 ## Custom breakpoints
 
 You define your project's breakpoints in the `theme.breakpoints` section of your theme.
@@ -241,77 +223,6 @@ const styles = (theme) => ({
 });
 ```
 
-### `withWidth([options]) => higher-order component`
-
-Inject a `width` prop.
-It does not modify the component passed to it; instead, it returns a new component.
-This `width` breakpoint prop matches the current screen width.
-It can be one of the following breakpoints:
-
-```ts
-type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-```
-
-Some implementation details that might be interesting to being aware of:
-
-- It forwards _non React static_ properties so this HOC is more "transparent".
-  For instance, it can be used to define a `getInitialProps()` static method (next.js).
-
-#### Arguments
-
-1. `options` (_object_ [optional]):
-
-- `options.withTheme` (_bool_ [optional]): Defaults to `false`. Provide the `theme` object to the component as a prop.
-- `options.noSSR` (_bool_ [optional]): Defaults to `false`.
-  In order to perform the server-side rendering reconciliation, it needs to render twice.
-  A first time with nothing and a second time with the children.
-  This double pass rendering cycle comes with a drawback. The UI might blink.
-  You can set this flag to `true` if you are not doing server-side rendering.
-- `options.initialWidth` (_Breakpoint_ [optional]):
-  As `window.innerWidth` is unavailable on the server,
-  we default to rendering an empty component during the first mount.
-  You might want to use a heuristic to approximate
-  the screen width of the client browser screen width.
-  For instance, you could be using the user-agent or the [client-hints](https://caniuse.com/#search=client%20hint).
-  we also can set the initial width globally using [`custom props`](/customization/theme-components/#default-props) in the theme.
-  In order to set the initialWidth we need to pass a custom prop with this shape:
-
-```js
-const theme = createTheme({
-  components: {
-    // withWidth component ⚛️
-    MuiWithWidth: {
-      defaultProps: {
-        // Initial width prop
-        initialWidth: 'lg', // Breakpoint being globally set 🌎!
-      },
-    },
-  },
-});
-```
-
-- `options.resizeInterval` (_number_ [optional]): Defaults to 166, corresponds to 10 frames at 60 Hz. Number of milliseconds to wait before responding to a screen resize event.
-
-#### Returns
-
-`higher-order component`: Should be used to wrap a component.
-
-#### Examples
-
-```jsx
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
-
-function MyComponent(props) {
-  if (isWidthUp('sm', props.width)) {
-    return <span />;
-  }
-
-  return <div />;
-}
-
-export default withWidth()(MyComponent);
-```
-
 ## Default values
 
 You can explore the default values of the breakpoints using [the theme explorer](/customization/default-theme/?expand-path=$.breakpoints) or by opening the dev tools console on this page (`window.theme.breakpoints`).

docs/src/pages/customization/breakpoints/WithWidth.tsx

@@ -1613,6 +1613,10 @@ Note: If you would like to move
   }
   ```
 
+#### withWidth
+
+- This HOC was removed. There's an alternative using the `useMediaQuery` hook on [this page](/components/use-media-query/#migrating-from-withwidth).
+
 ### `@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).

docs/src/pages/customization/breakpoints/breakpoints.md

@@ -51,8 +51,6 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Input from '@material-ui/core/Input';
 import Grow from '@material-ui/core/Grow';
 import TableFooter from '@material-ui/core/TableFooter';
-import withWidth from '@material-ui/core/withWidth';
-import { isWidthUp } from '@material-ui/core/withWidth';
 import Zoom from '@material-ui/core/Zoom';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import ListSubheader from '@material-ui/core/ListSubheader';

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

@@ -53,8 +53,6 @@ import {
   Input,
   Grow,
   TableFooter,
-  withWidth,
-  isWidthUp,
   Zoom,
   ClickAwayListener,
   ListSubheader,

packages/material-ui-codemod/src/v4.0.0/top-level-imports.test/actual.js

@@ -453,9 +453,6 @@ export * from './useMediaQuery';
 export { default as useScrollTrigger } from './useScrollTrigger';
 export * from './useScrollTrigger';
 
-export { default as withWidth } from './withWidth';
-export * from './withWidth';
-
 export { default as Zoom } from './Zoom';
 export * from './Zoom';
 

packages/material-ui-codemod/src/v4.0.0/top-level-imports.test/expected.js

@@ -389,9 +389,6 @@ export * from './usePagination';
 export { default as useScrollTrigger } from './useScrollTrigger';
 export * from './useScrollTrigger';
 
-export { default as withWidth } from './withWidth';
-export * from './withWidth';
-
 export { default as Zoom } from './Zoom';
 export * from './Zoom';
 

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

@@ -464,7 +464,4 @@ export interface Components {
   MuiUseMediaQuery?: {
     defaultProps?: ComponentsProps['MuiUseMediaQuery'];
   };
-  MuiWithWidth?: {
-    defaultProps?: ComponentsProps['MuiWithWidth'];
-  };
 }

packages/material-ui/src/index.js

@@ -113,7 +113,6 @@ import { ToolbarProps } from '../Toolbar';
 import { TooltipProps } from '../Tooltip';
 import { TouchRippleProps } from '../ButtonBase/TouchRipple';
 import { TypographyProps } from '../Typography';
-import { WithWidthOptions } from '../withWidth';
 
 export type ComponentsProps = {
   [Name in keyof ComponentsPropsList]?: Partial<ComponentsPropsList[Name]>;
@@ -235,5 +234,4 @@ export interface ComponentsPropsList {
   MuiTouchRipple: TouchRippleProps;
   MuiTypography: TypographyProps;
   MuiUseMediaQuery: useMediaQueryOptions;
-  MuiWithWidth: WithWidthOptions;
 }