feat(m3-react): M3Popper target hook, createM3PopperCloserEffect renamed into useM3PopperCloserEffect

Author: cmath10

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

@@ -8,15 +8,15 @@ import {
 
 import { useCallback } from 'react'
 
-export type CloserOptions = {
+export type M3PopperCloserOptions = {
   active?: boolean;
   all?: boolean;
 }
 
-export const createM3PopperCloserEffect = <T extends Element>({
+export default <T extends Element>({
   active = true,
   all = false,
-}: CloserOptions = {}): ElementEffect<T> => {
+}: M3PopperCloserOptions = {}): ElementEffect<T> => {
   return useCallback((el: T) => {
     const _el = el as CloserTarget<T>
     _el.m3PopperCloseAll = all

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

@@ -3,6 +3,11 @@ export type {
   M3PopperProps,
 } from './types'
 
-export { createM3PopperCloserEffect } from './closer'
+export type {
+  M3PopperCloserOptions,
+} from './closer'
 
 export { default as M3Popper } from './M3Popper'
+
+export { default as useM3PopperCloserEffect } from './closer'
+export { default as useM3PopperTarget } from './target'

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

@@ -0,0 +1,15 @@
+import type { ElementEffect } from '@/hooks/useElementEffect'
+
+import {
+  useCallback,
+  useState,
+} from 'react'
+
+export default <T extends Element>(): [T | null, ElementEffect<T>] => {
+  const [target, setTarget] = useState<T | null>(null)
+
+  return [target, useCallback((el: T) => {
+    setTarget(el)
+    return () => {}
+  }, [setTarget])]
+}

m3-react/src/index.ts

@@ -30,6 +30,12 @@ export type {
   M3NavigationTabProps,
 } from '@/components/navigation'
 
+export type {
+  M3PopperMethods,
+  M3PopperProps,
+  M3PopperCloserOptions,
+} from '@/components/popper'
+
 export type {
   M3RichTooltipMethods,
   M3RichTooltipProps,
@@ -80,7 +86,8 @@ export {
 
 export {
   M3Popper,
-  createM3PopperCloserEffect,
+  useM3PopperCloserEffect,
+  useM3PopperTarget,
 } from '@/components/popper'
 
 export {

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

@@ -4,17 +4,16 @@ import { M3Button } from '@/components/button'
 import { M3RichTooltip } from '@/components/rich-tooltip'
 
 import {
-  useState,
-} from 'react'
-
-import { createM3PopperCloserEffect } from '@/components/popper/closer'
+  useM3PopperCloserEffect,
+  useM3PopperTarget,
+} from '@/components/popper'
 
 const DeleteTooltip: FC = () => {
-  const [target, setTarget] = useState<HTMLElement | null>(null)
+  const [target, setTarget] = useM3PopperTarget()
 
   return (
-    <span ref={setTarget} style={{ display: 'inline-block' }}>
-      <M3Button>
+    <>
+      <M3Button effects={[setTarget]}>
         Delete
       </M3Button>
 
@@ -26,22 +25,16 @@ const DeleteTooltip: FC = () => {
         This action can not be undone
 
         <M3RichTooltip.Footer>
-          <M3Button
-            appearance="text"
-            effects={[createM3PopperCloserEffect()]}
-          >
+          <M3Button appearance="text" effects={[useM3PopperCloserEffect()]}>
             Proceed
           </M3Button>
 
-          <M3Button
-            appearance="text"
-            effects={[createM3PopperCloserEffect()]}
-          >
+          <M3Button appearance="text" effects={[useM3PopperCloserEffect()]}>
             Cancel
           </M3Button>
         </M3RichTooltip.Footer>
       </M3RichTooltip>
-    </span>
+    </>
   )
 }