@mui/material 7.0.0-beta.0 → 7.0.0-beta.1

package/modern/internal/SwitchBase.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from "../index.js";
+import { ButtonBaseProps } from "../ButtonBase/index.js";
+import { SwitchBaseClasses } from "./switchBaseClasses.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+interface SwitchBaseSlots {
+  /**
+   * The component that renders the root slot.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the input slot.
+   * @default 'input'
+   */
+  input: React.ElementType;
+}
+type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+   */
+  root: SlotProps<React.ElementType<ButtonBaseProps>, {}, SwitchBaseOwnerState>;
+  /**
+   * Props forwarded to the input slot.
+   */
+  input: SlotProps<'input', {}, SwitchBaseOwnerState>;
+}>;
+export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
+  autoFocus?: boolean;
+  /**
+   * If `true`, the component is checked.
+   */
+  checked?: boolean;
+  checkedIcon: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<SwitchBaseClasses>;
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple?: boolean;
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple?: boolean;
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge?: 'start' | 'end' | false;
+  icon: React.ReactNode;
+  /**
+   * The id of the `input` element.
+   */
+  id?: string;
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  /**
+   * Pass a ref to the `input` element.
+   * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputRef?: React.Ref<any>;
+  /**
+   * Name attribute of the `input` element.
+   */
+  name?: string;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+  readOnly?: boolean;
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required?: boolean;
+  tabIndex?: number;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   */
+  value?: unknown;
+}
+export interface SwitchBaseOwnerState extends Omit<SwitchBaseProps, 'slots' | 'slotProps'> {}
+declare const SwitchBase: React.JSXElementConstructor<SwitchBaseProps>;
+export default SwitchBase;

package/modern/internal/switchBaseClasses.d.ts

@@ -0,0 +1,12 @@
+export interface SwitchBaseClasses {
+  root: string;
+  checked: string;
+  disabled: string;
+  input: string;
+  edgeStart: string;
+  edgeEnd: string;
+}
+export type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/modern/locale/index.d.ts

