From 94615af0a68313245a4718eb5817c2b9bc4a4c91 Mon Sep 17 00:00:00 2001
From: Suhyun Park <me@shiftpsh.com>
Date: Sun, 5 Mar 2023 22:30:57 +0900
Subject: [PATCH 1/2] fix: forwardRefWithGenerics

---
 src/components/$Item/Enumerate.tsx       | 3 ++-
 src/components/$Item/Item.tsx            | 3 ++-
 src/components/$Item/Itemize.tsx         | 3 ++-
 src/components/$List/List.tsx            | 3 ++-
 src/components/$List/ListItem.tsx        | 3 ++-
 src/components/$Tab/Tab.tsx              | 3 ++-
 src/components/$Tab/Tabs.tsx             | 3 ++-
 src/components/$Table/Cell.tsx           | 3 ++-
 src/components/$Table/Row.tsx            | 3 ++-
 src/components/$Table/Table.tsx          | 3 ++-
 src/components/$Table/TableBody.tsx      | 3 ++-
 src/components/$Table/TableContainer.tsx | 3 ++-
 src/components/$Table/TableFoot.tsx      | 3 ++-
 src/components/$Table/TableHead.tsx      | 3 ++-
 src/components/Button.tsx                | 3 ++-
 src/components/Card.tsx                  | 3 ++-
 src/components/Chip.tsx                  | 3 ++-
 src/components/Collapse.tsx              | 3 ++-
 src/components/Container.tsx             | 3 ++-
 src/components/Divider.tsx               | 3 ++-
 src/components/EmptyStatePlaceholder.tsx | 3 ++-
 src/components/Footer.tsx                | 3 ++-
 src/components/NavBar.tsx                | 3 ++-
 src/components/PaginationItem.tsx        | 3 ++-
 src/components/Paragraph.tsx             | 3 ++-
 src/components/Select.tsx                | 3 ++-
 src/components/Space.tsx                 | 3 ++-
 src/components/TextField.tsx             | 3 ++-
 src/components/Typo.tsx                  | 3 ++-
 src/types/PolymorphicElementProps.ts     | 8 ++++----
 src/types/react.d.ts                     | 7 +++++++
 src/utils/ref.ts                         | 5 +++++
 32 files changed, 74 insertions(+), 33 deletions(-)
 create mode 100644 src/types/react.d.ts
 create mode 100644 src/utils/ref.ts

