Release/v0.8.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solved-ac/ui-react",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React component library used by solved.ac",
   "author": "shiftpsh",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "@emotion/styled": ">=11",
     "@floating-ui/react": "^0.24.3",
     "framer-motion": ">=6",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.17.9",
@@ -57,8 +57,8 @@
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^12.12.38",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "babel-eslint": "^10.0.3",
@@ -85,9 +85,9 @@
     "npm-run-all": "^4.1.5",
     "polished": "^4.2.2",
     "prettier": "^2.6.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
-    "typescript": "^4.6.4"
+    "typescript": "^5.8.3"
   }
 }

src/components/$DateSelect/DateSelect.tsx

@@ -1,5 +1,10 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useEffect, useState } from 'react'
+import React, {
+  ElementType,
+  PropsWithChildren,
+  useEffect,
+  useState,
+} from 'react'
 import { PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { DateSelectContext } from './DateSelectContext'
@@ -33,7 +38,7 @@ export type DateSelectProps = DateSelectValues & {
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
   locale?: string
   chunks?: number
-}
+} & PropsWithChildren
 
 export type DateSelectMode = 'year' | 'month' | 'date'
 export type CursorMode = 'select' | 'selectStart' | 'selectEnd'

src/components/$Item/Enumerate.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
@@ -27,7 +27,7 @@ const EnumerateContainer = styled.ol<EnumerateContainerProps>`
   }
 `
 
