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

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-alpha.2
+
+<!-- generated comparing v9.0.0-alpha.1..master -->
+
+_Mar 5, 2026_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### @mui/material@9.0.0-alpha.2
+
+- Clean up duplicated CSS rules (#47838) @sai6855
+
+### @mui/system@9.0.0-alpha.2
+
+- Refactor sortContainerQueries to define regex outside of sort function (#47817) @sai6855
+
+### Docs
+
+- Move shared components to @mui/docs package (#47672) @Janpot
+- Fix small typo in NumberField page (#47877) @arthur-plazanet
+
+### Core
+
+- [code-infra] Reduce paths for attw checks (#47896) @brijeshb42
+- [docs-infra] Run syncTeamMembers (#47900) @Janpot
+
+All contributors of this release in alphabetical order: @arthur-plazanet, @brijeshb42, @Janpot, @sai6855
+
 ## 9.0.0-alpha.1
 
 <!-- generated comparing v9.0.0-alpha.0..master -->

package/IconImage/IconImage.d.mts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export type IconImageProps = {
+  name: 'product-core' | 'product-advanced' | 'product-toolpad' | 'product-templates' | 'product-designkits' | 'pricing/x-plan-pro' | 'pricing/x-plan-premium' | 'pricing/x-plan-community' | 'pricing/yes' | 'pricing/no' | 'pricing/time' | 'companies/spotify' | 'companies/amazon' | 'companies/nasa' | 'companies/netflix' | 'companies/unity' | 'companies/shutterstock' | 'companies/southwest' | 'companies/siemens' | 'companies/deloitte' | 'companies/apple' | 'companies/twitter' | 'companies/salesforce' | 'companies/verizon' | 'companies/atandt' | 'companies/patreon' | 'companies/ebay' | 'companies/samsung' | 'companies/volvo' | 'companies/tesla' | string;
+  height?: number;
+  mode?: '' | 'light' | 'dark';
+  sx?: SxProps<Theme>;
+  width?: number;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
+export default function IconImage(props: IconImageProps): import("react/jsx-runtime").JSX.Element;

package/IconImage/IconImage.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+export type IconImageProps = {
+  name: 'product-core' | 'product-advanced' | 'product-toolpad' | 'product-templates' | 'product-designkits' | 'pricing/x-plan-pro' | 'pricing/x-plan-premium' | 'pricing/x-plan-community' | 'pricing/yes' | 'pricing/no' | 'pricing/time' | 'companies/spotify' | 'companies/amazon' | 'companies/nasa' | 'companies/netflix' | 'companies/unity' | 'companies/shutterstock' | 'companies/southwest' | 'companies/siemens' | 'companies/deloitte' | 'companies/apple' | 'companies/twitter' | 'companies/salesforce' | 'companies/verizon' | 'companies/atandt' | 'companies/patreon' | 'companies/ebay' | 'companies/samsung' | 'companies/volvo' | 'companies/tesla' | string;
+  height?: number;
+  mode?: '' | 'light' | 'dark';
+  sx?: SxProps<Theme>;
+  width?: number;
+} & Omit<React.JSX.IntrinsicElements['img'], 'ref'>;
+export default function IconImage(props: IconImageProps): import("react/jsx-runtime").JSX.Element;

package/IconImage/IconImage.js

@@ -0,0 +1,91 @@
+"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 = IconImage;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _ThemeContext = require("../ThemeContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const Img = (0, _styles.styled)('img')({
+  display: 'inline-block',
+  verticalAlign: 'bottom'
+});
+let neverHydrated = true;
+function IconImage(props) {
+  const {
+    height: heightProp,
+    name,
+    width: widthProp,
+    mode: modeProp,
+    ...other
+  } = props;
+  const themeOptions = React.useContext(_ThemeContext.ThemeOptionsContext);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    setFirstRender(false);
+    neverHydrated = false;
+  }, []);
+  let defaultWidth;
+  let defaultHeight;
+  const mode = modeProp ?? themeOptions.paletteMode;
+  if (name.startsWith('product-')) {
+    defaultWidth = 36;
+    defaultHeight = 36;
+  } else if (name.startsWith('pricing/x-plan-')) {
+    defaultWidth = 17;
+    defaultHeight = 20;
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
+    defaultWidth = 18;
+    defaultHeight = 18;
+  }
+  const width = widthProp ?? defaultWidth;
+  const height = heightProp ?? defaultHeight;
+
+  // First time render with a theme depend image
+  if (firstRender && neverHydrated && mode !== '') {
+    if (other.loading === 'eager') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          className: "only-light-mode-v2",
+          src: `/static/branding/${name}-light.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+          className: "only-dark-mode-v2",
+          src: `/static/branding/${name}-dark.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        })]
+      });
+    }
+
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      component: "span",
+      sx: {
+        width,
+        height,
+        display: 'inline-block'
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
+    alt: "",
+    loading: "lazy",
+    width: width,
+    height: height,
+    ...other
+  });
+}

