[material] Remove dependency to @mui/base (#42907)

docs/data/material/pagesApi.js

@@ -27,6 +27,7 @@ module.exports = [
   { pathname: '/material-ui/api/checkbox' },
   { pathname: '/material-ui/api/chip' },
   { pathname: '/material-ui/api/circular-progress' },
+  { pathname: '/material-ui/api/click-away-listener' },
   { pathname: '/material-ui/api/collapse' },
   { pathname: '/material-ui/api/container' },
   { pathname: '/material-ui/api/css-baseline' },
@@ -76,12 +77,14 @@ module.exports = [
   { pathname: '/material-ui/api/mobile-stepper' },
   { pathname: '/material-ui/api/modal' },
   { pathname: '/material-ui/api/native-select' },
+  { pathname: '/material-ui/api/no-ssr' },
   { pathname: '/material-ui/api/outlined-input' },
   { pathname: '/material-ui/api/pagination' },
   { pathname: '/material-ui/api/pagination-item' },
   { pathname: '/material-ui/api/paper' },
   { pathname: '/material-ui/api/popover' },
   { pathname: '/material-ui/api/popper' },
+  { pathname: '/material-ui/api/portal' },
   { pathname: '/material-ui/api/radio' },
   { pathname: '/material-ui/api/radio-group' },
   { pathname: '/material-ui/api/rating' },
@@ -121,6 +124,7 @@ module.exports = [
   { pathname: '/material-ui/api/tab-panel' },
   { pathname: '/material-ui/api/tabs' },
   { pathname: '/material-ui/api/tab-scroll-button' },
+  { pathname: '/material-ui/api/textarea-autosize' },
   { pathname: '/material-ui/api/text-field' },
   { pathname: '/material-ui/api/timeline' },
   { pathname: '/material-ui/api/timeline-connector' },

docs/pages/material-ui/api/click-away-listener.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './click-away-listener.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/click-away-listener',
+    false,
+    /\.\/click-away-listener.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/material-ui/api/click-away-listener.json

@@ -0,0 +1,34 @@
+{
+  "props": {
+    "children": { "type": { "name": "custom", "description": "element" }, "required": true },
+    "onClickAway": { "type": { "name": "func" }, "required": true },
+    "disableReactTree": { "type": { "name": "bool" }, "default": "false" },
+    "mouseEvent": {
+      "type": {
+        "name": "enum",
+        "description": "'onClick'<br>&#124;&nbsp;'onMouseDown'<br>&#124;&nbsp;'onMouseUp'<br>&#124;&nbsp;'onPointerDown'<br>&#124;&nbsp;'onPointerUp'<br>&#124;&nbsp;false"
+      },
+      "default": "'onClick'"
+    },
+    "touchEvent": {
+      "type": {
+        "name": "enum",
+        "description": "'onTouchEnd'<br>&#124;&nbsp;'onTouchStart'<br>&#124;&nbsp;false"
+      },
+      "default": "'onTouchEnd'"
+    }
+  },
+  "name": "ClickAwayListener",
+  "imports": [
+    "import ClickAwayListener from '@mui/material/ClickAwayListener';",
+    "import { ClickAwayListener } from '@mui/material';"
+  ],
+  "classes": [],
+  "spread": false,
+  "themeDefaultProps": null,
+  "muiName": "MuiClickAwayListener",
+  "filename": "/packages/mui-material/src/ClickAwayListener/ClickAwayListener.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/material-ui/react-click-away-listener/\">Click-Away Listener</a></li>\n<li><a href=\"/material-ui/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/material-ui/api/no-ssr.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './no-ssr.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs/translations/api-docs/no-ssr', false, /\.\/no-ssr.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

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

@@ -0,0 +1,17 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "defer": { "type": { "name": "bool" }, "default": "false" },
+    "fallback": { "type": { "name": "node" }, "default": "null" }
+  },
+  "name": "NoSsr",
+  "imports": ["import NoSsr from '@mui/material/NoSsr';", "import { NoSsr } from '@mui/material';"],
+  "classes": [],
+  "spread": false,
+  "themeDefaultProps": null,
+  "muiName": "MuiNoSsr",
+  "filename": "/packages/mui-material/src/NoSsr/NoSsr.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/material-ui/react-no-ssr/\">No SSR</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/material-ui/api/popper.json

@@ -63,7 +63,14 @@
     "import Popper from '@mui/material/Popper';",
     "import { Popper } from '@mui/material';"
   ],
-  "classes": [],
+  "classes": [
+    {
+      "key": "root",
+      "className": "MuiPopper-root",
+      "description": "Class name applied to the root element.",
+      "isGlobal": false
+    }
+  ],
   "spread": true,
   "themeDefaultProps": false,
   "muiName": "MuiPopper",

docs/pages/material-ui/api/portal.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './portal.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context('docs/translations/api-docs/portal', false, /\.\/portal.*.json$/);
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/material-ui/api/portal.json

@@ -0,0 +1,20 @@
+{
+  "props": {
+    "children": { "type": { "name": "node" } },
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
+    "disablePortal": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "Portal",
+  "imports": [
+    "import Portal from '@mui/material/Portal';",
+    "import { Portal } from '@mui/material';"
+  ],
+  "classes": [],
+  "spread": false,
+  "themeDefaultProps": null,
+  "muiName": "MuiPortal",
+  "filename": "/packages/mui-material/src/Portal/Portal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/material-ui/react-portal/\">Portal</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/material-ui/api/textarea-autosize.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './textarea-autosize.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/textarea-autosize',
+    false,
+    /\.\/textarea-autosize.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/material-ui/api/textarea-autosize.json

@@ -0,0 +1,22 @@
+{
+  "props": {
+    "maxRows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "minRows": {
+      "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },
+      "default": "1"
+    }
+  },
+  "name": "TextareaAutosize",
+  "imports": [
+    "import TextareaAutosize from '@mui/material/TextareaAutosize';",
+    "import { TextareaAutosize } from '@mui/material';"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "MuiTextareaAutosize",
+  "filename": "/packages/mui-material/src/TextareaAutosize/TextareaAutosize.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/material-ui/react-textarea-autosize/\">Textarea Autosize</a></li></ul>",
+  "cssComponent": false
+}

docs/translations/api-docs/click-away-listener/click-away-listener.json

@@ -0,0 +1,19 @@
+{
+  "componentDescription": "Listen for click events that occur somewhere in the document, outside of the element itself.\nFor instance, if you need to hide a menu when people click anywhere else on your page.",
+  "propDescriptions": {
+    "children": { "description": "The wrapped element.", "requiresRef": true },
+    "disableReactTree": {
+      "description": "If <code>true</code>, the React tree is ignored and only the DOM tree is considered. This prop changes how portaled elements are handled."
+    },
+    "mouseEvent": {
+      "description": "The mouse event to listen to. You can disable the listener by providing <code>false</code>."
+    },
+    "onClickAway": {
+      "description": "Callback fired when a &quot;click away&quot; event is detected."
+    },
+    "touchEvent": {
+      "description": "The touch event to listen to. You can disable the listener by providing <code>false</code>."
+    }
+  },
+  "classDescriptions": {}
+}

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

@@ -0,0 +1,11 @@
+{
+  "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." },
+    "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."
+    },
+    "fallback": { "description": "The fallback content to display." }
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/popper/popper.json

@@ -41,5 +41,5 @@
       "description": "Help supporting a react-transition-group/Transition component."
     }
   },
-  "classDescriptions": {}
+  "classDescriptions": { "root": { "description": "Class name applied to the root element." } }
 }

docs/translations/api-docs/portal/portal.json

@@ -0,0 +1,13 @@
+{
+  "componentDescription": "Portals provide a first-class way to render children into a DOM node\nthat exists outside the DOM hierarchy of the parent component.",
+  "propDescriptions": {
+    "children": { "description": "The children to render into the <code>container</code>." },
+    "container": {
+      "description": "An HTML element or function that returns one. The <code>container</code> will have the portal children appended to it.<br>You can also provide a callback, which is called in a React layout effect. This lets you set the container from a ref, and also makes server-side rendering possible.<br>By default, it uses the body of the top-level document object, so it&#39;s simply <code>document.body</code> most of the time."
+    },
+    "disablePortal": {
+      "description": "The <code>children</code> will be under the DOM hierarchy of the parent component."
+    }
+  },
+  "classDescriptions": {}
+}

docs/translations/api-docs/textarea-autosize/textarea-autosize.json

@@ -0,0 +1,8 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "maxRows": { "description": "Maximum number of rows to display." },
+    "minRows": { "description": "Minimum number of rows to display." }
+  },
+  "classDescriptions": {}
+}

