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

package/Dialog/Dialog.d.ts

@@ -0,0 +1,184 @@
+import * as React from 'react';
+import { SxProps, Breakpoint } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { BackdropProps } from "../Backdrop/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { ModalProps } from "../Modal/index.js";
+import { TransitionProps } from "../transitions/transition.js";
+import { DialogClasses } from "./dialogClasses.js";
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
+export interface DialogSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.ElementType;
+  /**
+   * The component that renders the paper.
+   * @default Paper
+   */
+  paper?: React.ElementType;
+  /**
+   * The component that renders the container.
+   */
+  container?: React.ElementType;
+  /**
+   * The component that renders the backdrop.
+   */
+  backdrop?: React.ElementType;
+  /**
+   * The component that renders the root.
+   */
+  root?: React.ElementType;
+}
+export interface DialogTransitionSlotPropsOverrides {}
+export interface DialogPaperSlotPropsOverrides {}
+export interface DialogContainerSlotPropsOverrides {}
+export interface DialogBackdropSlotPropsOverrides {}
+export interface DialogRootSlotPropsOverrides {}
+export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<DialogSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+   */
+  root: SlotProps<React.ElementType<ModalProps>, DialogRootSlotPropsOverrides, DialogOwnerState>;
+  /**
+   * Props forwarded to the backdrop slot.
+   * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+   */
+  backdrop: SlotProps<React.ElementType<BackdropProps>, DialogBackdropSlotPropsOverrides, DialogOwnerState>;
+  /**
+   * Props forwarded to the container slot.
+   * By default, the avaible props are based on a div element.
+   */
+  container: SlotProps<'div', DialogContainerSlotPropsOverrides, DialogOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+   */
+  transition: SlotComponentProps<React.ElementType, TransitionProps & DialogTransitionSlotPropsOverrides, DialogOwnerState>;
+  /**
+   * Props forwarded to the paper slot.
+   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   */
+  paper: SlotProps<React.ElementType<PaperProps>, DialogPaperSlotPropsOverrides, DialogOwnerState>;
+}>;
+export interface DialogProps extends Omit<StandardProps<ModalProps, 'children'>, 'slots' | 'slotProps'>, DialogSlotsAndSlotProps {
+  /**
+   * The id(s) of the element(s) that describe the dialog.
+   */
+  'aria-describedby'?: string;
+  /**
+   * The id(s) of the element(s) that label the dialog.
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal'?: boolean | 'true' | 'false';
+  /**
+   * Dialog children, usually the included sub-components.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogClasses>;
+  /**
+   * If `true`, hitting escape will not fire the `onClose` callback.
+   * @default false
+   */
+  disableEscapeKeyDown?: boolean;
+  /**
+   * If `true`, the dialog is full-screen.
+   * @default false
+   */
+  fullScreen?: boolean;
+  /**
+   * If `true`, the dialog stretches to `maxWidth`.
+   *
+   * Notice that the dialog width grow is limited by the default margin.
+   * @default false
+   */
+  fullWidth?: boolean;
+  /**
+   * Determine the max-width of the dialog.
+   * The dialog width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'sm'
+   */
+  maxWidth?: Breakpoint | false;
+  /**
+   * Callback fired when the component requests to be closed.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
+   */
+  onClose?: ModalProps['onClose'];
+  /**
+   * If `true`, the component is shown.
+   */
+  open: ModalProps['open'];
+  /**
+   * The component used to render the body of the dialog.
+   * @default Paper
+   */
+  PaperComponent?: React.JSXElementConstructor<PaperProps>;
+  /**
+   * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @default {}
+   * @deprecated Use `slotProps.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  PaperProps?: Partial<PaperProps<React.ElementType>>;
+  /**
+   * Determine the container for scrolling the dialog.
+   * @default 'paper'
+   */
+  scroll?: 'body' | 'paper';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
+    children: React.ReactElement<unknown, any>;
+  }>;
+  /**
+   * The duration for the transition, in milliseconds.
+   * You may specify a single timeout for all transitions, or individually with an object.
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
+   */
+  transitionDuration?: TransitionProps['timeout'];
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  TransitionProps?: TransitionProps;
+}
+
+/**
+ * Dialogs are overlaid modal paper based components with a backdrop.
+ *
+ * Demos:
+ *
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [Dialog API](https://next.mui.com/material-ui/api/dialog/)
+ * - inherits [Modal API](https://next.mui.com/material-ui/api/modal/)
+ */
+export default function Dialog(props: DialogProps): React.JSX.Element;
+export interface DialogOwnerState extends Omit<DialogProps, 'slots' | 'slotProps'> {}

