@mui/docs 9.0.0-alpha.4 → 9.0.0-beta.0

package/ApiPage/table/PropertiesTable.js

@@ -0,0 +1,286 @@
+var _th, _th2, _th3, _th4, _a, _a2;
+/* eslint-disable react/no-danger */
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslate } from "../../i18n/index.js";
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { StyledTableContainer } from "./StyledTableContainer.js";
+import { ApiWarningAlert } from "../ApiWarningAlert.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTable = styled('table')(({
+  theme
+}) => ({
+  // Override docs/src/modules/components/MarkdownElement styles
+  '&&': {
+    display: 'table',
+    width: '100%'
+  },
+  '& .type-column': {
+    minWidth: '20%'
+  },
+  '& .default-column': {
+    minWidth: '20%'
+  },
+  '& .MuiApi-table-item-title': {
+    minWidth: '20%',
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
+  },
+  '& .MuiApi-table-item-type': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  },
+  '& .MuiApi-table-item-signature-type': {
+    textDecoration: 'underline',
+    textDecorationStyle: 'dotted',
+    textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4),
+    fontWeight: theme.typography.fontWeightMedium,
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
+    '&:hover': {
+      textDecorationColor: 'inherit'
+    },
+    cursor: 'help'
+  },
+  '& .MuiApi-table-item-default': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
+  },
+  '& .MuiPropTable-description-column': {
+    width: '40%',
+    paddingRight: 8,
+    '& .prop-table-description': {
+      marginBottom: 0
+    },
+    '& .prop-table-additional-description': {
+      marginTop: 12,
+      marginBottom: 0
+    },
+    '& .prop-table-alert': {
+      '& .MuiAlert-icon': {
+        margin: 0
+      }
+    }
+  },
+  '& .prop-table-signature': {
+    marginTop: 12,
+    marginBottom: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    '& .prop-table-title': {
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .MuiApi-table-item-title': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+    },
+    '& .MuiApi-table-item-type': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.3)
+    },
+    '& .MuiApi-table-item-signature-type': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`,
+      textDecorationColor: alpha(darkTheme.palette.primary.main, 0.6)
+    },
+    '& .MuiApi-table-item-default': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
+    },
+    '& .prop-table-signature': {
+      '& .prop-table-title': {
+        color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`
+      }
+    }
+  }
+}));
+function PropDescription({
+  description
+}) {
+  const isUlPresent = description.includes('<ul>');
+  const ComponentToRender = isUlPresent ? 'div' : 'p';
+  return /*#__PURE__*/_jsx(ComponentToRender, {
+    className: "prop-table-description" // This className is used by Algolia
+    ,
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  });
+}
+export default function PropertiesTable(props) {
+  const {
+    properties
+  } = props;
+  const hasDefaultColumn = properties.some(item => item.propDefault !== undefined);
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledTableContainer, {
+    children: /*#__PURE__*/_jsxs(StyledTable, {
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsxs("tr", {
+          children: [_th || (_th = /*#__PURE__*/_jsx("th", {
+            children: 'Name'
+          })), _th2 || (_th2 = /*#__PURE__*/_jsx("th", {
+            children: 'Type'
+          })), hasDefaultColumn && (_th3 || (_th3 = /*#__PURE__*/_jsx("th", {
+            children: 'Default'
+          }))), _th4 || (_th4 = /*#__PURE__*/_jsx("th", {
+            children: 'Description'
+          }))]
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: properties.map(params => {
+          const {
+            propName,
+            description,
+            seeMoreDescription,
+            requiresRef,
+            isOptional,
+            isRequired,
+            isProPlan,
+            isPremiumPlan,
+            isDeprecated,
+            deprecationInfo,
+            typeName,
+            propDefault,
+            additionalInfo,
+            signature,
+            signatureArgs,
+            signatureReturnDescription,
+            hash
+          } = params;
+          return /*#__PURE__*/_jsxs("tr", {
+            id: hash,
+            children: [/*#__PURE__*/_jsxs("td", {
+              className: "MuiApi-table-item-title algolia-lvl3",
+              children: [propName, isRequired ? '*' : '', isOptional ? '?' : '', isProPlan && (_a || (_a = /*#__PURE__*/_jsx("a", {
+                href: "/x/introduction/licensing/#pro-plan",
+                "aria-label": "Pro plan",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: "plan-pro"
+                })
+              }))), isPremiumPlan && (_a2 || (_a2 = /*#__PURE__*/_jsx("a", {
+                href: "/x/introduction/licensing/#premium-plan",
+                "aria-label": "Premium plan",
+                children: /*#__PURE__*/_jsx("span", {
+                  className: "plan-premium"
+                })
+              })))]
+            }), /*#__PURE__*/_jsx("td", {
+              className: "type-column",
+              children: /*#__PURE__*/_jsx("span", {
+                className: "MuiApi-table-item-type",
+                dangerouslySetInnerHTML: {
+                  __html: typeName
+                }
+              })
+            }), hasDefaultColumn && /*#__PURE__*/_jsx("td", {
+              className: "default-column",
+              children: propDefault ? /*#__PURE__*/_jsx("span", {
+                className: "MuiApi-table-item-default",
+                children: propDefault
+              }) : '-'
+            }), /*#__PURE__*/_jsxs("td", {
+              className: "MuiPropTable-description-column algolia-content",
+              children: [description && /*#__PURE__*/_jsx(PropDescription, {
+                description: description
+              }), seeMoreDescription && /*#__PURE__*/_jsx("p", {
+                dangerouslySetInnerHTML: {
+                  __html: seeMoreDescription
+                },
+                className: "prop-table-additional-description"
+              }), additionalInfo?.map(key => /*#__PURE__*/_jsx("p", {
+                className: "prop-table-additional-description",
+                dangerouslySetInnerHTML: {
+                  __html: t(`api-docs.additional-info.${key}`)
+                }
+              }, key)), requiresRef && /*#__PURE__*/_jsx(ApiWarningAlert, {
+                className: "prop-table-alert",
+                children: /*#__PURE__*/_jsx("span", {
+                  dangerouslySetInnerHTML: {
+                    __html: t('api-docs.requires-ref')
+                  }
+                })
+              }), isDeprecated && /*#__PURE__*/_jsxs(ApiWarningAlert, {
+                children: [/*#__PURE__*/_jsx("b", {
+                  children: t('api-docs.deprecated')
+                }), deprecationInfo && /*#__PURE__*/_jsxs(React.Fragment, {
+                  children: ['－', /*#__PURE__*/_jsx("span", {
+                    dangerouslySetInnerHTML: {
+                      __html: deprecationInfo
+                    }
+                  })]
+                })]
+              }), signature && /*#__PURE__*/_jsxs("div", {
+                className: "prop-table-signature",
+                children: [/*#__PURE__*/_jsxs("span", {
+                  className: "prop-table-title",
+                  children: [t('api-docs.signature'), ":"]
+                }), /*#__PURE__*/_jsx("code", {
+                  children: signature
+                }), signatureArgs && /*#__PURE__*/_jsx("div", {
+                  children: /*#__PURE__*/_jsx("ul", {
+                    children: signatureArgs.map(({
+                      argName,
+                      argDescription,
+                      argType,
+                      argTypeDescription
+                    }) => /*#__PURE__*/_jsxs("li", {
+                      className: "prop-signature-list",
+                      children: [/*#__PURE__*/_jsxs("code", {
+                        children: [argName, argType && argTypeDescription && /*#__PURE__*/_jsx(Tooltip, {
+                          title: /*#__PURE__*/_jsx("span", {
+                            dangerouslySetInnerHTML: {
+                              __html: argTypeDescription
+                            }
+                          }),
+                          children: /*#__PURE__*/_jsxs("span", {
+                            children: [":", ' ', /*#__PURE__*/_jsx("span", {
+                              className: "MuiApi-table-item-signature-type",
+                              children: argType
+                            })]
+                          })
+                        })]
+                      }), ' ', argDescription && /*#__PURE__*/_jsx("span", {
+                        dangerouslySetInnerHTML: {
+                          __html: argDescription
+                        }
+                      })]
+                    }, argName))
+                  })
+                }), signatureReturnDescription && /*#__PURE__*/_jsxs("p", {
+                  children: [t('api-docs.returns'), /*#__PURE__*/_jsx("span", {
+                    dangerouslySetInnerHTML: {
+                      __html: signatureReturnDescription
+                    }
+                  })]
+                })]
+              })]
+            })]
+          }, propName);
+        })
+      })]
+    })
+  });
+}

