@mui/lab 7.0.1-beta.19 → 7.0.1-beta.20

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.3.6
+
+<!-- generated comparing v7.3.5..master -->
+
+_Dec 3, 2025_
+
+A big thanks to the 22 contributors who made this release possible.
+
+### @mui/material@7.3.6
+
+- [Accordion] Move properties to the AccordionOwnProps interface (#47348) @Aleksan4e3
+- [Autocomplete] Remove unnecessary `filterSelectedOptions` dependency from `syncHighlightedIndex` useCallback (#47378) @ZeeshanTamboli
+- [Autocomplete] Fix input caret not showing when focusing after chip navigation (#47249) @vrachuri28
+- [Autocomplete] Fix ArrowLeft crash when value is not set with single-value rendering (#47214) @rithik56
+- [Button] Fix running formAction when passed (#47185) @sai6855
+- [Chip] Remove leftover closing parenthesis in CSS class key (#47345) @ZeeshanTamboli
+- [ListItem] Add `secondaryAction` slot to `ListItem` (#47399) @sai6855
+- [NumberField] Fix scroll behavior (#47397) @oliviertassinari
+- [Select] Fix keyboard navigation while rendering in shadow DOM (#47380) @xBlizZer
+- [Select] Fix cannot pass certain event handlers (#47366) @ZeeshanTamboli
+- [Slider] Accept readonly array for `marks` prop (#47370) @pcorpet
+- [Snackbar] Avoid unnecessary `ownerState` spread into `useSnackbar` (#47373) @ZeeshanTamboli
+- [TextField] Allow custom props in slot props via TS module augmentation (#47367) @kumarvishwajeettrivedi
+- [Tabs] Fix Arrow key navigation failing when component is rendered in shadow DOM (#47178) @sai6855
+- Fix typings for theme `applyStyles` with custom color schemes (#47242) @akankshahu
+
+### @mui/system@7.3.6
+
+- Fix unwanted attribute on DOM from InitColorSchemeScript `class` attribute (#47200) @siriwatknp
+
+### @mui/lab@7.3.6
+
+- [Masonry] Fix layout flicker and single column issue (#43903) @Fanzzzd
+
+### Docs
+
+- Fix default theme viewer styling (#47400) @sai6855
+- Remove repetitive words (#47384) @rifeplight
+- Fix link to Portal API docs (#47383) @ZeeshanTamboli
+- Remove mentions of MUI Base from Material UI docs (#47324) @mapache-salvaje
+- Update CSP guidance (#47342) @rossdakin
+- Fix pathname collision in LLMs docs generator (#47209) @siriwatknp
+- Resolve redirected urls to their final location (#47193) @Janpot
+- Document correct default values for `elevation` and `square` props (#47261) @Ad1tya-007
+- Fix display of colors in dark mode in palette customization page (#47403) @sai6855
+- Add Number Field component page (#47165) @siriwatknp
+- Fix mcp schema change (#47171) @sai6855
+
+### Core
+
+- [code-infra] Add types for markdown loader (#47075) @Janpot
+- [code-infra] Build test utils with code-infra pipeline (#47405) @Janpot
+- [code-infra] Vitest test migration (#44325) @JCQuintas
+- [code-infra] Revive docs bundle analyzer (#47401) @Janpot
+- [code-infra] Update tests from vitest PR (#47344) @Janpot
+- [code-infra] Use util from code-infra to fetch changelogs (#47350) @brijeshb42
+- [code-infra] Enable production sourcemaps (#47352) @Janpot
+- [code-infra] Use code-infra orb utils in circle ci (#47179) @brijeshb42
+- [code-infra] Use `next/font` for local fonts (#47351) @Janpot
+- [code-infra] New broken links checker (#47113) @Janpot
+- [code-infra] Remove profiler (#47258) @Janpot
+- [code-infra] Api doc optimizations (#47188) @Janpot
+- [code-infra] Increase type check parallelism (#47192) @Janpot
+- [code-infra] Remove deprecated baseUrl (#47210) @Janpot
+- [code-infra] Disable next.js cache (#47233) @Janpot
+- [code-infra] release:build for bundle checker (#47207) @Janpot
+- [code-infra] Parallelize module augmentation tests (#47208) @Janpot
+- [code-infra] Fix next.js parallelism at 2 for macos runner (#47201) @Janpot
+- [code-infra] Fix bash escape (#46969) @oliviertassinari
+- [code-infra] Utilise eslint cache in CI (#47194) @Janpot
+- [code-infra] Enable Next.js build cache to improve CI performance (#47176) @Copilot
+- [code-infra] Remove `apps` folder (#47183) @Janpot
+- [code-infra] Migrate everything to getStaticProps (#47152) @Janpot
+- [docs-infra] Migrate to `next/font` (#47347) @Janpot
+- [docs-infra] Add some `ComponentLinkHeader` bottom margin (#47328) @Janpot
+- [docs-infra] Exclude a few pages from llms-txt (#47111) @Janpot
+- [examples] Add missing .gitignore to NextJS App Router example (#47251) @shamblonaut
+- [examples] Migrate Next.js `next.config.js` to `next.config.mjs` (#44040) @albarv340
+- [internal] Remove leftover testing-library libraries from `mui-material` package (#47392) @ZeeshanTamboli
+- [internal] Remove unnecessary `clean-css` package from docs (#47314) @ZeeshanTamboli
+- [internal] Fix typo `buidApiDocs` -> `buildApiDocs` (#47235) @Ad1tya-007
+- [internal] Remove unused `@vitest/browser` and `@vitest/coverage-v8` (#47189) @ZeeshanTamboli
+- [test] Update e2e test app (#47252) @Ad1tya-007
+- [test] Fix flaky Virtualize Autocomplete regression test (#47199) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @Ad1tya-007, @akankshahu, @albarv340, @Aleksan4e3, @brijeshb42, @Copilot, @Fanzzzd, @Janpot, @JCQuintas, @kumarvishwajeettrivedi, @mapache-salvaje, @oliviertassinari, @pcorpet, @rifeplight, @rithik56, @rossdakin, @sai6855, @shamblonaut, @siriwatknp, @vrachuri28, @xBlizZer, @ZeeshanTamboli
+
 ## 7.3.5
 
 <!-- generated comparing v7.3.4..master -->

package/Masonry/Masonry.js

@@ -179,18 +179,21 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     isSSR
   };
   const classes = useUtilityClasses(ownerState);
-  const handleResize = React.useCallback(masonryChildren => {
-    if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
+  const handleResize = React.useCallback(() => {
+    if (!masonryRef.current) {
       return;
     }
     const masonry = masonryRef.current;
-    const masonryFirstChild = masonryRef.current.firstChild;
+    const firstVisibleChild = Array.from(masonry.childNodes).find(child => child.nodeType === Node.ELEMENT_NODE && child.dataset.class !== 'line-break' && window.getComputedStyle(child).display !== 'none');
+    if (!firstVisibleChild) {
+      return;
+    }
     const parentWidth = masonry.clientWidth;
-    const firstChildWidth = masonryFirstChild.clientWidth;
+    const firstChildWidth = firstVisibleChild.clientWidth;
     if (parentWidth === 0 || firstChildWidth === 0) {
       return;
     }
-    const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    const firstChildComputedStyle = window.getComputedStyle(firstVisibleChild);
     const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
     const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
     const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
@@ -202,15 +205,16 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
         return;
       }
       const childComputedStyle = window.getComputedStyle(child);
+      if (childComputedStyle.display === 'none') {
+        return;
+      }
       const childMarginTop = parseToNumber(childComputedStyle.marginTop);
       const childMarginBottom = parseToNumber(childComputedStyle.marginBottom);
-      // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
       const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
       if (childHeight === 0) {
         skip = true;
         return;
       }
-      // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
       for (let i = 0; i < child.childNodes.length; i += 1) {
         const nestedChild = child.childNodes[i];
         if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
@@ -227,7 +231,6 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
             nextOrder = 1;
           }
         } else {
-          // find the current shortest column (where the current item will be placed)
           const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
           columnHeights[currentMinColumnIndex] += childHeight;
           const order = currentMinColumnIndex + 1;
@@ -236,43 +239,64 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       }
     });
     if (!skip) {
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
-        setMaxColumnHeight(Math.max(...columnHeights));
-        setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+      queueMicrotask(() => {
+        if (masonryRef.current) {
+          ReactDOM.flushSync(() => {
+            setMaxColumnHeight(Math.max(...columnHeights));
+            setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+          });
+        }
       });
     }
   }, [sequential]);
   (0, _useEnhancedEffect.default)(() => {
-    // IE and old browsers are not supported
-    if (typeof ResizeObserver === 'undefined') {
+    if (typeof ResizeObserver === 'undefined' || typeof MutationObserver === 'undefined') {
       return undefined;
     }
-    let animationFrame;
-    const resizeObserver = new ResizeObserver(() => {
-      // see https://github.com/mui/material-ui/issues/36909
-      animationFrame = requestAnimationFrame(handleResize);
+    const masonry = masonryRef.current;
+    if (!masonry) {
+      return undefined;
+    }
+    let resizeTimeout;
+    const debouncedHandleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(handleResize, 16); // ~60fps
+    };
+    const resizeObserver = new ResizeObserver(debouncedHandleResize);
+    // Observes for child additions or removals to update the layout.
+    const mutationObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
+            resizeObserver.observe(node);
+          }
+        });
+        mutation.removedNodes.forEach(node => {
+          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
+            resizeObserver.unobserve(node);
+          }
+        });
+      });
+      handleResize();
     });
-    if (masonryRef.current) {
-      masonryRef.current.childNodes.forEach(childNode => {
+    Array.from(masonry.childNodes).forEach(childNode => {
+      if (childNode instanceof HTMLElement && childNode.dataset.class !== 'line-break') {
         resizeObserver.observe(childNode);
-      });
-    }
-    return () => {
-      if (animationFrame) {
-        cancelAnimationFrame(animationFrame);
-      }
-      if (resizeObserver) {
-        resizeObserver.disconnect();
       }
+    });
+    mutationObserver.observe(masonry, {
+      childList: true
+    });
+    handleResize();
+    return () => {
+      clearTimeout(resizeTimeout);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
     };
-  }, [columns, spacing, children, handleResize]);
+  }, [handleResize, columns, spacing, children]);
   const handleRef = (0, _useForkRef.default)(ref, masonryRef);
 
-  //  columns are likely to have different heights and hence can start to merge;
-  //  a line break at the end of each column prevents columns from merging
+  // A line break is added to the end of each column to prevent columns from merging.
   const lineBreaks = new Array(numberOfLineBreaks).fill('').map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     "data-class": "line-break",
     style: {

package/esm/Masonry/Masonry.js

@@ -170,18 +170,21 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
     isSSR
   };
   const classes = useUtilityClasses(ownerState);
-  const handleResize = React.useCallback(masonryChildren => {
-    if (!masonryRef.current || !masonryChildren || masonryChildren.length === 0) {
+  const handleResize = React.useCallback(() => {
+    if (!masonryRef.current) {
       return;
     }
     const masonry = masonryRef.current;
-    const masonryFirstChild = masonryRef.current.firstChild;
+    const firstVisibleChild = Array.from(masonry.childNodes).find(child => child.nodeType === Node.ELEMENT_NODE && child.dataset.class !== 'line-break' && window.getComputedStyle(child).display !== 'none');
+    if (!firstVisibleChild) {
+      return;
+    }
     const parentWidth = masonry.clientWidth;
-    const firstChildWidth = masonryFirstChild.clientWidth;
+    const firstChildWidth = firstVisibleChild.clientWidth;
     if (parentWidth === 0 || firstChildWidth === 0) {
       return;
     }
-    const firstChildComputedStyle = window.getComputedStyle(masonryFirstChild);
+    const firstChildComputedStyle = window.getComputedStyle(firstVisibleChild);
     const firstChildMarginLeft = parseToNumber(firstChildComputedStyle.marginLeft);
     const firstChildMarginRight = parseToNumber(firstChildComputedStyle.marginRight);
     const currentNumberOfColumns = Math.round(parentWidth / (firstChildWidth + firstChildMarginLeft + firstChildMarginRight));
@@ -193,15 +196,16 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
         return;
       }
       const childComputedStyle = window.getComputedStyle(child);
+      if (childComputedStyle.display === 'none') {
+        return;
+      }
       const childMarginTop = parseToNumber(childComputedStyle.marginTop);
       const childMarginBottom = parseToNumber(childComputedStyle.marginBottom);
-      // if any one of children isn't rendered yet, masonry's height shouldn't be computed yet
       const childHeight = parseToNumber(childComputedStyle.height) ? Math.ceil(parseToNumber(childComputedStyle.height)) + childMarginTop + childMarginBottom : 0;
       if (childHeight === 0) {
         skip = true;
         return;
       }
-      // if there is a nested image that isn't rendered yet, masonry's height shouldn't be computed yet
       for (let i = 0; i < child.childNodes.length; i += 1) {
         const nestedChild = child.childNodes[i];
         if (nestedChild.tagName === 'IMG' && nestedChild.clientHeight === 0) {
@@ -218,7 +222,6 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
             nextOrder = 1;
           }
         } else {
-          // find the current shortest column (where the current item will be placed)
           const currentMinColumnIndex = columnHeights.indexOf(Math.min(...columnHeights));
           columnHeights[currentMinColumnIndex] += childHeight;
           const order = currentMinColumnIndex + 1;
@@ -227,43 +230,64 @@ const Masonry = /*#__PURE__*/React.forwardRef(function Masonry(inProps, ref) {
       }
     });
     if (!skip) {
-      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
-      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
-      // Related issue - https://github.com/facebook/react/issues/24331
-      ReactDOM.flushSync(() => {
-        setMaxColumnHeight(Math.max(...columnHeights));
-        setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+      queueMicrotask(() => {
+        if (masonryRef.current) {
+          ReactDOM.flushSync(() => {
+            setMaxColumnHeight(Math.max(...columnHeights));
+            setNumberOfLineBreaks(currentNumberOfColumns > 0 ? currentNumberOfColumns - 1 : 0);
+          });
+        }
       });
     }
   }, [sequential]);
   useEnhancedEffect(() => {
-    // IE and old browsers are not supported
-    if (typeof ResizeObserver === 'undefined') {
+    if (typeof ResizeObserver === 'undefined' || typeof MutationObserver === 'undefined') {
       return undefined;
     }
-    let animationFrame;
-    const resizeObserver = new ResizeObserver(() => {
-      // see https://github.com/mui/material-ui/issues/36909
-      animationFrame = requestAnimationFrame(handleResize);
+    const masonry = masonryRef.current;
+    if (!masonry) {
+      return undefined;
+    }
+    let resizeTimeout;
+    const debouncedHandleResize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(handleResize, 16); // ~60fps
+    };
+    const resizeObserver = new ResizeObserver(debouncedHandleResize);
+    // Observes for child additions or removals to update the layout.
+    const mutationObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        mutation.addedNodes.forEach(node => {
+          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
+            resizeObserver.observe(node);
+          }
+        });
+        mutation.removedNodes.forEach(node => {
+          if (node instanceof HTMLElement && node.dataset.class !== 'line-break') {
+            resizeObserver.unobserve(node);
+          }
+        });
+      });
+      handleResize();
     });
-    if (masonryRef.current) {
-      masonryRef.current.childNodes.forEach(childNode => {
+    Array.from(masonry.childNodes).forEach(childNode => {
+      if (childNode instanceof HTMLElement && childNode.dataset.class !== 'line-break') {
         resizeObserver.observe(childNode);
-      });
-    }
-    return () => {
-      if (animationFrame) {
-        cancelAnimationFrame(animationFrame);
-      }
-      if (resizeObserver) {
-        resizeObserver.disconnect();
       }
+    });
+    mutationObserver.observe(masonry, {
+      childList: true
+    });
+    handleResize();
+    return () => {
+      clearTimeout(resizeTimeout);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
     };
-  }, [columns, spacing, children, handleResize]);
+  }, [handleResize, columns, spacing, children]);
   const handleRef = useForkRef(ref, masonryRef);
 
-  //  columns are likely to have different heights and hence can start to merge;
-  //  a line break at the end of each column prevents columns from merging
+  // A line break is added to the end of each column to prevent columns from merging.
   const lineBreaks = new Array(numberOfLineBreaks).fill('').map((_, index) => /*#__PURE__*/_jsx("span", {
     "data-class": "line-break",
     style: {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v7.0.1-beta.19
+ * @mui/lab v7.0.1-beta.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/lab v7.0.1-beta.19
+ * @mui/lab v7.0.1-beta.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mui/lab",
   "//": "version should be 'alpha' at all time",
-  "version": "7.0.1-beta.19",
+  "version": "7.0.1-beta.20",
   "author": "MUI Team",
   "description": "Laboratory for new Material UI modules.",
   "keywords": [
@@ -30,9 +30,9 @@
     "@babel/runtime": "^7.28.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/system": "^7.3.5",
-    "@mui/types": "^7.4.8",
-    "@mui/utils": "^7.3.5"
+    "@mui/system": "^7.3.6",
+    "@mui/types": "^7.4.9",
+    "@mui/utils": "^7.3.6"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -40,8 +40,8 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material": "^7.3.5",
-    "@mui/material-pigment-css": "^7.3.5"
+    "@mui/material": "^7.3.6",
+    "@mui/material-pigment-css": "^7.3.6"
   },
   "peerDependenciesMeta": {
     "@types/react": {