package/Dialog/DialogContext.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface DialogContextValue {
+  titleId?: string;
+}
+declare const DialogContext: React.Context<DialogContextValue>;
+export default DialogContext;

package/Dialog/dialogClasses.d.ts

@@ -0,0 +1,36 @@
+export interface DialogClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the container element if `scroll="paper"`. */
+  scrollPaper: string;
+  /** Styles applied to the container element if `scroll="body"`. */
+  scrollBody: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the Paper component. */
+  paper: string;
+  /** Styles applied to the Paper component if `scroll="paper"`. */
+  paperScrollPaper: string;
+  /** Styles applied to the Paper component if `scroll="body"`. */
+  paperScrollBody: string;
+  /** Styles applied to the Paper component if `maxWidth=false`. */
+  paperWidthFalse: string;
+  /** Styles applied to the Paper component if `maxWidth="xs"`. */
+  paperWidthXs: string;
+  /** Styles applied to the Paper component if `maxWidth="sm"`. */
+  paperWidthSm: string;
+  /** Styles applied to the Paper component if `maxWidth="md"`. */
+  paperWidthMd: string;
+  /** Styles applied to the Paper component if `maxWidth="lg"`. */
+  paperWidthLg: string;
+  /** Styles applied to the Paper component if `maxWidth="xl"`. */
+  paperWidthXl: string;
+  /** Styles applied to the Paper component if `fullWidth={true}`. */
+  paperFullWidth: string;
+  /** Styles applied to the Paper component if `fullScreen={true}`. */
+  paperFullScreen: string;
+}
+export type DialogClassKey = keyof DialogClasses;
+export declare function getDialogUtilityClass(slot: string): string;
+declare const dialogClasses: DialogClasses;
+export default dialogClasses;

package/Dialog/index.d.ts

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

package/DialogActions/DialogActions.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { DialogActionsClasses } from "./dialogActionsClasses.js";
+export interface DialogActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogActionsClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * If `true`, the actions do not have additional margin.
+   * @default false
+   */
+  disableSpacing?: boolean;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogActions API](https://next.mui.com/material-ui/api/dialog-actions/)
+ */
+export default function DialogActions(props: DialogActionsProps): React.JSX.Element;

package/DialogActions/dialogActionsClasses.d.ts

@@ -0,0 +1,10 @@
+export interface DialogActionsClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element unless `disableSpacing={true}`. */
+  spacing: string;
+}
+export type DialogActionsClassKey = keyof DialogActionsClasses;
+export declare function getDialogActionsUtilityClass(slot: string): string;
+declare const dialogActionsClasses: DialogActionsClasses;
+export default dialogActionsClasses;

package/DialogActions/index.d.ts

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

package/DialogContent/DialogContent.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { DialogContentClasses } from "./dialogContentClasses.js";
+export interface DialogContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogContentClasses>;
+  /**
+   * Display the top and bottom dividers.
+   * @default false
+   */
+  dividers?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContent API](https://next.mui.com/material-ui/api/dialog-content/)
+ */
+export default function DialogContent(props: DialogContentProps): React.JSX.Element;

package/DialogContent/dialogContentClasses.d.ts

@@ -0,0 +1,10 @@
+export interface DialogContentClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `dividers={true}`. */
+  dividers: string;
+}
+export type DialogContentClassKey = keyof DialogContentClasses;
+export declare function getDialogContentUtilityClass(slot: string): string;
+declare const dialogContentClasses: DialogContentClasses;
+export default dialogContentClasses;

package/DialogContent/index.d.ts

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

