@mui/material 7.3.5 → 7.3.6

package/TextField/TextField.d.ts

@@ -47,22 +47,27 @@ export interface TextFieldSlots {
    */
   select: React.ElementType;
 }
+export interface TextFieldRootSlotPropsOverrides {}
+export interface TextFieldInputSlotPropsOverrides {}
+export interface TextFieldInputLabelSlotPropsOverrides {}
+export interface TextFieldFormHelperTextSlotPropsOverrides {}
+export interface TextFieldSelectSlotPropsOverrides {}
 export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<TextFieldSlots, {
   /**
    * Props forwarded to the root slot.
    * By default, the available props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
    */
-  root: SlotProps<React.ElementType<FormControlProps>, {}, TextFieldOwnerState>;
+  root: SlotProps<React.ElementType<FormControlProps>, TextFieldRootSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input slot.
    * By default, the available props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
    */
-  input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
+  input: SlotProps<React.ElementType<InputPropsType>, TextFieldInputSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the input label slot.
    * By default, the available props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
    */
-  inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
+  inputLabel: SlotProps<React.ElementType<InputLabelProps>, TextFieldInputLabelSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the html input slot.
    * By default, the available props are based on the html input element.
@@ -72,12 +77,12 @@ export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps
    * Props forwarded to the form helper text slot.
    * By default, the available props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
    */
-  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
+  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, TextFieldFormHelperTextSlotPropsOverrides, TextFieldOwnerState>;
   /**
    * Props forwarded to the select slot.
    * By default, the available props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
    */
-  select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
+  select: SlotProps<React.ElementType<SelectProps>, TextFieldSelectSlotPropsOverrides, TextFieldOwnerState>;
 }>;
 export interface BaseTextFieldProps extends StandardProps<FormControlProps,
 // event handlers are declared on derived interfaces

package/Unstable_TrapFocus/FocusTrap.js

