@mui/material 5.14.7 → 5.14.9

package/Hidden/Hidden.d.ts

@@ -25,22 +25,22 @@ export interface HiddenProps {
    */
   initialWidth?: Breakpoint;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp?: boolean;
@@ -49,32 +49,32 @@ export interface HiddenProps {
    */
   only?: Breakpoint | Breakpoint[];
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp?: boolean;
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown?: boolean;
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp?: boolean;

package/Icon/Icon.d.ts

@@ -9,57 +9,59 @@ export interface IconPropsSizeOverrides {}
 
 export interface IconPropsColorOverrides {}
 
+export interface IconOwnProps {
+  /**
+   * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
+   * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
+   * @default 'material-icons'
+   */
+  baseClassName?: string;
+  /**
+   * The name of the icon font ligature.
+   */
+  children?: React.ReactNode;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<IconClasses>;
+  /**
+   * 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 'inherit'
+   */
+  color?: OverridableStringUnion<
+    | 'inherit'
+    | 'action'
+    | 'disabled'
+    | 'primary'
+    | 'secondary'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning',
+    IconPropsColorOverrides
+  >;
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize?: OverridableStringUnion<
+    'inherit' | 'large' | 'medium' | 'small',
+    IconPropsSizeOverrides
+  >;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
 export interface IconTypeMap<
   AdditionalProps = {},
-  DefaultComponent extends React.ElementType = 'span',
+  RootComponent extends React.ElementType = 'span',
 > {
-  props: AdditionalProps & {
-    /**
-     * The base class applied to the icon. Defaults to 'material-icons', but can be changed to any
-     * other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
-     * @default 'material-icons'
-     */
-    baseClassName?: string;
-    /**
-     * The name of the icon font ligature.
-     */
-    children?: React.ReactNode;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<IconClasses>;
-    /**
-     * 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 'inherit'
-     */
-    color?: OverridableStringUnion<
-      | 'inherit'
-      | 'action'
-      | 'disabled'
-      | 'primary'
-      | 'secondary'
-      | 'error'
-      | 'info'
-      | 'success'
-      | 'warning',
-      IconPropsColorOverrides
-    >;
-    /**
-     * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-     * @default 'medium'
-     */
-    fontSize?: OverridableStringUnion<
-      'inherit' | 'large' | 'medium' | 'small',
-      IconPropsSizeOverrides
-    >;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-  };
-  defaultComponent: DefaultComponent;
+  props: AdditionalProps & IconOwnProps;
+  defaultComponent: RootComponent;
 }
 /**
  *

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);