@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/Accordion/Accordion.d.mts

@@ -48,7 +48,7 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots,
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
   /**
    * Props forwarded to the region slot.
    * By default, the available props are based on the div element.

package/Accordion/Accordion.d.ts

@@ -48,7 +48,7 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<AccordionSlots,
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & AccordionTransitionSlotPropsOverrides, AccordionOwnerState>;
   /**
    * Props forwarded to the region slot.
    * By default, the available props are based on the div element.

package/AccordionSummary/AccordionSummary.js

@@ -159,6 +159,7 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     additionalProps: {
       focusRipple: false,
       disableRipple: true,
+      internalNativeButton: true,
       disabled,
       'aria-expanded': expanded,
       focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName)

package/AccordionSummary/AccordionSummary.mjs

@@ -152,6 +152,7 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     additionalProps: {
       focusRipple: false,
       disableRipple: true,
+      internalNativeButton: true,
       disabled,
       'aria-expanded': expanded,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)

package/Backdrop/Backdrop.d.mts

@@ -31,7 +31,7 @@ export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<BackdropSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
 }>;
 export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>, BackdropSlotsAndSlotProps {
   /**

package/Backdrop/Backdrop.d.ts

@@ -31,7 +31,7 @@ export type BackdropSlotsAndSlotProps = CreateSlotsAndSlotProps<BackdropSlots, {
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & BackdropTransitionSlotPropsOverrides, BackdropOwnerState>;
 }>;
 export interface BackdropOwnProps extends Partial<Omit<FadeProps, 'children'>>, BackdropSlotsAndSlotProps {
   /**

package/BottomNavigationAction/BottomNavigationAction.js

@@ -143,6 +143,7 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     ref,
     className: (0, _clsx.default)(classes.root, className),
     additionalProps: {
+      internalNativeButton: true,
       focusRipple: true
     },
     getSlotProps: handlers => ({

package/BottomNavigationAction/BottomNavigationAction.mjs

@@ -136,6 +136,7 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     ref,
     className: clsx(classes.root, className),
     additionalProps: {
+      internalNativeButton: true,
       focusRipple: true
     },
     getSlotProps: handlers => ({

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -59,11 +59,15 @@ function BreadcrumbCollapsed(props) {
     slotProps = {},
     ...otherProps
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = otherProps;
   const ownerState = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedButton, {
       focusRipple: true,
-      ...otherProps,
+      ...buttonBaseProps,
       ownerState: ownerState,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BreadcrumbCollapsedIcon, {
         as: slots.CollapsedIcon,

package/Breadcrumbs/BreadcrumbCollapsed.mjs

@@ -53,11 +53,15 @@ function BreadcrumbCollapsed(props) {
     slotProps = {},
     ...otherProps
   } = props;
+  const {
+    nativeButton,
+    ...buttonBaseProps
+  } = otherProps;
   const ownerState = props;
   return /*#__PURE__*/_jsx("li", {
     children: /*#__PURE__*/_jsx(BreadcrumbCollapsedButton, {
       focusRipple: true,
-      ...otherProps,
+      ...buttonBaseProps,
       ownerState: ownerState,
       children: /*#__PURE__*/_jsx(BreadcrumbCollapsedIcon, {
         as: slots.CollapsedIcon,

package/Button/Button.js

@@ -566,6 +566,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: (0, _clsx.default)(classes.focusVisible, focusVisibleClassName),
     ref: ref,
+    internalNativeButton: true,
     type: type,
     id: loading ? loadingId : idProp,
     ...other,

package/Button/Button.mjs

@@ -559,6 +559,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
+    internalNativeButton: true,
     type: type,
     id: loading ? loadingId : idProp,
     ...other,

package/ButtonBase/ButtonBase.d.mts

@@ -62,6 +62,11 @@ export interface ButtonBaseOwnProps {
    * @default 'a'
    */
   LinkComponent?: React.ElementType | undefined;
+  /**
+   * Whether the custom component is expected to render a native `<button>` element
+   * when passing a React component to the `component` or `slots` prop.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * Callback fired when the component is focused with a keyboard.
    * We trigger a `onFocus` callback too.

package/ButtonBase/ButtonBase.d.ts

@@ -62,6 +62,11 @@ export interface ButtonBaseOwnProps {
    * @default 'a'
    */
   LinkComponent?: React.ElementType | undefined;
+  /**
+   * Whether the custom component is expected to render a native `<button>` element
+   * when passing a React component to the `component` or `slots` prop.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * Callback fired when the component is focused with a keyboard.
    * We trigger a `onFocus` callback too.

package/ButtonBase/ButtonBase.js

@@ -18,6 +18,7 @@ var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var _useButtonBase = _interopRequireDefault(require("./useButtonBase"));
 var _useLazyRipple = _interopRequireDefault(require("../useLazyRipple"));
 var _TouchRipple = _interopRequireDefault(require("./TouchRipple"));
 var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"));
@@ -27,13 +28,14 @@ const useUtilityClasses = ownerState => {
     disabled,
     focusVisible,
     focusVisibleClassName,
+    suppressFocusVisible,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
+    root: ['root', disabled && 'disabled', focusVisible && !suppressFocusVisible && 'focusVisible']
   };
   const composedClasses = (0, _composeClasses.default)(slots, _buttonBaseClasses.getButtonBaseUtilityClass, classes);
-  if (focusVisible && focusVisibleClassName) {
+  if (focusVisible && !suppressFocusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }
   return composedClasses;
@@ -102,15 +104,25 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     disableTouchRipple = false,
     focusRipple = false,
     focusVisibleClassName,
+    /* eslint-disable react/prop-types */
+    // replaces internal handling in Chip, other components can opt-in individually to use this in the future
+    focusableWhenDisabled,
+    // escape hatch to suppress the focusVisible state and callback
+    // used by anchored <Menu>s to to suppress focus visible styling when opened with a pointer
+    suppressFocusVisible = false,
+    // private prop to allow native vs non-native button props to be resolved before mount
+    internalNativeButton: internalNativeButtonProp,
+    /* eslint-enable react/prop-types */
     LinkComponent = 'a',
+    nativeButton: nativeButtonProp,
     onBlur,
-    onClick,
+    onClick: onClickProp,
     onContextMenu,
     onDragLeave,
     onFocus,
     onFocusVisible,
-    onKeyDown,
-    onKeyUp,
+    onKeyDown: onKeyDownProp,
+    onKeyUp: onKeyUpProp,
     onMouseDown,
     onMouseLeave,
     onMouseUp,
@@ -123,19 +135,68 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     type,
     ...other
   } = props;
-  const buttonRef = React.useRef(null);
+  const isLink = Boolean(other.href || other.to);
+  const hasFormAction = Boolean(other.formAction);
+  let ComponentProp = component;
+  if (ComponentProp === 'button' && isLink) {
+    ComponentProp = LinkComponent;
+  }
+  const internalNativeButton = typeof ComponentProp === 'string' ? ComponentProp === 'button' : internalNativeButtonProp ?? false;
+  const nativeButton = nativeButtonProp ?? internalNativeButton;
   const ripple = (0, _useLazyRipple.default)();
   const handleRippleRef = (0, _useForkRef.default)(ripple.ref, touchRippleRef);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  if (disabled && focusVisible) {
+  if ((disabled || suppressFocusVisible) && focusVisible) {
     setFocusVisible(false);
   }
+  const handleBeforeKeyDown = (0, _useEventCallback.default)(event => {
+    // Check if key is already down to avoid repeats being counted as multiple activations
+    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
+      ripple.stop(event, () => {
+        ripple.start(event);
+      });
+    }
+  });
+  const handleBeforeKeyUp = (0, _useEventCallback.default)(event => {
+    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
+      ripple.stop(event, () => {
+        ripple.pulsate(event);
+      });
+    }
+  });
+  const {
+    getButtonProps,
+    rootRef: buttonRef
+  } = (0, _useButtonBase.default)({
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton,
+    allowInferredHostMismatch: isLink || typeof ComponentProp === 'string',
+    disabled,
+    type,
+    hasFormAction,
+    tabIndex,
+    onBeforeKeyDown: handleBeforeKeyDown,
+    onBeforeKeyUp: handleBeforeKeyUp
+  });
+  const {
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    ...buttonProps
+  } = getButtonProps({
+    onClick: onClickProp,
+    onKeyDown: onKeyDownProp,
+    onKeyUp: onKeyUpProp
+  });
   React.useImperativeHandle(action, () => ({
     focusVisible: () => {
       setFocusVisible(true);
       buttonRef.current.focus();
     }
-  }), []);
+  }), [buttonRef]);
   const enableTouchRipple = ripple.shouldMount && !disableRipple && !disabled;
   React.useEffect(() => {
     if (focusVisible && focusRipple && !disableRipple) {
@@ -170,7 +231,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     if (!buttonRef.current) {
       buttonRef.current = event.currentTarget;
     }
-    if ((0, _isFocusVisible.default)(event.target)) {
+    if (!suppressFocusVisible && (0, _isFocusVisible.default)(event.target)) {
       setFocusVisible(true);
       if (onFocusVisible) {
         onFocusVisible(event);
@@ -180,79 +241,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       onFocus(event);
     }
   });
-  const isNonNativeButton = () => {
-    const button = buttonRef.current;
-    if (!button) {
-      return component && component !== 'button';
-    }
-    if (button.tagName === 'BUTTON') {
-      return false;
-    }
-    return !(button.tagName === 'A' && button.href);
-  };
-  const handleKeyDown = (0, _useEventCallback.default)(event => {
-    if (disabled) {
-      return;
-    }
-
-    // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
-      ripple.stop(event, () => {
-        ripple.start(event);
-      });
-    }
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
-      event.preventDefault();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
-      event.preventDefault();
-      event.currentTarget.click();
-    }
-  });
-  const handleKeyUp = (0, _useEventCallback.default)(event => {
+  const linkProps = {};
+  if (isLink) {
+    linkProps.tabIndex = disabled ? -1 : tabIndex;
     if (disabled) {
-      return;
-    }
-
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
-      ripple.stop(event, () => {
-        ripple.pulsate(event);
-      });
-    }
-    if (onKeyUp) {
-      onKeyUp(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented && !disabled) {
-      event.currentTarget.click();
-    }
-  });
-  let ComponentProp = component;
-  if (ComponentProp === 'button' && (other.href || other.to)) {
-    ComponentProp = LinkComponent;
-  }
-  const buttonProps = {};
-  if (ComponentProp === 'button') {
-    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) {
-      buttonProps.role = 'button';
-    }
-    if (disabled) {
-      buttonProps['aria-disabled'] = disabled;
+      linkProps['aria-disabled'] = disabled;
     }
+    linkProps.type = type;
   }
   const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const ownerState = {
@@ -263,6 +258,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     disableRipple,
     disableTouchRipple,
     focusRipple,
+    suppressFocusVisible,
     tabIndex,
     focusVisible
   };
@@ -275,8 +271,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onClick: onClick,
     onContextMenu: handleContextMenu,
     onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: handleMouseDown,
     onMouseLeave: handleMouseLeave,
     onMouseUp: handleMouseUp,
@@ -285,9 +281,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchMove: handleTouchMove,
     onTouchStart: handleTouchStart,
     ref: handleRef,
-    tabIndex: disabled ? -1 : tabIndex,
-    type: type,
-    ...buttonProps,
+    ...(isLink ? linkProps : buttonProps),
     ...other,
     children: [children, enableTouchRipple ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchRipple.default, {
       ref: handleRippleRef,
@@ -385,6 +379,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
    * @default 'a'
    */
   LinkComponent: _propTypes.default.elementType,
+  /**
+   * Whether the custom component is expected to render a native `<button>` element
+   * when passing a React component to the `component` or `slots` prop.
+   */
+  nativeButton: _propTypes.default.bool,
   /**
    * @ignore
    */

package/ButtonBase/ButtonBase.mjs

@@ -11,6 +11,7 @@ import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
+import useButtonBase from "./useButtonBase.mjs";
 import useLazyRipple from "../useLazyRipple/index.mjs";
 import TouchRipple from "./TouchRipple.mjs";
 import buttonBaseClasses, { getButtonBaseUtilityClass } from "./buttonBaseClasses.mjs";
@@ -20,13 +21,14 @@ const useUtilityClasses = ownerState => {
     disabled,
     focusVisible,
     focusVisibleClassName,
+    suppressFocusVisible,
     classes
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
+    root: ['root', disabled && 'disabled', focusVisible && !suppressFocusVisible && 'focusVisible']
   };
   const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
-  if (focusVisible && focusVisibleClassName) {
+  if (focusVisible && !suppressFocusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }
   return composedClasses;
@@ -95,15 +97,25 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     disableTouchRipple = false,
     focusRipple = false,
     focusVisibleClassName,
+    /* eslint-disable react/prop-types */
+    // replaces internal handling in Chip, other components can opt-in individually to use this in the future
+    focusableWhenDisabled,
+    // escape hatch to suppress the focusVisible state and callback
+    // used by anchored <Menu>s to to suppress focus visible styling when opened with a pointer
+    suppressFocusVisible = false,
+    // private prop to allow native vs non-native button props to be resolved before mount
+    internalNativeButton: internalNativeButtonProp,
+    /* eslint-enable react/prop-types */
     LinkComponent = 'a',
+    nativeButton: nativeButtonProp,
     onBlur,
-    onClick,
+    onClick: onClickProp,
     onContextMenu,
     onDragLeave,
     onFocus,
     onFocusVisible,
-    onKeyDown,
-    onKeyUp,
+    onKeyDown: onKeyDownProp,
+    onKeyUp: onKeyUpProp,
     onMouseDown,
     onMouseLeave,
     onMouseUp,
@@ -116,19 +128,68 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     type,
     ...other
   } = props;
-  const buttonRef = React.useRef(null);
+  const isLink = Boolean(other.href || other.to);
+  const hasFormAction = Boolean(other.formAction);
+  let ComponentProp = component;
+  if (ComponentProp === 'button' && isLink) {
+    ComponentProp = LinkComponent;
+  }
+  const internalNativeButton = typeof ComponentProp === 'string' ? ComponentProp === 'button' : internalNativeButtonProp ?? false;
+  const nativeButton = nativeButtonProp ?? internalNativeButton;
   const ripple = useLazyRipple();
   const handleRippleRef = useForkRef(ripple.ref, touchRippleRef);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  if (disabled && focusVisible) {
+  if ((disabled || suppressFocusVisible) && focusVisible) {
     setFocusVisible(false);
   }
+  const handleBeforeKeyDown = useEventCallback(event => {
+    // Check if key is already down to avoid repeats being counted as multiple activations
+    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
+      ripple.stop(event, () => {
+        ripple.start(event);
+      });
+    }
+  });
+  const handleBeforeKeyUp = useEventCallback(event => {
+    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
+    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
+      ripple.stop(event, () => {
+        ripple.pulsate(event);
+      });
+    }
+  });
+  const {
+    getButtonProps,
+    rootRef: buttonRef
+  } = useButtonBase({
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton,
+    allowInferredHostMismatch: isLink || typeof ComponentProp === 'string',
+    disabled,
+    type,
+    hasFormAction,
+    tabIndex,
+    onBeforeKeyDown: handleBeforeKeyDown,
+    onBeforeKeyUp: handleBeforeKeyUp
+  });
+  const {
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    ...buttonProps
+  } = getButtonProps({
+    onClick: onClickProp,
+    onKeyDown: onKeyDownProp,
+    onKeyUp: onKeyUpProp
+  });
   React.useImperativeHandle(action, () => ({
     focusVisible: () => {
       setFocusVisible(true);
       buttonRef.current.focus();
     }
-  }), []);
+  }), [buttonRef]);
   const enableTouchRipple = ripple.shouldMount && !disableRipple && !disabled;
   React.useEffect(() => {
     if (focusVisible && focusRipple && !disableRipple) {
@@ -163,7 +224,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     if (!buttonRef.current) {
       buttonRef.current = event.currentTarget;
     }
-    if (isFocusVisible(event.target)) {
+    if (!suppressFocusVisible && isFocusVisible(event.target)) {
       setFocusVisible(true);
       if (onFocusVisible) {
         onFocusVisible(event);
@@ -173,79 +234,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       onFocus(event);
     }
   });
-  const isNonNativeButton = () => {
-    const button = buttonRef.current;
-    if (!button) {
-      return component && component !== 'button';
-    }
-    if (button.tagName === 'BUTTON') {
-      return false;
-    }
-    return !(button.tagName === 'A' && button.href);
-  };
-  const handleKeyDown = useEventCallback(event => {
-    if (disabled) {
-      return;
-    }
-
-    // Check if key is already down to avoid repeats being counted as multiple activations
-    if (focusRipple && !event.repeat && focusVisible && event.key === ' ') {
-      ripple.stop(event, () => {
-        ripple.start(event);
-      });
-    }
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
-      event.preventDefault();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
-      event.preventDefault();
-      event.currentTarget.click();
-    }
-  });
-  const handleKeyUp = useEventCallback(event => {
+  const linkProps = {};
+  if (isLink) {
+    linkProps.tabIndex = disabled ? -1 : tabIndex;
     if (disabled) {
-      return;
-    }
-
-    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-    // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (focusRipple && event.key === ' ' && focusVisible && !event.defaultPrevented) {
-      ripple.stop(event, () => {
-        ripple.pulsate(event);
-      });
-    }
-    if (onKeyUp) {
-      onKeyUp(event);
-    }
-
-    // Keyboard accessibility for non interactive elements
-    if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented && !disabled) {
-      event.currentTarget.click();
-    }
-  });
-  let ComponentProp = component;
-  if (ComponentProp === 'button' && (other.href || other.to)) {
-    ComponentProp = LinkComponent;
-  }
-  const buttonProps = {};
-  if (ComponentProp === 'button') {
-    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) {
-      buttonProps.role = 'button';
-    }
-    if (disabled) {
-      buttonProps['aria-disabled'] = disabled;
+      linkProps['aria-disabled'] = disabled;
     }
+    linkProps.type = type;
   }
   const handleRef = useForkRef(ref, buttonRef);
   const ownerState = {
@@ -256,6 +251,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     disableRipple,
     disableTouchRipple,
     focusRipple,
+    suppressFocusVisible,
     tabIndex,
     focusVisible
   };
@@ -268,8 +264,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onClick: onClick,
     onContextMenu: handleContextMenu,
     onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
     onMouseDown: handleMouseDown,
     onMouseLeave: handleMouseLeave,
     onMouseUp: handleMouseUp,
@@ -278,9 +274,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchMove: handleTouchMove,
     onTouchStart: handleTouchStart,
     ref: handleRef,
-    tabIndex: disabled ? -1 : tabIndex,
-    type: type,
-    ...buttonProps,
+    ...(isLink ? linkProps : buttonProps),
     ...other,
     children: [children, enableTouchRipple ? /*#__PURE__*/_jsx(TouchRipple, {
       ref: handleRippleRef,
@@ -378,6 +372,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
    * @default 'a'
    */
   LinkComponent: PropTypes.elementType,
+  /**
+   * Whether the custom component is expected to render a native `<button>` element
+   * when passing a React component to the `component` or `slots` prop.
+   */
+  nativeButton: PropTypes.bool,
   /**
    * @ignore
    */