Merge branch 'next' into feat/typography-system-props

docs/pages/api-docs/accordion-actions.json

@@ -2,7 +2,8 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "disableSpacing": { "type": { "name": "bool" } }
+    "disableSpacing": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AccordionActions",
   "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiAccordionActions" },
@@ -11,6 +12,6 @@
   "filename": "/packages/material-ui/src/AccordionActions/AccordionActions.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/accordion-details.json

@@ -1,7 +1,8 @@
 {
   "props": {
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } }
+    "classes": { "type": { "name": "object" } },
+    "sx": { "type": { "name": "object" } }
   },
   "name": "AccordionDetails",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiAccordionDetails" },
@@ -10,6 +11,6 @@
   "filename": "/packages/material-ui/src/AccordionDetails/AccordionDetails.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/accordion.json

@@ -7,6 +7,7 @@
     "expanded": { "type": { "name": "bool" } },
     "onChange": { "type": { "name": "func" } },
     "square": { "type": { "name": "bool" } },
+    "sx": { "type": { "name": "object" } },
     "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
     "TransitionProps": { "type": { "name": "object" } }
   },
@@ -21,6 +22,6 @@
   "filename": "/packages/material-ui/src/Accordion/Accordion.js",
   "inheritance": { "component": "Paper", "pathname": "/api/paper/" },
   "demos": "<ul><li><a href=\"/components/accordion/\">Accordion</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/autocomplete.json

