@mui/material 7.3.8 → 7.3.10

package/esm/Zoom/Zoom.js

@@ -6,7 +6,7 @@ import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import { useTheme } from "../zero-styled/index.js";
-import { reflow, getTransitionProps } from "../transitions/utils.js";
+import { normalizedTransitionCallback, reflow, getTransitionProps, getTransitionChildStyle } from "../transitions/utils.js";
 import useForkRef from "../utils/useForkRef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
@@ -15,8 +15,18 @@ const styles = {
   },
   entered: {
     transform: 'none'
+  },
+  exiting: {
+    transform: 'scale(0)'
+  },
+  exited: {
+    transform: 'scale(0)'
   }
 };
+const hiddenStyles = {
+  transform: 'scale(0)',
+  visibility: 'hidden'
+};
 
 /**
  * The Zoom transition can be used for the floating variant of the
@@ -43,26 +53,12 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExiting,
     style,
     timeout = defaultTimeout,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Transition,
     ...other
   } = props;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
-  const normalizedTransitionCallback = callback => maybeIsAppearing => {
-    if (callback) {
-      const node = nodeRef.current;
-
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
-      if (maybeIsAppearing === undefined) {
-        callback(node);
-      } else {
-        callback(node, maybeIsAppearing);
-      }
-    }
-  };
-  const handleEntering = normalizedTransitionCallback(onEntering);
-  const handleEnter = normalizedTransitionCallback((node, isAppearing) => {
+  const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
+  const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
     reflow(node); // So the animation always start from the start.
 
     const transitionProps = getTransitionProps({
@@ -72,15 +68,14 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     if (onEnter) {
       onEnter(node, isAppearing);
     }
   });
-  const handleEntered = normalizedTransitionCallback(onEntered);
-  const handleExiting = normalizedTransitionCallback(onExiting);
-  const handleExit = normalizedTransitionCallback(node => {
+  const handleEntered = normalizedTransitionCallback(nodeRef, onEntered);
+  const handleExiting = normalizedTransitionCallback(nodeRef, onExiting);
+  const handleExit = normalizedTransitionCallback(nodeRef, node => {
     const transitionProps = getTransitionProps({
       style,
       timeout,
@@ -88,20 +83,24 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.webkitTransition = theme.transitions.create('transform', transitionProps);
     node.style.transition = theme.transitions.create('transform', transitionProps);
     if (onExit) {
       onExit(node);
     }
   });
-  const handleExited = normalizedTransitionCallback(onExited);
+  const handleExited = normalizedTransitionCallback(nodeRef, node => {
+    node.style.transition = '';
+    if (onExited) {
+      onExited(node);
+    }
+  });
   const handleAddEndListener = next => {
     if (addEndListener) {
       // Old call signature before `react-transition-group` implemented `nodeRef`
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -118,14 +117,9 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       ownerState,
       ...restChildProps
     }) => {
+      const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
-        style: {
-          transform: 'scale(0)',
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-          ...styles[state],
-          ...style,
-          ...children.props.style
-        },
+        style: childStyle,
         ref: handleRef,
         ...restChildProps
       });

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.8
+ * @mui/material v7.3.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internal/SwitchBase.d.ts

@@ -27,34 +27,34 @@ type SwitchBaseSlotsAndSlotProps = CreateSlotsAndSlotProps<SwitchBaseSlots, {
   input: SlotProps<'input', {}, SwitchBaseOwnerState>;
 }>;
 export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'children' | 'onChange' | 'type' | 'value'>, SwitchBaseSlotsAndSlotProps {
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /**
    * If `true`, the component is checked.
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   checkedIcon: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<SwitchBaseClasses>;
+  classes?: Partial<SwitchBaseClasses> | undefined;
   /**
    * The default checked state. Use when the component is not controlled.
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * If `true`, the component is disabled.
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the ripple effect is disabled.
    * @default false
    */
-  disableRipple?: boolean;
+  disableRipple?: boolean | undefined;
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple?: boolean;
+  disableFocusRipple?: boolean | undefined;
   /**
    * If given, uses a negative margin to counteract the padding on one
    * side (this is often helpful for aligning the left or right
@@ -62,26 +62,26 @@ export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'childre
    * size and shape).
    * @default false
    */