package/ApiPage/table/SlotsTable.d.ts

@@ -0,0 +1,6 @@
+import { SlotDefinition } from "../definitions/types.js";
+interface SlotsTableProps {
+  slots: SlotDefinition[];
+}
+export default function SlotsTable(props: SlotsTableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/ApiPage/table/SlotsTable.js

@@ -0,0 +1,126 @@
+import { styled, alpha } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
+import { useTranslate } from "../../i18n/index.js";
+import { StyledTableContainer } from "./StyledTableContainer.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTable = styled('table')(({
+  theme
+}) => ({
+  // Override docs/src/modules/components/MarkdownElement styles
+  '&&': {
+    display: 'table',
+    width: '100%'
+  },
+  '& .slot-name': {
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(13),
+    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
+  },
+  '& .class-name': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
+    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
+  },
+  '& .item-default': {
+    ...theme.typography.caption,
+    fontFamily: theme.typography.fontFamilyCode,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    padding: '1px 4px',
+    borderRadius: 6,
+    border: '1px solid',
+    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
+    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
+  },
+  '& .description-column': {
+    width: '40%',
+    paddingRight: 8
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& .slot-name': {
+      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
+    },
+    '& .class-name': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
+      backgroundColor: alpha(darkTheme.palette.primary[900], 0.5)
+    },
+    '& .item-default': {
+      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
+      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
+      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
+    }
+  }
+}));
+export default function SlotsTable(props) {
+  const {
+    slots
+  } = props;
+  const t = useTranslate();
+  return /*#__PURE__*/_jsx(StyledTableContainer, {
+    children: /*#__PURE__*/_jsxs(StyledTable, {
+      children: [/*#__PURE__*/_jsx("thead", {
+        children: /*#__PURE__*/_jsxs("tr", {
+          children: [/*#__PURE__*/_jsx("th", {
+            children: t('api-docs.slotName')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.className')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.defaultComponent')
+          }), /*#__PURE__*/_jsx("th", {
+            children: t('api-docs.description')
+          })]
+        })
+      }), /*#__PURE__*/_jsx("tbody", {
+        children: slots.map(params => {
+          const {
+            description,
+            className,
+            name,
+            defaultValue,
+            hash
+          } = params;
+          return /*#__PURE__*/_jsxs("tr", {
+            id: hash,
+            children: [/*#__PURE__*/_jsx("td", {
+              className: "slot-name",
+              style: {
+                fontWeight: '600'
+              },
+              children: name
+            }), /*#__PURE__*/_jsx("td", {
+              className: "MuiApi-table-class-name",
+              children: className && /*#__PURE__*/_jsx("span", {
+                className: "class-name",
+                children: `.${className}`
+              })
+            }), /*#__PURE__*/_jsx("td", {
+              children: defaultValue && /*#__PURE__*/_jsx("code", {
+                className: "item-default",
+                children: defaultValue
+              })
+            }), /*#__PURE__*/_jsx("td", {
+              className: "description-column",
+              children: /*#__PURE__*/_jsx("span", {
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                  __html: description || ''
+                }
+              })
+            })]
+          }, `${className}-${hash}`);
+        })
+      })]
+    })
+  });
+}

