@mui/docs 6.0.0-beta.5 → 6.0.0-beta.6

package/Ad/Ad.js

@@ -154,7 +154,7 @@ export function Ad() {
   }
   const ad = React.useContext(AdContext);
   const eventLabel = label ? `${label}-${ad.placement}-${adShape}` : null;
-  const timerAdblock = React.useRef();
+  const timerAdblock = React.useRef(undefined);
   const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.ea-placement') || document.querySelector('#carbonads') || document.querySelector('.carbonads') || carbonOut) {
       if (document.querySelector('#carbonads a') && document.querySelector('#carbonads a')?.getAttribute('href') === 'https://material-ui-next.com/discover-more/backers') {

package/CHANGELOG.md

@@ -1,5 +1,73 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.0-beta.6
+
+<!-- generated comparing v6.0.0-beta.5..next -->
+
+_Aug 16, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/material@6.0.0-beta.6`
+
+- [Autocomplete] Improve the `options` prop description (#41591) @pluvio72
+- [Autocomplete] Remove autocomplete warning regarding value not equal to option (#43314) @ZeeshanTamboli
+- [Divider] Add aria-orientation (#43241) @aarongarciah
+- [IconButton] Fix hover background color behavior (#43271) @mnajdova
+- [TypeScript] Refactor types so they're compatible with upcoming React 19 (#43276) @DiegoAndai
+- [Typography] Replace dot notation color value to work with Pigment CSS (#43288) @siriwatknp
+- [pigment-css] Fix `getSelector` prefers-color-scheme to be object (#43237) @siriwatknp
+- Remove `display="block"` usage to work with Pigment CSS (#43307) @siriwatknp
+
+### `@mui/codemod@6.0.0-beta.6`
+
+- [codemod] Skip sx spread transformation (#43291) @siriwatknp
+
+### `@mui/styles@6.0.0-beta.6`
+
+- [styles] Fix issues reported by eslint-plugin-react-compiler (#43118) @jlewins
+
+### Docs
+
+- [material-ui] Audit and copyedit the v6 migration doc (#43073) @samuelsycamore
+- [material-ui] Fix Material Icon search lag and other improvements (#41330) @anle9650
+- [material-ui][Popover] Fix description and title of hover interaction section (#43290) @ZeeshanTamboli
+- [material-ui] Refine and unify custom template themes (#43220) @zanivan
+- [joy-ui] Fix data grid redirection (#43247) @sai6855
+- [mui-system] Add import statement in docs (#43223) @sai6855
+- Update babel config (#43286) @romgrk
+- Fix outdated references to Materal UI version (#43321) @oliviertassinari
+- Polish migration git diff experience @oliviertassinari
+- Update LTS to match format (#43212) @oliviertassinari
+- Fix Pigment CSS migration content (#43217) @siriwatknp
+
+### Core
+
+- [code-infra] Remove `userEvent` export from `@mui/internal-test-utils` (#43313) @LukasTy
+- [code-infra] Remove unnecessary alias (#43320) @Janpot
+- [code-infra] Fix utils bundle size entrypoint (#43304) @Janpot
+- [core] missing and incorrect scripts (#43209) @Jay-Karia
+- [core] Set Node 14 as minimum version in all browserslist envs (#43326) @aarongarciah
+- [core] Add React 19 as peer dependency (#43216) @aarongarciah
+- [core] Pin `eslint-plugin-jsx-a11y` version to 6.7.1 (#43292) @Janpot
+- [core] Update supported Node.js version to 14 (#43315) @Janpot
+- [core] Use fs instead of fs-extra in script utils (#43234) @DiegoAndai
+- [core] Refactor system theme props (#43120) @romgrk
+- [docs-infra] Fix some TS issues for X docs (#43285) @Janpot
+- [docs-infra] Move API pages to TS (#43199) @alexfauquette
+- [docs-infra] Fix broken sandboxes with relative module imports (#42767) @bharatkashyap
+- [docs-infra] Simplify API sections typing (#43128) @alexfauquette
+- [examples] Fix import (#43316) @aarongarciah
+- [examples] Add material-ui-pigment-css for Next.js and Vite (#43065) @siriwatknp
+- [examples] Replace wrong import with `@mui/material/styles` (#43236) @siriwatknp
+- [useMediaQuery] Adapt test implementation for React 19 (#43269) @aarongarciah
+- [test] Update `matchMedia` mocks (#43240) @cherniavskii
+- [test] Remove unnecessary ref param (#43282) @aarongarciah
+- [website] Update showcase to include Toolpad Core (#43226) @bharatkashyap
+- [website] Replace React.MutableRefObject with React.RefObject (#43284) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @bharatkashyap, @cherniavskii, @DiegoAndai, @Janpot, @Jay-Karia, @jlewins, @mnajdova, @oliviertassinari, @pluvio72, @renovate[bot], @romgrk, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 6.0.0-beta.5
 
 <!-- generated comparing v6.0.0-beta.4..next -->
@@ -1842,6 +1910,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
 - [core] Fix TypeScript spelling in changelog @oliviertassinari
 - [core] Fix small detail in the autocomplete demo @oliviertassinari
 - [core] Increase node memory limit on Netlify build (#41111) @michaldudak
+- [core] Fix Netlify build cache issue (#43281) @LukasTy
 - [core][Tooltip] Remove incorrect code comment (#41179) @ZeeshanTamboli
 - [core] Fix missing context display names (#41168) @oliviertassinari
 - [core][base-ui] Remove `@mui/base` dev dependency from Base UI workspace (#41216) @ZeeshanTamboli

package/CodeCopy/useClipboardCopy.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clipboardCopy from 'clipboard-copy';
 export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef();
+  const timeout = React.useRef(undefined);
   React.useEffect(() => () => {
     clearTimeout(timeout.current);
   }, []);

package/node/Ad/Ad.js

@@ -164,11 +164,10 @@ function Ad() {
   }
   const ad = React.useContext(_AdManager.AdContext);
   const eventLabel = label ? `${label}-${ad.placement}-${_AdManager.adShape}` : null;
-  const timerAdblock = React.useRef();
+  const timerAdblock = React.useRef(undefined);
   const checkAdblock = React.useCallback((attempt = 1) => {
     if (document.querySelector('.ea-placement') || document.querySelector('#carbonads') || document.querySelector('.carbonads') || carbonOut) {
-      var _document$querySelect;
-      if (document.querySelector('#carbonads a') && ((_document$querySelect = document.querySelector('#carbonads a')) == null ? void 0 : _document$querySelect.getAttribute('href')) === 'https://material-ui-next.com/discover-more/backers') {
+      if (document.querySelector('#carbonads a') && document.querySelector('#carbonads a')?.getAttribute('href') === 'https://material-ui-next.com/discover-more/backers') {
         setCarbonOut(true);
       }
       setAdblock(false);
@@ -197,7 +196,7 @@ function Ad() {
   } = (0, _AdProvider.useAdConfig)();
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
-    if (Math.random() > (GADisplayRatio != null ? GADisplayRatio : 0.1) || !eventLabel) {
+    if (Math.random() > (GADisplayRatio ?? 0.1) || !eventLabel) {
       return undefined;
     }
     const delay = setTimeout(() => {

package/node/Ad/AdDisplay.js

@@ -51,7 +51,7 @@ function AdDisplay(props) {
   } = (0, _AdProvider.useAdConfig)();
   React.useEffect(() => {
     // Avoid an exceed on the Google Analytics quotas.
-    if (Math.random() > (GADisplayRatio != null ? GADisplayRatio : 0.1) || !ad.label) {
+    if (Math.random() > (GADisplayRatio ?? 0.1) || !ad.label) {
       return;
     }
     window.gtag('event', 'ad', {

package/node/CodeCopy/CodeCopy.js

@@ -34,8 +34,7 @@ function useCodeCopy() {
     },
     onMouseLeave: event => {
       if (rootNode.current === event.currentTarget) {
-        var _rootNode$current$que;
-        (_rootNode$current$que = rootNode.current.querySelector('.MuiCode-copy')) == null || _rootNode$current$que.blur();
+        rootNode.current.querySelector('.MuiCode-copy')?.blur();
         rootNode.current = null;
       }
     },
@@ -71,8 +70,7 @@ function InitCodeCopy() {
         listeners.push(() => elm.removeEventListener('mouseenter', handleMouseEnter));
         const handleMouseLeave = () => {
           if (rootNode.current === elm) {
-            var _rootNode$current$que2;
-            (_rootNode$current$que2 = rootNode.current.querySelector('.MuiCode-copy')) == null || _rootNode$current$que2.blur();
+            rootNode.current.querySelector('.MuiCode-copy')?.blur();
             rootNode.current = null;
           }
         };
@@ -93,16 +91,14 @@ function InitCodeCopy() {
         elm.addEventListener('focusout', handleFocusout);
         listeners.push(() => elm.removeEventListener('focusout', handleFocusout));
         async function handleClick(event) {
-          var _event$currentTarget, _textNode$textContent;
           const trigger = event.currentTarget;
-          const pre = (_event$currentTarget = event.currentTarget) == null ? void 0 : _event$currentTarget.previousElementSibling;
+          const pre = event.currentTarget?.previousElementSibling;
           const textNode = trigger.childNodes[0];
-          textNode.nodeValue = ((_textNode$textContent = textNode.textContent) == null ? void 0 : _textNode$textContent.replace('Copy', 'Copied')) || null;
+          textNode.nodeValue = textNode.textContent?.replace('Copy', 'Copied') || null;
           trigger.dataset.copied = 'true';
           setTimeout(() => {
             if (trigger) {
-              var _textNode$textContent2;
-              textNode.nodeValue = ((_textNode$textContent2 = textNode.textContent) == null ? void 0 : _textNode$textContent2.replace('Copied', 'Copy')) || null;
+              textNode.nodeValue = textNode.textContent?.replace('Copied', 'Copy') || null;
               delete trigger.dataset.copied;
             }
           }, 2000);
@@ -115,13 +111,12 @@ function InitCodeCopy() {
         }
         const btn = elm.querySelector('.MuiCode-copy');
         if (btn) {
-          var _btn$querySelector, _keyNode$textContent;
-          const keyNode = (_btn$querySelector = btn.querySelector('.MuiCode-copyKeypress')) == null ? void 0 : _btn$querySelector.childNodes[1];
+          const keyNode = btn.querySelector('.MuiCode-copyKeypress')?.childNodes[1];
           if (!keyNode) {
             // skip the logic if the btn is not generated from the markdown.
             return;
           }
-          keyNode.textContent = (keyNode == null || (_keyNode$textContent = keyNode.textContent) == null ? void 0 : _keyNode$textContent.replace('$key', key)) || null;
+          keyNode.textContent = keyNode?.textContent?.replace('$key', key) || null;
           btn.addEventListener('click', handleClick);
           listeners.push(() => btn.removeEventListener('click', handleClick));
         }
@@ -137,8 +132,7 @@ function InitCodeCopy() {
   return null;
 }
 function hasNativeSelection(element) {
-  var _window$getSelection;
-  if ((_window$getSelection = window.getSelection()) != null && _window$getSelection.toString()) {
+  if (window.getSelection()?.toString()) {
     return true;
   }
 
@@ -176,7 +170,7 @@ function CodeCopyProvider({
       const copyBtn = rootNode.current.querySelector('.MuiCode-copy');
       const initialEventAction = copyBtn.getAttribute('data-ga-event-action');
       // update the 'data-ga-event-action' on the button to track keyboard interaction
-      copyBtn.dataset.gaEventAction = (initialEventAction == null ? void 0 : initialEventAction.replace('click', 'keyboard')) || 'copy-keyboard';
+      copyBtn.dataset.gaEventAction = initialEventAction?.replace('click', 'keyboard') || 'copy-keyboard';
       copyBtn.click(); // let the GA setup in GoogleAnalytics.js do the job
       copyBtn.dataset.gaEventAction = initialEventAction; // reset the 'data-ga-event-action' back to initial
     });

package/node/CodeCopy/useClipboardCopy.js

@@ -11,7 +11,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
-  const timeout = React.useRef();
+  const timeout = React.useRef(undefined);
   React.useEffect(() => () => {
     clearTimeout(timeout.current);
   }, []);

package/node/ComponentLinkHeader/ComponentLinkHeader.js

@@ -48,7 +48,6 @@ const defaultPackageNames = {
   system: '@mui/system'
 };
 function ComponentLinkHeader(props) {
-  var _ref, _headers$packageName;
   const {
     markdown: {
       headers
@@ -56,7 +55,7 @@ function ComponentLinkHeader(props) {
     design
   } = props;
   const t = (0, _i18n.useTranslate)();
-  const packageName = (_ref = (_headers$packageName = headers.packageName) != null ? _headers$packageName : defaultPackageNames[headers.productId]) != null ? _ref : '@mui/material';
+  const packageName = headers.packageName ?? defaultPackageNames[headers.productId] ?? '@mui/material';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, {
     children: [headers.githubLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {

package/node/HighlightedCodeWithTabs/HighlightedCodeWithTabs.js

@@ -31,98 +31,98 @@ const CodeTabList = exports.CodeTabList = (0, _styles.styled)(_TabsList.TabsList
   variants: [{
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       padding: theme.spacing(1.5, 1)
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       padding: theme.spacing(1)
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       borderTop: 'none'
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       borderTop: '1px solid'
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       borderBottom: 'none'
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       borderBottom: '1px solid'
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       borderTopLeftRadius: 0
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       borderTopLeftRadius: (theme.vars || theme).shape.borderRadius
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       borderTopRightRadius: 0
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       borderTopRightRadius: (theme.vars || theme).shape.borderRadius
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       borderColor: (theme.vars || theme).palette.divider
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       borderColor: (theme.vars || theme).palette.primaryDark[700]
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       backgroundColor: (0, _styles.alpha)(theme.palette.grey[50], 0.2)
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       backgroundColor: (theme.vars || theme).palette.primaryDark[900]
     }
@@ -137,21 +137,21 @@ const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPan
   variants: [{
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       marginTop: -1
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       marginTop: 0
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       '& pre': {
         marginTop: 0
@@ -160,7 +160,7 @@ const CodeTabPanel = exports.CodeTabPanel = (0, _styles.styled)(_TabPanel.TabPan
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       '& pre': {
         marginTop: -1
@@ -196,7 +196,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
   variants: [{
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       border: '1px solid transparent',
       fontSize: theme.typography.pxToRem(13)
@@ -204,7 +204,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       border: 'none',
       fontSize: theme.typography.pxToRem(12)
@@ -212,63 +212,63 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       color: (theme.vars || theme).palette.text.tertiary
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       color: (theme.vars || theme).palette.grey[500]
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       fontFamily: theme.typography.fontFamily
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       fontFamily: theme.typography.fontFamilyCode
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       fontWeight: theme.typography.fontWeightMedium
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       fontWeight: theme.typography.fontWeightBold
     }
   }, {
     props: ({
       ownerState
-    }) => ownerState == null ? void 0 : ownerState.contained,
+    }) => ownerState?.contained,
     style: {
       transition: 'background, color, 100ms ease'
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       transition: 'unset'
     }
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained),
+    }) => !ownerState?.contained,
     style: {
       '&:hover': {
         backgroundColor: (0, _styles.alpha)(theme.palette.primaryDark[500], 0.5),
@@ -278,7 +278,7 @@ const CodeTab = exports.CodeTab = (0, _styles.styled)(_Tab.Tab)(({
   }, {
     props: ({
       ownerState
-    }) => !(ownerState != null && ownerState.contained) && ownerState.mounted,
+    }) => !ownerState?.contained && ownerState.mounted,
     style: {
       '&.base--selected': {
         color: '#FFF',
@@ -323,9 +323,9 @@ function HighlightedCodeWithTabs(props) {
   const availableTabs = React.useMemo(() => tabs.map(({
     tab
   }) => tab), [tabs]);
-  const [activeTab, setActiveTab] = (0, _useLocalStorageState.default)(storageKey != null ? storageKey : null, availableTabs[0]);
+  const [activeTab, setActiveTab] = (0, _useLocalStorageState.default)(storageKey ?? null, availableTabs[0]);
   // During hydration, activeTab is null, default to first value.
-  const defaultizedActiveTab = activeTab != null ? activeTab : availableTabs[0];
+  const defaultizedActiveTab = activeTab ?? availableTabs[0];
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
     setMounted(true);

package/node/Link/Link.js

@@ -74,7 +74,7 @@ const Link = exports.Link = /*#__PURE__*/React.forwardRef(function Link(props, r
     ...other
   } = props;
   const router = (0, _router.useRouter)();
-  const pathname = typeof href === 'string' ? href : href == null ? void 0 : href.pathname;
+  const pathname = typeof href === 'string' ? href : href?.pathname;
   const routerPathname = router.pathname.replace('/[docsTab]', '');
   const shouldBeActive = routerPathname === pathname;
   const className = (0, _clsx.default)(classNameProps, shouldBeActive && activeClassName);