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

package/CardHeader/CardHeader.d.ts

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { TypographyProps } from "../Typography/index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { CardHeaderClasses } from "./cardHeaderClasses.js";
+export interface CardHeaderRootSlotPropsOverrides {}
+export interface CardHeaderAvatarSlotPropsOverrides {}
+export interface CardHeaderActionSlotPropsOverrides {}
+export interface CardHeaderContentSlotPropsOverrides {}
+export interface CardHeaderTitleSlotPropsOverrides {}
+export interface CardHeaderSubheaderSlotPropsOverrides {}
+export interface CardHeaderSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the avatar slot.
+   * @default 'div'
+   */
+  avatar: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default 'div'
+   */
+  action: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default 'div'
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the title slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  title: React.ElementType;
+  /**
+   * The component that renders the subheader slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  subheader: React.ElementType;
+}
+export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<CardHeaderSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the div element.
+   */
+  root: SlotProps<'div', CardHeaderRootSlotPropsOverrides, CardHeaderOwnerState>;
+  /**
+   * Props forwarded to the avatar slot.
+   * By default, the avaible props are based on the div element.
+   */
+  avatar: SlotProps<'div', CardHeaderAvatarSlotPropsOverrides, CardHeaderOwnerState>;
+  /**
+   * Props forwarded to the action slot.
+   * By default, the avaible props are based on the div element.
+   */
+  action: SlotProps<'div', CardHeaderActionSlotPropsOverrides, CardHeaderOwnerState>;
+  /**
+   * Props forwarded to the content slot.
+   * By default, the avaible props are based on the div element.
+   */
+  content: SlotProps<'div', CardHeaderContentSlotPropsOverrides, CardHeaderOwnerState>;
+  /**
+   * Props forwarded to the title slot (as long as disableTypography is not `true`).
+   * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+   */
+  title: SlotProps<React.ElementType<TypographyProps>, CardHeaderTitleSlotPropsOverrides, CardHeaderOwnerState>;
+  /**
+   * Props forwarded to the subheader slot (as long as disableTypography is not `true`).
+   * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+   */
+  subheader: SlotProps<React.ElementType<TypographyProps>, CardHeaderSubheaderSlotPropsOverrides, CardHeaderOwnerState>;
+}>;
+export interface CardHeaderOwnProps<TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> {
+  /**
+   * The action to display in the card header.
+   */
+  action?: React.ReactNode;
+  /**
+   * The Avatar element to display.
+   */
+  avatar?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardHeaderClasses>;
+  /**
+   * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `title` text, and optional `subheader` text
+   * with the Typography component.
+   * @default false
+   */
+  disableTypography?: boolean;
+  /**
+   * The content of the component.
+   */
+  subheader?: React.ReactNode;
+  /**
+   * These props will be forwarded to the subheader
+   * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  subheaderTypographyProps?: TypographyProps<SubheaderTypographyComponent, {
+    component?: SubheaderTypographyComponent;
+  }>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The content of the component.
+   */
+  title?: React.ReactNode;
+  /**
+   * These props will be forwarded to the title
+   * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  titleTypographyProps?: TypographyProps<TitleTypographyComponent, {
+    component?: TitleTypographyComponent;
+  }>;
+}
+export interface CardHeaderOwnerState extends CardHeaderOwnProps {}
+export interface CardHeaderTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div', TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> {
+  props: AdditionalProps & CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent> & CardHeaderSlotsAndSlotProps;
+  defaultComponent: RootComponent;
+}
+/**
+ *
+ * Demos:
+ *
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardHeader API](https://next.mui.com/material-ui/api/card-header/)
+ */
+declare const CardHeader: OverridableCardHeader;
+export interface OverridableCardHeader extends OverridableComponent<CardHeaderTypeMap> {
+  <RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'>(props: CardHeaderPropsWithComponent<RootComponent, AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent>): React.JSX.Element;
+}
+export type CardHeaderProps<RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> = OverrideProps<CardHeaderTypeMap<AdditionalProps, RootComponent, TitleTypographyComponent, SubheaderTypographyComponent>, RootComponent>;
+export type CardHeaderPropsWithComponent<RootComponent extends React.ElementType = CardHeaderTypeMap['defaultComponent'], AdditionalProps = {}, TitleTypographyComponent extends React.ElementType = 'span', SubheaderTypographyComponent extends React.ElementType = 'span'> = {
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: RootComponent;
+} & CardHeaderProps<RootComponent, AdditionalProps, TitleTypographyComponent, SubheaderTypographyComponent>;
+export default CardHeader;

package/CardHeader/cardHeaderClasses.d.ts

@@ -0,0 +1,18 @@
+export interface CardHeaderClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the avatar element. */
+  avatar: string;
+  /** Styles applied to the action element. */
+  action: string;
+  /** Styles applied to the content wrapper element. */
+  content: string;
+  /** Styles applied to the title Typography element. */
+  title: string;
+  /** Styles applied to the subheader Typography element. */
+  subheader: string;
+}
+export type CardHeaderClassKey = keyof CardHeaderClasses;
+export declare function getCardHeaderUtilityClass(slot: string): string;
+declare const cardHeaderClasses: CardHeaderClasses;
+export default cardHeaderClasses;

