@mui/material 6.0.1 → 6.1.0

package/Accordion/Accordion.d.ts

@@ -12,13 +12,13 @@ export interface AccordionSlots {
    * The component that renders the heading.
    * @default 'h3'
    */
-  heading?: React.ElementType;
+  heading: React.ElementType;
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
-  transition?: React.JSXElementConstructor<
+  transition: React.JSXElementConstructor<
     TransitionProps & { children?: React.ReactElement<unknown, any> }
   >;
 }

package/Alert/Alert.d.ts

@@ -18,12 +18,12 @@ export interface AlertSlots {
    * The component that renders the close button.
    * @default IconButton
    */
-  closeButton?: React.ElementType;
+  closeButton: React.ElementType;
   /**
    * The component that renders the close icon.
    * @default svg
    */
-  closeIcon?: React.ElementType;
+  closeIcon: React.ElementType;
 }
 
 export type AlertSlotsAndSlotProps = CreateSlotsAndSlotProps<

package/Alert/Alert.js

@@ -10,6 +10,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import useSlot from "../utils/useSlot.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import Paper from "../Paper/index.js";
 import alertClasses, { getAlertUtilityClass } from "./alertClasses.js";
 import IconButton from "../IconButton/index.js";
@@ -53,7 +54,7 @@ const AlertRoot = styled(Paper, {
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px',
-    variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'standard'
@@ -67,7 +68,7 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.light).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['light'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'outlined'
@@ -81,7 +82,7 @@ const AlertRoot = styled(Paper, {
           color: theme.palette[color].main
         }
       }
-    })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark).map(([color]) => ({
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
       props: {
         colorSeverity: color,
         variant: 'filled'

package/AppBar/AppBar.js

@@ -8,6 +8,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import Paper from "../Paper/index.js";
 import { getAppBarUtilityClass } from "./appBarClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -114,7 +115,7 @@ const AppBarRoot = styled(Paper, {
         '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
       })
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

package/Autocomplete/Autocomplete.d.ts

@@ -18,6 +18,9 @@ import useAutocomplete, {
 import { AutocompleteClasses } from './autocompleteClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
+export interface AutocompletePaperSlotPropsOverrides {}
+export interface AutocompletePopperSlotPropsOverrides {}
+
 export {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
@@ -89,17 +92,17 @@ export interface AutocompleteSlots {
    * The component used to render the listbox.
    * @default 'ul'
    */
-  listbox?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
+  listbox: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
   /**
    * The component used to render the body of the popup.
    * @default Paper
    */
-  paper?: React.JSXElementConstructor<PaperProps>;
+  paper: React.JSXElementConstructor<PaperProps & AutocompletePaperSlotPropsOverrides>;
   /**
    * The component used to position the popup.
    * @default Popper
    */
-  popper?: React.JSXElementConstructor<PopperProps>;
+  popper: React.JSXElementConstructor<PopperProps & AutocompletePopperSlotPropsOverrides>;
 }
 
 export type AutocompleteSlotsAndSlotProps<
@@ -134,15 +137,14 @@ export type AutocompleteSlotsAndSlotProps<
       {},
       AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
     >;
-
     paper: SlotProps<
       React.ElementType<Partial<PaperProps>>,
-      {},
+      AutocompletePaperSlotPropsOverrides,
       AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
     >;
     popper: SlotProps<
       React.ElementType<Partial<PopperProps>>,
-      {},
+      AutocompletePopperSlotPropsOverrides,
       AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
     >;
     popupIndicator: SlotProps<

package/Autocomplete/Autocomplete.js

@@ -604,7 +604,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     const more = startAdornment.length - limitTags;
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
-      startAdornment.push( /*#__PURE__*/_jsx("span", {
+      startAdornment.push(/*#__PURE__*/_jsx("span", {
         className: classes.tag,
         children: getLimitTagsText(more)
       }, startAdornment.length));
@@ -662,7 +662,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
       as: ListboxSlot,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
@@ -677,13 +677,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       })
     }));
   } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteLoading, {
       className: classes.loading,
       ownerState: ownerState,
       children: loadingText
     }));
   } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteNoOptions, {
       className: classes.noOptions,
       ownerState: ownerState,
       role: "presentation",

package/Avatar/Avatar.d.ts

@@ -12,7 +12,7 @@ export interface AvatarSlots {
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Collapse
    */
-  img?: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
+  img: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
 }
 
 export interface AvatarPropsVariantOverrides {}

package/AvatarGroup/AvatarGroup.d.ts

@@ -16,7 +16,7 @@ export interface AvatarGroupPropsVariantOverrides {}
 export interface AvatarGroupComponentsPropsOverrides {}
 
 export interface AvatarGroupSlots {
-  surplus?: React.ElementType;
+  surplus: React.ElementType;
 }
 
 export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<

package/Backdrop/Backdrop.d.ts

@@ -12,13 +12,13 @@ export interface BackdropSlots {
    * The component that renders the root.
    * @default 'div'
    */
-  root?: React.ElementType;
+  root: React.ElementType;
   /**
    * The component that renders the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
    */
-  transition?: React.JSXElementConstructor<
+  transition: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<unknown, any> }
   >;
 }

package/Badge/Badge.js

@@ -9,6 +9,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
@@ -75,7 +76,7 @@ const BadgeBadge = styled('span', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
-  variants: [...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['contrastText'])).map(([color]) => ({
     props: {
       color
     },

package/Button/Button.js

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import capitalize from "../utils/capitalize.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import buttonClasses, { getButtonUtilityClass } from "./buttonClasses.js";
 import ButtonGroupContext from "../ButtonGroup/ButtonGroupContext.js";
 import ButtonGroupButtonContext from "../ButtonGroup/ButtonGroupButtonContext.js";
@@ -146,7 +147,7 @@ const ButtonRoot = styled(ButtonBase, {
         color: `var(--variant-textColor)`,
         backgroundColor: `var(--variant-textBg)`
       }
-    }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.dark && palette.contrastText).map(([color]) => ({
+    }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark', 'contrastText'])).map(([color]) => ({
       props: {
         color
       },

package/ButtonGroup/ButtonGroup.js

@@ -9,6 +9,7 @@ import getValidReactChildren from '@mui/utils/getValidReactChildren';
 import capitalize from "../utils/capitalize.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
+import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import buttonGroupClasses, { getButtonGroupUtilityClass } from "./buttonGroupClasses.js";
 import ButtonGroupContext from "./ButtonGroupContext.js";
@@ -140,7 +141,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.main).flatMap(([color]) => [{
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).flatMap(([color]) => [{
     props: {
       variant: 'text',
       color
@@ -208,7 +209,7 @@ const ButtonGroupRoot = styled('div', {
         }
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, value]) => value && value.dark).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(['dark'])).map(([color]) => ({
     props: {
       variant: 'contained',
       color