Merge branch 'master' into badge/use-variants-api

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Use Node.js 18.x
         uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
         with:
-          node-version: 18
+          node-version: 18.18 # ts-node throws error on Node.js 18.19 (https://github.com/TypeStrong/ts-node/issues/2094)
           cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: yarn install
       - run: yarn release:build

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@407ffafae6a767df3e0230c3df91b6443ae8df75 # v2.22.8
+        uses: github/codeql-action/init@03e7845b7bfcd5e7fb63d1ae8c61b0e791134fab # v2.22.11
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@407ffafae6a767df3e0230c3df91b6443ae8df75 # v2.22.8
+        uses: github/codeql-action/analyze@03e7845b7bfcd5e7fb63d1ae8c61b0e791134fab # v2.22.11

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@407ffafae6a767df3e0230c3df91b6443ae8df75 # v2.22.8
+        uses: github/codeql-action/upload-sarif@03e7845b7bfcd5e7fb63d1ae8c61b0e791134fab # v2.22.11
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.15.1
+
+<!-- generated comparing v5.15.0..master -->
+
+_Dec 19, 2023_
+
+A big thanks to the 15 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 13 -->[CardActions][DialogActions] Apply margin for all children except for 1st child (#40168) @sai6855
+- &#8203;<!-- 03 -->[TablePagination] Add ability to change icons in TablePaginationActions using `slots` and `slotProps` (#33797) @pratikkarad
+- &#8203;<!-- 13 -->[CssVarsProvider] Fix HSL breaking button styles (#39869) @gitstart
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 05 -->[FormControl] Fix issue with the conditional setting of `htmlFor` and `id` attributes not functioning properly for form labels (#40180) @ReaZzy
+- &#8203;<!-- 04 -->[typescript] Address TypeScript issue with custom zIndex not functioning (#40133) @qiweiii
+
+### `@mui/[email protected]`
+
+- &#8203;<!-- 02 -->[typescript] Fix `theme` being of type any (#40200) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 09 -->[joy-ui] Fix typo in the CSS baseline page (#40222) @possibilities
+- &#8203;<!-- 08 -->[joy-ui] Document missing Autocomplete props (#39979) @ZeeshanTamboli
+- &#8203;<!-- 10 -->[joy-ui] Fix typo about Typography levels (#40230) @zanivan
+- &#8203;<!-- 07 -->[material-ui] Update the related projects page to list `mui-tiptap` for rich text (#40216) @sjdemartini
+- &#8203;<!-- 06 -->[material-ui] Fix typo in the Next.js integration page (#40209) @s8990
+
+### Core
+
+- &#8203;<!-- 14 -->[blog] Fix access to Notion without an account @oliviertassinari
+- &#8203;<!-- 12 -->[core] Update workflows and issue templates to reflect the updated label (#40197) @MBilalShafi
+- &#8203;<!-- 11 -->[docs] Replace Twitter with X (#40193) @mbrookes
+- &#8203;<!-- 10 -->[docs-infra] Uplift the Algolia search modal design (#40186) @danilo-leal
+- &#8203;<!-- 01 -->[website] Update product descriptions and social preview images (#32181) @danilo-leal
+
+All contributors of this release in alphabetical order: @danilo-leal, @gitstart, @MBilalShafi, @mbrookes, @mnajdova, @oliviertassinari, @possibilities, @pratikkarad, @qiweiii, @ReaZzy, @s8990, @sai6855, @sjdemartini, @zanivan, @ZeeshanTamboli
+
 ## 5.15.0
 
 <!-- generated comparing v5.14.20..master -->

apps/zero-runtime-next-app/package.json

@@ -23,7 +23,7 @@
     "@types/node": "20.5.7",
     "@types/react": "18.2.42",
     "@types/react-dom": "18.2.17",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "resolutions": {
     "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build"

apps/zero-runtime-vite-app/package.json

@@ -22,14 +22,14 @@
     "@mui/zero-vite-plugin": "file:../../packages/zero-vite-plugin/build",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^22.1.0",
     "local-library": "file:../local-library",
-    "vite": "4.4.12",
+    "vite": "4.5.1",
     "vitest": "^0.34.6",
-    "typescript": "5.3.2"
+    "typescript": "5.3.3"
   },
   "resolutions": {
     "@mui/zero-tag-processor": "file:../../packages/zero-tag-processor/build"

benchmark/package.json

@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.21",
-    "@mui/styles": "^5.14.21",
-    "@mui/system": "^5.14.21",
+    "@mui/material": "^5.15.1",
+    "@mui/styles": "^5.15.1",
+    "@mui/system": "^5.15.1",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",
@@ -36,6 +36,6 @@
     "styled-components": "^6.1.1",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.16.1",
-    "webpack": "^5.88.2"
+    "webpack": "^5.89.0"
   }
 }

docs/data/joy/components/css-baseline/css-baseline.md

@@ -106,7 +106,7 @@ The CSS [`color-scheme`](https://web.dev/articles/color-scheme) is applied by de
 
 ### CssBaseline
 
-To custom the styles produced by the `CssBaseline` component, append the `GlobalStyles` next to it:
+To customize the styles produced by the `CssBaseline` component, append the `GlobalStyles` next to it:
 
 ```js
 import { CssVarsProvider } from '@mui/joy/styles';

docs/data/joy/getting-started/tutorial/tutorial.md

@@ -113,7 +113,7 @@ Replace `Welcome!` inside your Sheet component with this `<div>`:
 
 :::success
 Try changing the values for the `level` and `component` props to see how they affect the typographic values and the elements rendered.
-(Note that while `level` only accepts the 13 values listed above, you can pass any HTML tag to `component`, as well as custom React components.)
+(Note that while `level` only accepts the 11 values listed above, you can pass any HTML tag to `component`, as well as custom React components.)
 :::
 
 ## Add text field for user inputs

docs/data/material/customization/theme-components/theme-components.md

@@ -187,10 +187,12 @@ declare module '@mui/material/Button' {
 
 {{"demo": "GlobalThemeVariants.js"}}
 
-The variant's props property can be defined in a form of a callback too. This is useful if you want to apply some styles if you need to use a negation in the condition, for e.g. apply some styles if some property does not have some value.
+The variant `props` can also be defined as a callback.
+This is useful if you want to apply styles when using negation in the condition.
+In other words, applying a different style if a particular property doesn't have a specific value.
 
 :::info
-This feature is available from version 5.15.0.
+This feature is available from version 5.15.2.
 :::
 
 ```js

docs/data/material/discover-more/related-projects/related-projects.md

@@ -53,6 +53,10 @@ Feel free to submit a pull request!
 - [mui-color-input](https://github.com/viclafouch/mui-color-input): A color input designed for use with Material UI, built with [TinyColor](https://tinycolor.vercel.app/).
 - [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for Material UI. No dependencies, small, highly customizable, and supports theming.
 
+### Rich text
+
+- [mui-tiptap](https://github.com/sjdemartini/mui-tiptap): A customizable Material UI-styled WYSIWYG (What You See Is What You Get) rich text editor, using [Tiptap](https://tiptap.dev/).
+
 ### Sparkline
 
 - [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value.

docs/package.json

@@ -32,27 +32,27 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/base": "5.0.0-beta.27",
-    "@mui/docs": "^5.14.21",
-    "@mui/icons-material": "^5.14.21",
-    "@mui/joy": "5.0.0-beta.18",
-    "@mui/lab": "5.0.0-alpha.156",
+    "@mui/base": "5.0.0-beta.28",
+    "@mui/docs": "^5.15.1",
+    "@mui/icons-material": "^5.15.1",
+    "@mui/joy": "5.0.0-beta.19",
+    "@mui/lab": "5.0.0-alpha.157",
     "@mui/markdown": "^5.0.0",
-    "@mui/material": "^5.14.21",
-    "@mui/material-next": "6.0.0-alpha.113",
-    "@mui/styled-engine": "^5.14.21",
-    "@mui/styled-engine-sc": "6.0.0-alpha.8",
-    "@mui/styles": "^5.14.21",
-    "@mui/system": "^5.14.21",
+    "@mui/material": "^5.15.1",
+    "@mui/material-next": "6.0.0-alpha.114",
+    "@mui/styled-engine": "^5.15.1",
+    "@mui/styled-engine-sc": "6.0.0-alpha.9",
+    "@mui/styles": "^5.15.1",
+    "@mui/system": "^5.15.1",
     "@mui/types": "^7.2.11",
-    "@mui/utils": "^5.14.21",
+    "@mui/utils": "^5.15.1",
     "@mui/x-charts": "6.18.3",
-    "@mui/x-data-grid": "6.18.3",
-    "@mui/x-data-grid-generator": "6.18.3",
-    "@mui/x-data-grid-premium": "6.18.3",
-    "@mui/x-data-grid-pro": "6.18.3",
-    "@mui/x-date-pickers": "6.18.3",
-    "@mui/x-date-pickers-pro": "6.18.3",
+    "@mui/x-data-grid": "6.18.5",
+    "@mui/x-data-grid-generator": "6.18.5",
+    "@mui/x-data-grid-premium": "6.18.5",
+    "@mui/x-data-grid-pro": "6.18.5",
+    "@mui/x-date-pickers": "6.18.5",
+    "@mui/x-date-pickers-pro": "6.18.5",
     "@mui/x-license-pro": "6.10.2",
     "@mui/x-tree-view": "6.17.0",
     "@popperjs/core": "^2.11.8",
@@ -112,7 +112,7 @@
     "stylis": "4.2.0",
     "stylis-plugin-rtl": "^2.1.1",
     "use-count-up": "^3.0.1",
-    "webpack-bundle-analyzer": "^4.9.1"
+    "webpack-bundle-analyzer": "^4.10.1"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-constant-elements": "^7.23.3",
@@ -130,7 +130,7 @@
     "@types/react-dom": "^18.2.17",
     "@types/react-swipeable-views": "^0.13.5",
     "@types/react-swipeable-views-utils": "^0.13.7",
-    "@types/react-transition-group": "^4.4.9",
+    "@types/react-transition-group": "^4.4.10",
     "@types/react-window": "^1.8.8",
     "@types/stylis": "^4.2.0",
     "chai": "^4.3.10",
@@ -139,7 +139,7 @@
     "marked": "^5.1.2",
     "playwright": "^1.40.1",
     "prettier": "^2.8.8",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.3.6",
     "typescript-to-proptypes": "^5.0.0",
     "yargs": "^17.7.2"
   }

docs/pages/about.tsx

@@ -18,6 +18,7 @@ export default function About() {
         title="About us - MUI"
         description="MUI is a 100% remote globally distributed team, supported by a community of thousands
         of developers all across the world."
+        card="/static/social-previews/about-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

docs/pages/base-ui.tsx

@@ -16,10 +16,10 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Base UI: Ship accessible & sleek components"
+        title="Base UI: Unstyled React components and low-level hooks."
         description={`Base UI is a library of headless ("unstyled") React UI components and low-level hooks.
         You can style them with any CSS solutions like PostCSS or Tailwind CSS.`}
-        card="/static/blog/introducing-base-ui/card.png"
+        card="/static/social-previews/baseui-preview.jpg"
       >
         {/* eslint-disable-next-line @next/next/no-page-custom-font */}
         <link

docs/pages/blog.tsx

@@ -259,6 +259,7 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
       <Head
         title="Blog - MUI"
         description="Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives."
+        card="/static/social-previews/blog-preview.jpg"
         disableAlternateLocale
       />
       <AppHeader />

docs/pages/blog/2023-mui-values.md

@@ -114,7 +114,7 @@ Fortunately, this helped us find the ones that **\***are.**\*** 👏
 
 I presented a video presentation to our team, pitching this set of values and providing another opportunity for feedback and shaping.
 
-You can <a href="https://www.notion.so/mui-org/Values-behaviors-d3a1e1c60e2a4c0782f770cceada54bd?pvs=4#09dc19a420504a3090dc4fbe6a68a543">watch the "reveal" video for yourself here</a>! 🎬👀
+You can <a href="https://mui-org.notion.site/Values-behaviors-d3a1e1c60e2a4c0782f770cceada54bd#09dc19a420504a3090dc4fbe6a68a543">watch the "reveal" video for yourself here</a>! 🎬👀
 
 ## Stage five: revising and finalizing
 
@@ -140,7 +140,7 @@ Our core four are:
 
 **T** — Trust and deliver together. "We cultivate unity as the core of achievement." 🚀
 
-To delve deeper into the meaning of each value and what it looks like in practice, you can also check out our handbook: <a href="https://www.notion.so/mui-org/Values-behaviors-d3a1e1c60e2a4c0782f770cceada54bd?pvs=4">Values & Behaviors.</a>
+To delve deeper into the meaning of each value and what it looks like in practice, you can also check out our handbook: <a href="https://mui-org.notion.site/Values-behaviors-d3a1e1c60e2a4c0782f770cceada54bd">Values & Behaviors.</a>
 
 In it, we offer concrete examples of each core value and explicitly address tensions folks may encounter in trying to live them out.
 

docs/pages/careers.tsx

@@ -573,6 +573,7 @@ export default function Careers() {
       <Head
         title="Careers - MUI"
         description="Interested in joining MUI? Learn about the roles we're hiring for."
+        card="/static/social-previews/careers-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

docs/pages/core.tsx

@@ -14,7 +14,7 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI Core: Ready to use components, free forever"
+        title="MUI Core: Ready-to-use foundational React components, free forever."
         description="Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind."
         card="/static/social-previews/core-preview.jpg"
       />

docs/pages/index.tsx

@@ -20,8 +20,11 @@ export default function Home() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI: The React component library you always wanted"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
+        title="MUI: Move faster with intuitive React UI tools"
+        description="MUI offers a comprehensive suite of free UI tools to help you ship new features faster.
+        Start with Material UI, our fully-loaded component library, or bring your own design
+        system to our production-ready components."
+        card="/static/social-previews/home-preview.jpg"
       >
         <script
           type="application/ld+json"

docs/pages/material-ui.tsx

@@ -18,9 +18,9 @@ export default function Core() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="Material UI: React components based on Material Design"
+        title="Material UI: A meticulous React implementation of Google's Material Design."
         description="Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box."
-        card="/static/social-previews/core-preview.jpg"
+        card="/static/social-previews/materialui-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/material-ui" />

docs/pages/pricing.tsx

@@ -21,6 +21,7 @@ export default function Pricing() {
       <Head
         title="Pricing - MUI"
         description="The community edition lets you get going right away. Switch to a commercial plan for more components & technical support."
+        card="/static/social-previews/pricing-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader />

docs/pages/x.tsx

@@ -17,10 +17,10 @@ export default function X() {
   return (
     <BrandingCssVarsProvider>
       <Head
-        title="MUI X: Performant advanced components"
+        title="MUI X: Advanced and powerful components for complex use cases."
         description="Build complex and data-rich applications using a growing list of advanced React
         components, like the Data Grid, Date and Time Pickers, Charts, and more!"
-        card="/static/social-previews/x-preview.jpg"
+        card="/static/social-previews/muix-preview.jpg"
       />
       <AppHeaderBanner />
       <AppHeader gitHubRepository="https://github.com/mui/mui-x" />

docs/src/components/header/HeaderNavDropdown.tsx

@@ -62,12 +62,12 @@ const PRODUCTS = [
   },
   {
     name: 'MUI X',
-    description: 'Advanced and powerful components for complex use-cases.',
+    description: 'Advanced and powerful components for complex use cases.',
     href: ROUTES.productAdvanced,
   },
   {
     name: 'Templates',
-    description: 'Fully built, out-of-the-box, templates for your application.',
+    description: 'Fully built Material UI templates for your application.',
     href: ROUTES.productTemplates,
   },
   {
@@ -86,7 +86,7 @@ const PRODUCTS = [
 const DOCS = [
   {
     name: 'Material UI',
-    description: "React components that implement Google's Material Design.",
+    description: `A meticulous React implementation of Google's Material Design.`,
     href: ROUTES.materialDocs,
   },
   {

docs/src/components/productMaterial/MaterialHero.tsx

@@ -253,8 +253,8 @@ export default function MaterialHero() {
             components
           </Typography>
           <Typography color="text.secondary" sx={{ mb: 3, maxWidth: 500 }}>
-            Material UI is beautiful by design and features a suite of customization options that
-            make it easy to implement your own custom design system.
+            Material UI is an open-source React component library that implements Google&apos;s
+            Material Design. It&apos;s comprehensive and can be used in production out of the box.
           </Typography>
           <GetStartedButtons
             primaryUrl={ROUTES.materialDocs}