@mui/docs 7.0.0-beta.0 → 7.0.0-beta.2

package/Ad/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Ad.js";
+export * from "./AdManager.js";
+export * from "./AdProvider.js";
+export * from "./AdGuest.js";
+export { AdCarbonInline } from "./AdCarbon.js";

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # [Versions](https://mui.com/versions/)
 
+## 7.0.0-beta.2
+
+<!-- generated comparing v7.0.0-beta.1..master -->
+
+_Feb 27, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+### Core
+
+- [code-infra] Add package.json export (#45433) @Janpot
+- [blog] React 19 migration for MUI X (#45348) @arminmeh
+
+All contributors of this release in alphabetical order: @arminmeh, @Janpot
+
+## 7.0.0-beta.1
+
+<!-- generated comparing v7.0.0-beta.0..master -->
+
+_Feb 27, 2025_
+
+This release fixes incorrect build output from the previous release (`beta.0`).
+
+### Core
+
+- [code-infra] Fix build:types script omitting folders with a dot in their name (#45422) @Janpot
+- [release] Fix versions (#45420) @mj12albert
+
+All contributors of this release in alphabetical order: @Janpot, @mj12albert
+
 ## 7.0.0-beta.0
 
 <!-- generated comparing v7.0.0-alpha.2..master -->

package/CodeCopy/CodeCopy.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * How to use: spread the handlers to the .MuiCode-root
+ *
+ * The html structure should be:
+ * <div className="MuiCode-root">
+ *  <pre>...</pre>
+ *  <button className="MuiCode-copy">...</button>
+ * </div>
+ */
+export declare function useCodeCopy(): React.HTMLAttributes<HTMLDivElement>;
+interface CodeCopyProviderProps {
+  children: React.ReactNode;
+}
+/**
+ * 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.
+ */
+export declare function CodeCopyProvider({
+  children
+}: CodeCopyProviderProps): React.JSX.Element;
+export {};

package/CodeCopy/CodeCopyButton.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface CodeCopyButtonProps {
+  code: string;
+}
+export declare function CodeCopyButton(props: CodeCopyButtonProps): React.JSX.Element;

package/CodeCopy/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CodeCopy.js";
+export * from "./CodeCopyButton.js";
+export { default as useClipboardCopy } from "./useClipboardCopy.js";

package/CodeCopy/useClipboardCopy.d.ts

@@ -0,0 +1,4 @@
+export default function useClipboardCopy(): {
+  copy: (text: string) => Promise<void>;
+  isCopied: boolean;
+};

package/ComponentLinkHeader/ComponentLinkHeader.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { MarkdownHeaders } from '@mui/internal-markdown';
+export interface ComponentLinkHeaderProps {
+  design?: boolean;
+  markdown: {
+    headers: MarkdownHeaders;
+  };
+}
+export declare function ComponentLinkHeader(props: ComponentLinkHeaderProps): React.JSX.Element;

package/ComponentLinkHeader/index.d.ts

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

package/DocsProvider/DocsProvider.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Translations } from "../i18n/index.js";
+import { AdConfig } from "../Ad/index.js";
+export interface DocsConfig {
+  LANGUAGES: string[];
+  LANGUAGES_SSR: string[];
+  LANGUAGES_IN_PROGRESS: string[];
+  LANGUAGES_IGNORE_PAGES: (pathname: string) => boolean;
+}
+export interface DocsProviderProps {
+  config: DocsConfig;
+  adConfig?: Partial<AdConfig>;
+  defaultUserLanguage: string;
+  children?: React.ReactNode;
+  translations?: Translations;
+}
+export declare function DocsProvider({
+  config,
+  adConfig,
+  defaultUserLanguage,
+  translations,
+  children
+}: DocsProviderProps): React.JSX.Element;
+export declare function useDocsConfig(): DocsConfig;

package/DocsProvider/index.d.ts

@@ -0,0 +1 @@
+export * from "./DocsProvider.js";

package/HighlightedCode/HighlightedCode.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ButtonProps } from '@mui/material/Button';
+import { SxProps } from '@mui/material/styles';
+export interface HighlightedCodeProps {
+  code: string;
+  copyButtonHidden?: boolean;
+  copyButtonProps?: ButtonProps;
+  language: string;
+  parentComponent?: React.ElementType;
+  plainStyle?: boolean;
+  preComponent?: React.ElementType;
+  sx?: SxProps;
+}
+export declare const HighlightedCode: React.ForwardRefExoticComponent<HighlightedCodeProps & React.RefAttributes<HTMLDivElement>>;

package/HighlightedCode/index.d.ts

@@ -0,0 +1 @@
+export * from "./HighlightedCode.js";

package/HighlightedCodeWithTabs/HighlightedCodeWithTabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export declare const CodeTabList: import("@emotion/styled").StyledComponent<import("@mui/base/TabsList").TabsListOwnProps & Omit<any, keyof import("@mui/base/TabsList").TabsListOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+export declare const CodeTabPanel: import("@emotion/styled").StyledComponent<import("@mui/base/TabPanel").TabPanelOwnProps & Omit<any, keyof import("@mui/base/TabPanel").TabPanelOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+export declare const CodeTab: import("@emotion/styled").StyledComponent<import("@mui/base/Tab").TabOwnProps & Omit<any, keyof import("@mui/base/Tab").TabOwnProps> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: {
+    mounted: boolean;
+    contained?: boolean;
+  };
+}, {}, {}>;
+type TabsConfig = {
+  code: string | ((tab: string) => string);
+  language: string;
+  tab: string;
+};
+export declare function HighlightedCodeWithTabs(props: {
+  tabs: Array<TabsConfig>;
+  storageKey?: string;
+} & Record<string, any>): React.JSX.Element;
+export {};

package/HighlightedCodeWithTabs/index.d.ts

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

package/InfoCard/InfoCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TypographyProps } from '@mui/material/Typography';
+import { LinkProps } from "../Link/index.js";
+interface GlowingIconContainerProps {
+  icon: React.ReactNode;
+}
+export declare function GlowingIconContainer({
+  icon
+}: GlowingIconContainerProps): React.JSX.Element;
+interface InfoCardProps {
+  classNameDescription?: string;
+  classNameTitle?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  link?: string;
+  prefetch?: LinkProps['prefetch'];
+  svg?: React.ReactNode;
+  title: string;
+  titleProps?: TypographyProps;
+}
+export declare function InfoCard(props: InfoCardProps): React.JSX.Element;
+export {};

