@mui/material 6.3.0 → 6.4.0

package/Alert/Alert.d.ts

@@ -10,10 +10,39 @@ export type AlertColor = 'success' | 'info' | 'warning' | 'error';
 
 export interface AlertPropsVariantOverrides {}
 export interface AlertPropsColorOverrides {}
+
+export interface AlertRootSlotPropsOverrides {}
+
+export interface AlertIconSlotPropsOverrides {}
+
+export interface AlertMessageSlotPropsOverrides {}
+
+export interface AlertActionSlotPropsOverrides {}
+
 export interface AlertCloseButtonSlotPropsOverrides {}
 export interface AlertCloseIconSlotPropsOverrides {}
 
 export interface AlertSlots {
+  /**
+   * The component that renders the root slot.
+   * @default Paper
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default div
+   */
+  icon: React.ElementType;
+  /**
+   * The component that renders the message slot.
+   * @default div
+   */
+  message: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default div
+   */
+  action: React.ElementType;
   /**
    * The component that renders the close button.
    * @default IconButton
@@ -29,11 +58,51 @@ export interface AlertSlots {
 export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AlertSlots,
   {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    root: SlotProps<React.ElementType<PaperProps>, AlertRootSlotPropsOverrides, AlertOwnerState>;
+    /**
+     * Props forwarded to the icon slot.
+     * By default, the avaible props are based on a div element.
+     */
+    icon: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertIconSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the message slot.
+     * By default, the avaible props are based on a div element.
+     */
+    message: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertMessageSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the avaible props are based on a div element.
+     */
+    action: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      AlertActionSlotPropsOverrides,
+      AlertOwnerState
+    >;
+    /**
+     * Props forwarded to the closeButton slot.
+     * By default, the avaible props are based on the [IconButton](https://mui.com/material-ui/api/icon-button/#props) component.
+     */
     closeButton: SlotProps<
       React.ElementType<IconButtonProps>,
       AlertCloseButtonSlotPropsOverrides,
       AlertOwnerState
     >;
+    /**
+     * Props forwarded to the closeIcon slot.
+     * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+     */
     closeIcon: SlotProps<
       React.ElementType<SvgIconProps>,
       AlertCloseIconSlotPropsOverrides,

package/Alert/Alert.js

@@ -187,6 +187,39 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
       ...slotProps
     }
   };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = useSlot('icon', {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = useSlot('message', {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
   const [CloseButtonSlot, closeButtonProps] = useSlot('closeButton', {
     elementType: IconButton,
     externalForwardedProps,
@@ -197,28 +230,19 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(AlertRoot, {
-    role: role,
-    elevation: 0,
-    ownerState: ownerState,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
-    children: [icon !== false ? /*#__PURE__*/_jsx(AlertIcon, {
-      ownerState: ownerState,
-      className: classes.icon,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /*#__PURE__*/_jsx(IconSlot, {
+      ...iconSlotProps,
       children: icon || iconMapping[severity] || defaultIconMapping[severity]
-    }) : null, /*#__PURE__*/_jsx(AlertMessage, {
-      ownerState: ownerState,
-      className: classes.message,
+    }) : null, /*#__PURE__*/_jsx(MessageSlot, {
+      ...messageSlotProps,
       children: children
-    }), action != null ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }), action != null ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
-    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(AlertAction, {
-      ownerState: ownerState,
-      className: classes.action,
+    }) : null, action == null && onClose ? /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: /*#__PURE__*/_jsx(CloseButtonSlot, {
         size: "small",
         "aria-label": closeText,
@@ -330,16 +354,24 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * @default {}
    */
   slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    message: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
+    action: PropTypes.elementType,
     closeButton: PropTypes.elementType,
-    closeIcon: PropTypes.elementType
+    closeIcon: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    message: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/AppBar/AppBar.d.ts

@@ -30,7 +30,7 @@ export interface AppBarOwnProps {
   enableColorOnDark?: boolean;
   /**
    * The positioning type. The behavior of the different options is described
-   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */

package/AppBar/AppBar.js

@@ -214,7 +214,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
   enableColorOnDark: PropTypes.bool,
   /**
    * The positioning type. The behavior of the different options is described
-   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */

package/Autocomplete/Autocomplete.d.ts

@@ -65,7 +65,7 @@ export interface AutocompleteRenderOptionState {
 }
 
 export interface AutocompleteRenderGroupParams {
-  key: string;
+  key: number;
   group: string;
   children?: React.ReactNode;
 }

package/Autocomplete/Autocomplete.js

@@ -650,53 +650,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
   const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
-  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, {
-    as: PopperSlot,
-    ...popperProps,
-    children: /*#__PURE__*/_jsx(AutocompletePaper, {
-      as: PaperSlot,
-      ...paperProps,
-      children: children
-    })
-  });
-  let autocompletePopper = null;
-  if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(
-    /*#__PURE__*/
-    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
-    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
-    _jsx(ListboxSlot, {
-      as: ListboxComponentProp,
-      ...listboxProps,
-      children: groupedOptions.map((option, index) => {
-        if (groupBy) {
-          return renderGroup({
-            key: option.key,
-            group: option.group,
-            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-          });
-        }
-        return renderListOption(option, index);
-      })
-    }));
-  } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteLoading, {
-      className: classes.loading,
-      ownerState: ownerState,
-      children: loadingText
-    }));
-  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteNoOptions, {
-      className: classes.noOptions,
-      ownerState: ownerState,
-      role: "presentation",
-      onMouseDown: event => {
-        // Prevent input blur when interacting with the "no options" content
-        event.preventDefault();
-      },
-      children: noOptionsText
-    }));
-  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, {
       ref: ref,
@@ -750,7 +703,41 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ...getInputProps()
         }
       })
-    }), anchorEl ? autocompletePopper : null]
+    }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+      as: PopperSlot,
+      ...popperProps,
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, {
+        as: PaperSlot,
+        ...paperProps,
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+          className: classes.loading,
+          ownerState: ownerState,
+          children: loadingText
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+          className: classes.noOptions,
+          ownerState: ownerState,
+          role: "presentation",
+          onMouseDown: event => {
+            // Prevent input blur when interacting with the "no options" content
+            event.preventDefault();
+          },
+          children: noOptionsText
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
+          as: ListboxComponentProp,
+          ...listboxProps,
+          children: groupedOptions.map((option, index) => {
+            if (groupBy) {
+              return renderGroup({
+                key: option.key,
+                group: option.group,
+                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+              });
+            }
+            return renderListOption(option, index);
+          })
+        }) : null]
+      })
+    }) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/Button/Button.d.ts

@@ -60,6 +60,24 @@ export interface ButtonOwnProps {
    * If defined, an `a` element will be used as the root node.
    */
   href?: string;
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading?: boolean | null;
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator?: React.ReactNode;
+  /**
+   * The loading indicator can be positioned on the start, end, or the center of the button.
+   * @default 'center'
+   */
+  loadingPosition?: 'start' | 'end' | 'center';
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.