@douyinfe/semi-ui 2.9.0-beta.0 → 2.9.1

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

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

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

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

package/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: [],

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

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

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

package/overflowList/_story/overflowList.stories.js

@@ -352,5 +352,49 @@ const LargeData = () => {
   );
 };
 
+export const OverflowListWithSlide = () =>{
+   const [width, setWidth] = useState(100);
+    const renderOverflow = items => {
+        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
+    };
+    const renderItem = (item, ind) => {
+        return (
+            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
+                {item.icon}
+                {item.key}
+            </Tag>
+        );
+    };
+
+    const items = [
+        { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
+        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
+        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
+        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
+        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
+        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
+    ];
+
+    return (
+        <div>
+            <Slider step={1} value={width} onChange={value => setWidth(value)} />
+            <br />
+            <br />
+            <div style={{ width: `${width}%` }}>
+                <OverflowList
+                    items={items}
+                    // minVisibleItems={3}
+                    overflowRenderer={renderOverflow}
+                    visibleItemRenderer={renderItem}
+                />
+            </div>
+        </div>
+    );
+}
+
+OverflowListWithSlide.story = {
+  name: 'overflowList with slide',
+};
+
 // TODO large data will cause memory heap
 // stories.add('large amount of data', () => <LargeData />);

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.9.0-beta.0",
+    "version": "2.9.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.9.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.9.0-beta.0",
-        "@douyinfe/semi-foundation": "2.9.0-beta.0",
-        "@douyinfe/semi-icons": "2.9.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.9.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.9.0-beta.0",
+        "@douyinfe/semi-animation": "2.9.1",
+        "@douyinfe/semi-animation-react": "2.9.1",
+        "@douyinfe/semi-foundation": "2.9.1",
+        "@douyinfe/semi-icons": "2.9.1",
+        "@douyinfe/semi-illustrations": "2.9.1",
+        "@douyinfe/semi-theme-default": "2.9.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "acb1db546e6d3b2a7a40467d83d4b1e1b51e2b21",
+    "gitHead": "9593ab23b59b5a18305627ac402cfd4527072f9c",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.9.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.9.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

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

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

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

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

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

package/scrollList/_story/SingleWheelList/index.js

@@ -0,0 +1,72 @@
+import { ScrollList, ScrollItem, Button } from '@douyinfe/semi-ui';
+import React from 'react';
+
+class SingleScrollListDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectIndex3: -2,
+        };
+
+        this.minutes = new Array(60).fill(0).map((itm, index) => {
+            return {
+                value: index,
+                disabled: index % 2 === 1 ? true : false,
+            };
+        });
+        this.onSelectMinute = this.onSelectMinute.bind(this);
+        this.handleClose = this.handleClose.bind(this);
+        this.renderFooter = this.renderFooter.bind(this);
+    }
+
+
+    onSelectMinute(data) {
+        console.log('You have choose the minute for: ', data.value);
+        this.setState({
+            ['selectIndex' + data.type]: data.index,
+        });
+    }
+
+    handleClose() {
+        console.log('close');
+    }
+
+    renderFooter() {
+        return (
+            <Button size="small" type="primary" onClick={this.handleClose}>
+                Ok
+            </Button>
+        );
+    }
+
+    render() {
+        let list = this.list;
+        const scrollStyle = {
+            border: 'unset',
+            boxShadow: 'unset',
+        };
+        const commonProps = {
+            // mode: 'normal',
+            mode: 'wheel',
+            cycled: false,
+            motion: false,
+        };
+        return (
+            <div>
+                <ScrollList style={scrollStyle} header={'单个无限滚动列表'} footer={this.renderFooter()}>
+                    <ScrollItem
+                        {...commonProps}
+                        list={this.minutes}
+                        type={3}
+                        selectedIndex={this.state.selectIndex3}
+                        onSelect={this.onSelectMinute}
+                        aria-label="分钟"
+                        cycled
+                    />
+                </ScrollList>
+            </div>
+        );
+    }
+}
+
+export default SingleScrollListDemo;

package/scrollList/_story/scrolllist.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import WheelListDemo from './WheelList';
 import ScrollListDemo from './ScrollList';
+import SingleScrollListDemo from './SingleWheelList';
 
 
 export default {
@@ -24,3 +25,9 @@ export const _WheelListDemo = () => <WheelListDemo />;
 _WheelListDemo.story = {
   name: 'wheel list demo',
 };
+
+export const SingleScrollList = () => <SingleScrollListDemo />;
+
+SingleScrollList.story = {
+  name: 'single scroll list demo',
+};

package/scrollList/scrollItem.tsx

@@ -178,6 +178,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
 
     _cacheWrapperNode = (wrapper: Element) => this._cacheNode('wrapper', wrapper);
 
+    /* istanbul ignore next */
     _isFirst = (node: Element) => {
         const { list } = this;
 
@@ -191,6 +192,8 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         return false;
     };
 
+
+    /* istanbul ignore next */
     _isLast = (node: Element) => {
         const { list } = this;
 
@@ -326,7 +329,7 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         const { wrapper } = this;
         const wrapperHeight = wrapper.offsetHeight;
         const itemHeight = this.getItmHeight(node);
-        const targetTop = node.offsetTop - (wrapperHeight - itemHeight) / 2;
+        const targetTop =  (node.offsetTop || this.list.children.length * itemHeight / 2 )  - (wrapperHeight - itemHeight) / 2;
 
         this.scrollToPos(targetTop, duration);
     };

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

package/select/utils.tsx

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

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