package/CardHeader/index.d.ts

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

package/CardMedia/CardMedia.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { CardMediaClasses } from "./cardMediaClasses.js";
+export interface CardMediaOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CardMediaClasses>;
+  /**
+   * Image to be displayed as a background image.
+   * Either `image` or `src` prop must be specified.
+   * Note that caller must specify height otherwise the image will not be visible.
+   */
+  image?: string;
+  /**
+   * An alias for `image` property.
+   * Available only with media components.
+   * Media components: `video`, `audio`, `picture`, `iframe`, `img`.
+   */
+  src?: string;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export interface CardMediaTypeMap<AdditionalProps, RootComponent extends React.ElementType> {
+  props: AdditionalProps & CardMediaOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Card](https://next.mui.com/material-ui/react-card/)
+ *
+ * API:
+ *
+ * - [CardMedia API](https://next.mui.com/material-ui/api/card-media/)
+ */
+declare const CardMedia: OverridableComponent<CardMediaTypeMap<{}, 'div'>>;
+export type CardMediaProps<RootComponent extends React.ElementType = 'div', AdditionalProps = {}> = OverrideProps<CardMediaTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default CardMedia;

package/CardMedia/cardMediaClasses.d.ts

@@ -0,0 +1,12 @@
+export interface CardMediaClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
+  media: string;
+  /** Styles applied to the root element if `component="picture or img"`. */
+  img: string;
+}
+export type CardMediaClassKey = keyof CardMediaClasses;
+export declare function getCardMediaUtilityClass(slot: string): string;
+declare const cardMediaClasses: CardMediaClasses;
+export default cardMediaClasses;

package/CardMedia/index.d.ts

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

package/Checkbox/Checkbox.d.ts

@@ -0,0 +1,131 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { SwitchBaseProps } from "../internal/SwitchBase.js";
+import { CheckboxClasses } from "./checkboxClasses.js";
+export interface CheckboxPropsSizeOverrides {}
+export interface CheckboxPropsColorOverrides {}
+export interface CheckboxRootSlotPropsOverrides {}
+export interface CheckboxInputSlotPropsOverrides {}
+export interface CheckboxSlots {
+  /**
+   * The component that renders the root slot.
+   * @default SwitchBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the input slot.
+   * @default SwitchBase's input
+   */
+  input: React.ElementType;
+}
+export type CheckboxSlotsAndSlotProps = CreateSlotsAndSlotProps<CheckboxSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the div element.
+   */
+  root: SlotProps<React.ElementType<SwitchBaseProps>, CheckboxRootSlotPropsOverrides, CheckboxOwnerState>;
+  /**
+   * Props forwarded to the input slot.
+   * By default, the avaible props are based on the input element.
+   */
+  input: SlotProps<'input', CheckboxInputSlotPropsOverrides, CheckboxOwnerState>;
+}>;
+export interface CheckboxProps extends StandardProps<SwitchBaseProps, 'checkedIcon' | 'color' | 'icon' | 'type' | 'slots' | 'slotProps'>, CheckboxSlotsAndSlotProps {
+  /**
+   * If `true`, the component is checked.
+   */
+  checked?: SwitchBaseProps['checked'];
+  /**
+   * The icon to display when the component is checked.
+   * @default <CheckBoxIcon />
+   */
+  checkedIcon?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<CheckboxClasses>;
+  /**
+   * 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).
+   * @default 'primary'
+   */
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default', CheckboxPropsColorOverrides>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: SwitchBaseProps['disabled'];
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple?: SwitchBaseProps['disableRipple'];
+  /**
+   * The icon to display when the component is unchecked.
+   * @default <CheckBoxOutlineBlankIcon />
+   */
+  icon?: React.ReactNode;
+  /**
+   * The id of the `input` element.
+   */
+  id?: SwitchBaseProps['id'];
+  /**
+   * If `true`, the component appears indeterminate.
+   * This does not set the native input element to indeterminate due
+   * to inconsistent behavior across browsers.
+   * However, we set a `data-indeterminate` attribute on the `input`.
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * The icon to display when the component is indeterminate.
+   * @default <IndeterminateCheckBoxIcon />
+   */
+  indeterminateIcon?: React.ReactNode;
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange?: SwitchBaseProps['onChange'];
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required?: SwitchBaseProps['required'];
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense checkbox styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', CheckboxPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value?: SwitchBaseProps['value'];
+}
+export interface CheckboxOwnerState extends Omit<CheckboxProps, 'slots' | 'slotProps'> {}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Checkbox](https://next.mui.com/material-ui/react-checkbox/)
+ * - [Transfer List](https://next.mui.com/material-ui/react-transfer-list/)
+ *
+ * API:
+ *
+ * - [Checkbox API](https://next.mui.com/material-ui/api/checkbox/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+export default function Checkbox(props: CheckboxProps): React.JSX.Element;

package/Checkbox/checkboxClasses.d.ts

@@ -0,0 +1,22 @@
+export interface CheckboxClasses {
+  /** Class name applied to the root element. */
+  root: string;
+  /** State class applied to the root element if `checked={true}`. */
+  checked: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** State class applied to the root element if `indeterminate={true}`. */
+  indeterminate: string;
+  /** State class applied to the root element if `color="primary"`. */
+  colorPrimary: string;
+  /** State class applied to the root element if `color="secondary"`. */
+  colorSecondary: string;
+  /** State class applied to the root element if `size="small"`. */
+  sizeSmall: string;
+  /** State class applied to the root element if `size="medium"`. */
+  sizeMedium: string;
+}
+export type CheckboxClassKey = keyof CheckboxClasses;
+export declare function getCheckboxUtilityClass(slot: string): string;
+declare const checkboxClasses: CheckboxClasses;
+export default checkboxClasses;

package/Checkbox/index.d.ts

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

package/Chip/Chip.d.ts

@@ -0,0 +1,107 @@
+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 { ChipClasses } from "./chipClasses.js";
+export interface ChipPropsVariantOverrides {}
+export interface ChipPropsSizeOverrides {}
+export interface ChipPropsColorOverrides {}
+export interface ChipOwnProps {
+  /**
+   * The Avatar element to display.
+   */
+  avatar?: React.ReactElement<unknown>;
+  /**
+   * This prop isn't supported.
+   * Use the `component` prop if you need to change the children structure.
+   */
+  children?: null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ChipClasses>;
+  /**
+   * If `true`, the chip will appear clickable, and will raise when pressed,
+   * even if the onClick prop is not defined.
+   * If `false`, the chip will not appear clickable, even if onClick prop is defined.
+   * This can be used, for example,
+   * along with the component prop to indicate an anchor Chip is clickable.
+   * Note: this controls the UI and does not affect the onClick event.
+   */
+  clickable?: boolean;
+  /**
+   * 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).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ChipPropsColorOverrides>;
+  /**
+   * Override the default delete icon element. Shown only if `onDelete` is set.
+   */
+  deleteIcon?: React.ReactElement<unknown>;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Icon element.
+   */
+  icon?: React.ReactElement<unknown>;
+  /**
+   * The content of the component.
+   */
+  label?: React.ReactNode;
+  /**
+   * Callback fired when the delete icon is clicked.
+   * If set, the delete icon will be shown.
+   */
+  onDelete?: React.EventHandler<any>;
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>;
+  /**
+   * If `true`, allows the disabled chip to escape focus.
+   * If `false`, allows the disabled chip to receive focus.
+   * @default false
+   */
+  skipFocusWhenDisabled?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   *  @ignore
+   */
+  tabIndex?: number;
+  /**
+   * The variant to use.
+   * @default 'filled'
+   */
+  variant?: OverridableStringUnion<'filled' | 'outlined', ChipPropsVariantOverrides>;
+}
+export interface ChipTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
+  props: AdditionalProps & ChipOwnProps;
+  defaultComponent: RootComponent;
+}
+
+/**
+ * Chips represent complex entities in small blocks, such as a contact.
+ *
+ * Demos:
+ *
+ * - [Chip](https://next.mui.com/material-ui/react-chip/)
+ *
+ * API:
+ *
+ * - [Chip API](https://next.mui.com/material-ui/api/chip/)
+ */
+declare const Chip: OverridableComponent<ChipTypeMap>;
+export type ChipProps<RootComponent extends React.ElementType = ChipTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ChipTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default Chip;