fix: update component types define, add children & add contextType, fix ts check error with @types/react v18 (#771)

* fix: update component types, add children & add contextType, fix ts check error with @types/react 18, #755

* fix: update component interface in semi-animation-react

* fix: update component interface in semi-animation-react

* fix: fix context type define of Table/Form/DatePicker

* fix: fix context type define of Table

* fix: fix context type define of Toast/Transfer/Tree

* fix: fix context type define of Upload validateMessage

* fix: fix type define of buttonGroup

* fix: fix type define sidesheet

package.json

@@ -48,6 +48,7 @@
     "@douyinfe/semi-site-markdown-blocks": "^0.0.5",
     "@mdx-js/react": "^1.6.22",
     "@svgr/core": "^5.5.0",
+    "@types/react-window": "^1.8.5",
     "aos": "^2.3.4",
     "camelcase": "^6.2.0",
     "chroma-js": "^2.1.2",
@@ -131,8 +132,8 @@
     "@types/lodash": "^4.14.172",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^14.17.9",
-    "@types/react": "^16.14.13",
-    "@types/react-dom": "^16.9.14",
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1",
     "@types/react-resizable": "^1.7.3",
     "@types/svgo": "^2.3.1",
     "@types/webpack": "^4.41.30",
@@ -206,6 +207,10 @@
       "pre-commit": "lint-staged"
     }
   },
+  "resolutions": {
+    "@types/react": "^18.0.5",
+    "@types/react-dom": "^18.0.1"
+  },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx}": [
       "eslint --ext '.js,.jsx,.ts,.tsx' --fix"

packages/semi-animation-react/src/Animation.tsx

