Merge branch 'master' into scroll-demo

Author: ZeeshanTamboli

.circleci/config.yml

@@ -299,12 +299,6 @@ jobs:
           command: |
             pnpm docs:link-check
             git add -A && git diff --exit-code --staged
-      - run:
-          name: Update the templates shared themes
-          command: pnpm template:update-theme
-      - run:
-          name: '`pnpm template:update-theme` changes committed?'
-          command: git add -A && git diff --exit-code --staged
   test_types:
     <<: *default-job
     resource_class: 'medium+'
@@ -495,6 +489,12 @@ jobs:
       - run:
           name: Run visual regression tests
           command: xvfb-run pnpm test:regressions
+      - run:
+          name: Build packages for fixtures
+          command: xvfb-run pnpm release:build
+      - run:
+          name: Run visual regression tests using Pigment CSS
+          command: xvfb-run pnpm test:regressions-pigment-css
       - run:
           name: Upload screenshots to Argos CI
           command: pnpm test:argos

CHANGELOG.old.md

@@ -4127,8 +4127,8 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
   ```diff
    import {
-      unstable_createCssVarsProvider as createCssVarsProvider,
-  +   unstable_createCssVarsTheme as createCssVarsTheme,
+     unstable_createCssVarsProvider as createCssVarsProvider,
+  +  unstable_createCssVarsTheme as createCssVarsTheme,
    } from '@mui/system';
 
    const { CssVarsProvider } = createCssVarsProvider({

README.md

@@ -5,12 +5,6 @@
 
 <h1 align="center">Material UI</h1>
 
-**Material UI** contains foundational React UI component libraries for shipping new features faster:
-
-- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
-
-- [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy.
-
 <div align="center">
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
@@ -27,30 +21,37 @@
 
 </div>
 
-## Documentation
+[Material UI](https://mui.com/material-ui/) is a comprehensive library of React components that features our independent implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system.
+It's trusted by some of the world's greatest product teams because it's been rigorously battle-tested through more than a decade of development by thousands of open-source contributors.
 
-### Material UI
+Material UI's core functionality is extended by [MUI X](https://github.com/mui/mui-x), a suite of complex components for advanced use cases.
 
-Visit [https://mui.com/material-ui/](https://mui.com/material-ui/) to view the full documentation.
+## Documentation
+
+Get started in the [Material UI documentation](https://mui.com/material-ui/getting-started/).
 
 <details>
   <summary>Older versions</summary>
 
-- **[v4.x](https://v4.mui.com/)** ([Migration from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
-- **[v3.x](https://v3.mui.com/)** ([Migration from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
-- **[v0.x](https://v0.mui.com/)** ([Migration to v1](https://mui.com/material-ui/migration/migration-v0x/))
+- **[v5.x](https://v5.mui.com/)** ([Upgrading from v5 to v6](https://mui.com/material-ui/migration/upgrade-to-v6/))
+- **[v4.x](https://v4.mui.com/)** ([Upgrading from v4 to v5](https://mui.com/material-ui/migration/migration-v4/))
+- **[v3.x](https://v3.mui.com/)** ([Upgrading from v3 to v4](https://mui.com/material-ui/migration/migration-v3/))
+- **[v0.x](https://v0.mui.com/)** ([Upgrading to v1](https://mui.com/material-ui/migration/migration-v0x/))
 
 </details>
 
-**Note:** `@next` only points to pre-releases.
+**Note:** `@next` points to pre-releases.
 Use `@latest` for the latest stable release.
 
-### Joy UI
+## Joy UI
+
+This repository also contains Joy UI, an experimental component library that implements our own in-house Joy Design.
+Joy UI is in beta and _development is currently on hold_.
+When starting a new project from scratch, we recommend Material UI over Joy UI because we can guarantee ongoing support.
 
-Visit [https://mui.com/joy-ui/getting-started/](https://mui.com/joy-ui/getting-started/) to view the full documentation.
+You're welcome to open new issues and PRs to help improve Joy UI, but please keep in mind that the maintainers are primarily focused on other projects and may not be able to respond in a timely manner.
 
-**Note**: Joy UI is still in beta.
-We are adding new components regularly and you're welcome to contribute!
+View the [Joy UI documentation](https://mui.com/joy-ui/getting-started/).
 
 ## Sponsors
 
@@ -108,7 +109,7 @@ You can find complete templates and themes in the [MUI Store](https://mui.com/s
 Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
 
 Contributing is about more than just issues and pull requests!
-There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
+There are many other ways to [support Material UI](https://mui.com/material-ui/getting-started/faq/#mui-is-an-awesome-organization-how-can-i-support-it) beyond contributing to the code base.
 
 ## Changelog
 
@@ -120,12 +121,11 @@ Future plans and high-priority features and enhancements can be found in the [ro
 
 ## License
 
-This project is licensed under the terms of the
-[MIT license](/LICENSE).
+This project is licensed under the terms of the [MIT license](/LICENSE).
 
 ## Security
 
-For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/security/policy).
+For details on supported versions and contact information for reporting security issues, please refer to the [security policy](https://github.com/mui/material-ui/security/policy).
 
 ## Sponsoring services
 

apps/pigment-css-next-app/package.json

@@ -23,8 +23,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.21",
-    "@types/node": "^20.14.8",
+    "@pigment-css/nextjs-plugin": "0.0.22",
+    "@types/node": "^20.16.5",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "eslint": "^8.57.0",

apps/pigment-css-next-app/src/app/material-ui/react-select/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+import * as React from 'react';
+import BasicSelect from '../../../../../../docs/data/material/components/selects/BasicSelect';
+import ControlledOpenSelect from '../../../../../../docs/data/material/components/selects/ControlledOpenSelect';
+import CustomizedSelects from '../../../../../../docs/data/material/components/selects/CustomizedSelects';
+import DialogSelect from '../../../../../../docs/data/material/components/selects/DialogSelect';
+import GroupedSelect from '../../../../../../docs/data/material/components/selects/GroupedSelect';
+import MultipleSelect from '../../../../../../docs/data/material/components/selects/MultipleSelect';
+import MultipleSelectCheckmarks from '../../../../../../docs/data/material/components/selects/MultipleSelectCheckmarks';
+import MultipleSelectChip from '../../../../../../docs/data/material/components/selects/MultipleSelectChip';
+import MultipleSelectNative from '../../../../../../docs/data/material/components/selects/MultipleSelectNative';
+import MultipleSelectPlaceholder from '../../../../../../docs/data/material/components/selects/MultipleSelectPlaceholder';
+import NativeSelectDemo from '../../../../../../docs/data/material/components/selects/NativeSelectDemo';
+import SelectAutoWidth from '../../../../../../docs/data/material/components/selects/SelectAutoWidth';
+import SelectLabels from '../../../../../../docs/data/material/components/selects/SelectLabels';
+import SelectOtherProps from '../../../../../../docs/data/material/components/selects/SelectOtherProps';
+import SelectSmall from '../../../../../../docs/data/material/components/selects/SelectSmall';
+import SelectVariants from '../../../../../../docs/data/material/components/selects/SelectVariants';
+
+export default function Selects() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Select</h2>
+        <div className="demo-container">
+          <BasicSelect />
+        </div>
+      </section>
+      <section>
+        <h2> Controlled Open Select</h2>
+        <div className="demo-container">
+          <ControlledOpenSelect />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Selects</h2>
+        <div className="demo-container">
+          <CustomizedSelects />
+        </div>
+      </section>
+      <section>
+        <h2> Dialog Select</h2>
+        <div className="demo-container">
+          <DialogSelect />
+        </div>
+      </section>
+      <section>
+        <h2> Grouped Select</h2>
+        <div className="demo-container">
+          <GroupedSelect />
+        </div>
+      </section>
+      <section>
+        <h2> Multiple Select</h2>
+        <div className="demo-container">
+          <MultipleSelect />
+        </div>
+      </section>
+      <section>
+        <h2> Multiple Select Checkmarks</h2>
+        <div className="demo-container">
+          <MultipleSelectCheckmarks />
+        </div>
+      </section>
+      <section>
+        <h2> Multiple Select Chip</h2>
+        <div className="demo-container">
+          <MultipleSelectChip />
+        </div>
+      </section>
+      <section>
+        <h2> Multiple Select Native</h2>
+        <div className="demo-container">
+          <MultipleSelectNative />
+        </div>
+      </section>
+      <section>
+        <h2> Multiple Select Placeholder</h2>
+        <div className="demo-container">
+          <MultipleSelectPlaceholder />
+        </div>
+      </section>
+      <section>
+        <h2> Native Select Demo</h2>
+        <div className="demo-container">
+          <NativeSelectDemo />
+        </div>
+      </section>
+      <section>
+        <h2> Select Auto Width</h2>
+        <div className="demo-container">
+          <SelectAutoWidth />
+        </div>
+      </section>
+      <section>
+        <h2> Select Labels</h2>
+        <div className="demo-container">
+          <SelectLabels />
+        </div>
+      </section>
+      <section>
+        <h2> Select Other Props</h2>
+        <div className="demo-container">
+          <SelectOtherProps />
+        </div>
+      </section>
+      <section>
+        <h2> Select Small</h2>
+        <div className="demo-container">
+          <SelectSmall />
+        </div>
+      </section>
+      <section>
+        <h2> Select Variants</h2>
+        <div className="demo-container">
+          <SelectVariants />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

apps/pigment-css-vite-app/.mocharc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  recursive: true,
+  slow: 500,
+  timeout: (process.env.CIRCLECI === 'true' ? 4 : 2) * 1000, // Circle CI has low-performance CPUs.
+  reporter: 'dot',
+  require: ['@mui/internal-test-utils/setupBabelPlaywright'],
+};

apps/pigment-css-vite-app/package.json

@@ -17,6 +17,7 @@
     "@mui/material": "workspace:^",
     "@mui/system": "workspace:^",
     "clsx": "^2.1.1",
+    "playwright": "^1.46.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
@@ -25,14 +26,15 @@
   "devDependencies": {
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@pigment-css/vite-plugin": "0.0.21",
+    "@pigment-css/vite-plugin": "0.0.22",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "postcss": "^8.4.44",
+    "postcss": "^8.4.45",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.4.2",
-    "vite-plugin-pages": "^0.32.3"
+    "vite-plugin-pages": "^0.32.3",
+    "vite-plugin-node-polyfills": "0.22.0"
   },
   "nx": {
     "targets": {

apps/pigment-css-vite-app/src/pages/fixtures/PigmentCssSelectOpen.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+export default function BasicSelect() {
+  const [age, setAge] = React.useState(10);
+
+  const handleChange = (event) => {
+    setAge(event.target.value);
+  };
+
+  return (
+    <Box sx={{ minWidth: 120, minHeight: 250 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Age</InputLabel>
+        <Select
+          defaultOpen
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={age}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value={10}>Ten</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}