@douyinfe/semi-ui 2.19.0-alpha.8 → 2.19.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.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.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.0",
+        "@douyinfe/semi-foundation": "2.19.0",
+        "@douyinfe/semi-icons": "2.19.0",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.19.0-alpha.8",
+        "@douyinfe/semi-theme-default": "2.19.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": "c0ef56c31a5c13adb050fbdb611e51da881f0cb8",
     "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.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>

package/popconfirm/index.tsx

@@ -175,7 +175,7 @@ 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
@@ -191,11 +191,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 +201,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/radio.tsx

@@ -92,6 +92,7 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         mode: '',
         type: 'default'
     };
+    static elementType: string;
 
     radioEntity: RadioInner;
     context!: RadioContextValue;
@@ -317,5 +318,6 @@ class Radio extends BaseComponent<RadioProps, RadioState> {
         );
     }
 }
+Radio.elementType = 'Radio';
 
 export default Radio;

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/_story/tag.stories.js

@@ -287,4 +287,54 @@ export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
 
 TagGroupCloseable.story = {
   name: 'tagGroup closable',
-}
+}
+
+export const Issue1107 = () => {
+    const src = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png';
+    const tagList = [
+        { color: 'white', children:'Douyin', avatarSrc:src },
+        { color: 'white', children:'Hotsoon', avatarSrc:src },
+        { color: 'white', children:'Capcut', avatarSrc:src },
+        { color: 'white', children:'Xingtu', avatarSrc:src },
+    ];
+    const divStyle = {
+        backgroundColor: 'var(--semi-color-fill-0)',
+        height: 35,
+        width: 300,
+        display: 'flex',
+        alignItems: 'center',
+        padding: '0 10px',
+        marginBottom: 30,
+    };
+    const tagGroupStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        width: 350,
+    };
+    return (
+        <>
+            <div style={divStyle}>
+                <TagGroup 
+                  maxTagCount={3} 
+                  style={tagGroupStyle} 
+                  tagList={tagList} 
+                  size="small" 
+                />
+            </div>
+            <div style={divStyle}>
+                <TagGroup
+                    maxTagCount={2}
+                    style={tagGroupStyle}
+                    tagList={tagList}
+                    size="large"
+                    avatarShape="circle"
+                    showPopover
+                />
+            </div>
+        </>
+    );
+};
+
+Issue1107.story = {
+  name: 'issue 1107',
+};

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: {},
@@ -103,24 +89,25 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
             if (mode === 'custom') {
                 return tag as React.ReactNode;
             }
-            if (!(tag as TagProps).size) {
-                (tag as TagProps).size = size;
+            const newTag = { ...(tag as TagProps) }; 
+            if (!(newTag as TagProps).size) {
+                (newTag as TagProps).size = size;
             }
             
-            if (!(tag as TagProps).avatarShape) {
-                (tag as TagProps).avatarShape = avatarShape;
+            if (!(newTag as TagProps).avatarShape) {
+                (newTag as TagProps).avatarShape = avatarShape;
             }
 
-            if (!(tag as TagProps).tagKey) {
-                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
-                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
+            if (!(newTag as TagProps).tagKey) {
+                if (typeof (newTag as TagProps).children === 'string' || typeof (newTag as TagProps).children === 'number') {
+                    (newTag as TagProps).tagKey = (newTag as TagProps).children as string | number;
                 } else {
-                    (tag as TagProps).tagKey = Math.random();
+                    (newTag as TagProps).tagKey = Math.random();
                 }
             }
-            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
-                if ((tag as TagProps).onClose) {
-                    (tag as TagProps).onClose(tagChildren, e, tagKey);
+            return <Tag {...(newTag as TagProps)} key={(newTag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
+                if ((newTag as TagProps).onClose) {
+                    (newTag as TagProps).onClose(tagChildren, e, tagKey);
                 }
                 onTagClose && onTagClose(tagChildren, e, tagKey);
             }} />;

package/tag/index.tsx

@@ -40,7 +40,7 @@ export default class Tag extends Component<TagProps, TagState> {
 
     static propTypes = {
         children: PropTypes.node,
-        tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
+        tagKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         size: PropTypes.oneOf(tagSize),
         color: PropTypes.oneOf(tagColors),
         type: PropTypes.oneOf(tagType),

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/tooltip/index.tsx

@@ -720,7 +720,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex:  (children as React.ReactElement).props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            tabIndex: (children as React.ReactElement).props.tabIndex || 0, // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            'data-popupid': id
         });
 
         // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference

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',
 };
 

package/treeSelect/_story/treeSelect.stories.js

@@ -469,6 +469,9 @@ export const Multiple = () => (
       // value={this.state.value}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       treeData={treeData2}
+      defaultOpen
+      defaultExpandAll
+      motion={false}
       multiple
       placeholder="Please select"
     />