[NoSsr] Convert code to TypeScript (mui#34735)

Signed-off-by: Michael John Bayucot <mbayucot@gmail.com>
Co-authored-by: Michał Dudak <michal.dudak@gmail.com>

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

@@ -7,7 +7,7 @@
   "name": "NoSsr",
   "styles": { "classes": [], "globalClasses": {}, "name": null },
   "spread": false,
-  "filename": "/packages/mui-base/src/NoSsr/NoSsr.js",
+  "filename": "/packages/mui-base/src/NoSsr/NoSsr.tsx",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/base/react-no-ssr/\">No SSR</a></li></ul>",
   "cssComponent": false

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

@@ -1,5 +1,5 @@
 {
-  "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- 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.",
+  "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": "You can wrap a node.",
     "defer": "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.",

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

@@ -1,17 +1,27 @@
 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).
  *
  * This component can be useful in a variety of situations:
- * - Escape hatch for broken dependencies not supporting SSR.
- * - Improve the time-to-first paint on the client by only rendering above the fold.
- * - Reduce the rendering time on the server.
- * - Under too heavy server load, you can turn on service degradation.
+ *
+ * *   Escape hatch for broken dependencies not supporting SSR.
+ * *   Improve the time-to-first paint on the client by only rendering above the fold.
+ * *   Reduce the rendering time on the server.
+ * *   Under too heavy server load, you can turn on service degradation.
+ *
+ * Demos:
+ *
+ * - [No SSR](https://mui.com/base/react-no-ssr/)
+ *
+ * API:
+ *
+ * - [NoSsr API](https://mui.com/base/api/no-ssr/)
  */
-function NoSsr(props) {
+function NoSsr(props: NoSsrProps) {
   const { children, defer = false, fallback = null } = props;
   const [mountedState, setMountedState] = React.useState(false);
 
@@ -34,7 +44,7 @@ function NoSsr(props) {
 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 +61,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;
 }