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が正常に動作しない書き方
1. Tooltipが正常に動作するように書き直す
1. 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](https://mui.com/material-ui/react-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](https://github.com/mui/material-ui/blob/b5062557ed729c5c6a0ef25df7b0204847a69a3e/packages/material-ui/src/Tooltip/Tooltip.d.ts)

next-versionくらいでつけるのかな？って思ったら絶賛募集中らしい。。。
[issue#20653](https://github.com/mui/material-ui/issues/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>
)
```