@mui/material 5.14.6 → 5.14.8

package/IconButton/IconButton.d.ts

@@ -10,59 +10,61 @@ export interface IconButtonPropsColorOverrides {}
 
 export interface IconButtonPropsSizeOverrides {}
 
+export interface IconButtonOwnProps {
+  /**
+   * The icon to display.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<IconButtonClasses>;
+  /**
+   * 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/#adding-new-colors).
+   * @default 'default'
+   */
+  color?: OverridableStringUnion<
+    'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+    IconButtonPropsColorOverrides
+  >;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: 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;
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export type IconButtonTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'button',
+  RootComponent extends React.ElementType = 'button',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The icon to display.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<IconButtonClasses>;
-    /**
-     * 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/#adding-new-colors).
-     * @default 'default'
-     */
-    color?: OverridableStringUnion<
-      'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-      IconButtonPropsColorOverrides
-    >;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: 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;
-    /**
-     * The size of the component.
-     * `small` is equivalent to the dense button styling.
-     * @default 'medium'
-     */
-    size?: OverridableStringUnion<'small' | 'medium' | 'large', IconButtonPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & IconButtonOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/ImageList/ImageList.d.ts

@@ -7,48 +7,50 @@ import { ImageListClasses } from './imageListClasses';
 
 export interface ImageListPropsVariantOverrides {}
 
+export interface ImageListOwnProps {
+  /**
+   * The content of the component, normally `ImageListItem`s.
+   */
+  children: NonNullable<React.ReactNode>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ImageListClasses>;
+  /**
+   * Number of columns.
+   * @default 2
+   */
+  cols?: number;
+  /**
+   * The gap between items in px.
+   * @default 4
+   */
+  gap?: number;
+  /**
+   * The height of one row in px.
+   * @default 'auto'
+   */
+  rowHeight?: number | 'auto';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant?: OverridableStringUnion<
+    'masonry' | 'quilted' | 'standard' | 'woven',
+    ImageListPropsVariantOverrides
+  >;
+}
+
 export interface ImageListTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
+  RootComponent extends React.ElementType = 'ul',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally `ImageListItem`s.
-     */
-    children: NonNullable<React.ReactNode>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ImageListClasses>;
-    /**
-     * Number of columns.
-     * @default 2
-     */
-    cols?: number;
-    /**
-     * The gap between items in px.
-     * @default 4
-     */
-    gap?: number;
-    /**
-     * The height of one row in px.
-     * @default 'auto'
-     */
-    rowHeight?: number | 'auto';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * @default 'standard'
-     */
-    variant?: OverridableStringUnion<
-      'masonry' | 'quilted' | 'standard' | 'woven',
-      ImageListPropsVariantOverrides
-    >;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ImageListOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/ImageListItem/ImageListItem.d.ts

@@ -4,35 +4,37 @@ import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { ImageListItemClasses } from './imageListItemClasses';
 
+export interface ImageListItemOwnProps {
+  /**
+   * The content of the component, normally an `<img>`.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<ImageListItemClasses>;
+  /**
+   * Width of the item in number of grid columns.
+   * @default 1
+   */
+  cols?: number;
+  /**
+   * Height of the item in number of grid rows.
+   * @default 1
+   */
+  rows?: number;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface ImageListItemTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'li',
+  RootComponent extends React.ElementType = 'li',
 > {
-  props: AdditionalProps & {
-    /**
-     * The content of the component, normally an `<img>`.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<ImageListItemClasses>;
-    /**
-     * Width of the item in number of grid columns.
-     * @default 1
-     */
-    cols?: number;
-    /**
-     * Height of the item in number of grid rows.
-     * @default 1
-     */
-    rows?: number;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & ImageListItemOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/ImageListItem/ImageListItem.js

@@ -107,7 +107,8 @@ const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inPro
       height,
       gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
       gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
-      marginBottom: variant === 'masonry' ? gap : undefined
+      marginBottom: variant === 'masonry' ? gap : undefined,
+      breakInside: variant === 'masonry' ? 'avoid' : undefined
     }, style),
     ownerState: ownerState
   }, other, {

package/InputAdornment/InputAdornment.d.ts

@@ -4,46 +4,48 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { InputAdornmentClasses } from './inputAdornmentClasses';
 
+export interface InputAdornmentOwnProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputAdornmentClasses>;
+  /**
+   * The content of the component, normally an `IconButton` or string.
+   */
+  children?: React.ReactNode;
+  /**
+   * Disable pointer events on the root.
+   * This allows for the content of the adornment to focus the `input` on click.
+   * @default false
+   */
+  disablePointerEvents?: boolean;
+  /**
+   * If children is a string then disable wrapping in a Typography component.
+   * @default false
+   */
+  disableTypography?: boolean;
+  /**
+   * The position this adornment should appear relative to the `Input`.
+   */
+  position: 'start' | 'end';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   * Note: If you are using the `TextField` component or the `FormControl` component
+   * you do not have to set this manually.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export interface InputAdornmentTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'div',
+  RootComponent extends React.ElementType = 'div',
 > {
-  props: AdditionalProps & {
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<InputAdornmentClasses>;
-    /**
-     * The content of the component, normally an `IconButton` or string.
-     */
-    children?: React.ReactNode;
-    /**
-     * Disable pointer events on the root.
-     * This allows for the content of the adornment to focus the `input` on click.
-     * @default false
-     */
-    disablePointerEvents?: boolean;
-    /**
-     * If children is a string then disable wrapping in a Typography component.
-     * @default false
-     */
-    disableTypography?: boolean;
-    /**
-     * The position this adornment should appear relative to the `Input`.
-     */
-    position: 'start' | 'end';
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     * Note: If you are using the `TextField` component or the `FormControl` component
-     * you do not have to set this manually.
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & InputAdornmentOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

package/InputBase/InputBase.js

@@ -52,7 +52,7 @@ const useUtilityClasses = ownerState => {
     type
   } = ownerState;
   const slots = {
-    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size === 'small' && 'sizeSmall', multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
+    root: ['root', `color${capitalize(color)}`, disabled && 'disabled', error && 'error', fullWidth && 'fullWidth', focused && 'focused', formControl && 'formControl', size && size !== 'medium' && `size${capitalize(size)}`, multiline && 'multiline', startAdornment && 'adornedStart', endAdornment && 'adornedEnd', hiddenLabel && 'hiddenLabel', readOnly && 'readOnly'],
     input: ['input', disabled && 'disabled', type === 'search' && 'inputTypeSearch', multiline && 'inputMultiline', size === 'small' && 'inputSizeSmall', hiddenLabel && 'inputHiddenLabel', startAdornment && 'inputAdornedStart', endAdornment && 'inputAdornedEnd', readOnly && 'readOnly']
   };
   return composeClasses(slots, getInputBaseUtilityClass, classes);

package/InputLabel/InputLabel.d.ts

@@ -8,65 +8,67 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface InputLabelPropsSizeOverrides {}
 
+export interface InputLabelOwnProps {
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<InputLabelClasses>;
+  color?: FormLabelProps['color'];
+  /**
+   * If `true`, the transition animation is disabled.
+   * @default false
+   */
+  disableAnimation?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error?: boolean;
+  /**
+   * If `true`, the `input` of this label is focused.
+   */
+  focused?: boolean;
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense';
+  /**
+   * if `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
+  /**
+   * If `true`, the label is shrunk.
+   */
+  shrink?: boolean;
+  /**
+   * The size of the component.
+   * @default 'normal'
+   */
+  size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: 'standard' | 'outlined' | 'filled';
+}
+
 export type InputLabelTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'label',
+  RootComponent extends React.ElementType = 'label',
 > = ExtendFormLabelTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<InputLabelClasses>;
-    color?: FormLabelProps['color'];
-    /**
-     * If `true`, the transition animation is disabled.
-     * @default false
-     */
-    disableAnimation?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, the label is displayed in an error state.
-     */
-    error?: boolean;
-    /**
-     * If `true`, the `input` of this label is focused.
-     */
-    focused?: boolean;
-    /**
-     * If `dense`, will adjust vertical spacing. This is normally obtained via context from
-     * FormControl.
-     */
-    margin?: 'dense';
-    /**
-     * if `true`, the label will indicate that the `input` is required.
-     */
-    required?: boolean;
-    /**
-     * If `true`, the label is shrunk.
-     */
-    shrink?: boolean;
-    /**
-     * The size of the component.
-     * @default 'normal'
-     */
-    size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * The variant to use.
-     */
-    variant?: 'standard' | 'outlined' | 'filled';
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & InputLabelOwnProps;
+  defaultComponent: RootComponent;
 }>;
 
 /**

package/InputLabel/InputLabel.js

@@ -11,6 +11,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
 import useThemeProps from '../styles/useThemeProps';
+import capitalize from '../utils/capitalize';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import { getInputLabelUtilityClasses } from './inputLabelClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,7 +26,7 @@ const useUtilityClasses = ownerState => {
     required
   } = ownerState;
   const slots = {
-    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size === 'small' && 'sizeSmall', variant],
+    root: ['root', formControl && 'formControl', !disableAnimation && 'animated', shrink && 'shrink', size && size !== 'normal' && `size${capitalize(size)}`, variant],
     asterisk: [required && 'asterisk']
   };
   const composedClasses = composeClasses(slots, getInputLabelUtilityClasses, classes);

package/Link/Link.d.ts

@@ -6,45 +6,43 @@ import { Theme } from '../styles';
 import { TypographyOwnProps } from '../Typography';
 import { LinkClasses } from './linkClasses';
 
-export interface LinkTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'a',
-> {
-  props: AdditionalProps &
-    LinkBaseProps & {
-      /**
-       * 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`](/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'];
-    };
-  defaultComponent: DefaultComponent;
+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`](/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;
 }
 
 /**

package/List/List.d.ts

@@ -4,41 +4,40 @@ import { Theme } from '..';
 import { OverridableComponent, OverridableTypeMap, OverrideProps } from '../OverridableComponent';
 import { ListClasses } from './listClasses';
 
-export interface ListTypeMap<
-  AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'ul',
-> {
-  props: AdditionalProps & {
-    /**
-     * 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>;
-  };
-  defaultComponent: DefaultComponent;
+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;
 }
 
 /**