@mui/material 5.0.0-rc.1 → 5.0.0

package/Accordion/Accordion.d.ts

@@ -55,7 +55,7 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   >;
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
    */
   TransitionProps?: TransitionProps;
 }
@@ -64,11 +64,11 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
  *
  * Demos:
  *
- * - [Accordion](https://material-ui.com/components/accordion/)
+ * - [Accordion](https://mui.com/components/accordion/)
  *
  * API:
  *
- * - [Accordion API](https://material-ui.com/api/accordion/)
- * - inherits [Paper API](https://material-ui.com/api/paper/)
+ * - [Accordion API](https://mui.com/api/accordion/)
+ * - inherits [Paper API](https://mui.com/api/paper/)
  */
 export default function Accordion(props: AccordionProps): JSX.Element;

package/Accordion/Accordion.js

@@ -200,11 +200,11 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
     const summary = React.Children.toArray(props.children)[0];
 
     if (isFragment(summary)) {
-      return new Error("Material-UI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
+      return new Error("MUI: The Accordion doesn't accept a Fragment as a child. " + 'Consider providing an array instead.');
     }
 
     if (! /*#__PURE__*/React.isValidElement(summary)) {
-      return new Error('Material-UI: Expected the first child of Accordion to be a valid element.');
+      return new Error('MUI: Expected the first child of Accordion to be a valid element.');
     }
 
     return null;
@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
 
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/Accordion/AccordionContext.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 /**
  * @ignore - internal component.
- * @type {React.Context<{} | {expanded: boolean, disabled: boolean, disableGutters: boolean, toggle: () => void}>}
+ * @type {React.Context<{} | {expanded: boolean, disabled: boolean, toggle: () => void}>}
  */
 
 const AccordionContext = /*#__PURE__*/React.createContext({});

package/AccordionActions/AccordionActions.d.ts

@@ -27,10 +27,10 @@ export interface AccordionActionsProps extends StandardProps<React.HTMLAttribute
  *
  * Demos:
  *
- * - [Accordion](https://material-ui.com/components/accordion/)
+ * - [Accordion](https://mui.com/components/accordion/)
  *
  * API:
  *
- * - [AccordionActions API](https://material-ui.com/api/accordion-actions/)
+ * - [AccordionActions API](https://mui.com/api/accordion-actions/)
  */
 export default function AccordionActions(props: AccordionActionsProps): JSX.Element;

package/AccordionDetails/AccordionDetails.d.ts

@@ -22,10 +22,10 @@ export interface AccordionDetailsProps extends StandardProps<React.HTMLAttribute
  *
  * Demos:
  *
- * - [Accordion](https://material-ui.com/components/accordion/)
+ * - [Accordion](https://mui.com/components/accordion/)
  *
  * API:
  *
- * - [AccordionDetails API](https://material-ui.com/api/accordion-details/)
+ * - [AccordionDetails API](https://mui.com/api/accordion-details/)
  */
 export default function AccordionDetails(props: AccordionDetailsProps): JSX.Element;

package/AccordionSummary/AccordionSummary.d.ts

@@ -34,12 +34,12 @@ export type AccordionSummaryTypeMap<
  *
  * Demos:
  *
- * - [Accordion](https://material-ui.com/components/accordion/)
+ * - [Accordion](https://mui.com/components/accordion/)
  *
  * API:
  *
- * - [AccordionSummary API](https://material-ui.com/api/accordion-summary/)
- * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
+ * - [AccordionSummary API](https://mui.com/api/accordion-summary/)
+ * - inherits [ButtonBase API](https://mui.com/api/button-base/)
  */
 declare const AccordionSummary: ExtendButtonBase<AccordionSummaryTypeMap>;
 

package/Alert/Alert.d.ts

@@ -74,11 +74,11 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'> {
  *
  * Demos:
  *
- * - [Alert](https://material-ui.com/components/alert/)
+ * - [Alert](https://mui.com/components/alert/)
  *
  * API:
  *
- * - [Alert API](https://material-ui.com/api/alert/)
- * - inherits [Paper API](https://material-ui.com/api/paper/)
+ * - [Alert API](https://mui.com/api/alert/)
+ * - inherits [Paper API](https://mui.com/api/paper/)
  */
 export default function Alert(props: AlertProps): JSX.Element;

package/AlertTitle/AlertTitle.d.ts

@@ -22,10 +22,10 @@ export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTML
  *
  * Demos:
  *
- * - [Alert](https://material-ui.com/components/alert/)
+ * - [Alert](https://mui.com/components/alert/)
  *
  * API:
  *
- * - [AlertTitle API](https://material-ui.com/api/alert-title/)
+ * - [AlertTitle API](https://mui.com/api/alert-title/)
  */
 export default function AlertTitle(props: AlertTitleProps): JSX.Element;

package/AppBar/AppBar.d.ts

@@ -44,12 +44,12 @@ export interface AppBarTypeMap<P = {}, D extends React.ElementType = 'header'> {
  *
  * Demos:
  *
- * - [App Bar](https://material-ui.com/components/app-bar/)
+ * - [App Bar](https://mui.com/components/app-bar/)
  *
  * API:
  *
- * - [AppBar API](https://material-ui.com/api/app-bar/)
- * - inherits [Paper API](https://material-ui.com/api/paper/)
+ * - [AppBar API](https://mui.com/api/app-bar/)
+ * - inherits [Paper API](https://mui.com/api/paper/)
  */
 
 declare const AppBar: OverridableComponent<AppBarTypeMap>;

package/Autocomplete/Autocomplete.d.ts

@@ -237,11 +237,11 @@ export interface AutocompleteProps<
  *
  * Demos:
  *
- * - [Autocomplete](https://material-ui.com/components/autocomplete/)
+ * - [Autocomplete](https://mui.com/components/autocomplete/)
  *
  * API:
  *
- * - [Autocomplete API](https://material-ui.com/api/autocomplete/)
+ * - [Autocomplete API](https://mui.com/api/autocomplete/)
  */
 export default function Autocomplete<
   T,

package/Autocomplete/Autocomplete.js

@@ -706,7 +706,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   defaultValue: chainPropTypes(PropTypes.any, props => {
     if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
-      return new Error(['Material-UI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
+      return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
     }
 
     return null;
@@ -1049,7 +1049,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   value: chainPropTypes(PropTypes.any, props => {
     if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
-      return new Error(['Material-UI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
+      return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
     }
 
     return null;

package/Avatar/Avatar.d.ts

@@ -61,11 +61,11 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * Demos:
  *
- * - [Avatars](https://material-ui.com/components/avatars/)
+ * - [Avatars](https://mui.com/components/avatars/)
  *
  * API:
  *
- * - [Avatar API](https://material-ui.com/api/avatar/)
+ * - [Avatar API](https://mui.com/api/avatar/)
  */
 declare const Avatar: OverridableComponent<AvatarTypeMap>;
 

package/AvatarGroup/AvatarGroup.d.ts

@@ -43,10 +43,10 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * Demos:
  *
- * - [Avatars](https://material-ui.com/components/avatars/)
+ * - [Avatars](https://mui.com/components/avatars/)
  *
  * API:
  *
- * - [AvatarGroup API](https://material-ui.com/api/avatar-group/)
+ * - [AvatarGroup API](https://mui.com/api/avatar-group/)
  */
 export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;

package/AvatarGroup/AvatarGroup.js

@@ -89,7 +89,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const children = React.Children.toArray(childrenProp).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
       if (isFragment(child)) {
-        console.error(["Material-UI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+        console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
 
@@ -150,7 +150,7 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   max: chainPropTypes(PropTypes.number, props => {
     if (props.max < 2) {
-      return new Error(['Material-UI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
+      return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
     }
 
     return null;

package/Backdrop/Backdrop.d.ts

@@ -43,12 +43,12 @@ export type BackdropClassKey = keyof NonNullable<BackdropTypeMap['props']['class
  *
  * Demos:
  *
- * - [Backdrop](https://material-ui.com/components/backdrop/)
+ * - [Backdrop](https://mui.com/components/backdrop/)
  *
  * API:
  *
- * - [Backdrop API](https://material-ui.com/api/backdrop/)
- * - inherits [Fade API](https://material-ui.com/api/fade/)
+ * - [Backdrop API](https://mui.com/api/backdrop/)
+ * - inherits [Fade API](https://mui.com/api/fade/)
  */
 
 declare const Backdrop: OverridableComponent<BackdropTypeMap>;

package/Badge/Badge.d.ts

@@ -63,13 +63,13 @@ export type BadgeClassKey = keyof NonNullable<BadgeTypeMap['props']['classes']>;
  *
  * Demos:
  *
- * - [Avatars](https://material-ui.com/components/avatars/)
- * - [Badges](https://material-ui.com/components/badges/)
+ * - [Avatars](https://mui.com/components/avatars/)
+ * - [Badges](https://mui.com/components/badges/)
  *
  * API:
  *
- * - [Badge API](https://material-ui.com/api/badge/)
- * - inherits [BadgeUnstyled API](https://material-ui.com/api/badge-unstyled/)
+ * - [Badge API](https://mui.com/api/badge/)
+ * - inherits [BadgeUnstyled API](https://mui.com/api/badge-unstyled/)
  */
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 

package/BottomNavigation/BottomNavigation.d.ts

@@ -42,11 +42,11 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
  *
  * Demos:
  *
- * - [Bottom Navigation](https://material-ui.com/components/bottom-navigation/)
+ * - [Bottom Navigation](https://mui.com/components/bottom-navigation/)
  *
  * API:
  *
- * - [BottomNavigation API](https://material-ui.com/api/bottom-navigation/)
+ * - [BottomNavigation API](https://mui.com/api/bottom-navigation/)
  */
 declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
 

package/BottomNavigation/BottomNavigation.js

@@ -68,7 +68,7 @@ const BottomNavigation = /*#__PURE__*/React.forwardRef(function BottomNavigation
 
       if (process.env.NODE_ENV !== 'production') {
         if (isFragment(child)) {
-          console.error(["Material-UI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+          console.error(["MUI: The BottomNavigation component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
         }
       }
 

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -51,12 +51,12 @@ export type BottomNavigationActionTypeMap<
  *
  * Demos:
  *
- * - [Bottom Navigation](https://material-ui.com/components/bottom-navigation/)
+ * - [Bottom Navigation](https://mui.com/components/bottom-navigation/)
  *
  * API:
  *
- * - [BottomNavigationAction API](https://material-ui.com/api/bottom-navigation-action/)
- * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
+ * - [BottomNavigationAction API](https://mui.com/api/bottom-navigation-action/)
+ * - inherits [ButtonBase API](https://mui.com/api/button-base/)
  */
 declare const BottomNavigationAction: ExtendButtonBase<
   BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>

package/Box/Box.d.ts

@@ -16,11 +16,11 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * Demos:
  *
- * - [Box](https://material-ui.com/components/box/)
+ * - [Box](https://mui.com/components/box/)
  *
  * API:
  *
- * - [Box API](https://material-ui.com/api/box/)
+ * - [Box API](https://mui.com/api/box/)
  */
 declare const Box: OverridableComponent<BoxTypeMap>;
 
@@ -33,10 +33,10 @@ export type BoxProps<
  *
  * Demos:
  *
- * - [Box](https://material-ui.com/components/box/)
+ * - [Box](https://mui.com/components/box/)
  *
  * API:
  *
- * - [Box API](https://material-ui.com/api/box/)
+ * - [Box API](https://mui.com/api/box/)
  */
 export default Box;

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -55,11 +55,11 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
  *
  * Demos:
  *
- * - [Breadcrumbs](https://material-ui.com/components/breadcrumbs/)
+ * - [Breadcrumbs](https://mui.com/components/breadcrumbs/)
  *
  * API:
  *
- * - [Breadcrumbs API](https://material-ui.com/api/breadcrumbs/)
+ * - [Breadcrumbs API](https://mui.com/api/breadcrumbs/)
  */
 declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
 

package/Breadcrumbs/Breadcrumbs.js

@@ -127,7 +127,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
 
     if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
       if (process.env.NODE_ENV !== 'production') {
-        console.error(['Material-UI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
+        console.error(['MUI: You have provided an invalid combination of props to the Breadcrumbs.', `itemsAfterCollapse={${itemsAfterCollapse}} + itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`].join('\n'));
       }
 
       return allItems;
@@ -142,7 +142,7 @@ const Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(inProps,
   const allItems = React.Children.toArray(children).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
       if (isFragment(child)) {
-        console.error(["Material-UI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
+        console.error(["MUI: The Breadcrumbs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
 

package/Button/Button.d.ts

@@ -110,13 +110,13 @@ export type ExtendButton<M extends OverridableTypeMap> = ((
  *
  * Demos:
  *
- * - [Button Group](https://material-ui.com/components/button-group/)
- * - [Buttons](https://material-ui.com/components/buttons/)
+ * - [Button Group](https://mui.com/components/button-group/)
+ * - [Buttons](https://mui.com/components/buttons/)
  *
  * API:
  *
- * - [Button API](https://material-ui.com/api/button/)
- * - inherits [ButtonBase API](https://material-ui.com/api/button-base/)
+ * - [Button API](https://mui.com/api/button/)
+ * - inherits [ButtonBase API](https://mui.com/api/button-base/)
  */
 declare const Button: ExtendButtonBase<ButtonTypeMap>;
 

package/ButtonBase/ButtonBase.d.ts

@@ -106,11 +106,11 @@ export type ExtendButtonBase<M extends OverridableTypeMap> = ((
  *
  * Demos:
  *
- * - [Buttons](https://material-ui.com/components/buttons/)
+ * - [Buttons](https://mui.com/components/buttons/)
  *
  * API:
  *
- * - [ButtonBase API](https://material-ui.com/api/button-base/)
+ * - [ButtonBase API](https://mui.com/api/button-base/)
  */
 declare const ButtonBase: ExtendButtonBase<ButtonBaseTypeMap>;
 

package/ButtonBase/ButtonBase.js

@@ -5,14 +5,14 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { elementTypeAcceptingRef, refType } from '@mui/utils';
-import { useButton } from '@mui/core/ButtonUnstyled';
 import composeClasses from '@mui/core/composeClasses';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import useForkRef from '../utils/useForkRef';
+import useEventCallback from '../utils/useEventCallback';
+import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
-import useTouchRipple from '../useTouchRipple';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -102,51 +102,205 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     disableTouchRipple = false,
     focusRipple = false,
     LinkComponent = 'a',
+    onBlur,
+    onClick,
+    onContextMenu,
+    onDragLeave,
+    onFocus,
+    onFocusVisible,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
     tabIndex = 0,
-    TouchRippleProps
+    TouchRippleProps,
+    type
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const buttonRef = React.useRef(null);
-  const handleRef = useForkRef(buttonRef, ref);
   const rippleRef = React.useRef(null);
-  let ComponentProp = component;
-
-  if (ComponentProp === 'button' && (other.href || other.to)) {
-    ComponentProp = LinkComponent;
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = useIsFocusVisible();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+
+  if (disabled && focusVisible) {
+    setFocusVisible(false);
   }
 
-  const {
-    focusVisible,
-    setFocusVisible,
-    getRootProps
-  } = useButton(_extends({}, props, {
-    component: ComponentProp,
-    ref: handleRef
-  }));
   React.useImperativeHandle(action, () => ({
     focusVisible: () => {
       setFocusVisible(true);
       buttonRef.current.focus();
     }
-  }), [setFocusVisible]);
-  const {
-    enableTouchRipple,
-    getRippleHandlers
-  } = useTouchRipple({
-    disabled,
-    disableFocusRipple: !focusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
+  }), []);
+  React.useEffect(() => {
+    if (focusVisible && focusRipple && !disableRipple) {
+      rippleRef.current.pulsate();
+    }
+  }, [disableRipple, focusRipple, focusVisible]);
+
+  function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
+    return useEventCallback(event => {
+      if (eventCallback) {
+        eventCallback(event);
+      }
+
+      const ignore = skipRippleAction;
+
+      if (!ignore && rippleRef.current) {
+        rippleRef.current[rippleAction](event);
+      }
+
+      return true;
+    });
+  }
+
+  const handleMouseDown = useRippleHandler('start', onMouseDown);
+  const handleContextMenu = useRippleHandler('stop', onContextMenu);
+  const handleDragLeave = useRippleHandler('stop', onDragLeave);
+  const handleMouseUp = useRippleHandler('stop', onMouseUp);
+  const handleMouseLeave = useRippleHandler('stop', event => {
+    if (focusVisible) {
+      event.preventDefault();
+    }
+
+    if (onMouseLeave) {
+      onMouseLeave(event);
+    }
+  });
+  const handleTouchStart = useRippleHandler('start', onTouchStart);
+  const handleTouchEnd = useRippleHandler('stop', onTouchEnd);
+  const handleTouchMove = useRippleHandler('stop', onTouchMove);
+  const handleBlur = useRippleHandler('stop', event => {
+    handleBlurVisible(event);
+
+    if (isFocusVisibleRef.current === false) {
+      setFocusVisible(false);
+    }
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  }, false);
+  const handleFocus = useEventCallback(event => {
+    // Fix for https://github.com/facebook/react/issues/7769
+    if (!buttonRef.current) {
+      buttonRef.current = event.currentTarget;
+    }
+
+    handleFocusVisible(event);
+
+    if (isFocusVisibleRef.current === true) {
+      setFocusVisible(true);
+
+      if (onFocusVisible) {
+        onFocusVisible(event);
+      }
+    }
+
+    if (onFocus) {
+      onFocus(event);
+    }
+  });
+
+  const isNonNativeButton = () => {
+    const button = buttonRef.current;
+    return component && component !== 'button' && !(button.tagName === 'A' && button.href);
+  };
+  /**
+   * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
+   */
+
+
+  const keydownRef = React.useRef(false);
+  const handleKeyDown = useEventCallback(event => {
+    // Check if key is already down to avoid repeats being counted as multiple activations
+    if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
+      keydownRef.current = true;
+      rippleRef.current.stop(event, () => {
+        rippleRef.current.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();
+
+      if (onClick) {
+        onClick(event);
+      }
+    }
   });
+  const handleKeyUp = useEventCallback(event => {
+    // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
+    // https://codesandbox.io/s/button-keyup-preventdefault-dn7f0
+    if (focusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
+      keydownRef.current = false;
+      rippleRef.current.stop(event, () => {
+        rippleRef.current.pulsate(event);
+      });
+    }
+
+    if (onKeyUp) {
+      onKeyUp(event);
+    } // Keyboard accessibility for non interactive elements
+
+
+    if (onClick && event.target === event.currentTarget && isNonNativeButton() && event.key === ' ' && !event.defaultPrevented) {
+      onClick(event);
+    }
+  });
+  let ComponentProp = component;
+
+  if (ComponentProp === 'button' && (other.href || other.to)) {
+    ComponentProp = LinkComponent;
+  }
+
+  const buttonProps = {};
+
+  if (ComponentProp === 'button') {
+    buttonProps.type = type === undefined ? 'button' : type;
+    buttonProps.disabled = disabled;
+  } else {
+    if (!other.href && !other.to) {
+      buttonProps.role = 'button';
+    }
+
+    if (disabled) {
+      buttonProps['aria-disabled'] = disabled;
+    }
+  }
+
+  const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
+  const handleRef = useForkRef(ref, handleOwnRef);
+  const [mountedState, setMountedState] = React.useState(false);
+  React.useEffect(() => {
+    setMountedState(true);
+  }, []);
+  const enableTouchRipple = mountedState && !disableRipple && !disabled;
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
       if (enableTouchRipple && !rippleRef.current) {
-        console.error(['Material-UI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
+        console.error(['MUI: The `component` prop provided to ButtonBase is invalid.', 'Please make sure the children prop is rendered in this custom component.'].join('\n'));
       }
     }, [enableTouchRipple]);
   }
@@ -166,8 +320,24 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
     className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, getRootProps(getRippleHandlers(props)), other, {
+    ownerState: ownerState,
+    onBlur: handleBlur,
+    onClick: onClick,
+    onContextMenu: handleContextMenu,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onMouseDown: handleMouseDown,
+    onMouseLeave: handleMouseLeave,
+    onMouseUp: handleMouseUp,
+    onDragLeave: handleDragLeave,
+    onTouchEnd: handleTouchEnd,
+    onTouchMove: handleTouchMove,
+    onTouchStart: handleTouchStart,
+    ref: handleRef,
+    tabIndex: disabled ? -1 : tabIndex,
+    type: type
+  }, buttonProps, other, {
     children: [children, enableTouchRipple ?
     /*#__PURE__*/