@mui/material 5.10.12 → 5.10.14

package/esm/ButtonBase/ButtonBase.js

@@ -15,7 +15,6 @@ import TouchRipple from './TouchRipple';
 import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     disabled,
@@ -27,14 +26,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']
   };
   const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);
-
   if (focusVisible && focusVisibleClassName) {
     composedClasses.root += ` ${focusVisibleClassName}`;
   }
-
   return composedClasses;
 };
-
 export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
@@ -68,8 +64,8 @@ export const ButtonBaseRoot = styled('button', {
   color: 'inherit',
   '&::-moz-focus-inner': {
     borderStyle: 'none' // Remove Firefox dotted outline.
-
   },
+
   [`&.${buttonBaseClasses.disabled}`]: {
     pointerEvents: 'none',
     // Disable link interactions
@@ -79,50 +75,48 @@ export const ButtonBaseRoot = styled('button', {
     colorAdjust: 'exact'
   }
 });
+
 /**
  * `ButtonBase` contains as few styles as possible.
  * It aims to be a simple building block for creating a button.
  * It contains a load of style reset and some focus/ripple logic.
  */
-
 const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiButtonBase'
   });
-
   const {
-    action,
-    centerRipple = false,
-    children,
-    className,
-    component = 'button',
-    disabled = false,
-    disableRipple = false,
-    disableTouchRipple = false,
-    focusRipple = false,
-    LinkComponent = 'a',
-    onBlur,
-    onClick,
-    onContextMenu,
-    onDragLeave,
-    onFocus,
-    onFocusVisible,
-    onKeyDown,
-    onKeyUp,
-    onMouseDown,
-    onMouseLeave,
-    onMouseUp,
-    onTouchEnd,
-    onTouchMove,
-    onTouchStart,
-    tabIndex = 0,
-    TouchRippleProps,
-    touchRippleRef,
-    type
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      action,
+      centerRipple = false,
+      children,
+      className,
+      component = 'button',
+      disabled = false,
+      disableRipple = false,
+      disableTouchRipple = false,
+      focusRipple = false,
+      LinkComponent = 'a',
+      onBlur,
+      onClick,
+      onContextMenu,
+      onDragLeave,
+      onFocus,
+      onFocusVisible,
+      onKeyDown,
+      onKeyUp,
+      onMouseDown,
+      onMouseLeave,
+      onMouseUp,
+      onTouchEnd,
+      onTouchMove,
+      onTouchStart,
+      tabIndex = 0,
+      TouchRippleProps,
+      touchRippleRef,
+      type
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -133,11 +127,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     ref: focusVisibleRef
   } = useIsFocusVisible();
   const [focusVisible, setFocusVisible] = React.useState(false);
-
   if (disabled && focusVisible) {
     setFocusVisible(false);
   }
-
   React.useImperativeHandle(action, () => ({
     focusVisible: () => {
       setFocusVisible(true);
@@ -154,23 +146,18 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       rippleRef.current.pulsate();
     }
   }, [disableRipple, focusRipple, focusVisible, mountedState]);
-
   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);
@@ -179,7 +166,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     if (focusVisible) {
       event.preventDefault();
     }
-
     if (onMouseLeave) {
       onMouseLeave(event);
     }
@@ -189,11 +175,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   const handleTouchMove = useRippleHandler('stop', onTouchMove);
   const handleBlur = useRippleHandler('stop', event => {
     handleBlurVisible(event);
-
     if (isFocusVisibleRef.current === false) {
       setFocusVisible(false);
     }
-
     if (onBlur) {
       onBlur(event);
     }
@@ -203,31 +187,25 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     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
@@ -237,19 +215,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
         rippleRef.current.start(event);
       });
     }
-
     if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {
       event.preventDefault();
     }
-
     if (onKeyDown) {
       onKeyDown(event);
-    } // Keyboard accessibility for non interactive elements
-
+    }
 
+    // Keyboard accessibility for non interactive elements
     if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {
       event.preventDefault();
-
       if (onClick) {
         onClick(event);
       }
@@ -264,24 +239,20 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
         rippleRef.current.pulsate(event);
       });
     }
-
     if (onKeyUp) {
       onKeyUp(event);
-    } // Keyboard accessibility for non interactive elements
-
+    }
 
+    // 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;
@@ -289,14 +260,11 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     if (!other.href && !other.to) {
       buttonProps.role = 'button';
     }
-
     if (disabled) {
       buttonProps['aria-disabled'] = disabled;
     }
   }
-
   const handleRef = useForkRef(ref, focusVisibleRef, buttonRef);
