@douyinfe/semi-ui 2.22.0-beta.0 → 2.22.0-beta.2

package/lib/es/navigation/SubNav.js

@@ -11,13 +11,13 @@ import cls from 'classnames';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
 import isNullOrUndefined from '@douyinfe/semi-foundation/lib/es/utils/isNullOrUndefined';
 import SubNavFoundation from '@douyinfe/semi-foundation/lib/es/navigation/subNavFoundation';
-import { strings, numbers } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
+import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/lib/es/navigation/constants';
 import { IconChevronDown, IconChevronUp, IconChevronRight } from '@douyinfe/semi-icons';
 import NavItem from './Item';
 import Dropdown from '../dropdown';
 import NavContext from './nav-context';
-import SubNavTransition from './SubNavTransition';
-import OpenIconTransition from './OpenIconTransition';
+import Collapsible from "../collapsible";
+import CSSAnimation from "../_cssAnimation";
 export default class SubNav extends BaseComponent {
   constructor(props) {
     super(props);
@@ -127,14 +127,19 @@ export default class SubNav extends BaseComponent {
       ["".concat(prefixCls, "-item-icon-info")]: !isToggleIcon
     });
     const isOpen = this.adapter.getIsOpen();
-    const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ?
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(OpenIconTransition, {
-      isOpen: isOpen
-    }, /*#__PURE__*/React.cloneElement(icon, {
-      size: iconSize
-    })) //@ts-ignore
+    const iconElem = /*#__PURE__*/React.isValidElement(icon) ? withTransition ? /*#__PURE__*/React.createElement(CSSAnimation, {
+      animationState: isOpen ? "enter" : "leave",
+      startClassName: "".concat(cssClasses.PREFIX, "-icon-rotate-").concat(isOpen ? "0" : "180")
+    }, _ref => {
+      let {
+        animationClassName
+      } = _ref;
+      // @ts-ignore
+      return /*#__PURE__*/React.cloneElement(icon, {
+        size: iconSize,
+        className: animationClassName
+      });
+    }) // @ts-ignore
     : /*#__PURE__*/React.cloneElement(icon, {
       size: iconSize
     }) : null;
@@ -161,6 +166,7 @@ export default class SubNav extends BaseComponent {
       subNavMotion,
       limitIndent
     } = this.context;
+    const isOpen = this.adapter.getIsOpen();
     const titleCls = cls("".concat(prefixCls, "-sub-title"), {
       ["".concat(prefixCls, "-sub-title-selected")]: this.adapter.getIsSelected(itemKey),
       ["".concat(prefixCls, "-sub-title-disabled")]: disabled
@@ -176,9 +182,13 @@ export default class SubNav extends BaseComponent {
       }
     } else if (mode === strings.MODE_HORIZONTAL) {
       if (isInSubNav) {
-        toggleIconType = /*#__PURE__*/React.createElement(IconChevronRight, null);
+        toggleIconType = /*#__PURE__*/React.createElement(IconChevronRight, {
+          "aria-hidden": true
+        });
       } else {
-        toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, null); // Horizontal mode does not require animation fix#1198
+        toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, {
+          "aria-hidden": true
+        }); // Horizontal mode does not require animation fix#1198
         // withTransition = true;
       }
     } else {
@@ -186,7 +196,9 @@ export default class SubNav extends BaseComponent {
         withTransition = true;
       }
 
-      toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, null);
+      toggleIconType = /*#__PURE__*/React.createElement(IconChevronDown, {
+        "aria-hidden": true
+      });
     }
 
     let placeholderIcons = null;
@@ -197,13 +209,16 @@ export default class SubNav extends BaseComponent {
       placeholderIcons = _times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
     }
 
