@mui/material 7.3.7 → 7.3.9

package/esm/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -11,17 +11,17 @@ export interface ScopedCssBaselineOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ScopedCssBaselineClasses>;
+  classes?: Partial<ScopedCssBaselineClasses> | undefined;
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
    * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
    * For browser support, check out https://caniuse.com/?search=color-scheme
    */
-  enableColorScheme?: boolean;
+  enableColorScheme?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface ScopedCssBaselineTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & ScopedCssBaselineOwnProps;
@@ -39,7 +39,7 @@ export interface ScopedCssBaselineTypeMap<AdditionalProps = {}, RootComponent ex
  */
 declare const ScopedCssBaseline: OverridableComponent<ScopedCssBaselineTypeMap>;
 export type ScopedCssBaselineProps<RootComponent extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ScopedCssBaselineTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 
 /**

package/esm/Select/Select.d.ts

@@ -15,7 +15,7 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * menu, otherwise it will be at least the width of the select input.
    * @default false
    */
-  autoWidth?: boolean;
+  autoWidth?: boolean | undefined;
   /**
    * The option elements to populate the select with.
    * Can be some `MenuItem` when `native` is false and `option` when `native` is true.
@@ -27,17 +27,17 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * Override or extend the styles applied to the component.
    * @default {}
    */
-  classes?: Partial<SelectClasses>;
+  classes?: Partial<SelectClasses> | undefined;
   /**
    * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
    * You can only use it when the `native` prop is `false` (default).
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * The default value. Use when the component is not controlled.
    */
-  defaultValue?: Value;
+  defaultValue?: Value | undefined;
   /**
    * If `true`, a value is displayed even if no items are selected.
    *
@@ -48,25 +48,25 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * The label should either be hidden or forced to a shrunk state.
    * @default false
    */
-  displayEmpty?: boolean;
+  displayEmpty?: boolean | undefined;
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon
    */
-  IconComponent?: React.ElementType;
+  IconComponent?: React.ElementType | undefined;
   /**
    * The `id` of the wrapper element or the `select` element when `native`.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * An `Input` element; does not have to be a material-ui specific `Input`.
    */
-  input?: React.ReactElement<unknown, any>;
+  input?: React.ReactElement<unknown, any> | undefined;
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * When `native` is `true`, the attributes are applied on the `select` element.
    */
-  inputProps?: InputProps['inputProps'];
+  inputProps?: InputProps['inputProps'] | undefined;
   /**
    * See [OutlinedInput#label](https://mui.com/material-ui/api/outlined-input/#props)
    */
@@ -75,21 +75,21 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * The ID of an element that acts as an additional label. The Select will
    * be labelled by the additional label and the selected value.
    */
-  labelId?: string;
+  labelId?: string | undefined;
   /**
    * Props applied to the [`Menu`](https://mui.com/material-ui/api/menu/) element.
    */
-  MenuProps?: Partial<MenuProps>;
+  MenuProps?: Partial<MenuProps> | undefined;
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
   /**
    * If `true`, the component uses a native `select` element.
    * @default false
    */
-  native?: boolean;
+  native?: boolean | undefined;
   /**
    * Callback fired when a menu item is selected.
    *
@@ -98,26 +98,26 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * **Warning**: This is a generic event, not a change event, unless the change event is caused by browser autofill.
    * @param {object} [child] The react element that was selected when `native` is `false` (default).
    */
-  onChange?: SelectInputProps<Value>['onChange'];
+  onChange?: SelectInputProps<Value>['onChange'] | undefined;
   /**
    * Callback fired when the component requests to be closed.
    * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select collapses).
    *
    * @param {object} event The event source of the callback.
    */
-  onClose?: (event: React.SyntheticEvent) => void;
+  onClose?: ((event: React.SyntheticEvent) => void) | undefined;
   /**
    * Callback fired when the component requests to be opened.
    * Use it in either controlled (see the `open` prop), or uncontrolled mode (to detect when the Select expands).
    *
    * @param {object} event The event source of the callback.
    */
