@douyinfe/semi-ui 2.0.8 → 2.1.0-beta.1

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

@@ -5,7 +5,6 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { Position } from '../tooltip';
 import Option from '../select/option';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 import { Motion } from '../_base/base';
 /**
  * AutoComplete is an enhanced Input (candidates suggest that users can choose or not),

package/lib/es/autoComplete/index.js

@@ -21,7 +21,6 @@ import Trigger from '../trigger';
 import Option from '../select/option';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/autoComplete/autoComplete.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 const prefixCls = cssClasses.PREFIX;
 const sizeSet = strings.SIZE;
 const positionSet = strings.POSITION;

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

@@ -14,7 +14,6 @@ declare class Button extends React.PureComponent<ButtonProps> {
         loading: import("prop-types").Requireable<boolean>;
         prefixCls: import("prop-types").Requireable<string>;
         icon: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-        iconType: import("prop-types").Requireable<import("prop-types").ReactElementLike>;
         iconSize: import("prop-types").Requireable<string>;
         noHorizontalPadding: import("prop-types").Requireable<string | boolean | any[]>;
         children: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;

package/lib/es/button/index.js

@@ -12,8 +12,7 @@ class Button extends React.PureComponent {
   render() {
     const props = _Object$assign({}, this.props);
 
-    const hasIcon = Boolean(props.icon || props.iconType); // TODO: iconType needs to be confirmed
-
+    const hasIcon = Boolean(props.icon);
     const isLoading = Boolean(props.loading);
     const isDisabled = Boolean(props.disabled);
 

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

@@ -7,6 +7,7 @@ import Input from '../input/index';
 import { PopoverProps } from '../popover/index';
 import { CascaderData, Entities, Entity, Data } from './item';
 import { Motion } from '../_base/base';
+export { CascaderType, ShowNextType } from '@douyinfe/semi-foundation/cascader/foundation';
 export { CascaderData, Entity, Data, CascaderItemProps } from './item';
 export interface ScrollPanelProps extends BasicScrollPanelProps {
     activeNode: CascaderData;

package/lib/es/cascader/index.js

@@ -272,15 +272,27 @@ class Cascader extends BaseComponent {
     this.renderCustomTrigger = () => {
       const {
         disabled,
-        triggerRender
+        triggerRender,
+        multiple,
+        autoMergeValue
       } = this.props;
       const {
         selectedKeys,
         inputValue,
-        inputPlaceHolder
+        inputPlaceHolder,
+        mergedCheckedKeys,
+        checkedKeys
       } = this.state;
+      let realValue;
+
+      if (multiple) {
+        realValue = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      } else {
+        realValue = [...selectedKeys][0];
+      }
+
       return /*#__PURE__*/React.createElement(Trigger, {
-        value: [...selectedKeys][0],
+        value: realValue,
         inputValue: inputValue,
         onChange: this.handleInputChange,
         onClear: this.handleClear,

package/lib/es/datePicker/yearAndMonth.js

@@ -220,7 +220,7 @@ class YearAndMonth extends BaseComponent {
       className: prefix
     }, /*#__PURE__*/React.createElement(IconButton, {
       noHorizontalPadding: false,
-      iconType: /*#__PURE__*/React.createElement(IconChevronLeft, {
+      icon: /*#__PURE__*/React.createElement(IconChevronLeft, {
         size: iconSize
       }),
       size: buttonSize,

package/lib/es/form/hoc/withField.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
+import { WithFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
 import { CommonFieldProps, CommonexcludeType } from '../interface';
 import { Subtract } from 'utility-types';
 /**
@@ -8,5 +8,5 @@ import { Subtract } from 'utility-types';
  * 2. Insert <Label>
  * 3. Insert <ErrorMessage>
  */
-declare function withField<C extends React.ComponentType<React.ComponentProps<C>>, T extends React.ComponentType<Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps>>(Component: C, opts?: withFieldOption): T;
+declare function withField<C extends React.ComponentType<React.ComponentProps<C>>, T extends React.ComponentType<Subtract<React.ComponentProps<C>, CommonexcludeType> & CommonFieldProps>>(Component: C, opts?: WithFieldOption): T;
 export default withField;

package/lib/es/form/interface.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Subtract } from 'utility-types';
 import type { RuleItem } from 'async-validator';
 import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
-import { BaseFormApi as FormApi, FormState } from '@douyinfe/semi-foundation/lib/es/form/interface';
+import { BaseFormApi as FormApi, FormState, WithFieldOption } from '@douyinfe/semi-foundation/lib/es/form/interface';
 import { SelectProps } from '../select/index';
 import Option from '../select/option';
 import OptGroup from '../select/optionGroup';
@@ -10,7 +10,7 @@ import { CheckboxProps } from '../checkbox/index';
 import { RadioProps } from '../radio/index';
 import { ReactFieldError as FieldError } from './errorMessage';
 import { LabelProps } from './label';
-export { FormState, FormApi };
+export { FormState, FormApi, WithFieldOption };
 export declare type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
     field: string;

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

@@ -32,7 +32,6 @@ declare class IconButton extends PureComponent<IconButtonProps> {
         loading: PropTypes.Requireable<boolean>;
         prefixCls: PropTypes.Requireable<string>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        iconType: PropTypes.Requireable<PropTypes.ReactElementLike>;
         iconSize: PropTypes.Requireable<string>;
         noHorizontalPadding: PropTypes.Requireable<string | boolean | any[]>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;

package/lib/es/iconButton/index.js

@@ -108,7 +108,6 @@ IconButton.propTypes = {
   loading: PropTypes.bool,
   prefixCls: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.node]),
-  iconType: PropTypes.element,
   iconSize: PropTypes.oneOf(iconSizes),
   noHorizontalPadding: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.array]),
   children: PropTypes.node,

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

@@ -9,7 +9,7 @@ export { NoticeTransitionProps } from './NoticeTransition';
 export interface NoticeReactProps extends NoticeProps {
     style?: CSSProperties;
 }
-export { NoticeState, NotificationListProps, NotificationListState };
+export { NoticeState, NotificationListProps, NotificationListState, ConfigProps };
 export declare type NoticesInPosition = {
     top: NoticeInstance[];
     topLeft: NoticeInstance[];

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

@@ -29,6 +29,7 @@ export interface PopconfirmProps extends PopoverProps {
     onCancel?: (e: React.MouseEvent) => void;
     onConfirm?: (e: React.MouseEvent) => void;
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
 }
 export interface PopconfirmState {
     visible: boolean;
@@ -50,13 +51,14 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         cancelType: PropTypes.Requireable<string>;
         onCancel: PropTypes.Requireable<(...args: any[]) => any>;
         onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        zIndex: PropTypes.Requireable<number>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
         visible: PropTypes.Requireable<boolean>;
         defaultVisible: PropTypes.Requireable<boolean>;
         okButtonProps: PropTypes.Requireable<object>;
         cancelButtonProps: PropTypes.Requireable<object>;
         stopPropagation: PropTypes.Requireable<string | boolean>;
+        zIndex: PropTypes.Requireable<number>;
         trigger: PropTypes.Requireable<string>;
         position: PropTypes.Requireable<string>;
     };
@@ -72,6 +74,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         zIndex: number;
         onCancel: (...args: any[]) => void;
         onConfirm: (...args: any[]) => void;
+        onClickOutSide: (...args: any[]) => void;
     };
     constructor(props: PopconfirmProps);
     static getDerivedStateFromProps(props: PopconfirmProps, state: PopconfirmState): Partial<PopconfirmState>;
@@ -79,6 +82,7 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
     handleCancel: (e: React.MouseEvent) => void;
     handleConfirm: (e: React.MouseEvent) => void;
     handleVisibleChange: (visible: boolean) => void;
+    handleClickOutSide: (e: React.MouseEvent) => any;
     stopImmediatePropagation: (e: React.SyntheticEvent) => void;
     renderControls(): JSX.Element;
     renderConfirmPopCard(): JSX.Element;

package/lib/es/popconfirm/index.js

@@ -38,6 +38,8 @@ export default class Popconfirm extends BaseComponent {
 
     this.handleVisibleChange = visible => this.foundation.handleVisibleChange(visible);
 
+    this.handleClickOutSide = e => this.foundation.handleClickOutSide(e);
+
     this.stopImmediatePropagation = e => e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
 
     this.state = {
@@ -66,7 +68,8 @@ export default class Popconfirm extends BaseComponent {
       }),
       notifyConfirm: e => this.props.onConfirm(e),
       notifyCancel: e => this.props.onCancel(e),
-      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible),
+      notifyClickOutSide: e => this.props.onClickOutSide(e)
     });
   }
 
@@ -165,7 +168,8 @@ export default class Popconfirm extends BaseComponent {
     const popContent = this.renderConfirmPopCard();
     const popProps = {
       onVisibleChange: this.handleVisibleChange,
-      className: cssClasses.POPOVER
+      className: cssClasses.POPOVER,
+      onClickOutSide: this.handleClickOutSide
     };
 
     if (this.isControlled('visible')) {
@@ -196,13 +200,14 @@ Popconfirm.propTypes = {
   cancelType: PropTypes.string,
   onCancel: PropTypes.func,
   onConfirm: PropTypes.func,
-  zIndex: PropTypes.number,
+  onClickOutSide: PropTypes.func,
   onVisibleChange: PropTypes.func,
   visible: PropTypes.bool,
   defaultVisible: PropTypes.bool,
   okButtonProps: PropTypes.object,
   cancelButtonProps: PropTypes.object,
   stopPropagation: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  zIndex: PropTypes.number,
   // private
   trigger: PropTypes.string,
   position: PropTypes.string
@@ -221,5 +226,6 @@ Popconfirm.defaultProps = {
   prefixCls: cssClasses.PREFIX,
   zIndex: numbers.DEFAULT_Z_INDEX,
   onCancel: noop,
-  onConfirm: noop
+  onConfirm: noop,
+  onClickOutSide: noop
 };

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

@@ -22,6 +22,7 @@ export interface PopoverProps extends BaseProps {
     trigger?: Trigger;
     contentClassName?: string | any[];
     onVisibleChange?: (visible: boolean) => void;
+    onClickOutSide?: (e: React.MouseEvent) => void;
     showArrow?: boolean;
     spacing?: number;
     stopPropagation?: boolean | string;
@@ -50,6 +51,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         trigger: PropTypes.Validator<"hover" | "focus" | "click" | "custom">;
         contentClassName: PropTypes.Requireable<string | any[]>;
         onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClickOutSide: PropTypes.Requireable<(...args: any[]) => any>;
         style: PropTypes.Requireable<object>;
         spacing: PropTypes.Requireable<number>;
         zIndex: PropTypes.Requireable<number>;
@@ -79,8 +81,8 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         okText: string;
         position: string;
         prefixCls: string;
+        onClickOutSide: (...args: any[]) => void;
     };
-    constructor(props: PopoverProps);
     renderPopCard(): JSX.Element;
     render(): JSX.Element;
 }

package/lib/es/popover/index.js

@@ -21,17 +21,11 @@ import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/p
 import Tooltip from '../tooltip/index';
 import Arrow from './Arrow';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
+import { noop } from 'lodash-es';
 const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 
 class Popover extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      popConfirmVisible: false
-    };
-  }
-
   renderPopCard() {
     const {
       content,
@@ -107,6 +101,7 @@ Popover.propTypes = {
   trigger: PropTypes.oneOf(triggerSet).isRequired,
   contentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   onVisibleChange: PropTypes.func,
+  onClickOutSide: PropTypes.func,
   style: PropTypes.object,
   spacing: PropTypes.number,
   zIndex: PropTypes.number,
@@ -130,6 +125,7 @@ Popover.defaultProps = {
   cancelText: 'No',
   okText: 'Yes',
   position: 'bottom',
-  prefixCls: cssClasses.PREFIX
+  prefixCls: cssClasses.PREFIX,
+  onClickOutSide: noop
 };
 export default Popover;

package/lib/es/radio/context.d.ts

@@ -7,7 +7,7 @@ export declare type RadioMode = ArrayElement<typeof strings.MODE>;
 export interface RadioContextValue {
     mode?: RadioMode;
     radioGroup?: {
-        value?: any;
+        value?: string | number;
         isButtonRadio?: any;
         disabled?: boolean;
         prefixCls?: string;

package/lib/es/radio/radio.d.ts

@@ -13,7 +13,7 @@ export declare type RadioProps = {
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
-    value?: any;
+    value?: string | number;
     disabled?: boolean;
     prefixCls?: string;
     displayMode?: RadioDisplayMode;
@@ -59,7 +59,7 @@ declare class Radio extends BaseComponent<RadioProps, RadioState> {
     constructor(props: RadioProps);
     get adapter(): RadioAdapter;
     isInGroup(): {
-        value?: any;
+        value?: string | number;
         isButtonRadio?: any;
         disabled?: boolean;
         prefixCls?: string;

package/lib/es/radio/radioGroup.d.ts

@@ -8,8 +8,8 @@ import { ArrayElement } from '../_base/base';
 import { RadioType } from './radio';
 import { RadioGroupButtonSize, RadioMode } from './context';
 export interface OptionItem {
-    label?: string;
-    value?: string;
+    label?: React.ReactNode;
+    value?: string | number;
     disabled?: boolean;
     extra?: React.ReactNode;
     style?: React.CSSProperties;
@@ -17,11 +17,11 @@ export interface OptionItem {
 }
 export declare type Options = string[] | Array<OptionItem>;
 export declare type RadioGroupProps = {
-    defaultValue?: any;
+    defaultValue?: string | number;
     disabled?: boolean;
     name?: string;
     options?: Options;
-    value?: any;
+    value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
     style?: React.CSSProperties;

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

@@ -5,7 +5,6 @@ import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import Option, { OptionProps } from './option';
 import OptionGroup from './optionGroup';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 import { Position, TooltipProps } from '../tooltip';
 export { OptionProps } from './option';
 export { OptionGroupProps } from './optionGroup';

package/lib/es/select/index.js

@@ -22,7 +22,7 @@ import ConfigContext from '../configProvider/context';
 import SelectFoundation from '@douyinfe/semi-foundation/lib/es/select/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/lib/es/select/constants';
 import BaseComponent from '../_base/baseComponent';
-import { isEqual, isString, noop } from 'lodash-es';
+import { isEqual, isString, noop, get, isNumber } from 'lodash-es';
 import Tag from '../tag/index';
 import TagGroup from '../tag/group';
 import LocaleCosumer from '../locale/localeConsumer';
@@ -40,7 +40,6 @@ import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon } from '../_utils';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import '@douyinfe/semi-foundation/lib/es/select/select.css';
-import '@douyinfe/semi-foundation/lib/es/select/option.css';
 const prefixcls = cssClasses.PREFIX;
 const key = 0; // Notes: Use the label of the option as the identifier, that is, the option in Select, the value is allowed to be the same, but the label must be unique
 
@@ -178,9 +177,10 @@ class Select extends BaseComponent {
         } = _this.props;
 
         if (optionList && optionList.length) {
-          options = _mapInstanceProperty(optionList).call(optionList, itemOpt => _Object$assign({
+          options = _mapInstanceProperty(optionList).call(optionList, (itemOpt, index) => _Object$assign({
             _show: true,
-            _selected: false
+            _selected: false,
+            _scrollIndex: index
           }, itemOpt));
           optionGroups[0] = {
             children: options,
@@ -755,15 +755,21 @@ class Select extends BaseComponent {
     }
 
     if (virtualize) {
-      let minKey;
+      let minItemIndex = -1;
 
-      _forEachInstanceProperty(selections).call(selections, (v, k) => {
-        const tempKey = Number(String(k).match(/option-(.*)/)[1]);
-        minKey = typeof minKey === 'number' && minKey < tempKey ? minKey : tempKey;
+      _forEachInstanceProperty(selections).call(selections, item => {
+        const itemIndex = get(item, '_scrollIndex');
+        /* When the itemIndex is legal */
+
+        if (isNumber(itemIndex) && itemIndex >= 0) {
+          minItemIndex = minItemIndex !== -1 && minItemIndex < itemIndex ? minItemIndex : itemIndex;
+        }
       });
 
-      if (minKey) {
-        this.virtualizeListRef.current.scrollToItem(minKey, 'center');
+      if (minItemIndex !== -1) {
+        try {
+          this.virtualizeListRef.current.scrollToItem(minItemIndex, 'center');
+        } catch (error) {}
       }
     } else {
       this.foundation.updateScrollTop();

package/lib/es/select/option.js

@@ -144,14 +144,14 @@ class Option extends PureComponent {
       style: style
     }, showTick ? /*#__PURE__*/React.createElement("div", {
       className: selectedIconClassName
-    }, /*#__PURE__*/React.createElement(IconTick, null)) : null, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(IconTick, null)) : null, isString(children) ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-text")
     }, this.renderOptionContent({
       children,
       config,
       inputValue,
       prefixCls
-    })));
+    })) : children);
   }
 
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { OptionProps } from './option';
 import { OptionGroupProps } from './optionGroup';
-declare const generateOption: (child: React.ReactElement, parent?: any) => OptionProps;
+declare const generateOption: (child: React.ReactElement, parent: any, index: number) => OptionProps;
 declare const getOptionsFromGroup: (selectChildren: React.ReactNode) => {
     optionGroups: OptionGroupProps[];
     options: OptionProps[];

package/lib/es/select/utils.js

@@ -20,7 +20,7 @@ var __rest = this && this.__rest || function (s, e) {
 import React from 'react';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 
-const generateOption = (child, parent) => {
+const generateOption = (child, parent, index) => {
   const childProps = child.props;
 
   if (!child || !childProps) {
@@ -32,7 +32,8 @@ const generateOption = (child, parent) => {
     // Drop-down menu rendering priority label value, children, value in turn downgrade
     label: childProps.label || childProps.children || childProps.value,
     _show: true,
-    _selected: false
+    _selected: false,
+    _scrollIndex: index
   }, childProps), {
     _parentGroup: parent
   });
@@ -55,11 +56,13 @@ const getOptionsFromGroup = selectChildren => {
   const childNodes = _filterInstanceProperty(_context = React.Children.toArray(selectChildren)).call(_context, childNode => childNode && childNode.props);
 
   let type = '';
+  let optionIndex = -1;
 
   _forEachInstanceProperty(childNodes).call(childNodes, child => {
     if (child.type.isSelectOption) {
       type = 'option';
-      const option = generateOption(child);
+      optionIndex++;
+      const option = generateOption(child, undefined, optionIndex);
       emptyGroup.children.push(option);
       options.push(option);
     } else if (child.type.isSelectOptionGroup) {
@@ -74,7 +77,10 @@ const getOptionsFromGroup = selectChildren => {
 
       children = React.Children.toArray(children);
 
-      const childrenOption = _mapInstanceProperty(children).call(children, option => generateOption(option, restGroupProps));
+      const childrenOption = _mapInstanceProperty(children).call(children, option => {
+        optionIndex++;
+        return generateOption(option, restGroupProps, optionIndex);
+      });
 
       const group = _Object$assign(_Object$assign({}, child.props), {
         children: childrenOption,

package/lib/es/slider/index.js

@@ -399,6 +399,7 @@ export default class Slider extends BaseComponent {
       },
       onHandleMove: function (mousePos, isMin) {
         let stateChangeCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noop;
+        let clickTrack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
 
         const sliderDOMIsInRenderTree = _this.foundation.checkAndUpdateIsInRenderTreeState();
 
@@ -426,7 +427,8 @@ export default class Slider extends BaseComponent {
         if (!isEqual(_this.foundation.outPutValue(currentValue), outPutValue)) {
           onChange(outPutValue);
 
-          if (_this.foundation.valueFormatIsCorrect(value)) {
+          if (!clickTrack && _this.foundation.valueFormatIsCorrect(value)) {
+            // still require afterChangeCallback when click on the track directly, need skip here
             return false;
           }
 

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

@@ -8,7 +8,7 @@ export interface SpinProps {
     spinning?: boolean;
     indicator?: React.ReactNode;
     delay?: number;
-    tip?: string;
+    tip?: React.ReactNode;
     wrapperClassName?: string;
     style?: React.CSSProperties;
     childStyle?: React.CSSProperties;
@@ -25,7 +25,7 @@ declare class Spin extends BaseComponent<SpinProps, SpinState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         indicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         delay: PropTypes.Requireable<number>;
-        tip: PropTypes.Requireable<string>;
+        tip: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         wrapperClassName: PropTypes.Requireable<string>;
         childStyle: PropTypes.Requireable<object>;
         style: PropTypes.Requireable<object>;

package/lib/es/spin/index.js

@@ -107,7 +107,7 @@ Spin.propTypes = {
   children: PropTypes.node,
   indicator: PropTypes.node,
   delay: PropTypes.number,
-  tip: PropTypes.string,
+  tip: PropTypes.node,
   wrapperClassName: PropTypes.string,
   childStyle: PropTypes.object,
   style: PropTypes.object

package/lib/es/tabs/TabBar.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactNode, MouseEvent } from 'react';
+import React, { MouseEvent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { TabBarProps, PlainTab } from './interface';
+import { PlainTab, TabBarProps } from './interface';
 export interface TabBarState {
     endInd: number;
     rePosKey: number;
@@ -22,6 +22,8 @@ declare class TabBar extends React.Component<TabBarProps, TabBarState> {
         tabBarExtraContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         tabPosition: PropTypes.Requireable<string>;
         type: PropTypes.Requireable<string>;
+        closable: PropTypes.Requireable<boolean>;
+        deleteTabItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     uuid: string;
     constructor(props: TabBarProps);

package/lib/es/tabs/TabBar.js

@@ -24,7 +24,7 @@ import OverflowList from '../overflowList';
 import Dropdown from '../dropdown';
 import Button from '../button';
 import { isEmpty } from 'lodash-es';
-import { IconChevronRight, IconChevronLeft } from '@douyinfe/semi-icons';
+import { IconChevronLeft, IconChevronRight, IconClose } from '@douyinfe/semi-icons';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 
 class TabBar extends React.Component {
@@ -51,9 +51,15 @@ class TabBar extends React.Component {
 
     this.renderTabItem = panel => {
       const {
-        size
+        size,
+        type,
+        deleteTabItem
       } = this.props;
       const panelIcon = panel.icon ? this.renderIcon(panel.icon) : null;
+      const closableIcon = type === 'card' && panel.closable ? /*#__PURE__*/React.createElement(IconClose, {
+        className: "".concat(cssClasses.TABS_TAB, "-icon-close"),
+        onClick: e => deleteTabItem(panel.itemKey, e)
+      }) : null;
       let events = {};
       const key = panel.itemKey;
 
@@ -76,7 +82,7 @@ class TabBar extends React.Component {
       }, events, {
         className: className,
         key: this._getItemKey(key)
-      }), panelIcon, panel.tab);
+      }), panelIcon, panel.tab, closableIcon);
     };
 
     this.renderTabComponents = list => _mapInstanceProperty(list).call(list, panel => this.renderTabItem(panel));
@@ -278,6 +284,8 @@ TabBar.propTypes = {
   style: PropTypes.object,
   tabBarExtraContent: PropTypes.node,
   tabPosition: PropTypes.oneOf(strings.POSITION_MAP),
-  type: PropTypes.oneOf(strings.TYPE_MAP)
+  type: PropTypes.oneOf(strings.TYPE_MAP),
+  closable: PropTypes.bool,
+  deleteTabItem: PropTypes.func
 };
 export default TabBar;

package/lib/es/tabs/TabPane.d.ts

@@ -1,6 +1,6 @@
 import React, { PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
-import { TabPaneProps, PlainTab } from './interface';
+import { PlainTab, TabPaneProps } from './interface';
 declare class TabPane extends PureComponent<TabPaneProps> {
     static isTabPane: boolean;
     static contextType: React.Context<import("./interface").TabContextValue>;
@@ -12,6 +12,7 @@ declare class TabPane extends PureComponent<TabPaneProps> {
         itemKey: PropTypes.Requireable<string>;
         tab: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closable: PropTypes.Requireable<boolean>;
     };
     lastActiveKey: string;
     ref: React.RefObject<HTMLDivElement>;

package/lib/es/tabs/TabPane.js

@@ -15,7 +15,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { PureComponent, createRef } from 'react';
+import React, { createRef, PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tabs/constants';
@@ -131,6 +131,7 @@ TabPane.propTypes = {
   disabled: PropTypes.bool,
   itemKey: PropTypes.string,
   tab: PropTypes.node,
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  closable: PropTypes.bool
 };
 export default TabPane;