Merge branch 'master' into create-palette-ts

mui · Nov 30, 2024 · fb528f8 · fb528f8
2 parents a0f326e + 452d971
commit fb528f8
Show file tree

Hide file tree

Showing 36 changed files with 276 additions and 135 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -120,6 +120,10 @@ module.exports = /** @type {Config} */ ({
         variables: true,
       },
     ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
     'no-use-before-define': 'off',
 
     // disabled type-aware linting due to performance considerations

diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
@@ -9,7 +9,8 @@ import { navigationCustomizations } from './customizations/navigation';
 import { surfacesCustomizations } from './customizations/surfaces';
 import { colorSchemes, typography, shadows, shape } from './themePrimitives';
 
-function AppTheme({ children, disableCustomTheme, themeComponents }) {
+function AppTheme(props) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
@@ -17,11 +17,8 @@ interface AppThemeProps {
   themeComponents?: ThemeOptions['components'];
 }
 
-export default function AppTheme({
-  children,
-  disableCustomTheme,
-  themeComponents,
-}: AppThemeProps) {
+export default function AppTheme(props: AppThemeProps) {
+  const { children, disableCustomTheme, themeComponents } = props;
   const theme = React.useMemo(() => {
     return disableCustomTheme
       ? {}

diff --git a/docs/pages/joy-ui/api/stack.json b/docs/pages/joy-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/joy/Stack';", "import { Stack } from '@mui/joy';"],

diff --git a/docs/pages/material-ui/api/container.json b/docs/pages/material-ui/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

diff --git a/docs/pages/material-ui/api/grid-2.json b/docs/pages/material-ui/api/grid-2.json
@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid2",

diff --git a/docs/pages/material-ui/api/stack.json b/docs/pages/material-ui/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/material/Stack';", "import { Stack } from '@mui/material';"],

diff --git a/docs/pages/system/api/container.json b/docs/pages/system/api/container.json
@@ -2,13 +2,14 @@
   "props": {
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "disableGutters": { "type": { "name": "bool" } },
-    "fixed": { "type": { "name": "bool" } },
+    "disableGutters": { "type": { "name": "bool" }, "default": "false" },
+    "fixed": { "type": { "name": "bool" }, "default": "false" },
     "maxWidth": {
       "type": {
         "name": "union",
         "description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "'lg'"
     },
     "sx": {
       "type": {

diff --git a/docs/pages/system/api/grid.json b/docs/pages/system/api/grid.json
@@ -5,20 +5,22 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "12"
     },
     "columnSpacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
       }
     },
-    "container": { "type": { "name": "bool" } },
+    "container": { "type": { "name": "bool" }, "default": "false" },
     "direction": {
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'row'"
     },
     "offset": {
       "type": {
@@ -42,13 +44,15 @@
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "wrap": {
       "type": {
         "name": "enum",
         "description": "'nowrap'<br>&#124;&nbsp;'wrap-reverse'<br>&#124;&nbsp;'wrap'"
-      }
+      },
+      "default": "'wrap'"
     }
   },
   "name": "Grid",

diff --git a/docs/pages/system/api/stack.json b/docs/pages/system/api/stack.json
@@ -6,14 +6,16 @@
       "type": {
         "name": "union",
         "description": "'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'<br>&#124;&nbsp;Array&lt;'column-reverse'<br>&#124;&nbsp;'column'<br>&#124;&nbsp;'row-reverse'<br>&#124;&nbsp;'row'&gt;<br>&#124;&nbsp;object"
-      }
+      },
+      "default": "'column'"
     },
     "divider": { "type": { "name": "node" } },
     "spacing": {
       "type": {
         "name": "union",
         "description": "Array&lt;number<br>&#124;&nbsp;string&gt;<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;string"
-      }
+      },
+      "default": "0"
     },
     "sx": {
       "type": {
@@ -22,7 +24,7 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "useFlexGap": { "type": { "name": "bool" } }
+    "useFlexGap": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "Stack",
   "imports": ["import Stack from '@mui/system/Stack';", "import { Stack } from '@mui/system';"],

diff --git a/docs/src/modules/components/JoyThemeBuilder.tsx b/docs/src/modules/components/JoyThemeBuilder.tsx
@@ -1268,7 +1268,15 @@ function getAvailableTokens(colorSchemes: any, colorMode: 'light' | 'dark') {
   return tokens;
 }
 
-function TemplatesDialog({ children, data }: { children: React.ReactElement<any>; data: any }) {
+function TemplatesDialog({
+  children,
+  data,
+}: {
+  children: React.ReactElement<{
+    onClick?: React.MouseEventHandler;
+  }>;
+  data: any;
+}) {
   const [open, setOpen] = React.useState(false);
   const { map: templateMap } = sourceJoyTemplates();
   const renderItem = (name: string, item: TemplateData) => {
@@ -1339,9 +1347,9 @@ function TemplatesDialog({ children, data }: { children: React.ReactElement<any>
   return (
     <React.Fragment>
       {React.cloneElement(children, {
-        onClick: () => {
+        onClick: (event: React.MouseEvent) => {
           setOpen(true);
-          children.props.onClick?.();
+          children.props.onClick?.(event);
         },
       })}
       <Modal open={open} onClose={() => setOpen(false)}>

diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -697,58 +697,59 @@ export default async function generateComponentApi(
   const filename = componentInfo.filename;
   let reactApi: ComponentReactApi;
 
-  if (componentInfo.isSystemComponent || componentInfo.name === 'Grid2') {
-    try {
+  try {
+    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+      filename,
+    });
+  } catch (error) {
+    // fallback to default logic if there is no `create*` definition.
+    if ((error as Error).message === 'No suitable component definition found.') {
       reactApi = docgenParse(
         src,
         (ast) => {
           let node;
+          // TODO migrate to react-docgen v6, using Babel AST now
           astTypes.visit(ast, {
+            visitFunctionDeclaration: (functionPath) => {
+              // @ts-ignore
+              if (functionPath.node.params[0].name === 'props') {
+                node = functionPath;
+              }
+              return false;
+            },
             visitVariableDeclaration: (variablePath) => {
               const definitions: any[] = [];
               if (variablePath.node.declarations) {
                 variablePath
                   .get('declarations')
                   .each((declarator: any) => definitions.push(declarator.get('init')));
               }
-
               definitions.forEach((definition) => {
                 // definition.value.expression is defined when the source is in TypeScript.
                 const expression = definition.value?.expression
                   ? definition.get('expression')
                   : definition;
                 if (expression.value?.callee) {
                   const definitionName = expression.value.callee.name;
-
                   if (definitionName === `create${componentInfo.name}`) {
                     node = expression;
                   }
                 }
               });
-
               return false;
             },
           });
 
           return node;
         },
-        defaultHandlers,
-        { filename },
-      );
-    } catch (error) {
-      // fallback to default logic if there is no `create*` definition.
-      if ((error as Error).message === 'No suitable component definition found.') {
-        reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
+        defaultHandlers.concat(muiDefaultPropsHandler),
+        {
           filename,
-        });
-      } else {
-        throw error;
-      }
+        },
+      );
+    } else {
+      throw error;
     }
-  } else {
-    reactApi = docgenParse(src, null, defaultHandlers.concat(muiDefaultPropsHandler), {
-      filename,
-    });
   }
 
   if (!reactApi.props) {

diff --git a/packages/api-docs-builder/utils/defaultPropsHandler.ts b/packages/api-docs-builder/utils/defaultPropsHandler.ts
@@ -131,6 +131,11 @@ function getExplicitPropsDeclaration(
 ): NodePath | undefined {
   const functionNode = getRenderBody(componentDefinition, importer);
 
+  // No function body available to inspect.
+  if (!functionNode.value) {
+    return undefined;
+  }
+
   let propsPath: NodePath | undefined;
   // visitVariableDeclarator, can't use visit body.node since it looses scope information
   functionNode

diff --git a/packages/api-docs-builder/utils/getPropsFromComponentNode.ts b/packages/api-docs-builder/utils/getPropsFromComponentNode.ts
@@ -51,6 +51,7 @@ function isStyledFunction(node: ts.VariableDeclaration): boolean {
   );
 }
 
+// TODO update to reflect https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
 function getJSXLikeReturnValueFromFunction(type: ts.Type, project: TypeScriptProject) {
   return type
     .getCallSignatures()

diff --git a/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx b/packages/mui-base/src/ClickAwayListener/ClickAwayListener.tsx
@@ -209,7 +209,7 @@ function ClickAwayListener(props: ClickAwayListenerProps): React.JSX.Element {
     return undefined;
   }, [handleClickAway, mouseEvent]);
 
-  return <React.Fragment>{React.cloneElement(children, childrenProps)}</React.Fragment>;
+  return React.cloneElement(children, childrenProps);
 }
 
 ClickAwayListener.propTypes /* remove-proptypes */ = {

diff --git a/packages/mui-base/src/NoSsr/NoSsr.tsx b/packages/mui-base/src/NoSsr/NoSsr.tsx
@@ -38,8 +38,8 @@ function NoSsr(props: NoSsrProps): React.JSX.Element {
     }
   }, [defer]);
 
-  // We need the Fragment here to force react-docgen to recognise NoSsr as a component.
-  return <React.Fragment>{mountedState ? children : fallback}</React.Fragment>;
+  // TODO casting won't be needed at one point https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65135
+  return (mountedState ? children : fallback) as React.JSX.Element;
 }
 
 NoSsr.propTypes /* remove-proptypes */ = {