@@ -12,7 +12,7 @@ export interface AnimationProps {
     onResume?: Function;
     onStop?: Function;
     onRest?: Function;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((AnimationChildProps?: any) => React.ReactNode);
     from?: Record<string, any>;
     to?: Record<string, any>;
     reverse?: boolean;

packages/semi-animation-react/src/KeyFrames.tsx

@@ -7,6 +7,7 @@ import Animation from './Animation';
 export interface KeyFramesProps {
     frames?: any[];
     loop?: boolean;
+    children?: React.ReactNode | ((KeyFramesProps: any) => React.ReactNode);
     forwardInstance?: (value: any) => void;
     onFrame?: (value: any) => void;
     onKeyRest?: (value: Record<string, any>) => void;

packages/semi-animation-react/src/StyledAnimation.tsx

@@ -28,6 +28,16 @@ export interface StyledAnimationProps {
     fillMode?: string;
 }
 
+export interface StyledAnimateStyleType {
+    animationTimingFunction: string;
+    animationName: any;
+    animationDuration: string | number;
+    animationDelay: string | number;
+    animationIterationCount: string | number;
+    animationDirection: string;
+    animationFillMode: string;
+}
+
 const types: any = Object.values(styledTypes).reduce((arr, cur) => [...arr as any, ...cur as any], []);
 
 export default class StyledAnimation extends PureComponent<StyledAnimationProps> {

packages/semi-animation-react/src/StyledTransition.tsx

@@ -1,14 +1,20 @@
 /* eslint-disable eqeqeq */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import StyledAnimation, { StyledAnimationProps } from './StyledAnimation';
+import StyledAnimation, { StyledAnimationProps, StyledAnimateStyleType } from './StyledAnimation';
 import noop from './utils/noop';
 
+export interface ChildFCType {
+    animateCls?: string;
+    animateStyle?: StyledAnimateStyleType;
+    animateEvents?: (eventProps?: any) => void;
+}
+
 export interface StyledTransitionProps extends StyledAnimationProps {
     state?: string | boolean;
     enter?: string;
     leave?: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
     willEnter?: (value: any) => void;
     didEnter?: (value: any) => void;
     willLeave?: (value: any) => void;
@@ -19,8 +25,8 @@ export interface StyledTransitionProps extends StyledAnimationProps {
 
 export interface StyledTransitionState {
     state: string | boolean;
-    lastChildren: React.ReactNode;
-    currentChildren: React.ReactNode;
+    lastChildren:  React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
+    currentChildren: React.ReactNode | ((TransitionProps: ChildFCType) => React.ReactNode | any);
 }
 
 export default class StyledTransition extends Component<StyledTransitionProps, StyledTransitionState> {

packages/semi-animation-react/src/Transition.tsx

@@ -5,7 +5,7 @@ import React, { Component, isValidElement } from 'react';
 import noop from './utils/noop';
 
 export interface TransitionProps extends AnimationProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((TransitionProps: any) => any);
     from?: Record<string, any>;
     enter?: Record<string, any>;
     leave?: Record<string, any>;
@@ -20,8 +20,8 @@ export interface TransitionProps extends AnimationProps {
 
 export interface TransitionState {
     state: string | boolean;
-    lastChildren: React.ReactNode;
-    currentChildren: React.ReactNode;
+    lastChildren: React.ReactNode | ((TransitionProps: any) => React.ReactNode | any);
+    currentChildren: React.ReactNode | ((TransitionProps: any) => React.ReactNode | any);
 }
 
 export default class Transition extends Component<TransitionProps, TransitionState> {
@@ -122,7 +122,7 @@ export default class Transition extends Component<TransitionProps, TransitionSta
     render() {
         const { from: propsFrom, enter, leave, ...restProps } = this.props;
 
-        let children: React.ReactNode;
+        let children;
 
         // eslint-disable-next-line prefer-const
         let { currentChildren, lastChildren, state } = this.state;

packages/semi-foundation/form/interface.ts

@@ -111,8 +111,8 @@ export interface ArrayFieldStaff {
 export interface FormUpdaterContextType {
     register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
     unRegister: (field: string) => void;
-    updateStateValue: (field: string, value: any, opts: CallOpts) => void;
-    updateStateError: (field: string, error: any, opts: CallOpts) => void;
+    updateStateValue: (field: string, value: any, opts?: CallOpts) => void;
+    updateStateError: (field: string, error: any, opts?: CallOpts) => void;
     updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts) => void;
     getValue: (field?: string | undefined, opts?: CallOpts) => any;
     getError: (field?: string) => any;

packages/semi-foundation/upload/foundation.ts

@@ -37,7 +37,7 @@ export interface BaseFileItem {
     percent?: number;
     _sizeInvalid?: boolean;
     preview?: boolean;
-    validateMessage?: unknown;
+    validateMessage?: any;
     shouldUpload?: boolean;
     [key: string]: any;
 }

packages/semi-ui/_base/baseComponent.tsx

@@ -2,7 +2,7 @@
  * The Semi Foundation / Adapter architecture split was inspired by Material Component For Web. （https://github.com/material-components/material-components-web）
  * We re-implemented our own code based on the principle and added more functions we need according to actual needs.
  */
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import log from '@douyinfe/semi-foundation/utils/log';
 import { DefaultAdapter } from '@douyinfe/semi-foundation/base/foundation';
 import { VALIDATE_STATUS } from '@douyinfe/semi-foundation/base/constants';
@@ -15,6 +15,7 @@ export type ValidateStatus = ArrayElement<typeof VALIDATE_STATUS>;
 export interface BaseProps {
     style?: React.CSSProperties;
     className?: string;
+    children?: ReactNode | undefined | any;
 }
 
 // eslint-disable-next-line

packages/semi-ui/_portal/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import '@douyinfe/semi-foundation/_portal/portal.scss';
 
 export interface PortalProps {
@@ -37,6 +37,7 @@ class Portal extends PureComponent<PortalProps, PortalState> {
     };
 
     el: HTMLElement;
+    context: ContextValue;
     constructor(props: PortalProps) {
         super(props);
         try {

packages/semi-ui/anchor/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/anchor/constants';
@@ -17,6 +17,7 @@ export { LinkProps } from './link';
 export interface AnchorProps {
     autoCollapse?: boolean;
     className?: string;
+    children?: ReactNode | undefined;
     defaultAnchor?: string;
     getContainer?: () => HTMLElement | Window;
     maxHeight?: string | number;

packages/semi-ui/anchor/link.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import BaseComponent from '../_base/baseComponent';
@@ -13,6 +13,7 @@ export interface LinkProps {
     href?: string;
     title?: string | React.ReactNode;
     className?: string;
+    children?: ReactNode | undefined;
     style?: React.CSSProperties;
     disabled?: boolean;
 }

packages/semi-ui/autoComplete/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-types, max-len */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { isEqual, noop } from 'lodash';
@@ -48,7 +48,7 @@ export interface AutoCompleteProps<T extends AutoCompleteItems> {
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     className?: string;
-    children?: React.ReactNode;
+    children?: ReactNode | undefined;
     data?: T[];
     disabled?: boolean;
     defaultOpen?: boolean;

packages/semi-ui/avatar/interface.ts

@@ -22,7 +22,7 @@ export type AvatarColor =
     | 'yellow';
 
 export interface AvatarProps extends BaseProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     color?: AvatarColor;
     shape?: AvatarShape;
     size?: AvatarSize;
@@ -42,7 +42,7 @@ export type AvatarGroupSize = 'extra-extra-small' | 'extra-small' | 'small' | 'm
 export type AvatarGroupOverlapFrom = 'start' | 'end';
 
 export interface AvatarGroupProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     shape?: AvatarGroupShape;
     size?: AvatarGroupSize;
     overlapFrom?: AvatarGroupOverlapFrom;

packages/semi-ui/backtop/index.tsx

@@ -20,6 +20,7 @@ export interface BackTopProps {
     onClick?: (e: React.MouseEvent) => void;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
 }
 
 export interface BackTopState {

packages/semi-ui/badge/index.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { isNumber, isString } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/badge/constants';
 import '@douyinfe/semi-foundation/badge/badge.scss';
 
@@ -21,7 +21,7 @@ export interface BadgeProps {
     overflowCount?: number;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 
 export default class Badge extends PureComponent<BadgeProps> {
@@ -45,6 +45,8 @@ export default class Badge extends PureComponent<BadgeProps> {
         className: '',
     };
 
+    context: ContextValue;
+
     render() {
         const { direction } = this.context;
         // DefaultPosition here, static can't get this

packages/semi-ui/banner/index.tsx

@@ -20,6 +20,7 @@ export type Type = 'info' | 'danger' | 'warning' | 'success';
 export interface BannerProps {
     type?: Type;
     className?: string;
+    children?: React.ReactNode | undefined;
     fullMode?: boolean;
     title?: React.ReactNode;
     description?: React.ReactNode;

packages/semi-ui/breadcrumb/bread-context.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { showToolTipProps } from './index';
 import { BreadcrumbItemInfo } from './item';
-export interface BreadContextProps {
+export interface BreadContextType {
     onClick?: (info: BreadcrumbItemInfo, event: React.MouseEvent) => void;
     showTooltip?: boolean | showToolTipProps;
     compact?: boolean;
     separator?: string | React.ReactNode;
 }
 
-const BreadContext = React.createContext<BreadContextProps>({});
+const BreadContext = React.createContext<BreadContextType>({});
 
 export default BreadContext;

packages/semi-ui/breadcrumb/index.tsx

@@ -11,7 +11,7 @@ import { noop } from '@douyinfe/semi-foundation/utils/function';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import Popover from '../popover';
 import BreadcrumbItem, { RouteProps, BreadcrumbItemInfo } from './item';
-import BreadContext, { BreadContextProps } from './bread-context';
+import BreadContext, { BreadContextType } from './bread-context';
 import { TooltipProps } from '../tooltip';
 import { IconMore } from '@douyinfe/semi-icons';
 
@@ -49,7 +49,7 @@ interface BreadcrumbState {
 }
 
 class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
-    static contextType: React.Context<BreadContextProps> = BreadContext;
+    static contextType: React.Context<BreadContextType> = BreadContext;
 
     static Item: typeof BreadcrumbItem = BreadcrumbItem;
 

packages/semi-ui/breadcrumb/item.tsx

@@ -5,8 +5,8 @@ import { cssClasses } from '@douyinfe/semi-foundation/breadcrumb/constants';
 import BreadcrumbItemFoundation, { BreadcrumbItemAdapter, BreadcrumbItemInfo, Route } from '@douyinfe/semi-foundation/breadcrumb/itemFoundation';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
-import BreadContext from './bread-context';
-import Typography from '../typography';
+import BreadContext, { BreadContextType } from './bread-context';
+import Typography, { EllipsisPos, ShowTooltip as ShowTooltipType } from '../typography';
 import { merge, isUndefined, isNull } from 'lodash';
 
 const clsPrefix = cssClasses.PREFIX;
@@ -29,6 +29,12 @@ export interface BreadcrumbItemProps extends BaseProps {
 
 type BreadcrumbItemState = Record<string, never>;
 
+interface GetTooltipOptType {
+    width: number;
+    ellipsisPos: EllipsisPos;
+    opts?: ShowTooltipType['opts'];
+}
+
 export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, BreadcrumbItemState> {
     static isBreadcrumbItem = true;
     static contextType = BreadContext;
@@ -50,6 +56,8 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         shouldRenderSeparator: true
     };
 
+    context: BreadContextType;
+
     get adapter(): BreadcrumbItemAdapter<BreadcrumbItemProps, BreadcrumbItemState> {
         return {
             ...super.adapter,
@@ -129,7 +137,7 @@ export default class BreadcrumbItem extends BaseComponent<BreadcrumbItemProps, B
         const showTooltip = this.getTooltipOpt();
         const icon = this.renderIcon();
         if (Boolean(children) && typeof children === 'string') {
-            const { opts, ellipsisPos, width } = showTooltip;
+            const { opts, ellipsisPos, width } = showTooltip as GetTooltipOptType;
             return (
                 <Fragment>
                     {icon}

packages/semi-ui/button/Button.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -18,6 +18,7 @@ export interface ButtonProps {
     id?: string;
     block?: boolean;
     circle?: boolean;
+    children?: ReactNode | undefined;
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;

packages/semi-ui/button/buttonGroup.tsx

@@ -15,6 +15,7 @@ export interface ButtonGroupProps extends BaseProps {
     size?: Size;
     theme?: Theme;
     className?: string;
+    children?: React.ReactChild;
     'aria-label'?: React.AriaAttributes['aria-label'];
 }
 
@@ -43,7 +44,7 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         const cls = classNames(`${prefixCls}-group`, className);
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+            inner = ((Array.isArray(children) ? children : [children])).map((itm: React.ReactChild, index) => (
                 isValidElement(itm)
                     ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
                     : itm

packages/semi-ui/calendar/_story/Demo.tsx

@@ -14,7 +14,7 @@ const Demo = () => {
 
             </Calendar>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

packages/semi-ui/card/cardGroup.tsx

@@ -11,6 +11,7 @@ export type CardGroupType = 'grid';
 export interface CardGroupProps {
     /** Card group style class name */
     className?: string;
+    children?: React.ReactNode | undefined;
     /** Card Spacing */
     spacing?: number | number[];
     /** Card group inline style */

packages/semi-ui/card/index.tsx

@@ -26,6 +26,7 @@ export interface CardProps {
     bordered?: boolean;
     /** Style class name */
     className?: string;
+    children?: React.ReactNode | undefined;
     /** Cover */
     cover?: ReactNode;
     /** Additional additions to the right of the title */

packages/semi-ui/cascader/index.tsx

@@ -19,7 +19,7 @@ import '@douyinfe/semi-foundation/cascader/cascader.scss';
 import { IconClear, IconChevronDown } from '@douyinfe/semi-icons';
 import { findKeysForValues, convertDataToEntities, calcMergeType } from '@douyinfe/semi-foundation/cascader/util';
 import { calcCheckedKeys, normalizeKeyList, calcDisabledKeys } from '@douyinfe/semi-foundation/tree/treeUtil';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import Input from '../input/index';
 import Popover, { PopoverProps } from '../popover/index';
@@ -62,7 +62,7 @@ export interface CascaderProps extends BasicCascaderProps {
     motion?: Motion;
     treeData?: Array<CascaderData>;
     restTagsPopoverProps?: PopoverProps;
-    children?: ReactNode;
+    children?: React.ReactNode | undefined;
     value?: Value;
     prefix?: ReactNode;
     suffix?: ReactNode;
@@ -209,6 +209,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     optionsRef: React.RefObject<any>;
     clickOutsideHandler: any;
     mergeType: string;
+    context: ContextValue;
 
     constructor(props: CascaderProps) {
         super(props);

packages/semi-ui/cascader/item.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/cascader/constants';
 import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { includes } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { IconChevronRight, IconTick } from '@douyinfe/semi-icons';
 import { Locale } from '../locale/interface';
@@ -85,6 +85,8 @@ export default class Item extends PureComponent<CascaderItemProps> {
         empty: false,
     };
 
+    context: ContextValue;
+
     onClick = (e: React.MouseEvent | React.KeyboardEvent, item: Entity | Data) => {
         const { onItemClick } = this.props;
         if (item.data.disabled || ('disabled' in item && item.disabled)) {

packages/semi-ui/checkbox/checkbox.tsx

@@ -7,7 +7,7 @@ import CheckboxFoundation, { CheckboxAdapter, BasicCheckboxEvent, BasicTargetObj
 import CheckboxInner from './checkboxInner';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/checkbox/checkbox.scss';
-import { Context } from './context';
+import { Context, CheckboxContextType } from './context';
 import { isUndefined, isBoolean, noop } from 'lodash';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 export type CheckboxEvent = BasicCheckboxEvent;
@@ -19,6 +19,7 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     'aria-required'?: React.AriaAttributes['aria-required'];
+    children?: React.ReactNode | undefined;
     onChange?: (e: CheckboxEvent) => any;
     // TODO, docs
     style?: React.CSSProperties;
@@ -71,6 +72,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
         onMouseLeave: noop,
     };
     checkboxEntity: CheckboxInner;
+    context: CheckboxContextType;
 
     get adapter(): CheckboxAdapter<CheckboxProps, CheckboxState> {
         return {
@@ -120,7 +122,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     }
 
     isInGroup() {
-        return this.context && this.context.checkboxGroup;
+        return Boolean(this.context && this.context.checkboxGroup);
     }
 
     focus() {

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -24,7 +24,7 @@ export type CheckboxGroupProps = {
     options?: any[];
     value?: any[];
     onChange?: (value: any[]) => void;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     prefixCls?: string;
     direction?: CheckboxDirection;
     style?: React.CSSProperties;

packages/semi-ui/checkbox/context.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import {  BasicCheckboxEvent } from '@douyinfe/semi-foundation/checkbox/checkboxFoundation';
-type CheckboxContext = {
+type CheckboxContextType = {
     checkboxGroup?: {
         onChange: (evt: BasicCheckboxEvent) => void;
         value: any[];
@@ -10,5 +10,5 @@ type CheckboxContext = {
         isPureCardType: boolean;
     };
 };
-const Context = React.createContext<CheckboxContext>({});
-export { Context };
+const Context = React.createContext<CheckboxContextType>({});
+export { Context, CheckboxContextType };

packages/semi-ui/collapse/index.tsx

@@ -20,6 +20,7 @@ export { CollapsePanelProps } from './item';
 export interface CollapseReactProps extends CollapseProps{
     expandIcon?: React.ReactNode;
     collapseIcon?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     style?: CSSProperties;
     onChange?: (activeKey: CollapseProps['activeKey'], e: React.MouseEvent) => void;
 }

packages/semi-ui/collapse/item.tsx

@@ -12,6 +12,7 @@ export interface CollapsePanelProps {
     extra?: ReactNode;
     header?: ReactNode;
     className?: string;
+    children?: React.ReactNode | undefined;
     reCalcKey?: number | string;
     style?: CSSProperties;
 }
@@ -35,6 +36,8 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
 
     private ariaID = getUuidShort({});
 
+    context: CollapseContextType;
+
     renderHeader(active: boolean, expandIconEnable = true) {
         const {
             header,

packages/semi-ui/collapsible/index.tsx

@@ -11,7 +11,7 @@ const ease = 'cubicBezier(.25,.1,.25,1)';
 
 export interface CollapsibleProps {
     motion?: Motion;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     isOpen?: boolean;
     duration?: number;
     keepDOM?: boolean;
@@ -72,7 +72,7 @@ const Collapsible = (props: CollapsibleProps) => {
         return isOpen || !shouldKeepDOM() && !motion ? 'none' : collapseHeight;
     }, [collapseHeight, motion, isOpen, shouldKeepDOM]);
 
-    const renderChildren = (transitionStyle: Record<string, any>) => {
+    const renderChildren = (transitionStyle: Record<string, any> | null) => {
         const transition =
             transitionStyle && typeof transitionStyle === 'object' ?
                 formatStyle(transitionStyle) :

packages/semi-ui/configProvider/context.tsx

@@ -11,4 +11,4 @@ export interface ContextValue {
 
 const ConfigContext = React.createContext<ContextValue>({});
 
-export default ConfigContext;
+export default ConfigContext;

packages/semi-ui/datePicker/datePicker.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -175,6 +175,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     _mounted: boolean;
 
     foundation: DatePickerFoundation;
+    context: ContextValue;
 
     constructor(props: DatePickerProps) {
         super(props);

packages/semi-ui/descriptions/index.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { strings, cssClasses } from '@douyinfe/semi-foundation/descriptions/constants';
 import '@douyinfe/semi-foundation/descriptions/descriptions.scss';
 import { isPlainObject } from 'lodash';
-import DescriptionsContext, { DescriptionsAlign } from './descriptions-context';
+import DescriptionsContext, { DescriptionsAlign, DescriptionsContextValue } from './descriptions-context';
 import Item from './item';
 
 export { DescriptionsItemProps } from './item';
@@ -21,12 +21,13 @@ export interface DescriptionsProps {
     size?: DescriptionsSize;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     data?: Data[];
 }
 
 const prefixCls = cssClasses.PREFIX;
 
-class Descriptions extends PureComponent<DescriptionsProps > {
+class Descriptions extends PureComponent<DescriptionsProps> {
     static Item = Item;
 
     static contextType = DescriptionsContext;

packages/semi-ui/descriptions/item.tsx

@@ -2,11 +2,12 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/descriptions/constants';
 import '@douyinfe/semi-foundation/descriptions/descriptions.scss';
-import DescriptionsContext from './descriptions-context';
+import DescriptionsContext, { DescriptionsContextValue } from './descriptions-context';
 
 export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
+    children?: React.ReactNode | undefined | (() => React.ReactNode);
     style?: React.CSSProperties;
     itemKey: string | number;
 }
@@ -25,6 +26,8 @@ export default class Item extends PureComponent<DescriptionsItemProps> {
 
     static contextType = DescriptionsContext;
 
+    context: DescriptionsContextValue;
+
     render() {
         const { itemKey, hidden, className, style, children } = this.props;
         const { align } = this.context;

packages/semi-ui/dropdown/context.ts

@@ -1,6 +1,11 @@
 import React from 'react';
 
-const DropdownContext = React.createContext({
+export interface DropdownContextType {
+    level?: number;
+    showTick?: boolean;
+}
+
+const DropdownContext = React.createContext<DropdownContextType>({
     level: 0,
 });
 export default DropdownContext;

packages/semi-ui/dropdown/dropdownItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses as css, strings } from '@douyinfe/semi-foundation/dropdown/constants';
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { IconTick } from '@douyinfe/semi-icons';
 import { noop } from 'lodash';
@@ -43,6 +43,7 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     };
 
     static contextType = DropdownContext;
+    context: DropdownContextType;
 
     static defaultProps = {
         disabled: false,

packages/semi-ui/dropdown/dropdownTitle.tsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/dropdown/constants';
 import cls from 'classnames';
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import { BaseProps } from '../_base/baseComponent';
 
 const prefixCls = cssClasses.PREFIX;
@@ -17,6 +17,7 @@ class DropdownTitle extends PureComponent<DropdownTitleProps> {
     };
 
     static contextType = DropdownContext;
+    context: DropdownContextType;
 
     render() {
         const { className, style, children } = this.props;

packages/semi-ui/dropdown/index.tsx

@@ -13,7 +13,7 @@ import DropdownItem, { DropdownItemProps } from './dropdownItem';
 import DropdownDivider, { DropdownDividerProps } from './dropdownDivider';
 import DropdownTitle, { DropdownTitleProps } from './dropdownTitle';
 
-import DropdownContext from './context';
+import DropdownContext, { DropdownContextType } from './context';
 import '@douyinfe/semi-foundation/dropdown/dropdown.scss';
 import { noop, get } from 'lodash';
 import { Motion } from '../_base/base';
@@ -118,6 +118,8 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         this.foundation = new Foundation(this.adapter);
     }
 
+    context: DropdownContextType;
+
     get adapter() {
         return {
             ...super.adapter,

packages/semi-ui/empty/index.tsx

@@ -23,7 +23,7 @@ export interface EmptyProps {
     darkModeImage?: React.ReactNode | SVGNode;
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 
 interface EmptyState {

packages/semi-ui/form/arrayField.tsx

@@ -73,6 +73,7 @@ class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
     cacheFieldValues: any[];
     shouldUseInitValue: boolean;
     cacheUpdateKey: string;
+    context: FormUpdaterContextType;
 
     constructor(props: ArrayFieldProps, context: FormUpdaterContextType) {
         super(props, context);

packages/semi-ui/form/baseForm.tsx

@@ -18,7 +18,8 @@ import ErrorMessage from './errorMessage';
 import FormInputGroup from './group';
 import { noop } from 'lodash';
 import '@douyinfe/semi-foundation/form/form.scss';
-import { FormInput,
+import {
+    FormInput,
     FormInputNumber,
     FormTextArea,
     FormSelect,
@@ -206,7 +207,7 @@ class Form extends BaseComponent<BaseFormProps, BaseFormState> {
             values: formState.values,
         };
         if (component) {
-            return React.createElement(component, props, children);
+            return React.createElement(component, props);
         }
         if (render) {
             return render(props);

packages/semi-ui/form/group.tsx

@@ -11,6 +11,7 @@ import { FormUpdaterContext } from './context';
 import { useFormState } from './hooks/index';
 import InputGroup, { InputGroupProps as BacisInputGroupProps } from '../input/inputGroup';
 import { BaseFormProps, FormState } from './interface';
+import { FormUpdaterContextType } from '@douyinfe/semi-foundation/form/interface';
 
 interface GroupErrorProps {
     showValidateIcon?: boolean;
@@ -44,6 +45,7 @@ const GroupError = (props: GroupErrorProps) => {
 
 class FormInputGroup extends Component<InputGroupProps> {
     static contextType = FormUpdaterContext;
+    context: FormUpdaterContextType;
     renderLabel(label: LabelProps, formProps: BaseFormProps) {
         if (label) {
             if (isString(label)) {

packages/semi-ui/form/hoc/withField.tsx

@@ -580,7 +580,7 @@ function withField<
         }
     };
     SemiField = forwardRef(SemiField);
-    (SemiField as React.SFC).displayName = getDisplayName(Component);
+    (SemiField as React.FC).displayName = getDisplayName(Component);
     return SemiField as any;
 }
 

packages/semi-ui/form/label.tsx

@@ -20,6 +20,7 @@ export interface LabelProps {
     width?: number | string;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     extra?: React.ReactNode;
 }
 

packages/semi-ui/form/section.tsx

@@ -10,7 +10,7 @@ export interface SectionProps {
     className?: string;
     style?: React.CSSProperties;
     text?: React.ReactNode | string;
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 }
 
 export default class Section extends PureComponent<SectionProps> {

packages/semi-ui/form/slot.tsx

@@ -59,9 +59,11 @@ const FormSlot = (props: SlotProps) => {
             // do nothing
             break;
         case isString(label) || isNumber(label):
+            // @ts-ignore skip type check, the actual type is already determined
             label = { text: label };
             break;
         case React.isValidElement(label):
+            // @ts-ignore skip type check, the actual type is already determined
             label = { text: label };
             break;
         default:

packages/semi-ui/grid/col.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RowContext } from './row';
+import { RowContext, RowContextType } from './row';
 import classnames from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/grid/constants';
 
@@ -59,6 +59,8 @@ class Col extends React.Component<ColProps> {
         prefixCls: cssClasses.PREFIX,
     };
 
+    context: RowContextType;
+
     render() {
         const { props } = this;
         const { prefixCls, span, order, offset, push, pull, className, children, ...others } = props;

packages/semi-ui/grid/row.tsx

@@ -10,7 +10,11 @@ import { registerMediaQuery } from '../_utils';
 
 const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 
-export const RowContext = React.createContext<{ gutters: Gutter | [Gutter, Gutter] }>(null);
+export interface RowContextType {
+    gutters?: Gutter | [Gutter, Gutter];
+}
+
+export const RowContext = React.createContext<RowContextType>(null);
 
 export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 

packages/semi-ui/layout/Sider.tsx

@@ -3,7 +3,7 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/layout/constants';
 import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
-import LayoutContext from './layout-context';
+import LayoutContext, { ContextType } from './layout-context';
 import { registerMediaQuery } from '../_utils';
 
 const responsiveMap: ResponsiveMap = {
@@ -38,6 +38,7 @@ export interface SiderProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     breakpoint?: Array<keyof ResponsiveMap>;
     onBreakpoint?: (screen: keyof ResponsiveMap, match: boolean) => void;
     'aria-label'?: React.AriaAttributes['aria-label'];
@@ -62,6 +63,7 @@ class Sider extends React.PureComponent<SiderProps> {
     static contextType = LayoutContext;
 
     unRegisters: Array<() => void> = [];
+    context: ContextType;
     uniqueId = '';
 
     constructor(props: SiderProps) {

packages/semi-ui/layout/index.tsx

@@ -32,6 +32,7 @@ export interface BasicProps {
     className?: string;
     tagName?: keyof HTMLElementTagNameMap;
     type?: string;
+    children?: React.ReactNode | undefined;
 }
 
 class Basic extends React.PureComponent<BasicProps> {
@@ -60,6 +61,7 @@ export interface BasicLayoutProps {
     prefixCls?: string;
     style?: CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     hasSider?: boolean;
     tagName?: keyof HTMLElementTagNameMap;
 }

packages/semi-ui/layout/layout-context.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 
-export interface ContextType{
+export interface ContextType {
     siderHook: {
         addSider: (id: string) => void;
         removeSider: (id: string) => void;

packages/semi-ui/list/index.tsx

@@ -17,6 +17,7 @@ export { ListItemProps } from './item';
 export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode | undefined;
     bordered?: boolean;
     footer?: React.ReactNode;
     header?: React.ReactNode;

packages/semi-ui/list/item.tsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/list/constants';
 import { noop } from 'lodash';
 import { Col } from '../grid';
-import ListContext from './list-context';
+import ListContext, { ListContextValue } from './list-context';
 
 export interface ListItemProps {
     extra?: React.ReactNode;
@@ -12,6 +12,7 @@ export interface ListItemProps {
     main?: React.ReactNode;
     align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
     className?: string;
+    children?: React.ReactNode | undefined;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;
@@ -29,6 +30,7 @@ export default class ListItem extends PureComponent<ListItemProps> {
         main: PropTypes.node,
         align: PropTypes.oneOf(strings.ALIGN),
         className: PropTypes.string,
+        children: PropTypes.node,
         style: PropTypes.object,
         onClick: PropTypes.func,
         onRightClick: PropTypes.func,
@@ -42,6 +44,8 @@ export default class ListItem extends PureComponent<ListItemProps> {
         onMouseLeave: noop,
     };
 
+    context: ListContextValue;
+
     wrapWithGrid(content: React.ReactNode) {
         const { grid } = this.context;
         const { gutter, justify, type, align, ...rest } = grid;
@@ -85,6 +89,7 @@ export default class ListItem extends PureComponent<ListItemProps> {
             );
         }
         let content = (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
             <li
                 className={itemCls}
                 style={style}

packages/semi-ui/modal/Modal.tsx

@@ -22,6 +22,7 @@ export type Directions = 'ltr' | 'rtl';
 
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
+    children?: React.ReactNode | undefined;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;

packages/semi-ui/modal/ModalContent.tsx

@@ -3,7 +3,7 @@ import React, { CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/modal/constants';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import Button from '../iconButton';
 import Typography from '../typography';
 import BaseComponent from '../_base/baseComponent';
@@ -19,7 +19,11 @@ import { getActiveElement } from '../_utils';
 
 let uuid = 0;
 
-export default class ModalContent extends BaseComponent<ModalContentProps, ModalContentState> {
+
+export interface ModalContentReactProps extends ModalContentProps {
+    children?: React.ReactNode | undefined;
+}
+export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;
     static propTypes = {
         close: PropTypes.func,
@@ -40,6 +44,8 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
 
     modalDialogRef: React.MutableRefObject<HTMLDivElement>;
     foundation: ModalContentFoundation;
+    context: ContextValue;
+
     constructor(props: ModalContentProps) {
         super(props);
         this.state = {
@@ -255,7 +261,7 @@ export default class ModalContent extends BaseComponent<ModalContentProps, Modal
                     onAnimationEnd={props.onAnimationEnd}
                     className={cls([`${cssClasses.DIALOG}-content`,
                         props.contentClassName,
-                        {[`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen }])}>
+                        { [`${cssClasses.DIALOG}-content-fullScreen`]: props.isFullScreen }])}>
                     {header}
                     {body}
                     {footer}

packages/semi-ui/navigation/Footer.tsx

@@ -6,7 +6,7 @@ import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/consta
 import CollapseButton from './CollapseButton';
 import '@douyinfe/semi-foundation/navigation/navigation.scss';
 
-import NavContext from './nav-context';
+import NavContext, { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export interface NavFooterProps extends BaseProps {
@@ -28,6 +28,8 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
     static defaultProps = {
         collapseButton: false,
     };
+    
+    context: NavContextType;
 
     renderCollapseButton = () => {
         const { collapseButton, collapseText } = this.props;

packages/semi-ui/navigation/Header.tsx

@@ -6,7 +6,7 @@ import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined
 import { cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
 import '@douyinfe/semi-foundation/navigation/navigation.scss';
 
-import NavContext from './nav-context';
+import NavContext, { NavContextType }  from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export type Logo = React.ReactNode;
@@ -37,6 +37,8 @@ export default class NavHeader extends PureComponent<NavHeaderProps> {
         prefixCls: cssClasses.PREFIX,
     };
 
+    context: NavContextType;
+
     renderLogo(logo: React.ReactNode) {
         if (React.isValidElement(logo)) {
             return logo;

packages/semi-ui/navigation/Item.tsx

@@ -16,7 +16,7 @@ import ItemFoundation, {
 import { cssClasses, strings } from '@douyinfe/semi-foundation/navigation/constants';
 
 import Tooltip from '../tooltip';
-import NavContext from './nav-context';
+import NavContext, { NavContextType } from './nav-context';
 import Dropdown from '../dropdown';
 
 const clsPrefix = `${cssClasses.PREFIX}-item`;
@@ -81,6 +81,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
     };
 
     foundation: ItemFoundation;
+    context: NavContextType;
     constructor(props: NavItemProps) {
         super(props);
         this.state = {
@@ -112,9 +113,9 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             notifyMouseLeave: (...args) => this.props.onMouseLeave(...args),
             getIsCollapsed: () => this.props.isCollapsed || Boolean(this.context && this.context.isCollapsed) || false,
             getSelected: () =>
-                Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey)),
+                Boolean(this.context && this.context.selectedKeys && this.context.selectedKeys.includes(this.props.itemKey as string)),
             getIsOpen: () =>
-                Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey)),
+                Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey as string)),
         };
     }
 

packages/semi-ui/navigation/OpenIconTransition.tsx

@@ -9,7 +9,8 @@ const formatStyle = function formatStyle({ rotate = 0 }) {
 };
 
 export interface OpenIconTransitionProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode |  ((transitionArgus?: any) => React.ReactNode);
+    isCollapsed?: boolean;
     isOpen?: boolean;
 }
 

packages/semi-ui/navigation/SubNav.tsx

@@ -14,7 +14,7 @@ import { IconChevronDown, IconChevronUp, IconChevronRight } from '@douyinfe/semi
 
 import NavItem from './Item';
 import Dropdown, { DropdownProps } from '../dropdown';
-import NavContext from './nav-context';
+import NavContext, { NavContextType } from './nav-context';
 
 import { times, get } from 'lodash';
 
@@ -116,6 +116,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
     titleRef: React.RefObject<HTMLDivElement>;
     itemRef: React.RefObject<HTMLLIElement>;
     foundation: SubNavFoundation;
+    context: NavContextType;
     constructor(props: SubNavProps) {
         super(props);
         this.state = {
@@ -162,9 +163,9 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
             notifyGlobalOpenChange: (...args) => this._invokeContextFunc('onOpenChange', ...args),
             notifyGlobalOnSelect: (...args) => this._invokeContextFunc('onSelect', ...args),
             notifyGlobalOnClick: (...args) => this._invokeContextFunc('onClick', ...args),
-            getIsSelected: itemKey => Boolean(!isNullOrUndefined(itemKey) && get(this.context, 'selectedKeys', []).includes(itemKey)),
+            getIsSelected: itemKey => Boolean(!isNullOrUndefined(itemKey) && get(this.context, 'selectedKeys', []).includes(String(itemKey))),
             getIsOpen: () =>
-                Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(this.props.itemKey)),
+                Boolean(this.context && this.context.openKeys && this.context.openKeys.includes(String(this.props.itemKey))),
         };
     }
 

packages/semi-ui/navigation/SubNavTransition.tsx

@@ -13,7 +13,7 @@ const formatStyle = function formatStyle({ maxHeight, opacity }: { maxHeight: nu
 };
 
 export interface SubNavTransitionProps {
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((transitionProps?: any) => React.ReactNode);
     isCollapsed?: boolean;
     maxHeight?: number;
     motion?: Motion;

packages/semi-ui/navigation/nav-context.ts

@@ -1,6 +1,27 @@
 import React from 'react';
 
-const NavContext = React.createContext({
+import { NavProps } from './index';
+import { Locale } from '../locale/interface';
+export interface NavContextType {
+    isCollapsed?: boolean;
+    mode?: NavProps['mode'];
+    openKeys?: string[];
+    onCollapseChange?: NavProps['onCollapseChange'];
+    prefixCls?: string;
+    selectedKeys?: string[];
+    toggleIconPosition?: string;
+    selectedKeysIsControlled?: boolean;
+    openKeysIsControlled?: boolean;
+    limitIndent?: boolean;
+    isInSubNav?: boolean;
+    locale?: Locale['Navigation'];
+    subNavMotion?: NavProps['subNavMotion'];
+    subNavCloseDelay?: NavProps['subNavCloseDelay'];
+    subNavOpenDelay?: NavProps['subNavOpenDelay'];
+    canUpdateOpenKeys?: boolean;
+}
+
+const NavContext = React.createContext<NavContextType>({
     isCollapsed: false,
     selectedKeys: [],
     openKeys: [],

packages/semi-ui/notification/NoticeTransition.tsx

@@ -9,7 +9,7 @@ export type ArgsType<T> = T extends (...args: infer A) => any ? A : never;
 export interface NoticeTransitionProps{
     position?: NoticePosition;
     motion?: Motion<NoticeTransitionProps>;
-    children?: JSXElementConstructor<any> | React.ReactChildren;
+    children?: React.ReactNode | ((TransitionProps?: any) => React.ReactNode);
 }
 
 type NoticeTransitionFormatFuncType = (styles: { translate: string;opacity: string | number }) => any;

packages/semi-ui/notification/index.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import NotificationListFoundation, {
     ConfigProps, NotificationListAdapter,
     NotificationListProps,
@@ -75,6 +75,8 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
         this.foundation = new NotificationListFoundation(this.adapter);
     }
 
+    context: ContextValue;
+
     get adapter(): NotificationListAdapter {
         return {
             ...super.adapter,

packages/semi-ui/notification/notice.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/notification/constants';
 import NotificationFoundation, {
     NoticeAdapter,
@@ -82,6 +82,8 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
         this.foundation = new NotificationFoundation(this.adapter);
     }
 
+    context: ContextValue;
+
     componentWillUnmount() {
         this.foundation.destroy();
     }

packages/semi-ui/overflowList/intersectionObserver.tsx

@@ -5,6 +5,7 @@ import { isEqual, isEmpty } from 'lodash';
 export interface ReactIntersectionObserverProps {
     onIntersect?: IntersectionObserverCallback;
     option?: IntersectionObserverInit;
+    children?: React.ReactNode;
     root?: IntersectionObserverInit['root'];
     threshold?: IntersectionObserverInit['threshold'];
     rootMargin?: IntersectionObserverInit['rootMargin'];
@@ -86,7 +87,7 @@ export default class ReactIntersectionObserver extends React.PureComponent<React
         });
     }
 
-    render(): ReactNode {
+    render() {
         const { children } = this.props;
         return children;
     }

packages/semi-ui/pagination/index.tsx

@@ -17,7 +17,7 @@ import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/con
 import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale } from '../locale/interface';
 import Select from '../select/index';
@@ -135,6 +135,8 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         );
     }
 
+    context: ContextValue;
+
     get adapter(): PaginationAdapter<PaginationProps, PaginationState> {
         return {
             ...super.adapter,
@@ -371,6 +373,7 @@ export default class Pagination extends BaseComponent<PaginationProps, Paginatio
         const itemHeight = 32;
         const listHeight = count >= 5 ? itemHeight * 5 : itemHeight * count;
         return (
+            // @ts-ignore skip type check cause react-window not update with @types/react 18
             <List
                 className={`${prefixCls}-rest-list`}
                 itemData={restList}

packages/semi-ui/popconfirm/index.tsx

@@ -11,7 +11,7 @@ import Popover, { PopoverProps } from '../popover';
 import { Position, Trigger } from '../tooltip';
 import Button, { ButtonProps } from '../button';
 import { Type as ButtonType } from '../button/Button';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import LocaleConsumer from '../locale/localeConsumer';
 import { Locale as LocaleObject } from '../locale/interface';
 import '@douyinfe/semi-foundation/popconfirm/popconfirm.scss';
@@ -105,6 +105,8 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         this.foundation = new PopconfirmFoundation(this.adapter);
     }
 
+    context: ContextValue;
+
     static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState) {
         const willUpdateStates: Partial<PopconfirmState> = {};
         const { hasOwnProperty } = Object.prototype;

packages/semi-ui/popover/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/popover/constants';
 import Tooltip, { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import Arrow from './Arrow';
@@ -101,6 +101,8 @@ class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         guardFocus: true,
     };
 
+    context: ContextValue;
+
     renderPopCard = ({ initialFocusRef }: { initialFocusRef: RenderContentProps['initialFocusRef'] }) => {
         const { content, contentClassName, prefixCls } = this.props;
         const { direction } = this.context;

packages/semi-ui/radio/radio.tsx

@@ -24,6 +24,7 @@ export type RadioType =
 export type RadioProps = {
     autoFocus?: boolean;
     checked?: boolean;
+    children?: React.ReactNode | undefined;
     defaultChecked?: boolean;
     value?: string | number;
     disabled?: boolean;

packages/semi-ui/radio/radioGroup.tsx

@@ -30,6 +30,7 @@ export type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
+    children?: React.ReactNode | undefined;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;

packages/semi-ui/select/index.tsx

@@ -4,7 +4,7 @@ import React, { Fragment, MouseEvent, ReactInstance } from 'react';
 import ReactDOM from 'react-dom';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/select/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/select/constants';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
@@ -321,6 +321,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     selectOptionListID: string;
     clickOutsideHandler: (e: MouseEvent) => void;
     foundation: SelectFoundation;
+    context: ContextValue;
 
     constructor(props: SelectProps) {
         super(props);

packages/semi-ui/select/utils.tsx

@@ -68,7 +68,7 @@ const getOptionsFromGroup = (selectChildren: React.ReactNode) => {
         }
     });
     if (type === 'option') {
-        optionGroups = [emptyGroup];
+        optionGroups = [emptyGroup] as OptionGroupProps[];
     }
     return { optionGroups, options };
 };

packages/semi-ui/sideSheet/SideSheetContent.tsx

@@ -23,6 +23,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
+    children?: React.ReactNode | undefined;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

packages/semi-ui/sideSheet/SideSheetTransition.tsx

@@ -4,7 +4,7 @@ import React, { CSSProperties } from 'react';
 import { Motion } from '../_base/base';
 
 export interface SideSheetTransitionProps{
-    children?: React.ReactChildren | React.JSXElementConstructor<any>;
+    children?: React.ReactNode | ((TransitionProps: any) => React.ReactNode);
     motion?: Motion<SideSheetTransitionProps>;
     controlled?: boolean;
     visible?: boolean;

packages/semi-ui/sideSheet/index.tsx

@@ -4,7 +4,7 @@ import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import Portal from '../_portal';
 import cls from 'classnames';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/sideSheet/constants';
 import SideSheetTransition from './SideSheetTransition';
 import SideSheetContent from './SideSheetContent';
@@ -32,7 +32,6 @@ export interface SideSheetReactProps extends SideSheetProps {
     footer?: React.ReactNode;
     children?: React.ReactNode;
     onCancel?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-
 }
 
 export {
@@ -93,6 +92,8 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         this._active = false;
     }
 
+    context: ContextValue;
+
     get adapter(): SideSheetAdapter {
         return {
             ...super.adapter,

packages/semi-ui/slider/index.tsx

@@ -300,7 +300,7 @@ export default class Slider extends BaseComponent<SliderProps, SliderState> {
         const maxClass = cls(cssClasses.HANDLE, {
             [`${cssClasses.HANDLE}-clicked`]: chooseMovePos === 'max' && isDrag,
         });
-        const {min, max, currentValue} = this.state;
+        const { min, max, currentValue } = this.state;
 
         const commonAria = {
             'aria-label': ariaLabel,

packages/semi-ui/table/Body/ExpandedRow.tsx

@@ -7,7 +7,7 @@ import { get, set, isNull } from 'lodash';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/table/constants';
 import { arrayAdd, filterColumns } from '@douyinfe/semi-foundation/table/utils';
 import Store from '@douyinfe/semi-foundation/utils/Store';
-import TableContext from '../table-context';
+import TableContext, { TableContextProps } from '../table-context';
 import TableRow from './BaseRow';
 import { amendTableWidth } from '../utils';
 import { ColumnProps, ExpandIcon, TableComponents, Virtualized, Fixed } from '../interface';
@@ -68,6 +68,8 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
         prefixCls: cssClasses.PREFIX,
     };
 
+    context: TableContextProps;
+
     render() {
         const {
             record,

packages/semi-ui/table/Body/SectionRow.tsx

@@ -10,7 +10,7 @@ import Store from '@douyinfe/semi-foundation/utils/Store';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/table/constants';
 import { filterColumns } from '@douyinfe/semi-foundation/table/utils';
 import BaseRow from './BaseRow';
-import TableContext from '../table-context';
+import TableContext, { TableContextProps } from '../table-context';
 import {
     ColumnProps,
     RenderGroupSection,
@@ -79,6 +79,8 @@ class SectionRow extends PureComponent<SectionRowProps> {
         },
     };
 
+    context: TableContextProps;
+
     onRow = (...args: any[]): OnRowReturnObject => {
         const { onGroupedRow, clickGroupedRowToExpand, onExpand, groupKey, expanded } = this.props;
         const rowProps: { onClick?: (e: React.MouseEvent) => void } = {};

packages/semi-ui/table/Body/index.tsx

@@ -30,7 +30,7 @@ import ExpandedRow from './ExpandedRow';
 import SectionRow from './SectionRow';
 import TableHeader from '../TableHeader';
 import ConfigContext from '../../configProvider/context';
-import TableContext from '../table-context';
+import TableContext, { TableContextProps } from '../table-context';
 import {
     ExpandedRowRender,
     Virtualized,
@@ -132,6 +132,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
     foundation: BodyFoundation;
     cellWidths: number[];
     flattenedColumns: ColumnProps[];
+    context: TableContextProps;
     constructor(props: BodyProps, context: BodyContext) {
         super(props);
         this.ref = React.createRef();
@@ -271,7 +272,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
 
     itemKey = (index: number, data: Array<FlattenData | GroupFlattenData>) => get(data, [index, 'key'], index);
 
-    handleRowClick = (rowKey: RowKey<any>, e: React.MouseEvent, expand: boolean) => {
+    handleRowClick = (rowKey: RowKey<any>, e: React.MouseEvent<HTMLElement>, expand: boolean) => {
         const { handleRowExpanded } = this.context;
         handleRowExpanded(!expand, rowKey, e);
     };

packages/semi-ui/table/Table.tsx

@@ -353,6 +353,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
     scrollPosition!: BodyScrollPosition;
     position!: BodyScrollPosition;
     foundation: TableFoundation<RecordType>;
+    context: TableContextProps;
     constructor(props: NormalTableProps<RecordType>, context: TableContextProps) {
         super(props);
         this.foundation = new TableFoundation<RecordType>(this.adapter);
@@ -789,7 +790,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         }
     };
 
-    renderSelection = (record: RecordType = {} as RecordType, inHeader = false): React.ReactNode => {
+    renderSelection = (record = {} as any, inHeader = false): React.ReactNode => {
         const { rowSelection, disabledRowKeysSet } = this.state;
 
         if (rowSelection && typeof rowSelection === 'object') {
@@ -1005,7 +1006,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         );
     };
 
-    renderTitle = (props: { title?: ReactNode; prefixCls?: string; dataSource?: any[] } = {}) => {
+    renderTitle = (props: { title?: ReactNode | ((dataSource?: RecordType[]) => ReactNode); prefixCls?: string; dataSource?: any[] } = {}) => {
         let { title } = props;
         const { prefixCls, dataSource } = props;
 
@@ -1038,7 +1039,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
         );
     };
 
-    renderFooter = (props: { footer?: ReactNode; prefixCls?: string; dataSource?: RecordType[] } = {}) => {
+    renderFooter = (props: { footer?: ReactNode | ((dataSource?: RecordType[]) => ReactNode); prefixCls?: string; dataSource?: RecordType[] } = {}) => {
         let { footer } = props;
         const { prefixCls, dataSource } = props;
 

packages/semi-ui/table/TableCell.tsx

@@ -10,9 +10,9 @@ import TableCellFoundation, { TableCellAdapter } from '@douyinfe/semi-foundation
 import { isSelectionColumn, isExpandedColumn } from '@douyinfe/semi-foundation/table/utils';
 
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
-import Context from './table-context';
+import Context, { TableContextProps } from './table-context';
 import { amendTableWidth } from './utils';
-import { Align, ColumnProps } from './interface';
+import { Align, ColumnProps, ExpandIcon } from './interface';
 
 export interface TableCellProps extends BaseProps {
     record?: Record<string, any>;
@@ -30,7 +30,7 @@ export interface TableCellProps extends BaseProps {
       * When hideExpandedColumn is true or isSection is true
       * expandIcon is a custom icon or true
       */
-    expandIcon?: ReactNode | boolean;
+    expandIcon?: ExpandIcon;
     renderExpandIcon?: (record: Record<string, any>) => ReactNode;
     hideExpandedColumn?: boolean;
     component?: any;
@@ -100,6 +100,8 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
     }
 
     ref: React.MutableRefObject<any>;
+    context: TableContextProps;
+
     constructor(props: TableCellProps) {
         super(props);
         this.ref = createRef();
@@ -242,7 +244,7 @@ export default class TableCell extends BaseComponent<TableCellProps, Record<stri
         ) : null;
 
         // column.render
-        const realExpandIcon = typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon;
+        const realExpandIcon = (typeof renderExpandIcon === 'function' ? renderExpandIcon(record) : expandIcon) as React.ReactNode;
         if (render) {
             const renderOptions = {
                 expandIcon: realExpandIcon,

packages/semi-ui/table/TableHeaderRow.tsx

@@ -14,7 +14,7 @@ import {
     sliceColumnsByLevel
 } from '@douyinfe/semi-foundation/table/utils';
 import BaseComponent from '../_base/baseComponent';
-import TableContext from './table-context';
+import TableContext, { TableContextProps } from './table-context';
 import { TableComponents, OnHeaderRow, Fixed } from './interface';
 
 export interface TableHeaderRowProps {
@@ -64,6 +64,8 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
     }
 
     headerNode: HTMLElement;
+    context: TableContextProps;
+    
     constructor(props: TableHeaderRowProps) {
         super(props);
         this.headerNode = null;

packages/semi-ui/table/table-context.ts

@@ -1,20 +1,24 @@
 /* eslint-disable max-len */
 import React from 'react';
 import { noop } from 'lodash';
-import { ColumnProps, GetVirtualizedListRef } from './interface';
+import { ColumnProps, GetVirtualizedListRef, RowKey } from './interface';
+import {
+    BaseRowKeyType,
+    BaseHeadWidth,
+} from '@douyinfe/semi-foundation/table/foundation';
 
 export interface TableContextProps {
     children?: React.ReactNode;
     anyColumnFixed?: boolean;
     flattenedColumns?: ColumnProps[];
-    tableWidth?: number[];
-    headWidths?: number[];
-    setHeadWidths?: (headWidth?: number[], index?: number) => void;
+    tableWidth?: number;
+    headWidths?: BaseHeadWidth[][];
+    setHeadWidths?: (headWidth?: BaseHeadWidth[], index?: number) => void;
     getHeadWidths?: (index?: number) => number[];
     getCellWidths?: (flattenColumns: ColumnProps[], flattenedWidths?: number[], ignoreScrollBarKey?: boolean) => number[];
-    handleRowExpanded?: (expanded: boolean, realKey: string, domEvent: React.MouseEvent<HTMLElement>) => void;
+    handleRowExpanded?: (expanded: boolean, realKey: RowKey<any>, domEvent: React.MouseEvent<HTMLElement>) => void;
     renderExpandIcon?: (record: Record<string, any>, isNested?: boolean, groupKey?: string | number) => React.ReactNode;
-    renderSelection?: (record: Record<string, any>, isHeader?: boolean) => React.ReactNode;
+    renderSelection?: (record?: Record<string, any>, isHeader?: boolean) => React.ReactNode;
     getVirtualizedListRef?: GetVirtualizedListRef;
     setBodyHasScrollbar?: (bodyHasScrollBar: boolean) => void;
 }

packages/semi-ui/tabs/TabPane.tsx

@@ -4,6 +4,7 @@ import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/tabs/constants';
 import getDataAttr from '@douyinfe/semi-foundation/utils/getDataAttr';
 import TabsContext from './tabs-context';
+import { TabContextValue } from './interface';
 import TabPaneTransition from './TabPaneTransition';
 import { PlainTab, TabPaneProps } from './interface';
 
@@ -27,6 +28,7 @@ class TabPane extends PureComponent<TabPaneProps> {
     ref = createRef<HTMLDivElement>();
     isAnimating: boolean;
     _active: boolean;
+    context: TabContextValue;
 
     componentDidMount(): void {
         this.lastActiveKey = this.context.activeKey;

packages/semi-ui/tabs/index.tsx

@@ -119,9 +119,9 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
                 }
                 if (panes.findIndex(p => p.itemKey === activeKey) === -1){
                     if (panes.length>0){
-                        this.setState({activeKey: panes[0].itemKey});
+                        this.setState({ activeKey: panes[0].itemKey });
                     } else {
-                        this.setState({activeKey: ''});
+                        this.setState({ activeKey: '' });
                     }
                 }
                 

packages/semi-ui/tabs/interface.ts

@@ -1,4 +1,4 @@
-import { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
+import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
 
 export type TabType = 'line' | 'card' | 'button';
@@ -57,6 +57,7 @@ export interface TabBarProps {
 
 export interface TabPaneProps {
     className?: string;
+    children?: React.ReactNode | undefined;
     disabled?: boolean;
     icon?: ReactNode;
     itemKey?: string;

packages/semi-ui/tag/group.tsx

@@ -45,7 +45,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         avatarShape: PropTypes.oneOf(avatarShapeSet),
     };
 
-    renderNTag(n: number, restTags: (Tag | React.ReactNode)[]) {
+    renderNTag(n: number, restTags: React.ReactNode) {
         const { size, showPopover, popoverProps } = this.props;
         let nTag = (
             <Tag
@@ -84,7 +84,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         let renderTags: (Tag | React.ReactNode)[] = tags;
 
         const normalTags: (Tag | React.ReactNode)[] = tags.slice(0, maxTagCount);
-        const restTags = tags.slice(maxTagCount);
+        const restTags = tags.slice(maxTagCount) as  React.ReactNode;
         let nTag = null;
         if (n > 0) {
             nTag = this.renderNTag(n, restTags);
@@ -96,9 +96,9 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
 
     renderAllTags() {
         const { tagList, size, mode, avatarShape } = this.props;
-        const renderTags: (Tag | React.ReactNode)[] = tagList.map((tag, index): (Tag | React.ReactNode) => {
+        const renderTags = tagList.map((tag, index): (Tag | React.ReactNode) => {
             if (mode === 'custom') {
-                return tag;
+                return tag as React.ReactNode;
             }
             if (!(tag as TagProps).size) {
                 (tag as TagProps).size = size;
@@ -122,7 +122,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         }, className);
 
         const tags = this.renderAllTags();
-        const tagContents = typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags);
+        const tagContents = (typeof maxTagCount === 'undefined' ? tags : this.renderMergeTags(tags)) as React.ReactNode;
 
         return (
             <div style={style} className={groupCls}>

packages/semi-ui/timePicker/TimePicker.tsx

@@ -323,7 +323,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
                 index,
                 isNullOrUndefined(panelHeader) ? get(defaultHeaderMap, index, null) : panelHeader
             );
-            panelProps.panelFooter = get(panels, index, panelFooter);
+            panelProps.panelFooter = get(panels, index, panelFooter) as React.ReactNode;
         }
 
         return panelProps;

packages/semi-ui/timeline/index.tsx

@@ -17,6 +17,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
+    children?: React.ReactNode | undefined;
 }
 
 const prefixCls = cssClasses.PREFIX;

packages/semi-ui/timeline/item.tsx

@@ -7,6 +7,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
+    children?: React.ReactNode | undefined;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

packages/semi-ui/toast/ToastTransition.tsx

@@ -6,7 +6,7 @@ import React, { CSSProperties } from 'react';
 
 export interface ToastTransitionProps{
     motion?: Motion<ToastTransitionProps>;
-    children?: React.ReactChildren | React.JSXElementConstructor<any>;
+    children?: React.ReactNode | ((TransitionProps: any) => any)
 }
 
 

packages/semi-ui/toast/toast.tsx

@@ -2,7 +2,7 @@
 import React, { CSSProperties } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import ToastFoundation, { ToastAdapter, ToastState, ToastProps } from '@douyinfe/semi-foundation/toast/toastFoundation';
 import { numbers, cssClasses, strings } from '@douyinfe/semi-foundation/toast/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -52,6 +52,8 @@ class Toast extends BaseComponent<ToastReactProps, ToastState> {
         this.foundation = new ToastFoundation(this.adapter);
     }
 
+    context: ContextValue;
+
     get adapter(): ToastAdapter {
         return {
             ...super.adapter,

packages/semi-ui/tooltip/index.tsx

@@ -19,7 +19,7 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
 import { getActiveElement, getFocusableElements, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
 import TriangleArrowVertical from './TriangleArrowVertical';
 import TooltipTransition from './TooltipStyledTransition';
@@ -173,6 +173,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     getPopupContainer: () => HTMLElement;
     containerPosition: string;
     foundation: TooltipFoundation;
+    context: ContextValue;
 
     constructor(props: TooltipProps) {
         super(props);

packages/semi-ui/transfer/index.tsx

@@ -558,18 +558,20 @@ class Transfer extends BaseComponent<TransferProps, TransferState> {
     renderRightSortableList(selectedData: Array<ResolvedDataItem>) {
         // when choose some items && draggable is true
         const SortableItem = SortableElement((
-            (item: ResolvedDataItem) => this.renderRightItem(item)) as React.SFC<ResolvedDataItem>
+            (item: ResolvedDataItem) => this.renderRightItem(item)) as React.FC<ResolvedDataItem>
         );
         const SortableList = SortableContainer(({ items }: { items: Array<ResolvedDataItem> }) => (
             <div className={`${prefixcls}-right-list`} role="list" aria-label="Selected list">
                 {items.map((item, index: number) => (
                     // sortableElement will take over the property 'key', so use another '_optionKey' to pass
+                    // @ts-ignore skip SortableItem type check
                     <SortableItem key={item.label} index={index} {...item} _optionKey={item.key} />
                 ))}
             </div>
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
         ), { distance: 10 });
+        // @ts-ignore skip SortableItem type check
         const sortList = <SortableList useDragHandle onSortEnd={this.onSortEnd} items={selectedData} />;
         return sortList;
     }

packages/semi-ui/tree/index.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable max-lines-per-function */
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, KeyboardEvent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import ConfigContext from '../configProvider/context';
+import ConfigContext, { ContextValue } from '../configProvider/context';
 import TreeFoundation, { TreeAdapter } from '@douyinfe/semi-foundation/tree/foundation';
 import {
     convertDataToEntities,
@@ -143,6 +143,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
     dragNode: any;
     onNodeClick: any;
     onMotionEnd: any;
+    context: ContextValue;
 
     constructor(props: TreeProps) {
         super(props);
@@ -545,7 +546,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         }
     };
 
-    onNodeSelect = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeSelect = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
@@ -558,11 +559,11 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         })
     );
 
-    onNodeCheck = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeCheck = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeSelect(e, treeNode);
     };
 
-    onNodeExpand = (e: MouseEvent, treeNode: TreeNodeProps) => {
+    onNodeExpand = (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeExpand(e, treeNode);
     };
 
@@ -574,27 +575,27 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.foundation.handleNodeDoubleClick(e, treeNode);
     };
 
-    onNodeDragStart = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragStart = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragStart(e, treeNode);
     };
 
-    onNodeDragEnter = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragEnter = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragEnter(e, treeNode, this.dragNode);
     };
 
-    onNodeDragOver = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragOver = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragOver(e, treeNode, this.dragNode);
     };
 
-    onNodeDragLeave = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragLeave = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragLeave(e, treeNode);
     };
 
-    onNodeDragEnd = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDragEnd = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDragEnd(e, treeNode);
     };
 
-    onNodeDrop = (e: React.DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => {
+    onNodeDrop = (e: React.DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => {
         this.foundation.handleNodeDrop(e, treeNode, this.dragNode);
     };
 

packages/semi-ui/tree/treeContext.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, MouseEvent, DragEvent } from 'react';
+import React, { ReactNode, MouseEvent, DragEvent, KeyboardEvent } from 'react';
 import { Virtualize, ExpandAction } from '@douyinfe/semi-foundation/tree/foundation';
 import {
     TreeNodeData,
@@ -17,18 +17,18 @@ export interface TreeContextValue {
     filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string) => void);
     keyEntities?: KeyEntities;
     onNodeClick?: any;
-    onNodeExpand?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeSelect?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeCheck?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeExpand?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeSelect?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeCheck?: (e: MouseEvent | KeyboardEvent, treeNode: TreeNodeProps) => void;
     onNodeRightClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
     onNodeDoubleClick?: (e: MouseEvent, treeNode: TreeNodeProps) => void;
     renderTreeNode?: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
-    onNodeDragStart?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragEnter?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragOver?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragLeave?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDragEnd?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
-    onNodeDrop?: (e: DragEvent<HTMLDivElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragStart?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnter?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragOver?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragLeave?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDragEnd?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
+    onNodeDrop?: (e: DragEvent<HTMLLIElement>, treeNode: TreeNodeProps) => void;
     expandAction?: ExpandAction;
     directory?: boolean;
     multiple?: boolean;