-  edge?: 'start' | 'end' | false;
+  edge?: 'start' | 'end' | false | undefined;
   icon: React.ReactNode;
   /**
    * The id of the `input` element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement> | undefined;
   /**
    * Pass a ref to the `input` element.
    * @deprecated Use `slotProps.input.ref` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  inputRef?: React.Ref<any>;
+  inputRef?: React.Ref<any> | undefined;
   /**
    * Name attribute of the `input` element.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Callback fired when the state is changed.
    *
@@ -89,15 +89,15 @@ export interface SwitchBaseProps extends StandardProps<ButtonBaseProps, 'childre
    * 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;
+  onChange?: ((event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
+  readOnly?: boolean | undefined;
   /**
    * If `true`, the `input` element is required.
    * @default false
    */
-  required?: boolean;
-  tabIndex?: number;
-  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  required?: boolean | undefined;
+  tabIndex?: number | undefined;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'] | undefined;
   /**
    * The value of the component. The DOM API casts this to a string.
    */

package/esm/internal/index.d.ts

@@ -9,9 +9,9 @@ import { StyledComponentProps } from "../styles/index.js";
  * It is recommended to declare them manually with an interface so that each class can have a separate JSDoc.
  */
 export type InternalStandardProps<ComponentProps, Removals extends keyof ComponentProps = never> = DistributiveOmit<ComponentProps, 'classes' | Removals> & StyledComponentProps<never> & {
-  ref?: ComponentProps extends {
-    ref?: infer RefType;
-  } ? RefType : React.Ref<unknown>;
-  className?: string;
-  style?: React.CSSProperties;
+  ref?: (ComponentProps extends {
+    ref?: infer RefType | undefined;
+  } ? RefType : React.Ref<unknown>) | undefined;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
 };

package/esm/locale/utils/LocaleTextApi.d.ts

@@ -3,21 +3,21 @@ export interface Localization {
   components?: {
     MuiAlert?: {
       defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-    };
+    } | undefined;
     MuiBreadcrumbs?: {
       defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-    };
+    } | undefined;
     MuiTablePagination?: {
       defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-    };
+    } | undefined;
     MuiRating?: {
       defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-    };
+    } | undefined;
     MuiAutocomplete?: {
       defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-    };
+    } | undefined;
     MuiPagination?: {
       defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-    };
-  };
+    } | undefined;
+  } | undefined;
 }

package/esm/styles/ThemeProvider.d.ts

