@mui/docs 7.0.0-rc.0 → 7.0.0

package/Ad/ad.styles.js

@@ -10,8 +10,8 @@ const adBodyImageStyles = theme => ({
     display: 'block',
     overflow: 'hidden',
     border: '1px dashed',
-    borderColor: theme.palette.divider,
-    borderRadius: theme.shape.borderRadius,
+    borderColor: (theme.vars || theme).palette.divider,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 8,
     paddingLeft: 8 + 130,
     [theme.breakpoints.up('sm')]: {
@@ -29,7 +29,7 @@ const adBodyImageStyles = theme => ({
     verticalAlign: 'middle'
   },
   a: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     textDecoration: 'none'
   },
   description: {
@@ -43,7 +43,7 @@ const adBodyImageStyles = theme => ({
   poweredby: {
     ...theme.typography.caption,
     marginLeft: theme.spacing(1.5),
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     display: 'block',
     marginTop: theme.spacing(0.5),
     fontWeight: theme.typography.fontWeightRegular
@@ -78,11 +78,11 @@ const adBodyInlineStyles = theme => {
         marginLeft: 4,
         content: '"Get started"',
         // Style taken from the Link component & MarkdownElement.
-        color: theme.palette.primary[600],
+        color: (theme.vars || theme).palette.primary[600],
         textDecoration: 'underline',
         textDecorationColor: (0, _styles.alpha)(theme.palette.primary.main, 0.4),
         ...theme.applyStyles('dark', {
-          color: theme.palette.primary[300]
+          color: (theme.vars || theme).palette.primary[300]
         })
       }
     },

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0
+
+<!-- generated comparing v7.0.0-rc.0..master -->
+
+_Mar 26, 2025_
+
+🎉 We're happy to announce the stable release of v7.
+
+- Read the [blog post](https://mui.com/blog/material-ui-v7-is-here/) about the announcement.
+- Check out the [v7 upgrade guide](https://mui.com/material-ui/migration/upgrade-to-v7/).
+
+### `@mui/material@7.0.0`
+
+- [Autocomplete] Fix when `onHighlightChange` is called (#45438) @ZeeshanTamboli
+- [Tabs] Fix modifier keys + Left/Right Arrow key from being consumed by tab navigation (#45345) @mushfiqbh
+- Update minimum TypeScript support to 4.9 (#45535) @siriwatknp
+
+### `@mui/system@7.0.0`
+
+- [system] Fix palette mode does not change when not using CSS vars (#45660) @siriwatknp
+
+### `@mui/lab@7.0.0-beta.9`
+
+- [lab] Remove @mui/base dependency (#45602) @mnajdova
+
+### Docs
+
+- [docs] Fix unnecessary redirects for v7 (#45677) @Janpot
+- [docs] Fix new React project link, CRA deprecated (#45362) @oliviertassinari
+- [docs] Prepare the v7 upgrade guide for stable release (#45624) @DiegoAndai
+- [docs] Fix grammatical errors in support.md (#45631) @letianpailove
+- [docs] Update nextjs font optimization guide (#45600) @IshfaqAhmedProg
+- [docs] Deprecate Toolpad Studio (#45613) @Janpot
+- [docs] Sync the mode from page to demos #45661 @siriwatknp
+
+### Core
+
+- [blog] v7 stable release (#45623) @DiegoAndai
+- [code-infra] Disable flaky masonry screenshot (#45678) @Janpot
+- [code-infra] Migrate regression tests to vite (#44964) @Janpot
+- [code-infra] Update rollup (#45666) @Janpot
+- [code-infra] Support `React.ComponentType` in proptypes generation (#45664) @Janpot
+- [code-infra] Ensure `translations.json` is present in all `@mui/docs` package builds (#45626) @LukasTy
+- [code-infra] Improve Argos script debuggability (#45619) @Janpot
+- [code-infra] Reconfigure `react-remove-properties` babel plugin (#45218) @Janpot
+- [core] Prepare master for v7 stable (#45674) @DiegoAndai
+- [core] Improve instructions on changing domain (#45637) @mnajdova
+- [core] Deprecate `ponyfillGlobal` (#45606) @Janpot
+- [docs-infra] Restructure docs theme context to CSS variables (#45386) @siriwatknp
+- [styles] Remove code & docs (#45633) @mnajdova
+
+All contributors of this release in alphabetical order: @DiegoAndai, @IshfaqAhmedProg, @Janpot, @letianpailove, @LukasTy, @mnajdova, @mushfiqbh, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
+
 ## 7.0.0-rc.0
 
 <!-- generated comparing v7.0.0-beta.4..master -->

package/README.md

@@ -9,7 +9,7 @@ Install the package in your project directory with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/docs@next
+npm install @mui/docs
 ```
 
 The docs has a peer dependency on the core components.
@@ -18,7 +18,7 @@ If you are not already using Material UI in your project, you can add it with:
 <!-- #npm-tag-reference -->
 
 ```bash
-npm install @mui/material@next
+npm install @mui/material
 ```
 
 ## Documentation

package/branding/brandingTheme.js

@@ -1350,7 +1350,7 @@ function getThemedComponents() {
           }) => [{
             textTransform: 'none',
             fontWeight: theme.typography.fontWeightMedium,
-            color: theme.palette.text.secondary,
+            color: (theme.vars || theme).palette.text.secondary,
             borderColor: theme.palette.grey[200],
             ...(ownerState.size === 'small' && {
               padding: '0.375rem 0.75rem'

package/esm/Ad/ad.styles.js

@@ -4,8 +4,8 @@ export const adBodyImageStyles = theme => ({
     display: 'block',
     overflow: 'hidden',
     border: '1px dashed',
-    borderColor: theme.palette.divider,
-    borderRadius: theme.shape.borderRadius,
+    borderColor: (theme.vars || theme).palette.divider,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     padding: 8,
     paddingLeft: 8 + 130,
     [theme.breakpoints.up('sm')]: {
@@ -23,7 +23,7 @@ export const adBodyImageStyles = theme => ({
     verticalAlign: 'middle'
   },
   a: {
-    color: theme.palette.text.primary,
+    color: (theme.vars || theme).palette.text.primary,
     textDecoration: 'none'
   },
   description: {
@@ -37,7 +37,7 @@ export const adBodyImageStyles = theme => ({
   poweredby: {
     ...theme.typography.caption,
     marginLeft: theme.spacing(1.5),
-    color: theme.palette.text.secondary,
+    color: (theme.vars || theme).palette.text.secondary,
     display: 'block',
     marginTop: theme.spacing(0.5),
     fontWeight: theme.typography.fontWeightRegular
@@ -71,11 +71,11 @@ export const adBodyInlineStyles = theme => {
         marginLeft: 4,
         content: '"Get started"',
         // Style taken from the Link component & MarkdownElement.
-        color: theme.palette.primary[600],
+        color: (theme.vars || theme).palette.primary[600],
         textDecoration: 'underline',
         textDecorationColor: alpha(theme.palette.primary.main, 0.4),
         ...theme.applyStyles('dark', {
-          color: theme.palette.primary[300]
+          color: (theme.vars || theme).palette.primary[300]
         })
       }
     },

package/esm/branding/brandingTheme.js

@@ -1339,7 +1339,7 @@ export function getThemedComponents() {
           }) => [{
             textTransform: 'none',
             fontWeight: theme.typography.fontWeightMedium,
-            color: theme.palette.text.secondary,
+            color: (theme.vars || theme).palette.text.secondary,
             borderColor: theme.palette.grey[200],
             ...(ownerState.size === 'small' && {
               padding: '0.375rem 0.75rem'

package/modern/translations/translations.json

@@ -0,0 +1,219 @@
+{
+  "adblock": "If you don't mind tech-related ads (no tracking or remarketing), and want to keep us running, please whitelist us in your blocker.",
+  "adPublisher": "ad by {{publisher}}",
+  "api-docs": {
+    "componentName": "Component name",
+    "componentsApi": "Components API",
+    "themeDefaultProps": "Theme default props",
+    "themeDefaultPropsDescription": "You can use <code>{{muiName}}</code> to change the default props of this component <a href={{defaultPropsLink}}>with the theme</a>.",
+    "classes": "CSS classes",
+    "classesDescription": "These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.",
+    "className": "Class name",
+    "cssDescription": "The following class names are useful for styling with CSS (the <a href=\"/material-ui/customization/how-to-customize/#state-classes\">state classes</a> are marked). <br /> To learn more, visit the <a href=\"/material-ui/customization/theme-components/\">component customization</a> page.",
+    "css": "CSS",
+    "cssComponent": "As a CSS utility, the {{name}} component also supports all <a href=\"/system/properties/\"><code>system</code></a> properties. You can use them as props directly on the component.",
+    "default": "Default",
+    "defaultComponent": "Default component",
+    "defaultValue": "Default value",
+    "defaultHTMLTag": "Default HTML tag",
+    "defaultDeprecationMessage": "This API is deprecated.",
+    "demos": "Demos",
+    "deprecated": "Deprecated",
+    "description": "Description",
+    "globalClass": "Global class",
+    "defaultClass": "Default class",
+    "hookName": "Hook name",
+    "hooksApi": "Hooks API",
+    "hooksNoParameters": "This hook does not accept any input parameters.",
+    "hooksPageDescription": "API reference docs for the {{name}} hook. Learn about the input parameters and other APIs of this exported module.",
+    "import": "Import",
+    "importDifference": "Learn about the difference by <a href=\"/material-ui/guides/minimizing-bundle-size/\">reading this guide on minimizing bundle size</a>.",
+    "inheritance": "Inheritance",
+    "inheritanceDescription": "While not explicitly documented above, the props of the <a href=\"{{pathname}}\">{{component}}</a> component{{suffix}} are also available in {{name}}. You can take advantage of this to <a href=\"/material-ui/guides/api/#spread\">target nested components</a>.",
+    "inheritanceSuffixTransition": " from react-transition-group",
+    "name": "Name",
+    "nativeElement": "native",
+    "overrideStyles": "You can override the style of the component using one of these customization options:\n",
+    "overrideStylesStyledComponent": "<ul>\n<li>With a <a href=\"/material-ui/integrations/interoperability/#global-css\">global class name</a>.</li>\n<li>With a rule name as part of the component's <a href=\"{{styleOverridesLink}}\"><code>styleOverrides</code> property</a> in a custom theme.</li>\n</ul>",
+    "pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.",
+    "props": "Props",
+    "properties": "Properties",
+    "parameters": "Parameters",
+    "requires-ref": "This <a href=\"/material-ui/guides/composition/#caveat-with-refs\">needs to be able to hold a ref</a>.",
+    "returns": "Returns: ",
+    "returnValue": "Return value",
+    "refNotHeld": "The component cannot hold a ref.",
+    "refRootElement": "The <code>ref</code> is forwarded to the root element.",
+    "ruleName": "Rule name",
+    "seeSourceCode": "If you did not find the information in this page, consider having a look at the <a href=\"{{href}}\">implementation of the component</a> for more detail.",
+    "signature": "Signature",
+    "slots": "Slots",
+    "spreadHint": "Props of the {{spreadHintElement}} component are also available.",
+    "state": "STATE",
+    "styleOverrides": "The name <code>{{componentStyles.name}}</code> can be used when providing <a href={{defaultPropsLink}}>default props</a> or <a href={{styleOverridesLink}}>style overrides</a> in the theme.",
+    "slotDescription": "To learn how to customize the slot, check out the <a href={{slotGuideLink}}>Overriding component structure</a> guide.",
+    "slotName": "Slot name",
+    "source-code": "Source code",
+    "type": "Type",
+    "required": "Required",
+    "optional": "Optional",
+    "additional-info": {
+      "cssApi": "See <a href='#classes'>CSS classes API</a> below for more details.",
+      "sx": "See the <a href='/system/getting-started/the-sx-prop/'>`sx` page</a> for more details.",
+      "slotsApi": "See <a href='#slots'>Slots API</a> below for more details.",
+      "joy-size": "To learn how to add custom sizes to the component, check out <a href='/joy-ui/customization/themed-components/#extend-sizes'>Themed components—Extend sizes</a>.",
+      "joy-color": "To learn how to add your own colors, check out <a href='/joy-ui/customization/themed-components/#extend-colors'>Themed components—Extend colors</a>.",
+      "joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
+    }
+  },
+  "marketingPageDescr": "A responsive marketing page layout with sections for product features, testimonials, pricing, and FAQs.",
+  "marketingPageTitle": "Marketing page",
+  "searchButton": "Search…",
+  "algoliaSearch": "What are you looking for?",
+  "appFrame": {
+    "changeLanguage": "Change language",
+    "github": "GitHub repository",
+    "helpToTranslate": "Help to translate",
+    "openDrawer": "Open main navigation",
+    "skipToContent": "Skip to content",
+    "toggleSettings": "Toggle settings drawer"
+  },
+  "backToTop": "Scroll back to top",
+  "backToOpenRoles": "Back to open roles",
+  "blogDescr": "A sleek, modern blog homepage layout with Markdown support via markdown-to-jsx.",
+  "blogTitle": "Blog",
+  "bundleSize": "Bundle size",
+  "bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
+  "cancel": "Cancel",
+  "cdn": "or use a CDN.",
+  "checkoutDescr": "A sophisticated checkout flow with fully customizable steps.",
+  "checkoutTitle": "Checkout",
+  "clickToCopy": "Click to copy",
+  "close": "Close",
+  "codesandbox": "Edit in CodeSandbox",
+  "copied": "Copied",
+  "copiedSource": "The source code has been copied to your clipboard.",
+  "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
+  "copySource": "Copy the source",
+  "copySourceLinkJS": "Copy link to JavaScript source",
+  "copySourceLinkTS": "Copy link to TypeScript source",
+  "dashboardDescr": "A complex data visualization dashboard featuring the MUI X Data Grid and Charts.",
+  "dashboardTitle": "Dashboard",
+  "decreaseSpacing": "decrease spacing",
+  "demoToolbarLabel": "demo source",
+  "demoStylingSelectSystem": "MUI System",
+  "demoStylingSelectTailwind": "Tailwind CSS",
+  "demoStylingSelectCSS": "Plain CSS",
+  "diamondSponsors": "Diamond sponsors",
+  "becomeADiamondSponsor": "Become a Diamond sponsor",
+  "diamondSponsorVacancies": "One spot left!",
+  "editorHint": "Press <kbd>Enter</kbd> to start editing",
+  "editPage": "Edit this page",
+  "emojiLove": "Love",
+  "emojiWarning": "Warning",
+  "expandAll": "Expand all",
+  "feedbackCommentLabel": "Comment",
+  "feedbackFailed": "Couldn't submit feedback. Please try again later.",
+  "feedbackMessage": "Was this page helpful?",
+  "feedbackMessageDown": "How can we improve this page? (optional)",
+  "feedbackMessageUp": "What did you like about this page? (optional)",
+  "feedbackSectionSpecific": "How can we improve the <strong>{{sectionName}}</strong> section? (optional)",
+  "feedbackMessageToGitHub": {
+    "usecases": "If something is broken or if you need a reply to a problem you've encountered, please",
+    "reasonWhy": "Otherwise, the team won't be able to answer back or ask for more information.",
+    "callToAction": {
+      "link": "open an issue instead."
+    }
+  },
+  "feedbackNo": "No",
+  "feedbackSubmitted": "Feedback submitted",
+  "feedbackYes": "Yes",
+  "footerCompany": "Company",
+  "goToHome": "go to homepage",
+  "getProfessionalSupport": "Get Professional Support",
+  "getStarted": "Get Started",
+  "githubLabel": "Feedback",
+  "headTitle": "MUI: A popular React UI framework",
+  "hideFullSource": "Collapse code",
+  "hideSource": "Hide code",
+  "homeQuickWord": "A quick word from our sponsors:",
+  "increaseSpacing": "increase spacing",
+  "initialFocusLabel": "A generic container that is programmatically focused to test keyboard navigation of our components.",
+  "installation": "Installation",
+  "installButton": "Read installation docs",
+  "installDescr": "Install MUI's source files via npm. We take care of injecting the CSS needed.",
+  "joinThese": "Join these and other great organizations!",
+  "JS": "JavaScript",
+  "letUsKnow": "Let us know!",
+  "likeMui": "Help us keep running",
+  "loadFont": "Load the default Roboto font.",
+  "mainNavigation": "documentation",
+  "newest": "Newest",
+  "openDrawer": "Open documentation navigation",
+  "or": "or",
+  "pageTOC": "Page table of contents",
+  "praise": "Praise for MUI",
+  "praiseDescr": "Here's what some of our users are saying.",
+  "pricingDescr": "Quickly build an effective pricing table for your potential customers.",
+  "pricingTitle": "Pricing",
+  "resetDemo": "Reset demo",
+  "resetDensity": "Reset density",
+  "resetFocus": "Reset focus to test keyboard navigation",
+  "searchIcons": {
+    "learnMore": "Learn more about the import"
+  },
+  "seeMore": "See more",
+  "settings": {
+    "color": "Color",
+    "dark": "Dark",
+    "direction": "Direction",
+    "editDocsColors": "Edit documentation colors",
+    "light": "Light",
+    "ltr": "Left to right",
+    "mode": "Mode",
+    "rtl": "Right to left",
+    "settings": "Settings",
+    "system": "System",
+    "language": "Language"
+  },
+  "showFullSource": "Expand code",
+  "showJSSource": "Show JavaScript source",
+  "showSource": "Show code",
+  "showTSSource": "Show TypeScript source",
+  "signInDescr": "A clean and efficient sign-in page, ready for your favorite auth provider.",
+  "signInSideDescr": "A responsive, two-column sign-in page for adding content alongside the form.",
+  "signInSideTitle": "Sign-in side",
+  "signInTitle": "Sign-in",
+  "signUpDescr": "A clean and efficient sign-up page, perfect for pairing with a sign-in template.",
+  "signUpTitle": "Sign-up",
+  "sourceCode": "Source code",
+  "spacingUnit": "Spacing unit",
+  "stackblitz": "Edit in StackBlitz",
+  "stars": "GitHub stars",
+  "stickyFooterDescr": "Attach a footer to the bottom of the viewport when page content is short.",
+  "stickyFooterTitle": "Sticky footer",
+  "strapline": "MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.",
+  "submit": "Submit",
+  "tableOfContents": "Contents",
+  "thanks": "Thank you!",
+  "themes": "Premium themes",
+  "themesButton": "Browse themes",
+  "themesDescr": "Take your project to the next level with premium themes from our store – all built on MUI.",
+  "toggleNotifications": "Toggle notifications panel",
+  "toggleRTL": "Toggle right-to-left/left-to-right",
+  "traffic": "Traffic",
+  "TS": "TypeScript",
+  "v5IsOut": "🎉 v5 release candidate is out! Head to the",
+  "v5docsLink": "v5 documentation",
+  "v5startAdoption": "to get started.",
+  "unreadNotifications": "unread notifications",
+  "usage": "Usage",
+  "usageButton": "Explore the docs",
+  "usageDescr": "MUI components work without any additional setup, and don't pollute the global scope.",
+  "useDarkTheme": "Use dark theme",
+  "useHighDensity": "Apply higher density via props",
+  "usingMui": "Are you using MUI?",
+  "viewGitHub": "View the source on GitHub",
+  "visit": "Visit the website",
+  "whosUsing": "Who's using MUI?"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/docs",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0",
   "private": false,
   "author": "MUI Team",
   "description": "MUI Docs - Documentation building blocks.",
@@ -28,7 +28,7 @@
     "clsx": "^2.1.1",
     "nprogress": "^0.2.0",
     "prop-types": "^15.8.1",
-    "@mui/internal-markdown": "^2.0.2"
+    "@mui/internal-markdown": "^2.0.3"
   },
   "peerDependencies": {
     "@mui/base": "*",