Merge pull request #79 from solved-ac/release/v0.8.0

Release/v0.8.0

Author: shiftpsh

example/.DS_Store

@@ -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"
   }
 }

package.json

@@ -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/$DateSelect/DateSelect.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/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'
@@ -17,7 +17,7 @@ const ItemContainer = styled.li<ItemContainerProps>`
   }
 `
 
-export interface ItemProps {
+export interface ItemProps extends PropsWithChildren {
   marker?: string
 }
 

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'
@@ -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/$Item/Itemize.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/List.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/$List/ListItem.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/Tab.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
 }