@@ -9,24 +9,24 @@ type ThemeProviderCssVariablesProps = CssThemeVariables extends {
    * The node for attaching the `theme.colorSchemeSelector`.
    * @default document
    */
-  colorSchemeNode?: Element | null;
+  colorSchemeNode?: Element | null | undefined;
   /**
    * If `true`, the provider creates its own context and generate stylesheet as if it is a root `ThemeProvider`.
    */
-  disableNestedContext?: boolean;
+  disableNestedContext?: boolean | undefined;
   /**
    * If `true`, the style sheet for CSS theme variables won't be generated.
    *
    * This is useful for controlling nested ThemeProvider behavior.
    * @default false
    */
-  disableStyleSheetGeneration?: boolean;
+  disableStyleSheetGeneration?: boolean | undefined;
   /**
    * If `true`, theme values are recalculated when the mode changes.
    * The `theme.colorSchemes.{mode}.*` nodes will be shallow merged to the top-level of the theme.
    * @default false
    */
-  forceThemeRerender?: boolean;
+  forceThemeRerender?: boolean | undefined;
 } : {};
 export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderCssVariablesProps {
   children?: React.ReactNode;
@@ -35,39 +35,39 @@ export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderC
    * The document used to perform `disableTransitionOnChange` feature
    * @default document
    */
-  documentNode?: Document | null;
+  documentNode?: Document | null | undefined;
   /**
    * The default mode when the local storage has no mode yet,
    * requires the theme to have `colorSchemes` with light and dark.
    * @default 'system'
    */
-  defaultMode?: 'light' | 'dark' | 'system';
+  defaultMode?: 'light' | 'dark' | 'system' | undefined;
   /**
    * The window that attaches the 'storage' event listener
    * @default window
    */
-  storageWindow?: Window | null;
+  storageWindow?: Window | null | undefined;
   /**
    * The storage manager to be used for storing the mode and color scheme
    * @default using `window.localStorage`
    */
-  storageManager?: StorageManager | null;
+  storageManager?: StorageManager | null | undefined;
   /**
    * localStorage key used to store application `mode`
    * @default 'mui-mode'
    */
-  modeStorageKey?: string;
+  modeStorageKey?: string | undefined;
   /**
    * localStorage key used to store `colorScheme`
    * @default 'mui-color-scheme'
    */
-  colorSchemeStorageKey?: string;
-  noSsr?: boolean;
+  colorSchemeStorageKey?: string | undefined;
+  noSsr?: boolean | undefined;
   /**
    * Disable CSS transitions when switching between modes or color schemes
    * @default false
    */
-  disableTransitionOnChange?: boolean;
+  disableTransitionOnChange?: boolean | undefined;
 }
 export default function ThemeProvider<Theme = DefaultTheme>({
   theme,

package/esm/styles/ThemeProviderWithVars.d.ts

@@ -27,24 +27,24 @@ declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScrip
  */
 export declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
   theme?: {
-    cssVariables?: false;
-    cssVarPrefix?: string;
+    cssVariables?: false | undefined;
+    cssVarPrefix?: string | undefined;
     colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-    colorSchemeSelector?: "media" | "class" | "data" | string;
+    colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
   } | {
     $$material: {
-      cssVariables?: false;
-      cssVarPrefix?: string;
+      cssVariables?: false | undefined;
+      cssVarPrefix?: string | undefined;
       colorSchemes: Partial<Record<SupportedColorScheme, any>>;
-      colorSchemeSelector?: "media" | "class" | "data" | string;
+      colorSchemeSelector?: "media" | "class" | "data" | string | undefined;
     };
   } | undefined;
-  defaultMode?: "light" | "dark" | "system";
-  documentNode?: Document | null;
-  colorSchemeNode?: Element | null;
-  storageManager?: import("@mui/system").StorageManager | null;
-  storageWindow?: Window | null;
-  disableNestedContext?: boolean;
-  disableStyleSheetGeneration?: boolean;
+  defaultMode?: "light" | "dark" | "system" | undefined;
+  documentNode?: Document | null | undefined;
+  colorSchemeNode?: Element | null | undefined;
+  storageManager?: import("@mui/system").StorageManager | null | undefined;
+  storageWindow?: Window | null | undefined;
+  disableNestedContext?: boolean | undefined;
+  disableStyleSheetGeneration?: boolean | undefined;
 }>) => React.JSX.Element;
 export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/esm/styles/adaptV4Theme.d.ts

@@ -11,20 +11,20 @@ import { ComponentsProps } from "./props.js";
 import { Theme } from "./createTheme.js";
 export type Direction = 'ltr' | 'rtl';
 export interface DeprecatedThemeOptions {
-  shape?: ShapeOptions;
-  breakpoints?: BreakpointsOptions;
-  direction?: Direction;
-  mixins?: MixinsOptions;
-  overrides?: ComponentsOverrides;
-  palette?: PaletteOptions;
-  props?: ComponentsProps;
-  shadows?: Shadows;
-  spacing?: SpacingOptions;
-  transitions?: TransitionsOptions;
-  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions);
-  variants?: ComponentsVariants;
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
+  shape?: ShapeOptions | undefined;
+  breakpoints?: BreakpointsOptions | undefined;
+  direction?: Direction | undefined;
+  mixins?: MixinsOptions | undefined;
+  overrides?: ComponentsOverrides | undefined;
+  palette?: PaletteOptions | undefined;
+  props?: ComponentsProps | undefined;
+  shadows?: Shadows | undefined;
+  spacing?: SpacingOptions | undefined;
+  transitions?: TransitionsOptions | undefined;
+  typography?: TypographyVariantsOptions | ((palette: Palette) => TypographyVariantsOptions) | undefined;
+  variants?: ComponentsVariants | undefined;
+  zIndex?: ZIndexOptions | undefined;
+  unstable_strictMode?: boolean | undefined;
 }
 
 /**