package/InfoCard/index.d.ts

@@ -0,0 +1 @@
+export * from "./InfoCard.js";

package/Link/Link.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { LinkProps as NextLinkProps } from 'next/link';
+import { LinkProps as MuiLinkProps } from '@mui/material/Link';
+/**
+ * File to keep in sync with:
+ *
+ * - /examples/material-ui-nextjs-pages-router/src/Link.js
+ * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
+ */
+interface NextLinkComposedProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>, Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
+  to: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as'];
+}
+export type LinkProps = {
+  activeClassName?: string;
+  as?: NextLinkProps['as'];
+  href: NextLinkProps['href'];
+  linkAs?: NextLinkProps['as'];
+  noLinkStyle?: boolean;
+} & Omit<NextLinkComposedProps, 'to' | 'linkAs' | 'href'> & Omit<MuiLinkProps, 'href'>;
+export declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/Link/index.d.ts

@@ -0,0 +1 @@
+export * from "./Link.js";

package/MarkdownElement/MarkdownElement.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface MarkdownElementProps {
+  className?: string;
+  renderedMarkdown?: string;
+  children?: React.ReactNode;
+}
+export declare const MarkdownElement: React.ForwardRefExoticComponent<MarkdownElementProps & React.RefAttributes<HTMLDivElement>>;

package/MarkdownElement/index.d.ts

@@ -0,0 +1 @@
+export * from "./MarkdownElement.js";

package/NProgressBar/NProgressBar.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface NProgressBarProps {
+  children?: React.ReactNode;
+}
+declare const NProgressBar: React.FunctionComponent<NProgressBarProps>;
+export default NProgressBar;

package/NProgressBar/index.d.ts

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

package/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SectionTitleProps<Hash extends string = string> {
+  title: string;
+  hash: Hash;
+  level?: 'h2' | 'h3' | 'h4';
+}
+export declare function SectionTitle(props: SectionTitleProps): React.JSX.Element;

package/SectionTitle/index.d.ts

@@ -0,0 +1 @@
+export * from "./SectionTitle.js";

package/branding/BrandingProvider.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface BrandingProviderProps {
+  children: React.ReactNode;
+  /**
+   * If not `undefined`, the provider is considered nesting and does not render NextNProgressBar & CssBaseline
+   */
+  mode?: 'light' | 'dark';
+}
+export declare function BrandingProvider(props: BrandingProviderProps): React.JSX.Element;

package/branding/brandingTheme.d.ts

