@douyinfe/semi-ui 2.8.0-beta.0 → 2.8.1

package/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;
 }

package/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;

package/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,

package/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,

package/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,

package/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 } = {};

package/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);
     };

package/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;
 

package/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,

package/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;

package/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;
 }

package/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;

package/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: '' });
                     }
                 }
                 

package/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;

package/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}>

package/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;

package/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;

package/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;

package/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)
 }
 
 

package/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,

package/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);

package/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;
     }

package/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);
     };
 

package/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;

package/tree/treeNode.tsx

@@ -6,7 +6,7 @@ import isEnterPress from '@douyinfe/semi-foundation/utils/isEnterPress';
 import { debounce, isFunction, isString, get, isEmpty } from 'lodash';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
-import TreeContext from './treeContext';
+import TreeContext, { TreeContextValue } from './treeContext';
 import Spin from '../spin';
 import { TreeNodeProps, TreeNodeState } from './interface';
 
@@ -42,6 +42,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
 
     debounceSelect: any;
     refNode: HTMLElement;
+    context: TreeContextValue;
 
     constructor(props: TreeNodeProps) {
         super(props);
@@ -121,7 +122,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         }
     };
 
-    onDragStart = (e: React.DragEvent) => {
+    onDragStart = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragStart } = this.context;
         e.stopPropagation();
         onNodeDragStart(e, { ...this.props, nodeInstance: this.refNode });
@@ -135,33 +136,33 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         }
     };
 
-    onDragEnter = (e: React.DragEvent) => {
+    onDragEnter = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragEnter } = this.context;
         e.preventDefault();
         e.stopPropagation();
         onNodeDragEnter(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragOver = (e: React.DragEvent) => {
+    onDragOver = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragOver } = this.context;
         e.preventDefault();
         e.stopPropagation();
         onNodeDragOver(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragLeave = (e: React.DragEvent) => {
+    onDragLeave = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragLeave } = this.context;
         e.stopPropagation();
         onNodeDragLeave(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDragEnd = (e: React.DragEvent) => {
+    onDragEnd = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDragEnd } = this.context;
         e.stopPropagation();
         onNodeDragEnd(e, { ...this.props, nodeInstance: this.refNode });
     };
 
-    onDrop = (e: React.DragEvent) => {
+    onDrop = (e: React.DragEvent<HTMLLIElement>) => {
         const { onNodeDrop } = this.context;
         e.preventDefault();
         e.stopPropagation();
@@ -387,6 +388,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         if (renderFullLabel) {
             const customLabel = renderFullLabel({ ...labelProps });
             if (draggable) {
+                // @ts-ignore skip cloneElement type check
                 return React.cloneElement(customLabel, {
                     ref: this.setRef,
                     ...dragProps
@@ -396,6 +398,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
                     return customLabel;
                 } else {
                     // In virtualization, props.style will contain location information
+                    // @ts-ignore skip cloneElement type check
                     return React.cloneElement(customLabel, {
                         style: { ...get(customLabel, ['props', 'style']), ...style }
                     });