@douyinfe/semi-ui 2.22.0-alpha.0 → 2.22.0-beta.1

package/lib/es/select/index.js

@@ -46,6 +46,56 @@ class Select extends BaseComponent {
 
     this.handleInputChange = value => this.foundation.handleInputChange(value);
 
+    this.getTagItem = (item, i, renderSelectedItem) => {
+      const {
+        size,
+        disabled: selectDisabled
+      } = this.props;
+      const label = item[0];
+      const {
+        value
+      } = item[1];
+      const disabled = item[1].disabled || selectDisabled;
+
+      const onClose = (tagContent, e) => {
+        if (e && typeof e.preventDefault === 'function') {
+          e.preventDefault(); // make sure that tag will not hidden immediately in controlled mode
+        }
+
+        this.foundation.removeTag({
+          label,
+          value
+        });
+      };
+
+      const {
+        content,
+        isRenderInTag
+      } = renderSelectedItem(item[1], {
+        index: i,
+        disabled,
+        onClose
+      });
+      const basic = {
+        disabled,
+        closable: !disabled,
+        onClose
+      };
+
+      if (isRenderInTag) {
+        return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
+          color: "white",
+          size: size || 'large',
+          key: value,
+          tabIndex: -1
+        }), content);
+      } else {
+        return /*#__PURE__*/React.createElement(Fragment, {
+          key: value
+        }, content);
+      }
+    };
+
     this.state = {
       isOpen: false,
       isFocus: false,
@@ -59,7 +109,8 @@ class Select extends BaseComponent {
       keyboardEventSet: {},
       optionGroups: [],
       isHovering: false,
-      isFocusInContainer: false
+      isFocusInContainer: false,
+      isFullTags: false
     };
     /* Generate random string */
 
@@ -693,14 +744,15 @@ class Select extends BaseComponent {
       renderSelectedItem
     } = this.props;
     const {
+      showRestTagsPopover,
+      restTagsPopoverProps,
       placeholder,
-      maxTagCount,
-      size
+      maxTagCount
     } = this.props;
     const {
-      inputValue
+      inputValue,
+      isFullTags
     } = this.state;
-    const selectDisabled = this.props.disabled;
     const renderTags = [];
     const selectedItems = [...selections];
 
@@ -711,53 +763,57 @@ class Select extends BaseComponent {
       });
     }
 