@@ -0,0 +1,151 @@
+import type { CSSObject } from '@mui/system';
+import { ThemeOptions, Theme } from '@mui/material/styles';
+interface ApplyDarkStyles {
+  (scheme: CSSObject): CSSObject;
+}
+declare module '@mui/material/styles' {
+  interface Theme {
+    applyDarkStyles: ApplyDarkStyles;
+  }
+}
+declare module '@mui/material/styles/createPalette' {
+  interface ColorRange {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+  interface PaletteColor extends ColorRange {}
+  interface Palette {
+    primaryDark: PaletteColor;
+    gradients: {
+      radioSubtle: string;
+      linearSubtle: string;
+    };
+  }
+  interface TypeText {
+    tertiary: string;
+  }
+}
+declare module '@mui/material/styles/createTypography' {
+  interface TypographyOptions {
+    fontWeightSemiBold?: number;
+    fontWeightExtraBold?: number;
+    fontFamilyCode?: string;
+    fontFamilySystem?: string;
+  }
+  interface Typography {
+    fontWeightSemiBold: number;
+    fontWeightExtraBold: number;
+    fontFamilyCode: string;
+    fontFamilySystem: string;
+  }
+}
+declare module '@mui/material/Chip' {
+  interface ChipPropsColorOverrides {
+    grey: true;
+  }
+}
+declare module '@mui/material/SvgIcon' {
+  interface SvgIconPropsColorOverrides {
+    danger: true;
+  }
+  interface SvgIconPropsSizeOverrides {
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+    xl2: true;
+    xl3: true;
+    xl4: true;
+  }
+}
+export declare const blue: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  main: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const blueDark: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  main: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const grey: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const error: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  main: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const success: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const warning: {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  main: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+};
+export declare const getMetaThemeColor: (mode: "light" | "dark") => string;
+export declare const getDesignTokens: (mode: "light" | "dark") => ThemeOptions;
+export declare function getThemedComponents(): ThemeOptions;
+export declare const brandingDarkTheme: Theme;
+export declare const brandingLightTheme: Theme;
+export {};

package/branding/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./brandingTheme.js";
+export * from "./BrandingProvider.js";

package/i18n/i18n.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+export interface UserLanguageProviderProps {
+  children: React.ReactNode;
+  translations?: Translations;
+  defaultUserLanguage: string;
+}
+export declare function UserLanguageProvider(props: UserLanguageProviderProps): React.JSX.Element;
+export declare namespace UserLanguageProvider {
+  var propTypes: {
+    children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    defaultUserLanguage: PropTypes.Requireable<string>;
+  };
+}
+export declare function useUserLanguage(): string;
+export declare function useSetUserLanguage(): React.Dispatch<React.SetStateAction<string>>;
+export interface TranslateOptions {
+  ignoreWarning?: boolean;
+}
+export type Translate = (key: string, options?: TranslateOptions) => any;
+export declare function useTranslate(): Translate;
+export type Translations = { [key in string]?: string | Translations };
+export interface RequireContext {
+  (req: string): string;
+  keys: () => string[];
+}
+export declare function mapTranslations(req: RequireContext): Translations;

package/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from "./i18n.js";

package/modern/Ad/Ad.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare const AD_MARGIN_TOP = 3;
+export declare const AD_MARGIN_BOTTOM = 3;
+export declare const AD_HEIGHT = 126;
+export declare const AD_HEIGHT_MOBILE: number;
+export declare function Ad(): React.JSX.Element;

package/modern/Ad/AdCarbon.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function AdCarbonInline(): React.JSX.Element;
+export default function AdCarbon(): React.JSX.Element;

package/modern/Ad/AdDisplay.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface AdParameters {
+  name: string;
+  link: string;
+  img?: string;
+  description: string;
+  poweredby: string;
+  label: string;
+}
+interface AdDisplayProps {
+  ad: AdParameters;
+  className?: string;
+  shape?: 'auto' | 'inline' | 'image';
+}
+export default function AdDisplay(props: AdDisplayProps): React.JSX.Element;
+export {};

package/modern/Ad/AdGuest.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface AdGuestProps {
+  /**
+   * The querySelector use to target the element which will include the ad.
+   */
+  classSelector?: string;
+  children?: React.ReactNode | undefined;
+}
+declare function AdGuest(props: AdGuestProps): React.JSX.Element | null;
+export { AdGuest };

package/modern/Ad/AdInHouse.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { AdParameters } from "./AdDisplay.js";
+export default function AdInHouse(props: {
+  ad: Omit<AdParameters, 'poweredby' | 'label'>;
+}): React.JSX.Element;

package/modern/Ad/AdManager.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+type AdPortal = {
+  placement: 'body-top';
+  element: Element | null;
+};
+interface AdManagerProps {
+  /**
+   * The querySelector use to target the element which will include the ad.
+   */
+  classSelector?: string;
+  children?: React.ReactNode | undefined;
+}
+export declare const AdContext: React.Context<AdPortal>;
+export declare const adShape: string;
+export declare function AdManager({
+  classSelector,
+  children
+}: AdManagerProps): React.JSX.Element;
+export {};

package/modern/Ad/AdProvider.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface AdConfig {
+  /**
+   * The ratio of "ad display" event sent to Google Analytics.
+   * Used to avoid an exceed on the Google Analytics quotas.
+   * @default 0.1
+   */
+  GADisplayRatio: number;
+}
+export interface AdProviderProps {
+  children: React.ReactNode;
+  config?: Partial<AdConfig>;
+}
+export declare function AdProvider(props: AdProviderProps): React.JSX.Element;
+export declare function useAdConfig(): AdConfig;