@@ -15,6 +15,7 @@ var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"))
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
+var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -118,7 +119,8 @@ function FocusTrap(props) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
-    if (!rootRef.current.contains(doc.activeElement)) {
+    const activeElement = (0, _getActiveElement.default)(doc);
+    if (!rootRef.current.contains(activeElement)) {
       if (!rootRef.current.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(['MUI: The modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n'));
@@ -153,6 +155,7 @@ function FocusTrap(props) {
       return;
     }
     const doc = (0, _ownerDocument.default)(rootRef.current);
+    const activeElement = (0, _getActiveElement.default)(doc);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -160,8 +163,8 @@ function FocusTrap(props) {
       }
 
       // Make sure the next tab starts from the right place.
-      // doc.activeElement refers to the origin.
-      if (doc.activeElement === rootRef.current && nativeEvent.shiftKey) {
+      // activeElement refers to the origin.
+      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
         // We need to ignore the next contain as
         // it will try to move the focus back to the rootRef element.
         ignoreNextEnforceFocus.current = true;
@@ -178,23 +181,24 @@ function FocusTrap(props) {
       if (rootElement === null) {
         return;
       }
+      const activeEl = (0, _getActiveElement.default)(doc);
       if (!doc.hasFocus() || !isEnabled() || ignoreNextEnforceFocus.current) {
         ignoreNextEnforceFocus.current = false;
         return;
       }
 
       // The focus is already inside
-      if (rootElement.contains(doc.activeElement)) {
+      if (rootElement.contains(activeEl)) {
         return;
       }
 
       // The disableEnforceFocus is set and the focus is outside of the focus trap (and sentinel nodes)
-      if (disableEnforceFocus && doc.activeElement !== sentinelStart.current && doc.activeElement !== sentinelEnd.current) {
+      if (disableEnforceFocus && activeEl !== sentinelStart.current && activeEl !== sentinelEnd.current) {
         return;
       }
 
       // if the focus event is not coming from inside the children's react tree, reset the refs
-      if (doc.activeElement !== reactFocusEventTarget.current) {
+      if (activeEl !== reactFocusEventTarget.current) {
         reactFocusEventTarget.current = null;
       } else if (reactFocusEventTarget.current !== null) {
         return;
@@ -203,7 +207,7 @@ function FocusTrap(props) {
         return;
       }
       let tabbable = [];
-      if (doc.activeElement === sentinelStart.current || doc.activeElement === sentinelEnd.current) {
+      if (activeEl === sentinelStart.current || activeEl === sentinelEnd.current) {
         tabbable = getTabbable(rootRef.current);
       }
 
@@ -235,7 +239,8 @@ function FocusTrap(props) {
     // The whatwg spec defines how the browser should behave but does not explicitly mention any events:
     // https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule.
     const interval = setInterval(() => {
-      if (doc.activeElement && doc.activeElement.tagName === 'BODY') {
+      const activeEl = (0, _getActiveElement.default)(doc);
+      if (activeEl && activeEl.tagName === 'BODY') {
         contain();
       }
     }, 50);

package/esm/Accordion/Accordion.d.ts

@@ -55,62 +55,63 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots,
    */
   region: SlotProps<'div', AccordionRegionSlotPropsOverrides, AccordionOwnerState>;
 }>;
+export interface AccordionOwnProps {
+  /**
+   * The content of the component.
+   */
+  children: NonNullable<React.ReactNode>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<AccordionClasses>;
+  /**
+   * If `true`, expands the accordion by default.
+   * @default false
+   */
+  defaultExpanded?: boolean;
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * @default false
+   */
+  disableGutters?: boolean;
+  /**
+   * If `true`, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  expanded?: boolean;
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {boolean} expanded The `expanded` state of the accordion.
+   */
+  onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * 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.
+   * @deprecated Use `slots.transition` 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.
+   */
+  TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
+    children?: React.ReactElement<unknown, any>;
+  }>;
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @deprecated Use `slotProps.transition` 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.
+   */
+  TransitionProps?: TransitionProps;
+}
 export type AccordionTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> = ExtendPaperTypeMap<{
-  props: AdditionalProps & {
-    /**
-     * The content of the component.
-     */
-    children: NonNullable<React.ReactNode>;
-    /**
-     * Override or extend the styles applied to the component.
-     */
-    classes?: Partial<AccordionClasses>;
-    /**
-     * If `true`, expands the accordion by default.
-     * @default false
-     */
-    defaultExpanded?: boolean;
-    /**
-     * If `true`, the component is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If `true`, it removes the margin between two expanded accordion items and the increase of height.
-     * @default false
-     */
-    disableGutters?: boolean;
-    /**
-     * If `true`, expands the accordion, otherwise collapse it.
-     * Setting this prop enables control over the accordion.
-     */
-    expanded?: boolean;
-    /**
-     * Callback fired when the expand/collapse state is changed.
-     *
-     * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
-     * @param {boolean} expanded The `expanded` state of the accordion.
-     */
-    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * 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.
-     * @deprecated Use `slots.transition` 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.
-     */
-    TransitionComponent?: React.JSXElementConstructor<TransitionProps & {
-      children?: React.ReactElement<unknown, any>;
-    }>;
-    /**
-     * Props applied to the transition element.
-     * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-     * @deprecated Use `slotProps.transition` 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.
-     */
-    TransitionProps?: TransitionProps;
-  } & AccordionSlotsAndSlotProps;
+  props: AdditionalProps & AccordionOwnProps & AccordionSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }, 'onChange' | 'classes'>;
 

package/esm/AppBar/AppBar.d.ts

@@ -18,6 +18,12 @@ export interface AppBarOwnProps {
    * @default 'primary'
    */
   color?: OverridableStringUnion<PropTypes.Color | 'transparent' | 'error' | 'info' | 'success' | 'warning', AppBarPropsColorOverrides>;
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 4
+   */
+  elevation?: number;
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false
@@ -25,11 +31,16 @@ 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/Web/CSS/position).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */
   position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative';
+  /**
+   * If `false`, rounded corners are enabled.
+   * @default true
+   */
+  square?: boolean;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -38,7 +49,7 @@ export interface AppBarOwnProps {
 export type AppBarTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'header'> = ExtendPaperTypeMap<{
   props: AdditionalProps & AppBarOwnProps;
   defaultComponent: RootComponent;
-}, 'position' | 'color' | 'classes'>;
+}, 'position' | 'color' | 'classes' | 'elevation' | 'square'>;
 
 /**
  *

package/esm/AppBar/AppBar.js

@@ -207,6 +207,12 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent', 'error', 'info', 'success', 'warning']), PropTypes.string]),
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It accepts values between 0 and 24 inclusive.
+   * @default 4
+   */
+  elevation: PropTypes.number,
   /**
    * If true, the `color` prop is applied in dark mode.
    * @default false
@@ -214,11 +220,16 @@ 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/Web/CSS/position).
+   * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/position).
    * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
    * @default 'fixed'
    */
   position: PropTypes.oneOf(['absolute', 'fixed', 'relative', 'static', 'sticky']),
+  /**
+   * If `false`, rounded corners are enabled.
+   * @default true
+   */
+  square: PropTypes.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/Button/Button.d.ts

@@ -117,6 +117,7 @@ export type ExtendButton<TypeMap extends OverridableTypeMap> = ((props: {
  *
  * - [Button Group](https://mui.com/material-ui/react-button-group/)
  * - [Button](https://mui.com/material-ui/react-button/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  *
  * API:
  *

package/esm/ButtonBase/ButtonBase.js

@@ -222,7 +222,10 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   }
   const buttonProps = {};
   if (ComponentProp === 'button') {
-    buttonProps.type = type === undefined ? 'button' : type;
+    const hasFormAttributes = !!other.formAction;
+    // ButtonBase was defaulting to type="button" when no type prop was provided, which prevented form submission and broke formAction functionality.
+    // The fix checks for form-related attributes and skips the default type to allow the browser's natural submit behavior (type="submit").
+    buttonProps.type = type === undefined && !hasFormAttributes ? 'button' : type;
     buttonProps.disabled = disabled;
   } else {
     if (!other.href && !other.to) {
@@ -350,6 +353,10 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * @ignore
+   */
+  formAction: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * @ignore
    */

package/esm/ButtonBase/TouchRipple.js

@@ -228,7 +228,7 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
     }
 
-    // Touche devices
+    // Touch devices
     if (event?.touches) {
       // check that this isn't another touchstart due to multitouch
       // otherwise we will only clear a single timer when unmounting while two

package/esm/Chip/Chip.js

@@ -71,7 +71,7 @@ const ChipRoot = styled('div', {
       [`& .${chipClasses.deleteIcon}`]: styles[`deleteIconColor${capitalize(color)}`]
     }, {
       [`& .${chipClasses.deleteIcon}`]: styles[`deleteIcon${capitalize(variant)}Color${capitalize(color)}`]
-    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
+    }, styles.root, styles[`size${capitalize(size)}`], styles[`color${capitalize(color)}`], clickable && styles.clickable, clickable && color !== 'default' && styles[`clickableColor${capitalize(color)}`], onDelete && styles.deletable, onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`], styles[variant], styles[`${variant}${capitalize(color)}`]];
   }
 })(memoTheme(({
   theme

package/esm/CssBaseline/CssBaseline.d.ts

@@ -7,7 +7,7 @@ export interface CssBaselineProps extends StyledComponentProps<never> {
   children?: React.ReactNode;
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * 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
    * @default false
    */

package/esm/CssBaseline/CssBaseline.js

@@ -152,7 +152,7 @@ process.env.NODE_ENV !== "production" ? CssBaseline.propTypes /* remove-proptype
   children: PropTypes.node,
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * 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
    * @default false
    */

package/esm/FormControl/FormControl.d.ts

@@ -105,6 +105,7 @@ export interface FormControlTypeMap<AdditionalProps = {}, RootComponent extends
  * Demos:
  *
  * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
  * - [Switch](https://mui.com/material-ui/react-switch/)
  * - [Text Field](https://mui.com/material-ui/react-text-field/)

package/esm/FormHelperText/FormHelperText.d.ts

@@ -58,6 +58,7 @@ export interface FormHelperTextTypeMap<AdditionalProps = {}, RootComponent exten
  *
  * Demos:
  *
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:

package/esm/FormLabel/FormLabel.d.ts

@@ -60,6 +60,7 @@ export interface FormLabelTypeMap<AdditionalProps = {}, RootComponent extends Re
  * Demos:
  *
  * - [Checkbox](https://mui.com/material-ui/react-checkbox/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  * - [Radio Group](https://mui.com/material-ui/react-radio-button/)
  * - [Switch](https://mui.com/material-ui/react-switch/)
  *

package/esm/IconButton/IconButton.d.ts

@@ -77,6 +77,7 @@ export type IconButtonTypeMap<AdditionalProps = {}, RootComponent extends React.
  * Demos:
  *
  * - [Button](https://mui.com/material-ui/react-button/)
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  *
  * API:
  *

package/esm/InputLabel/InputLabel.d.ts

@@ -65,6 +65,7 @@ export type InputLabelTypeMap<AdditionalProps = {}, RootComponent extends React.
  *
  * Demos:
  *
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:

package/esm/ListItem/ListItem.d.ts

@@ -3,7 +3,9 @@ import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { ListItemClasses } from "./listItemClasses.js";
+import { SlotProps } from "../utils/types.js";
 export interface ListItemComponentsPropsOverrides {}
+export interface ListItemSecondaryActionSlotPropsOverrides {}
 
 /**
  * This type is kept for compatibility. Use `ListItemOwnProps` instead.
@@ -65,6 +67,7 @@ export interface ListItemBaseProps {
    */
   sx?: SxProps<Theme>;
 }
+export interface ListItemOwnerState extends Omit<ListItemProps, 'slots' | 'slotProps'> {}
 export interface ListItemOwnProps extends ListItemBaseProps {
   /**
    * The components used for each slot inside.
@@ -93,6 +96,7 @@ export interface ListItemOwnProps extends ListItemBaseProps {
    */
   slotProps?: {
     root?: React.HTMLAttributes<HTMLDivElement> & ListItemComponentsPropsOverrides;
+    secondaryAction?: SlotProps<React.ElementType<React.HTMLAttributes<HTMLDivElement>>, ListItemSecondaryActionSlotPropsOverrides, ListItemOwnerState>;
   };
   /**
    * The components used for each slot inside.
@@ -101,6 +105,7 @@ export interface ListItemOwnProps extends ListItemBaseProps {
    */
   slots?: {
     root?: React.ElementType;
+    secondaryAction?: React.ElementType;
   };
 }
 export interface ListItemTypeMap<AdditionalProps, RootComponent extends React.ElementType> {

package/esm/ListItem/ListItem.js

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import isMuiElement from "../utils/isMuiElement.js";
 import useForkRef from "../utils/useForkRef.js";
+import useSlot from "../utils/useSlot.js";
 import ListContext from "../List/ListContext.js";
 import { getListItemUtilityClass } from "./listItemClasses.js";
 import { listItemButtonClasses } from "../ListItemButton/index.js";
@@ -35,7 +36,8 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', dense && 'dense', !disableGutters && 'gutters', !disablePadding && 'padding', divider && 'divider', alignItems === 'flex-start' && 'alignItemsFlexStart', hasSecondaryAction && 'secondaryAction'],
-    container: ['container']
+    container: ['container'],
+    secondaryAction: ['secondaryAction']
   };
   return composeClasses(slots, getListItemUtilityClass, classes);
 };
@@ -197,6 +199,16 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const handleRef = useForkRef(listItemRef, ref);
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [SecondaryActionSlot, secondaryActionSlotProps] = useSlot('secondaryAction', {
+    elementType: ListItemSecondaryAction,
+    externalForwardedProps,
+    ownerState,
+    className: classes.secondaryAction
+  });
   const Root = slots.root || components.Root || ListItemRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const componentProps = {
@@ -254,7 +266,8 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem(inProps, ref) {
         }
       }),
       ...componentProps,
-      children: [children, secondaryAction && /*#__PURE__*/_jsx(ListItemSecondaryAction, {
+      children: [children, secondaryAction && /*#__PURE__*/_jsx(SecondaryActionSlot, {
+        ...secondaryActionSlotProps,
         children: secondaryAction
       })]
     })
@@ -369,7 +382,8 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * @default {}
    */
   slotProps: PropTypes.shape({
-    root: PropTypes.object
+    root: PropTypes.object,
+    secondaryAction: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
@@ -377,7 +391,8 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes /* remove-proptypes *
    * @default {}
    */
   slots: PropTypes.shape({
-    root: PropTypes.elementType
+    root: PropTypes.elementType,
+    secondaryAction: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/esm/MenuList/MenuList.js

@@ -5,6 +5,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import ownerDocument from "../utils/ownerDocument.js";
 import List from "../List/index.js";
+import getActiveElement from "../utils/getActiveElement.js";
 import getScrollbarSize from "../utils/getScrollbarSize.js";
 import useForkRef from "../utils/useForkRef.js";
 import useEnhancedEffect from "../utils/useEnhancedEffect.js";
@@ -136,7 +137,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
      * or document.body or document.documentElement. Only the first case will
      * trigger this specific handler.
      */
-    const currentFocus = ownerDocument(list).activeElement;
+    const currentFocus = getActiveElement(ownerDocument(list));
     if (key === 'ArrowDown') {
       // Prevent scroll of the page
       event.preventDefault();

package/esm/OutlinedInput/OutlinedInput.d.ts

@@ -43,6 +43,7 @@ export interface OutlinedInputOwnerState extends Omit<OutlinedInputProps, 'slots
  *
  * Demos:
  *
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
  * - [Text Field](https://mui.com/material-ui/react-text-field/)
  *
  * API:

package/esm/ScopedCssBaseline/ScopedCssBaseline.d.ts

@@ -14,7 +14,7 @@ export interface ScopedCssBaselineOwnProps {
   classes?: Partial<ScopedCssBaselineClasses>;
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * 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;

package/esm/ScopedCssBaseline/ScopedCssBaseline.js

@@ -107,7 +107,7 @@ process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes /* remove-pr
   component: PropTypes.elementType,
   /**
    * Enable `color-scheme` CSS property to use `theme.palette.mode`.
-   * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * 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: PropTypes.bool,

package/esm/Select/SelectInput.d.ts

@@ -41,6 +41,8 @@ export interface SelectInputProps<Value = unknown> {
   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;

package/esm/Select/SelectInput.js

@@ -128,6 +128,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     onChange,
     onClose,
     onFocus,
+    // eslint-disable-next-line react/prop-types
+    onKeyDown,
+    // eslint-disable-next-line react/prop-types
+    onMouseDown,
     onOpen,
     open: openProp,
     readOnly,
@@ -222,6 +226,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
   const handleMouseDown = event => {
+    onMouseDown?.(event);
     // Ignore everything but left-click
     if (event.button !== 0) {
       return;
@@ -301,6 +306,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         event.preventDefault();
         update(true, event);
       }
+      onKeyDown?.(event);
     }
   };
   const open = displayNode !== null && openState;

package/esm/Slider/Slider.d.ts

@@ -113,7 +113,7 @@ export interface SliderOwnProps<Value extends number | number[]> {
    * If an array, it should contain objects with `value` and an optional `label` keys.
    * @default false
    */
-  marks?: boolean | Mark[];
+  marks?: boolean | readonly Mark[];
   /**
    * The maximum allowed value of the slider.
    * Should not be equal to min.

package/esm/Slider/useSlider.types.d.ts

@@ -198,7 +198,7 @@ export interface UseSliderReturnValue {
   /**
    * The marks of the slider. Marks indicate predetermined values to which the user can move the slider.
    */
-  marks: Mark[];
+  marks: readonly Mark[];
   /**
    * The thumb index for the current value when in hover state.
    */