{"version":3,"file":"ripple.mjs","names":[],"sources":["../../../../package/common/ripple/ripple.tsx"],"sourcesContent":["import React, { useRef, useEffect, useImperativeHandle } from 'react';\n\nimport styles from './ripple.module.pcss';\nimport { isInteractiveTarget } from '../utils/interactiveTarget';\nimport type { RippleProps, RippleHandle } from './ripple.types';\n\nexport type { RippleProps, RippleHandle };\n\nfunction Ripple({\n  disabled = false,\n  children,\n  className,\n  style,\n  overflowHidden = true,\n  rippleAnimationLength = 0.6,\n  rippleBackground = 'rgba(255, 255, 255, 0.2)',\n  manualOnly = false,\n  ref,\n  ...rest\n}: RippleProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const addRippleRef = useRef<((event: MouseEvent) => void) | null>(null);\n\n  function spawnRipple(x: number, y: number) {\n    if (disabled) return;\n    const ripple = document.createElement('div');\n    ripple.style.left = `${x}px`;\n    ripple.style.top = `${y}px`;\n    ripple.style.background = rippleBackground;\n    ripple.classList.add(styles.ripple);\n    containerRef.current?.appendChild(ripple);\n    setTimeout(\n      () => {\n        containerRef.current?.removeChild(ripple);\n      },\n      rippleAnimationLength * 1000 + 50,\n    );\n  }\n\n  function addRipple(event: MouseEvent | React.MouseEvent) {\n    if (!containerRef.current) return;\n    const pos = containerRef.current.getBoundingClientRect();\n    spawnRipple(event.clientX - pos.x, event.clientY - pos.y);\n  }\n\n  useImperativeHandle(ref, () => ({\n    addRipple() {\n      const el = containerRef.current;\n      if (!el) return;\n      spawnRipple(el.offsetWidth / 2, el.offsetHeight / 2);\n    },\n  }));\n\n  useEffect(() => {\n    addRippleRef.current = addRipple;\n  });\n\n  useEffect(() => {\n    if (children !== undefined || manualOnly) return;\n    const parent = containerRef.current?.parentElement;\n    if (!parent) return;\n    // A click on a control inside the rippling element belongs to that control: the ripple is\n    // feedback for activating this element, and the element it landed on gives its own.\n    const handler = (e: MouseEvent) => {\n      if (isInteractiveTarget(e.target, parent)) return;\n      addRippleRef.current?.(e);\n    };\n    parent.addEventListener('click', handler);\n    return () => parent.removeEventListener('click', handler);\n  }, [children, manualOnly]);\n\n  const containerStyle: React.CSSProperties & { '--ripple-animation-length'?: string } = {\n    '--ripple-animation-length': `${rippleAnimationLength}s`,\n  };\n\n  if (children !== undefined) {\n    return (\n      <div\n        {...rest}\n        className={className}\n        onClick={\n          manualOnly\n            ? undefined\n            : (e) => {\n                if (isInteractiveTarget(e.target, e.currentTarget)) return;\n                addRipple(e);\n              }\n        }\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        {children}\n        <div\n          className={styles.rippleContainer}\n          ref={containerRef}\n          style={{\n            overflow: overflowHidden ? 'hidden' : 'visible',\n            ...containerStyle,\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={styles.rippleContainer}\n      ref={containerRef}\n      style={{\n        overflow: overflowHidden ? 'hidden' : 'visible',\n        ...containerStyle,\n      }}\n    />\n  );\n}\n\nexport default Ripple;\n"],"mappings":"8OAQA,SAAS,EAAO,CACd,WAAW,GACX,WACA,YACA,QACA,iBAAiB,GACjB,wBAAwB,GACxB,mBAAmB,2BACnB,aAAa,GACb,MACA,GAAG,GACW,CACd,IAAM,EAAe,EAAuB,IAAI,EAC1C,EAAe,EAA6C,IAAI,EAEtE,SAAS,EAAY,EAAW,EAAW,CACzC,GAAI,EAAU,OACd,IAAM,EAAS,SAAS,cAAc,KAAK,EAC3C,EAAO,MAAM,KAAO,GAAG,EAAE,IACzB,EAAO,MAAM,IAAM,GAAG,EAAE,IACxB,EAAO,MAAM,WAAa,EAC1B,EAAO,UAAU,IAAI,EAAO,MAAM,EAClC,EAAa,SAAS,YAAY,CAAM,EACxC,eACQ,CACJ,EAAa,SAAS,YAAY,CAAM,CAC1C,EACA,EAAwB,IAAO,EACjC,CACF,CAEA,SAAS,EAAU,EAAsC,CACvD,GAAI,CAAC,EAAa,QAAS,OAC3B,IAAM,EAAM,EAAa,QAAQ,sBAAsB,EACvD,EAAY,EAAM,QAAU,EAAI,EAAG,EAAM,QAAU,EAAI,CAAC,CAC1D,CAEA,EAAoB,OAAY,CAC9B,WAAY,CACV,IAAM,EAAK,EAAa,QACnB,GACL,EAAY,EAAG,YAAc,EAAG,EAAG,aAAe,CAAC,CACrD,CACF,EAAE,EAEF,MAAgB,CACd,EAAa,QAAU,CACzB,CAAC,EAED,MAAgB,CACd,GAAI,IAAa,IAAA,IAAa,EAAY,OAC1C,IAAM,EAAS,EAAa,SAAS,cACrC,GAAI,CAAC,EAAQ,OAGb,IAAM,EAAW,GAAkB,CAC7B,EAAoB,EAAE,OAAQ,CAAM,GACxC,EAAa,UAAU,CAAC,CAC1B,EAEA,OADA,EAAO,iBAAiB,QAAS,CAAO,MAC3B,EAAO,oBAAoB,QAAS,CAAO,CAC1D,EAAG,CAAC,EAAU,CAAU,CAAC,EAEzB,IAAM,EAAiF,CACrF,4BAA6B,GAAG,EAAsB,EACxD,EAiCA,OA/BI,IAAa,IAAA,GAgCf,EAAC,MAAD,CACE,UAAW,EAAO,gBAClB,IAAK,EACL,MAAO,CACL,SAAU,EAAiB,SAAW,UACtC,GAAG,CACL,CACD,CAAA,EArCC,EAAC,MAAD,CACE,GAAI,EACO,YACX,QACE,EACI,IAAA,GACC,GAAM,CACD,EAAoB,EAAE,OAAQ,EAAE,aAAa,GACjD,EAAU,CAAC,CACb,EAEN,MAAO,CACL,SAAU,WACV,GAAG,CACL,EAdF,SAAA,CAgBG,EACD,EAAC,MAAD,CACE,UAAW,EAAO,gBAClB,IAAK,EACL,MAAO,CACL,SAAU,EAAiB,SAAW,UACtC,GAAG,CACL,CACD,CAAA,CACE,GAcX"}