Skip to content

Commit 38fa8b5

Browse files
shiftpshshiftpsh
committed
feat: add PropsWithChildren
1 parent 6ea0d68 commit 38fa8b5

34 files changed

+165
-135
lines changed

‎example/.DS_Store

6 KB
Binary file not shown.

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242
"@emotion/styled": ">=11",
4343
"@floating-ui/react": "^0.24.3",
4444
"framer-motion": ">=6",
45-
"react": ">=17",
46-
"react-dom": ">=17"
45+
"react": ">=18",
46+
"react-dom": ">=18"
4747
},
4848
"devDependencies": {
4949
"@babel/plugin-proposal-decorators": "^7.17.9",
@@ -57,8 +57,8 @@
5757
"@testing-library/user-event": "^7.2.1",
5858
"@types/jest": "^25.1.4",
5959
"@types/node": "^12.12.38",
60-
"@types/react": "^18.0.9",
61-
"@types/react-dom": "^18.0.3",
60+
"@types/react": "^18.2.46",
61+
"@types/react-dom": "^18.2.18",
6262
"@typescript-eslint/eslint-plugin": "^5.22.0",
6363
"@typescript-eslint/parser": "^5.22.0",
6464
"babel-eslint": "^10.0.3",
@@ -85,9 +85,9 @@
8585
"npm-run-all": "^4.1.5",
8686
"polished": "^4.2.2",
8787
"prettier": "^2.6.2",
88-
"react": "^17.0.1",
89-
"react-dom": "^17.0.1",
88+
"react": "^18.2.0",
89+
"react-dom": "^18.2.0",
9090
"react-scripts": "^5.0.1",
91-
"typescript": "^4.6.4"
91+
"typescript": "^5.8.3"
9292
}
9393
}

‎src/components/$DateSelect/DateSelect.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useEffect, useState } from 'react'
2+
import React, {
3+
ElementType,
4+
PropsWithChildren,
5+
useEffect,
6+
useState,
7+
} from 'react'
38
import { PP, PR } from '../../types/PolymorphicElementProps'
49
import { forwardRefWithGenerics } from '../../utils/ref'
510
import { DateSelectContext } from './DateSelectContext'
@@ -33,7 +38,7 @@ export type DateSelectProps = DateSelectValues & {
3338
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
3439
locale?: string
3540
chunks?: number
36-
}
41+
} & PropsWithChildren
3742

3843
export type DateSelectMode = 'year' | 'month' | 'date'
3944
export type CursorMode = 'select' | 'selectStart' | 'selectEnd'

‎src/components/$Item/Enumerate.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useContext } from 'react'
2+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { ItemizeContext } from './ItemizeContext'
@@ -27,7 +27,7 @@ const EnumerateContainer = styled.ol<EnumerateContainerProps>`
2727
}
2828
`
2929

30-
export interface EnumerateProps {
30+
export interface EnumerateProps extends PropsWithChildren {
3131
marker?: string
3232
margin?: 'none' | 'normal' | 'wide'
3333
}

‎src/components/$Item/Item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useContext } from 'react'
2+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { ItemizeContext } from './ItemizeContext'
@@ -17,7 +17,7 @@ const ItemContainer = styled.li<ItemContainerProps>`
1717
}
1818
`
1919

20-
export interface ItemProps {
20+
export interface ItemProps extends PropsWithChildren {
2121
marker?: string
2222
}
2323

‎src/components/$Item/Itemize.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useContext } from 'react'
2+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { ItemizeContext } from './ItemizeContext'
@@ -27,7 +27,7 @@ const ItemizeContainer = styled.ul<ItemizeContainerProps>`
2727
}
2828
`
2929