package/ApiPage/table/StyledTableContainer.d.ts

@@ -0,0 +1 @@
+export declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/ApiPage/table/StyledTableContainer.js

@@ -0,0 +1,42 @@
+import { styled, alpha } from '@mui/material/styles';
+import { brandingDarkTheme as darkTheme } from "../../branding/index.js";
+export const StyledTableContainer = styled('div')(({
+  theme
+}) => ({
+  borderRadius: 12,
+  overflowX: 'auto',
+  '& table': {
+    marginLeft: -1,
+    marginRight: -1,
+    background: ['linear-gradient(to right, rgb(255, 255, 255) 5%, transparent 90%) local', 'linear-gradient(to right, transparent, rgb(255, 255, 255) 100%) 100% center local', `linear-gradient(to right, ${alpha(theme.palette.grey[500], 0.5)}, transparent 5%) scroll`, `linear-gradient(to left, ${alpha(theme.palette.grey[500], 0.2)}, transparent 5%) scroll`].join(', ')
+  },
+  '&& th': {
+    paddingTop: 8,
+    paddingBottom: 8,
+    textAlign: 'left',
+    fontWeight: theme.typography.fontWeightSemiBold,
+    fontSize: theme.typography.pxToRem(14)
+  },
+  '& tr': {
+    scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
+    '&:hover': {
+      backgroundColor: alpha(darkTheme.palette.grey[50], 0.5)
+    },
+    '& .MuiPropTable-description-column': {
+      minWidth: 300
+    }
+  }
+}), ({
+  theme
+}) => ({
+  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+    '& table': {
+      background: [`linear-gradient(to right, ${theme.palette.primaryDark[900]} 5%, transparent 80%) local`, `linear-gradient(to right, transparent, ${theme.palette.primaryDark[900]} 100%) 100% center local`, `linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent 10%) scroll`, 'linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 10%) scroll'].join(', ')
+    },
+    '& tr': {
+      '&:hover': {
+        backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5)
+      }
+    }
+  }
+}));

