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

package/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/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/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/Accordion/Accordion.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from "../index.js";
+import { TransitionProps } from "../transitions/transition.js";
+import { AccordionClasses } from "./accordionClasses.js";
+import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
+import { ExtendPaperTypeMap } from "../Paper/Paper.js";
+import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
+export interface AccordionSlots {
+  /**
+   * The component that renders the heading.
+   * @default 'h3'
+   */
+  heading: React.ElementType;
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition: React.ElementType;
+}
+export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionHeadingSlotPropsOverrides {}
+export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots, {
+  /**
+   * Props forwarded to the heading slot.
+   * By default, the avaible props are based on the h3 element.
+   */
+  heading: SlotProps<'h3', AccordionHeadingSlotPropsOverrides, AccordionOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
+   */
+  transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
+}>;
+export type AccordionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendPaperTypeMap<{
+  props: AdditionalProps & {
+    /**
+     * The content of the component.
+     */
+    children: NonNullable<React.ReactNode>;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<AccordionClasses>;
+    /**
+     * If `true`, expands the accordion by default.
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+     * @default false
+     */
+    disableGutters?: boolean;
+    /**
+     * If `true`, expands the accordion, otherwise collapse it.
+     * Setting this prop enables control over the accordion.
+     */
+    expanded?: boolean;
+    /**
+     * Callback fired when the expand/collapse state is changed.
+     *
+     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+     * @param {boolean} expanded The `expanded` state of the accordion.
+     */
+    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+    /**
+     * 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.
+     * @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>;
+    }>;
+    /**
+     * 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;
+  } & AccordionSlotsAndSlotProps;
+  defaultComponent: RootComponent;
+}, 'onChange' | 'classes'>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Accordion](https://next.mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [Accordion API](https://next.mui.com/material-ui/api/accordion/)
+ * - inherits [Paper API](https://next.mui.com/material-ui/api/paper/)
+ */
+declare const Accordion: OverridableComponent<AccordionTypeMap>;
+export type AccordionProps<RootComponent extends React.ElementType = AccordionTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AccordionTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export interface AccordionOwnerState extends AccordionProps {}
+export default Accordion;

package/modern/Accordion/accordionClasses.d.ts

@@ -0,0 +1,20 @@
+export interface AccordionClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the heading element. */
+  heading: string;
+  /** Styles applied to the root element unless `square={true}`. */
+  rounded: string;
+  /** State class applied to the root element if `expanded={true}`. */
+  expanded: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element unless `disableGutters={true}`. */
+  gutters: string;
+  /** Styles applied to the region element, the container of the children. */
+  region: string;
+}
+export type AccordionClassKey = keyof AccordionClasses;
+export declare function getAccordionUtilityClass(slot: string): string;
+declare const accordionClasses: AccordionClasses;
+export default accordionClasses;

package/modern/Accordion/index.d.ts

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

package/modern/AccordionActions/AccordionActions.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 { AccordionActionsClasses } from "./accordionActionsClasses.js";
+export interface AccordionActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AccordionActionsClasses>;
+  /**
+   * If `true`, the actions do not have additional margin.
+   * @default false
+   */
+  disableSpacing?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Accordion](https://next.mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [AccordionActions API](https://next.mui.com/material-ui/api/accordion-actions/)
+ */
+export default function AccordionActions(props: AccordionActionsProps): React.JSX.Element;

package/modern/AccordionActions/accordionActionsClasses.d.ts

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

package/modern/AccordionActions/index.d.ts

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

package/modern/AccordionDetails/AccordionDetails.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { AccordionDetailsClasses } from "./accordionDetailsClasses.js";
+export interface AccordionDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AccordionDetailsClasses>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Accordion](https://next.mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [AccordionDetails API](https://next.mui.com/material-ui/api/accordion-details/)
+ */
+export default function AccordionDetails(props: AccordionDetailsProps): React.JSX.Element;

package/modern/AccordionDetails/accordionDetailsClasses.d.ts

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

package/modern/AccordionDetails/index.d.ts

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

package/modern/AccordionSummary/AccordionSummary.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { ExtendButtonBase, ExtendButtonBaseTypeMap } from "../ButtonBase/index.js";
+import { OverrideProps } from "../OverridableComponent/index.js";
+import { Theme } from "../index.js";
+import { AccordionSummaryClasses } from "./accordionSummaryClasses.js";
+export interface AccordionSummaryOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AccordionSummaryClasses>;
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon?: React.ReactNode;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+export type AccordionSummaryTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendButtonBaseTypeMap<{
+  props: AdditionalProps & AccordionSummaryOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+/**
+ *
+ * Demos:
+ *
+ * - [Accordion](https://next.mui.com/material-ui/react-accordion/)
+ *
+ * API:
+ *
+ * - [AccordionSummary API](https://next.mui.com/material-ui/api/accordion-summary/)
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
+ */
+declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
+export type AccordionSummaryProps<RootComponent extends React.ElementType = AccordionSummaryTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<AccordionSummaryTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+export default AccordionSummary;

package/modern/AccordionSummary/accordionSummaryClasses.d.ts

@@ -0,0 +1,25 @@
+export interface AccordionSummaryClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** State class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. */
+  expanded: string;
+  /** State class applied to the ButtonBase root element if the button is keyboard focused. */
+  focusVisible: string;
+  /** State class applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element unless `disableGutters={true}`. */
+  gutters: string;
+  /**
+   * Styles applied to the children wrapper element unless `disableGutters={true}`.
+   * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  contentGutters: string;
+  /** Styles applied to the children wrapper element. */
+  content: string;
+  /** Styles applied to the `expandIcon`'s wrapper element. */
+  expandIconWrapper: string;
+}
+export type AccordionSummaryClassKey = keyof AccordionSummaryClasses;
+export declare function getAccordionSummaryUtilityClass(slot: string): string;
+declare const accordionSummaryClasses: AccordionSummaryClasses;
+export default accordionSummaryClasses;

package/modern/AccordionSummary/index.d.ts

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