Merge branch 'master' of github.com:mui-org/material-ui into fix/tool…

…pad-core-docs

.eslintrc.js

@@ -240,6 +240,8 @@ module.exports = {
  'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
  'lines-around-directive': 'off',
  ...(ENABLE_REACT_COMPILER_PLUGIN ? { 'react-compiler/react-compiler': 'error' } : {}),
+ // Prevent the use of `e` as a shorthand for `event`, `error`, etc.
+ 'id-denylist': ['error', 'e'],
  },
  overrides: [
  {

.gitignore

@@ -43,3 +43,4 @@ docs/public/static/blog/feed/*
 .nx/cache
 .nx/workspace-data
 screenshots
+packed

CHANGELOG.old.md

@@ -823,7 +823,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - [blog] Add post about upcoming plans for Base UI (#40882) @danilo-leal
 - [core] Simplify CodeSandbox reproduction @oliviertassinari
 - [core] Missing redirection @oliviertassinari
-- [core] Export functions from `copyFiles` script to reuse in MUI X repo (#40970) @cherniavskii
+- [core] Export functions from `copyFiles` script to reuse in MUI X repo (#40970) @cherniavskii
 - [core] Avoid variable shorthands @oliviertassinari
 - [docs-infra] Fix search icon issue (#40957) @oliviertassinari
 - [docs-infra] Ignore classes tagged with `@ignore` (#41009) @cherniavskii
@@ -1013,7 +1013,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - &#8203;<!-- 54 -->[website] Move `React Engineer - X` into the future roles section (#40867) @DanailH
 - &#8203;<!-- 52 -->[material-ui][test][Alert] Add action, icon, and iconMapping tests (#40682) @DiegoAndai
 - &#8203;<!-- 45 -->[blog] Lint duplicate h1 on the page (#40835) @oliviertassinari
-- &#8203;<!-- 44 -->[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas
+- &#8203;<!-- 44 -->[blog] MUI X v7 beta announcement blogpost (#40784) @joserodolfofreitas
 - &#8203;<!-- 43 -->[code-infra] Remove custom TS installation script (#40636) @michaldudak
 - &#8203;<!-- 42 -->[code-infra] Correct API Docs Builder dependencies (#40775) @michaldudak
 - &#8203;<!-- 41 -->[code-infra] Migrate to prettier async APIs (#40668) @Janpot

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

@@ -27,7 +27,7 @@
  "@types/node": "^20.16.5",
  "@types/react": "^18.3.4",
  "@types/react-dom": "^18.3.0",
- "eslint": "^8.57.0",
+ "eslint": "^8.57.1",
  "typescript": "^5.5.4"
  },
  "nx": {

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

@@ -17,7 +17,7 @@
  "@mui/system": "workspace:^",
  "@mui/utils": "workspace:^",
  "clsx": "^2.1.1",
- "playwright": "^1.47.1",
+ "playwright": "^1.47.2",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-error-boundary": "^4.0.13",
@@ -34,7 +34,7 @@
  "@vitejs/plugin-react": "^4.3.1",
  "postcss": "^8.4.47",
  "postcss-combine-media-query": "^1.0.1",
- "vite": "5.4.6",
+ "vite": "5.4.8",
  "vite-plugin-node-polyfills": "0.22.0",
  "vite-plugin-pages": "^0.32.3"
  },

apps/pigment-css-vite-app/src/pages/fixtures/index.tsx

@@ -17,9 +17,7 @@ export default function Layout() {
  );
 
  const demo = new URLSearchParams(location.search).get('demo');
- const fixturesRoutes = (matchedRoute?.route.children ?? []).filter(
- (item) => !!item.path && item.path !== 'index.test',
- );
+ const fixturesRoutes = (matchedRoute?.route.children ?? []).filter((item) => !!item.path);
 
  const demosRoutes = (materialUIRoute?.route.children ?? []).filter(
  (item) => !!item.path && !item.path.includes('react-pagination'),

apps/pigment-css-vite-app/vite.config.ts

@@ -43,8 +43,10 @@ export default defineConfig({
  sourceMap: true,
  displayName: true,
  }),
- Pages(),
  splitVendorChunkPlugin(),
+ Pages({
+ exclude: ['**/*.test.*'],
+ }),
  nodePolyfills(),
  ],
 });

benchmark/package.json

@@ -25,7 +25,7 @@
  "express": "^4.19.2",
  "fs-extra": "^11.2.0",
  "jss": "^10.10.0",
- "playwright": "^1.47.1",
+ "playwright": "^1.47.2",
  "prop-types": "^15.8.1",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
@@ -37,6 +37,6 @@
  "styled-components": "^6.1.13",
  "styled-system": "^5.1.5",
  "theme-ui": "^0.16.2",
- "webpack": "^5.94.0"
+ "webpack": "^5.95.0"
  }
 }

docs/data/joy/components/accordion/accordion.md

@@ -10,6 +10,8 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
 
 <p class="description">Accordions let users show and hide sections of related content on a page.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Joy UI provides four accordion-related components:

docs/data/joy/components/aspect-ratio/aspect-ratio.md

