[docs] Implement the new API display design

docs/pages/base-ui/api/badge.json

@@ -14,7 +14,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ badge?: elementType, root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Badge",

docs/pages/base-ui/api/button.json

@@ -14,7 +14,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Button",

docs/pages/base-ui/api/focus-trap.json

@@ -5,7 +5,10 @@
     "disableAutoFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableEnforceFocus": { "type": { "name": "bool" }, "default": "false" },
     "disableRestoreFocus": { "type": { "name": "bool" }, "default": "false" },
-    "getTabbable": { "type": { "name": "func" } },
+    "getTabbable": {
+      "type": { "name": "func" },
+      "signature": { "type": "function(root: HTMLElement) => void", "describedArgs": [] }
+    },
     "isEnabled": {
       "type": { "name": "func" },
       "default": "function defaultIsEnabled(): boolean {\n  return true;\n}"

docs/pages/base-ui/api/form-control.json

@@ -11,7 +11,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "value": { "type": { "name": "any" } }
   },

docs/pages/base-ui/api/input.json

@@ -28,7 +28,8 @@
         "name": "shape",
         "description": "{ input?: elementType, root?: elementType, textarea?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "startAdornment": { "type": { "name": "node" } },
     "type": {

docs/pages/base-ui/api/menu-item.json

@@ -7,7 +7,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "MenuItem",

docs/pages/base-ui/api/menu.json

@@ -19,7 +19,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ listbox?: elementType, root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Menu",

docs/pages/base-ui/api/modal.json

@@ -17,7 +17,13 @@
       "deprecated": true,
       "deprecationInfo": "Use the <code>onClose</code> prop with the <code>reason</code> argument to handle the <code>backdropClick</code> events."
     },
-    "onClose": { "type": { "name": "func" } },
+    "onClose": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: object, reason: string) => void",
+        "describedArgs": ["event", "reason"]
+      }
+    },
     "onTransitionEnter": { "type": { "name": "func" } },
     "onTransitionExited": { "type": { "name": "func" } },
     "slotProps": {
@@ -29,7 +35,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ backdrop?: elementType, root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Modal",

docs/pages/base-ui/api/option-group.json

@@ -14,7 +14,8 @@
         "name": "shape",
         "description": "{ label?: elementType, list?: elementType, root?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "OptionGroup",

docs/pages/base-ui/api/option.json

@@ -9,7 +9,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Option",

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

@@ -42,7 +42,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "transition": { "type": { "name": "bool" }, "default": "false" }
   },

docs/pages/base-ui/api/select.json

@@ -26,7 +26,8 @@
         "name": "shape",
         "description": "{ listbox?: elementType, popper?: elementType, root?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "value": { "type": { "name": "any" } }
   },

docs/pages/base-ui/api/slider.json

@@ -8,8 +8,17 @@
     },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "disableSwap": { "type": { "name": "bool" }, "default": "false" },