@@ -0,0 +1,82 @@
+import { ComponentsPropsList } from "../styles/props.js";
+export interface Localization {
+  components?: {
+    MuiAlert?: {
+      defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+    };
+    MuiBreadcrumbs?: {
+      defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+    };
+    MuiTablePagination?: {
+      defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+    };
+    MuiRating?: {
+      defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+    };
+    MuiAutocomplete?: {
+      defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+    };
+    MuiPagination?: {
+      defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+    };
+  };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSA: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const beBY: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const hrHR: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kuCKB: Localization;
+export declare const kuLatn: Localization;
+export declare const kkKZ: Localization;
+export declare const mkMK: Localization;
+export declare const myMY: Localization;
+export declare const msMS: Localization;
+export declare const neNP: Localization;
+export declare const nbNO: Localization;
+export declare const nnNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const psAF: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const srRS: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const tlTL: Localization;
+export declare const ukUA: Localization;
+export declare const urPK: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

package/modern/styles/ThemeProvider.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { DefaultTheme } from '@mui/system';
+import { CssThemeVariables } from "./createThemeNoVars.js";
+type ThemeProviderCssVariablesProps = CssThemeVariables extends {
+  enabled: true;
+} ? {
+  /**
+   * The node for attaching the `theme.colorSchemeSelector`.
+   * @default document
+   */
+  colorSchemeNode?: Element | null;
+  /**
+   * If `true`, the provider creates its own context and generate stylesheet as if it is a root `ThemeProvider`.
+   */
+  disableNestedContext?: boolean;
+  /**
+   * If `true`, the style sheet for CSS theme variables won't be generated.
+   *
+   * This is useful for controlling nested ThemeProvider behavior.
+   * @default false
+   */
+  disableStyleSheetGeneration?: boolean;
+} : {};
+export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderCssVariablesProps {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  /**
+   * The document used to perform `disableTransitionOnChange` feature
+   * @default document
+   */
+  documentNode?: Document | null;
+  /**
+   * The default mode when the local storage has no mode yet,
+   * requires the theme to have `colorSchemes` with light and dark.
+   * @default 'system'
+   */
+  defaultMode?: 'light' | 'dark' | 'system';
+  /**
+   * The window that attaches the 'storage' event listener
+   * @default window
+   */
+  storageWindow?: Window | null;
+  /**
+   * localStorage key used to store application `mode`
+   * @default 'mui-mode'
+   */
+  modeStorageKey?: string;
+  /**
+   * localStorage key used to store `colorScheme`
+   * @default 'mui-color-scheme'
+   */
+  colorSchemeStorageKey?: string;
+  noSsr?: boolean;
+  /**
+   * Disable CSS transitions when switching between modes or color schemes
+   * @default false
+   */
+  disableTransitionOnChange?: boolean;
+}
+export default function ThemeProvider<Theme = DefaultTheme>({
+  theme,
+  ...props
+}: ThemeProviderProps<Theme>): React.JSX.Element;
+export {};

package/modern/styles/ThemeProviderNoVars.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { DefaultTheme } from '@mui/system';
+export interface ThemeProviderNoVarsProps<Theme = DefaultTheme> {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+export default function ThemeProviderNoVars<Theme = DefaultTheme>({
+  theme: themeInput,
+  ...props
+}: ThemeProviderNoVarsProps<Theme>): React.ReactElement<ThemeProviderNoVarsProps<Theme>>;

package/modern/styles/ThemeProviderWithVars.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { SupportedColorScheme } from "./createThemeWithVars.js";
+declare const useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
+declare function Experimental_CssVarsProvider(props: any): React.JSX.Element;
+declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme()` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+export declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+  theme?: {
+    cssVariables?: false;
+    cssVarPrefix?: string;
+    colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+    colorSchemeSelector?: "media" | "class" | "data" | string;
+  } | {
+    $$material: {
+      cssVariables?: false;
+      cssVarPrefix?: string;
+      colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+      colorSchemeSelector?: "media" | "class" | "data" | string;
+    };
+  } | undefined;
+  defaultMode?: "light" | "dark" | "system";
+  documentNode?: Document | null;
+  colorSchemeNode?: Element | null;
+  storageWindow?: Window | null;
+  disableNestedContext?: boolean;
+  disableStyleSheetGeneration?: boolean;
+}>) => React.JSX.Element;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/modern/styles/adaptV4Theme.d.ts

@@ -0,0 +1,36 @@
+import { BreakpointsOptions, ShapeOptions, SpacingOptions } from '@mui/system';
+import { MixinsOptions } from "./createMixins.js";
+import { Palette, PaletteOptions } from "./createPalette.js";
+import { TypographyOptions } from "./createTypography.js";
+import { Shadows } from "./shadows.js";
+import { TransitionsOptions } from "./createTransitions.js";
+import { ZIndexOptions } from "./zIndex.js";
+import { ComponentsOverrides } from "./overrides.js";
+import { ComponentsVariants } from "./variants.js";
+import { ComponentsProps } from "./props.js";
+import { Theme } from "./createTheme.js";
+export type Direction = 'ltr' | 'rtl';
+export interface DeprecatedThemeOptions {
+  shape?: ShapeOptions;
+  breakpoints?: BreakpointsOptions;
+  direction?: Direction;
+  mixins?: MixinsOptions;
+  overrides?: ComponentsOverrides;
+  palette?: PaletteOptions;
+  props?: ComponentsProps;
+  shadows?: Shadows;
+  spacing?: SpacingOptions;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  variants?: ComponentsVariants;
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+}
+
+/**
+ * Generate a theme base on the V4 theme options received.
+ * @deprecated Follow the upgrade guide on https://mui.com/r/migration-v4#theme
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function adaptV4Theme(options?: DeprecatedThemeOptions): Theme;