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

package/modern/Link/Link.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+import { SxProps } from '@mui/system';
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../styles/index.js";
+import { TypographyOwnProps } from "../Typography/index.js";
+import { LinkClasses } from "./linkClasses.js";
+export interface LinkOwnProps extends DistributiveOmit<LinkBaseProps, 'classes'> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<LinkClasses>;
+  /**
+   * The color of the link.
+   * @default 'primary'
+   */
+  color?: TypographyOwnProps['color'];
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * `classes` prop applied to the [`Typography`](https://mui.com/material-ui/api/typography/) element.
+   */
+  TypographyClasses?: TypographyOwnProps['classes'];
+  /**
+   * Controls when the link should have an underline.
+   * @default 'always'
+   */
+  underline?: 'none' | 'hover' | 'always';
+  /**
+   * Applies the theme typography styles.
+   * @default 'inherit'
+   */
+  variant?: TypographyOwnProps['variant'];
+}
+export interface LinkTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'a'> {
+  props: AdditionalProps & LinkOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
+ * - [Links](https://next.mui.com/material-ui/react-link/)
+ *
+ * API:
+ *
+ * - [Link API](https://next.mui.com/material-ui/api/link/)
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
+ */
+declare const Link: OverridableComponent<LinkTypeMap>;
+export type LinkBaseProps = DistributiveOmit<TypographyOwnProps, 'children' | 'color' | 'variant' | 'classes'>;
+export type LinkProps<RootComponent extends React.ElementType = LinkTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<LinkTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Link;

package/modern/Link/getTextDecoration.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from "../styles/index.js";
+declare const getTextDecoration: <T extends Theme>({
+  theme,
+  ownerState
+}: {
+  theme: T;
+  ownerState: {
+    color: string;
+  };
+}) => string;
+export default getTextDecoration;

package/modern/Link/index.d.ts

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

package/modern/Link/linkClasses.d.ts

@@ -0,0 +1,18 @@
+export interface LinkClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `underline="none"`. */
+  underlineNone: string;
+  /** Styles applied to the root element if `underline="hover"`. */
+  underlineHover: string;
+  /** Styles applied to the root element if `underline="always"`. */
+  underlineAlways: string;
+  /** Styles applied to the root element if `component="button"`. */
+  button: string;
+  /** State class applied to the root element if the link is keyboard focused. */
+  focusVisible: string;
+}
+export type LinkClassKey = keyof LinkClasses;
+export declare function getLinkUtilityClass(slot: string): string;
+declare const linkClasses: LinkClasses;
+export default linkClasses;

package/modern/List/List.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { OverridableComponent, OverridableTypeMap, OverrideProps } from "../OverridableComponent/index.js";
+import { ListClasses } from "./listClasses.js";
+export interface ListOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used for
+   * the list and list items.
+   * The prop is available to descendant components as the `dense` context.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, vertical padding is removed from the list.
+   * @default false
+   */
+  disablePadding?: boolean;
+  /**
+   * The content of the subheader, normally `ListSubheader`.
+   */
+  subheader?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface ListTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'ul'> {
+  props: AdditionalProps & ListOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * utility to create component types that inherit props from List.
+ */
+export interface ExtendListTypeMap<TypeMap extends OverridableTypeMap> {
+  props: TypeMap['props'] & ListTypeMap['props'];
+  defaultComponent: TypeMap['defaultComponent'];
+}
+export type ExtendList<TypeMap extends OverridableTypeMap> = OverridableComponent<ExtendListTypeMap<TypeMap>>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [List API](https://next.mui.com/material-ui/api/list/)
+ */
+declare const List: ExtendList<ListTypeMap>;
+export type ListProps<RootComponent extends React.ElementType = ListTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default List;

package/modern/List/ListContext.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const ListContext: React.Context<{
+  dense?: boolean;
+}>;
+export default ListContext;

package/modern/List/index.d.ts

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

package/modern/List/listClasses.d.ts

@@ -0,0 +1,14 @@
+export interface ListClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element unless `disablePadding={true}`. */
+  padding: string;
+  /** Styles applied to the root element if dense. */
+  dense: string;
+  /** Styles applied to the root element if a `subheader` is provided. */
+  subheader: string;
+}
+export type ListClassKey = keyof ListClasses;
+export declare function getListUtilityClass(slot: string): string;
+declare const listClasses: ListClasses;
+export default listClasses;

package/modern/ListItem/ListItem.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../styles/index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { ListItemClasses } from "./listItemClasses.js";
+export interface ListItemComponentsPropsOverrides {}
+
+/**
+ * This type is kept for compatibility. Use `ListItemOwnProps` instead.
+ */
+export interface ListItemBaseProps {
+  /**
+   * Defines the `align-items` style property.
+   * @default 'center'
+   */
+  alignItems?: 'flex-start' | 'center';
+  /**
+   * The content of the component if a `ListItemSecondaryAction` is used it must
+   * be the last child.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListItemClasses>;
+  /**
+   * The container component used when a `ListItemSecondaryAction` is the last child.
+   * @default 'li'
+   * @deprecated Use the `component` or `slots.root` 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.
+   */
+  ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
+  /**
+   * Props applied to the container component if used.
+   * @default {}
+   * @deprecated Use the `slotProps.root` 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.
+   */
+  ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent List component.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, all padding is removed.
+   * @default false
+   */
+  disablePadding?: boolean;
+  /**
+   * If `true`, a 1px light border is added to the bottom of the list item.
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * The element to display at the end of ListItem.
+   */
+  secondaryAction?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface ListItemOwnProps extends ListItemBaseProps {
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated Use the `slots` 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.
+   * @default {}
+   */
+  components?: {
+    Root?: React.ElementType;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @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.
+   * @default {}
+   */
+  componentsProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+  };
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+  };
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots?: {
+    root?: React.ElementType;
+  };
+}
+export interface ListItemTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & ListItemOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * Uses an additional container component if `ListItemSecondaryAction` is the last child.
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [ListItem API](https://next.mui.com/material-ui/api/list-item/)
+ */
+declare const ListItem: OverridableComponent<ListItemTypeMap<{}, 'li'>>;
+export type ListItemProps<RootComponent extends React.ElementType = 'li', AdditionalProps = {}> = OverrideProps<ListItemTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default ListItem;

package/modern/ListItem/index.d.ts

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

package/modern/ListItem/listItemClasses.d.ts

@@ -0,0 +1,22 @@
+export interface ListItemClasses {
+  /** Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
+  root: string;
+  /** Styles applied to the container element if `children` includes `ListItemSecondaryAction`. */
+  container: string;
+  /** Styles applied to the component element if dense. */
+  dense: string;
+  /** Styles applied to the component element if `alignItems="flex-start"`. */
+  alignItemsFlexStart: string;
+  /** Styles applied to the inner `component` element if `divider={true}`. */
+  divider: string;
+  /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+  gutters: string;
+  /** Styles applied to the root element unless `disablePadding={true}`. */
+  padding: string;
+  /** Styles applied to the component element if `children` includes `ListItemSecondaryAction`. */
+  secondaryAction: string;
+}
+export type ListItemClassKey = keyof ListItemClasses;
+export declare function getListItemUtilityClass(slot: string): string;
+declare const listItemClasses: ListItemClasses;
+export default listItemClasses;

package/modern/ListItemAvatar/ListItemAvatar.d.ts

@@ -0,0 +1,30 @@
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { ListItemAvatarClasses } from "./listItemAvatarClasses.js";
+export interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component, normally an `Avatar`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListItemAvatarClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * A simple wrapper to apply `List` styles to an `Avatar`.
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemAvatar API](https://next.mui.com/material-ui/api/list-item-avatar/)
+ */
+export default function ListItemAvatar(props: ListItemAvatarProps): React.JSX.Element;

package/modern/ListItemAvatar/index.d.ts

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

package/modern/ListItemAvatar/listItemAvatarClasses.d.ts

@@ -0,0 +1,10 @@
+export interface ListItemAvatarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+  alignItemsFlexStart: string;
+}
+export type ListItemAvatarClassKey = keyof ListItemAvatarClasses;
+export declare function getListItemAvatarUtilityClass(slot: string): string;
+declare const listItemAvatarClasses: ListItemAvatarClasses;
+export default listItemAvatarClasses;

package/modern/ListItemButton/ListItemButton.d.ts

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../styles/index.js";
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { OverrideProps } from "../OverridableComponent/index.js";
+import { ListItemButtonClasses } from "./listItemButtonClasses.js";
+
+/**
+ * This interface is kept for backward compatibility. To extend `LitItemButton`
+ * props through module augmentation, use `ListItemButtonOwnProps`.
+ */
+export interface ListItemButtonBaseProps {
+  /**
+   * Defines the `align-items` style property.
+   * @default 'center'
+   */
+  alignItems?: 'flex-start' | 'center';
+  /**
+   * If `true`, the list item is focused during the first mount.
+   * Focus will also be triggered if the value changes from false to true.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * The content of the component if a `ListItemSecondaryAction` is used it must
+   * be the last child.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListItemButtonClasses>;
+  /**
+   * If `true`, compact vertical padding designed for keyboard and mouse input is used.
+   * The prop defaults to the value inherited from the parent List component.
+   * @default false
+   */
+  dense?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, a 1px light border is added to the bottom of the list item.
+   * @default false
+   */
+  divider?: boolean;
+  /**
+   * Use to apply selected styling.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface ListItemButtonOwnProps extends ListItemButtonBaseProps {}
+export type ListItemButtonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & ListItemButtonOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemButton API](https://next.mui.com/material-ui/api/list-item-button/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+declare const ListItemButton: ExtendButtonBase<ListItemButtonTypeMap>;
+export type ListItemButtonProps<RootComponent extends React.ElementType = ListItemButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ListItemButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default ListItemButton;

package/modern/ListItemButton/index.d.ts

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

package/modern/ListItemButton/listItemButtonClasses.d.ts

@@ -0,0 +1,22 @@
+export interface ListItemButtonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the `component`'s `focusVisibleClassName` prop. */
+  focusVisible: string;
+  /** Styles applied to the component element if dense. */
+  dense: string;
+  /** Styles applied to the component element if `alignItems="flex-start"`. */
+  alignItemsFlexStart: string;
+  /** State class applied to the inner `component` element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the inner `component` element if `divider={true}`. */
+  divider: string;
+  /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
+  gutters: string;
+  /** State class applied to the root element if `selected={true}`. */
+  selected: string;
+}
+export type ListItemButtonClassKey = keyof ListItemButtonClasses;
+export declare function getListItemButtonUtilityClass(slot: string): string;
+declare const listItemButtonClasses: ListItemButtonClasses;
+export default listItemButtonClasses;

package/modern/ListItemIcon/ListItemIcon.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { ListItemIconClasses } from "./listItemIconClasses.js";
+export interface ListItemIconProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component, normally `Icon`, `SvgIcon`,
+   * or a `@mui/icons-material` SVG icon element.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListItemIconClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * A simple wrapper to apply `List` styles to an `Icon` or `SvgIcon`.
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemIcon API](https://next.mui.com/material-ui/api/list-item-icon/)
+ */
+export default function ListItemIcon(props: ListItemIconProps): React.JSX.Element;

package/modern/ListItemIcon/index.d.ts

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

package/modern/ListItemIcon/listItemIconClasses.d.ts

@@ -0,0 +1,10 @@
+export interface ListItemIconClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
+  alignItemsFlexStart: string;
+}
+export type ListItemIconClassKey = keyof ListItemIconClasses;
+export declare function getListItemIconUtilityClass(slot: string): string;
+declare const listItemIconClasses: ListItemIconClasses;
+export default listItemIconClasses;

package/modern/ListItemSecondaryAction/ListItemSecondaryAction.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { ListItemSecondaryActionClasses } from "./listItemSecondaryActionClasses.js";
+export interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component, normally an `IconButton` or selection control.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ListItemSecondaryActionClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ * Must be used as the last child of ListItem to function properly.
+ *
+ * Demos:
+ *
+ * - [Lists](https://next.mui.com/material-ui/react-list/)
+ *
+ * API:
+ *
+ * - [ListItemSecondaryAction API](https://next.mui.com/material-ui/api/list-item-secondary-action/)
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+ */
+declare const ListItemSecondaryAction: ((props: ListItemSecondaryActionProps) => React.JSX.Element) & {
+  muiName: string;
+};
+export default ListItemSecondaryAction;

package/modern/ListItemSecondaryAction/index.d.ts

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

package/modern/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts

@@ -0,0 +1,10 @@
+export interface ListItemSecondaryActionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
+  disableGutters: string;
+}
+export type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
+export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
+declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
+export default listItemSecondaryActionClasses;