@@ -1,5 +1,7 @@
 {
   "props": {
+    "options": { "type": { "name": "array" }, "required": true },
+    "renderInput": { "type": { "name": "func" }, "required": true },
     "autoComplete": { "type": { "name": "bool" } },
     "autoHighlight": { "type": { "name": "bool" } },
     "autoSelect": { "type": { "name": "bool" } },
@@ -59,12 +61,10 @@
     "open": { "type": { "name": "bool" } },
     "openOnFocus": { "type": { "name": "bool" } },
     "openText": { "type": { "name": "string" }, "default": "'Open'" },
-    "options": { "type": { "name": "array" }, "required": true },
     "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
     "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
     "popupIcon": { "type": { "name": "node" }, "default": "<ArrowDropDownIcon />" },
     "renderGroup": { "type": { "name": "func" } },
-    "renderInput": { "type": { "name": "func" }, "required": true },
     "renderOption": { "type": { "name": "func" } },
     "renderTags": { "type": { "name": "func" } },
     "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" },

docs/pages/api-docs/backdrop.json

@@ -1,9 +1,10 @@
 {
   "props": {
+    "open": { "type": { "name": "bool" }, "required": true },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "invisible": { "type": { "name": "bool" } },
-    "open": { "type": { "name": "bool" }, "required": true },
+    "sx": { "type": { "name": "object" } },
     "transitionDuration": {
       "type": {
         "name": "union",
@@ -18,6 +19,6 @@
   "filename": "/packages/material-ui/src/Backdrop/Backdrop.js",
   "inheritance": { "component": "Fade", "pathname": "/api/fade/" },
   "demos": "<ul><li><a href=\"/components/backdrop/\">Backdrop</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/badge.json

@@ -17,6 +17,7 @@
       },
       "default": "'default'"
     },
+    "component": { "type": { "name": "elementType" } },
     "components": {
       "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },
       "default": "{}"
@@ -36,8 +37,7 @@
         "description": "'dot'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string"
       },
       "default": "'standard'"
-    },
-    "component": { "type": { "name": "elementType" } }
+    }
   },
   "name": "Badge",
   "styles": {

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

@@ -1,6 +1,7 @@
 {
   "props": {
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
+    "onClickAway": { "type": { "name": "func" }, "required": true },
     "disableReactTree": { "type": { "name": "bool" } },
     "mouseEvent": {
       "type": {
@@ -9,7 +10,6 @@
       },
       "default": "'onClick'"
     },
-    "onClickAway": { "type": { "name": "func" }, "required": true },
     "touchEvent": {
       "type": {
         "name": "enum",

docs/pages/api-docs/dialog.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "open": { "type": { "name": "bool" }, "required": true },
     "aria-describedby": { "type": { "name": "string" } },
     "aria-labelledby": { "type": { "name": "string" } },
     "children": { "type": { "name": "node" } },
@@ -16,7 +17,6 @@
     },
     "onBackdropClick": { "type": { "name": "func" } },
     "onClose": { "type": { "name": "func" } },
-    "open": { "type": { "name": "bool" }, "required": true },
     "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
     "PaperProps": { "type": { "name": "object" }, "default": "{}" },
     "scroll": {

docs/pages/api-docs/form-control-label.json

@@ -1,8 +1,8 @@
 {
   "props": {
+    "control": { "type": { "name": "element" }, "required": true },
     "checked": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
-    "control": { "type": { "name": "element" }, "required": true },
     "disabled": { "type": { "name": "bool" } },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "label": { "type": { "name": "node" } },

docs/pages/api-docs/link.json

@@ -4,6 +4,7 @@
     "classes": { "type": { "name": "object" } },
     "color": { "type": { "name": "any" }, "default": "'primary'" },
     "component": { "type": { "name": "custom", "description": "element type" } },
+    "sx": { "type": { "name": "object" } },
     "TypographyClasses": { "type": { "name": "object" } },
     "underline": {
       "type": {
@@ -38,6 +39,6 @@
   "filename": "/packages/material-ui/src/Link/Link.js",
   "inheritance": { "component": "Typography", "pathname": "/api/typography/" },
   "demos": "<ul><li><a href=\"/components/breadcrumbs/\">Breadcrumbs</a></li>\n<li><a href=\"/components/links/\">Links</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/pages/api-docs/menu.json

@@ -1,13 +1,13 @@
 {
   "props": {
+    "open": { "type": { "name": "bool" }, "required": true },
     "anchorEl": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "autoFocus": { "type": { "name": "bool" }, "default": "true" },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "disableAutoFocusItem": { "type": { "name": "bool" } },
     "MenuListProps": { "type": { "name": "object" }, "default": "{}" },
     "onClose": { "type": { "name": "func" } },
-    "open": { "type": { "name": "bool" }, "required": true },
     "PopoverClasses": { "type": { "name": "object" } },
     "transitionDuration": {
       "type": {

docs/pages/api-docs/mobile-stepper.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "steps": { "type": { "name": "number" }, "required": true },
     "activeStep": { "type": { "name": "number" }, "default": "0" },
     "backButton": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
@@ -12,7 +13,6 @@
       },
       "default": "'bottom'"
     },
-    "steps": { "type": { "name": "number" }, "required": true },
     "variant": {
       "type": {
         "name": "enum",

docs/pages/api-docs/modal.json

@@ -1,8 +1,9 @@
 {
   "props": {
+    "children": { "type": { "name": "custom", "description": "element" }, "required": true },
+    "open": { "type": { "name": "bool" }, "required": true },
     "BackdropComponent": { "type": { "name": "elementType" }, "default": "SimpleBackdrop" },
     "BackdropProps": { "type": { "name": "object" } },
-    "children": { "type": { "name": "custom", "description": "element" }, "required": true },
     "closeAfterTransition": { "type": { "name": "bool" } },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "disableAutoFocus": { "type": { "name": "bool" } },
@@ -14,8 +15,7 @@
     "hideBackdrop": { "type": { "name": "bool" } },
     "keepMounted": { "type": { "name": "bool" } },
     "onBackdropClick": { "type": { "name": "func" } },
-    "onClose": { "type": { "name": "func" } },
-    "open": { "type": { "name": "bool" }, "required": true }
+    "onClose": { "type": { "name": "func" } }
   },
   "name": "Modal",
   "styles": { "classes": [], "globalClasses": {}, "name": null },

docs/pages/api-docs/popover.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "open": { "type": { "name": "bool" }, "required": true },
     "action": { "type": { "name": "custom", "description": "ref" } },
     "anchorEl": { "type": { "name": "custom", "description": "HTML element<br>&#124;&nbsp;func" } },
     "anchorOrigin": {
@@ -26,7 +27,6 @@
     "getContentAnchorEl": { "type": { "name": "func" } },
     "marginThreshold": { "type": { "name": "number" }, "default": "16" },
     "onClose": { "type": { "name": "func" } },
-    "open": { "type": { "name": "bool" }, "required": true },
     "PaperProps": {
       "type": { "name": "shape", "description": "{ component?: element type }" },
       "default": "{}"

docs/pages/api-docs/popper.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "open": { "type": { "name": "bool" }, "required": true },
     "anchorEl": {
       "type": {
         "name": "custom",
@@ -16,7 +17,6 @@
         "description": "Array&lt;{ data?: object, effect?: func, enabled?: bool, fn?: func, name: any, options?: object, phase?: 'afterMain'<br>&#124;&nbsp;'afterRead'<br>&#124;&nbsp;'afterWrite'<br>&#124;&nbsp;'beforeMain'<br>&#124;&nbsp;'beforeRead'<br>&#124;&nbsp;'beforeWrite'<br>&#124;&nbsp;'main'<br>&#124;&nbsp;'read'<br>&#124;&nbsp;'write', requires?: Array&lt;string&gt;, requiresIfExists?: Array&lt;string&gt; }&gt;"
       }
     },
-    "open": { "type": { "name": "bool" }, "required": true },
     "placement": {
       "type": {
         "name": "enum",

docs/pages/api-docs/slider.json

@@ -8,6 +8,7 @@
       "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" },
       "default": "'primary'"
     },
+    "component": { "type": { "name": "elementType" } },
     "components": {
       "type": {
         "name": "shape",
@@ -59,8 +60,7 @@
     "valueLabelFormat": {
       "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" },
       "default": "(x) => x"
-    },
-    "component": { "type": { "name": "elementType" } }
+    }
   },
   "name": "Slider",
   "styles": {

docs/pages/api-docs/swipeable-drawer.json

@@ -1,5 +1,8 @@
 {
   "props": {
+    "onClose": { "type": { "name": "func" }, "required": true },
+    "onOpen": { "type": { "name": "func" }, "required": true },
+    "open": { "type": { "name": "bool" }, "required": true },
     "children": { "type": { "name": "node" } },
     "disableBackdropTransition": { "type": { "name": "bool" } },
     "disableDiscovery": { "type": { "name": "bool" } },
@@ -9,9 +12,6 @@
     },
     "hysteresis": { "type": { "name": "number" }, "default": "0.52" },
     "minFlingVelocity": { "type": { "name": "number" }, "default": "450" },
-    "onClose": { "type": { "name": "func" }, "required": true },
-    "onOpen": { "type": { "name": "func" }, "required": true },
-    "open": { "type": { "name": "bool" }, "required": true },
     "SwipeAreaProps": { "type": { "name": "object" } },
     "swipeAreaWidth": { "type": { "name": "number" }, "default": "20" },
     "transitionDuration": {

docs/pages/api-docs/tab-context.json

@@ -1,7 +1,7 @@
 {
   "props": {
-    "children": { "type": { "name": "node" } },
-    "value": { "type": { "name": "string" }, "required": true }
+    "value": { "type": { "name": "string" }, "required": true },
+    "children": { "type": { "name": "node" } }
   },
   "name": "TabContext",
   "styles": { "classes": [], "globalClasses": {}, "name": null },

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

@@ -1,8 +1,8 @@
 {
   "props": {
+    "value": { "type": { "name": "string" }, "required": true },
     "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } },
-    "value": { "type": { "name": "string" }, "required": true }
+    "classes": { "type": { "name": "object" } }
   },
   "name": "TabPanel",
   "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTabPanel" },

docs/pages/api-docs/tab-scroll-button.json

@@ -1,16 +1,16 @@
 {
   "props": {
-    "children": { "type": { "name": "node" } },
-    "classes": { "type": { "name": "object" } },
     "direction": {
       "type": { "name": "enum", "description": "'left'<br>&#124;&nbsp;'right'" },
       "required": true
     },
-    "disabled": { "type": { "name": "bool" } },
     "orientation": {
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "required": true
-    }
+    },
+    "children": { "type": { "name": "node" } },
+    "classes": { "type": { "name": "object" } },
+    "disabled": { "type": { "name": "bool" } }
   },
   "name": "TabScrollButton",
   "styles": {

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

@@ -1,10 +1,13 @@
 {
   "props": {
+    "count": { "type": { "name": "number" }, "required": true },
+    "onPageChange": { "type": { "name": "func" }, "required": true },
+    "page": { "type": { "name": "custom", "description": "number" }, "required": true },
+    "rowsPerPage": { "type": { "name": "number" }, "required": true },
     "ActionsComponent": { "type": { "name": "elementType" }, "default": "TablePaginationActions" },
     "backIconButtonProps": { "type": { "name": "object" } },
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
-    "count": { "type": { "name": "number" }, "required": true },
     "getItemAriaLabel": {
       "type": { "name": "func" },
       "default": "function defaultGetAriaLabel(type) {\n  return `Go to ${type} page`;\n}"
@@ -15,10 +18,7 @@
     },
     "labelRowsPerPage": { "type": { "name": "node" }, "default": "'Rows per page:'" },
     "nextIconButtonProps": { "type": { "name": "object" } },
-    "onPageChange": { "type": { "name": "func" }, "required": true },
     "onRowsPerPageChange": { "type": { "name": "func" } },
-    "page": { "type": { "name": "custom", "description": "number" }, "required": true },
-    "rowsPerPage": { "type": { "name": "number" }, "required": true },
     "rowsPerPageOptions": {
       "type": {
         "name": "arrayOf",

docs/pages/api-docs/toggle-button.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "value": { "type": { "name": "any" }, "required": true },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
     "disabled": { "type": { "name": "bool" } },
@@ -12,8 +13,7 @@
         "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
       },
       "default": "'medium'"
-    },
-    "value": { "type": { "name": "any" }, "required": true }
+    }
   },
   "name": "ToggleButton",
   "styles": {

docs/pages/api-docs/tooltip.json

@@ -1,7 +1,8 @@
 {
   "props": {
-    "arrow": { "type": { "name": "bool" } },
     "children": { "type": { "name": "custom", "description": "element" }, "required": true },
+    "title": { "type": { "name": "node" }, "required": true },
+    "arrow": { "type": { "name": "bool" } },
     "classes": { "type": { "name": "object" } },
     "describeChild": { "type": { "name": "bool" } },
     "disableFocusListener": { "type": { "name": "bool" } },
@@ -27,7 +28,6 @@
     },
     "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
     "PopperProps": { "type": { "name": "object" }, "default": "{}" },
-    "title": { "type": { "name": "node" }, "required": true },
     "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
     "TransitionProps": { "type": { "name": "object" } }
   },