-export interface EnumerateProps {
+export interface EnumerateProps extends PropsWithChildren {
   marker?: string
   margin?: 'none' | 'normal' | 'wide'
 }

src/components/$Item/Item.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
@@ -17,7 +17,7 @@ const ItemContainer = styled.li<ItemContainerProps>`
   }
 `
 
-export interface ItemProps {
+export interface ItemProps extends PropsWithChildren {
   marker?: string
 }
 

src/components/$Item/Itemize.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { ItemizeContext } from './ItemizeContext'
@@ -27,7 +27,7 @@ const ItemizeContainer = styled.ul<ItemizeContainerProps>`
   }
 `
 
-export interface ItemizeProps {
+export interface ItemizeProps extends PropsWithChildren {
   marker?: string
   margin?: 'none' | 'normal' | 'wide'
 }

src/components/$List/List.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 
@@ -18,7 +18,7 @@ const ListContainer = styled.ul<ListContainerProps>`
   list-style: none;
 `
 
-export interface ListProps {
+export interface ListProps extends PropsWithChildren {
   padding?: 'none' | 'normal' | 'wide'
 }
 

src/components/$List/ListItem.tsx

@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../../utils/color'
 import { forwardRefWithGenerics } from '../../utils/ref'
@@ -56,7 +56,7 @@ const ListItemContainer = styled.div<ListItemContainerProps>`
   ${({ padding }) => paddingMap[padding]}
 `
 
-export interface ListItemProps {
+export interface ListItemProps extends PropsWithChildren {
   backgroundColor?: string
   hoverColor?: string
   clickable?: boolean

src/components/$Tab/Tab.tsx

@@ -1,7 +1,7 @@
 import { css, useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import { ellipsis } from 'polished'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../../utils/color'
 import { forwardRefWithGenerics } from '../../utils/ref'
@@ -56,7 +56,7 @@ const TabContainer = styled.button<TabContainerProps>`
   ${({ current }) => current && whenCurrent}
 `
 
-export interface TabProps {
+export interface TabProps extends PropsWithChildren {
   current?: boolean
   disabled?: boolean
   backgroundColor?: string

src/components/$Tab/Tabs.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 
@@ -15,7 +15,7 @@ const TabsContainer = styled.nav<TabsContainerProps>`
   flex-wrap: ${({ multiline }) => (multiline ? 'wrap' : 'nowrap')};
 `
 
-export interface TabsProps {
+export interface TabsProps extends PropsWithChildren {
   fullWidth?: boolean
   multiline?: boolean
 }

src/components/$Table/Cell.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
@@ -35,7 +35,7 @@ const CellContainer = styled.td<CellContainerProps>`
   ${({ header }) => header && whenHeader}
 `
 
-export interface CellProps {
+export interface CellProps extends PropsWithChildren {
   padding?: 'none' | 'dense' | 'normal' | 'wide'
   verticalAlign?: 'top' | 'middle' | 'bottom'
   header?: boolean

src/components/$Table/Row.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
@@ -13,7 +13,7 @@ const RowContainer = styled.tr<RowContainerProps>`
   ${({ header }) => header && 'text-align: center; font-weight: 700;'}
 `
 
-export interface RowProps {
+export interface RowProps extends PropsWithChildren {
   header?: boolean
   padding?: 'none' | 'dense' | 'normal' | 'wide'
   verticalAlign?: 'top' | 'middle' | 'bottom'

src/components/$Table/Table.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
@@ -14,7 +14,7 @@ const TableContainer = styled.table<TableContainerProps>`
   ${({ fullWidth }) => fullWidth && 'width: 100%;'}
 `
 
-export interface TableProps {
+export interface TableProps extends PropsWithChildren {
   fullWidth?: boolean
   sticky?: boolean | number | string
   padding?: 'none' | 'dense' | 'normal' | 'wide'

src/components/$Table/TableBody.tsx

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } 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'> = forwardRefWithGenerics(
+export const TableBody: PC<'tbody', PropsWithChildren> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'tbody', ...rest } = props
 

src/components/$Table/TableContainer.tsx

@@ -1,16 +1,15 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } 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'> = forwardRefWithGenerics(
-  <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
+export const TableContainer: PC<'div', PropsWithChildren> =
+  forwardRefWithGenerics(<T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'div', ...rest } = props
 
     return <TableContainerContainer ref={ref} as={as} {...rest} />
-  }
-)
+  })

src/components/$Table/TableFoot.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 
@@ -9,7 +9,7 @@ const TableFootContainer = styled.tfoot`
   font-weight: 700;
 `
 
-export const TableFoot: PC<'tfoot'> = forwardRefWithGenerics(
+export const TableFoot: PC<'tfoot', PropsWithChildren> = forwardRefWithGenerics(
   <T extends ElementType>(props: PP<T>, ref?: PR<T>) => {
     const { as = 'tfoot', ...rest } = props
 

src/components/$Table/TableHead.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useContext } from 'react'
+import React, { ElementType, PropsWithChildren, useContext } from 'react'
 import { PC, PP, PR } from '../../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../../utils/ref'
 import { TableContext } from './TableContext'
@@ -26,7 +26,7 @@ const TableHeadContainer = styled.thead<TableHeadContainerProps>`
     `position: sticky; top: ${getStickyValue(sticky)};`}
 `
 
-export interface TableHeadProps {
+export interface TableHeadProps extends PropsWithChildren {
   sticky?: boolean | number | string
   verticalAlign?: 'top' | 'middle' | 'bottom'
 }

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import { transparentize } from 'polished'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../utils/color'
 import { forwardRefWithGenerics } from '../utils/ref'
@@ -64,7 +64,7 @@ const ButtonContainer = styled.button<ButtonContainerProps>`
   }
 `
 
-export interface ButtonProps {
+export interface ButtonProps extends PropsWithChildren {
   backgroundColor?: string
   hoverColor?: string
   primary?: boolean

src/components/Card.tsx

@@ -1,6 +1,6 @@
 import { css, useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { computeHoverColor, readableColor } from '../utils/color'
 import { forwardRefWithGenerics } from '../utils/ref'
@@ -45,7 +45,7 @@ const CardContainer = styled.div<CardContainerProps>`
   ${({ padding }) => paddingMap[padding]}
 `
 
-export interface CardProps {
+export interface CardProps extends PropsWithChildren {
   backgroundColor?: string
   hoverColor?: string
   clickable?: boolean

src/components/Chip.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { readableColor } from '../utils/color'
 import { forwardRefWithGenerics } from '../utils/ref'
@@ -24,7 +24,7 @@ const ChipContainer = styled.div`
   line-height: 1.2;
 `
 
-export interface ChipProps {
+export interface ChipProps extends PropsWithChildren {
   backgroundColor?: string
 }
 

src/components/Collapse.tsx

@@ -1,5 +1,11 @@
 import styled from '@emotion/styled'
-import React, { ElementType, useLayoutEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  PropsWithChildren,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../utils/ref'
 
@@ -18,7 +24,7 @@ const CollapseContainer = styled.div<CollapseContainerProps>`
   overflow: 'hidden';
 `
 
-export interface CollapseProps {
+export interface CollapseProps extends PropsWithChildren {
   shown: boolean
 }
 

src/components/Container.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { ElementType } from 'react'
+import React, { ElementType, PropsWithChildren } from 'react'
 import { PC, PP, PR } from '../types/PolymorphicElementProps'
 import { forwardRefWithGenerics } from '../utils/ref'
 import { cssVariables } from '../utils/styles'
@@ -30,7 +30,7 @@ const ContainerContainer = styled.nav<ContainerContainerProps>`
   margin: 0 auto;
 `
 
-export interface ContainerProps {
+export interface ContainerProps extends PropsWithChildren {
   w?: string | number
   padding?: 'none' | 'normal' | 'wide'
   topBarPadding?: boolean

src/components/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { Tooltip, TooltipProps } from './Tooltip'
 
-export type DropdownProps = TooltipProps
+export type DropdownProps = TooltipProps & PropsWithChildren
 
 export const Dropdown: React.FC<TooltipProps> = (props) => {
   const {