Merge branch 'master' into revise-material-ui-breakpoint

.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/[email protected]`, `@pigment-css/[email protected]`, `@pigment-css/[email protected]`, & `@pigment-css/[email protected]`
+
+- This is the first public release of our new zero-runtime CSS-in-JS library, Pigment CSS.
+
 ### `@mui/[email protected]`
 
 - &#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/notifications.json

@@ -1,22 +1,22 @@
 [
   {
     "id": 68,
-    "title": "<b>Check out Base UI today</b> 💥",
+    "title": "Check out Base UI today 💥",
     "text": "Love Material UI, but don't need Material Design? Try Base UI, the new \"unstyled\" alternative. <a style=\"color: inherit;\" data-ga-event-category=\"Blog\" data-ga-event-action=\"notification\" data-ga-event-label=\"introducing-base-ui\" href=\"/blog/introducing-base-ui/\">Read more in this announcement</a>."
   },
   {
     "id": 78,
-    "title": "<b>MUI X v6.18.x and the latest improvements before the next major</b>",
+    "title": "MUI X v6.18.x and the latest improvements before the next major",
     "text": "New stable components, polished features, better performance and more. Check out the details in our <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-end-v6\" href=\"https://mui.com/blog/mui-x-end-v6-features/\">recent blog post</a>."
   },
   {
     "id": 79,
-    "title": "<b>A new Developer Survey is open</b>",
+    "title": "A new Developer Survey is open",
     "text": "Take a few minutes to share your feedback and expectations in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-survey\" href=\"https://tally.so/r/3Ex4PN?source=docs-notification\">Developer Survey</a>."
   },
   {
     "id": 80,
-    "title": "<b>MUI X v7.0.0-beta.0</b>",
+    "title": "MUI X v7.0.0-beta.0",
     "text": "Featuring new components and multiple enhancements for both developers and end-users. Discover all the specifics in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v7-beta\" href=\"https://mui.com/blog/mui-x-v7-beta/\">announcement blog post</a>."
   }
 ]

docs/pages/blog/base-ui-2024-plans.md

@@ -10,7 +10,7 @@ card: true
 The [story of Base UI](/blog/introducing-base-ui/) began several years ago—long before headless React component libraries skyrocketed in popularity—when we started to imagine a world in which Material UI could exist without Material Design.
 
 We're super excited to share that this dream is becoming a reality!
-This year will see a lot of investment in Base UI as we expand the team ([we're hiring!](/careers/staff-ui-engineer-base-ui/)) and focus hard on a stable release (tentatively planned for late 2024), which will come full of new components, features, and improvements.
+This year will see a lot of investment in Base UI as we expand the team and focus hard on a stable release (tentatively planned for late 2024), which will come full of new components, features, and improvements.
 
 Let's walk through some of the things we're cooking up.
 
@@ -97,11 +97,9 @@ To acknowledge that Base UI has the potential to outgrow Material UI, we plan
 The new repository is live－[check it out on GitHub](https://github.com/mui/base-ui)!
 :::
 
-## Join us on the ride
+## Help us on the ride
 
-If you're passionate about extending the web platform with powerful, accessible, unstyled components, [we're hiring UI Engineers](/careers/staff-ui-engineer-base-ui/) to work on the Base UI team and help us accelerate its growth.
-
-Lastly, we'd love to hear your feedback.
+We'd love to hear your feedback.
 The best place to share your ideas and requests is in [the GitHub repository](https://github.com/mui/base-ui/issues).
 Check out the existing issues and add your thoughts, and feel free to open your own issue if you don't see your concerns addressed elsewhere.
 

docs/pages/careers.tsx

@@ -158,12 +158,6 @@ const openRolesData = [
       //     'You will strengthen the MUI X product, build ambitious and complex new features, work on strategic problems, and help grow adoption.',
       //   url: '/careers/react-engineer-x/',
       // },
-      {
-        title: 'Staff UI Engineer — Base UI',
-        description:
-          'Research, build, document, and ship high-quality, unstyled UI components with a focus on a11y.',
-        url: '/careers/staff-ui-engineer-base-ui/',
-      },
     ],
   },
   {

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

docs/src/modules/components/Notifications.js

@@ -231,10 +231,7 @@ export default function Notifications() {
                       <React.Fragment key={message.id}>
                         <ListItem alignItems="flex-start">
                           <Typography gutterBottom>
-                            <span
-                              // eslint-disable-next-line react/no-danger
-                              dangerouslySetInnerHTML={{ __html: message.title }}
-                            />
+                            <b>{message.title}</b>
                           </Typography>
                           <Typography gutterBottom variant="body2" color="text.secondary">
                             <span

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.