Merge branch 'main' of github.com:DouyinFE/semi-design

README-zh_CN.md

@@ -9,8 +9,9 @@
     
 <div align="center">
 
-[![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] [![LICENSE][license-badge]][license-url] 
+[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![FIGMA][figma-badge]][figma-url] ![Design Token][Design Token] 
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]
+[![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)
 
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
@@ -112,10 +113,13 @@ Semi UI 支持所有主流浏览器。
 
 # 👐 贡献指南
 
-阅读贡献指南了解我们的开发流程，包括开发规范、测试规范和构建规范等。
+阅读贡献指南了解我们的开发流程，包括开发规范、测试规范和构建规范等： [CONTRIBUTING](CONTRIBUTING.md)
 
-[CONTRIBUTING](CONTRIBUTING.md)
 
+# 📰 关注我们的动态
+* [Follow on Twitter](https://twitter.com/SemiDesignUI)
+* [Follow on Medium](https://medium.com/@semi-design)
+* [Follow on Dev.to](https://dev.to/semidesign)
 
 # 👨‍👨‍👧‍👦 交流群
 

README.md

@@ -9,8 +9,9 @@
     
 <div align="center">
 
-[![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url]  ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-url] [![LICENSE][license-badge]][license-url]
+[![LICENSE][license-badge]][license-url] [![NPM][npm-badge]][npm-url] [![CONTRIBUTORS][contributors-badge]][contributors-url]  ![Design Token][Design Token] [![FIGMA][figma-badge]][figma-url] 
 [![BUILD-JS][build-js-badge]][build-js-url] [![BUILD-CSS][build-css-badge]][build-css-url] [![CODECOV][codecov-badge]][codecov-url] [![Chromatic][chromatic-badge]][chromatic-url] [![Cypress][cypress-badge]][cypress-url]
+[![Twitter Follow](https://img.shields.io/twitter/follow/SemiDesignUI?style=social)](https://twitter.com/SemiDesignUI)
 
 [npm-badge]: https://img.shields.io/npm/v/@douyinfe/semi-ui.svg
 [contributors-badge]: https://img.shields.io/github/contributors/DouyinFE/semi-design
@@ -35,6 +36,7 @@
 [build-css-badge]: https://img.badgesize.io/https:/unpkg.com/@douyinfe/semi-ui/dist/css/semi.min.css?label=semi.min.css&compression=gzip
 [build-css-url]: https://unpkg.com/browse/@douyinfe/semi-ui/dist/css/semi.min.css
 
+
 </div>
 
 <p>
@@ -93,16 +95,16 @@ And [Semi UI Doc Site](https://semi.design/en-US/) has hundreds of editable exam
 * [Semi DSM](https://semi.design/dsm)
 * [Semi Design2Code](https://semi.design/code/en-US)
 * [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81)
-* [Quick Start](https://semi.design/zh-CN/start/getting-started)
-* [Components Overview](https://semi.design/zh-CN/start/overview)
-* [Customizing Themes](https://semi.design/zh-CN/start/customize-theme)
-* [Design Tokens](https://semi.design/zh-CN/basic/tokens)
-* [Dark Mode](https://semi.design/zh-CN/start/dark-mode)
-* [Semi Icons](https://semi.design/zh-CN/basic/icon)
-* [Global Config](https://semi.design/zh-CN/other/configprovider)
-* [Internationalization](https://semi.design/zh-CN/other/locale)
-* [FAQ](https://semi.design/zh-CN/start/faq)
-* [CHANGELOG](https://semi.design/zh-CN/start/changelog)
+* [Quick Start](https://semi.design/en-US/start/getting-started)
+* [Components Overview](https://semi.design/en-US/start/overview)
+* [Customizing Themes](https://semi.design/en-US/start/customize-theme)
+* [Design Tokens](https://semi.design/en-US/basic/tokens)
+* [Dark Mode](https://semi.design/en-US/start/dark-mode)
+* [Semi Icons](https://semi.design/en-US/basic/icon)
+* [Global Config](https://semi.design/en-US/other/configprovider)
+* [Internationalization](https://semi.design/en-US/other/locale)
+* [FAQ](https://semi.design/en-US/start/faq)
+* [CHANGELOG](https://semi.design/en-US/start/changelog)
 
 # 👌 Platform Support
 
@@ -118,6 +120,10 @@ Read the contributing guide to learn about our development process, how to propo
 
 See [CONTRIBUTING](CONTRIBUTING-en-US.md) documentation.
 
+# 📰 News about Semi UI
+* [Follow on Twitter](https://twitter.com/SemiDesignUI)
+* [Follow on Medium](https://medium.com/@semi-design)
+* [Follow on Dev.to](https://dev.to/semidesign)
 
 # 👨‍👨‍👧‍👦 User Group
 

content/basic/typography/index-en-US.md

@@ -224,10 +224,10 @@ function Demo() {
 
     function Infos() {
         const data = [
-            { type: 'Stars', min: '6700' },
-            { type: 'Fork', min: '500' },
-            { type: 'Downloads', min: '3000000' },
-            { type: 'Contributors', min: '90' }
+            { type: 'Stars', min: '7100' },
+            { type: 'Fork', min: '560' },
+            { type: 'Downloads', min: '3570000' },
+            { type: 'Contributors', min: '100' }
         ];
         return data.map(item =>
             <p key={item.min}>

content/basic/typography/index.md

@@ -215,10 +215,10 @@ function Demo() {
 
     function Infos() {
         const data = [
-            { type: 'Stars', min: '6700' },
-            { type: 'Fork', min: '500' },
-            { type: 'Downloads', min: '3000000' },
-            { type: 'Contributors', min: '90' }
+            { type: 'Stars', min: '7100' },
+            { type: 'Fork', min: '560' },
+            { type: 'Downloads', min: '3570000' },
+            { type: 'Contributors', min: '100' }
         ];
         return data.map(item =>
             <p key={item.min}>

content/feedback/popconfirm/index-en-US.md

@@ -240,7 +240,7 @@ Please refer to [Use with Tooltip/Popover](/en-US/show/tooltip#Use-with-Popver-o
 
 ### ARIA
 
-For ARIA, please refer to [Popover](https://semi.design/zh-CN/show/popover#ARIA)
+For ARIA, please refer to [Popover](https://semi.design/en-US/show/popover#ARIA)
 
 ### Keyboard and focus
 

content/input/checkbox/index-en-US.md

@@ -34,7 +34,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox aria-label="Checkbox demo" onChange={checked => console.log(checked)}>
+    <Checkbox aria-label="Checkbox demo" onChange={e => console.log(e)}>
         Semi Design
     </Checkbox>
 );
@@ -47,7 +47,7 @@ import { Checkbox } from '@douyinfe/semi-ui';
 () => (
     <Checkbox
         defaultChecked
-        onChange={checked => console.log(checked)}
+        onChange={e => console.log(e)}
         aria-label="Checkbox demo"
     >
         Semi Design

content/input/checkbox/index.md

@@ -31,7 +31,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox onChange={checked => console.log(checked)} aria-label="Checkbox 示例">Semi Design</Checkbox>
+    <Checkbox onChange={e => console.log(e)} aria-label="Checkbox 示例">Semi Design</Checkbox>
 );
 ```
 
@@ -40,7 +40,7 @@ import React from 'react';
 import { Checkbox } from '@douyinfe/semi-ui';
 
 () => (
-    <Checkbox defaultChecked onChange={checked => console.log(checked)} aria-label="Checkbox 示例">Semi Design</Checkbox>
+    <Checkbox defaultChecked onChange={e => console.log(e)} aria-label="Checkbox 示例">Semi Design</Checkbox>
 );
 ```
 

content/input/select/index-en-US.md

@@ -68,7 +68,7 @@ import { Select } from '@douyinfe/semi-ui';
 ```
 
 ### Multi-choice
-Since v2.28, the selector will have its own maxHeight 300, and the content can be viewed by scrolling vertically after it exceeds.
+Since v2.28, the selector will have its own maxHeight 270, and the content can be viewed by scrolling vertically after it exceeds.
 
 Configuration `multiple` properties that can support multi-selection
 

content/input/select/index.md

@@ -79,7 +79,7 @@ import { Select } from '@douyinfe/semi-ui';
 ```
 
 ### 多选
-自 v2.28后，select 的选择器会自带 maxHeight 300，内容超出后可以通过垂直滚动查看。
+自 v2.28后，select 的选择器会自带 maxHeight 270，内容超出后可以通过垂直滚动查看。
 
 配置`multiple`属性，可以支持多选
 

content/start/changelog/index-en-US.md

@@ -16,6 +16,16 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.38.2 (2023-07-10)
+- 【Fix】
+    - Fixed the problem that the height was not recalculated when the TextArea placeholder was dynamically updated [@nekocode](https://github.com/nekocode) [#1690](https://github.com/DouyinFE/semi-design/pull/1690)
+- 【Docs】
+    - Fix the links to the zh-CN version in english docs [@ederzz](https://github.com/ederzz) [#1691](https://github.com/DouyinFE/semi-design/pull/1691)
+
+#### 🎉 2.38.1 (2023-07-05)
+- 【Fix】
+    - Fix the problem that when the AutoComplete panel is open, the option panel cannot be closed by clicking outside, the scope of influence (2.38.0)
+
 #### 🎉 2.38.0 (2023-06-30)
 - 【Fix】
     - Fix the problem that AutoComplete cannot be selected by long pressing, and onSelect is not triggered [#1665](https://github.com/DouyinFE/semi-design/issues/1665)
@@ -638,7 +648,7 @@ Change ：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_li
 - 【Fix】
     - Update @douyinfe/semi-webpack-plugin to fix the error that animation.scss cannot be processed when using a custom theme  [#1072](https://github.com/DouyinFE/semi-design/issues/1072)
 - 【Docs】
-    -  Added [Global content guidelines](/zh-CN/), Component content guidelines
+    -  Added [Global content guidelines](/en-US/), Component content guidelines
 
 #### 🎉 2.18.0 (2022-08-26)
 - 【Feat】
@@ -1075,7 +1085,7 @@ Change ：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_li
         - Tree supports passing in aria-label to indicate the role of the Tree, and the corresponding role and aria-* attributes are set for Tree and TreeNode inside the component. [#493](https://github.com/DouyinFE/semi-design/issues/493)
         - TreeSelect supports passing in attributes such as aria-label and aria-errormessage to indicate the role and current status of TreeSelect, and sets relevant aria-* attributes for child nodes. [#493](https://github.com/DouyinFE/semi-design/issues/493)
         - When the trigger of the Popover is hover, the content of the Popover has the tooltip role, and when the trigger is click, custom, the content of the Popover has the dialog role
-        - For details of other components, please refer to the documentation of each component, click to view the [accessibility design guide](https://semi.design/zh-CN/start/accessibility)
+        - For details of other components, please refer to the documentation of each component, click to view the [accessibility design guide](https://semi.design/en-US/start/accessibility)
 
 #### 🎉 2.2.2 (2021-12-31)
 - 【Fix】

content/start/changelog/index.md

@@ -13,6 +13,16 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+#### 🎉 2.38.2 (2023-07-10)
+- 【Fix】
+    - 修复 TextArea placeholder动态更新时，未重新计算高度的问题 [@nekocode](https://github.com/nekocode) [#1690](https://github.com/DouyinFE/semi-design/pull/1690)
+- 【Docs】
+    - 更正英文文档中存在中文跳转链接的问题 [@ederzz](https://github.com/ederzz) [#1691](https://github.com/DouyinFE/semi-design/pull/1691)
+
+#### 🎉 2.38.1 (2023-07-05)
+- 【Fix】
+    - 修复当 AutoComplete 的面板在打开时，点击外部无法关闭选项面板问题（影响范围2.38.0）
+
 #### 🎉 2.38.0 (2023-06-30)
 - 【Fix】
     - 修复 AutoComplete 长按无法选中，onSelect 未触发问题 [#1665](https://github.com/DouyinFE/semi-design/issues/1665)

content/start/faq/index-en-US.md

@@ -29,7 +29,7 @@ No plans for this. Specific reasons: [Issue 311](https://github.com/DouyinFE/sem
  - The Semi v2.0 version is refactored based on v1.x using ts, which brings a better ts experience, bettter a11y support and a more out-of-the-box engineering solution, which solves the coexistence of multi-component libraries in the micro front-end scenario Style conflict issues, etc. All subsequent long-term work of the Semi team will be based on the v2.x version
  - v1.x has stopped iterative maintenance, no more feature additions or complex changes, only necessary bug fix changes are provided.
  - For new projects, we recommend that you directly use 2.x [@douyin/semi-ui](https://semi.design) for development. For existing projects, we also recommend that you upgrade as soon as possible. In order to reduce the cost of upgrading, we provide a cli tool one-click migration (@ies/semi-codemod-v2) that can help you automatically complete up to 90% of the migration and modification (limited by the AST implementation principle, there are still a small number of cases that require manual labor review modification, but not much 😉)
- - Upgrade from Semi 1.x to Semi 2.x for detailed operation steps [From v1 to v2](https://semi.design/zh-CN/start/update-to-v2)
+ - Upgrade from Semi 1.x to Semi 2.x for detailed operation steps [From v1 to v2](https://semi.design/en-US/start/update-to-v2)
 
 #### Relationship between versions
 

cypress/e2e/autoComplete.spec.js

@@ -61,4 +61,12 @@ describe('autoComplete', () => {
         cy.get('input').should('have.value', '[email protected]');
     });
 
+    it.only('click outer side handler', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=autocomplete--basic-usage&args=&viewMode=story');
+        cy.get('input').type('123');
+        cy.get('.semi-portal').contains('[email protected]');
+        cy.get('body').click();
+        cy.get('.semi-portal').should('not.exist');
+    });
+
 });

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.38.0"
+    "version": "2.38.2"
 }

package.json

@@ -44,7 +44,7 @@
     "dependencies": {
         "@douyinfe/semi-site-banner": "^0.1.0",
         "@douyinfe/semi-site-doc-style": "0.0.1",
-        "@douyinfe/semi-site-header": "^0.0.19",
+        "@douyinfe/semi-site-header": "^0.0.22",
         "@douyinfe/semi-site-markdown-blocks": "^0.0.9",
         "@mdx-js/mdx": "1.6.22",
         "@mdx-js/react": "^1.6.22",

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",
@@ -25,8 +25,8 @@
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.0",
-        "@douyinfe/semi-animation-styled": "2.38.0",
+        "@douyinfe/semi-animation": "2.38.2",
+        "@douyinfe/semi-animation-styled": "2.38.2",
         "classnames": "^2.2.6"
     },
     "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/anchor/foundation.ts

@@ -171,7 +171,7 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  *      2. There is a scroll axis (clientHeight < scrollHeight | | clientWidth < scrollWidth)
                  *      3.overflowX or overflowY has a value and is not visible or clip
                  *       For details, please see https://github.com/stipsan/compute-scroll-into-view
-                 * 
+                 *
                  * behavior定义滚动行为
                  *  - 可选 'auto' | 'smooth' | Function
                  *  - Function 自定义滚动行为
@@ -184,9 +184,12 @@ export default class AnchorFoundation<P = Record<string, any>, S = Record<string
                  */
                 behavior: actions => {
                     // We just need to scroll the innermost target container
-                    const innermostAction = get(actions, '0');
-                    const el = get(innermostAction, 'el');
-                    const top = get(innermostAction, 'top');
+                    const verticalScrollAction = actions.find(action => {
+                        const { el } = action;
+                        return el.scrollHeight > el.clientHeight;
+                    });
+                    const el = get(verticalScrollAction, 'el');
+                    const top = get(verticalScrollAction, 'top');
                     if (el) {
                         const offsetTop = top - targetOffset;
                         if (el.scroll && canSmoothScroll) {

packages/semi-foundation/autoComplete/foundation.ts

@@ -39,7 +39,9 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
-    persistEvent: (event: any) => void
+    persistEvent: (event: any) => void;
+    registerClickOutsideHandler: (cb: (e: any) => void) => void;
+    unregisterClickOutsideHandler: () => void
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {
@@ -79,7 +81,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     }
 
     destroy(): void {
-        // this._adapter.unregisterClickOutsideHandler();
+        this._adapter.unregisterClickOutsideHandler();
         // this.unBindKeyBoardEvent();
     }
 
@@ -114,7 +116,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
         this.isPanelOpen = true;
         this._adapter.toggleListVisible(true);
         this._setDropdownWidth();
-        // this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
+        this._adapter.registerClickOutsideHandler(e => this.closeDropdown(e));
         this._adapter.notifyDropdownVisibleChange(true);
         this._modifyFocusIndexOnPanelOpen();
     }
@@ -122,7 +124,7 @@ class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> e
     closeDropdown(e?: any): void {
         this.isPanelOpen = false;
         this._adapter.toggleListVisible(false);
-        // this._adapter.unregisterClickOutsideHandler();
+        this._adapter.unregisterClickOutsideHandler();
         this._adapter.notifyDropdownVisibleChange(false);
         // After closing the panel, you can still open the panel by pressing the enter key
         // this.unBindKeyBoardEvent();

packages/semi-foundation/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.0",
+        "@douyinfe/semi-animation": "2.38.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -133,11 +133,15 @@ $module: #{$prefix}-tree-select;
         padding-right: 0;
         cursor: pointer;
         color: $color-treeSelect_selection-text-default;
+        position: relative;
 
-        &-placeholder {
+        &-content {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+        }
+        
+        &-placeholder {
             color: $color-treeSelect_input_placeholder-text-default;
         }
 
@@ -154,6 +158,10 @@ $module: #{$prefix}-tree-select;
 
         &-TriggerSearchItem {
             position: absolute;
+            max-width: calc(100% - $spacing-treeSelect_selection-paddingLeft);
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
             
             &-placeholder {
                 opacity: .6;

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.38.0"
+        "@douyinfe/semi-webpack-plugin": "2.38.2"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-rspack/README.md

@@ -45,7 +45,7 @@ module.exports = {
 
 #### Through local Scss file
 
-You can check which tokens can be customized on the [Semi WebSite](https://semi.design/zh-CN/basic/tokens).
+You can check which tokens can be customized on the [Semi WebSite](https://semi.design/en-US/basic/tokens).
 
 - step1: add a local file
 ``` scss

packages/semi-rspack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "",
     "homepage": "",
     "license": "MIT",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/autoComplete/index.tsx

@@ -18,6 +18,7 @@ import Trigger from '../trigger';
 import Option from './option';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import '@douyinfe/semi-foundation/autoComplete/autoComplete.scss';
+import ReactDOM from 'react-dom';
 
 const prefixCls = cssClasses.PREFIX;
 const sizeSet = strings.SIZE;
@@ -197,7 +198,7 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
     triggerRef: React.RefObject<HTMLDivElement> | null;
     optionsRef: React.RefObject<HTMLDivElement> | null;
 
-    private clickOutsideHandler: () => void | null;
+    private clickOutsideHandler: (e: Event) => void | null;
 
     constructor(props: AutoCompleteProps<T>) {
         super(props);
@@ -295,7 +296,30 @@ class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoComple
                 let { rePosKey } = this.state;
                 rePosKey = rePosKey + 1;
                 this.setState({ rePosKey });
-            }
+            },
+            registerClickOutsideHandler: cb => {
+                const clickOutsideHandler = (e: Event) => {
+                    const optionInstance = this.optionsRef && this.optionsRef.current;
+                    const triggerDom = this.triggerRef && this.triggerRef.current;
+                    const optionsDom = ReactDOM.findDOMNode(optionInstance);
+                    const target = e.target as Element;
+                    if (
+                        optionsDom &&
+                        (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) &&
+                        triggerDom &&
+                        !triggerDom.contains(target)
+                    ) {
+                        cb(e);
+                    }
+                };
+                this.clickOutsideHandler = clickOutsideHandler;
+                document.addEventListener('mousedown', clickOutsideHandler, false);
+            },
+            unregisterClickOutsideHandler: () => {
+                if (this.clickOutsideHandler) {
+                    document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+                }
+            },
         };
     }
 

packages/semi-ui/configProvider/_story/RTLDirection/RTLTable.jsx

@@ -87,7 +87,7 @@ export default function RTLTable() {
 
     return (
         <>
-            <Checkbox onChange={checked => console.log(checked)}>Semi Design</Checkbox>
+            <Checkbox onChange={e => console.log(e)}>Semi Design</Checkbox>
             <Table columns={sortColumns} dataSource={sortData} />
         </>
     );

packages/semi-ui/input/textarea.tsx

@@ -193,7 +193,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
 
     componentDidUpdate(prevProps: TextAreaProps, prevState: TextAreaState) {
 
-        if (this.props.value !== prevProps.value && this.props.autosize) {
+        if ((this.props.value !== prevProps.value || this.props.placeholder !== prevProps.placeholder) && this.props.autosize) {
             this.foundation.resizeTextarea();
         }
     }

packages/semi-ui/locale/README.md

@@ -31,23 +31,12 @@ return (
 
 > Notice: Don't replace key in `${}` which is a dynamic value.
 
-![](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/locale-bug-1432.png)
 
 ## What the language file should include
 - code: language package code
 - dateFnsLocale: need to pass date-fns locale object when formatting a date (using dateFns.format or dateFns.parse etc)
 - text: components' built-in text
 
-
-### UI
-<table>
-    <tbody>
-        <tr>
-            <td align="center"><a href="https://semi.design/zh-CN/contribute/"><img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/SemiLogo.jpg" width="100px;" alt="" style="max-width:100%;"><br><sub><b>Semi Teams</b></sub></a></td>
-        </tr>
-    </tbody>
-</table>
-
 ## License
 
 MIT

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.38.0",
-        "@douyinfe/semi-animation-react": "2.38.0",
-        "@douyinfe/semi-foundation": "2.38.0",
-        "@douyinfe/semi-icons": "2.38.0",
-        "@douyinfe/semi-illustrations": "2.38.0",
-        "@douyinfe/semi-theme-default": "2.38.0",
+        "@douyinfe/semi-animation": "2.38.2",
+        "@douyinfe/semi-animation-react": "2.38.2",
+        "@douyinfe/semi-foundation": "2.38.2",
+        "@douyinfe/semi-icons": "2.38.2",
+        "@douyinfe/semi-illustrations": "2.38.2",
+        "@douyinfe/semi-theme-default": "2.38.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-ui/table/Body/index.tsx

@@ -155,7 +155,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 getVirtualizedListRef(this.listRef);
             } else {
                 console.warn('getVirtualizedListRef only works with virtualized. ' +
-                    'See https://semi.design/zh-CN/show/table for more information.');
+                    'See https://semi.design/en-US/show/table for more information.');
             }
         }
         this.foundation = new BodyFoundation(this.adapter);

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -2271,4 +2271,78 @@ export const AutoSearchFocusPlusPreventScroll = () => {
         />
       </div>
   );
-};
+};
+
+export const LongLabel = () => {
+  const treeData = [
+    {
+        label: '这是一个超长的中文测试用标题这是一个超长的中文测试用标题这是一个超长的中文测试用标题这是一个超长的中文测试用标题',
+        value: 'v1',
+        key: '0',
+    },
+    {
+        label: 'ThisISAVeryLongTestSentenceThisISAVeryLongTestSentenceThisISAVeryLongTestSentence',
+        value: 'v2',
+        key: '1',
+    }
+  ];
+
+  return (
+    <>
+      <p>单选</p>
+      <TreeSelect
+        defaultValue='v1'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+      <p>单选，可搜索, searchPosition='trigger'</p>
+      <TreeSelect
+        filterTreeNode
+        searchPosition='trigger'
+        defaultValue='v1'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+       <p>单选，可搜索, searchPosition='dropDown'</p>
+      <TreeSelect
+        filterTreeNode
+        defaultValue='v1'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+       <p>单选</p>
+      <TreeSelect
+        defaultValue='v2'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+      <p>单选，可搜索, searchPosition='trigger'</p>
+      <TreeSelect
+        filterTreeNode
+        searchPosition='trigger'
+        defaultValue='v2'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+       <p>单选，可搜索, searchPosition='dropDown'</p>
+      <TreeSelect
+        filterTreeNode
+        defaultValue='v2'
+        style={{ width: 300 }}
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+        treeData={treeData}
+        placeholder="请选择"
+      />
+    </>
+  );
+}

packages/semi-ui/treeSelect/index.tsx

@@ -869,7 +869,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         // searchPosition = dropdown and single seleciton
         if (!multiple || !this.hasValue()) {
             const renderText = this.foundation.getRenderTextInSingle();
-            const spanCls = cls({
+            const spanCls = cls(`${prefixcls}-selection-content`, {
                 [`${prefixcls}-selection-placeholder`]: !renderText,
             });
             return <span className={spanCls}>{renderText ? renderText : placeholder}</span>;

packages/semi-webpack/README.md

@@ -45,7 +45,7 @@ module.exports = {
 
 #### Through local Scss file
 
-You can check which tokens can be customized on the [Semi WebSite](https://semi.design/zh-CN/basic/tokens).
+You can check which tokens can be customized on the [Semi WebSite](https://semi.design/en-US/basic/tokens).
 
 - step1: add a local file
 ``` scss

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.38.0",
+    "version": "2.38.2",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

src/sitePages/newHome/components/comments/comments.jsx

@@ -40,7 +40,7 @@ function numberAnimation(number, s, dom) {
     requestAnimationFrame(fn);
 }
 
-const realNumber = [6700, 500, 3000000, 90];
+const realNumber = [7100, 560, 3570000, 100];
 
 function Comments(props) {
     useEffect(()=> {

src/sitePages/newHome/components/operateButton/operateButton.jsx

@@ -32,7 +32,7 @@ function OperateButton() {
         >
             <span style={{ display: 'flex' }}>
                 GitHub
-                <span className={styles.badge}>6.7k</span>
+                <span className={styles.badge}>7.1k</span>
             </span>
         </Button>
     </div>);

yarn.lock

@@ -1561,10 +1561,10 @@
   resolved "https://registry.npmjs.org/@douyinfe/semi-site-doc-style/-/semi-site-doc-style-0.0.1.tgz#c3c803014218ec00441dac32db9a875f6222ed0b"
   integrity sha512-y7Jc1i9q/O2idfaqckSJvghpt4AboQJgZ4iTEK8UMqjQkyWmb5I/NRzVWjOP9S0LEbJNs76OKfZil7DwsOmY/A==
 
-"@douyinfe/semi-site-header@^0.0.19":
-  version "0.0.19"
-  resolved "https://registry.npmjs.org/@douyinfe/semi-site-header/-/semi-site-header-0.0.19.tgz#eae92958fe121856138aaefbc4e0aa30c2495b18"
-  integrity sha512-95NvP7a78gM+7n6L1y3k8U220smgQkkgsxGA06v+P2+sCKfHxp9ZJGj5DcNvF9f9npUfwM9mMI26NTfZ8XslPQ==
+"@douyinfe/semi-site-header@^0.0.22":
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-site-header/-/semi-site-header-0.0.22.tgz#19ab186b9e496ee43ca2394201e3c75628828613"
+  integrity sha512-NCbCQ0S5u2dpctwiFMx9HFRFv64Nvo/CMszuO4NDDXPCG9rrL4+H4Zde6R7XpxqJBnWC4sZ41XjDaQOuYLfQVA==
   dependencies:
     "@douyinfe/semi-icons" "^2.0.0"
     "@douyinfe/semi-ui" "^2.0.0"