Merge branch 'master' into styled-engine-sc/support-styled-components-v6

Signed-off-by: Marija Najdova <[email protected]>
mnajdova · Oct 9, 2023 · fd52987 · fd52987
2 parents b264149 + b0edf66
commit fd52987
Show file tree

Hide file tree

Showing 274 changed files with 6,818 additions and 2,700 deletions.
diff --git a/.github/workflows/codeql.yml b/.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@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/init@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
         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@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/analyze@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml
@@ -27,7 +27,7 @@ jobs:
           persist-credentials: false
 
       - name: Run analysis
-        uses: ossf/scorecard-action@08b4669551908b1024bb425080c797723083c031 # v2.2.0
+        uses: ossf/scorecard-action@483ef80eb98fb506c348f7d62e28055e49fe2398 # v2.3.0
         with:
           results_file: results.sarif
           results_format: sarif
@@ -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@6a28655e3dcb49cb0840ea372fd6d17733edd8a4 # v2.21.8
+        uses: github/codeql-action/upload-sarif@2cb752a87e96af96708ab57187ab6372ee1973ab # v2.22.0
         with:
           sarif_file: results.sarif
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,87 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.14.12
+
+<!-- generated comparing v5.14.11..master -->
+
+_Oct 3, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎨 Introduced color inversion utilities to Joy UI (#38916) @siriwatknp
+- 🚀 Added Chip and related TextField components to Material You @DiegoAndai, @mj12albert
+- 🏗️ Improve the Select's component a11y by adding the combobox role and aria-controls attribute (#38785) @xulingzhihou. If your tests require selecting the trigger element by the "button" role, then you'll have to change it to use the "combobox" role instead
+
+### `@mui/[email protected]`
+
+- [DialogActions] Apply margin-left when children is not of `button` type (#39189) @sai6855
+- [Select] Improve a11y by adding combobox role and aria-controls attribute (#38785) @xulingzhihou
+- [Select] Fix MenuProps slotProps forwarding (#39177) @DiegoAndai
+- [TextField] Polish types in Textfield demo (#39140) @sai6855
+- [ButtonGroup] Fix rendering with conditional elements (#38989) @ZeeshanTamboli
+
+### `@mui/[email protected]`
+
+- [system] Add support for `variants` in the styled() util (#39073) @mnajdova
+- [Box] Add missing logical spacing property types (#39169) @Semigradsky
+
+### `@mui/[email protected]`
+
+- [useSlider] Align externalProps handling (#38854) @mj12albert
+- [useTabs] Align external props handling for useTab/useTabPanel/useTabsList (#39037) @mj12albert
+- [test] Fix import paths in useTab tests (#39291) @mj12albert
+
+### `@mui/[email protected]`
+
+- [Chip] Add Material You Chip component (#38927) @DiegoAndai
+- [Divider] Copy v5 Divider (#39197) @mj12albert
+- [FilledInput] Copy v5 FilledInput (#39040) @mj12albert
+- [FormControl] Add FormControl component (#39032) @mj12albert
+- [Select] Copy Select files from v5 (#39188) @DiegoAndai
+- [TextField] Copy v5 TextField's inner components (#39166) @mj12albert
+
+### `@mui/[email protected]`
+
+- Introduce color inversion utilities (#38916) @siriwatknp
+- Replace margin with `gap` property (#39147) @siriwatknp
+- [CssBaseline] use Joy `GlobalStyles` (#39278) @siriwatknp
+- [Drawer] Apply content styles from theme to content slot (#39199) @sai6855
+- [List] Add gap and missing active styles (#39146) @siriwatknp
+- [Switch] Slight adjustments to the design (#39276) @danilo-leal
+
+### Docs
+
+- [docs] Update Autocomplete demo for React 18 (#39162) @oliviertassinari
+- [docs-infra] Tweak feedback footer section design (#36556) @danilo-leal
+- [docs-infra] Improve code syntax highlight (#39181) @oliviertassinari
+- [docs][base] Add Tailwind CSS + plain CSS demo on the TextArea page (#39046) @alisasanib
+- [docs][base-ui] Fix style for root div of multiline input (#39182) @ttlpta
+- [docs][base-ui] Improve Select's country select demo (#38983) @oliviertassinari
+- [docs][joy-ui] Add scrollable tabs example (#39260) @siriwatknp
+- [docs][joy-ui] Match `Autocomplete` github label demo to actual github label dropdown (#39228) @sai6855
+- [docs][joy-ui] Refine the Rental dashboard template (#39059) @zanivan
+- [docs][joy-ui] Removed incomplete sentence in the Aspect Ratio page (#39227) @Erik-McKelvey
+- [docs][joy-ui] Fix typo in the Accordion page (#39226) @Erik-McKelvey
+- [docs][joy-ui] Update and standardize template Sidemenus (#39271) @zanivan
+- [docs][joy-ui] Add a roadmap page (#39163) @danilo-leal
+- [docs][material-ui] Replace `Box` with `Stack` in applicable demos (#39174) @sai6855
+- [docs][material-ui] Add small polish to the Templates page (#39224) @danilo-leal
+- [docs][material-ui] Small revision to the Icons page (#38840) @danilo-leal
+
+### Core
+
+- Add next lint config to eslint (#39183) @Janpot
+- [core] Update eslint rules (#39178) @romgrk
+- [core] Fix Greg GitHub slug @oliviertassinari
+- [core] Priority Support casing normalization @oliviertassinari
+- [website] Add Heat map in pricing page (#39269) @oliviertassinari
+- [website] Update `React Engineer - xCharts` Ashby link (#39172) @DanailH
+- [website] Add Charts to the pricing table (#38680) @alexfauquette
+- [website] Polish career experience @oliviertassinari
+- [website] Simplify the Core products file (#39194) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @Erik-McKelvey, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @Semigradsky, @siriwatknp, @xulingzhihou, @zanivan, @ZeeshanTamboli
+
 ## 5.14.11
 
 <!-- generated comparing v5.14.10..master -->

diff --git a/apps/zero-runtime-next-app/package.json b/apps/zero-runtime-next-app/package.json
@@ -22,7 +22,7 @@
     "@mui/zero-next-plugin": "file:../../packages/zero-next-plugin/build",
     "@types/node": "20.5.7",
     "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.7",
+    "@types/react-dom": "18.2.11",
     "typescript": "5.1.6"
   },
   "resolutions": {

diff --git a/benchmark/package.json b/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.11",
-    "@mui/styles": "^5.14.11",
-    "@mui/system": "^5.14.11",
+    "@mui/material": "^5.14.12",
+    "@mui/styles": "^5.14.12",
+    "@mui/system": "^5.14.12",
     "@styled-system/css": "^5.1.5",
     "benchmark": "^2.1.4",
     "docs": "^5.0.0",

diff --git a/docs/data/base/components/input/InputMultiline.js b/docs/data/base/components/input/InputMultiline.js
@@ -5,7 +5,11 @@ import { styled } from '@mui/system';
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -39,6 +43,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;

diff --git a/docs/data/base/components/input/InputMultiline.tsx b/docs/data/base/components/input/InputMultiline.tsx
@@ -8,7 +8,11 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -42,6 +46,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;

diff --git a/docs/data/base/components/input/InputMultilineAutosize.js b/docs/data/base/components/input/InputMultilineAutosize.js
@@ -6,7 +6,11 @@ import { styled } from '@mui/system';
 const CustomInput = React.forwardRef(function CustomInput(props, ref) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -40,6 +44,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;

diff --git a/docs/data/base/components/input/InputMultilineAutosize.tsx b/docs/data/base/components/input/InputMultilineAutosize.tsx
@@ -9,7 +9,11 @@ const CustomInput = React.forwardRef(function CustomInput(
 ) {
   return (
     <Input
-      slots={{ input: StyledInputElement, textarea: StyledTextareaElement }}
+      slots={{
+        root: StyledRootDiv,
+        input: StyledInputElement,
+        textarea: StyledTextareaElement,
+      }}
       {...props}
       ref={ref}
     />
@@ -43,6 +47,11 @@ const grey = {
   900: '#1A2027',
 };
 
+const StyledRootDiv = styled('div')`
+  display: flex;
+  max-width: 100%;
+`;
+
 const StyledInputElement = styled('input')(
   ({ theme }) => `
   width: 320px;

diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.js
@@ -8,7 +8,16 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
@@ -40,18 +49,6 @@ CustomSelect.propTypes = {
   }),
 };
 
-function renderValue(option) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',

diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx
@@ -7,7 +7,16 @@ import { styled } from '@mui/system';
 
 export default function UnstyledSelectCustomRenderValue() {
   return (
-    <CustomSelect renderValue={renderValue} placeholder="Select an option…">
+    <CustomSelect
+      defaultValue={10}
+      renderValue={(option: SelectOption<number> | null) => {
+        if (option == null || option.value === null) {
+          return 'Select an option…';
+        }
+        return `${option.label} (${option.value})`;
+      }}
+    >
+      <StyledOption value={null}>None</StyledOption>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
@@ -26,18 +35,6 @@ function CustomSelect(props: SelectProps<number, false>) {
   return <Select {...props} slots={slots} />;
 }
 
-function renderValue(option: SelectOption<number> | null) {
-  if (option == null) {
-    return null;
-  }
-
-  return (
-    <span>
-      {option.label} ({option.value})
-    </span>
-  );
-}
-
 const blue = {
   100: '#DAECFF',
   200: '#99CCF3',

diff --git a/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview b/docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx.preview
@@ -1,4 +1,13 @@
-<CustomSelect renderValue={renderValue} placeholder="Select an option…">
+<CustomSelect
+  defaultValue={10}
+  renderValue={(option: SelectOption<number> | null) => {
+    if (option == null || option.value === null) {
+      return 'Select an option…';
+    }
+    return `${option.label} (${option.value})`;
+  }}
+>
+  <StyledOption value={null}>None</StyledOption>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.js b/docs/data/base/components/select/UnstyledSelectRichOptions.js
@@ -3,21 +3,22 @@ import PropTypes from 'prop-types';
 import { Select, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
-import { Popper } from '@mui/base';
+import { Popper } from '@mui/base/Popper';
 
 export default function UnstyledSelectRichOptions() {
   return (
     <CustomSelect placeholder="Select country…">
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
+      {countries.map((country) => (
+        <StyledOption key={country.code} value={country.code} label={country.label}>
           <img
             loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            alt={`Flag of ${c.label}`}
+            width={20}
+            height={14}
+            srcSet={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+            alt={`Flag of ${country.label}`}
           />
-          {c.label} ({c.code}) +{c.phone}
+          {country.label} ({country.code}) +{country.phone}
         </StyledOption>
       ))}
     </CustomSelect>

diff --git a/docs/data/base/components/select/UnstyledSelectRichOptions.tsx b/docs/data/base/components/select/UnstyledSelectRichOptions.tsx
@@ -2,21 +2,22 @@ import * as React from 'react';
 import { Select, SelectProps, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { styled } from '@mui/system';
-import { Popper } from '@mui/base';
+import { Popper } from '@mui/base/Popper';
 
 export default function UnstyledSelectRichOptions() {
   return (
     <CustomSelect placeholder="Select country…">
-      {countries.map((c) => (
-        <StyledOption key={c.code} value={c.code} label={c.label}>
+      {countries.map((country) => (
+        <StyledOption key={country.code} value={country.code} label={country.label}>
           <img
             loading="lazy"
-            width="20"
-            srcSet={`https://flagcdn.com/w40/${c.code.toLowerCase()}.png 2x`}
-            src={`https://flagcdn.com/w20/${c.code.toLowerCase()}.png`}
-            alt={`Flag of ${c.label}`}
+            width={20}
+            height={14}
+            srcSet={`https://flagcdn.com/w40/${country.code.toLowerCase()}.png 2x`}
+            src={`https://flagcdn.com/w20/${country.code.toLowerCase()}.png`}
+            alt={`Flag of ${country.label}`}
           />
-          {c.label} ({c.code}) +{c.phone}
+          {country.label} ({country.code}) +{country.phone}
         </StyledOption>
       ))}
     </CustomSelect>