'use client'; 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, classes, pulsate = false, rippleX, rippleY, rippleSize, in: inProp, onExited, timeout } = props; const [leaving, setLeaving] = React.useState(false); const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate); const rippleStyles = { width: rippleSize, height: rippleSize, top: -(rippleSize / 2) + rippleY, 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 const timeoutId = setTimeout(onExited, timeout); return () => { clearTimeout(timeoutId); }; } return undefined; }, [onExited, inProp, timeout]); return /*#__PURE__*/_jsx("span", { className: rippleClassName, style: rippleStyles, children: /*#__PURE__*/_jsx("span", { className: childClassName }) }); } process.env.NODE_ENV !== "production" ? Ripple.propTypes = { /** * Override or extend the styles applied to the component. */ 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 */ timeout: PropTypes.number.isRequired } : void 0; export default Ripple;