+    const isIconChevronRightShow = !isCollapsed && isInSubNav && mode === strings.MODE_HORIZONTAL || isCollapsed && isInSubNav;
     const titleDiv = /*#__PURE__*/React.createElement("div", {
       role: "menuitem",
-      tabIndex: -1,
+      // to avoid nested horizontal navigation be focused
+      tabIndex: isIconChevronRightShow ? -1 : 0,
       ref: this.setTitleRef,
       className: titleCls,
       onClick: this.handleClick,
-      onKeyPress: this.handleKeyPress
+      onKeyPress: this.handleKeyPress,
+      "aria-expanded": isOpen ? 'true' : 'false'
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
     }, placeholderIcons, this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== strings.MODE_HORIZONTAL ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/React.createElement("span", {
@@ -229,14 +244,12 @@ export default class SubNav extends BaseComponent {
       ["".concat(prefixCls, "-sub-open")]: isOpen,
       ["".concat(prefixCls, "-sub-popover")]: isCollapsed || isHorizontal
     });
-    const ulWithMotion = /*#__PURE__*/React.createElement(SubNavTransition, {
+    const ulWithMotion = /*#__PURE__*/React.createElement(Collapsible, {
       motion: subNavMotion,
-      isCollapsed: isCollapsed,
-      maxHeight: maxHeight
-    }, !isCollapsed && isOpen ? transitionStyle => /*#__PURE__*/React.createElement("ul", {
-      style: Object.assign(Object.assign({}, transitionStyle), {
-        visibility: isCollapsed ? 'hidden' : 'visible'
-      }),
+      isOpen: isOpen,
+      keepDOM: false,
+      fade: true
+    }, !isCollapsed ? /*#__PURE__*/React.createElement("ul", {
       className: subNavCls
     }, children) : null);
     const finalDom = isHorizontal ? null : subNavMotion ? ulWithMotion : isOpen && !isCollapsed ? /*#__PURE__*/React.createElement("ul", {
@@ -280,9 +293,7 @@ export default class SubNav extends BaseComponent {
       // Do not show dropdown when disabled
       _elem = !disabled ? /*#__PURE__*/React.createElement(Dropdown, Object.assign({
         className: subNavCls,
-        render: /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement("li", {
-          className: "".concat(prefixCls, "-popover-crumb")
-        }), children),
+        render: /*#__PURE__*/React.createElement(Dropdown.Menu, null, children),
         position: mode === strings.MODE_HORIZONTAL && !isInSubNav ? 'bottomLeft' : 'rightTop',
         mouseEnterDelay: subNavOpenDelay,
         mouseLeaveDelay: subNavCloseDelay,
@@ -396,8 +407,12 @@ SubNav.defaultProps = {
   isOpen: false,
   maxHeight: numbers.DEFAULT_SUBNAV_MAX_HEIGHT,
   toggleIcon: {
-    open: /*#__PURE__*/React.createElement(IconChevronUp, null),
-    closed: /*#__PURE__*/React.createElement(IconChevronDown, null)
+    open: /*#__PURE__*/React.createElement(IconChevronUp, {
+      "aria-hidden": true
+    }),
+    closed: /*#__PURE__*/React.createElement(IconChevronDown, {
+      "aria-hidden": true
+    })
   },
   disabled: false
 };

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

@@ -7,14 +7,11 @@ import Item, { NavItemProps } from './Item';
 import Footer, { NavFooterProps } from './Footer';
 import Header, { NavHeaderProps } from './Header';
 import '@douyinfe/semi-foundation/lib/es/navigation/navigation.css';
-import { Motion } from '../_base/base';
 export type { CollapseButtonProps } from './CollapseButton';
 export type { NavFooterProps } from './Footer';
 export type { NavHeaderProps } from './Header';
 export type { NavItemProps } from './Item';
-export type { OpenIconTransitionProps } from './OpenIconTransition';
 export type { ToggleIcon, SubNavProps } from './SubNav';
-export type { SubNavTransitionProps } from './SubNavTransition';
 export declare type Mode = 'vertical' | 'horizontal';
 export interface OnSelectedData {
     itemKey: React.ReactText;
@@ -47,7 +44,7 @@ export interface NavProps extends BaseProps {
     prefixCls?: string;
     selectedKeys?: React.ReactText[];
     subNavCloseDelay?: number;
-    subNavMotion?: Motion;
+    subNavMotion?: boolean;
     subNavOpenDelay?: number;
     toggleIconPosition?: string;
     tooltipHideDelay?: number;
@@ -82,10 +79,10 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
     static Header: typeof Header;
     static Footer: typeof Footer;
     static propTypes: {
-        defaultOpenKeys: PropTypes.Requireable<(string | number)[]>;
-        openKeys: PropTypes.Requireable<(string | number)[]>;
-        defaultSelectedKeys: PropTypes.Requireable<(string | number)[]>;
-        selectedKeys: PropTypes.Requireable<(string | number)[]>;
+        defaultOpenKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        openKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        defaultSelectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
+        selectedKeys: PropTypes.Requireable<NonNullable<string | number>[]>;
         mode: PropTypes.Requireable<string>;
         onSelect: PropTypes.Requireable<(...args: any[]) => any>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
@@ -96,7 +93,7 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
         onCollapseChange: PropTypes.Requireable<(...args: any[]) => any>;
         multiple: PropTypes.Requireable<boolean>;
         onDeselect: PropTypes.Requireable<(...args: any[]) => any>;
-        subNavMotion: PropTypes.Requireable<boolean | object>;
+        subNavMotion: PropTypes.Requireable<NonNullable<boolean | object>>;
         subNavCloseDelay: PropTypes.Requireable<number>;
         subNavOpenDelay: PropTypes.Requireable<number>;
         tooltipShowDelay: PropTypes.Requireable<number>;
@@ -107,8 +104,8 @@ declare class Nav extends BaseComponent<NavProps, NavState> {
         className: PropTypes.Requireable<string>;
         toggleIconPosition: PropTypes.Requireable<string>;
         prefixCls: PropTypes.Requireable<string>;
-        header: PropTypes.Requireable<object | PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<object | PropTypes.ReactNodeLike>;
+        header: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
+        footer: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         limitIndent: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {

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

@@ -6,7 +6,6 @@ import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/notification/notification.css';
 import useNotification from './useNotification';
 import { NoticeInstance, NoticePosition, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/lib/es/notification/notificationFoundation';
-export type { NoticeTransitionProps } from './NoticeTransition';
 export interface NoticeReactProps extends NoticeProps {
     style?: CSSProperties;
 }

package/lib/es/notification/index.js

@@ -8,9 +8,9 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/notificati
 import Notice from './notice';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/lib/es/notification/notification.css';
-import NoticeTransition from './NoticeTransition';
 import getUuid from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import useNotification from './useNotification';
+import CSSAnimation from "../_cssAnimation";
 let ref = null;
 const defaultConfig = {
   duration: 3,
@@ -51,19 +51,29 @@ class NotificationList extends BaseComponent {
             key: position,
             className: className,
             style: style
-          }, notices.map((notice, index) => notice.motion ? /*#__PURE__*/React.createElement(NoticeTransition, {
-            key: notice.id || index,
-            position: position,
-            motion: notice.motion
-          }, removedItems.find(item => item.id === notice.id) ? null : transitionStyle => /*#__PURE__*/React.createElement(Notice, Object.assign({}, notice, {
-            style: Object.assign(Object.assign({}, transitionStyle), notice.style),
-            key: notice.id,
-            close: _this.remove
-          }))) : /*#__PURE__*/React.createElement(Notice, Object.assign({}, notice, {
-            style: Object.assign({}, notice.style),
-            key: notice.id,
-            close: _this.remove
-          }))))
+          }, notices.map((notice, index) => {
+            const isRemoved = removedItems.find(removedItem => removedItem.id === notice.id) !== undefined;
+            return /*#__PURE__*/React.createElement(CSSAnimation, {
+              key: notice.id,
+              animationState: isRemoved ? "leave" : "enter",
+              startClassName: "".concat(cssClasses.NOTICE, "-animation-").concat(isRemoved ? "hide" : "show", "_").concat(position)
+            }, _ref => {
+              let {
+                animationClassName,
+                animationEventsNeedBind,
+                isAnimating
+              } = _ref;
+              return isRemoved && !isAnimating ? null : /*#__PURE__*/React.createElement(Notice, Object.assign({}, notice, {
+                className: cls({
+                  [notice.className]: Boolean(notice.className),
+                  [animationClassName]: true
+                })
+              }, animationEventsNeedBind, {
+                style: Object.assign({}, notice.style),
+                close: _this.remove
+              }));
+            });
+          }))
         );
       }
 

package/lib/es/notification/notice.d.ts

@@ -9,12 +9,14 @@ export interface NoticeReactProps extends NoticeProps {
     content?: React.ReactNode;
     icon?: React.ReactNode;
     onClick?: (e: React.MouseEvent) => void;
+    onAnimationEnd?: (e: React.AnimationEvent) => void;
+    onAnimationStart?: (e: React.AnimationEvent) => void;
 }
 declare class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         duration: PropTypes.Requireable<number>;
-        id: PropTypes.Requireable<string | number>;
+        id: PropTypes.Requireable<NonNullable<string | number>>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         type: PropTypes.Requireable<string>;

package/lib/es/notification/notice.js

@@ -158,7 +158,9 @@ class Notice extends BaseComponent {
         onMouseLeave: this.startCloseTimer,
         onClick: this.notifyClick,
         "aria-labelledby": titleID,
-        role: 'alert'
+        role: 'alert',
+        onAnimationEnd: this.props.onAnimationEnd,
+        onAnimationStart: this.props.onAnimationStart
       }, /*#__PURE__*/React.createElement("div", null, this.renderTypeIcon()), /*#__PURE__*/React.createElement("div", {
         className: "".concat(prefixCls, "-inner")
       }, /*#__PURE__*/React.createElement("div", {

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

@@ -8,7 +8,6 @@ import { ButtonProps } from '../button';
 import { Type as ButtonType } from '../button/Button';
 import { ContextValue } from '../configProvider/context';
 import '@douyinfe/semi-foundation/lib/es/popconfirm/popconfirm.css';
-import { Motion } from '../_base/base';
 export interface PopconfirmProps extends PopoverProps {
     cancelText?: string;
     cancelButtonProps?: ButtonProps;
@@ -20,7 +19,7 @@ export interface PopconfirmProps extends PopoverProps {
     okText?: string;
     okType?: ButtonType;
     okButtonProps?: ButtonProps;
-    motion?: Motion;
+    motion?: boolean;
     title?: React.ReactNode;
     visible?: boolean;
     prefixCls?: string;
@@ -40,14 +39,14 @@ export interface PopconfirmState {
 export default class Popconfirm extends BaseComponent<PopconfirmProps, PopconfirmState> {
     static contextType: React.Context<ContextValue>;
     static propTypes: {
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         disabled: PropTypes.Requireable<boolean>;
         content: PropTypes.Requireable<any>;
         title: PropTypes.Requireable<any>;
         prefixCls: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         okText: PropTypes.Requireable<string>;
         okType: PropTypes.Requireable<string>;
         cancelText: PropTypes.Requireable<string>;
@@ -60,7 +59,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         defaultVisible: PropTypes.Requireable<boolean>;
         okButtonProps: PropTypes.Requireable<object>;
         cancelButtonProps: PropTypes.Requireable<object>;
-        stopPropagation: PropTypes.Requireable<string | boolean>;
+        stopPropagation: PropTypes.Requireable<NonNullable<string | boolean>>;
         zIndex: PropTypes.Requireable<number>;
         trigger: PropTypes.Requireable<string>;
         position: PropTypes.Requireable<string>;

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

@@ -4,7 +4,6 @@ import { ContextValue } from '../configProvider/context';
 import { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
 import { BaseProps } from '../_base/baseComponent';
-import { Motion } from '../_base/base';
 import type { ArrowProps } from './Arrow';
 export type { ArrowProps };
 declare interface ArrowStyle {
@@ -17,7 +16,7 @@ export interface PopoverProps extends BaseProps {
     content?: TooltipProps['content'];
     visible?: boolean;
     autoAdjustOverflow?: boolean;
-    motion?: Motion;
+    motion?: boolean;
     position?: Position;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
@@ -41,6 +40,7 @@ export interface PopoverProps extends BaseProps {
     onEscKeyDown?: TooltipProps['onEscKeyDown'];
     clickToHide?: TooltipProps['clickToHide'];
     disableFocusListener?: boolean;
+    afterClose?: () => void;
 }
 export interface PopoverState {
     popConfirmVisible: boolean;
@@ -49,15 +49,15 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         visible: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        motion: PropTypes.Requireable<boolean | object>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        motion: PropTypes.Requireable<boolean>;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;
-        contentClassName: PropTypes.Requireable<string | any[]>;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
+        contentClassName: PropTypes.Requireable<NonNullable<string | any[]>>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
@@ -67,7 +67,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowStyle: PropTypes.Requireable<PropTypes.InferProps<{
             borderColor: PropTypes.Requireable<string>;
             backgroundColor: PropTypes.Requireable<string>;
-            borderOpacity: PropTypes.Requireable<string | number>;
+            borderOpacity: PropTypes.Requireable<NonNullable<string | number>>;
         }>>;
         arrowPointAtCenter: PropTypes.Requireable<boolean>;
         arrowBounding: PropTypes.Requireable<object>;

package/lib/es/popover/index.js

@@ -118,7 +118,7 @@ Popover.propTypes = {
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   visible: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
-  motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+  motion: PropTypes.bool,
   position: PropTypes.oneOf(positionSet),
   // getPopupContainer: PropTypes.func,
   mouseEnterDelay: PropTypes.number,

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

@@ -35,18 +35,18 @@ declare class Progress extends Component<ProgressProps, ProgressState> {
         'aria-valuetext': PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         direction: PropTypes.Requireable<string>;
-        format: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        format: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         id: PropTypes.Requireable<string>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         orbitStroke: PropTypes.Requireable<string>;
         percent: PropTypes.Requireable<number>;
         scale: PropTypes.Requireable<number>;
         showInfo: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
-        stroke: PropTypes.Requireable<string | PropTypes.InferProps<{
+        stroke: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
             percent: PropTypes.Requireable<number>;
             color: PropTypes.Requireable<string>;
-        }>[]>;
+        }>[]>>;
         strokeGradient: PropTypes.Requireable<boolean>;
         strokeLinecap: PropTypes.Requireable<string>;
         strokeWidth: PropTypes.Requireable<number>;

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

@@ -69,7 +69,7 @@ export default class Rating extends BaseComponent<RatingProps, RatingState> {
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
         autoFocus: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<number | "default" | "small">;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         tooltips: PropTypes.Requireable<string[]>;
         id: PropTypes.Requireable<string>;
         preventScroll: PropTypes.Requireable<boolean>;

package/lib/es/rating/item.d.ts

@@ -40,7 +40,7 @@ export default class Item extends BaseComponent<RatingItemProps, RatingItemState
         disabled: PropTypes.Requireable<boolean>;
         count: PropTypes.Requireable<number>;
         ariaLabelPrefix: PropTypes.Requireable<string>;
-        size: PropTypes.Requireable<number | "default" | "small">;
+        size: PropTypes.Requireable<NonNullable<number | "default" | "small">>;
         'aria-describedby': PropTypes.Requireable<string>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;

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

@@ -18,7 +18,7 @@ declare class ScrollList extends BaseComponent<ScrollListProps, {}> {
         header: propTypes.Requireable<propTypes.ReactNodeLike>;
         footer: propTypes.Requireable<propTypes.ReactNodeLike>;
         children: propTypes.Requireable<propTypes.ReactNodeLike>;
-        bodyHeight: propTypes.Requireable<string | number>;
+        bodyHeight: propTypes.Requireable<NonNullable<string | number>>;
     };
     constructor(props: ScrollListProps);
     render(): JSX.Element;

package/lib/es/scrollList/scrollItem.d.ts

@@ -26,7 +26,7 @@ export interface ScrollItemState {
 }
 export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItemProps<T>, ScrollItemState> {
     static propTypes: {
-        mode: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<"normal" | "wheel">;
         cycled: PropTypes.Requireable<boolean>;
         list: PropTypes.Requireable<any[]>;
         selectedIndex: PropTypes.Requireable<number>;
@@ -34,8 +34,8 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
         transform: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
-        motion: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
-        type: PropTypes.Requireable<string | number>;
+        motion: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
+        type: PropTypes.Requireable<NonNullable<string | number>>;
     };
     static defaultProps: {
         selectedIndex: number;

package/lib/es/scrollList/scrollItem.js

@@ -9,7 +9,7 @@ import React from 'react';
 import BaseComponent from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { cssClasses, numbers } from '@douyinfe/semi-foundation/lib/es/scrollList/constants';
+import { cssClasses, numbers, strings } from '@douyinfe/semi-foundation/lib/es/scrollList/constants';
 import ItemFoundation from '@douyinfe/semi-foundation/lib/es/scrollList/itemFoundation';
 import animatedScrollTo from '@douyinfe/semi-foundation/lib/es/scrollList/scrollTo';
 import isElement from '@douyinfe/semi-foundation/lib/es/utils/isElement';
@@ -414,7 +414,7 @@ export default class ScrollItem extends BaseComponent {
       this._cacheSelectedNode(nearestNode);
 
       this.foundation.selectNode(nearestNode, this.list);
-    }, msPerFrame * 5);
+    }, msPerFrame * 2);
   }
 
   get adapter() {
@@ -526,7 +526,7 @@ export default class ScrollItem extends BaseComponent {
 
 }
 ScrollItem.propTypes = {
-  mode: PropTypes.string,
+  mode: PropTypes.oneOf(strings.MODE),
   cycled: PropTypes.bool,
   list: PropTypes.array,
   selectedIndex: PropTypes.number,

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { ContextValue } from '../configProvider/context';
 import SelectFoundation, { SelectAdapter } from '@douyinfe/semi-foundation/lib/es/select/foundation';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { PopoverProps } from '../popover/index';
 import { InputProps } from '../input/index';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
@@ -123,6 +124,8 @@ export declare type SelectProps = {
     onListScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
     children?: React.ReactNode;
     preventScroll?: boolean;
+    showRestTagsPopover?: boolean;
+    restTagsPopoverProps?: PopoverProps;
 } & Pick<TooltipProps, 'spacing' | 'getPopupContainer' | 'motion' | 'autoAdjustOverflow' | 'mouseLeaveDelay' | 'mouseEnterDelay' | 'stopPropagation'> & React.RefAttributes<any>;
 export interface SelectState {
     isOpen: boolean;
@@ -138,6 +141,7 @@ export interface SelectState {
     optionGroups: Array<any>;
     isHovering: boolean;
     isFocusInContainer: boolean;
+    isFullTags: boolean;
 }
 declare class Select extends BaseComponent<SelectProps, SelectState> {
     static contextType: React.Context<ContextValue>;
@@ -152,15 +156,15 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         autoFocus: PropTypes.Requireable<boolean>;
         autoClearSearchValue: PropTypes.Requireable<boolean>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultValue: PropTypes.Requireable<string | number | object>;
-        value: PropTypes.Requireable<string | number | object>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | object>>;
+        value: PropTypes.Requireable<NonNullable<string | number | object>>;
         placeholder: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         multiple: PropTypes.Requireable<boolean>;
-        filter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        filter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
         max: PropTypes.Requireable<number>;
         maxTagCount: PropTypes.Requireable<number>;
-        maxHeight: PropTypes.Requireable<string | number>;
+        maxHeight: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<SelectSize>;
@@ -168,7 +172,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onDropdownVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         zIndex: PropTypes.Requireable<number>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
+        position: PropTypes.Requireable<"left" | "top" | "right" | "bottom" | "topLeft" | "topRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         dropdownClassName: PropTypes.Requireable<string>;
@@ -186,7 +190,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
         defaultActiveFirstOption: PropTypes.Requireable<boolean>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
         stopPropagation: PropTypes.Requireable<boolean>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<boolean>;
         onChangeWithObject: PropTypes.Requireable<boolean>;
         suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -256,6 +260,7 @@ declare class Select extends BaseComponent<SelectProps, SelectState> {
     renderVirtualizeList(visibleOptions: OptionProps[]): JSX.Element;
     renderOptions(children?: React.ReactNode): JSX.Element;
     renderSingleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
+    getTagItem: (item: any, i: number, renderSelectedItem: RenderSelectedItemFn) => JSX.Element;
     renderMultipleSelection(selections: Map<OptionProps['label'], any>, filterable: boolean): JSX.Element;
     onMouseEnter(e: MouseEvent): void;
     onMouseLeave(e: MouseEvent): void;