-  onOpen?: (event: React.SyntheticEvent) => void;
+  onOpen?: ((event: React.SyntheticEvent) => void) | undefined;
   /**
    * If `true`, the component is shown.
    * You can only use it when the `native` prop is `false` (default).
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Render the selected value.
    * You can only use it when the `native` prop is `false` (default).
@@ -125,15 +125,15 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * @param {any} value The `value` provided to the component.
    * @returns {ReactNode}
    */
-  renderValue?: (value: Value) => React.ReactNode;
+  renderValue?: ((value: Value) => React.ReactNode) | undefined;
   /**
    * Props applied to the clickable div element.
    */
-  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The `input` value. Providing an empty string will select no options.
    * Set to an empty string `''` if you don't want any of the available options to be selected.
@@ -141,12 +141,12 @@ export interface BaseSelectProps<Value = unknown> extends StandardProps<InputPro
    * If the value is an object it must have reference equality with the option in order to be selected.
    * If the value is not an object, the string representation must match with the string representation of the option in order to be selected.
    */
-  value?: Value | '';
+  value?: Value | '' | undefined;
   /**
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: SelectVariants;
+  variant?: SelectVariants | undefined;
 }
 export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange' | 'id' | 'classes' | 'inputProps' | 'placeholder'> {
   /**
@@ -167,7 +167,7 @@ export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' |
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'outlined';
+  variant?: 'outlined' | undefined;
 }
 export type SelectVariants = 'outlined' | 'standard' | 'filled';
 export type SelectProps<Value = unknown> = (FilledSelectProps & BaseSelectProps<Value>) | (StandardSelectProps & BaseSelectProps<Value>) | (OutlinedSelectProps & BaseSelectProps<Value>);

package/esm/Select/SelectInput.d.ts

@@ -23,35 +23,35 @@ export type SelectChangeEvent<Value = string> = Value extends (string & {}) | nu
   };
 });
 export interface SelectInputProps<Value = unknown> {
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   autoWidth: boolean;
-  defaultOpen?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  IconComponent?: React.ElementType;
-  inputRef?: (ref: HTMLSelectElement | {
+  defaultOpen?: boolean | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  IconComponent?: React.ElementType | undefined;
+  inputRef?: ((ref: HTMLSelectElement | {
     node: HTMLInputElement;
     value: SelectInputProps<Value>['value'];
-  }) => void;
-  MenuProps?: Partial<MenuProps>;
+  }) => void) | undefined;
+  MenuProps?: Partial<MenuProps> | undefined;
   multiple: boolean;
-  name?: string;
+  name?: string | undefined;
   native: boolean;
-  onBlur?: React.FocusEventHandler<any>;
-  onChange?: (event: SelectChangeEvent<Value>, child: React.ReactNode) => void;
-  onClose?: (event: React.SyntheticEvent) => void;
-  onFocus?: React.FocusEventHandler<any>;
-  onKeyDown?: React.KeyboardEventHandler;
-  onMouseDown?: React.MouseEventHandler;
-  onOpen?: (event: React.SyntheticEvent) => void;
-  open?: boolean;
-  readOnly?: boolean;
-  renderValue?: (value: SelectInputProps<Value>['value']) => React.ReactNode;
-  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
-  sx?: SxProps<Theme>;
-  tabIndex?: number;
-  value?: Value;
-  variant?: 'standard' | 'outlined' | 'filled';
+  onBlur?: React.FocusEventHandler<any> | undefined;
+  onChange?: ((event: SelectChangeEvent<Value>, child: React.ReactNode) => void) | undefined;
+  onClose?: ((event: React.SyntheticEvent) => void) | undefined;
+  onFocus?: React.FocusEventHandler<any> | undefined;
+  onKeyDown?: React.KeyboardEventHandler | undefined;
+  onMouseDown?: React.MouseEventHandler | undefined;
+  onOpen?: ((event: React.SyntheticEvent) => void) | undefined;
+  open?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  renderValue?: ((value: SelectInputProps<Value>['value']) => React.ReactNode) | undefined;
+  SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement> | undefined;
+  sx?: SxProps<Theme> | undefined;
+  tabIndex?: number | undefined;
+  value?: Value | undefined;
+  variant?: 'standard' | 'outlined' | 'filled' | undefined;
 }
 declare const SelectInput: React.JSXElementConstructor<SelectInputProps>;
 export default SelectInput;

package/esm/Skeleton/Skeleton.d.ts

@@ -11,7 +11,7 @@ export interface SkeletonOwnProps {
    * If `false` the animation effect is disabled.
    * @default 'pulse'
    */
