mui/material-ui@v5とreact@18で<Tooltip />のCustomElementを利用する

mui/material-ui@v5にmigrationしたらTooltipを動くように実施する方法

TL;DR

forwardRef以外にprops経由で渡されるtooltipに関連したデータがあるので、ref(ForwardedRef)とpropsをどちらも渡してあげる。

Table of Contents

1. Tooltipが正常に動作しない書き方
2. Tooltipが正常に動作するように書き直す
3. propに含まれるデータ型について

1. Tooltipが正常に動作しない書き方

過去versionでも動いていたが、mui/material-ui@v5に変更したら、動かなくなった書き方。

my-tooltip.tsx

import type { FC, ReactNode } from "react"
import Tooltip from "@mui/material/Tooltip"

const Foo:FC<{ children: ReactNode }> = () => (
   <p>{ children }</p>
)

export const MyTooltip: FC<{ label: string }> = ({ label }) => (
    <Tooltip title={label}>
        <Foo>{ label }</Foo>
    </Tooltip>
)

びくともしないwww
mui tooltip#custom-child-elementに記載がある通りに、forwardを使えばいけそうだな。。。
と思って記載してみる。

my-tooltip.tsx

import { forwardRef } from "react"
import type { FC, ReactNode } from "react"
import Tooltip from "@mui/material/Tooltip"

type MyTooltipProps {
    label: string
}

const Foo = forwardRef<HTMLParagraphElement, MyTooltipProps> = ({ children }, ref) => (
    <p ref={ref}>{ children }</p>
)

export const MyTooltip: FC<MyTooltipProps> = ({ label }) => (
    <Tooltip title={label}>
        <Foo>{ label }</Foo>
    </Tooltip>
)

びくともしないwww
consoleをちゃんと読めば答えがあった。

'Material-UI: The `children` component of the Tooltip do not forward its props correctly.',
'Please make sure the props are spread on the same element the ref is applied to.',

なので、とりあえず動くように記載してみる。

2. Tooltipが正常に動作するように書き直す

とりあえず動くように実装を実施してみる。
<Foo />に渡されるMyTooltipPropsの他に<Tooltip />から渡される、
propsをスプレッドして渡せば、Tooltipは動くようになる。

とりあえず型情報がない状態でも動いたが、気持ち悪いことこの上ない。。。

my-tooltip.tsx

import { forwardRef } from "react"
import type { FC, ReactNode } from "react"
import Tooltip from "@mui/material/Tooltip"

type MyTooltipProps {
    label: string
}

const Foo = forwardRef<HTMLParagraphElement, MyTooltipProps> = ({
　　　　children,
  ...tooltipProps // MyTooltipProps以外のデータをまとめる
}, ref) => (
    <p ref={ref} {...toolTipProps}>{ children }</p>
)

export const MyTooltip: FC<MyTooltipProps> = ({ label }) => (
    <Tooltip title={label}>
        <Foo>{ label }</Foo>
    </Tooltip>
)

tooltipPropsには、何が入っているのか？？

3. propに含まれるデータ型について

とりあえず、consoleで流すとこんな感じの型らしい。

tooltip-child-props.ts

type TooltipChildProps<P = {}> = P & {
      aria-describedby: string
      title: string
      className: string
      onTouchStart: HandleTouchStart
      onTouchEnd: HandleTouchEnd
      onMouseOver: MounseOver
      onMouseLeave: MouseLeave
      onFocus: Focust
      onBlur: Blur
    }

muiから提供されている型があるやろ！！！って思ったが、提供がない。。。
@mui/material#Tooltip/Tooltip.d.ts

next-versionくらいでつけるのかな？って思ったら絶賛募集中らしい。。。
issue#20653
のでとりあえず雑に記載して逃げた。。。(時間ができたら、PR作ろう。。。)
そして、titleがProps経由でわたされるので、MuiTooltipChildrenPropsだけで完結する。。。

my-tooltip.tsx

import { forwardRef } from "react"
import type { FC, ReactNode } from "react"
import Tooltip from "@mui/material/Tooltip"

type MyTooltipProps {
    label: string
}

type MuiTooltipChildrenProps<P = {}> = P & {
      aria-describedby: string
      title: string
      className: string
      onTouchStart: HandleTouchStart
      onTouchEnd: HandleTouchEnd
      onMouseOver: () =>
      onMouseLeave: MouseLeave
      onFocus: Focust
      onBlur: Blur
}

const Foo = forwardRef<
   HTMLParagraphElement,
   MuiTooltipChildrenProps<MyTooltipProps>
> = ({ children, ...tooltipProps }, ref) => (
    <p ref={ref} {...toolTipProps}>{ children }</p>
)

export const MyTooltip: FC<MyTooltipProps> = ({ label }) => (
    <Tooltip title={label}>
        <Foo>{ label }</Foo>
    </Tooltip>
)