[NoSsr] Convert code to TypeScript

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

@@ -1,6 +1,7 @@
 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).
@@ -11,7 +12,7 @@ import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
  * - Reduce the rendering time on the server.
  * - Under too heavy server load, you can turn on service degradation.
  */
-function NoSsr(props) {
+const NoSsr = (props: NoSsrProps) => {
   const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 
@@ -29,12 +30,12 @@ function NoSsr(props) {
 
   // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
   return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
-}
+};
 
 NoSsr.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // |     To update them edit TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   /**
    * You can wrap a node.
@@ -51,11 +52,11 @@ NoSsr.propTypes /* remove-proptypes */ = {
    * @default null
    */
   fallback: PropTypes.node,
-};
+} as any;
 
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
-  NoSsr['propTypes' + ''] = exactProp(NoSsr.propTypes);
+  (NoSsr as any)['propTypes' + ''] = exactProp(NoSsr.propTypes);
 }
 
 export default NoSsr;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface NoSsrProps {
+  /**
+   * You can wrap a node.
+   */
+  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;
+}

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

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

test/utils/createRenderer.tsx

@@ -276,6 +276,7 @@ export interface MuiRenderResult extends RenderResult<typeof queries & typeof cu
 }
 
 export interface MuiRenderToStringResult {
+  container: HTMLElement;
   hydrate(): MuiRenderResult;
 }