fix: M3Ripple effect logic

Author: cmath10

m3-react/src/components/button/M3Button.tsx

@@ -22,7 +22,10 @@ import {
   useRef,
 } from 'react'
 
-import { useElementEffect } from '@/hooks'
+import {
+  useElementEffect,
+  useTarget,
+} from '@/hooks'
 
 import { compose } from '@/utils/events'
 import { normalize } from '@/utils/content'
@@ -57,13 +60,16 @@ const M3Button: ForwardRefRenderFunction<
   const root = useRef<HTMLButtonElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
 
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLButtonElement>()
+
   useImperativeHandle(ref, () => ({
     click: () => root.current?.click(),
     focus: () => root.current?.focus(),
     blur: () => root.current?.blur(),
   }))
 
   useElementEffect(root, effects)
+  useElementEffect(root, setRippleTarget)
 
   const content = useMemo(() => normalize(children), [children])
 
@@ -84,12 +90,12 @@ const M3Button: ForwardRefRenderFunction<
       disabled={disabled}
       onKeyUp={compose(event => {
         if (event.code === 'Enter') {
-          ripple.current?.activate(event)
+          ripple.current?.activate(event.nativeEvent)
         }
       }, onKeyUp)}
       {...attrs}
     >
-      <M3Ripple ref={ripple} owner={root} />
+      <M3Ripple ref={ripple} owner={rippleTarget} />
       <span className="m3-button__state">
         {content.map(([child, isIcon], index) => (
           <span

m3-react/src/components/card/M3Card.tsx

@@ -1,4 +1,4 @@
-import type {
+import {
   FC,
   HTMLAttributes,
   ReactNode,
@@ -12,7 +12,11 @@ import { M3Ripple } from '@/components/ripple'
 
 import { useRef } from 'react'
 
-import makeId from '@/utils/id'
+import {
+  useElementEffect,
+  useId,
+  useTarget,
+} from '@/hooks'
 
 import { compose } from '@/utils/events'
 import {
@@ -62,7 +66,7 @@ const Subheading: FC<HTMLAttributes<HTMLElement>> = ({
 )
 
 const M3Card: FC<M3CardProps> = ({
-  id = makeId('m3-card'),
+  id,
   appearance = 'filled',
   heading = '',
   subheading = '',
@@ -74,8 +78,10 @@ const M3Card: FC<M3CardProps> = ({
   onClick = (_) => {},
   ...attrs
 }) => {
+  const _id = useId(id ,'m3-card')
   const state = useRef<HTMLDivElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLDivElement>()
 
   const [slots, content, hasSlot] = distinct(children, {
     content: Content,
@@ -84,18 +90,20 @@ const M3Card: FC<M3CardProps> = ({
     subheading: Subheading,
   })
 
+  useElementEffect(state, setRippleTarget)
+
   const hasHeading = hasSlot('heading') || heading.length > 0
   const hasSubheading = hasSlot('subheading') || subheading.length > 0
 
   const headingId = slots.heading?.props.id ?? null
   const headingEl = slots.heading
-    ? headingId ? slots.heading : augment(slots.heading, { id: id + '-heading' })
+    ? headingId ? slots.heading : augment(slots.heading, { id: _id + '-heading' })
     : heading.length
-      ? <Heading id={id + '-heading'} children={heading} />
+      ? <Heading id={_id + '-heading'} children={heading} />
       : null
 
   const aria = !('aria-label' in attrs) && !hasSlot('content') && hasHeading ? {
-    'aria-labelledby': headingId ?? id + '-heading',
+    'aria-labelledby': headingId ?? _id + '-heading',
   } : {}
 
   return (
@@ -109,18 +117,18 @@ const M3Card: FC<M3CardProps> = ({
       role={role}
       onClick={compose(event => {
         if (interactive) {
-          ripple.current?.activate(event)
+          ripple.current?.activate(event.nativeEvent)
         }
       }, onClick)}
       {...{
-        ...(interactive ? { tabindex: 0 } : {}),
+        ...(interactive ? { tabIndex: 0 } : {}),
         ...aria,
         ...attrs,
       }}
     >
       {interactive ? (
         <div ref={state} className="m3-card__state">
-          <M3Ripple ref={ripple} owner={state}/>
+          <M3Ripple ref={ripple} owner={rippleTarget} />
         </div>
       ) : null}
       {slots.content ?? (<>

m3-react/src/components/checkbox/M3Checkbox.tsx

@@ -23,7 +23,11 @@ import {
   useRef,
 } from 'react'
 
-import useId from '@/hooks/useId'
+import {
+  useElementEffect,
+  useId,
+  useTarget,
+} from '@/hooks'
 
 import { toClassName } from '@/utils/styling'
 
@@ -64,13 +68,16 @@ const M3Checkbox: ForwardRefRenderFunction<
   const root = useRef<HTMLElement | null>(null)
   const input = useRef<HTMLInputElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLElement>()
 
   useImperativeHandle(ref, () => ({
     click: () => input.current?.click(),
     focus: () => input.current?.focus(),
     blur: () => input.current?.blur(),
   }))
 
+  useElementEffect(root, setRippleTarget)
+
   const contains = useCallback((array: unknown[], value: unknown) => {
     return array.some(v => equalsFn(v, value))
   }, [equalsFn])
@@ -101,7 +108,7 @@ const M3Checkbox: ForwardRefRenderFunction<
       }])}
       {...args}
     >
-      <M3Ripple ref={ripple} owner={root} />
+      <M3Ripple ref={ripple} owner={rippleTarget} />
 
       <input
         id={useId(id, 'm3-checkbox')}

m3-react/src/components/fab-button/M3FabButton.tsx

@@ -23,6 +23,11 @@ import {
   useRef,
 } from 'react'
 
+import {
+  useElementEffect,
+  useTarget,
+} from '@/hooks'
+
 import { compose } from '@/utils/events'
 import { normalize } from '@/utils/content'
 import { toClassName } from '@/utils/styling'
@@ -55,13 +60,16 @@ const M3FabButton: ForwardRefRenderFunction<
 }, ref) => {
   const root = useRef<HTMLButtonElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLElement>()
 
   useImperativeHandle(ref, () => ({
     click: () => root.current?.click(),
     focus: () => root.current?.focus(),
     blur: () => root.current?.blur(),
   }))
 
+  useElementEffect(root, setRippleTarget)
+
   const content = normalize(children)
 
   const hasText = content.some(([, isIcon]) => !isIcon)
@@ -83,12 +91,12 @@ const M3FabButton: ForwardRefRenderFunction<
       disabled={disabled}
       onKeyUp={compose(event => {
         if (event.code === 'Enter') {
-          ripple.current?.activate(event)
+          ripple.current?.activate(event.nativeEvent)
         }
       }, onKeyUp)}
       {...attrs}
     >
-      <M3Ripple ref={ripple} owner={root} />
+      <M3Ripple ref={ripple} owner={rippleTarget} />
       <span className="m3-fab-button__state">
         {content.map(([child, isIcon], index) => (
           <span

m3-react/src/components/icon-button/M3IconButton.tsx

@@ -1,4 +1,4 @@
-import type {
+import {
   ForwardRefRenderFunction,
   HTMLAttributes,
 } from 'react'
@@ -20,6 +20,11 @@ import {
   useRef,
 } from 'react'
 
+import {
+  useElementEffect,
+  useTarget,
+} from '@/hooks'
+
 import { compose } from '@/utils/events'
 import { toClassName } from '@/utils/styling'
 
@@ -49,13 +54,16 @@ const M3IconButton: ForwardRefRenderFunction<
 }, ref) => {
   const root = useRef<HTMLButtonElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLButtonElement>()
 
   useImperativeHandle(ref, () => ({
     click: () => root.current?.click(),
     focus: () => root.current?.focus(),
     blur: () => root.current?.blur(),
   }))
 
+  useElementEffect(root, setRippleTarget)
+
   return (
     <button
       ref={root}
@@ -69,12 +77,12 @@ const M3IconButton: ForwardRefRenderFunction<
       disabled={disabled}
       onKeyUp={compose(event => {
         if (event.code === 'Enter') {
-          ripple.current?.activate(event)
+          ripple.current?.activate(event.nativeEvent)
         }
       }, onKeyUp)}
       {...attrs}
     >
-      <M3Ripple ref={ripple} owner={root}/>
+      <M3Ripple ref={ripple} owner={rippleTarget} />
       <span className="m3-icon-button__state">
         <M3IconAppearance.Provider value={toggleable && selected ? 'filled' : 'outlined'}>
           {children}

m3-react/src/components/navigation/M3NavigationTab.tsx

@@ -19,12 +19,15 @@ import { M3Ripple } from '@/components/ripple'
 import {
   forwardRef,
   useImperativeHandle,
+  useMemo,
   useRef,
 } from 'react'
 
 import {
   useBreakpoint,
+  useElementEffect,
   useId,
+  useTarget,
 } from '@/hooks'
 
 import { compose } from '@/utils/events'
@@ -74,12 +77,15 @@ const M3NavigationTab: ForwardRefRenderFunction<
 }, ref) => {
   const button = useRef<HTMLButtonElement | null>(null)
   const ripple = useRef<M3RippleMethods | null>(null)
+  const [rippleTarget, setRippleTarget] = useTarget<HTMLElement>()
 
-  const [slots, content, hasSlot] = distinct(children, {
+  useElementEffect(button, setRippleTarget)
+
+  const [slots, content, hasSlot] = useMemo(() => distinct(children, {
     icon: Icon,
     label: Label,
     badge: Badge,
-  })
+  }), [children])
 
   const appearance = useM3NavigationAppearance()
   const breakpoint = useBreakpoint()
@@ -126,11 +132,11 @@ const M3NavigationTab: ForwardRefRenderFunction<
         }}
         onKeyUp={compose(event => {
           if (event.code === 'Enter') {
-            ripple.current?.activate(event)
+            ripple.current?.activate(event.nativeEvent)
           }
         }, onKeyUp)}
       >
-        <M3Ripple ref={ripple} owner={button} />
+        <M3Ripple ref={ripple} owner={rippleTarget} />
 
         <span className="m3-navigation-tab__state">
           <M3IconAppearance.Provider value={active ? 'filled' : 'outlined'}>

m3-react/src/components/popper/index.ts

@@ -10,4 +10,3 @@ export type {
 export { default as M3Popper } from './M3Popper'
 
 export { default as useM3PopperCloserEffect } from './closer'
-export { default as useM3PopperTarget } from './target'