@mui/material 6.3.0 → 6.4.0

package/TableSortLabel/TableSortLabel.d.ts

@@ -4,6 +4,48 @@ import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TableSortLabelClasses } from './tableSortLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface TableSortLabelRootSlotPropsOverrides {}
+
+export interface TableSortLabelIconSlotPropsOverrides {}
+
+export interface TableSortLabelSlots {
+  /**
+   * The component that renders the root slot.
+   * @default span
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default ArrowDownwardIcon
+   */
+  icon?: React.ElementType;
+}
+
+export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TableSortLabelSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     */
+    root: SlotProps<
+      React.ElementType<React.HTMLAttributes<HTMLSpanElement>>,
+      TableSortLabelRootSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+    /**
+     * Props forwarded to the icon slot.
+     */
+    icon: SlotProps<
+      React.ElementType<React.SVGAttributes<SVGSVGElement>>,
+      TableSortLabelIconSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+  }
+>;
+
+export interface TableSortLabelOwnerState extends TableSortLabelOwnProps {}
 
 export interface TableSortLabelOwnProps {
   /**
@@ -46,7 +88,7 @@ export type TableSortLabelTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'span',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & TableSortLabelOwnProps;
+  props: AdditionalProps & TableSortLabelOwnProps & TableSortLabelSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

package/TableSortLabel/TableSortLabel.js

@@ -11,6 +11,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from "./tableSortLabelClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -110,6 +111,8 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
     direction = 'asc',
     hideSortIcon = false,
     IconComponent = ArrowDownwardIcon,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -120,17 +123,31 @@ const TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabel(inP
     IconComponent
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(TableSortLabelRoot, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: TableSortLabelRoot,
+    externalForwardedProps,
+    ownerState,
     className: clsx(classes.root, className),
-    component: "span",
+    ref
+  });
+  const [IconSlot, iconProps] = useSlot('icon', {
+    elementType: TableSortLabelIcon,
+    externalForwardedProps,
+    ownerState,
+    className: classes.icon
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
     disableRipple: true,
-    ownerState: ownerState,
-    ref: ref,
+    component: "span",
+    ...rootProps,
     ...other,
-    children: [children, hideSortIcon && !active ? null : /*#__PURE__*/_jsx(TableSortLabelIcon, {
+    children: [children, hideSortIcon && !active ? null : /*#__PURE__*/_jsx(IconSlot, {
       as: IconComponent,
-      className: clsx(classes.icon),
-      ownerState: ownerState
+      ...iconProps
     })]
   });
 });
@@ -171,6 +188,22 @@ process.env.NODE_ENV !== "production" ? TableSortLabel.propTypes /* remove-propt
    * @default ArrowDownwardIcon
    */
   IconComponent: PropTypes.elementType,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    icon: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Tooltip/Tooltip.d.ts

@@ -21,7 +21,7 @@ export interface TooltipSlots {
    * The component used for the popper.
    * @default Popper
    */
-  popper: React.ElementType<PopperProps>;
+  popper: React.ElementType;
   /**
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.

package/Tooltip/Tooltip.js

@@ -379,7 +379,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     // eslint-disable-next-line react-hooks/rules-of-hooks -- process.env never changes
     React.useEffect(() => {
       if (childNode && childNode.disabled && !isControlled && title !== '' && childNode.tagName.toLowerCase() === 'button') {
-        console.error(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
+        console.warn(['MUI: You are providing a disabled `button` child to the Tooltip component.', 'A disabled element does not fire events.', "Tooltip needs to listen to the child element's events to display the title.", '', 'Add a simple wrapper element, such as a `span`.'].join('\n'));
       }
     }, [title, childNode, isControlled]);
   }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.3.0
+ * @mui/material v6.4.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/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/modern/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/modern/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 */ = {