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

…gen-css-vars-order
mui · Sep 17, 2024 · 054986f · 054986f
2 parents 9085e7c + f4a9848
commit 054986f
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 395 deletions.
diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -32,7 +32,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "postcss": "^8.4.47",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.4.2",
+    "vite": "5.4.5",
     "vite-plugin-pages": "^0.32.3",
     "vite-plugin-node-polyfills": "0.22.0"
   },

diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { VirtuosoGrid } from 'react-virtuoso';
 import { styled } from '@mui/material/styles';
 import MuiPaper from '@mui/material/Paper';
 import copy from 'clipboard-copy';
@@ -94,21 +93,20 @@ function selectNode(node) {
   selection.addRange(range);
 }
 
+const iconWidth = 35;
+
 const StyledIcon = styled('span')(({ theme }) => ({
   display: 'inline-flex',
   flexDirection: 'column',
   color: theme.palette.text.secondary,
   margin: '0 4px',
   '& > div': {
-    display: 'flex',
-  },
-  '& > div > *': {
     flexGrow: 1,
     fontSize: '.6rem',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     textAlign: 'center',
-    width: 0,
+    width: `calc(${iconWidth}px + ${theme.spacing(2)} * 2 + 2px)`,
   },
 }));
 
@@ -117,6 +115,7 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   cursor: 'pointer',
   color: theme.palette.text.primary,
   border: '1px solid transparent',
+  fontSize: iconWidth,
   borderRadius: '12px',
   transition: theme.transitions.create(['background-color', 'box-shadow'], {
     duration: theme.transitions.duration.shortest,
@@ -129,56 +128,64 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
   },
 }));
 
-const ListWrapper = React.forwardRef(({ style, children, ...props }, ref) => {
+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,
+    });
+  }
+};
+
+function handleLabelClick(event) {
+  selectNode(event.currentTarget);
+}
+
+function Icon(props) {
+  const { icon, onOpenClick } = props;
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   return (
-    <div
-      ref={ref}
-      {...props}
-      style={{ display: 'flex', flexWrap: 'wrap', ...style }}
+    <StyledIcon
+      key={icon.importName}
+      onClick={handleIconClick}
+      data-icon-theme={icon.theme}
+      data-icon-name={icon.name}
     >
-      {children}
-    </div>
+      <StyledSvgIcon
+        component={icon.Component}
+        tabIndex={-1}
+        onClick={onOpenClick}
+        title={icon.importName}
+      />
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
+      <div onClick={handleLabelClick}>{icon.importName}</div>
+      {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+    </StyledIcon>
   );
-});
+}
 
