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

package/FormControlLabel/FormControlLabel.d.ts

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme, InternalStandardProps as StandardProps } from "../index.js";
+import Typography, { TypographyProps } from "../Typography/index.js";
+import { FormControlLabelClasses } from "./formControlLabelClasses.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+export interface FormControlLabelSlots {
+  /**
+   * The component that renders the label.
+   * This is unused if `disableTypography` is true.
+   * @default Typography
+   */
+  typography: React.ElementType;
+}
+export type FormControlLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<FormControlLabelSlots, {
+  typography: SlotProps<typeof Typography, {}, FormControlLabelProps>;
+}>;
+export interface FormControlLabelProps extends StandardProps<React.LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'onChange'>, FormControlLabelSlotsAndSlotProps {
+  /**
+   * If `true`, the component appears selected.
+   */
+  checked?: boolean;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormControlLabelClasses>;
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  componentsProps?: {
+    /**
+     * Props applied to the Typography wrapper of the passed label.
+     * This is unused if disableTypography is true.
+     * @default {}
+     */
+    typography?: TypographyProps;
+  };
+  /**
+   * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
+   */
+  control: React.ReactElement<unknown, any>;
+  /**
+   * If `true`, the control is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is rendered as it is passed without an additional typography node.
+   */
+  disableTypography?: boolean;
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef?: React.Ref<any>;
+  /**
+   * A text or an element to be used in an enclosing label element.
+   */
+  label: React.ReactNode;
+  /**
+   * The position of the label.
+   * @default 'end'
+   */
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  name?: string;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: (event: React.SyntheticEvent, checked: boolean) => void;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value of the component.
+   */
+  value?: unknown;
+}
+
+/**
+ * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
+ * Use this component if you want to display an extra label.
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://next.mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormControlLabel API](https://next.mui.com/material-ui/api/form-control-label/)
+ */
+export default function FormControlLabel(props: FormControlLabelProps): React.JSX.Element;

package/FormControlLabel/formControlLabelClasses.d.ts

@@ -0,0 +1,24 @@
+export interface FormControlLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `labelPlacement="start"`. */
+  labelPlacementStart: string;
+  /** Styles applied to the root element if `labelPlacement="top"`. */
+  labelPlacementTop: string;
+  /** Styles applied to the root element if `labelPlacement="bottom"`. */
+  labelPlacementBottom: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the label's Typography component. */
+  label: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+  /** Styles applied to the asterisk element. */
+  asterisk: string;
+}
+export type FormControlLabelClassKey = keyof FormControlLabelClasses;
+export declare function getFormControlLabelUtilityClasses(slot: string): string;
+declare const formControlLabelClasses: FormControlLabelClasses;
+export default formControlLabelClasses;

package/FormControlLabel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./FormControlLabel.js";
+export * from "./FormControlLabel.js";
+export { default as formControlLabelClasses } from "./formControlLabelClasses.js";
+export * from "./formControlLabelClasses.js";

package/FormGroup/FormGroup.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { FormGroupClasses } from "./formGroupClasses.js";
+export interface FormGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormGroupClasses>;
+  /**
+   * Display group of elements in a compact row.
+   * @default false
+   */
+  row?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * `FormGroup` wraps controls such as `Checkbox` and `Switch`.
+ * It provides compact row layout.
+ * For the `Radio`, you should be using the `RadioGroup` component instead of this one.
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Switch](https://next.mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormGroup API](https://next.mui.com/material-ui/api/form-group/)
+ */
+export default function FormGroup(props: FormGroupProps): React.JSX.Element;

package/FormGroup/formGroupClasses.d.ts

@@ -0,0 +1,12 @@
+export interface FormGroupClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `row={true}`. */
+  row: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+}
+export type FormGroupClassKey = keyof FormGroupClasses;
+export declare function getFormGroupUtilityClass(slot: string): string;
+declare const formGroupClasses: FormGroupClasses;
+export default formGroupClasses;

package/FormGroup/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./FormGroup.js";
+export * from "./FormGroup.js";
+export { default as formGroupClasses } from "./formGroupClasses.js";
+export * from "./formGroupClasses.js";

