Merge remote-tracking branch 'upstream/master' into template-polishin…

…g-checkout

.circleci/config.yml

@@ -385,6 +385,7 @@ jobs:
           name: Test umd release
           command: pnpm test:umd
   test_e2e_website:
+    # NOTE: This workflow runs after successful docs deploy. See /test/e2e-website/README.md#ci
     <<: *defaults
     docker:
       - image: mcr.microsoft.com/playwright:v1.42.1-focal

.codesandbox/ci.json

@@ -9,6 +9,7 @@
     "packages/mui-base",
     "packages/mui-codemod",
     "packages/mui-core-downloads-tracker",
+    "packages/mui-docs",
     "packages/mui-icons-material",
     "packages/mui-joy",
     "packages/mui-lab",
@@ -28,6 +29,7 @@
     "@mui/base": "packages/mui-base/build",
     "@mui/codemod": "packages/mui-codemod/build",
     "@mui/core-downloads-tracker": "packages/mui-core-downloads-tracker/build",
+    "@mui/docs": "packages/mui-docs/build",
     "@mui/icons-material": "packages/mui-icons-material/build",
     "@mui/internal-babel-macros": "packages/mui-babel-macros",
     "@mui/internal-markdown": "packages/markdown",

.eslintignore

@@ -23,7 +23,7 @@
 /packages/pigment-react/processors/
 /packages/pigment-react/exports/
 /packages/pigment-react/theme/
-/packages/pigment-react/tests/fixtures/
+/packages/pigment-react/tests/**/fixtures
 /packages/pigment-nextjs-plugin/loader.js
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*

CHANGELOG.md

@@ -9,6 +9,10 @@ _Mar 5, 2024_
 A big thanks to the 21 contributors who made this release possible.
 This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
 
+### `@pigment-css/react@0.0.1`, `@pigment-css/nextjs-plugin@0.0.1`, `@pigment-css/vite-plugin@0.0.1`, & `@pigment-css/unplugin@0.0.1`
+
+- This is the first public release of our new zero-runtime CSS-in-JS library, Pigment CSS.
+
 ### `@mui/material@5.15.12`
 
 - &#8203;<!-- 52 -->Support props callback type in theme variants (#40946) @ZeeshanTamboli

docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx

@@ -10,7 +10,7 @@ export default function TransitionComponentSnackbar() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/css/index.tsx

@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/system/index.tsx

@@ -11,7 +11,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/base/components/snackbar/UnstyledSnackbarIntroduction/tailwind/index.tsx

@@ -18,7 +18,7 @@ export default function UnstyledSnackbarIntroduction() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/data/joy/integrations/icon-libraries/IconFontSizes.js

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx

@@ -1,19 +1,22 @@
 import * as React from 'react';
-import { useTheme } from '@mui/joy/styles';
 import Stack from '@mui/joy/Stack';
 import Person from '@mui/icons-material/Person';
 
 export default function IconFontSizes() {
-  const theme = useTheme();
   return (
     <Stack
       spacing={2}
       direction="row"
       sx={{ gridColumn: '1 / -1', alignItems: 'center', justifyContent: 'center' }}
     >
-      {Object.keys(theme.fontSize).map((size) => (
-        <Person key={size} fontSize={size} />
-      ))}
+      <Person fontSize="xs" />
+      <Person fontSize="sm" />
+      <Person fontSize="md" />
+      <Person fontSize="lg" />
+      <Person fontSize="xl" />
+      <Person fontSize="xl2" />
+      <Person fontSize="xl3" />
+      <Person fontSize="xl4" />
     </Stack>
   );
 }

docs/data/joy/integrations/icon-libraries/IconFontSizes.tsx.preview

@@ -1,3 +1,8 @@
-{Object.keys(theme.fontSize).map((size) => (
-  <Person key={size} fontSize={size} />
-))}
+<Person fontSize="xs" />
+<Person fontSize="sm" />
+<Person fontSize="md" />
+<Person fontSize="lg" />
+<Person fontSize="xl" />
+<Person fontSize="xl2" />
+<Person fontSize="xl3" />
+<Person fontSize="xl4" />

docs/data/joy/main-features/color-inversion/color-inversion.md

@@ -35,7 +35,7 @@ The color inversion feature is only available for `soft` and `solid` variants be
 - It works for both light and dark mode.
 - It can be disabled at any time without impacting the structure of the components.
 - It is an opt-in feature. If you don't use it, the extra CSS variables won't be included in the production style sheet.