-    const mapItems = maxTagCount ? selectedItems.slice(0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
-
-    const tags = mapItems.map((item, i) => {
-      const label = item[0];
-      const {
-        value
-      } = item[1];
-      const disabled = item[1].disabled || selectDisabled;
+    let mapItems = [];
+    let tags = [];
+    let tagContent;
 
-      const onClose = (tagContent, e) => {
-        if (e && typeof e.preventDefault === 'function') {
-          e.preventDefault(); // make sure that tag will not hidden immediately in controlled mode
-        }
-
-        this.foundation.removeTag({
-          label,
-          value
-        });
-      };
-
-      const {
-        content,
-        isRenderInTag
-      } = renderSelectedItem(item[1], {
-        index: i,
-        disabled,
-        onClose
+    if (!_isNumber(maxTagCount)) {
+      // maxTagCount is not set, all tags are displayed
+      mapItems = selectedItems;
+      tags = mapItems.map((item, i) => {
+        return this.getTagItem(item, i, renderSelectedItem);
       });
-      const basic = {
-        disabled,
-        closable: !disabled,
-        onClose
-      };
-
-      if (isRenderInTag) {
-        return /*#__PURE__*/React.createElement(Tag, Object.assign({}, basic, {
-          color: "white",
-          size: size || 'large',
-          key: value,
-          tabIndex: -1
-        }), content);
+      tagContent = tags;
+    } else {
+      // maxTagCount is set
+      if (showRestTagsPopover) {
+        // showRestTagsPopover = true，
+        mapItems = isFullTags ? selectedItems : selectedItems.slice(0, maxTagCount);
+        tags = mapItems.map((item, i) => {
+          return this.getTagItem(item, i, renderSelectedItem);
+        });
+        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
+        tagContent = /*#__PURE__*/React.createElement(TagGroup, {
+          tagList: tags,
+          maxTagCount: n,
+          restCount: isFullTags ? undefined : selectedItems.length - maxTagCount,
+          size: "large",
+          mode: "custom",
+          showPopover: showRestTagsPopover,
+          popoverProps: restTagsPopoverProps,
+          onPlusNMouseEnter: () => {
+            this.foundation.updateIsFullTags();
+          }
+        });
       } else {
-        return /*#__PURE__*/React.createElement(Fragment, {
-          key: value
-        }, content);
+        // If maxTagCount is set, showRestTagsPopover is false/undefined, 
+        // then there is no popover when hovering, no extra Tags are displayed, 
+        // only the tags and restCount displayed in the trigger need to be passed in
+        mapItems = selectedItems.slice(0, maxTagCount);
+        const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
+        tags = mapItems.map((item, i) => {
+          return this.getTagItem(item, i, renderSelectedItem);
+        });
+        tagContent = /*#__PURE__*/React.createElement(TagGroup, {
+          tagList: tags,
+          maxTagCount: n,
+          restCount: selectedItems.length - maxTagCount,
+          size: "large",
+          mode: "custom"
+        });
       }
-    });
+    }
+
     const contentWrapperCls = cls({
       ["".concat(prefixcls, "-content-wrapper")]: true,
       ["".concat(prefixcls, "-content-wrapper-one-line")]: maxTagCount,
@@ -772,16 +828,6 @@ class Select extends BaseComponent {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/React.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
-    const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
-
-    const tagContent = NotOneLine ? tags : /*#__PURE__*/React.createElement(TagGroup, {
-      tagList: tags,
-      maxTagCount: n,
-      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
-      size: "large",
-      mode: "custom"
-    });
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: contentWrapperCls
     }, tags && tags.length ? tagContent : placeholderText, !filterable ? null : this.renderInput()));
@@ -1085,7 +1131,7 @@ Select.propTypes = {
   triggerRender: PropTypes.func,
   stopPropagation: PropTypes.bool,
   // motion doesn't need to be exposed
-  motion: PropTypes.oneOfType([PropTypes.func, PropTypes.bool, PropTypes.object]),
+  motion: PropTypes.bool,
   onChangeWithObject: PropTypes.bool,
   suffix: PropTypes.node,
   prefix: PropTypes.node,
@@ -1155,7 +1201,9 @@ Select.defaultProps = {
   autoClearSearchValue: true,
   arrowIcon: /*#__PURE__*/React.createElement(IconChevronDown, {
     "aria-label": ''
-  }) // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
+  }),
+  showRestTagsPopover: false,
+  restTagsPopoverProps: {} // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
   // renderSelectedItem: (optionNode) => optionNode.label,
   // The default creator rendering is related to i18, so it is not declared here
   // renderCreateItem: (input) => input

package/lib/es/select/option.d.ts

@@ -25,7 +25,7 @@ declare class Option extends PureComponent<OptionProps> {
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<string | number>;
+        value: PropTypes.Requireable<NonNullable<string | number>>;
         selected: PropTypes.Requireable<boolean>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         empty: PropTypes.Requireable<boolean>;

package/lib/es/select/optionGroup.d.ts

@@ -10,7 +10,7 @@ export interface OptionGroupProps {
 declare class OptionGroup extends BaseComponent<OptionGroupProps> {
     static isSelectOptionGroup: boolean;
     static propTypes: {
-        children: PropTypes.Requireable<any[] | PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
         label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;

package/lib/es/sideSheet/SideSheetContent.d.ts

@@ -5,6 +5,7 @@ export interface SideSheetContentProps {
     mask?: boolean;
     maskStyle?: CSSProperties;
     maskClosable?: boolean;
+    maskClassName?: string;
     title?: React.ReactNode;
     closable?: boolean;
     headerStyle?: CSSProperties;
@@ -13,9 +14,16 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
+    dialogClassName?: string;
     children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
+    maskExtraProps?: {
+        [key: string]: any;
+    };
+    wrapperExtraProps?: {
+        [key: string]: any;
+    };
 }
 export default class SideSheetContent extends React.PureComponent<SideSheetContentProps> {
     static propTypes: {

package/lib/es/sideSheet/SideSheetContent.js

@@ -46,6 +46,8 @@ export default class SideSheetContent extends React.PureComponent {
   }
 
   getMaskElement() {
+    var _a;
+
     const {
       mask,
       maskStyle,
@@ -53,13 +55,13 @@ export default class SideSheetContent extends React.PureComponent {
     } = this.props;
 
     if (mask) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", Object.assign({
         "aria-hidden": true,
         key: "mask",
-        className: "".concat(prefixCls, "-mask"),
+        className: cls("".concat(prefixCls, "-mask"), (_a = this.props.maskClassName) !== null && _a !== void 0 ? _a : ""),
         style: maskStyle,
         onClick: maskClosable ? this.onMaskClick : null
-      });
+      }, this.props.maskExtraProps));
     }
 
     return null;
@@ -101,6 +103,8 @@ export default class SideSheetContent extends React.PureComponent {
   }
 
   getDialogElement() {
+    var _a;
+
     const props = __rest(this.props, []);
 
     const style = {};
@@ -118,14 +122,14 @@ export default class SideSheetContent extends React.PureComponent {
     }
 
     const header = this.renderHeader();
-    const dialogElement = /*#__PURE__*/React.createElement("div", {
+    const dialogElement = /*#__PURE__*/React.createElement("div", Object.assign({
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: "".concat(prefixCls, "-inner ").concat(prefixCls, "-inner-wrap"),
+      className: cls("".concat(prefixCls, "-inner"), "".concat(prefixCls, "-inner-wrap"), (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
       // onMouseDown={this.onDialogMouseDown}
       style: Object.assign(Object.assign({}, props.style), style)
-    }, /*#__PURE__*/React.createElement("div", {
+    }, this.props.wrapperExtraProps), /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, header, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-body"),

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

@@ -5,7 +5,6 @@ import { ContextValue } from '../configProvider/context';
 import { SideSheetAdapter, SideSheetProps, SideSheetState } from '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheet.css';
 export type { SideSheetContentProps } from './SideSheetContent';
-export type { SideSheetTransitionProps } from './SideSheetTransition';
 export interface SideSheetReactProps extends SideSheetProps {
     bodyStyle?: CSSProperties;
     headerStyle?: CSSProperties;
@@ -27,18 +26,18 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
         closable: PropTypes.Requireable<boolean>;
         disableScroll: PropTypes.Requireable<boolean>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
-        height: PropTypes.Requireable<string | number>;
+        height: PropTypes.Requireable<NonNullable<string | number>>;
         mask: PropTypes.Requireable<boolean>;
         maskClosable: PropTypes.Requireable<boolean>;
         maskStyle: PropTypes.Requireable<object>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         placement: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         visible: PropTypes.Requireable<boolean>;
-        width: PropTypes.Requireable<string | number>;
+        width: PropTypes.Requireable<NonNullable<string | number>>;
         zIndex: PropTypes.Requireable<number>;
         afterVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         closeOnEsc: PropTypes.Requireable<boolean>;
@@ -57,6 +56,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
     componentWillUnmount(): void;
     handleCancel: (e: React.MouseEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
+    updateState: () => void;
     renderContent(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/sideSheet/index.js

@@ -20,10 +20,10 @@ import Portal from '../_portal';
 import cls from 'classnames';
 import ConfigContext from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/sideSheet/constants';
-import SideSheetTransition from './SideSheetTransition';
 import SideSheetContent from './SideSheetContent';
 import SideSheetFoundation from '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheetFoundation';
 import '@douyinfe/semi-foundation/lib/es/sideSheet/sideSheet.css';
+import CSSAnimation from "../_cssAnimation";
 const prefixCls = cssClasses.PREFIX;
 const defaultWidthList = strings.WIDTH;
 const defaultHeight = strings.HEIGHT;
@@ -39,11 +39,17 @@ export default class SideSheet extends BaseComponent {
       this.foundation.handleKeyDown(e);
     };
 
+    this.updateState = () => {
+      const shouldRender = this.props.visible || this.props.keepDOM;
+      this.foundation.setShouldRender(shouldRender);
+      this.foundation.toggleDisplayNone(!this.props.visible);
+    };
+
     this.state = {
-      hidden: !this.props.visible
+      displayNone: !this.props.visible,
+      shouldRender: this.props.visible
     };
     this.foundation = new SideSheetFoundation(this.adapter);
-    this._active = false;
   }
 
   get adapter() {
@@ -82,10 +88,17 @@ export default class SideSheet extends BaseComponent {
           window.removeEventListener('keydown', this.handleKeyDown);
         }
       },
-      toggleHidden: hidden => {
-        if (hidden !== this.state.hidden) {
+      toggleDisplayNone: displayNone => {
+        if (displayNone !== this.state.displayNone) {
+          this.setState({
+            displayNone: displayNone
+          });
+        }
+      },
+      setShouldRender: shouldRender => {
+        if (shouldRender !== this.state.shouldRender) {
           this.setState({
-            hidden
+            shouldRender
           });
         }
       }
@@ -95,12 +108,12 @@ export default class SideSheet extends BaseComponent {
   static getDerivedStateFromProps(props, prevState) {
     const newState = {};
 
-    if (props.visible && prevState.hidden) {
-      newState.hidden = false;
+    if (props.visible && prevState.displayNone) {
+      newState.displayNone = false;
     }
 
-    if (!props.visible && !props.motion && !prevState.hidden) {
-      newState.hidden = true;
+    if (!props.visible && !props.motion && !prevState.displayNone) {
+      newState.displayNone = true;
     }
 
     return newState;
@@ -109,7 +122,6 @@ export default class SideSheet extends BaseComponent {
   componentDidMount() {
     if (this.props.visible) {
       this.foundation.beforeShow();
-      this._active = this._active || this.props.visible;
     }
   }
 
@@ -123,6 +135,16 @@ export default class SideSheet extends BaseComponent {
     if (prevProps.visible && !this.props.visible) {
       this.foundation.afterHide();
     }
+
+    const shouldRender = this.props.visible || this.props.keepDOM;
+
+    if (shouldRender === true && this.state.shouldRender === false) {
+      this.foundation.setShouldRender(true);
+    }
+
+    if (prevState.displayNone !== this.state.displayNone) {
+      this.foundation.onVisibleChange(!this.state.displayNone);
+    }
   }
 
   componentWillUnmount() {
@@ -162,7 +184,7 @@ export default class SideSheet extends BaseComponent {
       ["".concat(prefixCls, "-popup")]: getPopupContainer,
       ["".concat(prefixCls, "-horizontal")]: isHorizontal,
       ["".concat(prefixCls, "-rtl")]: direction === 'rtl',
-      ["".concat(prefixCls, "-hidden")]: keepDOM && this.state.hidden
+      ["".concat(prefixCls, "-hidden")]: keepDOM && this.state.displayNone
     });
     const contentProps = Object.assign(Object.assign({}, props), {
       visible,
@@ -171,33 +193,41 @@ export default class SideSheet extends BaseComponent {
       width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
-    });
-    const mergedMotion = this.foundation.getMergedMotion();
-    this._active = this._active || visible;
-    const shouldRender = (visible || keepDOM) && this._active;
-
-    if (mergedMotion) {
-      return /*#__PURE__*/React.createElement(SideSheetTransition, {
-        placement: placement,
-        motion: mergedMotion,
-        controlled: keepDOM,
-        visible: visible
-      }, shouldRender ? transitionStyles => /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
-        style: Object.assign(Object.assign({}, transitionStyles), style),
-        maskStyle: Object.assign({
-          opacity: transitionStyles.opacity
-        }, maskStyle)
-      }), children) : null);
-    }
+    }); // Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
 
-    if (shouldRender) {
-      return /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
-        style: style,
-        maskStyle: maskStyle
-      }), children);
-    }
+    return /*#__PURE__*/React.createElement(CSSAnimation, {
+      motion: this.props.motion,
+      animationState: visible ? 'enter' : 'leave',
+      startClassName: visible ? "".concat(prefixCls, "-animation-mask_show") : "".concat(prefixCls, "-animation-mask_hide"),
+      onAnimationEnd: this.updateState
+    }, _ref => {
+      let {
+        animationClassName: maskAnimationClassName,
+        animationEventsNeedBind: maskAnimationEventsNeedBind
+      } = _ref;
+      return /*#__PURE__*/React.createElement(CSSAnimation, {
+        motion: this.props.motion,
+        animationState: visible ? 'enter' : 'leave',
+        startClassName: visible ? "".concat(prefixCls, "-animation-content_show_").concat(this.props.placement) : "".concat(prefixCls, "-animation-content_hide_").concat(this.props.placement),
+        onAnimationEnd: this.updateState
+        /* for no mask case*/
 
-    return null;
+      }, _ref2 => {
+        let {
+          animationClassName,
+          animationStyle,
+          animationEventsNeedBind
+        } = _ref2;
+        return this.state.shouldRender ? /*#__PURE__*/React.createElement(SideSheetContent, Object.assign({}, contentProps, {
+          maskExtraProps: maskAnimationEventsNeedBind,
+          wrapperExtraProps: animationEventsNeedBind,
+          dialogClassName: animationClassName,
+          maskClassName: maskAnimationClassName,
+          maskStyle: Object.assign({}, maskStyle),
+          style: Object.assign(Object.assign({}, animationStyle), style)
+        }), children) : /*#__PURE__*/React.createElement(React.Fragment, null);
+      });
+    });
   }
 
   render() {

package/lib/es/slider/index.js

@@ -456,8 +456,8 @@ export default class Slider extends BaseComponent {
       setOverallVars: (key, value) => {
         this[key] = value;
       },
-      getMinHandleEl: () => this.minHanleEl,
-      getMaxHandleEl: () => this.maxHanleEl,
+      getMinHandleEl: () => this.minHanleEl.current,
+      getMaxHandleEl: () => this.maxHanleEl.current,
       onHandleDown: e => {
         this._addEventListener(document.body, 'mousemove', this.foundation.onHandleMove, false);
 

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

@@ -17,7 +17,7 @@ declare class Space extends PureComponent<SpaceProps> {
         wrap: PropTypes.Requireable<boolean>;
         align: PropTypes.Requireable<string>;
         vertical: PropTypes.Requireable<boolean>;
-        spacing: PropTypes.Requireable<string | number | any[]>;
+        spacing: PropTypes.Requireable<NonNullable<string | number | any[]>>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;

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

@@ -55,6 +55,7 @@ declare class Spin extends BaseComponent<SpinProps, SpinState> {
         getCaches(): any;
         setCache(key: any, value: any): void;
         stopPropagation(e: any): void;
+        persistEvent: (event: any) => void;
     };
     componentWillUnmount(): void;
     renderSpin(): JSX.Element;

package/lib/es/spin/index.js

@@ -59,13 +59,10 @@ class Spin extends BaseComponent {
     const {
       loading
     } = this.state;
-    const spinIconCls = cls({
-      ["".concat(prefixCls, "-animate")]: loading
-    });
     return loading ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-wrapper")
     }, indicator ? /*#__PURE__*/React.createElement("div", {
-      className: spinIconCls,
+      className: "".concat(prefixCls, "-animate"),
       "x-semi-prop": "indicator"
     }, indicator) : /*#__PURE__*/React.createElement(SpinIcon, null), tip ? /*#__PURE__*/React.createElement("div", {
       "x-semi-prop": "tip"

package/lib/es/table/Body/BaseRow.d.ts

@@ -52,12 +52,12 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         columns: PropTypes.Validator<any[]>;
         components: PropTypes.Validator<object>;
         disabled: PropTypes.Requireable<boolean>;
-        expandIcon: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        expandIcon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         expandableRow: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
         expandedRow: PropTypes.Requireable<boolean>;
-        fixed: PropTypes.Requireable<string | boolean>;
-        height: PropTypes.Requireable<string | number>;
+        fixed: PropTypes.Requireable<NonNullable<string | boolean>>;
+        height: PropTypes.Requireable<NonNullable<string | number>>;
         hideExpandedColumn: PropTypes.Requireable<boolean>;
         hovered: PropTypes.Validator<boolean>;
         indent: PropTypes.Requireable<number>;
@@ -78,11 +78,11 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         renderExpandIcon: PropTypes.Requireable<(...args: any[]) => any>;
         replaceClassName: PropTypes.Requireable<string>;
         rowExpandable: PropTypes.Requireable<(...args: any[]) => any>;
-        rowKey: PropTypes.Validator<string | number>;
+        rowKey: PropTypes.Validator<NonNullable<NonNullable<string | number>>>;
         selected: PropTypes.Requireable<boolean>;
         store: PropTypes.Requireable<object>;
         style: PropTypes.Requireable<object>;
-        virtualized: PropTypes.Requireable<boolean | object>;
+        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
         visible: PropTypes.Validator<boolean>;
     };
     static defaultProps: {

package/lib/es/table/Body/ExpandedRow.d.ts

@@ -36,13 +36,13 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
         components: PropTypes.Requireable<object>;
         defaultExpandAllRows: PropTypes.Requireable<boolean>;
         defaultExpandedRowKeys: PropTypes.Requireable<any[]>;
-        expandIcon: PropTypes.Requireable<object | PropTypes.ReactNodeLike>;
+        expandIcon: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         expandRowByClick: PropTypes.Requireable<boolean>;
         expanded: PropTypes.Requireable<boolean>;
         expandedRowKeys: PropTypes.Requireable<any[]>;
         expandedRowRender: PropTypes.Requireable<(...args: any[]) => any>;
         indentSize: PropTypes.Requireable<number>;
-        index: PropTypes.Requireable<string | number>;
+        index: PropTypes.Requireable<NonNullable<string | number>>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;
         onExpandedRowsChange: PropTypes.Requireable<(...args: any[]) => any>;
         prefixCls: PropTypes.Requireable<string>;
@@ -50,7 +50,7 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
         renderExpandIcon: PropTypes.Requireable<(...args: any[]) => any>;
         store: PropTypes.Requireable<object>;
         style: PropTypes.Requireable<object>;
-        virtualized: PropTypes.Requireable<boolean | object>;
+        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
     };
     static defaultProps: {
         record: {};

package/lib/es/table/Body/SectionRow.d.ts

@@ -34,7 +34,7 @@ declare class SectionRow extends PureComponent<SectionRowProps> {
         index: PropTypes.Requireable<number>;
         columns: PropTypes.Requireable<any[]>;
         group: PropTypes.Validator<object>;
-        groupKey: PropTypes.Validator<string | number>;
+        groupKey: PropTypes.Validator<NonNullable<NonNullable<string | number>>>;
         data: PropTypes.Requireable<any[]>;
         renderGroupSection: PropTypes.Requireable<(...args: any[]) => any>;
         onGroupedRow: PropTypes.Requireable<(...args: any[]) => any>;
@@ -43,12 +43,12 @@ declare class SectionRow extends PureComponent<SectionRowProps> {
         expanded: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         onExpand: PropTypes.Requireable<(...args: any[]) => any>;
-        virtualized: PropTypes.Requireable<boolean | object>;
+        virtualized: PropTypes.Requireable<NonNullable<boolean | object>>;
         style: PropTypes.Requireable<object>;
         renderExpandIcon: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;
         store: PropTypes.Requireable<object>;
-        rowKey: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+        rowKey: PropTypes.Requireable<NonNullable<string | number | ((...args: any[]) => any)>>;
     };
     static defaultProps: {
         prefixCls: "semi-table";