package/FormHelperText/FormHelperText.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { FormHelperTextClasses } from "./formHelperTextClasses.js";
+export interface FormHelperTextPropsVariantOverrides {}
+export interface FormHelperTextOwnProps {
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormHelperTextClasses>;
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: OverridableStringUnion<'standard' | 'outlined' | 'filled', FormHelperTextPropsVariantOverrides>;
+}
+export interface FormHelperTextTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'p'> {
+  props: AdditionalProps & FormHelperTextOwnProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Text Field](https://next.mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [FormHelperText API](https://next.mui.com/material-ui/api/form-helper-text/)
+ */
+declare const FormHelperText: OverridableComponent<FormHelperTextTypeMap>;
+export type FormHelperTextProps<RootComponent extends React.ElementType = FormHelperTextTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormHelperTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default FormHelperText;

package/FormHelperText/formHelperTextClasses.d.ts

@@ -0,0 +1,22 @@
+export interface FormHelperTextClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `variant="filled"` or `variant="outlined"`. */
+  contained: string;
+  /** State class applied to the root element if `focused={true}`. */
+  focused: string;
+  /** State class applied to the root element if `filled={true}`. */
+  filled: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+}
+export type FormHelperTextClassKey = keyof FormHelperTextClasses;
+export declare function getFormHelperTextUtilityClasses(slot: string): string;
+declare const formHelperTextClasses: FormHelperTextClasses;
+export default formHelperTextClasses;

package/FormHelperText/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./FormHelperText.js";
+export * from "./FormHelperText.js";
+export { default as formHelperTextClasses } from "./formHelperTextClasses.js";
+export * from "./formHelperTextClasses.js";

