Merge branch 'main' into release

content/basic/tokens/index.md

@@ -23,7 +23,7 @@ brief: Semi Design Tokens
 
 ## 基础色
 
-基于品牌色动态生成，包含 160 个颜色在内的，16 个不同色相的梯度色盘。通常情况下，我们用使用基础色中的颜色来进一步定义功能色。你可以在主题商店动用你的产品品牌色，动态生成新的基础色盘。
+基于品牌色动态生成，包含 160 个颜色在内的，16 个不同色相的梯度色盘。通常情况下，我们用使用基础色中的颜色来进一步定义功能色。你可以在 Semi DSM 配置你的产品品牌色，动态生成新的基础色盘。
 
 <FullPalette/>
 

content/navigation/navigation/index-en-US.md

@@ -523,7 +523,6 @@ class NavApp extends React.Component {
         return (
             <Nav
                 limitIndent={false}
-                toggleIconPosition={'left'}
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[

content/navigation/navigation/index.md

@@ -525,7 +525,6 @@ class NavApp extends React.Component {
         return (
             <Nav
                 limitIndent={false}
-                toggleIconPosition={'left'}
                 defaultOpenKeys={['job']}
                 bodyStyle={{ height: 320 }}
                 items={[

content/start/dark-mode/index.md

@@ -9,7 +9,7 @@ order: 4
 
 ## 暗色模式
 
-Semi 的默认主题和通过主题商店配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。Semi 也支持在页面的局部范围使用暗色模式。
+Semi 的默认主题和通过 Semi DSM 配置的定制主题都自带了亮色模式与暗色模式，可以方便地进行切换。Semi 也支持在页面的局部范围使用暗色模式。
 
 ## 如何切换
 Semi 暗色模式的切换是通过给 `body` 添加属性 `[theme-mode='dark']` 来实现的。你可以使用任何你喜欢的方式来进行切换。比如：

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

@@ -10,12 +10,12 @@ brief: Semi Design is a design system that defines a set of mid-back design and
 
 ## What is Semi
 
-Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution, it is refined from the complex scenes of byte beating various business lines, supports nearly a thousand platform products, and serves 100,000+ internal and external users.  
+Semi Design is a design system designed, developed and maintained by the Douyin front-end team and the MED product design team. As a comprehensive, easy-to-use, and high-quality modern enterprise-level application UI solution, it is refined from the complex scenes of Bytedance various business lines, supports nearly a thousand platform products, and serves 100,000+ internal and external users.  
 After nearly two years of iteration, Semi Design has become a cross-departmental infrastructure after various types of business landing verification, and has formed a rich tool chain and ecology around the component library. In order to allow the increasingly mature design system to serve more users and to further explore the usage scenarios, we decided to open source Semi and use the power of the community to continuously improve and expand the capability boundary.
 
 ## Our vision
 
-Semi is mostly used in prefixes or phrases to mean "half"-just like a complete enterprise application, which usually consists of business logic and front-end interface, Semi Design hopes to become an indispensable half of this and provide a solid and high-quality front-end for enterprise applications The basics.  
+Semi is mostly used in prefixes or phrases to mean "half"-just like a complete enterprise application, which usually consists of business logic and front-end interface, Semi Design hopes to become an indispensable half of this and provide a solid and high-quality front-end for enterprise applications The basics. 
 We believe that the real value of the design system lies in reducing the cost of front-end construction, while providing excellent design and engineering standards, fully liberating the productivity of designers and developers, so as to continuously incubate star products.
 
 ### Design -- unchanged and changeable
@@ -26,7 +26,7 @@ In addition, a good design system must be "live", it needs to be able to develop
 
 ![Diversified products and team components based on Semi Design](https://lf9-static.semi.design/obj/semi-tos/images/introduction-showcase.gif)
 
-Adhere to the high-quality and stable default foundation (unchanged), and fully open the flexibility of customization (variable) when needed, this is the unique design principle of Semi Design and will always follow.
+**Adhere to the high-quality and stable default foundation (unchanged), and fully open the flexibility of customization (variable) when needed, this is the unique design principle of Semi Design and will always follow.**
 
 ### Theming —— Brand one-click customization
 
@@ -39,7 +39,7 @@ Within this year, we will also realize real-time synchronization of themes from
 ### Dark Mode
 
 In order to be compatible with the preferences of more user groups in different production environments, as a supplement to the light color mode, any theme of Semi Design automatically supports the dark mode and can be dynamically switched when the application is running.  
-Not only that, Semi also allows users to enable dark mode in some areas of the app to be compatible with the use scenarios of SDK or plug-in products. Through advanced settings, users can also realize that the application and system themes are automatically consistent. At the same time, in order to further enhance the development experience, we also provide a cli tool for one-click compatibility of unstandardized stock old projects to Semi dark mode, avoiding migration costs in an automated way.
+Not only that, Semi also allows users to enable dark mode in some areas of the app to be compatible with the use scenarios of SDK or plug-in products.    Through advanced settings, users can also realize that the application and system themes are automatically consistent. At the same time, in order to further enhance the development experience, we also provide a cli tool for one-click compatibility of unstandardized stock old projects to Semi dark mode, avoiding migration costs in an automated way.  
 
 ![Application of Semi dark mode](https://lf26-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/p4darkmode.gif)
 
@@ -49,11 +49,20 @@ Semi Design adopts a set of cross web framework technical solutions, F/A layered
 
 ![F/A](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/engSemi.jpg)
 
-Foundation Foundation contains the business logic that best represents the interaction of Semi Design components, and does not actually reference any DOM elements. Foundation delegates Adapter methods for any logic that requires DOM manipulation.
+#### Foundation 
 
-Adaptor Adapter is an interface that has all the methods required by Foundation to implement Semi Design business logic, and is responsible for 1. Component DOM structure declaration 2. Responsible for all DOM operation/update related logic, usually using framework APIs for setState, getState, addEventListener , RemoveListener and other operations. Adapters can have many implementations, allowing interoperability with different frameworks.
+Foundation contains the business logic that best represents the interaction of Semi Design components, and does not actually reference any DOM elements. Foundation delegates Adapter methods for any logic that requires DOM manipulation.
 
-At present, we have implemented the React version of Adapter. You can use our React components directly by install `semi-ui`. If you are interested in Semi's architecture design, you can read this article for more detail [How to hierarchically design the UI component library so that it has the ability to adapt to multiple mvvm frameworks](https://bytedance.feishu.cn/docs/doccnTgc0iGOVPubHZkwPpxXSNh#)。
+#### Adapter
+
+Adapter is an interface that has all the methods required by Foundation to implement Semi Design business logic, and is responsible for
+ 1. Component DOM structure declaration 
+ 2. Responsible for all DOM operation/update related logic, usually using framework APIs for setState, getState, addEventListener , RemoveListener and other operations.  
+Adapters can have many implementations, allowing interoperability with different frameworks.
+
+At present, we have implemented the React version of Adapter. You can use our React components directly by `npm install @douyinfe/semi-ui`.   
+
+If you are interested in Semi's architecture design, you can read this article for more detail [How to hierarchically design the UI component library so that it has the ability to adapt to multiple mvvm frameworks](https://bytedance.feishu.cn/docs/doccnTgc0iGOVPubHZkwPpxXSNh#)。
 
 ### Internationalization - Diversity and compatibility
 
@@ -87,7 +96,11 @@ Semi always pays attention to Web accessibility. At present, we have achieved so
 
 ### Cross WebFramework
 
-High scalability, as Semi's core design principle, runs through Semi's code architecture design, API design, style layer abstraction and other aspects. Thanks to the Foundation/Adapter architecture design and the principle of layering style files, Semi is very easy to migrate to other front-end frameworks. In version 2.0, we rewrite Semi based on Typescript, hoping to still have a good development experience and quality assurance in the process of multi-frame migration and adaptation. The Foundation layer is also open source based on the MIT protocol, and we will always maintain the framework independence of its code implementation in future iterations. If you expect to bring Semi Design to more platform frameworks, we welcome you to reuse it directly. At this stage, our team will focus on the React system, but WebComponent is also one of the directions we focus on. The timing is right in the future, and we will make more attempts, so stay tuned.
+High scalability, as Semi's core design principle, runs through Semi's code architecture design, API design, style layer abstraction and other aspects. Thanks to the Foundation/Adapter architecture design and the principle of layering style files, Semi is very easy to migrate to other front-end frameworks. In version 2.0, we rewrite Semi based on Typescript, hoping to still have a good development experience and quality assurance in the process of multi-frame migration and adaptation.  
+
+The Foundation layer (`@douyinfe/semi-foundation`、`@douyinfe/semi-theme-default`) is also open source based on the MIT protocol, and we will always maintain the framework independence of its code implementation in future iterations. If you expect to bring `Semi Design` to more platform frameworks, we welcome you to reuse it directly.   
+
+At this stage, our team will focus on the React system, but WebComponent is also one of the directions we focus on. The timing is right in the future, and we will make more attempts, so stay tuned.
 
 ## Design Resources
 

content/start/introduction/index.md

@@ -34,7 +34,7 @@ Semi 是如何在连贯统一的基础上，做到灵活多变的？答案是强
 
 通过对数千个设计变量 (Design Token) 的分层和梳理，设计师和开发者可在全局、乃至组件级别，对 表现层进行深度定制 —— 即使你不了解 CSS，也可以**通过主题编辑器(DSM)，打造符合业务和品牌多样化视觉需求的风格**。开发者则可通过 npm 包一键发布并替换，轻松定制，易于管理。
 
-你可以在[主题商店](https://semi.design/dsm/store)，查看 Semi 在抖音、剪映、飞书、火山引擎等不同品牌场景下的官方示例主题。
+你可以在[Semi DSM](https://semi.design/dsm/store)，查看 Semi 在抖音、剪映、飞书、火山引擎等不同品牌场景下的官方示例主题。
 
 ![全面覆盖的设计变量用例、文档与编辑器](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/p3.gif)
 
@@ -68,7 +68,7 @@ Semi Design 采用了一套跨前端框架技术方案，F/A 分层设计，将
 
 Foundation 包含最能代表 Semi Design 组件交互的业务逻辑，包括 UI 行为触发后的各种计算、分支判断等逻辑，它并不直接操作或者引用 DOM，任意需要 DOM 操作，驱动组件渲染更新的部分会委派给 Adapter 执行。
 
-#### Adaptor
+#### Adapter
 
 Adapter 是一个接口，具有 Foundation 实现 Semi Design 业务逻辑所需的所有方法，并负责 1. 组件 DOM 结构声明 2.负责所有跟 DOM 操作/更新相关的逻辑，通常会使用框架 API 进行 setState、getState、addEventListener、removeListener 等操作。适配器可以有许多实现，允许与不同框架的互操作性。
 

gatsby-node.js

@@ -111,6 +111,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
     actions.setWebpackConfig({
         resolve: {
             alias: {
+                'semi-site-header': process.env.SEMI_SITE_HEADER || '@douyinfe/semi-site-header',
                 '@douyinfe/semi-ui': resolve('packages/semi-ui'),
                 '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
                 '@douyinfe/semi-icons': resolve('packages/semi-icons/src/'),

packages/semi-ui/navigation/Item.tsx

@@ -195,7 +195,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             itemChildren = children;
         } else {
             let placeholderIcons = null;
-            if (mode === strings.MODE_VERTICAL && !limitIndent) {
+            if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
                 placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
             }

packages/semi-ui/navigation/SubNav.tsx

@@ -237,7 +237,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         }
 
         let placeholderIcons = null;
-        if (mode === strings.MODE_VERTICAL && !limitIndent) {
+        if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
             placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));

packages/semi-ui/scrollList/scrollItem.tsx

@@ -13,8 +13,10 @@ import { Motion } from '../_base/base';
 const msPerFrame = 1000 / 60;
 const blankReg = /^\s*$/;
 const wheelMode = 'wheel';
-
-type DebounceSelectFn = (e: React.UIEvent, newSelectedNode: HTMLElement) => void;
+interface DebounceSelectFn {
+    (e: React.UIEvent, newSelectedNode: HTMLElement): void;
+    cancel(): void
+}
 export interface ScrollItemProps<T extends Item> {
     mode?: string;
     cycled?: boolean;
@@ -110,7 +112,12 @@ export default class ScrollItem<T extends Item> extends BaseComponent<ScrollItem
             scrollToCenter: this.scrollToCenter,
         };
     }
-
+    componentWillUnmount(){
+        if (this.props.cycled) {
+            this.throttledAdjustList.cancel();
+            this.debouncedSelect.cancel();
+        }
+    }
     componentDidMount() {
         this.foundation.init();
 

packages/semi-ui/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子： Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子： Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

packages/semi-ui/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container

src/components/header.js

@@ -1,36 +1,24 @@
 import React from 'react';
 import { _t } from 'utils/locale';
-import SemiSiteHeader from '@douyinfe/semi-site-header';
-import '@douyinfe/semi-site-header/dist/index.css';
+import SemiSiteHeader from 'semi-site-header';
+import 'semi-site-header/dist/index.css';
 import { navigate } from 'gatsby';
 
 const Header = ({ location, localeCode, style }) => (
     <div>
         <SemiSiteHeader
             style={style}
-            transparent={true}
-            colorReverse={false}
-            location={location}
-            hasSearch={true}
-            onSearch={() => window.showSearch()}
             onDarkChange={(mode)=>{
                 const iframeDOM=document.querySelector('iframe');
-                try{
+                try {
                     iframeDOM?.contentWindow?.semidoc?.setDarkmode(mode==='dark');
-                }catch (e){
+                } catch (e){
 
                 }
             }}
             onLocaleChange={locale => {
-                if (locale === 'en-US') {
-                    localStorage.setItem('locale', 'en-US');
-                    navigate(location.pathname.replace('zh-CN', 'en-US'));
-
-                } else {
-                    localStorage.setItem('locale', 'zh-CN');
-                    navigate(location.pathname.replace('en-US', 'zh-CN'));
-
-                }
+                localStorage.setItem('locale', locale);
+                navigate(location.pathname.replace(/zh-CN|en-US/, locale));
                 return false;
             }}
         />