30-
export interface ItemizeProps {
30+
export interface ItemizeProps extends PropsWithChildren {
3131
marker?: string
3232
margin?: 'none' | 'normal' | 'wide'
3333
}

‎src/components/$List/List.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55

@@ -18,7 +18,7 @@ const ListContainer = styled.ul<ListContainerProps>`
1818
list-style: none;
1919
`
2020

21-
export interface ListProps {
21+
export interface ListProps extends PropsWithChildren {
2222
padding?: 'none' | 'normal' | 'wide'
2323
}
2424

‎src/components/$List/ListItem.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, useTheme } from '@emotion/react'
22
import styled from '@emotion/styled'
3-
import React, { ElementType } from 'react'
3+
import React, { ElementType, PropsWithChildren } from 'react'
44
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
55
import { computeHoverColor, readableColor } from '../../utils/color'
66
import { forwardRefWithGenerics } from '../../utils/ref'
@@ -56,7 +56,7 @@ const ListItemContainer = styled.div<ListItemContainerProps>`
5656
${({ padding }) => paddingMap[padding]}
5757
`
5858

59-
export interface ListItemProps {
59+
export interface ListItemProps extends PropsWithChildren {
6060
backgroundColor?: string
6161
hoverColor?: string
6262
clickable?: boolean

‎src/components/$Tab/Tab.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css, useTheme } from '@emotion/react'
22
import styled from '@emotion/styled'
33
import { ellipsis } from 'polished'
4-
import React, { ElementType } from 'react'
4+
import React, { ElementType, PropsWithChildren } from 'react'
55
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
66
import { computeHoverColor, readableColor } from '../../utils/color'
77
import { forwardRefWithGenerics } from '../../utils/ref'
@@ -56,7 +56,7 @@ const TabContainer = styled.button<TabContainerProps>`
5656
${({ current }) => current && whenCurrent}
5757
`
5858

59-
export interface TabProps {
59+
export interface TabProps extends PropsWithChildren {
6060
current?: boolean
6161
disabled?: boolean
6262
backgroundColor?: string

‎src/components/$Tab/Tabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55

@@ -15,7 +15,7 @@ const TabsContainer = styled.nav<TabsContainerProps>`
1515
flex-wrap: ${({ multiline }) => (multiline ? 'wrap' : 'nowrap')};
1616
`
1717

18-
export interface TabsProps {
18+
export interface TabsProps extends PropsWithChildren {
1919
fullWidth?: boolean
2020
multiline?: boolean
2121
}

‎src/components/$Table/Cell.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css } from '@emotion/react'
22
import styled from '@emotion/styled'
3-
import React, { ElementType, useContext } from 'react'
3+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
44
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
55
import { forwardRefWithGenerics } from '../../utils/ref'
66
import { TableContext } from './TableContext'
@@ -35,7 +35,7 @@ const CellContainer = styled.td<CellContainerProps>`
3535
${({ header }) => header && whenHeader}
3636
`
3737

38-
export interface CellProps {
38+
export interface CellProps extends PropsWithChildren {
3939
padding?: 'none' | 'dense' | 'normal' | 'wide'
4040
verticalAlign?: 'top' | 'middle' | 'bottom'
4141
header?: boolean

‎src/components/$Table/Row.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useContext } from 'react'
2+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { TableContext } from './TableContext'
@@ -13,7 +13,7 @@ const RowContainer = styled.tr<RowContainerProps>`
1313
${({ header }) => header && 'text-align: center; font-weight: 700;'}
1414
`
1515

16-
export interface RowProps {
16+
export interface RowProps extends PropsWithChildren {
1717
header?: boolean
1818
padding?: 'none' | 'dense' | 'normal' | 'wide'
1919
verticalAlign?: 'top' | 'middle' | 'bottom'

‎src/components/$Table/Table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { TableContext } from './TableContext'
@@ -14,7 +14,7 @@ const TableContainer = styled.table<TableContainerProps>`
1414
${({ fullWidth }) => fullWidth && 'width: 100%;'}
1515
`
1616

17-
export interface TableProps {
17+
export interface TableProps extends PropsWithChildren {
1818
fullWidth?: boolean
1919
sticky?: boolean | number | string
2020
padding?: 'none' | 'dense' | 'normal' | 'wide'

‎src/components/$Table/TableBody.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55

66
const TableBodyContainer = styled.tbody`
77
display: table-row-group;
88
`
99

10-
export const TableBody: PC<'tbody'> = forwardRefWithGenerics(
10+
export const TableBody: PC<'tbody', PropsWithChildren> = forwardRefWithGenerics(
1111
<T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
1212
const { as = 'tbody', ...rest } = props
1313

‎src/components/$Table/TableContainer.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55

66
const TableContainerContainer = styled.div`
77
overflow-x: auto;
88
`
99

10-
export const TableContainer: PC<'div'> = forwardRefWithGenerics(
11-
<T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
10+
export const TableContainer: PC<'div', PropsWithChildren> =
11+
forwardRefWithGenerics(<T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
1212
const { as = 'div', ...rest } = props
1313

1414
return <TableContainerContainer ref={ref} as={as} {...rest} />
15-
}
16-
)
15+
})

‎src/components/$Table/TableFoot.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55

@@ -9,7 +9,7 @@ const TableFootContainer = styled.tfoot`
99
font-weight: 700;
1010
`
1111

12-
export const TableFoot: PC<'tfoot'> = forwardRefWithGenerics(
12+
export const TableFoot: PC<'tfoot', PropsWithChildren> = forwardRefWithGenerics(
1313
<T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
1414
const { as = 'tfoot', ...rest } = props
1515

‎src/components/$Table/TableHead.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useContext } from 'react'
2+
import React, { ElementType, PropsWithChildren, useContext } from 'react'
33
import { PC, PP, PR } from '../../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../../utils/ref'
55
import { TableContext } from './TableContext'
@@ -26,7 +26,7 @@ const TableHeadContainer = styled.thead<TableHeadContainerProps>`
2626
`position: sticky; top: ${getStickyValue(sticky)};`}
2727
`
2828

29-
export interface TableHeadProps {
29+
export interface TableHeadProps extends PropsWithChildren {
3030
sticky?: boolean | number | string
3131
verticalAlign?: 'top' | 'middle' | 'bottom'
3232
}

‎src/components/Button.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useTheme } from '@emotion/react'
22
import styled from '@emotion/styled'
33
import { transparentize } from 'polished'
4-
import React, { ElementType } from 'react'
4+
import React, { ElementType, PropsWithChildren } from 'react'
55
import { PC, PP, PR } from '../types/PolymorphicElementProps'
66
import { computeHoverColor, readableColor } from '../utils/color'
77
import { forwardRefWithGenerics } from '../utils/ref'
@@ -64,7 +64,7 @@ const ButtonContainer = styled.button<ButtonContainerProps>`
6464
}
6565
`
6666

67-
export interface ButtonProps {
67+
export interface ButtonProps extends PropsWithChildren {
6868
backgroundColor?: string
6969
hoverColor?: string
7070
primary?: boolean

‎src/components/Card.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css, useTheme } from '@emotion/react'
22
import styled from '@emotion/styled'
3-
import React, { ElementType } from 'react'
3+
import React, { ElementType, PropsWithChildren } from 'react'
44
import { PC, PP, PR } from '../types/PolymorphicElementProps'
55
import { computeHoverColor, readableColor } from '../utils/color'
66
import { forwardRefWithGenerics } from '../utils/ref'
@@ -45,7 +45,7 @@ const CardContainer = styled.div<CardContainerProps>`
4545
${({ padding }) => paddingMap[padding]}
4646
`
4747

48-
export interface CardProps {
48+
export interface CardProps extends PropsWithChildren {
4949
backgroundColor?: string
5050
hoverColor?: string
5151
clickable?: boolean

‎src/components/Chip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTheme } from '@emotion/react'
22
import styled from '@emotion/styled'
3-
import React, { ElementType } from 'react'
3+
import React, { ElementType, PropsWithChildren } from 'react'
44
import { PC, PP, PR } from '../types/PolymorphicElementProps'
55
import { readableColor } from '../utils/color'
66
import { forwardRefWithGenerics } from '../utils/ref'
@@ -24,7 +24,7 @@ const ChipContainer = styled.div`
2424
line-height: 1.2;
2525
`
2626

27-
export interface ChipProps {
27+
export interface ChipProps extends PropsWithChildren {
2828
backgroundColor?: string
2929
}
3030

‎src/components/Collapse.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType, useLayoutEffect, useRef, useState } from 'react'
2+
import React, {
3+
ElementType,
4+
PropsWithChildren,
5+
useLayoutEffect,
6+
useRef,
7+
useState,
8+
} from 'react'
39
import { PC, PP, PR } from '../types/PolymorphicElementProps'
410
import { forwardRefWithGenerics } from '../utils/ref'
511

@@ -18,7 +24,7 @@ const CollapseContainer = styled.div<CollapseContainerProps>`
1824
overflow: 'hidden';
1925
`
2026

21-
export interface CollapseProps {
27+
export interface CollapseProps extends PropsWithChildren {
2228
shown: boolean
2329
}
2430

‎src/components/Container.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from '@emotion/styled'
2-
import React, { ElementType } from 'react'
2+
import React, { ElementType, PropsWithChildren } from 'react'
33
import { PC, PP, PR } from '../types/PolymorphicElementProps'
44
import { forwardRefWithGenerics } from '../utils/ref'
55
import { cssVariables } from '../utils/styles'
@@ -30,7 +30,7 @@ const ContainerContainer = styled.nav<ContainerContainerProps>`
3030
margin: 0 auto;
3131
`
3232

33-
export interface ContainerProps {
33+
export interface ContainerProps extends PropsWithChildren {
3434
w?: string | number
3535
padding?: 'none' | 'normal' | 'wide'
3636
topBarPadding?: boolean

‎src/components/Dropdown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react'
1+
import React, { PropsWithChildren } from 'react'
22
import { Tooltip, TooltipProps } from './Tooltip'
33

4-
export type DropdownProps = TooltipProps
4+
export type DropdownProps = TooltipProps & PropsWithChildren
55

66
export const Dropdown: React.FC<TooltipProps> = (props) => {
77
const {

0 commit comments

Comments
 (0)