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

package/lib/es/timePicker/Combobox.js

@@ -144,9 +144,8 @@ class Combobox extends BaseComponent {
     const className = "".concat(prefixCls, "-list-hour");
     return /*#__PURE__*/React.createElement(ScrollItem, Object.assign({
       ref: current => this.cacheRefCurrent('hour', current),
-      mode: 'wheel',
+      mode: 'normal',
       transform: transformHour,
-      cycled: true,
       className: className,
       list: hourOptionsAdj.map(option => formatOption(option, disabledOptions)),
       selectedIndex: hourOptionsAdj.indexOf(hourAdj),
@@ -179,9 +178,8 @@ class Combobox extends BaseComponent {
 
     return /*#__PURE__*/React.createElement(ScrollItem, Object.assign({
       ref: current => this.cacheRefCurrent('minute', current),
-      mode: 'wheel',
+      mode: 'normal',
       transform: transformMinute,
-      cycled: true,
       list: minuteOptions.map(option => formatOption(option, disabledOptions)),
       selectedIndex: minuteOptions.indexOf(minute),
       type: "minute",
@@ -214,9 +212,8 @@ class Combobox extends BaseComponent {
 
     return /*#__PURE__*/React.createElement(ScrollItem, Object.assign({
       ref: current => this.cacheRefCurrent('second', current),
-      mode: 'wheel',
+      mode: 'normal',
       transform: transformSecond,
-      cycled: true,
       list: secondOptions.map(option => formatOption(option, disabledOptions)),
       selectedIndex: secondOptions.indexOf(second),
       className: className,
@@ -248,9 +245,8 @@ class Combobox extends BaseComponent {
     const className = "".concat(prefixCls, "-list-ampm");
     return /*#__PURE__*/React.createElement(ScrollItem, Object.assign({
       ref: current => this.cacheRefCurrent('ampm', current),
-      mode: 'wheel',
+      mode: 'normal',
       className: className,
-      cycled: false,
       list: AMPMOptions,
       selectedIndex: selected,
       type: "ampm",

package/lib/es/timePicker/PanelShape.d.ts

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export declare const PanelShape: {
-    panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
 };
 export declare const PanelShapeDefaults: {};

package/lib/es/timePicker/TimePicker.d.ts

@@ -7,7 +7,6 @@ import { InputSize } from '../input';
 import { Position } from '../tooltip';
 import { ScrollItemProps } from '../scrollList/scrollItem';
 import { Locale } from '../locale/interface';
-import { Motion } from '../_base/base';
 export interface Panel {
     panelHeader?: React.ReactNode;
     panelFooter?: React.ReactNode;
@@ -44,7 +43,7 @@ export declare type TimePickerProps = {
     locale?: Locale['TimePicker'];
     localeCode?: string;
     minuteStep?: number;
-    motion?: Motion;
+    motion?: boolean;
     open?: boolean;
     panelFooter?: React.ReactNode;
     panelHeader?: React.ReactNode;
@@ -90,8 +89,8 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
     static propTypes: {
         inputStyle: PropTypes.Requireable<object>;
         preventScroll: PropTypes.Requireable<boolean>;
-        panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         'aria-labelledby': PropTypes.Requireable<string>;
         'aria-invalid': PropTypes.Requireable<boolean>;
         'aria-errormessage': PropTypes.Requireable<string>;
@@ -99,11 +98,11 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-required': PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         clearText: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: PropTypes.Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         inputReadOnly: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         showClear: PropTypes.Requireable<boolean>;
-        defaultValue: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         open: PropTypes.Requireable<boolean>;
         defaultOpen: PropTypes.Requireable<boolean>;
         onOpenChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -128,24 +127,24 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         autoFocus: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<"default" | "small" | "large">;
         panels: PropTypes.Requireable<PropTypes.InferProps<{
-            panelHeader: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            panelFooter: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            panelHeader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+            panelFooter: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         }>[]>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         locale: PropTypes.Requireable<object>;
         localeCode: PropTypes.Requireable<string>;
         dateFnsLocale: PropTypes.Requireable<object>;
-        zIndex: PropTypes.Requireable<string | number>;
+        zIndex: PropTypes.Requireable<NonNullable<string | number>>;
         insetLabel: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         insetLabelId: PropTypes.Requireable<string>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         type: PropTypes.Requireable<Type>;
         rangeSeparator: PropTypes.Requireable<string>;
         triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
-        timeZone: PropTypes.Requireable<string | number>;
+        timeZone: PropTypes.Requireable<NonNullable<string | number>>;
         scrollItemProps: PropTypes.Requireable<object>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<NonNullable<boolean | object>>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
@@ -178,6 +177,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         onKeyDown: (...args: any[]) => void;
         size: "default";
         type: "time";
+        motion: boolean;
     };
     foundation: TimePickerFoundation;
     timePickerRef: React.MutableRefObject<HTMLDivElement>;

package/lib/es/timePicker/TimePicker.js

@@ -344,6 +344,7 @@ export default class TimePicker extends BaseComponent {
       outerProps.onClick = this.openPanel;
     }
 
+    console.log("===>", disabled ? false : open, motion);
     return /*#__PURE__*/React.createElement("div", Object.assign({
       ref: this.setTimePickerRef,
       className: classNames({
@@ -465,5 +466,6 @@ TimePicker.defaultProps = Object.assign({
   focusOnOpen: false,
   onKeyDown: _noop,
   size: 'default',
-  type: strings.DEFAULT_TYPE
+  type: strings.DEFAULT_TYPE,
+  motion: true
 }, PanelShapeDefaults);

package/lib/es/timePicker/TimeShape.d.ts

@@ -6,5 +6,5 @@ import PropTypes from 'prop-types';
  * - \[12:00:12, 12:21:12]
  * - \[[12:00:12, 12:21:12], [12:11:12, 12:32:12]]
  */
-declare const TimeShape: PropTypes.Requireable<string | number | string[] | number[] | Date | Date[]>;
+declare const TimeShape: PropTypes.Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
 export { TimeShape };

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

@@ -10,8 +10,8 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
     static propTypes: {
         inputStyle: import("prop-types").Requireable<object>;
         preventScroll: import("prop-types").Requireable<boolean>;
-        panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-        panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+        panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
+        panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
         'aria-labelledby': import("prop-types").Requireable<string>;
         'aria-invalid': import("prop-types").Requireable<boolean>;
         'aria-errormessage': import("prop-types").Requireable<string>;
@@ -19,11 +19,11 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         'aria-required': import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         clearText: import("prop-types").Requireable<string>;
-        value: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        value: import("prop-types").Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         inputReadOnly: import("prop-types").Requireable<boolean>;
         disabled: import("prop-types").Requireable<boolean>;
         showClear: import("prop-types").Requireable<boolean>;
-        defaultValue: import("prop-types").Requireable<string | number | string[] | number[] | Date | Date[]>;
+        defaultValue: import("prop-types").Requireable<NonNullable<string | number | string[] | number[] | Date | Date[]>>;
         open: import("prop-types").Requireable<boolean>;
         defaultOpen: import("prop-types").Requireable<boolean>;
         onOpenChange: import("prop-types").Requireable<(...args: any[]) => any>;
@@ -48,24 +48,24 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         autoFocus: import("prop-types").Requireable<boolean>;
         size: import("prop-types").Requireable<"default" | "small" | "large">;
         panels: import("prop-types").Requireable<import("prop-types").InferProps<{
-            panelHeader: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-            panelFooter: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
+            panelHeader: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
+            panelFooter: import("prop-types").Requireable<NonNullable<import("prop-types").ReactNodeLike>>;
         }>[]>;
         onFocus: import("prop-types").Requireable<(...args: any[]) => any>;
         onBlur: import("prop-types").Requireable<(...args: any[]) => any>;
         locale: import("prop-types").Requireable<object>;
         localeCode: import("prop-types").Requireable<string>;
         dateFnsLocale: import("prop-types").Requireable<object>;
-        zIndex: import("prop-types").Requireable<string | number>;
+        zIndex: import("prop-types").Requireable<NonNullable<string | number>>;
         insetLabel: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
         insetLabelId: import("prop-types").Requireable<string>;
         validateStatus: import("prop-types").Requireable<"default" | "error" | "warning" | "success">;
         type: import("prop-types").Requireable<import("./TimePicker").Type>;
         rangeSeparator: import("prop-types").Requireable<string>;
         triggerRender: import("prop-types").Requireable<(...args: any[]) => any>;
-        timeZone: import("prop-types").Requireable<string | number>;
+        timeZone: import("prop-types").Requireable<NonNullable<string | number>>;
         scrollItemProps: import("prop-types").Requireable<object>;
-        motion: import("prop-types").Requireable<boolean | object>;
+        motion: import("prop-types").Requireable<NonNullable<boolean | object>>;
         autoAdjustOverflow: import("prop-types").Requireable<boolean>;
     };
     static defaultProps: {
@@ -98,6 +98,7 @@ export default class LocaleTimePicker extends React.PureComponent<LocalePickerPr
         onKeyDown: (...args: any[]) => void;
         size: "default";
         type: "time";
+        motion: boolean;
     };
     render(): JSX.Element;
 }

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

@@ -26,7 +26,7 @@ declare class Timeline extends PureComponent<TimelineProps> {
         mode: string;
     };
     getPosCls: (ele: React.ReactElement, idx: number) => string;
-    addClassName: (items: React.ReactNode) => (string | number | React.ReactFragment | React.ReactElement<any, string | React.JSXElementConstructor<any>>)[];
+    addClassName: (items: React.ReactNode) => (string | number | React.ReactFragment | React.DetailedReactHTMLElement<unknown, HTMLElement>)[];
     render(): JSX.Element;
 }
 export default Timeline;

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

@@ -4,8 +4,6 @@ import { ToastListAdapter, ToastListProps, ToastListState } from '@douyinfe/semi
 import '@douyinfe/semi-foundation/lib/es/toast/toast.css';
 import useToast from './useToast';
 import { ConfigProps, ToastInstance, ToastProps, ToastState } from '@douyinfe/semi-foundation/lib/es/toast/toastFoundation';
-import { Motion } from '../_base/base';
-export type { ToastTransitionProps } from './ToastTransition';
 export interface ToastReactProps extends ToastProps {
     id?: string;
     style?: CSSProperties;
@@ -82,7 +80,7 @@ declare const createBaseToast: () => {
     };
     useToast: typeof useToast;
     defaultOpts: ToastReactProps & {
-        motion: Motion;
+        motion: boolean;
     };
     propTypes: {
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -176,7 +174,7 @@ declare const _default: {
     };
     useToast: typeof useToast;
     defaultOpts: ToastReactProps & {
-        motion: Motion<any>;
+        motion: boolean;
     };
     propTypes: {
         content: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/toast/index.js

@@ -7,9 +7,10 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/toast/cons
 import BaseComponent from '../_base/baseComponent';
 import Toast from './toast';
 import '@douyinfe/semi-foundation/lib/es/toast/toast.css';
-import ToastTransition from './ToastTransition';
 import getUuid from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import useToast from './useToast';
+import CSSAnimation from '../_cssAnimation';
+import cls from 'classnames';
 
 const createBaseToast = () => {
   var _a;
@@ -231,18 +232,31 @@ const createBaseToast = () => {
         }
       };
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((item, index) => item.motion ? /*#__PURE__*/React.createElement(ToastTransition, {
-        key: item.id || index,
-        motion: item.motion
-      }, removedItems.find(removedItem => removedItem.id === item.id) ? null : transitionStyle => /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
-        style: Object.assign(Object.assign({}, transitionStyle), item.style),
-        close: id => this.remove(id),
-        ref: refFn
-      }))) : /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
-        style: Object.assign({}, item.style),
-        close: id => this.remove(id),
-        ref: refFn
-      }))));
+      return /*#__PURE__*/React.createElement(React.Fragment, null, list.map((item, index) => {
+        const isRemoved = removedItems.find(removedItem => removedItem.id === item.id) !== undefined;
+        return /*#__PURE__*/React.createElement(CSSAnimation, {
+          key: item.id,
+          motion: item.motion,
+          animationState: isRemoved ? "leave" : "enter",
+          startClassName: isRemoved ? "".concat(cssClasses.PREFIX, "-animation-hide") : "".concat(cssClasses.PREFIX, "-animation-show")
+        }, _ref2 => {
+          let {
+            animationClassName,
+            animationEventsNeedBind,
+            isAnimating
+          } = _ref2;
+          return isRemoved && !isAnimating ? null : /*#__PURE__*/React.createElement(Toast, Object.assign({}, item, {
+            className: cls({
+              [item.className]: Boolean(item.className),
+              [animationClassName]: true
+            })
+          }, animationEventsNeedBind, {
+            style: Object.assign({}, item.style),
+            close: id => this.remove(id),
+            ref: refFn
+          }));
+        });
+      }));
     }
 
   }, _a.defaultOpts = {

package/lib/es/toast/toast.d.ts

@@ -7,6 +7,8 @@ export interface ToastReactProps extends ToastProps {
     style?: CSSProperties;
     icon?: React.ReactNode;
     content: React.ReactNode;
+    onAnimationEnd?: (e: React.AnimationEvent) => void;
+    onAnimationStart?: (e: React.AnimationEvent) => void;
 }
 declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
     static contextType: React.Context<ContextValue>;
@@ -17,11 +19,11 @@ declare class Toast extends BaseComponent<ToastReactProps, ToastState> {
         duration: PropTypes.Requireable<number>;
         theme: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
-        textMaxWidth: PropTypes.Requireable<string | number>;
+        textMaxWidth: PropTypes.Requireable<NonNullable<string | number>>;
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         showClose: PropTypes.Requireable<boolean>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         direction: PropTypes.Requireable<string>;
     };
     static defaultProps: {

package/lib/es/toast/toast.js

@@ -114,7 +114,9 @@ class Toast extends BaseComponent {
       className: toastCls,
       style: style,
       onMouseEnter: this.clearCloseTimer,
-      onMouseLeave: this.startCloseTimer
+      onMouseLeave: this.startCloseTimer,
+      onAnimationStart: this.props.onAnimationStart,
+      onAnimationEnd: this.props.onAnimationEnd
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-content")
     }, this.renderIcon(), /*#__PURE__*/React.createElement("span", {

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

@@ -7,8 +7,6 @@ import { strings } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import { ContextValue } from '../configProvider/context';
-import { Motion } from '../_base/base';
-export type { TooltipTransitionProps } from './TooltipStyledTransition';
 export declare type Trigger = ArrayElement<typeof strings.TRIGGER_SET>;
 export type { Position };
 export interface ArrowBounding {
@@ -23,7 +21,7 @@ export interface RenderContentProps {
 export declare type RenderContent = (props: RenderContentProps) => React.ReactNode;
 export interface TooltipProps extends BaseProps {
     children?: React.ReactNode;
-    motion?: Motion;
+    motion?: boolean;
     autoAdjustOverflow?: boolean;
     position?: Position;
     getPopupContainer?: () => HTMLElement;
@@ -58,6 +56,7 @@ export interface TooltipProps extends BaseProps {
     wrapperId?: string;
     preventScroll?: boolean;
     disableFocusListener?: boolean;
+    afterClose?: () => void;
 }
 interface TooltipState {
     visible: boolean;
@@ -79,27 +78,27 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     static contextType: React.Context<ContextValue>;
     static propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        motion: PropTypes.Requireable<boolean | object>;
+        motion: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        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">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;
-        trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;
+        trigger: PropTypes.Validator<NonNullable<"hover" | "focus" | "click" | "custom">>;
         className: PropTypes.Requireable<string>;
         wrapperClassName: PropTypes.Requireable<string>;
         clickToHide: PropTypes.Requireable<boolean>;
         clickTriggerToHide: PropTypes.Requireable<boolean>;
         visible: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
-        content: PropTypes.Requireable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>;
+        content: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         prefixCls: PropTypes.Requireable<string>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         spacing: PropTypes.Requireable<number>;
-        showArrow: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        showArrow: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         zIndex: PropTypes.Requireable<number>;
-        rePosKey: PropTypes.Requireable<string | number>;
+        rePosKey: PropTypes.Requireable<NonNullable<string | number>>;
         arrowBounding: PropTypes.Requireable<PropTypes.InferProps<{
             offsetX: PropTypes.Requireable<number>;
             offsetY: PropTypes.Requireable<number>;

package/lib/es/tooltip/index.js

@@ -38,8 +38,8 @@ import Portal from '../_portal/index';
 import ConfigContext from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
 import TriangleArrowVertical from './TriangleArrowVertical';
-import TooltipTransition from './TooltipStyledTransition';
 import ArrowBoundingShape from './ArrowBoundingShape';
+import CSSAnimation from "../_cssAnimation";
 const prefix = cssClasses.PREFIX;
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
@@ -84,10 +84,8 @@ export default class Tooltip extends BaseComponent {
 
 
     this.didLeave = () => {
-      this.adapter.unregisterClickOutsideHandler();
-      this.adapter.unregisterScrollHandler();
-      this.adapter.unregisterResizeHandler();
-      this.adapter.removePortal();
+      this.foundation.removePortal();
+      this.foundation.unBindEvent();
     };
 
     this.renderIcon = () => {
@@ -186,36 +184,37 @@ export default class Tooltip extends BaseComponent {
 
       const transformOrigin = _get(containerStyle, 'transformOrigin');
 
-      const inner = motion && isPositionUpdated ? /*#__PURE__*/React.createElement(TooltipTransition, {
-        position: placement,
-        didLeave: this.didLeave,
-        motion: motion
-      }, transitionState === 'enter' ? _ref => {
+      const inner = /*#__PURE__*/React.createElement(CSSAnimation, {
+        animationState: transitionState,
+        motion: motion && isPositionUpdated,
+        startClassName: transitionState === 'enter' ? "".concat(prefix, "-animation-show") : "".concat(prefix, "-animation-hide"),
+        onAnimationEnd: () => {
+          var _a, _b;
+
+          if (transitionState === 'leave') {
+            this.didLeave();
+            (_b = (_a = this.props).afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+          }
+        }
+      }, _ref => {
         let {
-          animateCls,
-          animateStyle,
-          animateEvents
+          animationStyle,
+          animationClassName,
+          animationEventsNeedBind
         } = _ref;
         return /*#__PURE__*/React.createElement("div", Object.assign({
-          className: classNames(className, animateCls),
+          className: classNames(className, animationClassName),
           style: Object.assign(Object.assign(Object.assign({
-            visibility: 'visible'
-          }, animateStyle), {
+            visibility: isPositionUpdated ? 'visible' : "hidden"
+          }, animationStyle), {
             transformOrigin
           }), style)
-        }, portalEventSet, animateEvents, {
+        }, portalEventSet, animationEventsNeedBind, {
           role: role,
           "x-placement": placement,
           id: id
         }), contentNode, icon);
-      } : null) : /*#__PURE__*/React.createElement("div", Object.assign({
-        className: className
-      }, portalEventSet, {
-        "x-placement": placement,
-        style: Object.assign({
-          visibility: motion ? 'hidden' : 'visible'
-        }, style)
-      }), contentNode, icon);
+      });
       return /*#__PURE__*/React.createElement(Portal, {
         getPopupContainer: this.props.getPopupContainer,
         style: {
@@ -356,13 +355,11 @@ export default class Tooltip extends BaseComponent {
           triggerEventSet
         });
       },
-      unregisterTriggerEvent: () => {},
       registerPortalEvent: portalEventSet => {
         this.setState({
           portalEventSet
         });
       },
-      unregisterPortalEvent: () => {},
       getTriggerBounding: () => {
         // eslint-disable-next-line
         // It may be a React component or an html element
@@ -423,14 +420,8 @@ export default class Tooltip extends BaseComponent {
       },
       togglePortalVisible: (visible, cb) => {
         const willUpdateStates = {};
-
-        if (this.adapter.canMotion()) {
-          willUpdateStates.transitionState = visible ? 'enter' : 'leave';
-          willUpdateStates.visible = visible;
-        } else {
-          willUpdateStates.visible = visible;
-        }
-
+        willUpdateStates.transitionState = visible ? 'enter' : 'leave';
+        willUpdateStates.visible = visible;
         this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
@@ -684,7 +675,7 @@ export default class Tooltip extends BaseComponent {
 Tooltip.contextType = ConfigContext;
 Tooltip.propTypes = {
   children: PropTypes.node,
-  motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
+  motion: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   position: PropTypes.oneOf(positionSet),
   getPopupContainer: PropTypes.func,

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

@@ -112,7 +112,7 @@ declare class Transfer extends BaseComponent<TransferProps, TransferState> {
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         dataSource: PropTypes.Requireable<any[]>;
-        filter: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        filter: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
         onSearch: PropTypes.Requireable<(...args: any[]) => any>;
         inputProps: PropTypes.Requireable<object>;
         value: PropTypes.Requireable<any[]>;

package/lib/es/tree/autoSizer.d.ts

@@ -14,8 +14,8 @@ export interface AutoSizerState {
 }
 export default class AutoSizer extends PureComponent<AutoSizerProps, AutoSizerState> {
     static propTypes: {
-        defaultHeight: PropTypes.Requireable<string | number>;
-        defaultWidth: PropTypes.Requireable<string | number>;
+        defaultHeight: PropTypes.Requireable<NonNullable<string | number>>;
+        defaultWidth: PropTypes.Requireable<NonNullable<string | number>>;
     };
     static defaultProps: {
         defaultHeight: string;

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

@@ -17,13 +17,13 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         showClear: PropTypes.Requireable<boolean>;
         defaultExpandAll: PropTypes.Requireable<boolean>;
         defaultExpandedKeys: PropTypes.Requireable<any[]>;
-        defaultValue: PropTypes.Requireable<string | any[]>;
+        defaultValue: PropTypes.Requireable<NonNullable<string | any[]>>;
         directory: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         expandAll: PropTypes.Requireable<boolean>;
         expandedKeys: PropTypes.Requireable<any[]>;
-        filterTreeNode: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        filterTreeNode: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         onChangeWithObject: PropTypes.Requireable<boolean>;
         motion: PropTypes.Requireable<boolean>;
@@ -42,17 +42,17 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         style: PropTypes.Requireable<object>;
         treeData: PropTypes.Requireable<PropTypes.InferProps<{
             key: PropTypes.Validator<string>;
-            value: PropTypes.Requireable<string | number>;
+            value: PropTypes.Requireable<NonNullable<string | number>>;
             label: PropTypes.Requireable<any>;
             isLeaf: PropTypes.Requireable<boolean>;
         }>[]>;
         treeDataSimpleJson: PropTypes.Requireable<object>;
         treeNodeFilterProp: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string | number | object>;
+        value: PropTypes.Requireable<NonNullable<string | number | object>>;
         virtualize: PropTypes.Requireable<object>;
         autoExpandParent: PropTypes.Requireable<boolean>;
         expandAction: PropTypes.Requireable<string | boolean>;
-        searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
+        searchRender: PropTypes.Requireable<NonNullable<boolean | ((...args: any[]) => any)>>;
         renderLabel: PropTypes.Requireable<(...args: any[]) => any>;
         renderFullLabel: PropTypes.Requireable<(...args: any[]) => any>;
         leafOnly: PropTypes.Requireable<boolean>;

package/lib/es/tree/nodeCollapsible.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+interface NodeCollapsibleProps {
+    key?: string;
+    open?: boolean;
+    motion?: boolean;
+    duration?: number;
+    onMotionEnd?: () => void;
+    children?: ReactNode;
+}
+declare function NodeCollapsible(props: NodeCollapsibleProps): JSX.Element;
+export default NodeCollapsible;

package/lib/es/tree/nodeCollapsible.js

@@ -0,0 +1,35 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { useState, useEffect } from 'react';
+import Collapsible from '../collapsible';
+
+function NodeCollapsible(props) {
+  const {
+    open,
+    children
+  } = props,
+        rest = __rest(props, ["open", "children"]);
+
+  const [isOpen, setIsOpen] = useState(props.open);
+  useEffect(() => {
+    // Why do we need to change isOPen value in setTimeout？
+    // Because when NodeCollapsible ComponentDidMount, the domHeight in Collapsible has not been given
+    setTimeout(() => {
+      setIsOpen(!props.open);
+    }, 0);
+  }, []);
+  return /*#__PURE__*/React.createElement(Collapsible, Object.assign({}, rest, {
+    isOpen: isOpen
+  }), children);
+}
+
+export default NodeCollapsible;