-function Icon(handleOpenClick) {
-  return function itemContent(_, icon) {
-    const handleIconClick = () => {
-      if (Math.random() < 0.1) {
-        window.gtag('event', 'material-icons', {
-          eventAction: 'click',
-          eventLabel: icon.name,
-        });
-        window.gtag('event', 'material-icons-theme', {
-          eventAction: 'click',
-          eventLabel: icon.theme,
-        });
-      }
-    };
+const Icons = React.memo(function Icons(props) {
+  const { icons, handleOpenClick } = props;
 
-    const handleLabelClick = (event) => {
-      selectNode(event.currentTarget);
-    };
+  return (
+    <div>
+      {icons.map((icon) => (
+        <Icon key={icon.importName} icon={icon} onOpenClick={handleOpenClick} />
+      ))}
+    </div>
+  );
+});
 
-    return (
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-      <StyledIcon key={icon.importName} onClick={handleIconClick}>
-        <StyledSvgIcon
-          component={icon.Component}
-          fontSize="large"
-          tabIndex={-1}
-          onClick={handleOpenClick}
-          title={icon.importName}
-        />
-        <div>
-          {/*  eslint-disable-next-line jsx-a11y/no-static-element-interactions -- TODO: a11y */}
-          <div onClick={handleLabelClick}>{icon.importName}</div>
-        </div>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events */}
-      </StyledIcon>
-    );
-  };
-}
+Icons.propTypes = {
+  handleOpenClick: PropTypes.func.isRequired,
+  icons: PropTypes.array.isRequired,
+};
 
 const ImportLink = styled(Link)(({ theme }) => ({
   textAlign: 'right',
@@ -439,7 +446,14 @@ DialogDetails.propTypes = {
   selectedIcon: PropTypes.object,
 };
 
+const Form = styled('form')({
+  position: 'sticky',
+  top: 80,
+});
+
 const Paper = styled(MuiPaper)(({ theme }) => ({
+  position: 'sticky',
+  top: 80,
   display: 'flex',
   alignItems: 'center',
   marginBottom: theme.spacing(2),
@@ -525,30 +539,26 @@ export default function SearchIcons() {
     setSelectedIcon('');
   }, [setSelectedIcon]);
 
-  const deferredQuery = React.useDeferredValue(query);
-  const deferredTheme = React.useDeferredValue(theme);
-
-  const isPending = query !== deferredQuery || theme !== deferredTheme;
-
   const icons = React.useMemo(() => {
-    const keys =
-      deferredQuery === ''
-        ? null
-        : searchIndex.search(deferredQuery, { limit: 3000 });
+    const keys = query === '' ? null : searchIndex.search(query, { limit: 3000 });
     return (keys === null ? allIcons : keys.map((key) => allIconsMap[key])).filter(
-      (icon) => deferredTheme === icon.theme,
+      (icon) => theme === icon.theme,
     );
-  }, [deferredQuery, deferredTheme]);
+  }, [query, theme]);
+
+  const deferredIcons = React.useDeferredValue(icons);
+
+  const isPending = deferredIcons !== icons;
 
   React.useEffect(() => {
     // Keep track of the no results so we can add synonyms in the future.
-    if (deferredQuery.length >= 4 && icons.length === 0) {
+    if (query.length >= 4 && icons.length === 0) {
       window.gtag('event', 'material-icons', {
         eventAction: 'no-results',
-        eventLabel: deferredQuery,
+        eventLabel: query,
       });
     }
-  }, [deferredQuery, icons.length]);
+  }, [query, icons.length]);
 
   const dialogSelectedIcon = useLatest(
     selectedIcon ? allIconsMap[selectedIcon] : null,
@@ -557,7 +567,7 @@ export default function SearchIcons() {
   return (
     <Grid container sx={{ minHeight: 500 }}>
       <Grid item xs={12} sm={3}>
-        <form>
+        <Form>
           <Typography fontWeight={500} sx={{ mb: 1 }}>
             Filter the style
           </Typography>
@@ -578,7 +588,7 @@ export default function SearchIcons() {
               },
             )}
           </RadioGroup>
-        </form>
+        </Form>
       </Grid>
       <Grid item xs={12} sm={9}>
         <Paper>
@@ -603,21 +613,13 @@ export default function SearchIcons() {
         <Typography sx={{ mb: 1 }}>{`${formatNumber(
           icons.length,
         )} matching results`}</Typography>
-        <VirtuosoGrid
-          style={{ height: 500 }}
-          data={icons}
-          components={{ List: ListWrapper }}
-          itemContent={Icon(handleOpenClick)}
-        />
+        <Icons icons={deferredIcons} handleOpenClick={handleOpenClick} />
       </Grid>
-      {/* Temporary fix for Dialog not closing sometimes and Backdrop stuck at opacity 0 (see issue https://github.com/mui/material-ui/issues/32286). One disadvantage is that the closing animation is not applied. */}
-      {selectedIcon ? (
-        <DialogDetails
-          open={!!selectedIcon}
-          selectedIcon={dialogSelectedIcon}
-          handleClose={handleClose}
-        />
-      ) : null}
+      <DialogDetails
+        open={!!selectedIcon}
+        selectedIcon={dialogSelectedIcon}
+        handleClose={handleClose}
+      />
     </Grid>
   );
 }
diff --git a/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md b/docs/data/material/migration/upgrade-to-v6/migrating-to-pigment-css.md
@@ -255,7 +255,7 @@ Finally, update the `typography.fontFamily` value with the variable created in t
  };
 ```
 
-### Typescript
+### TypeScript
 
 If you are using TypeScript, you need to extend the Pigment CSS theme types with Material UI `Theme`.
 Add the following code to a file that is included in your `tsconfig.json`:

diff --git a/docs/mui-vale.zip b/docs/mui-vale.zip
diff --git a/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml b/docs/mui-vale/styles/MUI/CorrectReferenceAllCases.yml
@@ -7,10 +7,10 @@ ignorecase: true
 # for more information: https://vale.sh/docs/topics/styles/#substitution
 swap:
   ' api': API
-  'typescript ': TypeScript
+  typescript: TypeScript
   ' ts': TypeScript
-  ' js': JavaScript
   javascript: JavaScript
+  ' js': JavaScript
   ' css ': CSS
   ' html ': HTML
   NPM: npm # https://css-tricks.com/start-sentence-npm/

diff --git a/docs/package.json b/docs/package.json
@@ -54,7 +54,7 @@
     "@mui/x-tree-view": "7.17.0",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^9.7.4",
-    "@toolpad/core": "^0.5.2",
+    "@toolpad/core": "^0.6.0",
     "autoprefixer": "^10.4.20",
     "autosuggest-highlight": "^3.3.4",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -81,7 +81,7 @@
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.4.7",
     "material-ui-popup-state": "^5.1.2",
-    "next": "^14.2.8",
+    "next": "^14.2.11",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.47",
@@ -101,7 +101,7 @@
     "react-spring": "^9.7.4",
     "react-swipeable-views": "^0.14.0",
     "react-transition-group": "^4.4.5",
-    "react-virtuoso": "^4.10.3",
+    "react-virtuoso": "^4.10.4",
     "react-window": "^1.8.10",
     "rimraf": "^6.0.1",
     "styled-components": "^6.1.13",

diff --git a/package.json b/package.json
@@ -162,7 +162,7 @@
     "eslint-plugin-material-ui": "workspace:^",
     "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-b6997ec-20240910",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-75b9fd4-20240912",
     "eslint-plugin-react-hooks": "^4.6.2",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
@@ -179,7 +179,7 @@
     "lodash": "^4.17.21",
     "markdownlint-cli2": "^0.13.0",
     "mocha": "^10.7.3",
-    "nx": "^19.7.0",
+    "nx": "^19.7.3",
     "nyc": "^17.0.0",
     "piscina": "^4.6.1",
     "postcss-styled-syntax": "^0.6.4",

diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
@@ -5,7 +5,7 @@
   "description": "Custom eslint rules for Material UI.",
   "main": "src/index.js",
   "dependencies": {
-    "emoji-regex": "^10.3.0"
+    "emoji-regex": "^10.4.0"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.12",

diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
@@ -48,7 +48,7 @@
     "@types/node": "^20.16.5",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.3.4",
-    "next": "^14.2.8",
+    "next": "^14.2.11",
     "react": "^18.3.1"
   },
   "peerDependencies": {

diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
@@ -58,7 +58,7 @@
     "chai": "^4.5.0",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
-    "next": "^14.2.8",
+    "next": "^14.2.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sinon": "^18.0.1"

diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
@@ -43,7 +43,7 @@
     "@emotion/react": "^11.13.3",
     "@emotion/server": "^11.11.0",
     "@types/react": "^18.3.4",
-    "next": "14.2.8",
+    "next": "14.2.11",
     "react": "^18.3.1"
   },
   "peerDependencies": {