diff --git a/src/components/$Item/Enumerate.tsx b/src/components/$Item/Enumerate.tsx
index 434d22c..a83e187 100644
--- a/src/components/$Item/Enumerate.tsx
+++ b/src/components/$Item/Enumerate.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
 
 const marginMap = {
@@ -31,7 +32,7 @@ export interface EnumerateProps {
   margin?: 'none' | 'normal' | 'wide'
 }
 
-export const Enumerate: PC<'ol', EnumerateProps> = React.forwardRef(
+export const Enumerate: PC<'ol', EnumerateProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, EnumerateProps>, ref?: PR<T>) => {
     const itemizeContext = useContext(ItemizeContext)
     const {
diff --git a/src/components/$Item/Item.tsx b/src/components/$Item/Item.tsx
index 20a8085..896c8f0 100644
--- a/src/components/$Item/Item.tsx
+++ b/src/components/$Item/Item.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
 
 interface ItemContainerProps {
@@ -20,7 +21,7 @@ export interface ItemProps {
   marker?: string
 }
 
-export const Item: PC<'li', ItemProps> = React.forwardRef(
+export const Item: PC<'li', ItemProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ItemProps>, ref?: PR<T>) => {
     const itemizeContext = useContext(ItemizeContext)
     const { marker = itemizeContext.marker, as = 'li', ...rest } = props
diff --git a/src/components/$Item/Itemize.tsx b/src/components/$Item/Itemize.tsx
index ad44b36..ebd53c5 100644
--- a/src/components/$Item/Itemize.tsx
+++ b/src/components/$Item/Itemize.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
 
 const marginMap = {
@@ -31,7 +32,7 @@ export interface ItemizeProps {
   margin?: 'none' | 'normal' | 'wide'
 }
 
-export const Itemize: PC<'ul', ItemizeProps> = React.forwardRef(
+export const Itemize: PC<'ul', ItemizeProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ItemizeProps>, ref?: PR<T>) => {
     const itemizeContext = useContext(ItemizeContext)
     const {
diff --git a/src/components/$List/List.tsx b/src/components/$List/List.tsx
index 92f2c3c..90e14de 100644
--- a/src/components/$List/List.tsx
+++ b/src/components/$List/List.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 
 const paddingMap = {
   none: 'padding: 0;',
@@ -21,7 +22,7 @@ export interface ListProps {
   padding?: 'none' | 'normal' | 'wide'
 }
 
-export const List: PC<'ul', ListProps> = React.forwardRef(
+export const List: PC<'ul', ListProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ListProps>, ref?: PR<T>) => {
     const { padding = 'normal', children, as = 'ul', ...rest } = props
 
diff --git a/src/components/$List/ListItem.tsx b/src/components/$List/ListItem.tsx
index c268e5c..8ae37b7 100644
--- a/src/components/$List/ListItem.tsx
+++ b/src/components/$List/ListItem.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../../utils/color'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { cssClickable, cssVariables } from '../../utils/styles'
 import { transparentHoverTemplate } from '../../utils/variables'
 
@@ -63,7 +64,7 @@ export interface ListItemProps {
   padding?: 'none' | 'normal' | 'wide'
 }
 
-export const ListItem: PC<'div', ListItemProps> = React.forwardRef(
+export const ListItem: PC<'div', ListItemProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ListItemProps>, ref?: PR<T>) => {
     const solvedTheme = useTheme()
 
diff --git a/src/components/$Tab/Tab.tsx b/src/components/$Tab/Tab.tsx
index b4e4a51..6669abd 100644
--- a/src/components/$Tab/Tab.tsx
+++ b/src/components/$Tab/Tab.tsx
@@ -4,6 +4,7 @@ import { ellipsis } from 'polished'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../../utils/color'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { cssClickable, cssVariables } from '../../utils/styles'
 import { transparentHoverTemplate } from '../../utils/variables'
 
@@ -62,7 +63,7 @@ export interface TabProps {
   accentColor?: string
 }
 
-export const Tab: PC<'a', TabProps> = React.forwardRef(
+export const Tab: PC<'a', TabProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TabProps>, ref?: PR<T>) => {
     const solvedTheme = useTheme()
 
diff --git a/src/components/$Tab/Tabs.tsx b/src/components/$Tab/Tabs.tsx
index 36c3541..e486bf6 100644
--- a/src/components/$Tab/Tabs.tsx
+++ b/src/components/$Tab/Tabs.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 
 interface TabsContainerProps {
   fullWidth: boolean
@@ -19,7 +20,7 @@ export interface TabsProps {
   multiline?: boolean
 }
 
-export const Tabs: PC<'nav', TabsProps> = React.forwardRef(
+export const Tabs: PC<'nav', TabsProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TabsProps>, ref?: PR<T>) => {
     const { fullWidth = false, multiline = false, as = 'nav', ...rest } = props
     return (
diff --git a/src/components/$Table/Cell.tsx b/src/components/$Table/Cell.tsx
index 4aa01ff..37ce03d 100644
--- a/src/components/$Table/Cell.tsx
+++ b/src/components/$Table/Cell.tsx
@@ -2,6 +2,7 @@ import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
 import { TableRowGroupContext } from './TableRowGroupContext'
 
@@ -38,7 +39,7 @@ export interface CellProps {
   numeric?: boolean
 }
 
-export const Cell: PC<'td', CellProps> = React.forwardRef(
+export const Cell: PC<'td', CellProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, CellProps>, ref?: PR<T>) => {
     const tableContext = useContext(TableContext)
     const tableRowGroupContext = useContext(TableRowGroupContext)
diff --git a/src/components/$Table/Row.tsx b/src/components/$Table/Row.tsx
index ae441a2..e198f08 100644
--- a/src/components/$Table/Row.tsx
+++ b/src/components/$Table/Row.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
 
 interface RowContainerProps {
@@ -17,7 +18,7 @@ export interface RowProps {
   padding?: 'none' | 'dense' | 'normal' | 'wide'
 }
 
-export const Row: PC<'tr', RowProps> = React.forwardRef(
+export const Row: PC<'tr', RowProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, RowProps>, ref?: PR<T>) => {
     const tableContext = useContext(TableContext)
     const {
diff --git a/src/components/$Table/Table.tsx b/src/components/$Table/Table.tsx
index bf92943..353e7e9 100644
--- a/src/components/$Table/Table.tsx
+++ b/src/components/$Table/Table.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
 import { TableRowGroupContext } from './TableRowGroupContext'
 
@@ -19,7 +20,7 @@ export interface TableProps {
   padding?: 'none' | 'dense' | 'normal' | 'wide'
 }
 
-export const Table: PC<'table', TableProps> = React.forwardRef(
+export const Table: PC<'table', TableProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TableProps>, ref?: PR<T>) => {
     const {
       fullWidth = false,
diff --git a/src/components/$Table/TableBody.tsx b/src/components/$Table/TableBody.tsx
index f86c576..e60273c 100644
--- a/src/components/$Table/TableBody.tsx
+++ b/src/components/$Table/TableBody.tsx
@@ -1,12 +1,13 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 
 const TableBodyContainer = styled.tbody`
   display: table-row-group;
 `
 
-export const TableBody: PC<'tbody'> = React.forwardRef(
+export const TableBody: PC<'tbody'> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'tbody', ...rest } = props
 
diff --git a/src/components/$Table/TableContainer.tsx b/src/components/$Table/TableContainer.tsx
index 3cd625d..516150a 100644
--- a/src/components/$Table/TableContainer.tsx
+++ b/src/components/$Table/TableContainer.tsx
@@ -1,12 +1,13 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 
 const TableContainerContainer = styled.div`
   overflow-x: auto;
 `
 
-export const TableContainer: PC<'div'> = React.forwardRef(
+export const TableContainer: PC<'div'> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'div', ...rest } = props
 
diff --git a/src/components/$Table/TableFoot.tsx b/src/components/$Table/TableFoot.tsx
index b48654f..aced93c 100644
--- a/src/components/$Table/TableFoot.tsx
+++ b/src/components/$Table/TableFoot.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 
 const TableFootContainer = styled.tfoot`
   display: table-footer-group;
@@ -8,7 +9,7 @@ const TableFootContainer = styled.tfoot`
   font-weight: 700;
 `
 
-export const TableFoot: PC<'tfoot'> = React.forwardRef(
+export const TableFoot: PC<'tfoot'> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'tfoot', ...rest } = props
 
diff --git a/src/components/$Table/TableHead.tsx b/src/components/$Table/TableHead.tsx
index ee9ce9e..9c2f332 100644
--- a/src/components/$Table/TableHead.tsx
+++ b/src/components/$Table/TableHead.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
 import { TableRowGroupContext } from './TableRowGroupContext'
 
@@ -29,7 +30,7 @@ export interface TableHeadProps {
   sticky?: boolean | number | string
 }
 
-export const TableHead: PC<'thead', TableHeadProps> = React.forwardRef(
+export const TableHead: PC<'thead', TableHeadProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TableHeadProps>, ref?: PR<T>) => {
     const tableContext = useContext(TableContext)
     const { sticky = tableContext.sticky, as = 'thead', ...rest } = props
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index a76113c..1b2e16e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,6 +4,7 @@ import { transparentize } from 'polished'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../utils/color'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { cardHoverTemplate } from '../utils/variables'
 
@@ -97,7 +98,7 @@ const useComputedHoverColor = (props: ButtonProps): string | undefined => {
   return undefined
 }
 
-export const Button: PC<'button', ButtonProps> = React.forwardRef(
+export const Button: PC<'button', ButtonProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ButtonProps>, ref?: PR<T>) => {
     const solvedTheme = useTheme()
 
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index b2f5648..dccca70 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../utils/color'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { cardHoverTemplate } from '../utils/variables'
 
@@ -52,7 +53,7 @@ export interface CardProps {
   padding?: 'none' | 'normal' | 'wide'
 }
 
-export const Card: PC<'div', CardProps> = React.forwardRef(
+export const Card: PC<'div', CardProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, CardProps>, ref?: PR<T>) => {
     const solvedTheme = useTheme()
 
diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
index 49c1265..4dd7ddf 100644
--- a/src/components/Chip.tsx
+++ b/src/components/Chip.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { readableColor } from '../utils/color'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssVariables } from '../utils/styles'
 
 const { vars, v, styles } = cssVariables(
@@ -27,7 +28,7 @@ export interface ChipProps {
   backgroundColor?: string
 }
 
-export const Chip: PC<'div', ChipProps> = React.forwardRef(
+export const Chip: PC<'div', ChipProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ChipProps>, ref?: PR<T>) => {
     const theme = useTheme()
     const { backgroundColor, style, as = 'div', ...rest } = props
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
index 2ff6cea..e1c881f 100644
--- a/src/components/Collapse.tsx
+++ b/src/components/Collapse.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType, useLayoutEffect, useRef, useState } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 
 interface CollapseContainerProps {
   renderHeight: number | 'auto'
@@ -21,7 +22,7 @@ export interface CollapseProps {
   shown: boolean
 }
 
-export const Collapse: PC<'div', CollapseProps> = React.forwardRef(
+export const Collapse: PC<'div', CollapseProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, CollapseProps>, ref?: PR<T>) => {
     const { as = 'div', shown, children } = props
 
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 1b94264..80c4a71 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssVariables } from '../utils/styles'
 
 const { vars, v, styles } = cssVariables(
@@ -35,7 +36,7 @@ export interface ContainerProps {
   topBarPadding?: boolean
 }
 
-export const Container: PC<'div', ContainerProps> = React.forwardRef(
+export const Container: PC<'div', ContainerProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ContainerProps>, ref?: PR<T>) => {
     const {
       w = '1200px',
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
index 38aa7cf..f27298e 100644
--- a/src/components/Divider.tsx
+++ b/src/components/Divider.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { Space } from './Space'
 
 const DividerItem = styled.div`
@@ -11,7 +12,7 @@ export interface DividerProps {
   margin?: 'none' | 'normal' | 'wide'
 }
 
-export const Divider: PC<'div', DividerProps> = React.forwardRef(
+export const Divider: PC<'div', DividerProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, DividerProps>, ref?: PR<T>) => {
     const { margin = 'normal', as = 'div', ...rest } = props
 
diff --git a/src/components/EmptyStatePlaceholder.tsx b/src/components/EmptyStatePlaceholder.tsx
index 6da75fb..70df7a6 100644
--- a/src/components/EmptyStatePlaceholder.tsx
+++ b/src/components/EmptyStatePlaceholder.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssCentering } from '../utils/styles'
 
 const paddingMap = {
@@ -28,7 +29,7 @@ export interface EmptyStatePlaceholderProps {
 }
 
 export const EmptyStatePlaceholder: PC<'div', EmptyStatePlaceholderProps> =
-  React.forwardRef(
+  forwardRefWithGenerics(
     <T extends ElementType>(
       props: PP<T, EmptyStatePlaceholderProps>,
       ref?: PR<T>
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index c1b6440..6d097cc 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssVariables } from '../utils/styles'
 
 const { vars, v, styles } = cssVariables(
@@ -34,7 +35,7 @@ export interface FooterProps {
   padding?: 'none' | 'normal' | 'wide'
 }
 
-export const Footer: PC<'footer', FooterProps> = React.forwardRef(
+export const Footer: PC<'footer', FooterProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, FooterProps>, ref?: PR<T>) => {
     const {
       backgroundColor,
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 2faea39..bce409d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { readableColor } from '../utils/color'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssVariables } from '../utils/styles'
 
 export const navBarVariables = cssVariables(
@@ -27,7 +28,7 @@ export interface NavBarProps {
   backgroundColor?: string
 }
 
-export const NavBar: PC<'header', NavBarProps> = React.forwardRef(
+export const NavBar: PC<'header', NavBarProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, NavBarProps>, ref?: PR<T>) => {
     const theme = useTheme()
     const { backgroundColor, style, as = 'header', ...rest } = props
diff --git a/src/components/PaginationItem.tsx b/src/components/PaginationItem.tsx
index b2491cc..80dd71a 100644
--- a/src/components/PaginationItem.tsx
+++ b/src/components/PaginationItem.tsx
@@ -4,6 +4,7 @@ import { ellipsis } from 'polished'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../utils/color'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssVariables } from '../utils/styles'
 import { transparentHoverTemplate } from '../utils/variables'
 
@@ -61,7 +62,7 @@ export interface PaginationItemProps {
   activeColor?: string
 }
 
-export const PaginationItem: PC<'a', PaginationItemProps> = React.forwardRef(
+export const PaginationItem: PC<'a', PaginationItemProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, PaginationItemProps>, ref?: PR<T>) => {
     const solvedTheme = useTheme()
 
diff --git a/src/components/Paragraph.tsx b/src/components/Paragraph.tsx
index 8a6ce86..43f5cf9 100644
--- a/src/components/Paragraph.tsx
+++ b/src/components/Paragraph.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 
 const marginMap = {
   none: '0',
@@ -23,7 +24,7 @@ export interface ParagraphProps {
   margin?: 'none' | 'normal' | 'wide'
 }
 
-export const Paragraph: PC<'p', ParagraphProps> = React.forwardRef(
+export const Paragraph: PC<'p', ParagraphProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, ParagraphProps>, ref?: PR<T>) => {
     const { margin = 'normal', as = 'p', ...rest } = props
 
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 640ad87..d3ffb06 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -30,6 +30,7 @@ import React, {
 } from 'react'
 import { IoChevronDown } from 'react-icons/io5'
 import { PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssDisablable } from '../utils/styles'
 import { ListItem, ListItemProps } from './$List'
 import { Centering } from './Centering'
@@ -94,7 +95,7 @@ export interface SelectProps<T extends SelectItemNode> {
   ListItemProps?: Partial<PP<'div', ListItemProps>>
 }
 
-export const Select = React.forwardRef(
+export const Select = forwardRefWithGenerics(
   <T extends ElementType, E extends SelectItemNode>(
     props: PP<T, SelectProps<E>>,
     ref?: PR<T>
diff --git a/src/components/Space.tsx b/src/components/Space.tsx
index b81079f..a5b7b80 100644
--- a/src/components/Space.tsx
+++ b/src/components/Space.tsx
@@ -1,12 +1,13 @@
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 
 export interface SpaceProps {
   h?: number | string
   w?: number | string
 }
 
-export const Space: PC<'div', SpaceProps> = React.forwardRef(
+export const Space: PC<'div', SpaceProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, SpaceProps>, ref?: PR<T>) => {
     const { h: height, w: width, as: RenderComponent = 'div', ...rest } = props
     if (typeof width !== 'undefined') {
diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
index 06aa0e0..98c8a5c 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled'
 import React, { ElementType } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 import { cssDisablable } from '../utils/styles'
 
 interface TextFieldContainerProps {
@@ -42,7 +43,7 @@ const getResizable = (
   return resizable
 }
 
-export const TextField: PC<'input', TextFieldProps> = React.forwardRef(
+export const TextField: PC<'input', TextFieldProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TextFieldProps>, ref?: PR<T>) => {
     const {
       fullWidth = false,
diff --git a/src/components/Typo.tsx b/src/components/Typo.tsx
index cb66e01..bb7d3aa 100644
--- a/src/components/Typo.tsx
+++ b/src/components/Typo.tsx
@@ -4,6 +4,7 @@ import { ellipsis } from 'polished'
 import React, { ElementType } from 'react'
 import { SolvedTheme, solvedThemes } from '../styles'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
+import { forwardRefWithGenerics } from '../utils/ref'
 
 const variants = (theme: SolvedTheme) =>
   ({
@@ -148,7 +149,7 @@ const firstVariant = (variant?: TypoVariant[]): TypoVariant | undefined => {
   return undefined
 }
 
-export const Typo: PC<'span', TypoProps> = React.forwardRef(
+export const Typo: PC<'span', TypoProps> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T, TypoProps>, ref?: PR<T>) => {
     const { variant = [], as, ...rest } = props
 
diff --git a/src/types/PolymorphicElementProps.ts b/src/types/PolymorphicElementProps.ts
index 92f3824..af3d858 100644
--- a/src/types/PolymorphicElementProps.ts
+++ b/src/types/PolymorphicElementProps.ts
@@ -1,8 +1,8 @@
 import React, {
-    ComponentPropsWithoutRef,
-    ComponentPropsWithRef,
-    ElementType,
-    JSXElementConstructor
+  ComponentPropsWithoutRef,
+  ComponentPropsWithRef,
+  ElementType,
+  JSXElementConstructor
 } from 'react'
 
 // from: https://codesandbox.io/s/9dxyq?file=/src/PolymorphicComponent.tsx
diff --git a/src/types/react.d.ts b/src/types/react.d.ts
new file mode 100644
index 0000000..87c4375
--- /dev/null
+++ b/src/types/react.d.ts
@@ -0,0 +1,7 @@
+import 'react';
+
+declare module 'react' {
+  function forwardRef<T, P = {}>(
+    render: (props: P, ref: ForwardedRef<T>) => ReactElement | null
+  ): (props: P & RefAttributes<T>) => ReactElement | null
+}
diff --git a/src/utils/ref.ts b/src/utils/ref.ts
new file mode 100644
index 0000000..0dca0d6
--- /dev/null
+++ b/src/utils/ref.ts
@@ -0,0 +1,5 @@
+import React, { ForwardedRef, ReactElement, RefAttributes } from 'react'
+
+export const forwardRefWithGenerics: <T, P = {}>(
+  render: (props: P, ref: ForwardedRef<T>) => ReactElement | null
+) => (props: P & RefAttributes<T>) => ReactElement | null = React.forwardRef

From 7327989fbdb52f7a983d5b684b385ed15565421d Mon Sep 17 00:00:00 2001
From: Suhyun Park <me@shiftpsh.com>
Date: Mon, 22 May 2023 16:07:19 +0900
Subject: [PATCH 2/2] fix: types

---
 src/components/Select.tsx            | 7 ++++---
 src/components/TextField.tsx         | 8 +++-----
 src/types/PolymorphicElementProps.ts | 9 +++++++--
 src/types/Timeout.ts                 | 2 ++
 src/utils/ref.ts                     | 1 +
 5 files changed, 17 insertions(+), 10 deletions(-)
 create mode 100644 src/types/Timeout.ts

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 9abe416..57736e4 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -15,7 +15,7 @@ import {
   useInteractions,
   useListNavigation,
   useRole,
-  useTypeahead
+  useTypeahead,
 } from '@floating-ui/react-dom-interactions'
 import { IconChevronDown } from '@tabler/icons-react'
 import { AnimatePresence, motion } from 'framer-motion'
@@ -27,9 +27,10 @@ import React, {
   useImperativeHandle,
   useLayoutEffect,
   useRef,
-  useState
+  useState,
 } from 'react'
 import { PP, PR } from '../types/PolymorphicElementProps'
+import { Timeout } from '../types/Timeout'
 import { forwardRefWithGenerics } from '../utils/ref'
 import { cssClickable, cssDisablable } from '../utils/styles'
 import { ListItem, ListItemProps } from './$List'
@@ -116,7 +117,7 @@ export const Select = forwardRefWithGenerics(
     const listContentRef = useRef<Array<string | null>>([])
     const allowSelectRef = useRef(false)
     const allowMouseUpRef = useRef(true)
-    const selectTimeoutRef = useRef<any>()
+    const selectTimeoutRef = useRef<Timeout>()
 
     const [open, setOpen] = useState(false)
     const [selectedIndex, setSelectedIndex] = useState(0)
diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
index 98c8a5c..caa57d5 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -50,20 +50,18 @@ export const TextField: PC<'input', TextFieldProps> = forwardRefWithGenerics(
       multiline = false,
       disabled = false,
       resizable = false,
-      as,
+      // TODO types are wrong when `as` is inferred by variant
+      as = multiline ? 'textarea' : 'input',
       ...rest
     } = props
 
-    // TODO types are wrong when `as` is inferred by variant
-    const calculatedAs = as || (multiline ? 'textarea' : 'input')
-
     return (
       <TextFieldContainer
         fullWidth={fullWidth}
         disabled={disabled}
         resizable={getResizable(resizable)}
         ref={ref}
-        as={calculatedAs}
+        as={as}
         {...rest}
       />
     )
diff --git a/src/types/PolymorphicElementProps.ts b/src/types/PolymorphicElementProps.ts
index af3d858..64b18e2 100644
--- a/src/types/PolymorphicElementProps.ts
+++ b/src/types/PolymorphicElementProps.ts
@@ -2,7 +2,7 @@ import React, {
   ComponentPropsWithoutRef,
   ComponentPropsWithRef,
   ElementType,
-  JSXElementConstructor
+  JSXElementConstructor,
 } from 'react'
 
 // from: https://codesandbox.io/s/9dxyq?file=/src/PolymorphicComponent.tsx
@@ -16,10 +16,15 @@ type PropsOf<
   C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
 > = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>
 
+// https://github.com/microsoft/TypeScript/issues/44596#issuecomment-1447648600
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type OmitFix<T> = T extends any ? T : never
+
 type ExtendableProps<
   ExtendedProps = Record<string, unknown>,
   OverrideProps = Record<string, unknown>
-> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>
+> = OverrideProps & OmitFix<Omit<ExtendedProps, keyof OverrideProps>>
 
 type InheritableElementProps<
   C extends ElementType,
diff --git a/src/types/Timeout.ts b/src/types/Timeout.ts
new file mode 100644
index 0000000..64ac1c6
--- /dev/null
+++ b/src/types/Timeout.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Timeout = any // null | ReturnType<typeof setTimeout>
diff --git a/src/utils/ref.ts b/src/utils/ref.ts
index 0dca0d6..0e1dbae 100644
--- a/src/utils/ref.ts
+++ b/src/utils/ref.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import React, { ForwardedRef, ReactElement, RefAttributes } from 'react'
 
 export const forwardRefWithGenerics: <T, P = {}>(