Fixed polymorphism

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 {

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

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 {

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
 

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()
 

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()
 

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 (

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)

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 {

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,

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
 

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
 

src/components/$Table/TableFoot.tsx

@@ -1,14 +1,15 @@
 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;
   text-align: center;
   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
 

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

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()
 

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()
 

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

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
 

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',

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
 

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>

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,

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