-- Some children can be excluded from the color inversion, see ["skip color inversion on a child"](#skip-color-inversion-on-a-child) section.
+- Some children can be excluded from the color inversion, see ["skip color inversion on a child"](#skip-inversion-on-a-child) section.
 
 ### Trade-offs
 

docs/pages/experiments/base/components-gallery.tsx

@@ -143,7 +143,7 @@ export default function ComponentsGallery() {
   const [exited, setExited] = React.useState(true);
   const nodeRef = React.useRef(null);
 
-  const handleClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }
@@ -208,7 +208,7 @@ export default function ComponentsGallery() {
     setCopySnackbarOpen(true);
   }
 
-  const handleCopyClose = (_: any, reason: SnackbarCloseReason) => {
+  const handleCopyClose = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/src/components/productBaseUI/BaseUIThemesDemo.tsx

@@ -785,7 +785,7 @@ export default function BaseUIThemesDemo() {
   // Snackbar
   const [openSnackbar, setOpenSnackbar] = React.useState(false);
 
-  const handleCloseSnackbar = (_: any, reason: SnackbarCloseReason) => {
+  const handleCloseSnackbar = (_: any, reason?: SnackbarCloseReason) => {
     if (reason === 'clickaway') {
       return;
     }

docs/src/components/showcase/TaskCard.tsx

@@ -33,7 +33,7 @@ export default function TaskCard() {
           </Typography>
         </Box>
         <Box sx={{ my: 'auto' }}>
-          <CodeRounded color="white" />
+          <CodeRounded />
           <Typography fontSize={18} component="div" fontWeight="semiBold" sx={{ lineHeight: 1.4 }}>
             Customize every button and chip instance primary color
           </Typography>

docs/src/modules/brandingTheme.ts

@@ -65,6 +65,22 @@ declare module '@mui/material/Chip' {
   }
 }
 
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+
 // TODO: enable this once types conflict is fixed
 // declare module '@mui/material/Button' {
 //   interface ButtonPropsVariantOverrides {

docs/src/modules/components/ApiPage/table/ClassesTable.tsx

@@ -81,13 +81,13 @@ export default function ClassesTable(props: ClassesTableProps) {
 
             return (
               <tr key={className} id={getHash({ componentName, className: key })}>
-                <td>
+                <td className="algolia-lvl3">
                   <span className="class-name">.{className}</span>
                 </td>
                 {displayClassKeys && (
                   <td>{!isGlobal && <span className="class-key">{key}</span>}</td>
                 )}
-                <td>
+                <td className="algolia-content">
                   <span
                     dangerouslySetInnerHTML={{
                       __html: description || '',

docs/src/modules/components/ApiPage/table/PropertiesTable.tsx

@@ -166,7 +166,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                 key={propName}
                 id={getHash({ componentName, propName, hooksParameters, hooksReturnValue })}
               >
-                <td className="MuiApi-table-item-title">
+                <td className="MuiApi-table-item-title algolia-lvl3">
                   {propName}
                   {isRequired ? '*' : ''}
                   {isOptional ? '?' : ''}
@@ -200,7 +200,7 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                     )}
                   </td>
                 )}
-                <td className="MuiPropTable-description-column">
+                <td className="MuiPropTable-description-column algolia-content">
                   {description && <PropDescription description={description} />}
                   {seeMoreDescription && (
                     <p

examples/pigment-css-nextjs-ts/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+# next-env.d.ts

examples/pigment-css-nextjs-ts/README.md

@@ -0,0 +1,38 @@
+# Pigment CSS - Next.js App Router with TypeScript example project
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app), with TypeScript and Pigment CSS, a zero-runtime CSS-in-JS library, installed.
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/mui/material-ui):
+
+<!-- #default-branch-switch -->
+
+```bash
+curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/pigment-css-nextjs-ts
+cd pigment-css-nextjs-ts
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+or:
+
+<!-- #default-branch-switch -->
+
+[![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts)
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/mui/material-ui/tree/master/examples/pigment-css-nextjs-ts)
+
+## Learn more
+
+To learn more about this example:
+
+- [Pigment CSS documentation](https://github.com/mui/material-ui/blob/master/packages/pigment-react/README.md) - learn more about Pigment CSS features and APIs.
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and APIs.

examples/pigment-css-nextjs-ts/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/pigment-css-nextjs-ts/next.config.js

@@ -0,0 +1,28 @@
+const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin');
+
+// To learn more about theming, visit https://github.com/mui/material-ui/blob/master/packages/zero-runtime/README.md#theming
+const theme = extendTheme({
+  colorSchemes: {
+    light: {
+      palette: {
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        primary: '240 5.9% 10%',
+        border: '240 5.9% 90%',
+      },
+    },
+    dark: {
+      palette: {
+        background: '240 10% 3.9%',
+        foreground: '0 0% 80%',
+        primary: '0 0% 98%',
+        border: '240 3.7% 15.9%',
+      },
+    },
+  },
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = withPigment(nextConfig, { theme });

examples/pigment-css-nextjs-ts/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "pigment-css-nextjs-ts",
+  "version": "5.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "post-update": "echo \"codesandbox preview only, need an update\" && pnpm update --latest"
+  },
+  "dependencies": {
+    "@pigment-css/react": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "next": "latest"
+  },
+  "devDependencies": {
+    "@pigment-css/nextjs-plugin": "latest",
+    "@types/node": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest",
+    "eslint": "latest",
+    "eslint-config-next": "latest",
+    "typescript": "latest"
+  }
+}