@douyinfe/semi-ui 2.13.0-beta.0 → 2.13.0

package/gulpfile.js

@@ -73,14 +73,14 @@ gulp.task('compileScss', function compileScss() {
             }
         ))
         .pipe(sass({
-            importer: (url, prev) => {
+            importer: (url, prev, done) => {
                 const rootPath = path.join(__dirname, '../../');
                 let realUrl = url;
                 if (/~@douyinfe\/semi-foundation/.test(url)) {
                     const semiUIPath = path.join(rootPath, 'packages/semi-foundation');
                     realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
                 }
-                return { url: realUrl };
+                done({ file:realUrl });
             },
             charset: false
         }).on('error', sass.logError))
@@ -104,11 +104,11 @@ gulp.task('moveScssForCJS', function moveScssForCJS() {
     return moveScss(false);
 });
 
-gulp.task('compileLib', 
+gulp.task('compileLib',
     gulp.series(
         [
-            'cleanLib', 
-            'compileScss', 
+            'cleanLib',
+            'compileScss',
             gulp.parallel('moveScssForESM', 'moveScssForCJS'),
             gulp.parallel('compileTSXForESM', 'compileTSXForCJS')
         ]

package/lib/cjs/_base/base.css

@@ -507,4 +507,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+}
+
+.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--semi-color-fill-2);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-fill-1);
 }

package/lib/cjs/cascader/index.js

@@ -800,13 +800,15 @@ class Cascader extends _baseComponent.default {
           if ((0, _isArray.default)(realValue)) {
             normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
           } else {
-            normallizedValue = [[realValue]];
+            if (realValue !== undefined) {
+              normallizedValue = [[realValue]];
+            }
           } // formatValuePath is used to save value of valuePath
 
 
           const formatValuePath = [];
           (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i.value) : valueItem;
+            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
             formatValuePath.push(formatItem);
           }); // formatKeys is used to save key of value
 

package/lib/cjs/tagInput/index.js

@@ -306,7 +306,7 @@ class TagInput extends _baseComponent.default {
     const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
       ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
     });
-    const spanNotWithPopoverCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
+    const restTagsCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
     const restTags = [];
@@ -346,17 +346,18 @@ class TagInput extends _baseComponent.default {
         tags.push(item);
       }
     });
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover && !disabled ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
+
+    const restTagsContent = /*#__PURE__*/_react.default.createElement("span", {
+      className: restTagsCls
+    }, "+", tagsArray.length - maxTagCount);
+
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
       content: restTags,
       showArrow: true,
       trigger: "hover",
       position: "top",
       autoAdjustOverflow: true
-    }, restTagsPopoverProps), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"))
-    }, "+", tagsArray.length - maxTagCount)) : /*#__PURE__*/_react.default.createElement("span", {
-      className: spanNotWithPopoverCls
-    }, "+".concat(tagsArray.length - maxTagCount))));
+    }, restTagsPopoverProps), restTagsContent) : restTagsContent));
   }
 
   blur() {

package/lib/es/_base/base.css

@@ -507,4 +507,26 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-border-radius-large: 12px;
   --semi-border-radius-circle: 50%;
   --semi-border-radius-full: 9999px;
+}
+
+.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner {
+  background-color: rgba(0, 0, 0, 0);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb {
+  border-radius: 6px;
+  background: transparent;
+  transition: all 1s;
+}
+.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb {
+  background: var(--semi-color-fill-2);
+}
+.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover {
+  background: var(--semi-color-fill-1);
 }

package/lib/es/cascader/index.js

@@ -741,14 +741,16 @@ class Cascader extends BaseComponent {
           if (_Array$isArray(realValue)) {
             normallizedValue = _Array$isArray(realValue[0]) ? realValue : [realValue];
           } else {
-            normallizedValue = [[realValue]];
+            if (realValue !== undefined) {
+              normallizedValue = [[realValue]];
+            }
           } // formatValuePath is used to save value of valuePath
 
 
           const formatValuePath = [];
 
           _forEachInstanceProperty(normallizedValue).call(normallizedValue, valueItem => {
-            const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i.value) : valueItem;
+            const formatItem = onChangeWithObject ? _mapInstanceProperty(valueItem).call(valueItem, i => i === null || i === void 0 ? void 0 : i.value) : valueItem;
             formatValuePath.push(formatItem);
           }); // formatKeys is used to save key of value
 

package/lib/es/tagInput/index.js

@@ -272,7 +272,7 @@ class TagInput extends BaseComponent {
     const typoCls = cls("".concat(prefixCls, "-wrapper-typo"), {
       ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
     });
-    const spanNotWithPopoverCls = cls("".concat(prefixCls, "-wrapper-n"), {
+    const restTagsCls = cls("".concat(prefixCls, "-wrapper-n"), {
       ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
     });
     const restTags = [];
@@ -314,17 +314,16 @@ class TagInput extends BaseComponent {
       }
     });
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover && !disabled ? /*#__PURE__*/React.createElement(Popover, _Object$assign({
+    const restTagsContent = /*#__PURE__*/React.createElement("span", {
+      className: restTagsCls
+    }, "+", tagsArray.length - maxTagCount);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover ? /*#__PURE__*/React.createElement(Popover, _Object$assign({
       content: restTags,
       showArrow: true,
       trigger: "hover",
       position: "top",
       autoAdjustOverflow: true
-    }, restTagsPopoverProps), /*#__PURE__*/React.createElement("span", {
-      className: cls("".concat(prefixCls, "-wrapper-n"))
-    }, "+", tagsArray.length - maxTagCount)) : /*#__PURE__*/React.createElement("span", {
-      className: spanNotWithPopoverCls
-    }, "+".concat(tagsArray.length - maxTagCount))));
+    }, restTagsPopoverProps), restTagsContent) : restTagsContent));
   }
 
   blur() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.13.0-beta.0",