-    "getAriaLabel": { "type": { "name": "func" } },
-    "getAriaValueText": { "type": { "name": "func" } },
+    "getAriaLabel": {
+      "type": { "name": "func" },
+      "signature": { "type": "function(index: number) => string", "describedArgs": ["index"] }
+    },
+    "getAriaValueText": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(value: number, index: number) => string",
+        "describedArgs": ["value", "index"]
+      }
+    },
     "isRtl": { "type": { "name": "bool" }, "default": "false" },
     "marks": {
       "type": {
@@ -21,13 +30,29 @@
     "max": { "type": { "name": "number" }, "default": "100" },
     "min": { "type": { "name": "number" }, "default": "0" },
     "name": { "type": { "name": "string" } },
-    "onChange": { "type": { "name": "func" } },
-    "onChangeCommitted": { "type": { "name": "func" } },
+    "onChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: Event, value: number | Array<number>, activeThumb: number) => void",
+        "describedArgs": ["event", "value", "activeThumb"]
+      }
+    },
+    "onChangeCommitted": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.SyntheticEvent | Event, value: number | Array<number>) => void",
+        "describedArgs": ["event", "value"]
+      }
+    },
     "orientation": {
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
-    "scale": { "type": { "name": "func" }, "default": "function Identity(x) {\n  return x;\n}" },
+    "scale": {
+      "type": { "name": "func" },
+      "default": "function Identity(x) {\n  return x;\n}",
+      "signature": { "type": "function(x: any) => any", "describedArgs": [] }
+    },
     "slotProps": {
       "type": {
         "name": "shape",
@@ -40,7 +65,8 @@
         "name": "shape",
         "description": "{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "step": { "type": { "name": "number" }, "default": "1" },
     "tabIndex": { "type": { "name": "number" } },

docs/pages/base-ui/api/snackbar.json

@@ -3,7 +3,13 @@
     "autoHideDuration": { "type": { "name": "number" }, "default": "null" },
     "disableWindowBlurListener": { "type": { "name": "bool" }, "default": "false" },
     "exited": { "type": { "name": "bool" }, "default": "true" },
-    "onClose": { "type": { "name": "func" } },
+    "onClose": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.SyntheticEvent<any> | Event, reason: string) => void",
+        "describedArgs": ["event", "reason"]
+      }
+    },
     "open": { "type": { "name": "bool" } },
     "resumeHideDuration": { "type": { "name": "number" } },
     "slotProps": {
@@ -15,7 +21,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Snackbar",

docs/pages/base-ui/api/switch.json

@@ -3,7 +3,13 @@
     "checked": { "type": { "name": "bool" } },
     "defaultChecked": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
-    "onChange": { "type": { "name": "func" } },
+    "onChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.ChangeEvent<HTMLInputElement>) => void",
+        "describedArgs": ["event"]
+      }
+    },
     "readOnly": { "type": { "name": "bool" } },
     "required": { "type": { "name": "bool" } },
     "slotProps": {
@@ -18,7 +24,8 @@
         "name": "shape",
         "description": "{ input?: elementType, root?: elementType, thumb?: elementType, track?: elementType<br>&#124;&nbsp;null }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "Switch",

docs/pages/base-ui/api/tab-panel.json

@@ -7,7 +7,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },

docs/pages/base-ui/api/tab.json

@@ -14,7 +14,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },

docs/pages/base-ui/api/table-pagination.json

@@ -1,20 +1,34 @@
 {
   "props": {
     "count": { "type": { "name": "number" }, "required": true },
-    "onPageChange": { "type": { "name": "func" }, "required": true },
+    "onPageChange": {
+      "type": { "name": "func" },
+      "required": true,
+      "signature": {
+        "type": "function(event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void",
+        "describedArgs": ["event", "page"]
+      }
+    },
     "page": { "type": { "name": "custom", "description": "integer" }, "required": true },
     "rowsPerPage": { "type": { "name": "custom", "description": "integer" }, "required": true },
     "getItemAriaLabel": {
       "type": { "name": "func" },
-      "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n  return `Go to ${type} page`;\n}"
+      "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n  return `Go to ${type} page`;\n}",
+      "signature": { "type": "function(type: string) => string", "describedArgs": ["type"] }
     },
     "labelDisplayedRows": {
       "type": { "name": "func" },
       "default": "function defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) {\n  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;\n}"
     },
     "labelId": { "type": { "name": "string" } },
     "labelRowsPerPage": { "type": { "name": "node" }, "default": "'Rows per page:'" },
-    "onRowsPerPageChange": { "type": { "name": "func" } },
+    "onRowsPerPageChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void",
+        "describedArgs": ["event"]
+      }
+    },
     "rowsPerPageOptions": {
       "type": {
         "name": "arrayOf",
@@ -35,7 +49,8 @@
         "name": "shape",
         "description": "{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "TablePagination",

docs/pages/base-ui/api/tabs-list.json

@@ -7,7 +7,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     }
   },
   "name": "TabsList",

docs/pages/base-ui/api/tabs.json

@@ -18,7 +18,8 @@
     },
     "slots": {
       "type": { "name": "shape", "description": "{ root?: elementType }" },
-      "default": "{}"
+      "default": "{}",
+      "additionalPropsInfo": { "slotsApi": true }
     },
     "value": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },

docs/pages/base-ui/react-all-components/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
+import * as pageProps from 'docs/data/base/components/all-components/all-components.md?@mui/markdown';
+
+export default function Page(props) {
+  const { userLanguage, ...other } = props;
+  return <MarkdownDocs {...pageProps} {...other} />;
+}
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};