package/IconImage/IconImage.mjs

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { ThemeOptionsContext } from "../ThemeContext/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Img = styled('img')({
+  display: 'inline-block',
+  verticalAlign: 'bottom'
+});
+let neverHydrated = true;
+export default function IconImage(props) {
+  const {
+    height: heightProp,
+    name,
+    width: widthProp,
+    mode: modeProp,
+    ...other
+  } = props;
+  const themeOptions = React.useContext(ThemeOptionsContext);
+  const [firstRender, setFirstRender] = React.useState(true);
+  React.useEffect(() => {
+    setFirstRender(false);
+    neverHydrated = false;
+  }, []);
+  let defaultWidth;
+  let defaultHeight;
+  const mode = modeProp ?? themeOptions.paletteMode;
+  if (name.startsWith('product-')) {
+    defaultWidth = 36;
+    defaultHeight = 36;
+  } else if (name.startsWith('pricing/x-plan-')) {
+    defaultWidth = 17;
+    defaultHeight = 20;
+  } else if (['pricing/yes', 'pricing/no', 'pricing/time'].includes(name)) {
+    defaultWidth = 18;
+    defaultHeight = 18;
+  }
+  const width = widthProp ?? defaultWidth;
+  const height = heightProp ?? defaultHeight;
+
+  // First time render with a theme depend image
+  if (firstRender && neverHydrated && mode !== '') {
+    if (other.loading === 'eager') {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [/*#__PURE__*/_jsx(Img, {
+          className: "only-light-mode-v2",
+          src: `/static/branding/${name}-light.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        }), /*#__PURE__*/_jsx(Img, {
+          className: "only-dark-mode-v2",
+          src: `/static/branding/${name}-dark.svg`,
+          alt: "",
+          width: width,
+          height: height,
+          ...other,
+          loading: "lazy"
+        })]
+      });
+    }
+
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return /*#__PURE__*/_jsx(Box, {
+      component: "span",
+      sx: {
+        width,
+        height,
+        display: 'inline-block'
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx(Img, {
+    src: `/static/branding/${name}${mode ? `-${mode}` : ''}.svg`,
+    alt: "",
+    loading: "lazy",
+    width: width,
+    height: height,
+    ...other
+  });
+}

package/IconImage/index.d.mts

@@ -0,0 +1 @@
+export { default, type IconImageProps } from "./IconImage.mjs";

package/IconImage/index.d.ts

@@ -0,0 +1 @@
+export { default, type IconImageProps } from "./IconImage.js";

package/IconImage/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _IconImage.default;
+  }
+});
+var _IconImage = _interopRequireDefault(require("./IconImage"));

package/IconImage/index.mjs

@@ -0,0 +1 @@
+export { default } from "./IconImage.mjs";

package/SectionHeadline/SectionHeadline.d.mts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SectionHeadlineProps {
+  alwaysCenter?: boolean;
+  description?: React.ReactNode;
+  id?: string;
+  /**
+   * For using with dark background.
+   */
+  inverted?: boolean;
+  overline?: React.ReactNode;
+  title: string | React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+}
+export default function SectionHeadline(props: SectionHeadlineProps): import("react/jsx-runtime").JSX.Element;

package/SectionHeadline/SectionHeadline.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface SectionHeadlineProps {
+  alwaysCenter?: boolean;
+  description?: React.ReactNode;
+  id?: string;
+  /**
+   * For using with dark background.
+   */
+  inverted?: boolean;
+  overline?: React.ReactNode;
+  title: string | React.ReactElement<React.HTMLAttributes<HTMLElement>>;
+}
+export default function SectionHeadline(props: SectionHeadlineProps): import("react/jsx-runtime").JSX.Element;

package/SectionHeadline/SectionHeadline.js

@@ -0,0 +1,89 @@
+"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 = SectionHeadline;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _jsxRuntime = require("react/jsx-runtime");
+function SectionHeadline(props) {
+  const {
+    alwaysCenter = false,
+    description,
+    id,
+    inverted = false,
+    overline,
+    title
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    sx: {
+      m: alwaysCenter ? 'auto' : null
+    },
+    children: [overline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      id: id,
+      component: "h2",
+      variant: "body2",
+      sx: {
+        fontWeight: 'bold',
+        color: 'primary.main',
+        mb: 1,
+        ...(alwaysCenter && {
+          textAlign: 'center'
+        })
+      },
+      children: overline
+    }), typeof title === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      variant: "h2",
+      sx: theme => ({
+        maxWidth: 500,
+        ...(inverted ? {
+          color: '#fff'
+        } : {
+          color: 'primaryDark.900',
+          ...theme.applyDarkStyles({
+            color: 'grey.100'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          maxWidth: '100%'
+        })
+      }),
+      children: title
+    }) : (/*#__PURE__*/React.cloneElement(title, {
+      style: {
+        maxWidth: 500,
+        ...(alwaysCenter && {
+          maxWidth: '100%',
+          textAlign: 'center'
+        }),
+        ...(inverted && {
+          color: '#fff'
+        })
+      }
+    })), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      sx: theme => ({
+        mt: 1,
+        mb: 3,
+        maxWidth: 500,
+        ...(inverted ? {
+          color: 'grey.400'
+        } : {
+          color: 'grey.800',
+          ...theme.applyDarkStyles({
+            color: 'grey.500'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          mx: 'auto'
+        })
+      }),
+      children: description
+    })]
+  });
+}

package/SectionHeadline/SectionHeadline.mjs

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SectionHeadline(props) {
+  const {
+    alwaysCenter = false,
+    description,
+    id,
+    inverted = false,
+    overline,
+    title
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      m: alwaysCenter ? 'auto' : null
+    },
+    children: [overline && /*#__PURE__*/_jsx(Typography, {
+      id: id,
+      component: "h2",
+      variant: "body2",
+      sx: {
+        fontWeight: 'bold',
+        color: 'primary.main',
+        mb: 1,
+        ...(alwaysCenter && {
+          textAlign: 'center'
+        })
+      },
+      children: overline
+    }), typeof title === 'string' ? /*#__PURE__*/_jsx(Typography, {
+      variant: "h2",
+      sx: theme => ({
+        maxWidth: 500,
+        ...(inverted ? {
+          color: '#fff'
+        } : {
+          color: 'primaryDark.900',
+          ...theme.applyDarkStyles({
+            color: 'grey.100'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          maxWidth: '100%'
+        })
+      }),
+      children: title
+    }) : (/*#__PURE__*/React.cloneElement(title, {
+      style: {
+        maxWidth: 500,
+        ...(alwaysCenter && {
+          maxWidth: '100%',
+          textAlign: 'center'
+        }),
+        ...(inverted && {
+          color: '#fff'
+        })
+      }
+    })), description && /*#__PURE__*/_jsx(Typography, {
+      sx: theme => ({
+        mt: 1,
+        mb: 3,
+        maxWidth: 500,
+        ...(inverted ? {
+          color: 'grey.400'
+        } : {
+          color: 'grey.800',
+          ...theme.applyDarkStyles({
+            color: 'grey.500'
+          })
+        }),
+        ...(alwaysCenter && {
+          textAlign: 'center',
+          mx: 'auto'
+        })
+      }),
+      children: description
+    })]
+  });
+}

package/SectionHeadline/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./SectionHeadline.mjs";
+export { default } from "./SectionHeadline.mjs";

package/SectionHeadline/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SectionHeadline.js";
+export { default } from "./SectionHeadline.js";

package/SectionHeadline/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SectionHeadline.default;
+  }
+});
+var _SectionHeadline = _interopRequireWildcard(require("./SectionHeadline"));
+Object.keys(_SectionHeadline).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _SectionHeadline[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SectionHeadline[key];
+    }
+  });
+});

package/SectionHeadline/index.mjs

@@ -0,0 +1,2 @@
+export * from "./SectionHeadline.mjs";
+export { default } from "./SectionHeadline.mjs";

package/ThemeContext/ThemeContext.d.mts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const highDensity: {
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiFilledInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormControl: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiIconButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiInputBase: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiInputLabel: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiListItem: {
+      defaultProps: {
+        dense: boolean;
+      };
+    };
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFab: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTable: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTextField: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiToolbar: {
+      defaultProps: {
+        variant: string;
+      };
+    };
+  };
+};
+export declare const DispatchContext: React.Context<React.ActionDispatch<any>>;
+export declare const ThemeOptionsContext: React.Context<{
+  dense: boolean;
+  direction: "ltr" | "rtl";
+  paletteMode: "light" | "dark";
+}>;
+export declare function ThemeProvider(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+  var propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+  };
+}
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+export declare function useChangeTheme(): (options: any) => void;
+export declare function useColorSchemeShim(): {
+  mode: string | null;
+  systemMode: string;
+  setMode: React.Dispatch<React.SetStateAction<string | null>>;
+};

package/ThemeContext/ThemeContext.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export declare const highDensity: {
+  components: {
+    MuiButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiFilledInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormControl: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFormHelperText: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiIconButton: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiInputBase: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiInputLabel: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiListItem: {
+      defaultProps: {
+        dense: boolean;
+      };
+    };
+    MuiOutlinedInput: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiFab: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTable: {
+      defaultProps: {
+        size: string;
+      };
+    };
+    MuiTextField: {
+      defaultProps: {
+        margin: string;
+      };
+    };
+    MuiToolbar: {
+      defaultProps: {
+        variant: string;
+      };
+    };
+  };
+};
+export declare const DispatchContext: React.Context<React.ActionDispatch<any>>;
+export declare const ThemeOptionsContext: React.Context<{
+  dense: boolean;
+  direction: "ltr" | "rtl";
+  paletteMode: "light" | "dark";
+}>;
+export declare function ThemeProvider(props: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace ThemeProvider {
+  var propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+  };
+}
+/**
+ * @returns {(nextOptions: Partial<typeof themeInitialOptions>) => void}
+ */
+export declare function useChangeTheme(): (options: any) => void;
+export declare function useColorSchemeShim(): {
+  mode: string | null;
+  systemMode: string;
+  setMode: React.Dispatch<React.SetStateAction<string | null>>;
+};