[NoSSR] Port the component from legacy Base UI

docs/data/components/no-ssr/FrameDeferring.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
+import { styled } from '@mui/system';
 import { NoSsr } from '@base_ui/react/NoSsr';
-import { Box } from '@mui/system';
 
 function LargeTree() {
   return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
@@ -14,8 +14,8 @@ export default function FrameDeferring() {
   });
 
   return (
-    <div>
-      <button
+    <Demo>
+      <Button
         type="button"
         onClick={() =>
           setState({
@@ -24,10 +24,10 @@ export default function FrameDeferring() {
           })
         }
       >
-        {'Render NoSsr defer="false"'}
-      </button>
+        {'Render <NoSsr defer={false} />'}
+      </Button>
       <br />
-      <button
+      <Button
         type="button"
         onClick={() =>
           setState({
@@ -36,11 +36,11 @@ export default function FrameDeferring() {
           })
         }
       >
-        {'Render NoSsr defer="true"'}
-      </button>
+        {'Render <NoSsr defer={true} />'}
+      </Button>
       <br />
       <br />
-      <Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
+      <Panel sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
         {state.open ? (
           <React.Fragment>
             <div>Outside NoSsr</div>
@@ -50,7 +50,38 @@ export default function FrameDeferring() {
             </NoSsr>
           </React.Fragment>
         ) : null}
-      </Box>
-    </div>
+      </Panel>
+    </Demo>
   );
 }
+
+const Panel = styled('div')`
+  padding: 16px;
+`;
+
+const Demo = styled('div')`
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: auto;
+  padding: 8px;
+`;
+
+const Button = styled('button')(
+  ({ theme }) => `
+  background-color: ${theme.palette.mode === 'dark' ? 'var(--gray-50)' : 'var(--gray-900)'};
+  color: ${theme.palette.mode === 'dark' ? 'var(--gray-900)' : 'var(--gray-50)'};
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-family:
+    "IBM Plex Sans",
+    sans-serif;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? 'var(--gray-200)' : 'var(--gray-700)'};
+  }
+`,
+);

docs/data/components/no-ssr/FrameDeferring.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
+import { styled } from '@mui/system';
 import { NoSsr } from '@base_ui/react/NoSsr';
-import { Box } from '@mui/system';
 
 function LargeTree(): any {
   return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
@@ -14,8 +14,8 @@ export default function FrameDeferring() {
   });
 
   return (
-    <div>
-      <button
+    <Demo>
+      <Button
         type="button"
         onClick={() =>
           setState({
@@ -24,10 +24,10 @@ export default function FrameDeferring() {
           })
         }
       >
-        {'Render NoSsr defer="false"'}
-      </button>
+        {'Render <NoSsr defer={false} />'}
+      </Button>
       <br />
-      <button
+      <Button
         type="button"
         onClick={() =>
           setState({
@@ -36,11 +36,11 @@ export default function FrameDeferring() {
           })
         }
       >
-        {'Render NoSsr defer="true"'}
-      </button>
+        {'Render <NoSsr defer={true} />'}
+      </Button>
       <br />
       <br />
-      <Box sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
+      <Panel sx={{ width: 300, display: 'flex', flexWrap: 'wrap' }}>
         {state.open ? (
           <React.Fragment>
             <div>Outside NoSsr</div>
@@ -50,7 +50,38 @@ export default function FrameDeferring() {
             </NoSsr>
           </React.Fragment>
         ) : null}
-      </Box>
-    </div>
+      </Panel>
+    </Demo>
   );
 }
+
+const Panel = styled('div')`
+  padding: 16px;
+`;
+
+const Demo = styled('div')`
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: auto;
+  padding: 8px;
+`;
+
+const Button = styled('button')(
+  ({ theme }) => `
+  background-color: ${theme.palette.mode === 'dark' ? 'var(--gray-50)' : 'var(--gray-900)'};
+  color: ${theme.palette.mode === 'dark' ? 'var(--gray-900)' : 'var(--gray-50)'};
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  font-family:
+    "IBM Plex Sans",
+    sans-serif;
+
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? 'var(--gray-200)' : 'var(--gray-700)'};
+  }
+`,
+);

docs/data/components/no-ssr/SimpleNoSsr.js

@@ -1,21 +1,31 @@
 'use client';
 import * as React from 'react';
+import { styled } from '@mui/system';
 import { NoSsr } from '@base_ui/react/NoSsr';
-import { Box } from '@mui/system';
 
 export default function SimpleNoSsr() {
   return (
-    <div>
-      <Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
-        Server and Client
-      </Box>
+    <Demo>
+      <Panel>Server and Client</Panel>
       <NoSsr>
-        <Box
-          sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
-        >
-          Client only
-        </Box>
+        <Panel>Client only</Panel>
       </NoSsr>
-    </div>
+    </Demo>
   );
 }
+
+const Demo = styled('div')`
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  padding: 8px;
+`;
+
+const Panel = styled('div')`
+  padding: var(--space-2);
+  margin-bottom: var(--space-1);
+  background-color: var(--gray-100);
+`;

docs/data/components/no-ssr/SimpleNoSsr.tsx

@@ -1,21 +1,31 @@
 'use client';
 import * as React from 'react';
+import { styled } from '@mui/system';
 import { NoSsr } from '@base_ui/react/NoSsr';
-import { Box } from '@mui/system';
 
 export default function SimpleNoSsr() {
   return (
-    <div>
-      <Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
-        Server and Client
-      </Box>
+    <Demo>
+      <Panel>Server and Client</Panel>
       <NoSsr>
-        <Box
-          sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
-        >
-          Client only
-        </Box>
+        <Panel>Client only</Panel>
       </NoSsr>
-    </div>
+    </Demo>
   );
 }
+
+const Demo = styled('div')`
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  padding: 8px;
+`;
+
+const Panel = styled('div')`
+  padding: var(--space-2);
+  margin-bottom: var(--space-1);
+  background-color: var(--gray-100);
+`;

docs/data/components/no-ssr/SimpleNoSsr.tsx.preview

@@ -1,10 +1,6 @@
-<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText' }}>
-  Server and Client
-</Box>
-<NoSsr>
-  <Box
-    sx={{ p: 2, bgcolor: 'secondary.main', color: 'secondary.contrastText' }}
-  >
-    Client only
-  </Box>
-</NoSsr>
+<Demo>
+  <Panel>Server and Client</Panel>
+  <NoSsr>
+    <Panel>Client only</Panel>
+  </NoSsr>
+</Demo>

docs/data/components/no-ssr/no-ssr.mdx

@@ -1,6 +1,6 @@
 ---
 productId: base-ui
-title: No SSR React component
+title: No-SSR React component
 description: The No-SSR component defers the rendering of children components from the server to the client.
 components: NoSsr
 ---

docs/data/pages.ts

@@ -31,6 +31,7 @@ const pages: readonly RouteMetadata[] = [
       { pathname: '/components/react-fieldset', title: 'Fieldset' },
       { pathname: '/components/react-form', title: 'Form' },
       { pathname: '/components/react-menu', title: 'Menu' },
+      { pathname: '/components/react-no-ssr', title: 'No-SSR' },
       { pathname: '/components/react-number-field', title: 'Number Field' },
       { pathname: '/components/react-popover', title: 'Popover' },
       { pathname: '/components/react-preview-card', title: 'Preview Card' },

docs/data/translations/api-docs/no-ssr/no-ssr.json

@@ -1,7 +1,7 @@
 {
   "componentDescription": "NoSsr purposely removes components from the subject of Server Side Rendering (SSR).\n\nThis component can be useful in a variety of situations:\n\n*   Escape hatch for broken dependencies not supporting SSR.\n*   Improve the time-to-first paint on the client by only rendering above the fold.\n*   Reduce the rendering time on the server.\n*   Under too heavy server load, you can turn on service degradation.",
   "propDescriptions": {
-    "children": { "description": "You can wrap a node." },
+    "children": { "description": "React node to render on client only." },
     "defer": {
       "description": "If <code>true</code>, the component will not only prevent server-side rendering. It will also defer the rendering of the children into a different screen frame."
     },

docs/src/components/demo/Demo.module.css

@@ -9,8 +9,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding-top: 64px;
-  padding-bottom: 64px;
+  min-height: 150px;
+  padding: var(--space-2);
 
   &:focus {
     box-shadow: 0 0 0 1px var(--gray-outline-2) inset;

packages/mui-base/src/NoSsr/NoSsr.tsx

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { NoSsrProps } from './NoSsr.types';
 
 /**
  * NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
@@ -22,7 +21,7 @@ import { NoSsrProps } from './NoSsr.types';
  *
  * - [NoSsr API](https://base-ui.netlify.app/components/react-no-ssr/#api-reference-NoSsr)
  */
-function NoSsr(props: NoSsrProps): JSX.Element {
+function NoSsr(props: NoSsr.Props): JSX.Element {
   const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 
@@ -42,13 +41,33 @@ function NoSsr(props: NoSsrProps): JSX.Element {
   return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
 }
 
+namespace NoSsr {
+  export interface Props {
+    /**
+     * React node to render on client only.
+     */
+    children?: React.ReactNode;
+    /**
+     * If `true`, the component will not only prevent server-side rendering.
+     * It will also defer the rendering of the children into a different screen frame.
+     * @default false
+     */
+    defer?: boolean;
+    /**
+     * The fallback content to display.
+     * @default null
+     */
+    fallback?: React.ReactNode;
+  }
+}
+
 NoSsr.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * You can wrap a node.
+   * React node to render on client only.
    */
   children: PropTypes.node,
   /**

packages/mui-base/src/NoSsr/index.ts

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