@@ -8,6 +8,8 @@ components: AspectRatio
 
 <p class="description">The Aspect Ratio component resizes its contents to match the desired ratio.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Aspect Ratio is a wrapper component for quickly resizing content to conform to your preferred ratio of width to height.

docs/data/joy/components/card/card.md

@@ -9,6 +9,8 @@ githubLabel: 'component: card'
 
 <p class="description">A card is a generic container for grouping related UI elements and content.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 The Joy UI Card component includes several complementary utility components to handle various use cases:

docs/data/joy/components/drawer/drawer.md

@@ -9,6 +9,8 @@ githubLabel: 'component: drawer'
 
 <p class="description">Navigation drawers provide quick access to other areas of an app without taking the user away from their current location.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Drawers are commonly used as menus for desktop navigation, and as dialogs on mobile devices (similar to [Apple's sheets](https://developer.apple.com/design/human-interface-guidelines/sheets)).

docs/data/joy/components/grid/grid.md

@@ -9,6 +9,8 @@ githubLabel: 'component: Grid'
 
 <p class="description">Grid acts as a generic container, wrapping around the elements to be arranged.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 The Grid component, based on a 12-column grid layout, creates visual consistency between layouts while allowing flexibility across a wide variety of designs.

docs/data/joy/components/list/ExampleNavigationMenu.js

@@ -51,15 +51,15 @@ const useRovingIndex = (options) => {
  }
  },
  tabIndex: activeIndex === index ? 0 : -1,
- onKeyDown: (e) => {
+ onKeyDown: (event) => {
  if (Number.isInteger(activeIndex)) {
- if (e.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
+ if (event.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
  focusNext();
  }
- if (e.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
+ if (event.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
  focusPrevious();
  }
- handlers.onKeyDown?.(e, { setActiveIndex });
+ handlers.onKeyDown?.(event, { setActiveIndex });
  }
  },
  onClick: () => {

docs/data/joy/components/list/ExampleNavigationMenu.tsx

@@ -64,15 +64,15 @@ const useRovingIndex = (options?: Options) => {
  }
  },
  tabIndex: activeIndex === index ? 0 : -1,
- onKeyDown: (e: React.KeyboardEvent<HTMLAnchorElement>) => {
+ onKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => {
  if (Number.isInteger(activeIndex)) {
- if (e.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
+ if (event.key === (vertical ? 'ArrowDown' : 'ArrowRight')) {
  focusNext();
  }
- if (e.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
+ if (event.key === (vertical ? 'ArrowUp' : 'ArrowLeft')) {
  focusPrevious();
  }
- handlers.onKeyDown?.(e, { setActiveIndex });
+ handlers.onKeyDown?.(event, { setActiveIndex });
  }
  },
  onClick: () => {

docs/data/joy/components/list/list.md

@@ -9,6 +9,8 @@ githubLabel: 'component: list'
 
 <p class="description">Lists are organizational tools that enhance the readability and organization of content.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Lists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images.

docs/data/joy/components/menu/menu.md

@@ -11,6 +11,8 @@ unstyled: /base-ui/react-menu/
 
 <p class="description">Menus display a list of choices on temporary surfaces.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Joy UI provides five menu-related components:

docs/data/joy/components/select/SelectClearable.js

@@ -12,7 +12,7 @@ export default function SelectClearable() {
  action={action}
  value={value}
  placeholder="Favorite pet…"
- onChange={(e, newValue) => setValue(newValue)}
+ onChange={(event, newValue) => setValue(newValue)}
  {...(value && {
  // display the button and remove select indicator
  // when user has selected a value

docs/data/joy/components/select/SelectClearable.tsx

@@ -12,7 +12,7 @@ export default function SelectClearable() {
  action={action}
  value={value}
  placeholder="Favorite pet…"
- onChange={(e, newValue) => setValue(newValue)}
+ onChange={(event, newValue) => setValue(newValue)}
  {...(value && {
  // display the button and remove select indicator
  // when user has selected a value

docs/data/joy/components/select/SelectUsage.js

@@ -48,7 +48,7 @@ export default function SelectUsage() {
  defaultListboxOpen
  action={action}
  value={value}
- onChange={(e, newValue) => setValue(newValue)}
+ onChange={(event, newValue) => setValue(newValue)}
  sx={{ minWidth: 160, mb: 20 }}
  >
  <Option value="react">React</Option>

docs/data/joy/components/skeleton/skeleton.md

@@ -9,6 +9,8 @@ components: Skeleton, AspectRatio, Avatar, Typography
 
 <p class="description">Skeletons are preview placeholders for components that haven't loaded yet, reducing load-time frustration.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Skeletons provide users an expectation of what the UI looks like while data loads.

docs/data/joy/components/stepper/stepper.md

@@ -10,6 +10,8 @@ materialDesign: https://m1.material.io/components/steppers.html
 
 <p class="description">Steppers convey progress through numbered steps. It provides a wizard-like workflow.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Stepper displays progress through a sequence of logical and numbered steps. It support horizontal and vertical orientation for desktop and mobile viewports.

docs/data/joy/components/toggle-button-group/toggle-button-group.md

@@ -9,6 +9,8 @@ components: ToggleButtonGroup, Button, IconButton
 
 <p class="description">A group of mutually exclusive buttons.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 Toggle Button Group provides a way to get mutually exclusive actions closer together by sharing a common container.

docs/data/joy/components/typography/typography.md

@@ -9,6 +9,8 @@ githubLabel: 'component: Typography'
 
 <p class="description">The Typography component helps present design and content clearly and efficiently.</p>
 
+{{"component": "@mui/docs/ComponentLinkHeader"}}
+
 ## Introduction
 
 The Typography component helps maintain a consistent design by providing a limited set of values to choose from and convenient props for building common designs faster.

docs/data/joy/getting-started/templates/messages/components/MessageInput.tsx

@@ -33,8 +33,8 @@ export default function MessageInput(props: MessageInputProps) {
  placeholder="Type something here…"
  aria-label="Message"
  ref={textAreaRef}
- onChange={(e) => {
- setTextAreaValue(e.target.value);
+ onChange={(event) => {
+ setTextAreaValue(event.target.value);
  }}
  value={textAreaValue}
  minRows={3}

docs/data/material/components/material-icons/SearchIcons.js

@@ -128,19 +128,15 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
  },
 }));
 
-const handleIconClick = (event) => {
- const { iconName, iconTheme } = event.currentTarget.dataset;
-
- if (Math.random() < 0.1) {
- window.gtag('event', 'material-icons', {
- eventAction: 'click',
- eventLabel: iconName,
- });
- window.gtag('event', 'material-icons-theme', {
- eventAction: 'click',
- eventLabel: iconTheme,
- });
- }
+const handleIconClick = (icon) => () => {
+ window.gtag('event', 'material-icons', {
+ eventAction: 'click',
+ eventLabel: icon.name,
+ });
+ window.gtag('event', 'material-icons-theme', {
+ eventAction: 'click',
+ eventLabel: icon.theme,
+ });
 };
 
 function handleLabelClick(event) {
@@ -153,9 +149,7 @@ function Icon(props) {
  return (
  <StyledIcon
  key={icon.importName}
- onClick={handleIconClick}
- data-icon-theme={icon.theme}
- data-icon-name={icon.name}
+ onClick={Math.random() < 0.1 ? handleIconClick(icon) : null}
  >
  <StyledSvgIcon
  component={icon.Component}

docs/data/material/experimental-api/pigment-css/pigment-css.md

@@ -62,7 +62,7 @@ Next, head over to your config file and import the `withPigment` plugin:
 // next.config.js
 import { withPigment } from '@pigment-css/nextjs-plugin';
 
-export default withPigment({ nextConfig });
+export default withPigment(nextConfig);
 ```
 
 ```ts Vite
@@ -287,7 +287,6 @@ Pigment CSS uses the `prefers-color-scheme` media query by default to switch be
 ```js
 const colorScheme = css`
  background-color: ${({ theme }) => theme.colorSchemes.dark.colors.background};
-
  color: ${({ theme }) => theme.colorSchemes.dark.colors.foreground};
 
  @media (prefers-color-scheme: light) {
@@ -299,14 +298,14 @@ const colorScheme = css`
 
 You can also customize the behavior by providing a `getSelector` function:
 
-```js
-  extendTheme({
-  colorSchemes: {
-  light: { ... },
-  dark: { ... },
-  },
-+  getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
-  });
+```diff
+ extendTheme({
+ colorSchemes: {
+ light: { ... },
+ dark: { ... },
+ },
++ getSelector: (colorScheme) => colorScheme ? `.theme-${colorScheme}` : ':root',
+ });
 ```
 
 ### The sx prop
@@ -324,7 +323,7 @@ The `sx` prop works with all Material UI components as well as HTML elements an
 
 If you use the `sx` prop on an HTML element, you'll need to augment the `HTMLAttributes` interface:
 
-```js
+```ts
 type Theme = {
  // your theme type
 };
@@ -335,7 +334,9 @@ declare global {
  sx?:
  | React.CSSProperties
  | ((theme: Theme) => React.CSSProperties)
- | ReadonlyArray<React.CSSProperties | ((theme: Theme) => React.CSSProperties)>;
+ | ReadonlyArray<
+ React.CSSProperties | ((theme: Theme) => React.CSSProperties)
+ >;
  }
  }
 }

docs/data/material/getting-started/templates/dashboard/Dashboard.js

@@ -46,7 +46,7 @@ export default function Dashboard(props) {
  sx={{
  alignItems: 'center',
  mx: 3,
- pb: 10,
+ pb: 5,
  mt: { xs: 8, md: 0 },
  }}
  >

docs/data/material/getting-started/templates/dashboard/Dashboard.tsx

@@ -49,7 +49,7 @@ export default function Dashboard(props: { disableCustomTheme?: boolean }) {
  sx={{
  alignItems: 'center',
  mx: 3,
- pb: 10,
+ pb: 5,
  mt: { xs: 8, md: 0 },
  }}
  >