Merge branch 'main' into release

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

@@ -519,3 +519,5 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 ```material
 2, 43
 ``` -->
+## Related Material
+<semi-material-list code="2"></semi-material-list>

content/basic/layout/index.md

@@ -533,3 +533,6 @@ import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, I
 ```material
 2, 43
 ``` -->
+
+## 相关物料
+<semi-material-list code="2"></semi-material-list>

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

@@ -570,3 +570,5 @@ function SplitButtonDemo(){
 ```material
 5
 ``` -->
+## Related Material
+<semi-material-list code="5"></semi-material-list>

content/input/button/index.md

@@ -533,4 +533,6 @@ function SplitButtonDemo(){
 <!-- ## 相关物料
 ```material
 5
-``` -->
+``` -->
+## 相关物料
+<semi-material-list code="5"></semi-material-list>

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

@@ -473,4 +473,6 @@ Some internal methods provided by Checkbox can be accessed through ref:
 <!-- ## Related Material
 ```material
 45, 64, 73, 89, 123
-``` -->
+``` -->
+## Related Material
+<semi-material-list code="123"></semi-material-list>

content/input/checkbox/index.md

@@ -460,4 +460,6 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 <!-- ## 相关物料
 ```material
 45, 64, 73, 89, 123
-``` -->
+``` -->
+## 相关物料
+<semi-material-list code="123"></semi-material-list>

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

@@ -499,3 +499,6 @@ Some internal methods provided by Input can be accessed through ref:
 ```material
 44, 46
 ``` -->
+
+## Related Material
+<semi-material-list code="46"></semi-material-list>

content/input/input/index.md

@@ -510,3 +510,6 @@ import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
 44, 46
 ``` -->
 
+## 相关物料
+<semi-material-list code="46"></semi-material-list>
+

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

@@ -446,6 +446,9 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 123
 ``` -->
 
+## Related Material
+<semi-material-list code="123"></semi-material-list>
+
 ## Content Guidelines
 
 - Capitalize the first letter

content/input/radio/index.md

@@ -399,4 +399,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 - 不使用标点符号
 
 ## 设计变量
-<DesignToken/>
+<DesignToken/>
+
+## 相关物料
+<semi-material-list code="123"></semi-material-list>

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

@@ -1464,6 +1464,9 @@ Some internal methods provided by Select can be accessed through ref:
 
 <DesignToken/>
 
+## Related Material
+<semi-material-list code="3, 4, 58, 62"></semi-material-list>
+
 ## FAQ
 
 -   **Searchable Select, using remote data to dynamically update the `optionList`, why sometimes there is no data before the asynchronous request is completed?？**  

content/input/select/index.md

@@ -1592,3 +1592,5 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 ```material
 3,4,44,54,58,62,72
 ``` -->
+## 相关物料
+<semi-material-list code="3, 4, 58, 62"></semi-material-list>

content/input/transfer/index.md

@@ -1060,4 +1060,4 @@ TreeItem 继承 Item 的所有属性
 
 ```material
 52
-``` -->
+``` -->

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

@@ -832,6 +832,8 @@ function NavApp (props = {}) {
 ```material
 2, 43, 312
 ``` -->
+## Related Material
+<semi-material-list code="2, 312"></semi-material-list>
 
 ## FAQ
 - **Lost animation in navigation bar?**

content/navigation/navigation/index.md

@@ -848,6 +848,8 @@ function NavApp (props = {}) {
 ```material
 2, 43, 312
 ``` -->
+## 相关物料
+<semi-material-list code="2, 312"></semi-material-list>
 
 ## FAQ
 

content/show/card/index-en-US.md

@@ -727,3 +727,5 @@ function Demo() {
 ```material
 41,55,64,74,219,73,84,99,179
 ``` -->
+## Related Material
+<semi-material-list code="41, 179"></semi-material-list>

content/show/card/index.md

@@ -727,3 +727,5 @@ function Demo() {
 ```material
 41,55,64,74,219,73,84,99,179
 ``` -->
+## 相关物料
+<semi-material-list code="41, 179"></semi-material-list>

content/show/dropdown/index-en-US.md

@@ -534,3 +534,5 @@ function DropdownEvents() {
 ```material
 5
 ``` -->
+## Related Material
+<semi-material-list code="5"></semi-material-list>

content/show/dropdown/index.md

@@ -529,3 +529,5 @@ function DropdownEvents() {
 ```material
 5
 ``` -->
+## 相关物料
+<semi-material-list code="5"></semi-material-list>

content/show/modal/index-en-US.md

@@ -709,3 +709,5 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 ```material
 1, 55
 ``` -->
+## Related Material
+<semi-material-list code="1"></semi-material-list>

content/show/modal/index.md

@@ -719,3 +719,6 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 ```material
 1, 55
 ``` -->
+
+## 相关物料
+<semi-material-list code="1"></semi-material-list>

content/show/table/index.md

@@ -4959,4 +4959,4 @@ function Demo() {
 <!-- ## 相关物料
 ```material
 196,110,104,113,226
-``` -->
+``` -->

content/show/tooltip/index-en-US.md

@@ -402,3 +402,5 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 ```material
 41
 ``` -->
+## Related Material
+<semi-material-list code="41"></semi-material-list>

content/show/tooltip/index.md

@@ -432,3 +432,5 @@ function Demo() {
 ```material
 41
 ``` -->
+## 相关物料
+<semi-material-list code="41"></semi-material-list>

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

@@ -16,6 +16,20 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.30.1 (2023-02-27)
+- 【Fix】
+  - fixed showTick bug in Dropdown(the bug affects 2.27.1 ~ 2.30.0) [#1457](https://github.com/DouyinFE/semi-design/issues/1457)
+
+#### 🎉 2.30.0 (2023-02-23)
+- 【Fix】
+  - Fix the problem that Modal did not delete the redundant div after the imperative call was closed  [#1415](https://github.com/DouyinFE/semi-design/issues/1415)
+  - TreeSelect fixes the problem that the border color is abnormal when hovering in some scenes [#1416](https://github.com/DouyinFE/semi-design/pull/1446)
+  - Fix the wrong timing of onBlur/onFocus calls in TreeSelect [#1414](https://github.com/DouyinFE/semi-design/pull/1444)
+  - Fix the problem that preventScroll is not declared and not transparently transmitted in TreeSelect [#1414](https://github.com/DouyinFE/semi-design/pull/1444)
+  - Fix when the Tooltip is blocked on the right side, the floating layer drifts to the left side of the viewport [#1449](https://github.com/DouyinFE/semi-design/pull/1449)
+- 【Design Token】
+  - Select Add `$color-select-bg-focus` [#1416](https://github.com/DouyinFE/semi-design/pull/1446)
+
 #### 🎉 2.30.0-beta.0 (2023-02-20)
 - 【Breaking Change】
     - **Modify the calculation rules when the rule in the Numeral component is percentages**

content/start/changelog/index.md

@@ -15,6 +15,21 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 
 ---
+
+#### 🎉 2.30.1 (2023-02-27)
+- 【Fix】
+  - 修复 Dropdown showTick 失效问题（影响范围 2.27.1 ~ 2.30.0）[#1457](https://github.com/DouyinFE/semi-design/issues/1457)
+
+#### 🎉 2.30.0 (2023-02-23)
+- 【Fix】
+  - 修复 Modal 在命令式调用关闭后，未删除多余 div 的问题  [#1415](https://github.com/DouyinFE/semi-design/issues/1415)
+  - TreeSelect 修复部分场景下，hover 时 border 颜色异常的问题 [#1416](https://github.com/DouyinFE/semi-design/pull/1446)
+  - 修复 TreeSelect 中 onBlur/onFocus 调用时机错误问题 [#1414](https://github.com/DouyinFE/semi-design/pull/1444)
+  - 修复 TreeSelect 中 preventScroll 未声明及未透传问题 [#1414](https://github.com/DouyinFE/semi-design/pull/1444)
+  - 修复 Tooltip 在右侧被遮挡时浮层漂移到视口左侧 [#1449](https://github.com/DouyinFE/semi-design/pull/1449)
+- 【Design Token】
+  - Select 新增 `$color-select-bg-focus` [#1416](https://github.com/DouyinFE/semi-design/pull/1446)
+
 #### 🎉 2.30.0-beta.0 (2023-02-20)
 - 【Breaking Change】
     - **修改 Numeral 组件中 rule 为 percentages 时候的计算规则**

content/start/design-to-code/index.md

@@ -52,7 +52,7 @@ Design to code（简称D2C） 是 Semi Design 提供的设计稿转代码功能
 
 ![](https://lf3-files.qingfuwucdn.net/obj/inspirecloud-file/baas/tt38q7/82069cd816533f91_1676604095341.png)
 
-更详细的使用说明，可访问 <a href="https://semi.design/code" target="_blank">https://semi.design/code</a> 查阅
+更详细的使用说明，可访问 <a href="/code" target="_blank">https://semi.design/code</a> 查阅
 
 
 ## 使用场景

cypress/integration/treeSelect.spec.js

@@ -61,4 +61,27 @@ describe('treeSelect', () => {
         cy.get('.semi-tagInput-wrapper .semi-tag').should('not.exist');
     });
 
+    it('onblur / onfocus', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=treeselect--on-blur-on-focus&args=&viewMode=story', {
+            onBeforeLoad(win) {
+                cy.stub(win.console, 'log').as('consoleLog');
+            },
+        });
+        // 单选，点击 trigger 触发 onFocus， 点击选项触发 onBlur，
+        cy.get('.semi-tree-select').eq(0).click();
+        cy.get('@consoleLog').should('be.calledWith', 'focus');
+        cy.get('.semi-tree-option').eq(0).click();
+        cy.get('@consoleLog').should('be.calledWith', 'blur');
+        // 单选，点击 trigger 触发 onFocus，再次点击 trigger 收起面板，但不会触发 onBlur， 点击外部触发 onBlur，
+        cy.get('.semi-tree-select').eq(0).click();
+        cy.get('@consoleLog').should('be.calledWith', 'focus');
+        cy.get('.semi-tree-select').eq(0).click();
+        cy.get('.semi-tree-select').eq(1).click();
+        cy.get('@consoleLog').should('be.calledWith', 'blur');
+        // 多选， 点击 trigger 触发 onFocus，在此点击再次点击收起面板，但不会触发 onBlur， 点击外部触发 onBlur，
+        cy.get('@consoleLog').should('be.calledWith', 'focus');
+        cy.get('.semi-tree-select').eq(1).click();
+        cy.get('.semi-tree-select').eq(2).click();
+        cy.get('@consoleLog').should('be.calledWith', 'blur');
+    });
 });

gatsby-node.js

@@ -165,6 +165,7 @@ exports.onCreateWebpackConfig = ({ stage, rules, loaders, plugins, actions }) =>
         },
         plugins: [plugins.extractText(), plugins.define({
             "THEME_SWITCHER_URL": JSON.stringify(process.env['THEME_SWITCHER_URL']),
+            "MATERIAL_LIST_URL": JSON.stringify(process.env['MATERIAL_LIST_URL']),
             "SEMI_SEARCH_URL": JSON.stringify(process.env['SEMI_SEARCH_URL']),
             "DSM_URL": JSON.stringify(process.env['DSM_URL']),
             'process.env.SEMI_SITE_HEADER': JSON.stringify(process.env.SEMI_SITE_HEADER),

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.30.0-beta.0"
+    "version": "2.30.1"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "semi styled animation",
     "keywords": [
         "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "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.30.0-beta.0",
+    "version": "2.30.1",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/treeSelect/foundation.ts

@@ -95,6 +95,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'disableStrictly'
 | 'aria-label'
 | 'checkRelation'
+| 'preventScroll'
 > {
     motion?: Motion;
     mouseEnterDelay?: number;
@@ -163,7 +164,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 > {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
+    // isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -191,7 +192,8 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     toggleHovering: (bool: boolean) => void;
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
-    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void
+    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void
 }
 
 // eslint-disable-next-line max-len
@@ -210,6 +212,9 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (isOpen) {
             this.open();
         }
+        if (triggerSearchAutoFocus) {
+            this.handleTriggerFocus(null);
+        }
     }
 
     destroy() {
@@ -424,12 +429,25 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    _registerClickOutsideHandler = (e) => {
+        this._adapter.registerClickOutsideHandler(e => {
+            this.handlerTriggerBlur(e);
+            this.close(e);
+        });
+    }
+
     // Scenes that may trigger focus:
     //  1、click selection
     _notifyFocus(e: any) {
         this._adapter.notifyFocus(e);
     }
 
+    handleTriggerFocus(e: any) {
+        this._adapter.updateIsFocus(true);
+        this._notifyFocus(e);
+        this._registerClickOutsideHandler(e);
+    }
+
     // Scenes that may trigger blur
     //  1、clickOutSide
     //  2、click option / press enter, and then select complete（when multiple is false
@@ -438,6 +456,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.notifyBlur(e);
     }
 
+    handlerTriggerBlur(e) {
+        this._adapter.updateIsFocus(false);
+        this._notifyBlur(e);
+        this._adapter.unregisterClickOutsideHandler();
+    }
+
     toggleHoverState(bool: boolean) {
         this._adapter.toggleHovering(bool);
     }
@@ -445,15 +469,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     open() {
         this._adapter.openMenu();
         this._setDropdownWidth();
-        this._adapter.registerClickOutsideHandler(e => {
-            this.close(e);
-        });
     }
 
     close(e: any) {
         this._adapter.closeMenu();
-        this._adapter.unregisterClickOutsideHandler();
-        this._notifyBlur(e);
         if (this.getProp('motionExpand')) {
             this._adapter.updateState({ motionKeys: new Set([]) });
         }
@@ -461,18 +480,22 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleClick(e: any) {
         const isDisabled = this._isDisabled();
-        const { isOpen, inputValue } = this.getStates();
+        const { isOpen, inputValue, isFocus } = this.getStates();
         const { searchPosition } = this.getProps();
         if (isDisabled) {
             return;
-        } else if (!isOpen) {
-            this.open();
-            this._notifyFocus(e);
-        } else if (isOpen) {
-            if (searchPosition === 'trigger' && inputValue) {
-                return;
+        } else {
+            if (!isFocus) {
+                this.handleTriggerFocus(e);
+            }
+            if (isOpen) {
+                if (searchPosition === 'trigger' && inputValue) {
+                    return;
+                }
+                this.close(e);
+            } else {
+                this.open();
             }
-            this.close(e);
         }
     }
 
@@ -639,6 +662,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
         if (clickToHide && (this._isSelectToClose() || !data.children)) {
             this.close(e);
+            this.handlerTriggerBlur(e);
         }
     }
 

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-icons",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "semi icons",
     "keywords": [
         "semi",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-illustrations",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "semi illustrations",
     "keywords": [
         "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.30.0-beta.0",
+    "version": "2.30.1",
     "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.30.0-beta.0",
+    "version": "2.30.1",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

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

@@ -9,6 +9,7 @@ import DisabledItem from './DisabledItem';
 import InHoverElements from './InHoverElements';
 import WrapAvatar from './WrapAvatar';
 import { IconChevronDown, IconBox, IconSimilarity } from '@douyinfe/semi-icons';
+import { IconBox, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 export * from '../_story/C2D';
 
@@ -330,4 +331,50 @@ export function DropdownItemPropsDemo() {
       </Dropdown>
     </div>
   );
+}
+
+ShowTick.storyName = 'showTick';
+export function ShowTick() {
+  return (
+      <div>
+          <Dropdown
+              trigger="custom"
+              position="bottomLeft"
+              showTick
+              visible
+              motion={false}
+              render={
+                  <Dropdown.Menu>
+                      <Dropdown.Item icon={<IconBox />} active>
+                          Menu Item 1
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconSetting />}>Menu Item 2</Dropdown.Item>
+                      <Dropdown.Item disabled icon={<IconForward />}>
+                          Menu Item 3
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconBranch />} type="primary">
+                          primary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconColorPalette />} type="secondary">
+                          secondary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconRefresh />} type="tertiary">
+                          tertiary
+                      </Dropdown.Item>
+                      <Dropdown.Item icon={<IconSearch />} type="warning">
+                          warning
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                          icon={<IconSimilarity style={{ color: 'var(--semi-color-tertiary)' }} />}
+                          type="danger"
+                      >
+                          danger
+                      </Dropdown.Item>
+                  </Dropdown.Menu>
+              }
+          >
+              <Button style={{ marginLeft: 90 }}>ShowTick+始终展示</Button>
+          </Dropdown>
+      </div>
+  );
 }

packages/semi-ui/dropdown/dropdownItem.tsx

@@ -68,11 +68,12 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
     render() {
         const { children, disabled, className, forwardRef, style, type, active, icon, onKeyDown, showTick, hover } = this.props;
         const { showTick: contextShowTick } = this.context;
+        const realShowTick = contextShowTick ?? showTick;
         const itemclass = cls(className, {
             [`${prefixCls}-item`]: true,
             [`${prefixCls}-item-disabled`]: disabled,
             [`${prefixCls}-item-hover`]: hover,
-            [`${prefixCls}-item-withTick`]: contextShowTick ?? showTick,
+            [`${prefixCls}-item-withTick`]: realShowTick,
             [`${prefixCls}-item-${type}`]: type,
             [`${prefixCls}-item-active`]: active,
         });
@@ -85,10 +86,10 @@ class DropdownItem extends BaseComponent<DropdownItemProps> {
         }
         let tick = null;
         switch (true) {
-            case showTick && active:
+            case realShowTick && active:
                 tick = <IconTick />;
                 break;
-            case showTick && !active:
+            case realShowTick && !active:
                 tick = <IconTick style={{ color: 'transparent' }} />;
                 break;
             default:

packages/semi-ui/modal/confirm.tsx

@@ -5,6 +5,8 @@ import ConfirmModal from './ConfirmModal';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
+import { omit } from "lodash";
+import { type ButtonProps } from "../button";
 
 export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm'
@@ -37,7 +39,9 @@ export default function confirm<T>(props: ConfirmProps) {
 
     function render(renderProps: ConfirmProps) {
         const { afterClose } = renderProps;
-        ReactDOM.render(<ConfirmModal {...renderProps} afterClose={(...args:any)=>{
+        //@ts-ignore
+        ReactDOM.render(<ConfirmModal {...renderProps} afterClose={(...args: any) => {
+            //@ts-ignore
             afterClose?.(...args);
             destroy();
         }} motion={props.motion}/>, div);
@@ -96,9 +100,10 @@ export function withError(props: ModalReactProps) {
     return {
         type: 'error' as const,
         icon: <IconAlertCircle/>,
-        ...props
+        okButtonProps: { type: 'danger' as ButtonProps['type'], ...props.okButtonProps },
+        ...(omit(props, ['okButtonProps']))
     };
-}
+} 
 
 export function withConfirm(props: ModalReactProps) {
     return {

packages/semi-ui/package.json

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

packages/semi-ui/tag/index.tsx

@@ -126,10 +126,11 @@ export default class Tag extends Component<TagProps, TagState> {
         const { visible: isVisible } = this.state;
         const clickable = onClick !== Tag.defaultProps.onClick || closable;
         // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
-        const a11yProps = { role: 'button', tabIndex: tabIndex | 0, onKeyDown: this.handleKeyDown };
+        const a11yProps = { role: 'button', tabIndex: tabIndex || 0, onKeyDown: this.handleKeyDown };
         const baseProps = {
             ...attr,
             onClick,
+            tabIndex: tabIndex,
             className: classNames(
                 prefixCls,
                 {

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

@@ -754,6 +754,50 @@ export const OnBlurOnFocus = () => (
       onFocus={(...args) => console.log('focus', args)}
       placeholder="Please select"
     />
+     <div>single, filterTreeNode, searchPosition=dropdown</div>
+    <TreeSelect
+      filterTreeNode
+      style={{ width: 300 }}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData2}
+      onBlur={(...args) => console.log('blur', args)}
+      onFocus={(...args) => console.log('focus', args)}
+      placeholder="Please select"
+    />
+    <div>multiple, filterTreeNode, searchPosition=dropdown</div>
+    <TreeSelect
+      filterTreeNode
+      style={{ width: 300 }}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData2}
+      multiple
+      onBlur={(...args) => console.log('blur', args)}
+      onFocus={(...args) => console.log('focus', args)}
+      placeholder="Please select"
+    />
+    <div>single, filterTreeNode, searchPosition=trigger</div>
+    <TreeSelect
+      searchPosition="trigger"
+      filterTreeNode
+      style={{ width: 300 }}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData2}
+      onBlur={(...args) => console.log('blur', args)}
+      onFocus={(...args) => console.log('focus', args)}
+      placeholder="Please select"
+    />
+    <div>multiple, filterTreeNode, searchPosition=trigger</div>
+    <TreeSelect
+      searchPosition="trigger"
+      filterTreeNode
+      style={{ width: 300 }}
+      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+      treeData={treeData2}
+      multiple
+      onBlur={(...args) => console.log('blur', args)}
+      onFocus={(...args) => console.log('focus', args)}
+      placeholder="Please select"
+    />
   </>
 );
 
@@ -2041,4 +2085,4 @@ class ValueTypeIsNumber extends React.Component {
   }
 }
 
-export const valueIsNumber = () => <ValueTypeIsNumber />
+export const valueIsNumber = () => <ValueTypeIsNumber />

packages/semi-ui/treeSelect/index.tsx

@@ -159,11 +159,12 @@ export type OverrideCommonState =
 export interface TreeSelectState extends Omit<BasicTreeSelectInnerData, OverrideCommonState | 'prevProps'>, Pick<TreeState, OverrideCommonState> {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
+    // isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
-    prevProps: TreeSelectProps
+    prevProps: TreeSelectProps;
+    isFocus: boolean
 }
 
 const prefixcls = cssClasses.PREFIX;
@@ -261,6 +262,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         'aria-label': PropTypes.string,
         showRestTagsPopover: PropTypes.bool,
         restTagsPopoverProps: PropTypes.object,
+        preventScroll: PropTypes.bool,
     };
 
     static defaultProps: Partial<TreeSelectProps> = {
@@ -310,7 +312,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         this.state = {
             inputTriggerFocus: false,
             isOpen: false,
-            isInput: false,
+            isFocus: false,
+            // isInput: false,
             rePosKey: key,
             dropdownMinWidth: null,
             inputValue: '',
@@ -639,7 +642,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             updateInputFocus: bool => { 
                 if (bool) {
                     if (this.inputRef && this.inputRef.current) {
-                        (this.inputRef.current as any).focus();
+                        const { preventScroll } = this.props;
+                        (this.inputRef.current as any).focus({ preventScroll });
                     }
                     if (this.tagInputRef && this.tagInputRef.current) {
                         this.tagInputRef.current.focus();
@@ -652,7 +656,10 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                         this.tagInputRef.current.blur();
                     }
                 }
-            } // eslint-disable-line
+            },
+            updateIsFocus: bool => {
+                this.setState({ isFocus: bool });
+            } 
         };
     }
 
@@ -960,7 +967,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             searchPosition,
             triggerRender,
         } = this.props;
-        const { isOpen, isInput, inputValue, selectedKeys, checkedKeys, keyEntities } = this.state;
+        const { inputValue, selectedKeys, checkedKeys, keyEntities, isFocus } = this.state;
         const filterable = Boolean(filterTreeNode);
         const useCustomTrigger = typeof triggerRender === 'function';
         const mouseEvent = showClear ?
@@ -977,7 +984,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             cls(
                 prefixcls,
                 {
-                    [`${prefixcls}-focus`]: isOpen && !isInput,
+                    [`${prefixcls}-focus`]: isFocus,
                     [`${prefixcls}-disabled`]: disabled,
                     [`${prefixcls}-single`]: !multiple,
                     [`${prefixcls}-multiple`]: multiple,
@@ -1122,7 +1129,8 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             showRestTagsPopover, 
             restTagsPopoverProps,
             searchPosition,
-            filterTreeNode
+            filterTreeNode,
+            preventScroll
         } = this.props;
         const {
             keyEntities,
@@ -1161,6 +1169,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 renderTagItem={(itemKey, index) => this.renderTagItem(itemKey, index)}
                 onRemove={itemKey => this.removeTag(itemKey)}
                 expandRestTagsOnClick={false}
+                preventScroll={preventScroll}
             />
         );
     };

packages/semi-webpack/package.json

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

src/html.js

@@ -162,6 +162,9 @@ export default function HTML(props) {
                 {
                     SEMI_SEARCH_URL?<script src={SEMI_SEARCH_URL} defer={true}/>:<script src={"https://unpkg.byted-static.com/latest/ies/semi-search-opensource/dist/semi-search.js"} defer={true}/>
                 }
+                {
+                    MATERIAL_LIST_URL ? <script src={MATERIAL_LIST_URL} defer={true} /> : null
+                }
                 <link rel="icon" href="https://lf9-static.semi.design/obj/semi-tos/images/favicon.ico" />
                 <script dangerouslySetInnerHTML={{ __html: `(${darkmodeProcesser.toString()})()` }} />
                 {props.headComponents}

src/templates/postTemplate.js

@@ -229,42 +229,49 @@ const components = {
                 duration: 3,
             });
         }
+        const hideMaterialTitle = (children === '相关物料' || children === 'Related Material') && !MATERIAL_LIST_URL; // The external network does not display related materials
         return (
-            <h2 className="md markdown gatsby-h2" id={makeAnchorId(children)}>
-                {children}
-                {
-                    children === '设计变量' ?
-                        <Tooltip content={
-                            <span>
-                                如何使用可查阅：
-                                <a href='https://semi.design/dsm_manual/zh-CN/web/componentToken' target="_blank">Semi DSM 手册</a>
-                            </span>}
-                        >
-                            <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
-                        </Tooltip>
-                        : null
-                }
+            <>
                 {
-                    children === 'Design Tokens' ? <Tooltip content={
-                        <span>
-                            How to use: Refer to
-                            <a href='https://bytedance.feishu.cn/docx/doxcnVROZf61ey1zFzlErtJfL2d' target="_blank">DSM Playbook</a>
-                        </span>}>
-                        <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
-                    </Tooltip> : null
+                    hideMaterialTitle ? 
+                        null : 
+                        <h2 className="md markdown gatsby-h2" id={makeAnchorId(children)}>
+                            {children}
+                            {
+                                children === '设计变量' ?
+                                    <Tooltip content={
+                                        <span>
+                                            如何使用可查阅：
+                                            <a href='https://semi.design/dsm_manual/zh-CN/web/componentToken' target="_blank">Semi DSM 手册</a>
+                                        </span>}
+                                    >
+                                        <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
+                                    </Tooltip>
+                                    : null
+                            }
+                            {
+                                children === 'Design Tokens' ? <Tooltip content={
+                                    <span>
+                                        How to use: Refer to
+                                        <a href='https://bytedance.feishu.cn/docx/doxcnVROZf61ey1zFzlErtJfL2d' target="_blank">DSM Playbook</a>
+                                    </span>}>
+                                    <IconHelpCircle size='large' type="help_circle" style={{ color: ' --semi-color-tertiary-light-default', marginLeft: 4 }} />
+                                </Tooltip> : null
+                            }
+                            <IconLink
+                                className={'anchor-link-button-icon'}
+                                tabIndex={0}
+                                role="button"
+                                onClick={onIconLinkClick}
+                                onKeyPress={(e) => {
+                                    if (['Enter', ' '].includes(e?.key)) {
+                                        onIconLinkClick(e);
+                                    }
+                                }}
+                            />
+                        </h2>
                 }
-                <IconLink
-                    className={'anchor-link-button-icon'}
-                    tabIndex={0}
-                    role="button"
-                    onClick={onIconLinkClick}
-                    onKeyPress={(e) => {
-                        if (['Enter', ' '].includes(e?.key)) {
-                            onIconLinkClick(e);
-                    }
-                    }}
-                />
-            </h2>
+            </>
         );
     },
     blockquote: ({ children }) => <blockquote className={'gatsby-blockquote'}>{children}</blockquote>,
@@ -678,7 +685,8 @@ export default function Template(args) {
             <SEO lang="zh-CN" title={`${current.frontmatter.title} - Semi Design`} />
             <div className={'pageAnchor'}>
                 {(tabValue === 'rd' || (["Accessibility "].includes(enTitle))) && (
-                    <PageAnchor slug={pageContext.slug} data={current.tableOfContents.items} />
+                    //  The external network does not display related materials
+                    <PageAnchor slug={pageContext.slug} data={MATERIAL_LIST_URL ? current.tableOfContents.items : current.tableOfContents.items.filter(item => !(item.title === '相关物料' || item.title === 'Related Material'))} />
                 )}
                 {
                     iframeAnchorData && tabValue === 'ued' && <DesignPageAnchor data={iframeAnchorData} />