-
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     React.useEffect(() => {
@@ -305,7 +273,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-
   const ownerState = _extends({}, props, {
     centerRipple,
     component,
@@ -316,7 +283,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     tabIndex,
     focusVisible
   });
-
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
     as: ComponentProp,
@@ -341,7 +307,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
   }, buttonProps, other, {
     children: [children, enableTouchRipple ?
     /*#__PURE__*/
-
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     _jsx(TouchRipple, _extends({
       ref: handleRippleRef,
@@ -349,54 +314,44 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     }, TouchRippleProps)) : null]
   }));
 });
-process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * A ref for imperative actions.
    * It currently only supports `focusVisible()` action.
    */
   action: refType,
-
   /**
    * If `true`, the ripples are centered.
    * They won't start at the cursor interaction position.
    * @default false
    */
   centerRipple: PropTypes.bool,
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: elementTypeAcceptingRef,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, the ripple effect is disabled.
    *
@@ -405,19 +360,16 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    * @default false
    */
   disableRipple: PropTypes.bool,
-
   /**
    * If `true`, the touch ripple effect is disabled.
    * @default false
    */
   disableTouchRipple: PropTypes.bool,
-
   /**
    * If `true`, the base button will have a keyboard focus ripple.
    * @default false
    */
   focusRipple: PropTypes.bool,
-
   /**
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
@@ -427,106 +379,84 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    * if needed.
    */
   focusVisibleClassName: PropTypes.string,
-
   /**
    * @ignore
    */
-  href: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .any,
-
+  href: PropTypes /* @typescript-to-proptypes-ignore */.any,
   /**
    * The component used to render a link when the `href` prop is provided.
    * @default 'a'
    */
   LinkComponent: PropTypes.elementType,
-
   /**
    * @ignore
    */
   onBlur: PropTypes.func,
-
   /**
    * @ignore
    */
   onClick: PropTypes.func,
-
   /**
    * @ignore
    */
   onContextMenu: PropTypes.func,
-
   /**
    * @ignore
    */
   onDragLeave: PropTypes.func,
-
   /**
    * @ignore
    */
   onFocus: PropTypes.func,
-
   /**
    * Callback fired when the component is focused with a keyboard.
    * We trigger a `onFocus` callback too.
    */
   onFocusVisible: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyDown: PropTypes.func,
-
   /**
    * @ignore
    */
   onKeyUp: PropTypes.func,
-
   /**
    * @ignore
    */
   onMouseDown: PropTypes.func,
-
   /**
    * @ignore
    */
   onMouseLeave: PropTypes.func,
-
   /**
    * @ignore
    */
   onMouseUp: PropTypes.func,
-
   /**
    * @ignore
    */
   onTouchEnd: PropTypes.func,
-
   /**
    * @ignore
    */
   onTouchMove: PropTypes.func,
-
   /**
    * @ignore
    */
   onTouchStart: PropTypes.func,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * @default 0
    */
   tabIndex: PropTypes.number,
-
   /**
    * Props applied to the `TouchRipple` element.
    */
   TouchRippleProps: PropTypes.object,
-
   /**
    * A ref that points to the `TouchRipple` element.
    */
@@ -537,7 +467,6 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
       stop: PropTypes.func.isRequired
     })
   })]),
-
   /**
    * @ignore
    */

package/esm/ButtonBase/Ripple.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+
 /**
  * @ignore - internal component.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
-
 function Ripple(props) {
   const {
     className,
@@ -28,11 +27,9 @@ function Ripple(props) {
     left: -(rippleSize / 2) + rippleX
   };
   const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);
-
   if (!inProp && !leaving) {
     setLeaving(true);
   }
-
   React.useEffect(() => {
     if (!inProp && onExited != null) {
       // react-transition-group#onExited
@@ -41,7 +38,6 @@ function Ripple(props) {
         clearTimeout(timeoutId);
       };
     }
-
     return undefined;
   }, [onExited, inProp, timeout]);
   return /*#__PURE__*/_jsx("span", {
@@ -52,7 +48,6 @@ function Ripple(props) {
     })
   });
 }
-
 process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
   /**
    * Override or extend the styles applied to the component.
@@ -60,37 +55,30 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes = {
    */
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
-
   /**
    * @ignore - injected from TransitionGroup
    */
   in: PropTypes.bool,
-
   /**
    * @ignore - injected from TransitionGroup
    */
   onExited: PropTypes.func,
-
   /**
    * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
    */
   pulsate: PropTypes.bool,
-
   /**
    * Diameter of the ripple.
    */
   rippleSize: PropTypes.number,
-
   /**
    * Horizontal position of the ripple center.
    */
   rippleX: PropTypes.number,
-
   /**
    * Vertical position of the ripple center.
    */
   rippleY: PropTypes.number,
-
   /**
    * exit delay
    */