@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.3

package/AnalyticsProvider/AnalyticsProvider.js

@@ -0,0 +1,225 @@
+var _CookieOutlinedIcon, _BrandingCssThemeProv;
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Fade from '@mui/material/Fade';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import useLocalStorageState from '@mui/utils/useLocalStorageState';
+import { alpha } from '@mui/system';
+import Portal from '@mui/material/Portal';
+import TrapFocus from '@mui/material/Unstable_TrapFocus';
+import CookieOutlinedIcon from '@mui/icons-material/CookieOutlined';
+import { BrandingCssThemeProvider } from "../branding/BrandingCssVarsProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const COOKIE_CONSENT_KEY = 'docs-cookie-consent';
+function getDoNotTrack() {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  // Check for Do Not Track (DNT)
+  return navigator.doNotTrack === '1' || window.doNotTrack === '1';
+}
+
+// DNT doesn't change during a session, so we can use a simple external store
+const subscribeToNothing = () => () => {};
+const getDoNotTrackSnapshot = () => getDoNotTrack();
+const getDoNotTrackServerSnapshot = () => true; // Assume DNT until we know the actual value
+
+function useDoNotTrack() {
+  return React.useSyncExternalStore(subscribeToNothing, getDoNotTrackSnapshot, getDoNotTrackServerSnapshot);
+}
+const AnalyticsContext = /*#__PURE__*/React.createContext({
+  consentStatus: null,
+  hasAnalyticsConsent: false,
+  needsConsent: false,
+  setAnalyticsConsent: () => {},
+  setEssentialOnly: () => {}
+});
+export function useAnalyticsConsent() {
+  return React.useContext(AnalyticsContext);
+}
+export function CookieConsentDialog() {
+  const {
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  } = useAnalyticsConsent();
+  const [show, setShow] = React.useState(false);
+  React.useEffect(() => {
+    if (needsConsent) {
+      // Double rAF to ensure the initial opacity: 0 state is painted before transitioning
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setShow(true);
+        });
+      });
+      return () => cancelAnimationFrame(frame);
+    }
+    setShow(false);
+    return undefined;
+  }, [needsConsent]);
+  return /*#__PURE__*/_jsx(Portal, {
+    children: /*#__PURE__*/_jsx(TrapFocus, {
+      open: needsConsent,
+      disableAutoFocus: true,
+      disableEnforceFocus: true,
+      children: /*#__PURE__*/_jsx(Fade, {
+        in: show,
+        unmountOnExit: true,
+        children: /*#__PURE__*/_jsx(Paper, {
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": "cookie-consent-dialog-title",
+          "aria-describedby": "cookie-consent-dialog-description",
+          variant: "outlined",
+          tabIndex: -1,
+          sx: theme => ({
+            position: 'fixed',
+            bottom: 0,
+            right: 0,
+            p: 2,
+            m: 2,
+            maxWidth: 340,
+            pointerEvents: 'auto',
+            boxShadow: theme.shadows[2],
+            zIndex: theme.zIndex.snackbar,
+            ...(theme.applyDarkStyles ? theme.applyDarkStyles({
+              bgcolor: 'primaryDark.900'
+            }) : {
+              [theme.getColorSchemeSelector?.('dark') || '&.mode-dark']: {
+                bgcolor: 'primaryDark.900'
+              }
+            })
+          }),
+          children: /*#__PURE__*/_jsxs(Stack, {
+            direction: "column",
+            spacing: 3,
+            sx: {
+              justifyContent: 'flex-start'
+            },
+            children: [/*#__PURE__*/_jsxs(Stack, {
+              spacing: 1,
+              sx: {
+                flexShrink: 1,
+                alignSelf: {
+                  xs: 'flex-start',
+                  sm: 'center'
+                }
+              },
+              children: [/*#__PURE__*/_jsx(Box, {
+                sx: theme => ({
+                  borderRadius: '50%',
+                  bgcolor: alpha(theme.palette.primary.main, 0.1),
+                  p: 1,
+                  display: 'inline-block',
+                  width: 40,
+                  height: 40,
+                  mb: -1,
+                  alignSelf: {
+                    xs: 'center',
+                    sm: 'flex-start'
+                  }
+                }),
+                children: _CookieOutlinedIcon || (_CookieOutlinedIcon = /*#__PURE__*/_jsx(CookieOutlinedIcon, {
+                  color: "primary",
+                  strokeWidth: 1.5
+                }))
+              }), /*#__PURE__*/_jsxs(Stack, {
+                spacing: 0.5,
+                children: [/*#__PURE__*/_jsx(Typography, {
+                  variant: "subtitle2",
+                  id: "cookie-consent-dialog-title",
+                  textAlign: {
+                    xs: 'center',
+                    sm: 'start'
+                  },
+                  children: "Cookie Preferences"
+                }), /*#__PURE__*/_jsx(Typography, {
+                  id: "cookie-consent-dialog-description",
+                  variant: "body2",
+                  textAlign: {
+                    xs: 'center',
+                    sm: 'start'
+                  },
+                  children: "We use cookies to understand site usage and improve our content. This includes third-party analytics."
+                })]
+              })]
+            }), /*#__PURE__*/_jsxs(Stack, {
+              direction: "row",
+              spacing: 1,
+              sx: {
+                justifyContent: 'flex-start'
+              },
+              children: [/*#__PURE__*/_jsx(Button, {
+                onClick: setAnalyticsConsent,
+                variant: "contained",
+                size: "small",
+                children: "Allow analytics"
+              }), /*#__PURE__*/_jsx(Button, {
+                onClick: setEssentialOnly,
+                size: "small",
+                children: "Essential only"
+              })]
+            })]
+          })
+        })
+      })
+    })
+  });
+}
+function updateGoogleConsent(hasAnalytics) {
+  if (typeof window !== 'undefined' && typeof window.gtag === 'function') {
+    window.gtag('consent', 'update', {
+      ad_storage: 'denied',
+      ad_user_data: 'denied',
+      ad_personalization: 'denied',
+      analytics_storage: hasAnalytics ? 'granted' : 'denied'
+    });
+
+    // Initialize Apollo when analytics consent is granted
+    const win = window;
+    if (hasAnalytics && typeof win.initApollo === 'function') {
+      win.initApollo();
+    }
+  }
+}
+export function AnalyticsProvider({
+  children
+}) {
+  const [consentStatus, setConsentStatus] = useLocalStorageState(COOKIE_CONSENT_KEY, null);
+  const doNotTrack = useDoNotTrack();
+
+  // Respect Do Not Track - don't show dialog and treat as essential only
+  const needsConsent = consentStatus === null && !doNotTrack;
+
+  // Update Google consent when status changes or on mount if already set
+  React.useEffect(() => {
+    if (doNotTrack) {
+      // DNT is enabled - always deny analytics
+      updateGoogleConsent(false);
+    } else if (consentStatus !== null) {
+      updateGoogleConsent(consentStatus === 'analytics');
+    }
+  }, [consentStatus, doNotTrack]);
+  const setAnalyticsConsent = React.useCallback(() => {
+    setConsentStatus('analytics');
+  }, [setConsentStatus]);
+  const setEssentialOnly = React.useCallback(() => {
+    setConsentStatus('essential');
+  }, [setConsentStatus]);
+  const contextValue = React.useMemo(() => ({
+    consentStatus: doNotTrack ? 'essential' : consentStatus,
+    hasAnalyticsConsent: !doNotTrack && consentStatus === 'analytics',
+    needsConsent,
+    setAnalyticsConsent,
+    setEssentialOnly
+  }), [consentStatus, doNotTrack, needsConsent, setAnalyticsConsent, setEssentialOnly]);
+  return /*#__PURE__*/_jsxs(AnalyticsContext.Provider, {
+    value: contextValue,
+    children: [children, _BrandingCssThemeProv || (_BrandingCssThemeProv = /*#__PURE__*/_jsx(BrandingCssThemeProvider, {
+      children: /*#__PURE__*/_jsx(CookieConsentDialog, {})
+    }))]
+  });
+}