+    "version": "2.13.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.13.0-beta.0",
-        "@douyinfe/semi-foundation": "2.13.0-beta.0",
-        "@douyinfe/semi-icons": "2.13.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.13.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.13.0-beta.0",
+        "@douyinfe/semi-animation-react": "2.13.0",
+        "@douyinfe/semi-foundation": "2.13.0",
+        "@douyinfe/semi-icons": "2.13.0",
+        "@douyinfe/semi-illustrations": "2.13.0",
+        "@douyinfe/semi-theme-default": "2.13.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "3b7c0e399103443a467eca0ff77f233a11346c99",
+    "gitHead": "27671f7d0a04e5569c6bf16c0c6ea6c547a77016",
     "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.13.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.13.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/table/_story/v2/FixedOnHeaderRow/index.jsx

@@ -3,6 +3,9 @@ import { Table, Avatar, Toast } from '@douyinfe/semi-ui';
 import * as dateFns from 'date-fns';
 
 App.storyName = 'fix onHeaderRow';
+App.parameters = {
+    chromatic: { disableSnapshot: true },
+};
 
 /**
  * test with cypress

package/tabs/_story/tabs.stories.js

@@ -867,3 +867,39 @@ export const TabListChange = () => <TabListChangeDemo />;
 TabListChange.story = {
   name: 'tablist change',
 };
+
+
+class TabClosableDemo extends React.Component {
+  constructor(props){
+    super(props);
+      this.state = {
+          tabList: [
+              {tab: '文档', itemKey:'1', text:'文档', closable:true},
+              {tab: '快速起步', itemKey:'2', text:'快速起步', closable:true},
+              {tab: '帮助', itemKey:'3', text:'帮助'},
+          ]
+      }
+  }
+  close(key){
+    const newTabList = [...this.state.tabList];
+    const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
+    newTabList.splice(closeIndex, 1);
+    this.setState({tabList:newTabList});
+  }
+
+  render() {
+    return (
+      <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}>
+          {
+            this.state.tabList.map(t=><TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>{t.text}</TabPane>)
+          }
+      </Tabs>
+    );
+  }
+}
+
+export const TabClosable = () => <TabClosableDemo />;
+
+TabClosable.story = {
+  name: 'tab closable',
+};

package/tag/_story/tag.stories.js

@@ -155,7 +155,7 @@ export const TagAvatar = () => {
     'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
   return (
     <div style={{ margin: 10 }}>
-      <Tag avatarSrc={avatarSrc} avatarShape={'square'}>
+      <Tag avatarSrc={avatarSrc} avatarShape={'square'} onClick={()=>{console.log('如果能重来，我要做李白')}}>
         李白
       </Tag>
       <br />

package/tagInput/index.tsx

@@ -333,7 +333,7 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
         const typoCls = cls(`${prefixCls}-wrapper-typo`, {
             [`${prefixCls}-wrapper-typo-disabled`]: disabled
         });
-        const spanNotWithPopoverCls = cls(`${prefixCls}-wrapper-n`, {
+        const restTagsCls = cls(`${prefixCls}-wrapper-n`, {
             [`${prefixCls}-wrapper-n-disabled`]: disabled
         });
         const restTags: Array<React.ReactNode> = [];
@@ -372,13 +372,18 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                 tags.push(item);
             }
         });
+
+        const restTagsContent = (
+            <span className={restTagsCls}>+{tagsArray.length - maxTagCount}</span>
+        );
+
         return (
             <>
                 {tags}
                 {
                     restTags.length > 0 &&
                     (
-                        showRestTagsPopover && !disabled ?
+                        showRestTagsPopover ?
                             (
                                 <Popover
                                     content={restTags}
@@ -388,16 +393,9 @@ class TagInput extends BaseComponent<TagInputProps, TagInputState> {
                                     autoAdjustOverflow
                                     {...restTagsPopoverProps}
                                 >
-                                    <span className={cls(`${prefixCls}-wrapper-n`)}>
-                                        +{tagsArray.length - maxTagCount}
-                                    </span>
+                                    {restTagsContent}
                                 </Popover>
-                            ) :
-                            (
-                                <span className={spanNotWithPopoverCls}>
-                                    {`+${tagsArray.length - maxTagCount}`}
-                                </span>
-                            )
+                            ) : restTagsContent
                     )
                 }
             </>

package/upload/_story/upload.stories.js

@@ -957,3 +957,155 @@ export const CustomListOperation = () => {
 CustomListOperation.story = {
   name: 'custom list operation',
 }
+
+
+export const TestReplaceFunc = () => (
+  <>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept=".md,image/*,video/*"
+      maxSize={mb1}
+      minSize={0}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        点击上传（最小0kB，最大1MB）
+      </Button>
+    </Upload>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept="image/*"
+      maxSize={mb1}
+      minSize={0}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        只接受image点击上传（最小0kB，最大1MB）
+      </Button>
+    </Upload>
+    <Upload
+      {...commonProps}
+      action={action}
+      accept=".md,image/*,video/*"
+      maxSize={mb1}
+      minSize={kb2}
+      transformFile={(fileInstance)=>{return fileInstance;}}
+    >
+      <Button icon={<IconUpload />} theme="light">
+        点击上传（最小200kB，最大1MB）
+      </Button>
+    </Upload>
+  </>
+);
+
+TestReplaceFunc.story = {
+  name: 'test replace func',
+};
+
+
+class InsertUpload extends React.Component {
+   constructor() {
+        super();
+        this.onFileChange = this.onFileChange.bind(this);
+        this.insert1 = this.insert1.bind(this);
+        this.insert2 = this.insert2.bind(this);
+        this.insert3 = this.insert3.bind(this);
+        this.uploadRef1 = React.createRef();
+        this.uploadRef2 = React.createRef();
+        this.uploadRef3 = React.createRef();
+        this.file = null;
+    }
+
+    onFileChange(file) {
+      delete file[0].uid;
+      this.file = file;
+    }
+
+    insert1() {
+      // test file number limit
+      this.uploadRef1.current.insert(this.file, 0);
+    }
+
+    insert2() {
+      this.uploadRef2.current.insert(this.file, 0);
+    }
+
+    insert3() {
+      // test size limit
+      this.uploadRef3.current.insert(this.file, 0);
+    }
+
+    render() {
+        let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
+        return (
+            <div>
+                <Upload
+                    action={action}
+                    ref={this.uploadRef1}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={0}
+                    limit={1}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 limit 1
+                    </Button>
+                </Upload>
+                <Upload
+                    action={action}
+                    ref={this.uploadRef2}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={0}
+                    limit={2}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 limit 2
+                    </Button>
+                </Upload>
+                <Upload
+                    {...commonProps}
+                    action={action}
+                    ref={this.uploadRef3}
+                    accept=".md,image/*,video/*"
+                    onSuccess={(...v) => console.log(...v)}
+                    onError={(...v) => console.log(...v)}
+                    onFileChange={this.onFileChange}
+                    maxSize={mb1}
+                    minSize={kb2}
+                    limit={1}
+                    transformFile={(fileInstance)=>{return fileInstance;}}
+                >
+                    <Button icon={<IconPlus />} theme="light" style={{ marginRight: 8 }}>
+                        选择文件 size 限制
+                    </Button>
+                </Upload>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert1}>
+                  插入首项上传1
+                </Button>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert2}>
+                  插入首项上传2
+                </Button>
+                <Button icon={<IconUpload />} theme="light" onClick={this.insert3}>
+                  插入首项上传3
+                </Button>
+            </div>
+        );
+    }
+}
+
+export const Insert = () => <InsertUpload></InsertUpload>;
+
+Insert.story = {
+  name: 'insert',
+};