-  animation?: 'pulse' | 'wave' | false;
+  animation?: 'pulse' | 'wave' | false | undefined;
   /**
    * Optional children to infer width and height from.
    */
@@ -19,26 +19,26 @@ export interface SkeletonOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<SkeletonClasses>;
+  classes?: Partial<SkeletonClasses> | undefined;
   /**
    * Height of the skeleton.
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
-  height?: number | string;
+  height?: number | string | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The type of content that will be rendered.
    * @default 'text'
    */
-  variant?: OverridableStringUnion<'text' | 'rectangular' | 'rounded' | 'circular', SkeletonPropsVariantOverrides>;
+  variant?: OverridableStringUnion<'text' | 'rectangular' | 'rounded' | 'circular', SkeletonPropsVariantOverrides> | undefined;
   /**
    * Width of the skeleton.
    * Useful when the skeleton is inside an inline element with no width of its own.
    */
-  width?: number | string;
+  width?: number | string | undefined;
 }
 export interface SkeletonTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> {
   props: AdditionalProps & SkeletonOwnProps;
@@ -57,6 +57,6 @@ export interface SkeletonTypeMap<AdditionalProps = {}, RootComponent extends Rea
  */
 declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
 export type SkeletonProps<RootComponent extends React.ElementType = SkeletonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<SkeletonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Skeleton;

package/esm/Slide/Slide.d.ts

@@ -6,7 +6,7 @@ export interface SlideProps extends TransitionProps {
    * Set this to `false` to disable this behavior.
    * @default true
    */
-  appear?: boolean;
+  appear?: boolean | undefined;
   /**
    * A single child content element.
    */
@@ -15,12 +15,12 @@ export interface SlideProps extends TransitionProps {
    * An HTML element, or a function that returns one.
    * It's used to set the container the Slide is transitioning from.
    */
-  container?: null | Element | ((element: Element) => Element);
+  container?: null | Element | ((element: Element) => Element) | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
    */
-  direction?: 'left' | 'right' | 'up' | 'down';
+  direction?: 'left' | 'right' | 'up' | 'down' | undefined;
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -29,12 +29,12 @@ export interface SlideProps extends TransitionProps {
    *   exit: theme.transitions.easing.sharp,
    * }
    */
-  easing?: TransitionProps['easing'];
+  easing?: TransitionProps['easing'] | undefined;
   /**
    * If `true`, the component will transition in.
    */
-  in?: TransitionProps['in'];
-  ref?: React.Ref<unknown>;
+  in?: TransitionProps['in'] | undefined;
+  ref?: React.Ref<unknown> | undefined;
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -43,7 +43,7 @@ export interface SlideProps extends TransitionProps {
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  timeout?: TransitionProps['timeout'];
+  timeout?: TransitionProps['timeout'] | undefined;
 }
 
 /**

package/esm/Slide/Slide.js

@@ -7,6 +7,7 @@ import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
+import isLayoutSupported from "../utils/isLayoutSupported.js";
 import debounce from "../utils/debounce.js";
 import useForkRef from "../utils/useForkRef.js";
 import { useTheme } from "../zero-styled/index.js";
@@ -263,8 +264,10 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
       const resolvedContainer = resolveContainer(props.container);
       if (resolvedContainer && resolvedContainer.nodeType === 1) {
         const box = resolvedContainer.getBoundingClientRect();
-        if (process.env.NODE_ENV !== 'test' && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+        if (process.env.NODE_ENV !== 'production') {
+          if (isLayoutSupported() && box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
+            return new Error(['MUI: The `container` prop provided to the component is invalid.', 'The anchor element should be part of the document layout.', "Make sure the element is present in the document or that it's not display none."].join('\n'));
+          }
         }
       } else if (!resolvedContainer || typeof resolvedContainer.getBoundingClientRect !== 'function' || resolvedContainer.contextElement != null && resolvedContainer.contextElement.nodeType !== 1) {
         return new Error(['MUI: The `container` prop provided to the component is invalid.', 'It should be an HTML element instance.'].join('\n'));