package/FormLabel/FormLabel.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { Theme } from "../styles/index.js";
+import { OverridableComponent, OverrideProps, OverridableTypeMap } from "../OverridableComponent/index.js";
+import { FormLabelClasses } from "./formLabelClasses.js";
+export interface FormLabelPropsColorOverrides {}
+
+/**
+ * This type is kept for compatibility. Use `FormLabelOwnProps` instead.
+ */
+export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+export interface FormLabelOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.LabelHTMLAttributes<HTMLLabelElement>['children'];
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<FormLabelClasses>;
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', FormLabelPropsColorOverrides>;
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled?: boolean;
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused?: boolean;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface FormLabelTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'label'> {
+  props: AdditionalProps & FormLabelBaseProps & FormLabelOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Radio Group](https://next.mui.com/material-ui/react-radio-button/)
+ * - [Switch](https://next.mui.com/material-ui/react-switch/)
+ *
+ * API:
+ *
+ * - [FormLabel API](https://next.mui.com/material-ui/api/form-label/)
+ */
+declare const FormLabel: OverridableComponent<FormLabelTypeMap>;
+export interface ExtendFormLabelTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & Pick<FormLabelOwnProps, 'filled' | 'color'>;
+  defaultComponent: TypeMap['defaultComponent'];
+}
+export type FormLabelProps<RootComponent extends React.ElementType = FormLabelTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<FormLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default FormLabel;

package/FormLabel/formLabelClasses.d.ts

@@ -0,0 +1,22 @@
+export interface FormLabelClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the color is secondary. */
+  colorSecondary: string;
+  /** State class applied to the root element if `focused={true}`. */
+  focused: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** State class applied to the root element if `filled={true}`. */
+  filled: string;
+  /** State class applied to the root element if `required={true}`. */
+  required: string;
+  /** Styles applied to the asterisk element. */
+  asterisk: string;
+}
+export type FormLabelClassKey = keyof FormLabelClasses;
+export declare function getFormLabelUtilityClasses(slot: string): string;
+declare const formLabelClasses: FormLabelClasses;
+export default formLabelClasses;

package/FormLabel/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./FormLabel.js";
+export * from "./FormLabel.js";
+export { default as formLabelClasses } from "./formLabelClasses.js";
+export * from "./formLabelClasses.js";

package/GlobalStyles/GlobalStyles.d.ts

@@ -0,0 +1,20 @@
+import { GlobalStylesProps as StyledGlobalStylesProps } from '@mui/system';
+import { Theme } from "../styles/index.js";
+export interface GlobalStylesProps {
+  /**
+   * The styles you want to apply globally.
+   */
+  styles: StyledGlobalStylesProps<Theme>['styles'];
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [How to customize](https://next.mui.com/material-ui/customization/how-to-customize/)
+ *
+ * API:
+ *
+ * - [GlobalStyles API](https://next.mui.com/material-ui/api/global-styles/)
+ */
+export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement<unknown>;

package/GlobalStyles/index.d.ts

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

package/Grid/Grid.d.ts

@@ -0,0 +1,111 @@
+import { SxProps, SystemProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from '@mui/types';
+import { Theme, Breakpoint } from "../styles/index.js";
+type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
+export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridSpacing = number | string;
+export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type GridSize = 'auto' | 'grow' | number | false;
+export type GridOffset = 'auto' | number;
+export interface GridBaseProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * The number of columns.
+   * @default 12
+   */
+  columns?: ResponsiveStyleValue<number>;
+  /**
+   * Defines the horizontal space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  columnSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * If `true`, the component will have the flex *container* behavior.
+   * You should be wrapping *items* with a *container*.
+   * @default false
+   */
+  container?: boolean;
+  /**
+   * Defines the `flex-direction` style property.
+   * It is applied for all screen sizes.
+   * @default 'row'
+   */
+  direction?: ResponsiveStyleValue<GridDirection>;
+  /**
+   * Defines the offset value for the type `item` components.
+   */
+  offset?: ResponsiveStyleValue<GridOffset>;
+  /**
+   * @internal
+   * The level of the grid starts from `0` and increases when the grid nests
+   * inside another grid. Nesting is defined as a container Grid being a direct
+   * child of a container Grid.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid container> // level 1
+   *     <Grid container> // level 2
+   * ```
+   *
+   * Only consecutive grid is considered nesting. A grid container will start at
+   * `0` if there are non-Grid container element above it.
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <div>
+   *     <Grid container> // level 0
+   * ```
+   *
+   * ```js
+   * <Grid container> // level 0
+   *   <Grid>
+   *     <Grid container> // level 0
+   * ```
+   */
+  unstable_level?: number;
+  /**
+   * Defines the vertical space between the type `item` components.
+   * It overrides the value of the `spacing` prop.
+   */
+  rowSpacing?: ResponsiveStyleValue<GridSpacing>;
+  /**
+   * Defines the size of the the type `item` components.
+   */
+  size?: ResponsiveStyleValue<GridSize>;
+  /**
+   * Defines the space between the type `item` components.
+   * It can only be used on a type `container` component.
+   * @default 0
+   */
+  spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
+  /**
+   * Defines the `flex-wrap` style property.
+   * It's applied for all screen sizes.
+   * @default 'wrap'
+   */
+  wrap?: GridWrap;
+}
+export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
+  props: P & GridBaseProps & {
+    sx?: SxProps<Theme>;
+  } & SystemProps<Theme>;
+  defaultComponent: D;
+}
+export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
+  component?: React.ElementType;
+}> = OverrideProps<GridTypeMap<P, D>, D>;
+/**
+ *
+ * Demos:
+ *
+ * - [Grid](https://next.mui.com/material-ui/react-grid/)
+ *
+ * API:
+ *
+ * - [Grid API](https://next.mui.com/material-ui/api/grid/)
+ */
+declare const Grid: OverridableComponent<GridTypeMap>;
+export default Grid;

package/Grid/gridClasses.d.ts

@@ -0,0 +1,10 @@
+export interface GridClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `container={true}`. */
+  container: string;
+}
+export type GridClassKey = keyof GridClasses;
+export declare function getGridUtilityClass(slot: string): string;
+declare const gridClasses: GridClasses;
+export default gridClasses;

package/Grid/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./Grid.js";
+export * from "./Grid.js";
+export { default as gridClasses } from "./gridClasses.js";
+export * from "./gridClasses.js";