package/AnalyticsProvider/index.d.ts

@@ -0,0 +1 @@
+export { AnalyticsProvider, useAnalyticsConsent, CookieConsentDialog } from "./AnalyticsProvider.js";

package/AnalyticsProvider/index.js

@@ -0,0 +1 @@
+export { AnalyticsProvider, useAnalyticsConsent, CookieConsentDialog } from "./AnalyticsProvider.js";

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.3
+
+<!-- generated comparing v9.0.0-alpha.2..master -->
+
+_Mar 12, 2026_
+
+A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📖 A new [Menubar](https://mui.com/material-ui/react-menubar/) component page integrated with [Base UI](https://base-ui.com/react/components/menubar)
+- ♿️ Improved the Roving TabIndex keyboard navigation for the Stepper, Tabs and MenuList components.
+
+### `@mui/material@9.0.0-alpha.3`
+
+- [autocomplete] Add `root` slot (#47852) @GerardasB
+- [autocomplete] Fix popup reopening on window focus regain with openOnFocus (#47790) @aman44444
+- [autocomplete] Support full slots for clearIndicator and popupIndicator (#47891) @silviuaavram
+- [material-ui] Partially revert "[material-ui] Clean up duplicated CSS rules (#47838)" (#47927) @sai6855
+- [stepper][menulist][tabs] Improve accessibility (#47687) @silviuaavram
+
+### Docs
+
+- [docs][codemod] Add v7 migration docs for deprecated Autocomplete APIs and Autocomplete codemod (#47945) @ZeeshanTamboli
+- [docs] Update faq about vendor chunks (#47747) @Janpot
+- [docs] Use direct palette vars in Tailwind v4 snippet (#47940) @Ahmad-Alaziz
+- [docs][menubar] Add Menubar component page (#47616) @siriwatknp
+
+### Core
+
+- [core] Fix the release prepare steps (#47951) @silviuaavram
+- [core] Remove Joy UI code and docs (#47939) @mnajdova
+- [code-infra] Add previously missed export of themeCssVarsAugmentation (#47918) @brijeshb42
+- [docs-infra] Import font module for nextjs transpilation (#47935) @brijeshb42
+- [docs-infra] Migrate simpler modules from docs to mui-docs (#47897) @brijeshb42
+- [test] Fix detached anchorEl elements in tests (#47929) @Janpot
+
+All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @brijeshb42, @GerardasB, @Janpot, @mnajdova, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
+
 ## 9.0.0-alpha.2
 
 <!-- generated comparing v9.0.0-alpha.1..master -->

package/CodeCopy/CodeCopy.js

@@ -1,17 +1,8 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeCopyProvider = CodeCopyProvider;
-exports.useCodeCopy = useCodeCopy;
-var React = _interopRequireWildcard(require("react"));
-var _router = require("next/router");
-var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
-var _jsxRuntime = require("react/jsx-runtime");
 var _InitCodeCopy;
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import clipboardCopy from 'clipboard-copy';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CodeBlockContext = /*#__PURE__*/React.createContext({
   current: null
 });
@@ -25,7 +16,7 @@ const CodeBlockContext = /*#__PURE__*/React.createContext({
  *  <button className="MuiCode-copy">...</button>
  * </div>
  */
-function useCodeCopy() {
+export function useCodeCopy() {
   const rootNode = React.useContext(CodeBlockContext);
   return {
     onMouseEnter: event => {
@@ -49,7 +40,7 @@ function useCodeCopy() {
 }
 function InitCodeCopy() {
   const rootNode = React.useContext(CodeBlockContext);
-  const router = (0, _router.useRouter)();
+  const router = useRouter();
   React.useEffect(() => {
     let key = 'Ctrl + ';
     if (typeof window !== 'undefined') {
@@ -103,7 +94,7 @@ function InitCodeCopy() {
           }, 2000);
           try {
             if (pre.textContent) {
-              await (0, _clipboardCopy.default)(pre.textContent);
+              await clipboardCopy(pre.textContent);
             }
             // eslint-disable-next-line no-empty
           } catch (error) {}
@@ -147,7 +138,7 @@ function hasNativeSelection(element) {
  * Place <CodeCopyProvider> at the page level. It will check the keydown event and try to initiate copy click if rootNode exist.
  * Any code block inside the tree can set the rootNode when mouse enter to leverage keyboard copy.
  */
-function CodeCopyProvider({
+export function CodeCopyProvider({
   children
 }) {
   const rootNode = React.useRef(null);
@@ -174,8 +165,8 @@ function CodeCopyProvider({
       copyBtn.dataset.gaEventAction = initialEventAction; // reset the 'data-ga-event-action' back to initial
     });
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CodeBlockContext.Provider, {
+  return /*#__PURE__*/_jsxs(CodeBlockContext.Provider, {
     value: rootNode,
-    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/(0, _jsxRuntime.jsx)(InitCodeCopy, {})), children]
+    children: [_InitCodeCopy || (_InitCodeCopy = /*#__PURE__*/_jsx(InitCodeCopy, {})), children]
   });
 }

package/CodeCopy/CodeCopyButton.js

@@ -1,14 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CodeCopyButton = CodeCopyButton;
-var _useClipboardCopy = _interopRequireDefault(require("./useClipboardCopy"));
-var _jsxRuntime = require("react/jsx-runtime");
 var _span, _span2;
-function CodeCopyButton(props) {
+import useClipboardCopy from "./useClipboardCopy.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CodeCopyButton(props) {
   const {
     code,
     ...other
@@ -16,13 +9,13 @@ function CodeCopyButton(props) {
   const {
     copy,
     isCopied
-  } = (0, _useClipboardCopy.default)();
+  } = useClipboardCopy();
   // This component is designed to be wrapped in NoSsr
   const macOS = window.navigator.platform.toUpperCase().includes('MAC');
   const key = macOS ? '⌘' : 'Ctrl + ';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "MuiCode-copy-container",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    children: /*#__PURE__*/_jsxs("button", {
       ...other,
       "aria-label": "Copy the code",
       type: "button",
@@ -31,14 +24,14 @@ function CodeCopyButton(props) {
         // event.stopPropagation();
         await copy(code);
       },
-      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      children: [isCopied ? 'Copied' : 'Copy', /*#__PURE__*/_jsxs("span", {
         className: "MuiCode-copyKeypress",
         style: {
           opacity: isCopied ? 0 : 1
         },
-        children: [_span || (_span = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: [_span || (_span = /*#__PURE__*/_jsx("span", {
           children: "(or"
-        })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        })), " ", key, "C", _span2 || (_span2 = /*#__PURE__*/_jsx("span", {
           children: ")"
         }))]
       })]

package/CodeCopy/index.js

@@ -1,40 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {
-  useClipboardCopy: true
-};
-Object.defineProperty(exports, "useClipboardCopy", {
-  enumerable: true,
-  get: function () {
-    return _useClipboardCopy.default;
-  }
-});
-var _CodeCopy = require("./CodeCopy");
-Object.keys(_CodeCopy).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CodeCopy[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _CodeCopy[key];
-    }
-  });
-});
-var _CodeCopyButton = require("./CodeCopyButton");
-Object.keys(_CodeCopyButton).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CodeCopyButton[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _CodeCopyButton[key];
-    }
-  });
-});
-var _useClipboardCopy = _interopRequireDefault(require("./useClipboardCopy"));
+export * from "./CodeCopy.js";
+export * from "./CodeCopyButton.js";
+export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/CodeCopy/useClipboardCopy.js

@@ -1,21 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useClipboardCopy;
-var React = _interopRequireWildcard(require("react"));
-var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
-function useClipboardCopy() {
+import * as React from 'react';
+import clipboardCopy from 'clipboard-copy';
+export default function useClipboardCopy() {
   const [isCopied, setIsCopied] = React.useState(false);
   const timeout = React.useRef(undefined);
   React.useEffect(() => () => {
     clearTimeout(timeout.current);
   }, []);
   const copy = async text => {
-    await (0, _clipboardCopy.default)(text);
+    await clipboardCopy(text);
     setIsCopied(true);
     clearTimeout(timeout.current);
     timeout.current = setTimeout(() => {