@douyinfe/semi-ui 2.19.0-alpha.8 → 2.19.1-alpha.0

package/lib/es/typography/util.js

@@ -1,6 +1,3 @@
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import ReactDOM from 'react-dom';
 import React from 'react';
 /**
@@ -25,13 +22,8 @@ function pxToNumber(value) {
 function styleToString(style) {
   // There are some different behavior between Firefox & Chrome.
   // We have to handle this ourself.
-  const styleNames = _sliceInstanceProperty(Array.prototype).apply(style);
-
-  return _mapInstanceProperty(styleNames).call(styleNames, name => {
-    var _context;
-
-    return _concatInstanceProperty(_context = "".concat(name, ": ")).call(_context, style.getPropertyValue(name), ";");
-  }).join('');
+  const styleNames = Array.prototype.slice.apply(style);
+  return styleNames.map(name => "".concat(name, ": ").concat(style.getPropertyValue(name), ";")).join('');
 }
 
 const getRenderText = function (originEle, rows) {
@@ -77,9 +69,7 @@ const getRenderText = function (originEle, rows) {
   const ellipsisTextNode = document.createTextNode(suffix);
   ellipsisContentHolder.appendChild(ellipsisTextNode);
   ellipsisContainer.appendChild(ellipsisContentHolder);
-
-  _mapInstanceProperty(fixedContent).call(fixedContent, node => node && ellipsisContainer.appendChild(node.cloneNode(true))); // Append before fixed nodes
-
+  fixedContent.map(node => node && ellipsisContainer.appendChild(node.cloneNode(true))); // Append before fixed nodes
 
   function appendChildNode(node) {
     ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
@@ -93,10 +83,10 @@ const getRenderText = function (originEle, rows) {
     }
 
     if (ellipsisPos === 'end' || pos > end - pos) {
-      return _sliceInstanceProperty(text).call(text, 0, pos) + ellipsisStr;
+      return text.slice(0, pos) + ellipsisStr;
     }
 
-    return _sliceInstanceProperty(text).call(text, 0, pos) + ellipsisStr + _sliceInstanceProperty(text).call(text, end - pos, end);
+    return text.slice(0, pos) + ellipsisStr + text.slice(end - pos, end);
   } // Get maximum text
 
 

package/lib/es/upload/fileCard.js

@@ -1,4 +1,3 @@
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
@@ -15,7 +14,7 @@ const prefixCls = cssClasses.PREFIX;
 
 const ErrorSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     focusable: false,
     "aria-hidden": true,
     width: "16",
@@ -38,7 +37,7 @@ const ErrorSvg = function () {
 
 const ReplaceSvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     focusable: false,
     "aria-hidden": true,
     width: "28",
@@ -67,7 +66,7 @@ const ReplaceSvg = function () {
 
 const DirectorySvg = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return /*#__PURE__*/React.createElement("svg", _Object$assign({
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
     focusable: false,
     "aria-hidden": true,
     width: "24",

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

@@ -140,7 +140,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         style: PropTypes.Requireable<object>;
         timeout: PropTypes.Requireable<number>;
         transformFile: PropTypes.Requireable<(...args: any[]) => any>;
-        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        uploadTrigger: PropTypes.Requireable<"custom" | "auto">;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
         withCredentials: PropTypes.Requireable<boolean>;

package/lib/es/upload/index.js

@@ -1,8 +1,5 @@
 import _pick from "lodash/pick";
 import _noop from "lodash/noop";
-import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 
 /* eslint-disable max-len */
 import React from 'react';
@@ -99,8 +96,6 @@ class Upload extends BaseComponent {
     };
 
     this.renderFile = (file, index, locale) => {
-      var _context;
-
       const {
         name,
         status,
@@ -132,13 +127,13 @@ class Upload extends BaseComponent {
         this.replace(index);
       };
 
-      const fileCardProps = _Object$assign(_Object$assign(_Object$assign({}, _pick(this.props, ['showRetry', 'showReplace', ''])), file), {
+      const fileCardProps = Object.assign(Object.assign(Object.assign({}, _pick(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
-        key: uid || _concatInstanceProperty(_context = "".concat(name)).call(_context, index),
+        key: uid || "".concat(name).concat(index),
         style: itemStyle,
         disabled,
         showPicInfo,
@@ -159,7 +154,7 @@ class Upload extends BaseComponent {
       }
 
       if (typeof renderFileItem === 'undefined') {
-        return /*#__PURE__*/React.createElement(FileCard, _Object$assign({}, fileCardProps));
+        return /*#__PURE__*/React.createElement(FileCard, Object.assign({}, fileCardProps));
       } else {
         return renderFileItem(fileCardProps);
       }
@@ -225,12 +220,12 @@ class Upload extends BaseComponent {
       };
 
       if (draggable) {
-        _Object$assign(addContentProps, draggableProps, {
+        Object.assign(addContentProps, draggableProps, {
           className: cls(uploadAddCls, dragAreaCls)
         });
       }
 
-      const addContent = /*#__PURE__*/React.createElement("div", _Object$assign({}, addContentProps, {
+      const addContent = /*#__PURE__*/React.createElement("div", Object.assign({}, addContentProps, {
         "x-semi-prop": "children"
       }), children);
 
@@ -244,11 +239,11 @@ class Upload extends BaseComponent {
 
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
-      }, locale => /*#__PURE__*/React.createElement("div", _Object$assign({}, containerProps), /*#__PURE__*/React.createElement("div", {
+      }, locale => /*#__PURE__*/React.createElement("div", Object.assign({}, containerProps), /*#__PURE__*/React.createElement("div", {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, fileList.map((file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -276,7 +271,7 @@ class Upload extends BaseComponent {
 
       return /*#__PURE__*/React.createElement(LocaleConsumer, {
         componentName: "Upload"
-      }, locale => /*#__PURE__*/React.createElement("div", _Object$assign({}, containerProps), showTitle ? /*#__PURE__*/React.createElement("div", {
+      }, locale => /*#__PURE__*/React.createElement("div", Object.assign({}, containerProps), showTitle ? /*#__PURE__*/React.createElement("div", {
         className: titleCls
       }, /*#__PURE__*/React.createElement("span", {
         className: "".concat(titleCls, "-choosen")
@@ -289,7 +284,7 @@ class Upload extends BaseComponent {
         className: mainCls,
         role: "list",
         "aria-label": "file list"
-      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
+      }, fileList.map((file, index) => this.renderFile(file, index, locale)))));
     };
 
     this.onDrop = e => {
@@ -423,7 +418,7 @@ class Upload extends BaseComponent {
   }
 
   get adapter() {
-    return _Object$assign(_Object$assign({}, super.adapter), {
+    return Object.assign(Object.assign({}, super.adapter), {
       notifyFileSelect: files => this.props.onFileChange(files),
       notifyError: (error, fileInstance, fileList, xhr) => this.props.onError(error, fileInstance, fileList, xhr),
       notifySuccess: (responseBody, file, fileList) => this.props.onSuccess(responseBody, file, fileList),
@@ -540,7 +535,7 @@ class Upload extends BaseComponent {
       className: uploadCls,
       style: style,
       "x-prompt-pos": promptPosition
-    }, /*#__PURE__*/React.createElement("input", _Object$assign({
+    }, /*#__PURE__*/React.createElement("input", Object.assign({
       key: this.state.inputKey,
       capture: capture,
       multiple: multiple,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.19.0-alpha.8",
+    "version": "2.19.1-alpha.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -13,13 +13,12 @@
         "prepublishOnly": "npm run clean && npm run build:lib && npm run build:js && npm run build:css"
     },
     "dependencies": {
-        "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.19.0-alpha.8",
-        "@douyinfe/semi-foundation": "2.19.0-alpha.8",
-        "@douyinfe/semi-icons": "2.19.0-alpha.8",
+        "@douyinfe/semi-animation-react": "2.19.1-alpha.0",
+        "@douyinfe/semi-foundation": "2.19.1-alpha.0",
+        "@douyinfe/semi-icons": "2.19.1-alpha.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.19.0-alpha.8",
+        "@douyinfe/semi-theme-default": "2.19.1-alpha.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -66,13 +65,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "fef0097c01c675980e383efb45f182a2a4f2a507",
+    "gitHead": "e1114c024da873992ece70f03db5afbe1315a99e",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.19.0-alpha.8",
+        "@douyinfe/semi-scss-compile": "2.19.1-alpha.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

package/popconfirm/_story/popconfirm.stories.js

@@ -44,7 +44,7 @@ Simple.story = {
 export const _Button = () => (
   <div>
     <div style={style}>
-      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆">
+      <Popconfirm position="bottomLeft" title="确定是否要保存此修改？" content="此修改将不可逆此修改将不可逆此修改将不可逆此修">
         <Button>Save</Button>
       </Popconfirm>
     </div>
@@ -167,40 +167,4 @@ export const ClickOutSideDemo = () => {
 
 ClickOutSideDemo.story = {
   name: 'ClickOutSideDemo',
-};
-
-export const PromiseCallback = () => {
-  const onConfirm = () => {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        console.log('ccc');
-        resolve(1);
-      }, 2000)
-    })
-  };
-
-  const onCancel = () => {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        console.log('ccc');
-        reject(1);
-      }, 2000)
-    })
-  };
-
-  return (
-    <Popconfirm
-      title="确定是否要保存此修改？"
-      content="此修改将不可逆"
-      onConfirm={onConfirm}
-      onCancel={onCancel}
-    >
-      <Button>保存</Button>
-    </Popconfirm>
-  );
-};
-
-PromiseCallback.story = {
-  name: 'PromiseCallbackDemo',
-};
-
+};

package/popconfirm/index.tsx

@@ -35,16 +35,14 @@ export interface PopconfirmProps extends PopoverProps {
     zIndex?: number;
     trigger?: Trigger;
     position?: Position;
-    onCancel?: (e: React.MouseEvent) => Promise<any> | void;
-    onConfirm?: (e: React.MouseEvent) => Promise<any> | void;
+    onCancel?: (e: React.MouseEvent) => void;
+    onConfirm?: (e: React.MouseEvent) => void;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
 }
 
 export interface PopconfirmState {
     visible: boolean;
-    cancelLoading: boolean;
-    confirmLoading: boolean;
 }
 
 interface PopProps {
@@ -101,8 +99,6 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         super(props);
 
         this.state = {
-            cancelLoading: false,
-            confirmLoading: false,
             visible: props.defaultVisible || false,
         };
 
@@ -126,10 +122,8 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
         return {
             ...super.adapter,
             setVisible: (visible: boolean): void => this.setState({ visible }),
-            updateConfirmLoading: (loading: boolean): void => this.setState({ confirmLoading: loading }),
-            updateCancelLoading: (loading: boolean): void => this.setState({ cancelLoading: loading }),
-            notifyConfirm: (e: React.MouseEvent): Promise<any> | void => this.props.onConfirm(e),
-            notifyCancel: (e: React.MouseEvent): Promise<any> | void => this.props.onCancel(e),
+            notifyConfirm: (e: React.MouseEvent): void => this.props.onConfirm(e),
+            notifyCancel: (e: React.MouseEvent): void => this.props.onCancel(e),
             notifyVisibleChange: (visible: boolean): void => this.props.onVisibleChange(visible),
             notifyClickOutSide: (e: React.MouseEvent) => this.props.onClickOutSide(e),
         };
@@ -147,15 +141,14 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
 
     renderControls() {
         const { okText, cancelText, okType, cancelType, cancelButtonProps, okButtonProps } = this.props;
-        const { cancelLoading, confirmLoading } = this.state;
         return (
             <LocaleConsumer componentName="Popconfirm">
                 {(locale: LocaleObject['Popconfirm'], localeCode: string) => (
                     <>
-                        <Button type={cancelType} onClick={this.handleCancel} loading={cancelLoading} {...cancelButtonProps}>
+                        <Button type={cancelType} onClick={this.handleCancel} {...cancelButtonProps}>
                             {cancelText || get(locale, 'cancel')}
                         </Button>
-                        <Button type={okType} theme="solid" onClick={this.handleConfirm} loading={confirmLoading} {...okButtonProps}>
+                        <Button type={okType} theme="solid" onClick={this.handleConfirm} {...okButtonProps}>
                             {okText || get(locale, 'confirm')}
                         </Button>
                     </>
@@ -175,10 +168,9 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
             }
         );
         const showTitle = title !== null && typeof title !== 'undefined';
-        const showContent = content !== null || typeof content !== 'undefined';
+        const showContent = !(content === null || typeof content === 'undefined');
 
         return (
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
             <div className={popCardCls} onClick={this.stopImmediatePropagation} style={style}>
                 <div className={`${prefixCls}-inner`}>
                     <div className={`${prefixCls}-header`}>
@@ -191,11 +183,6 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
                                     {title}
                                 </div>
                             ) : null}
-                            {showContent ? (
-                                <div className={`${prefixCls}-header-content`} x-semi-prop="content">
-                                    {content}
-                                </div>
-                            ) : null}
                         </div>
                         <Button
                             className={`${prefixCls}-btn-close`}
@@ -206,6 +193,11 @@ export default class Popconfirm extends BaseComponent<PopconfirmProps, Popconfir
                             onClick={this.handleCancel}
                         />
                     </div>
+                    {showContent ? (
+                        <div className={`${prefixCls}-body`} x-semi-prop="content">
+                            {content}
+                        </div>
+                    ) : null} 
                     <div className={`${prefixCls}-footer`}>{this.renderControls()}</div>
                 </div>
             </div>

package/radio/_story/radio.stories.js

@@ -254,18 +254,18 @@ _RadioGroup.story = {
 
 export const RadioWithVertical = () => {
   return (
-    <Radio.Group direction="vertical">
-      <Radio value="A">
+    <Radio.Group>
+      <Radio value="A" displayMode="vertical">
         无限长的一串字The Storybook webapp UI can be customised with this addon. It can be used to
         change the header, show/hide various UI elements and to enable full-screen mode by default.
       </Radio>
-      <Radio value="C">
+      <Radio value="C" displayMode="vertical">
         C
       </Radio>
-      <Radio value="D">
+      <Radio value="D" displayMode="vertical">
         D
       </Radio>
-      <Radio value="E">
+      <Radio value="E" displayMode="vertical">
         E
       </Radio>
     </Radio.Group>

package/radio/radio.tsx

@@ -268,25 +268,20 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
             [`${prefix}-addon-buttonRadio-${buttonSize}`]: isButtonRadio && buttonSize,
             [`${prefix}-focus`]: focusVisible && isButtonRadio,
         }, addonClassName);
-        const renderContent = () => {
-            if (!children && !extra) {
-                return null;
-            }
-            return (
-                <div className={cls([`${prefix}-content`, { [`${prefix}-isCardRadioGroup_content`]: isCardRadioGroup }])}>
-                    {children ? (
-                        <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
-                            {children}
-                        </span>
-                    ) : null}
-                    {extra && !isButtonRadio ? (
-                        <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
-                            {extra}
-                        </div>
-                    ) : null}
-                </div>
-            );
-        };
+        const renderContent = () => (
+            <>
+                {children ? (
+                    <span className={addonCls} style={addonStyle} id={addonId} x-semi-prop="children">
+                        {children}
+                    </span>
+                ) : null}
+                {extra && !isButtonRadio ? (
+                    <div className={`${prefix}-extra`} id={extraId} x-semi-prop="extra">
+                        {extra}
+                    </div>
+                ) : null}
+            </>
+        );
 
         return (
             <label
@@ -312,7 +307,11 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
                     onInputFocus={this.handleFocusVisible}
                     onInputBlur={this.handleBlur}
                 />
-                {renderContent()}
+                {
+                    isCardRadioGroup ?
+                        <div className={`${prefix}-isCardRadioGroup_content`}>{renderContent()}</div> :
+                        renderContent()
+                }
             </label>
         );
     }

package/radio/radioGroup.tsx

@@ -88,7 +88,7 @@ class RadioGroup extends BaseComponent<RadioGroupProps, RadioGroupState> {
     constructor(props: RadioGroupProps) {
         super(props);
         this.state = {
-            value: props.value || props.defaultValue,
+            value: undefined,
         };
         this.foundation = new RadioGroupFoundation(this.adapter);
     }

package/tabs/_story/Demo.tsx

@@ -11,7 +11,16 @@ const Demo = () => {
 
     return (
         <div>
-            <Tabs defaultActiveKey="1"
+            <Tabs 
+                defaultActiveKey="1"
+                renderTabBar={(tabBarProps, DefaultTabBar) => {
+                    return (
+                        <div className="tab-bar-box">
+                            这是二次封装的Tab Bar，当前ActiveKey：{tabBarProps.activeKey}
+                            <DefaultTabBar {...tabBarProps} />
+                        </div>
+                    );
+                }}
                 tabPaneMotion>
                 {
                     tabPaneList.map((item, index) => {
@@ -19,12 +28,12 @@ const Demo = () => {
                             <TabPane tab={item} itemKey={index.toString()} key={item}>
                                 { item + index }
                             </TabPane>
-                        )
+                        );
                     })
                 }
             </Tabs>
         </div>
-    )
-}
+    );
+};
 
-export default Demo
+export default Demo;

package/tabs/interface.ts

@@ -1,5 +1,6 @@
 import React, { ComponentType, CSSProperties, MouseEvent, ReactNode } from 'react';
 import { Motion } from '../_base/base';
+import TabBar from './TabBar';
 
 export type TabType = 'line' | 'card' | 'button';
 export type TabSize = 'small' | 'medium' | 'large';
@@ -25,7 +26,7 @@ export interface TabsProps {
     lazyRender?: boolean;
     onChange?: (activeKey: string) => void;
     onTabClick?: (activeKey: string, e: MouseEvent<Element>) => void;
-    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: ComponentType) => ReactNode;
+    renderTabBar?: (tabBarProps: TabBarProps, defaultTabBar: typeof TabBar) => ReactNode;
     size?: TabSize;
     style?: CSSProperties;
     tabBarClassName?: string;
@@ -54,7 +55,7 @@ export interface TabBarProps {
     dropdownStyle?: CSSProperties;
     closable?: boolean;
     deleteTabItem?: (tabKey: string, event: MouseEvent<Element>) => void;
-    handleKeyDown?:  (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
+    handleKeyDown?: (event: React.KeyboardEvent, itemKey: string, closable: boolean) => void;
 }
 
 export interface TabPaneProps {

package/tag/group.tsx

@@ -3,27 +3,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/tag/constants';
 import Tag from './index';
-import Popover, { PopoverProps } from '../popover/index';
-import { AvatarShape, TagProps } from './interface';
+import Popover from '../popover/index';
+import { AvatarShape, TagProps, TagGroupProps } from './interface';
 
 const prefixCls = cssClasses.PREFIX;
 const tagSize = strings.TAG_SIZE;
 const avatarShapeSet = strings.AVATAR_SHAPE;
 
-export interface TagGroupProps<T> {
-    style?: React.CSSProperties;
-    className?: string;
-    maxTagCount?: number;
-    restCount?: number;
-    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
-    size?: 'small' | 'large';
-    showPopover?: boolean;
-    popoverProps?: PopoverProps;
-    avatarShape?: AvatarShape;
-    mode?: string;
-    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
-}
-
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     static defaultProps = {
         style: {},

package/tag/interface.ts

@@ -1,3 +1,5 @@
+import { PopoverProps } from '../popover/index';
+
 export type TagColor =
     | 'amber'
     | 'blue'
@@ -39,14 +41,16 @@ export interface TagProps {
     tabIndex?: number; // use internal, when tag in taInput, we want to use left arrow and right arrow to control the tag focus, so the tabIndex need to be -1. 
 }
 
-export interface TagGroupProps {
+export interface TagGroupProps<T> {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
-    tagList?: (TagProps | React.ReactNode)[];
+    restCount?: number;
+    tagList?: (T extends 'custom' ? React.ReactNode : TagProps)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
-    popoverProps?: any; // TODO: 替换成PopoverProps
+    popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
-    mode?: string; // TODO: check 文档里没有这个api
-}
+    mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
+}

package/transfer/_story/transfer.stories.js

@@ -209,9 +209,9 @@ const ControlledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControlledTransfer />;
+export const ControlledTransferDemo = () => <ControlledTransfer />;
 
-ControlledTransfer.story = {
+ControlledTransferDemo.story = {
   name: '受控Transfer',
 };