package/DialogContentText/DialogContentText.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { TypographyTypeMap } from "../Typography/index.js";
+import { OverrideProps, OverridableComponent } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { DialogContentTextClasses } from "./dialogContentTextClasses.js";
+export interface DialogContentTextOwnProps extends Omit<TypographyTypeMap['props'], 'classes'> {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogContentTextClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface DialogContentTextTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent']> {
+  props: AdditionalProps & DialogContentTextOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContentText API](https://next.mui.com/material-ui/api/dialog-content-text/)
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
+ */
+declare const DialogContentText: OverridableComponent<DialogContentTextTypeMap>;
+export type DialogContentTextProps<RootComponent extends React.ElementType = DialogContentTextTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<DialogContentTextTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default DialogContentText;

package/DialogContentText/dialogContentTextClasses.d.ts

@@ -0,0 +1,8 @@
+export interface DialogContentTextClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type DialogContentTextClassKey = keyof DialogContentTextClasses;
+export declare function getDialogContentTextUtilityClass(slot: string): string;
+declare const dialogContentTextClasses: DialogContentTextClasses;
+export default dialogContentTextClasses;

package/DialogContentText/index.d.ts

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

package/DialogTitle/DialogTitle.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { TypographyTypeMap } from "../Typography/index.js";
+import { DialogTitleClasses } from "./dialogTitleClasses.js";
+export interface DialogTitleOwnProps extends Omit<TypographyTypeMap['props'], 'classes'> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DialogTitleClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface DialogTitleTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = TypographyTypeMap['defaultComponent']> {
+  props: AdditionalProps & DialogTitleOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogTitle API](https://next.mui.com/material-ui/api/dialog-title/)
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
+ */
+declare const DialogTitle: OverridableComponent<DialogTitleTypeMap>;
+export type DialogTitleProps<RootComponent extends React.ElementType = DialogTitleTypeMap['defaultComponent'], AdditionalProps = {
+  component?: React.ElementType;
+}> = OverrideProps<DialogTitleTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default DialogTitle;

package/DialogTitle/dialogTitleClasses.d.ts

@@ -0,0 +1,8 @@
+export interface DialogTitleClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type DialogTitleClassKey = keyof DialogTitleClasses;
+export declare function getDialogTitleUtilityClass(slot: string): string;
+declare const dialogTitleClasses: DialogTitleClasses;
+export default dialogTitleClasses;

package/DialogTitle/index.d.ts

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

package/Divider/Divider.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { OverridableStringUnion } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { DividerClasses } from "./dividerClasses.js";
+export interface DividerPropsVariantOverrides {}
+export interface DividerOwnProps {
+  /**
+   * Absolutely position the element.
+   * @default false
+   */
+  absolute?: boolean;
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<DividerClasses>;
+  /**
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
+   * @default false
+   */
+  flexItem?: boolean;
+  /**
+   * If `true`, the divider will have a lighter color.
+   * @default false
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  light?: boolean;
+  /**
+   * The component orientation.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The text alignment.
+   * @default 'center'
+   */
+  textAlign?: 'center' | 'right' | 'left';
+  /**
+   * The variant to use.
+   * @default 'fullWidth'
+   */
+  variant?: OverridableStringUnion<'fullWidth' | 'inset' | 'middle', DividerPropsVariantOverrides>;
+}
+export interface DividerTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'hr'> {
+  props: AdditionalProps & DividerOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Divider](https://next.mui.com/material-ui/react-divider/)
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [Divider API](https://next.mui.com/material-ui/api/divider/)
+ */
+declare const Divider: OverridableComponent<DividerTypeMap>;
+export type DividerProps<RootComponent extends React.ElementType = DividerTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<DividerTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Divider;

package/Divider/dividerClasses.d.ts

@@ -0,0 +1,38 @@
+export interface DividerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `absolute={true}`. */
+  absolute: string;
+  /** Styles applied to the root element if `variant="inset"`. */
+  inset: string;
+  /** Styles applied to the root element if `variant="fullWidth"`. */
+  fullWidth: string;
+  /** Styles applied to the root element if `light={true}`.
+   * @deprecated
+   */
+  light: string;
+  /** Styles applied to the root element if `variant="middle"`. */
+  middle: string;
+  /** Styles applied to the root element if `orientation="vertical"`. */
+  vertical: string;
+  /** Styles applied to the root element if `flexItem={true}`. */
+  flexItem: string;
+  /** Styles applied to the root element if divider have text. */
+  withChildren: string;
+  /** Styles applied to the root element if divider have text and `orientation="vertical"`.
+   * @deprecated Combine the [.MuiDivider-withChildren](/material-ui/api/divider/#divider-classes-withChildren) and [.MuiDivider-vertical](/material-ui/api/divider/#divider-classes-vertical) classes instead.
+   */
+  withChildrenVertical: string;
+  /** Styles applied to the root element if `textAlign="right" orientation="horizontal"`. */
+  textAlignRight: string;
+  /** Styles applied to the root element if `textAlign="left" orientation="horizontal"`. */
+  textAlignLeft: string;
+  /** Styles applied to the span children element if `orientation="horizontal"`. */
+  wrapper: string;
+  /** Styles applied to the span children element if `orientation="vertical"`. */
+  wrapperVertical: string;
+}
+export type DividerClassKey = keyof DividerClasses;
+export declare function getDividerUtilityClass(slot: string): string;
+declare const dividerClasses: DividerClasses;
+export default dividerClasses;

package/Divider/index.d.ts

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