package/ApiPage/types.d.ts

@@ -0,0 +1,11 @@
+import type { TableOfContentsEntry } from '@mui/internal-markdown';
+export interface TableOfContentsParams {
+  children: (TableOfContentsParams | TableOfContentsEntry)[];
+  hash: string;
+  text: string;
+}
+export interface LayoutStorageKeys {
+  slots: string;
+  props: string;
+  classes: string;
+}

package/ApiPage/types.js

@@ -0,0 +1 @@
+export {};

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-beta.0
+
+<!-- generated comparing v9.0.0-alpha.4..master -->
+
+_Mar 25, 2026_
+
+A big thanks to the 8 contributors who made this release possible.
+
+### `@mui/material@9.0.0-beta.0`
+
+#### Breaking Changes
+
+- [linear-progress] Remove deprecated CSS classes (#48068) @mj12albert
+- [list-item, list-item-text] Remove deprecated props (#48042) @siriwatknp
+- [button-group] Remove deprecated classes (#48043) @siriwatknp
+- [card] Remove deprecated CardHeader props (#47995) @silviuaavram
+- [checkbox][radio][switch] Remove deprecated inputProps and inputRef (#48059) @siriwatknp
+- [chip] Remove deprecated classes (#48046) @silviuaavram
+- [dialog][modal][drawer][swipeabledrawer] Remove deprecated props and classes (#48039) @silviuaavram
+- [divider] Remove deprecated CSS classes (#48075) @siriwatknp
+- [drawer] Remove deprecated CSS classes (#48077) @siriwatknp
+- [image-list-item-bar] Remove deprecated CSS classes (#48064) @siriwatknp
+- [inputs] Remove deprecated props & classes (#48071) @mj12albert
+- [material-ui] Remove unnecessary overridesResolvers from styled components (#48082) @ZeeshanTamboli
+- [material-ui][system] Remove deprecated system props from Box, Stack, Typography (#48072) @siriwatknp
+- [pagination-item] Remove deprecated CSS classes (#48076) @siriwatknp
+- [pagination-item] Remove deprecated props (#48038) @siriwatknp
+- [rating] Remove deprecated IconContainerComponent (#48019) @siriwatknp
+- [select] Remove deprecated CSS classes (#48065) @mj12albert
+- [slider] Remove deprecated CSS classes (#48074) @siriwatknp
+- [step-connector][step-content][step-label] Remove deprecated props and classes (#48058) @siriwatknp
+- [tabs][tab] Remove deprecated CSS classes (#48078) @siriwatknp
+- [table-pagination][table-sort-label] Remove deprecated props and classes (#48060) @siriwatknp
+- [toggle-button-group] Remove deprecated classes (#48061) @siriwatknp
+
+#### Changes
+
+- [system] Improve performance when using sx prop (#44254) @romgrk
+
+### `@mui/codemod@9.0.0-beta.0`
+
+- [codemod] Add missing codemod links in upgrade guide (#48069) @silviuaavram
+
+### Docs
+
+- Mention all breaking changes in changelog (#48091) @silviuaavram
+- Fix link to upgrade-to-v9 docs in release CHANGELOG (#48081) @ZeeshanTamboli
+
+### Core
+
+- Update browserslistrc (#48085) @silviuaavram
+- [code-infra] Prevent major version updates of bundler/framework packages in bundling fixtures (#48062) @Copilot
+- [code-infra][icons-material] Avoid material utils barrel in createSvgIcon (#48029) @anchmelev
+- [docs-infra] Migrate more leaf components to mui-docs (#48018) @brijeshb42
+
+All contributors of this release in alphabetical order: @anchmelev, @brijeshb42, @Copilot, @mj12albert, @romgrk, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.4
 
 <!-- generated comparing v9.0.0-alpha.3..master -->
@@ -118,7 +175,7 @@ A big thanks to the 11 contributors who made this release possible.
 - [tablepagination] Format pagination numbers according to locale (#47803) @siriwatknp
 - [textfield] Use non-native label for `<TextField select/>` (#47958) @mj12albert
 
-Check out the [v9 upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v9/).
+Check out the [v9 upgrade guide](https://next.mui.com/material-ui/migration/upgrade-to-v9/).
 
 #### Changes
 
@@ -167,11 +224,16 @@ A big thanks to the 10 contributors who made this release possible. Here are som
 
 ### `@mui/material@9.0.0-alpha.3`
 
+#### Breaking Changes
+
+- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
+
+#### Changes
+
 - [autocomplete] Add `root` slot (#47852) @GerardasB
 - [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47790) @aman44444
 - [autocomplete] Support full slots for clearIndicator and popupIndicator (#47891) @silviuaavram
 - [material-ui] Partially revert "[material-ui] Clean up duplicated CSS rules (#47838)" (#47927) @sai6855
-- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
 
 ### Docs
 
@@ -229,16 +291,21 @@ A big thanks to the 13 contributors who made this release possible. Here are som
 
 ### @mui/material@9.0.0-alpha.1
 
+#### Breaking Changes
+
 - [Autocomplete] Prevents Autocomplete menu from opening on right click (#47797) @silviuaavram
 - [Backdrop] Remove aria-hidden by default (#47798) @silviuaavram
 - [ButtonBase] Ensure that onClick propagates when non-native button is clicked (#47800) @silviuaavram
 - [Dialog][Modal] Remove `disableEscapeKeyDown` prop (#47695) @silviuaavram
 - [Grid] Remove system props support (#47846) @siriwatknp
-- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
 - [theme] Remove MuiTouchRipple from theme component types (#47849) @siriwatknp
-- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
 - [useAutocomplete] Improve isOptionEqualToValue value argument type (#47801) @silviuaavram
 
+#### Changes
+
+- [TableCell][theme] Apply `alpha` before color mixing to border bottom color when nativeColor + cssVariables is used (#47762) @ZeeshanTamboli
+- [Tooltip] Fix error is thrown when wrapping an input which is disabled while focused (#47684) @ZeeshanTamboli
+
 ### Docs
 
 - [docs] Add updated community theme resource (#47847) @PeterTYLiu

package/DocsApp/AnalyticsProvider.js

@@ -131,17 +131,21 @@ export function CookieConsentDialog() {
                 children: [/*#__PURE__*/_jsx(Typography, {
                   variant: "subtitle2",
                   id: "cookie-consent-dialog-title",
-                  textAlign: {
-                    xs: 'center',
-                    sm: 'start'
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
                   },
                   children: "Cookie Preferences"
                 }), /*#__PURE__*/_jsx(Typography, {
                   id: "cookie-consent-dialog-description",
                   variant: "body2",
-                  textAlign: {
-                    xs: 'center',
-                    sm: 'start'
+                  sx: {
+                    textAlign: {
+                      xs: 'center',
+                      sm: 'start'
+                    }
                   },
                   children: "We use cookies to understand site usage and improve our content. This includes third-party analytics."
                 })]

package/DocsApp/consoleBanner.js

@@ -1,5 +1,4 @@
 import { getTheme } from "../branding/index.js";
-// eslint-disable-next-line import/prefer-default-export
 export function printConsoleBanner() {
   if (typeof window !== 'undefined' && process.env.NODE_ENV === 'production') {
     window.theme = getTheme('ltr');

package/DocsApp/createGetInitialProps.js

@@ -6,7 +6,7 @@ import { mapTranslations } from "../i18n/index.js";
  * @param options.translationsContext - A webpack require.context pointing at translation JSON files.
  *   e.g. `require.context('docs/translations', false, /\.\/translations.*\.json$/)`
  */
-// eslint-disable-next-line import/prefer-default-export
+
 export function createGetInitialProps(options) {
   async function getInitialPropsApp({
     ctx,

package/DocsApp/loadDependencies.js

@@ -1,7 +1,5 @@
 import { loadCSS } from 'fg-loadcss';
 let dependenciesLoaded = false;
-
-// eslint-disable-next-line import/prefer-default-export
 export function loadDependencies() {
   if (dependenciesLoaded) {
     return;

package/DocsApp/reportWebVitals.js

@@ -2,8 +2,6 @@
 // Filter sessions instead of individual events so that we can track multiple metrics per device.
 // See https://github.com/GoogleChromeLabs/web-vitals-report to use this data
 const disableWebVitalsReporting = Math.random() > 0.0001;
-
-// eslint-disable-next-line import/prefer-default-export
 export function reportWebVitals({
   id,
   name,

package/DocsApp/serviceWorker.js

@@ -49,8 +49,6 @@ function forcePageReload(registration) {
   // Add a listener in case a new SW is found,
   registration.addEventListener('updatefound', listenInstalledStateChange);
 }
-
-// eslint-disable-next-line import/prefer-default-export
 export async function registerServiceWorker(swPath) {
   if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production' && window.location.host.includes('mui.com')) {
     // register() automatically attempts to refresh the sw.js.