[NoSsr] Move NoSsr to the Unstyled package (#27356)

docs/pages/api-docs/no-ssr.json

@@ -7,7 +7,7 @@
   "name": "NoSsr",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
   "spread": false,
-  "filename": "/packages/material-ui/src/NoSsr/NoSsr.js",
+  "filename": "/packages/material-ui-unstyled/src/NoSsr/NoSsr.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/no-ssr/\">No Ssr</a></li></ul>",
   "styledComponent": true,

docs/pages/performance/slider-emotion.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Slider from '@material-ui/core/Slider';
 
 const data = {

docs/pages/performance/slider-jss.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Slider from '@material-ui/core/Slider';
 
 const data = {

docs/pages/performance/system.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Box from '@material-ui/core/Box';
 
 export default function SxPropBoxMaterialUI() {

docs/pages/performance/table-component.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

docs/pages/performance/table-emotion.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 // import { styled } from '@material-ui/core/styles';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const Root = styled('div')`

docs/pages/performance/table-hook.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/styles';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const useStyles = makeStyles({

docs/pages/performance/table-mui.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';

docs/pages/performance/table-raw.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const data = { name: 'Frozen yoghurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 };
 const rows = Array.from(new Array(100)).map(() => data);

docs/pages/performance/table-styled-components.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const createComponent = (defaultComponent) => {
   const MyComponent = React.forwardRef(function MyComponent(props, ref) {

docs/src/pages/components/no-ssr/no-ssr.md

@@ -31,3 +31,13 @@ You can **wait a screen frame** with the `defer` property to render the children
 React does [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) instead of 1.
 
 {{"demo": "pages/components/no-ssr/FrameDeferring.js"}}
+
+## Unstyled
+
+- 📦 [784 B gzipped](https://bundlephobia.com/result?p=@material-ui/unstyled@next)
+
+As the component does not have any styles, it also comes with the unstyled package.
+
+```js
+import NoSsr from '@material-ui/unstyled/NoSsr';
+```

docs/src/pages/landing/Quotes.js

@@ -9,7 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Avatar from '@material-ui/core/Avatar';
 import TwitterIcon from '@material-ui/icons/Twitter';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Container from '@material-ui/core/Container';
 import Divider from '@material-ui/core/Divider';
 import { useTranslate } from 'docs/src/modules/utils/i18n';

docs/src/pages/landing/Sponsors.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/styles';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Container from '@material-ui/core/Container';
 import Divider from '@material-ui/core/Divider';

docs/src/pages/landing/Themes.js

@@ -4,7 +4,7 @@ import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Box from '@material-ui/core/Box';
 import Link from 'docs/src/modules/components/Link';
 import { useTranslate } from 'docs/src/modules/utils/i18n';

docs/src/pages/landing/Users.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/styles';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import Divider from '@material-ui/core/Divider';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';

docs/src/pages/system/advanced/CombiningStyleFunctionsDemo.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { palette, spacing } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const Div = styled.div`
   ${palette}

docs/src/pages/system/advanced/CombiningStyleFunctionsDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { palette, PaletteProps, spacing, SpacingProps } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 const Div = styled.div<PaletteProps & SpacingProps>`
   ${palette}

docs/src/pages/system/advanced/StyleFunctionSxDemo.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import { unstable_styleFunctionSx } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import { createTheme } from '@material-ui/core/styles';
 
 const theme = createTheme();

docs/src/pages/system/advanced/StyleFunctionSxDemo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled, { InterpolationFunction, ThemeProvider } from 'styled-components';
 import { unstable_styleFunctionSx, SxProps } from '@material-ui/system';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import { createTheme } from '@material-ui/core/styles';
 
 interface DivProps {

packages/material-ui-docs/src/NProgressBar/NProgressBar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import NProgress from 'nprogress';
 import { withStyles } from '@material-ui/styles';
 import { createTheme } from '@material-ui/core/styles';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 import { exactProp } from '@material-ui/utils';
 
 NProgress.configure({

packages/material-ui/src/NoSsr/NoSsr.js → packages/material-ui-unstyled/src/NoSsr/NoSsr.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { exactProp } from '@material-ui/utils';
-import useEnhancedEffect from '../utils/useEnhancedEffect';
+import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
 
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).

packages/material-ui/src/NoSsr/NoSsr.test.js → packages/material-ui-unstyled/src/NoSsr/NoSsr.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createClientRender, createServerRender } from 'test/utils';
-import NoSsr from '@material-ui/core/NoSsr';
+import NoSsr from '@material-ui/unstyled/NoSsr';
 
 describe('<NoSsr />', () => {
   const render = createClientRender();

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

@@ -0,0 +1,2 @@
+export { default } from './NoSsr';
+export * from './NoSsr';

packages/material-ui-unstyled/src/NoSsr/index.js

@@ -0,0 +1 @@
+export { default } from './NoSsr';

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

@@ -4,28 +4,30 @@ export * from './BackdropUnstyled';
 export { default as BadgeUnstyled } from './BadgeUnstyled';
 export * from './BadgeUnstyled';
 
+export { default as unstable_composeClasses } from './composeClasses';
+export * from './composeClasses';
+
+export { default as generateUtilityClass } from './generateUtilityClass';
+export * from './generateUtilityClass';
+
+export { default as generateUtilityClasses } from './generateUtilityClasses';
+export * from './generateUtilityClasses';
+
 export { default as ModalUnstyled } from './ModalUnstyled';
 export * from './ModalUnstyled';
 
+export { default as NoSsr } from './NoSsr';
+
+export { default as Portal } from './Portal';
+export * from './Portal';
+
 export { default as SliderUnstyled } from './SliderUnstyled';
 export * from './SliderUnstyled';
 
 export { default as SwitchUnstyled } from './SwitchUnstyled';
 export * from './SwitchUnstyled';
 
-export { default as Portal } from './Portal';
-export * from './Portal';
-
 export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
 export * from './Unstable_TrapFocus';
 
-export { default as generateUtilityClass } from './generateUtilityClass';
-export * from './generateUtilityClass';
-
-export { default as generateUtilityClasses } from './generateUtilityClasses';
-export * from './generateUtilityClasses';
-
-export { default as unstable_composeClasses } from './composeClasses';
-export * from './composeClasses';
-
 export * from './utils';

packages/material-ui-unstyled/src/index.js

@@ -4,23 +4,25 @@ export * from './BackdropUnstyled';
 export { default as BadgeUnstyled } from './BadgeUnstyled';
 export * from './BadgeUnstyled';
 
-export { default as SliderUnstyled } from './SliderUnstyled';
-export * from './SliderUnstyled';
+export { default as unstable_composeClasses } from './composeClasses';
 
-export { default as SwitchUnstyled } from './SwitchUnstyled';
-export * from './SwitchUnstyled';
+export { default as generateUtilityClass } from './generateUtilityClass';
+
+export { default as generateUtilityClasses } from './generateUtilityClasses';
 
 export { default as ModalUnstyled } from './ModalUnstyled';
 export * from './ModalUnstyled';
 
-export { default as Portal } from './Portal';
+export { default as NoSsr } from './NoSsr';
 
-export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
+export { default as Portal } from './Portal';
 
-export { default as generateUtilityClass } from './generateUtilityClass';
+export { default as SliderUnstyled } from './SliderUnstyled';
+export * from './SliderUnstyled';
 
-export { default as generateUtilityClasses } from './generateUtilityClasses';
+export { default as SwitchUnstyled } from './SwitchUnstyled';
+export * from './SwitchUnstyled';
 
-export { default as unstable_composeClasses } from './composeClasses';
+export { default as Unstable_TrapFocus } from './Unstable_TrapFocus';
 
 export * from './utils';

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

@@ -1,2 +1,2 @@
-export { default } from './NoSsr';
-export * from './NoSsr';
+export { default } from '@material-ui/unstyled/NoSsr';
+export * from '@material-ui/unstyled/NoSsr';

packages/material-ui/src/NoSsr/index.js

@@ -1 +1 @@
-export { default } from './NoSsr';
+export { default } from '@material-ui/unstyled/NoSsr';

packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@material-ui/utils';
 import { useThemeProps } from '@material-ui/system';
+import { NoSsr } from '@material-ui/unstyled';
 import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -10,7 +11,6 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
 import { duration } from '../styles/createTransitions';
 import useTheme from '../styles/useTheme';
 import { getTransitionProps } from '../transitions/utils';
-import NoSsr from '../NoSsr';
 import SwipeArea from './SwipeArea';
 
 // This value is closed to what browsers are using internally to