@mui/material 6.0.0-alpha.9 → 6.0.0-beta.0

package/styles/CssVarsProvider.js

@@ -6,21 +6,22 @@ import styleFunctionSx from '@mui/system/styleFunctionSx';
 import extendTheme from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
-  getInitColorSchemeScript
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: defaultConfig.attribute,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark'
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
   },
   resolveTheme: theme => {
     const newTheme = {
@@ -38,6 +39,7 @@ const {
 });
 let warnedOnce = false;
 
+// TODO: remove in v7
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Experimental_CssVarsProvider(props) {
   if (!warnedOnce) {
@@ -48,4 +50,14 @@ function Experimental_CssVarsProvider(props) {
     ...props
   });
 }
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript = params => {
+  if (!warnedInitScriptOnce) {
+    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/createTheme.js

@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
     const traverse = (node, component) => {
       let key;
 
-      // eslint-disable-next-line guard-for-in, no-restricted-syntax
+      // eslint-disable-next-line guard-for-in
       for (key in node) {
         const child = node[key];
         if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {

package/styles/createTransitions.js

@@ -36,8 +36,8 @@ function getAutoHeightDuration(height) {
   }
   const constant = height / 36;
 
-  // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
-  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+  // https://www.desmos.com/calculator/vbrp3ggqet
+  return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
 }
 export default function createTransitions(inputTransitions) {
   const mergedEasing = {

package/styles/extendTheme.js

@@ -8,6 +8,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
 import createThemeWithoutVars from './createTheme';
 import getOverlayAlpha from './getOverlayAlpha';
 import defaultGetSelector from './createGetSelector';
+import { stringifyTheme } from './stringifyTheme';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   if (index === 0) {
     return undefined;
@@ -351,5 +352,7 @@ export default function extendTheme(options = {}, ...args) {
       theme: this
     });
   };
+  theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return theme;
 }

package/styles/index.d.ts

@@ -100,6 +100,7 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as extendTheme } from './extendTheme';
+
 export type {
   ColorSchemeOverrides,
   SupportedColorScheme,

package/styles/index.js

@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
 export { default as createStyles } from './createStyles';
 export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
-export { duration, easing } from './createTransitions';
+export { default as createTransitions, duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
 export { default as useThemeProps } from './useThemeProps';
 export { default as styled } from './styled';

package/styles/responsiveFontSizes.d.ts

@@ -1,6 +1,5 @@
 import { Breakpoint } from '@mui/system';
 import { Typography } from './createTypography';
-import { Theme } from './createTheme';
 
 export interface ResponsiveFontSizesOptions {
   breakpoints?: Breakpoint[];
@@ -9,7 +8,7 @@ export interface ResponsiveFontSizesOptions {
   variants?: Array<keyof Typography>;
 }
 
-export default function responsiveFontSizes(
-  theme: Theme,
+export default function responsiveFontSizes<T extends { typography: Typography }>(
+  theme: T,
   options?: ResponsiveFontSizesOptions,
-): Theme;
+): T;

package/styles/stringifyTheme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export declare function stringifyTheme(baseTheme?: Record<string, any>): string;

package/styles/stringifyTheme.js

@@ -0,0 +1,55 @@
+/* eslint-disable import/prefer-default-export */
+import { isPlainObject } from '@mui/utils/deepmerge';
+function isSerializable(val) {
+  return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if (isPlainObject(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { createBreakpoints } from '@mui/system';
+import { createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/useLazyRipple/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useLazyRipple';

package/useLazyRipple/index.js

@@ -0,0 +1,3 @@
+'use client';
+
+export { default } from './useLazyRipple';

package/useLazyRipple/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/useLazyRipple/index.js",
+  "types": "./index.d.ts"
+}

package/useLazyRipple/useLazyRipple.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { TouchRippleActions } from '../ButtonBase/TouchRipple';
+type ControlledPromise<T = unknown> = Promise<T> & {
+    resolve: Function;
+    reject: Function;
+};
+/**
+ * Lazy initialization container for the Ripple instance. This improves
+ * performance by delaying mounting the ripple until it's needed.
+ */
+export declare class LazyRipple {
+    /** React ref to the ripple instance */
+    ref: React.MutableRefObject<TouchRippleActions | null>;
+    /** If the ripple component should be mounted */
+    shouldMount: boolean;
+    /** Promise that resolves when the ripple component is mounted */
+    private mounted;
+    /** If the ripple component has been mounted */
+    private didMount;
+    /** React state hook setter */
+    private setShouldMount;
+    static create(): LazyRipple;
+    static use(): LazyRipple;
+    constructor();
+    mount(): ControlledPromise<unknown>;
+    mountEffect: () => void;
+    start(...args: Parameters<TouchRippleActions['start']>): void;
+    stop(...args: Parameters<TouchRippleActions['stop']>): void;
+    pulsate(...args: Parameters<TouchRippleActions['pulsate']>): void;
+}
+export default function useLazyRipple(): LazyRipple;
+export {};

package/useLazyRipple/useLazyRipple.js

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
+/**
+ * Lazy initialization container for the Ripple instance. This improves
+ * performance by delaying mounting the ripple until it's needed.
+ */
+export class LazyRipple {
+  /** React ref to the ripple instance */
+
+  /** If the ripple component should be mounted */
+
+  /** Promise that resolves when the ripple component is mounted */
+
+  /** If the ripple component has been mounted */
+
+  /** React state hook setter */
+
+  static create() {
+    return new LazyRipple();
+  }
+  static use() {
+    /* eslint-disable */
+    const ripple = useLazyRef(LazyRipple.create).current;
+    const [shouldMount, setShouldMount] = React.useState(false);
+    ripple.shouldMount = shouldMount;
+    ripple.setShouldMount = setShouldMount;
+    React.useEffect(ripple.mountEffect, [shouldMount]);
+    /* eslint-enable */
+
+    return ripple;
+  }
+  constructor() {
+    this.ref = {
+      current: null
+    };
+    this.mounted = null;
+    this.didMount = false;
+    this.shouldMount = false;
+    this.setShouldMount = null;
+  }
+  mount() {
+    if (!this.mounted) {
+      this.mounted = createControlledPromise();
+      this.shouldMount = true;
+      this.setShouldMount(this.shouldMount);
+    }
+    return this.mounted;
+  }
+  mountEffect = () => {
+    if (this.shouldMount && !this.didMount) {
+      if (this.ref.current !== null) {
+        this.didMount = true;
+        this.mounted.resolve();
+      }
+    }
+  };
+
+  /* Ripple API */
+
+  start(...args) {
+    this.mount().then(() => this.ref.current?.start(...args));
+  }
+  stop(...args) {
+    this.mount().then(() => this.ref.current?.stop(...args));
+  }
+  pulsate(...args) {
+    this.mount().then(() => this.ref.current?.pulsate(...args));
+  }
+}
+export default function useLazyRipple() {
+  return LazyRipple.use();
+}
+function createControlledPromise() {
+  let resolve;
+  let reject;
+  const p = new Promise((resolveFn, rejectFn) => {
+    resolve = resolveFn;
+    reject = rejectFn;
+  });
+  p.resolve = resolve;
+  p.reject = reject;
+  return p;
+}

package/usePagination/usePagination.js

@@ -55,7 +55,7 @@ export default function usePagination(props = {}) {
   // Upper boundary when page is low
   boundaryCount + siblingCount * 2 + 2),
   // Less than endPages
-  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+  count - boundaryCount - 1);
 
   // Basic list of items to render
   // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']

package/utils/index.d.ts

@@ -14,5 +14,4 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible';
 export { unstable_ClassNameGenerator } from '@mui/base/ClassNameGenerator';

package/utils/index.js

@@ -17,7 +17,6 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
-export { default as useIsFocusVisible } from './useIsFocusVisible';
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_ClassNameGenerator = {

package/zero-styled/index.d.ts

@@ -1,4 +1,12 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { Interpolation } from '@mui/system';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import { Theme } from '../styles/createTheme';
+import useTheme from '../styles/useTheme';
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
-export declare function createUseThemeProps(name: string): typeof useThemeProps;
+export declare function globalCss(styles: Interpolation<{
+    theme: Theme;
+}>): (props: Record<string, any>) => React.JSX.Element;
+export declare function internal_createExtendSxProp(): typeof extendSxProp;
+export { useTheme };

package/zero-styled/index.js

@@ -1,8 +1,27 @@
-import useThemeProps from '../styles/useThemeProps';
+import * as React from 'react';
+import { extendSxProp } from '@mui/system/styleFunctionSx';
+import useTheme from '../styles/useTheme';
+import GlobalStyles from '../GlobalStyles';
+import { jsx as _jsx } from "react/jsx-runtime";
 export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
+export function globalCss(styles) {
+  return function GlobalStylesWrapper(props) {
+    return (
+      /*#__PURE__*/
+      // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
+      _jsx(GlobalStyles, {
+        styles: typeof styles === 'function' ? theme => styles({
+          theme,
+          ...props
+        }) : styles
+      })
+    );
+  };
+}
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function createUseThemeProps(name) {
-  return useThemeProps;
-}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function internal_createExtendSxProp() {
+  return extendSxProp;
+}
+export { useTheme };

package/modern/useMediaQuery/useMediaQueryTheme.js

@@ -1,8 +0,0 @@
-'use client';
-
-import useMediaQuery from '@mui/system/useMediaQuery';
-
-// TODO v5: to deprecate in v4.x and remove in v5
-export default function useMediaQueryTheme(...args) {
-  return useMediaQuery(...args);
-}

package/modern/useTouchRipple/index.js

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from './useTouchRipple';

package/modern/useTouchRipple/useTouchRipple.js

@@ -1,94 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useEventCallback } from '../utils';
-const useTouchRipple = props => {
-  const {
-    disabled,
-    disableFocusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
-  } = props;
-  React.useEffect(() => {
-    if (focusVisible && !disableFocusRipple && !disableRipple) {
-      rippleRef.current?.pulsate();
-    }
-  }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-  function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-    return useEventCallback(event => {
-      if (!skipRippleAction && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const keydownRef = React.useRef(false);
-  const handleKeyDown = useEventCallback(event => {
-    if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.start(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/p/sandbox/button-keyup-preventdefault-dn7f0
-    if (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        rippleRef?.current?.pulsate(event);
-      });
-    }
-  });
-  const handleBlur = useRippleHandler('stop', false);
-  const handleMouseDown = useRippleHandler('start');
-  const handleContextMenu = useRippleHandler('stop');
-  const handleDragLeave = useRippleHandler('stop');
-  const handleMouseUp = useRippleHandler('stop');
-  const handleMouseLeave = useRippleHandler('stop');
-  const handleTouchStart = useRippleHandler('start');
-  const handleTouchEnd = useRippleHandler('stop');
-  const handleTouchMove = useRippleHandler('stop');
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
-  const getRippleHandlers = React.useMemo(() => {
-    const rippleHandlers = {
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onContextMenu: handleContextMenu,
-      onDragLeave: handleDragLeave,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchMove: handleTouchMove
-    };
-    return (otherEvents = {}) => {
-      const eventNames = Object.keys(rippleHandlers);
-      const wrappedEvents = eventNames.map(eventName => ({
-        name: eventName,
-        handler: ev => {
-          otherEvents[eventName]?.(ev);
-          rippleHandlers[eventName](ev);
-        }
-      }));
-      return wrappedEvents.reduce((acc, current) => {
-        acc[current.name] = current.handler;
-        return acc;
-      }, {});
-    };
-  }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-  return {
-    enableTouchRipple,
-    getRippleHandlers
-  };
-};
-export default useTouchRipple;

package/modern/utils/scrollLeft.js

@@ -1 +0,0 @@
-export { unstable_detectScrollType as detectScrollType, unstable_getNormalizedScrollLeft as getNormalizedScrollLeft } from '@mui/utils';

package/modern/utils/useIsFocusVisible.js

@@ -1,4 +0,0 @@
-'use client';
-
-import useIsFocusVisible from '@mui/utils/useIsFocusVisible';
-export default useIsFocusVisible;

package/node/useMediaQuery/useMediaQueryTheme.js

@@ -1,13 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useMediaQueryTheme;
-var _useMediaQuery = _interopRequireDefault(require("@mui/system/useMediaQuery"));
-// TODO v5: to deprecate in v4.x and remove in v5
-function useMediaQueryTheme(...args) {
-  return (0, _useMediaQuery.default)(...args);
-}

package/node/useTouchRipple/useTouchRipple.js

@@ -1,105 +0,0 @@
-"use strict";
-'use client';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _utils = require("../utils");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useTouchRipple = props => {
-  const {
-    disabled,
-    disableFocusRipple,
-    disableRipple,
-    disableTouchRipple,
-    focusVisible,
-    rippleRef
-  } = props;
-  React.useEffect(() => {
-    if (focusVisible && !disableFocusRipple && !disableRipple) {
-      var _rippleRef$current;
-      (_rippleRef$current = rippleRef.current) == null || _rippleRef$current.pulsate();
-    }
-  }, [rippleRef, focusVisible, disableFocusRipple, disableRipple]);
-  function useRippleHandler(rippleAction, skipRippleAction = disableTouchRipple) {
-    return (0, _utils.useEventCallback)(event => {
-      if (!skipRippleAction && rippleRef.current) {
-        rippleRef.current[rippleAction](event);
-      }
-      return true;
-    });
-  }
-  const keydownRef = React.useRef(false);
-  const handleKeyDown = (0, _utils.useEventCallback)(event => {
-    if (!disableFocusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {
-      keydownRef.current = true;
-      rippleRef.current.stop(event, () => {
-        var _rippleRef$current2;
-        rippleRef == null || (_rippleRef$current2 = rippleRef.current) == null || _rippleRef$current2.start(event);
-      });
-    }
-  });
-  const handleKeyUp = (0, _utils.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 (!disableFocusRipple && event.key === ' ' && rippleRef.current && focusVisible && !event.defaultPrevented) {
-      keydownRef.current = false;
-      rippleRef.current.stop(event, () => {
-        var _rippleRef$current3;
-        rippleRef == null || (_rippleRef$current3 = rippleRef.current) == null || _rippleRef$current3.pulsate(event);
-      });
-    }
-  });
-  const handleBlur = useRippleHandler('stop', false);
-  const handleMouseDown = useRippleHandler('start');
-  const handleContextMenu = useRippleHandler('stop');
-  const handleDragLeave = useRippleHandler('stop');
-  const handleMouseUp = useRippleHandler('stop');
-  const handleMouseLeave = useRippleHandler('stop');
-  const handleTouchStart = useRippleHandler('start');
-  const handleTouchEnd = useRippleHandler('stop');
-  const handleTouchMove = useRippleHandler('stop');
-  const [mountedState, setMountedState] = React.useState(false);
-  React.useEffect(() => {
-    setMountedState(true);
-  }, []);
-  const enableTouchRipple = mountedState && !disableRipple && !disabled;
-  const getRippleHandlers = React.useMemo(() => {
-    const rippleHandlers = {
-      onBlur: handleBlur,
-      onKeyDown: handleKeyDown,
-      onKeyUp: handleKeyUp,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      onMouseLeave: handleMouseLeave,
-      onContextMenu: handleContextMenu,
-      onDragLeave: handleDragLeave,
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchMove: handleTouchMove
-    };
-    return (otherEvents = {}) => {
-      const eventNames = Object.keys(rippleHandlers);
-      const wrappedEvents = eventNames.map(eventName => ({
-        name: eventName,
-        handler: ev => {
-          var _otherEvents$eventNam;
-          (_otherEvents$eventNam = otherEvents[eventName]) == null || _otherEvents$eventNam.call(otherEvents, ev);
-          rippleHandlers[eventName](ev);
-        }
-      }));
-      return wrappedEvents.reduce((acc, current) => {
-        acc[current.name] = current.handler;
-        return acc;
-      }, {});
-    };
-  }, [handleBlur, handleKeyDown, handleKeyUp, handleMouseDown, handleMouseUp, handleMouseLeave, handleContextMenu, handleDragLeave, handleTouchStart, handleTouchEnd, handleTouchMove]);
-  return {
-    enableTouchRipple,
-    getRippleHandlers
-  };
-};
-var _default = exports.default = useTouchRipple;