feat(m3-react): M3Popper closer element effect

Author: cmath10

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

@@ -0,0 +1,31 @@
+import type { CloserTarget } from '@modulify/m3-foundation/types/components/popper'
+import type { ElementEffect } from '@/hooks/useElementEffect'
+
+import {
+  addCloserListeners,
+  removeCloserListeners,
+} from '@modulify/m3-foundation/lib/popper/closer'
+
+import { useCallback } from 'react'
+
+export type CloserOptions = {
+  active?: boolean;
+  all?: boolean;
+}
+
+export const createM3PopperCloserEffect = <T extends Element>({
+  active = true,
+  all = false,
+}: CloserOptions = {}): ElementEffect<T> => {
+  return useCallback((el: T) => {
+    const _el = el as CloserTarget<T>
+    _el.m3PopperCloseAll = all
+    if (active) {
+      addCloserListeners(_el)
+    } else {
+      removeCloserListeners(_el)
+    }
+
+    return () => removeCloserListeners(_el)
+  }, [active, all])
+}

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

@@ -3,4 +3,6 @@ export type {
   M3PopperProps,
 } from './types'
 
+export { createM3PopperCloserEffect } from './closer'
+
 export { default as M3Popper } from './M3Popper'

m3-react/src/index.ts

@@ -78,6 +78,11 @@ export {
   useM3NavigationAppearance,
 } from '@/components/navigation'
 
+export {
+  M3Popper,
+  createM3PopperCloserEffect,
+} from '@/components/popper'
+
 export {
   M3RichTooltip,
 } from '@/components/rich-tooltip'

m3-react/storybook/examples/rich-tooltip/DeleteTooltip.tsx

@@ -7,6 +7,8 @@ import {
   useState,
 } from 'react'
 
+import { createM3PopperCloserEffect } from '@/components/popper/closer'
+
 const DeleteTooltip: FC = () => {
   const [target, setTarget] = useState<HTMLElement | null>(null)
 
@@ -24,11 +26,17 @@ const DeleteTooltip: FC = () => {
         This action can not be undone
 
         <M3RichTooltip.Footer>
-          <M3Button appearance="text">
+          <M3Button
+            appearance="text"
+            effects={[createM3PopperCloserEffect()]}
+          >
             Proceed
           </M3Button>
 
-          <M3Button appearance="text">
+          <M3Button
+            appearance="text"
+            effects={[createM3PopperCloserEffect()]}
+          >
             Cancel
           </M3Button>
         </M3RichTooltip.Footer>