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

package/lib/es/treeSelect/index.d.ts

@@ -4,6 +4,7 @@ import { Size, BasicTriggerRenderProps, BasicTreeSelectProps, BasicTreeSelectInn
 import '@douyinfe/semi-foundation/lib/es/tree/tree.css';
 import '@douyinfe/semi-foundation/lib/es/treeSelect/treeSelect.css';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { ContextValue } from '../configProvider/context';
 import Input, { InputProps } from '../input/index';
 import TagInput from '../tagInput';
 import { TreeProps, TreeState, FlattenNode, TreeNodeData, TreeNodeProps } from '../tree/interface';
@@ -89,7 +90,7 @@ export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, Override
     prevProps: TreeSelectProps;
 }
 declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
-    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static contextType: React.Context<ContextValue>;
     static propTypes: {
         'aria-describedby': PropTypes.Requireable<string>;
         'aria-errormessage': PropTypes.Requireable<string>;
@@ -182,6 +183,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     onNodeDoubleClick: any;
     onMotionEnd: any;
     treeSelectID: string;
+    context: ContextValue;
     constructor(props: TreeSelectProps);
     static getDerivedStateFromProps(props: TreeSelectProps, prevState: TreeSelectState): Partial<TreeSelectState>;
     get adapter(): TreeSelectAdapter<TreeSelectProps, TreeSelectState>;
@@ -214,14 +216,14 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderArrow: () => JSX.Element;
     renderClearBtn: () => JSX.Element;
     renderSelection: () => JSX.Element;
-    renderTagItem: (key: string, idx: number) => React.ReactNode;
+    renderTagItem: (key: string, idx: number) => string | number | boolean | React.ReactFragment | JSX.Element;
     renderTagInput: () => JSX.Element;
     renderInput: () => JSX.Element;
     renderEmpty: () => JSX.Element;
     onNodeLoad: (data: TreeNodeData) => Promise<unknown>;
-    onNodeSelect: (e: React.MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeCheck: (e: React.MouseEvent, treeNode: TreeNodeProps) => void;
-    onNodeExpand: (e: React.MouseEvent, treeNode: TreeNodeProps) => void;
+    onNodeSelect: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeCheck: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
+    onNodeExpand: (e: React.MouseEvent | React.KeyboardEvent, treeNode: TreeNodeProps) => void;
     getTreeNodeRequiredProps: () => {
         expandedKeys: Set<string>;
         selectedKeys: string[];

package/lib/es/typography/copyable.d.ts

@@ -37,7 +37,7 @@ export declare class Copyable extends React.PureComponent<CopyableProps, Copyabl
     copy: (e: React.MouseEvent) => void;
     setCopied: (item: string, timer: number) => void;
     resetCopied: () => void;
-    renderSuccessTip: () => React.ReactNode;
+    renderSuccessTip: () => string | number | boolean | React.ReactFragment | JSX.Element;
     render(): JSX.Element;
 }
 export default Copyable;

package/lib/es/upload/index.d.ts

@@ -14,7 +14,7 @@ export interface UploadProps {
     beforeUpload?: (object: BeforeUploadProps) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
     beforeClear?: (fileList: Array<FileItem>) => boolean | Promise<boolean>;
     beforeRemove?: (file: FileItem, fileList: Array<FileItem>) => boolean | Promise<boolean>;
-    capture?: boolean | string | undefined;
+    capture?: boolean | 'user' | 'environment' | undefined;
     children?: ReactNode;
     className?: string;
     customRequest?: (object: customRequestArgs) => void;
@@ -190,7 +190,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     onDragOver: (e: DragEvent<HTMLDivElement>) => void;
     onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
     onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
-    renderAddContent: () => React.ReactNode;
+    renderAddContent: () => string | number | boolean | React.ReactFragment | JSX.Element;
     renderDragArea: () => ReactNode;
     render(): ReactNode;
 }

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

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

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

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

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

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

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/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.0-beta.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.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.9.0-beta.1",
+        "@douyinfe/semi-foundation": "2.9.0-beta.1",
+        "@douyinfe/semi-icons": "2.9.0-beta.1",
+        "@douyinfe/semi-illustrations": "2.9.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.9.0-beta.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": "b246f204d2f33e5de4155b5d0377eace25b6456f",
     "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.0-beta.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/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);
     };