packages/api-docs-builder-core/baseUi/projectSettings.ts

@@ -27,6 +27,9 @@ export const projectSettings: ProjectSettings = {
   getHookInfo: getBaseUiHookInfo,
   translationLanguages: LANGUAGES,
   skipComponent: () => false,
+  skipHook: (filename) => {
+    return filename.match(/(useSlotProps)/) !== null;
+  },
   onCompleted: async () => {
     await generateBaseUIApiPages();
   },

packages/api-docs-builder/ProjectSettings.ts

@@ -56,6 +56,10 @@ export interface ProjectSettings {
    * Fuction called to detemine whether to skip the generation of a particular component's API docs
    */
   skipComponent: (filename: string) => boolean;
+  /**
+   * Fuction called to detemine whether to skip the generation of a particular hook's API docs
+   */
+  skipHook?: (filename: string) => boolean;
   /**
    * Determine is the component definition should be updated.
    */

packages/api-docs-builder/buildApi.ts

@@ -135,6 +135,9 @@ async function buildSingleProject(
     );
 
     const projectHooks = findHooks(path.join(project.rootPath, 'src')).filter((hook) => {
+      if (projectSettings.skipHook?.(hook.filename)) {
+        return false;
+      }
       if (grep === null) {
         return true;
       }

packages/mui-base/src/utils/appendOwnerState.ts

@@ -1,51 +1,3 @@
-import * as React from 'react';
-import { Simplify } from '@mui/types';
-import { isHostComponent } from './isHostComponent';
+export { default as appendOwnerState } from '@mui/utils/appendOwnerState';
 
-/**
- * Type of the ownerState based on the type of an element it applies to.
- * This resolves to the provided OwnerState for React components and `undefined` for host components.
- * Falls back to `OwnerState | undefined` when the exact type can't be determined in development time.
- */
-type OwnerStateWhenApplicable<ElementType extends React.ElementType, OwnerState> =
-  ElementType extends React.ComponentType<any>
-    ? OwnerState
-    : ElementType extends keyof JSX.IntrinsicElements
-      ? undefined
-      : OwnerState | undefined;
-
-export type AppendOwnerStateReturnType<
-  ElementType extends React.ElementType,
-  OtherProps,
-  OwnerState,
-> = Simplify<
-  OtherProps & {
-    ownerState: OwnerStateWhenApplicable<ElementType, OwnerState>;
-  }
->;
-
-/**
- * Appends the ownerState object to the props, merging with the existing one if necessary.
- *
- * @param elementType Type of the element that owns the `existingProps`. If the element is a DOM node or undefined, `ownerState` is not applied.
- * @param otherProps Props of the element.
- * @param ownerState
- */
-export function appendOwnerState<
-  ElementType extends React.ElementType,
-  OtherProps extends Record<string, any>,
-  OwnerState,
->(
-  elementType: ElementType | undefined,
-  otherProps: OtherProps,
-  ownerState: OwnerState,
-): AppendOwnerStateReturnType<ElementType, OtherProps, OwnerState> {
-  if (elementType === undefined || isHostComponent(elementType)) {
-    return otherProps as AppendOwnerStateReturnType<ElementType, OtherProps, OwnerState>;
-  }
-
-  return {
-    ...otherProps,
-    ownerState: { ...otherProps.ownerState, ...ownerState },
-  } as AppendOwnerStateReturnType<ElementType, OtherProps, OwnerState>;
-}
+export type { AppendOwnerStateReturnType } from '@mui/utils/appendOwnerState';