Merge branch 'main' into css-way

.gitignore

@@ -234,3 +234,4 @@ tmp
 
 
 .vscode
+.circle-engineer

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

@@ -32,6 +32,59 @@ import { IconUpload } from '@douyinfe/semi-icons';
     </Upload>
 );
 ```
+### File name too long ellipsis
+
+Customize the file name tooltip using the `showTooltip` property
+
+When the type is `boolean`, control whether to show the tooltip
+
+```jsx live=true width=48%
+import React from 'react';
+import { Upload, Button } from '@douyinfe/semi-ui';
+
+() => {
+    const action = 'https://api.semi.design/upload';
+    const button = (
+        <Button icon={<IconUpload />} theme="light">
+            Click upload
+        </Button>
+    );
+    return (
+        <>
+            <Upload action={action} showTooltip={false}>
+                {button}
+            </Upload>
+        </>
+    );
+}
+```
+
+When the type is `object`, you can customize the tooltip style.
+
+```jsx live=true width=48%
+import React from 'react';
+import { Upload, Button, Tooltip } from '@douyinfe/semi-ui';
+
+() => {
+    const action = 'https://api.semi.design/upload';
+    const button = (
+        <Button icon={<IconUpload />} theme="light">
+            Click upload
+        </Button>
+    );
+    return (
+        <>
+            <Upload action={action} showTooltip={{ 
+                renderTooltip: (content, children) => {
+                    return <Tooltip content={content} position="bottom">{children}</Tooltip>
+                } 
+            }}>
+                {button}
+            </Upload>
+        </>
+    );
+}
+```
 
 ### Add prompt text
 
@@ -1404,6 +1457,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |showPicInfo| Whether to display picture information, only valid in photo wall mode | boolean| false | 2.2.0 |
 |showReplace | When the upload is successful, whether to display the replace button inside the fileCard | boolean | false | 1.21.0 |
 |showRetry | When uploading fails, whether to display the retry button inside the fileCard | boolean | true | 1.0.0 |
+|showTooltip | When the file name is too long, whether to display the tooltip and related configurations: type, the component that carries the floating layer content, supports Tooltip \| Popover; opts, other properties that need to be passed to the floating layer component; renderTooltip, custom rendering of the popup layer component | boolean \| {type: 'tooltip' \| 'popover', opts: object, renderTooltip: (content: ReactNode, children: ReactNode) => ReactNode} | true |  |
 |showUploadList | Whether to display the file list | boolean | true | |
 |style | Style | CSSProperties | | |
 |transformFile | After selecting the file, the callback function before uploading the file can be used to customize the conversion processing of the file | (file:[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => FileItem | | 1.0.0 |

content/input/upload/index.md

@@ -35,6 +35,60 @@ import { IconUpload } from '@douyinfe/semi-icons';
 };
 ```
 
+### 文件名超长省略
+
+通过 `showTooltip` 属性，自定义设置文件名弹出提示
+
+当类型为 `boolean` 时，控制是否弹出提示
+
+```jsx live=true width=48%
+import React from 'react';
+import { Upload, Button } from '@douyinfe/semi-ui';
+
+() => {
+    const action = 'https://api.semi.design/upload';
+    const button = (
+        <Button icon={<IconUpload />} theme="light">
+            点击上传
+        </Button>
+    );
+    return (
+        <>
+            <Upload action={action} showTooltip={false}>
+                {button}
+            </Upload>
+        </>
+    );
+}
+```
+
+当类型为 `object` 时，可以自定义弹出样式
+
+```jsx live=true width=48%
+import React from 'react';
+import { Upload, Button, Tooltip } from '@douyinfe/semi-ui';
+
+() => {
+    const action = 'https://api.semi.design/upload';
+    const button = (
+        <Button icon={<IconUpload />} theme="light">
+            点击上传
+        </Button>
+    );
+    return (
+        <>
+            <Upload action={action} showTooltip={{ 
+                renderTooltip: (content, children) => {
+                    return <Tooltip content={content} position="bottom">{children}</Tooltip>
+                } 
+            }}>
+                {button}
+            </Upload>
+        </>
+    );
+}
+```
+
 ### 添加提示文本
 
 通过 `prompt` 插槽，设置自定义提示文本  
@@ -1413,6 +1467,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |showPicInfo| 是否显示图片信息，只在照片墙模式下有效| boolean| false | 2.2.0 |
 |showReplace | 上传成功时，是否展示在 fileCard 内部展示替换按钮 | boolean | false |  |
 |showRetry | 上传失败时，是否展示在 fileCard 内部展示重试按钮 | boolean | true |  |
+|showTooltip | 文件名超长时，是否展示 tooltip 及相关配置: type，浮层内容承载的组件，支持 Tooltip \| Popover；opts，其他需要透传给浮层组件的属性； renderTooltip，自定义渲染弹出层组件 | boolean \| {type: 'tooltip' \| 'popover', opts: object, renderTooltip: (content: ReactNode, children: ReactNode) => ReactNode} | true |  |
 |showUploadList | 是否显示文件列表 | boolean | true |  |
 |style | 样式 | CSSProperties |  |  |
 |transformFile | 选中文件后，上传文件前的回调函数，可用于对文件进行自定义转换处理 | (file:[File](https://developer.mozilla.org/zh-CN/docs/Web/API/File)) => FileItem |  |  |

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

@@ -121,6 +121,35 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
     - Fixed the problem that  Form Label lost padding right（effect version v2.23.1） [#1258](https://github.com/DouyinFE/semi-design/pull/1258)
     - The Switch component Design Token is updated, adding `$spacing-switch_knob-left`; `$motion-switch_unchecked-translateX` is corrected to more semantically `$spacing-switch_unchecked-translateX` [#1267](https://github.com/DouyinFE/semi-design/pull/1267)
 
+#### 🎉 2.79.0 (2025-05-08)
+- 【Feat】
+    - Upload Added a pop-up file name prompt function when the file name is too long [@yatbfm](https://github.com/yatbfm)
+- 【Fix】
+    - Fix Switch component loading and disabled state hover style issue [@LonelySnowman](https://github.com/LonelySnowman)
+    - Fixed the issue that when the Table component sets the header background color through style in onHeaderCell, the fixed header does not take effect [#2814](https://github.com/DouyinFE/semi-design/issues/2814)
+- 【Style】
+    - Dropdown adds $radius-dropdown_item token to set the radius of each option in the panel [#2817](https://github.com/DouyinFE/semi-design/pull/2817)
+    - Add overflow: hidden style setting to the outermost layer of ScrollList [#2818](https://github.com/DouyinFE/semi-design/pull/2818)
+    - Fixed the problem that the color of the checkbox inside the selected Checkbox component is not controlled by the correct token when it is in the hovering state. [#2819](https://github.com/DouyinFE/semi-design/pull/2819)
+    - Added $color-radio_checked-icon-disabled token to allow users to configure the origin color of the Radio in the selected and disabled states [#2820](https://github.com/DouyinFE/semi-design/pull/2820)
+- 【Chore】
+   - The web components loader of the Webpack/Rspack plugin adds style insertion support for other components. The added components are AudioPlayer, Chat, CodeHighlight, ColorPicker, Cropper, HotKeys, JsonViewer, MarkdownRender, PinCode, Resizable, UserGuide, ButtonGroup, SplitButton, List, and TimePicker.[#2812](https://github.com/DouyinFE/semi-design/pull/2812)
+    - Throws a warning when the Tree component key is incorrectly passed as a number [@LonelySnowman](https://github.com/LonelySnowman) [#2773](https://github.com/DouyinFE/semi-design/pull/2773)
+
+
+#### 🎉 2.79.0-beta.0 (2025-04-23)
+- 【Style】
+    - Modify the implementation of background color and progress color in Progress to ensure that the design theme configuration takes effect [#2808](https://github.com/DouyinFE/semi-design/pull/2808)
+    - Fixed the problem that the width of the Chat content area was stretched by the table in the content, and the scrolling area was the entire content. After modification, the scrolling area is inside the table [#2776](https://github.com/DouyinFE/semi-design/issues/2776)
+- 【Design Token】
+    - Chat adds $width-chat_chatBox_avatar to set avatar width [#2775](https://github.com/DouyinFE/semi-design/pull/2775)
+    - Added Cascader padding token settings in large/small sizes, including $spacing-cascader_small_selection-paddingLeft, $spacing-cascader_small_selection-paddingRight, etc. [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+    - Added font setting tokens for Button in small/large sizes, including $font-button_small-fontSize, $font-button_small-lineHeight, $font-button_small-fontWeight, etc. [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+    - Modify the implementation of the background color and border color of the arrow in Popover to ensure that the background color and border color of the arrow in Popover can be modified through the theme configuration in DSM configuration, Added two arrow-related tokens: $color-popover-arrow-border and $color-popover-arrow-bg. [#2806](https://github.com/DouyinFE/semi-design/pull/2806)
+    - Added inputNumber stepper rounded corner token $radius-inputNumber_inner in innerButton mode [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+- 【Fix】
+    - Fixed the problem that when the hot area for sorting is the entire table header, an unexpected sorting problem will be triggered after the expansion is completed.  [#2802](https://github.com/DouyinFE/semi-design/issues/2802)
+
 #### 🎉 2.78.0 (2025-04-08)
 - 【Fix】
     - A fallback operation to avoid TypeError when target does not exist in BackTop component

content/start/changelog/index.md

@@ -13,6 +13,35 @@ Semi 版本号遵循 **Semver** 规范（主版本号 - 次版本号 - 修订版
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+#### 🎉 2.79.0 (2025-05-08)
+- 【Feat】
+    - Upload 添加文件名超长时弹出文件名提示功能 [@yatbfm](https://github.com/yatbfm) [#2753](https://github.com/DouyinFE/semi-design/pull/2753)
+- 【Fix】
+    - 修复 Switch 组件 loading 加 disabled 态 hover 后样式问题 [@LonelySnowman](https://github.com/LonelySnowman) [#2778](https://github.com/DouyinFE/semi-design/pull/2778)
+    - 修复 Table 组件在 onHeaderCell 中通过 style 设置表头背景色时候，fixed 表头中不生效问题 [BUG] Table 的 column 设置 fixed 后，通过 onHeaderCell 设置的 style 样式有问题 [#2814](https://github.com/DouyinFE/semi-design/issues/2814)
+- 【Style】
+    - Dropdown 增加 $radius-dropdown_item token 用于设置面板中的各选项圆角 [#2817](https://github.com/DouyinFE/semi-design/pull/2817)
+    - ScrollList 最外层增加 overflow: hidden 的样式设置 [#2818](https://github.com/DouyinFE/semi-design/pull/2818)
+    - 修复禁用，选中的 Checkbox 组件内部的对勾在悬停状态时，颜色未受到正确 token 控制问题 [#2819](https://github.com/DouyinFE/semi-design/pull/2819)
+    - 增加 $color-radio_checked-icon-disabled token 用于允许用户配置选中，禁用状态下的 Radio 的原点颜色 [#2820](https://github.com/DouyinFE/semi-design/pull/2820)
+- 【Chore】
+    - Webpack/Rspack 插件的 web components loader 增加其他组件的样式插入支持。增加的组件为AudioPlayer， Chat，CodeHighlight， ColorPicker， Cropper，HotKeys，JsonViewer， MarkdownRender，PinCode， Resizable， UserGuide， ButtonGroup，SplitButton，List，TimePicker。[#2812](https://github.com/DouyinFE/semi-design/pull/2812)
+    - 当 Tree组件 key 错传为 number 时抛出 warning [@LonelySnowman](https://github.com/LonelySnowman) [#2773](https://github.com/DouyinFE/semi-design/pull/2773)
+
+
+#### 🎉 2.79.0-beta.0 (2025-04-23)
+- 【Style】
+    - 修改 Progress 中背景色和进度颜色的实现方式，保证主题配置生效 [#2808](https://github.com/DouyinFE/semi-design/pull/2808)
+    - 修复 Chat 内容区域的宽度被内容中的 table 撑开, 滚动区域为整条内容的问题，修改后滚动区域在 table 内部  [#2776](https://github.com/DouyinFE/semi-design/issues/2776) [#2775](https://github.com/DouyinFE/semi-design/pull/2775)
+- 【Design Token】
+    - Chat 增加 $width-chat_chatBox_avatar 用于设置头像宽度 [#2775](https://github.com/DouyinFE/semi-design/pull/2775)
+    - 增加 Cascader 在大尺寸/小尺寸下的内边距 token 设置，包括$spacing-cascader_small_selection-paddingLeft，$spacing-cascader_small_selection-paddingRight 等 token [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+    - 增加 Button 在小尺寸/大尺寸上的字体设置 token，包括$font-button_small-fontSize， $font-button_small-lineHeight，$font-button_small-fontWeight 等 token [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+    - 修改 Popover 中箭头的背景色和边框颜色的实现方式，保证在 DSM 配置中可以通过主题配置的方式修改 Popover 的箭头的背景色和边框颜色。新增加 $color-popover-arrow-border, $color-popover-arrow-bg 两个和箭头相关的 Token。 [#2806](https://github.com/DouyinFE/semi-design/pull/2806)
+    - 增加 inputNumber 在 innerButton 模式下步进器的圆角 token $radius-inputNumber_inner [#2809](https://github.com/DouyinFE/semi-design/pull/2809)
+- 【Fix】
+    - 修复在排序热区为整个表头时候，在伸缩结束后，会触发意外的排序问题  [#2802](https://github.com/DouyinFE/semi-design/issues/2802) [#2803](https://github.com/DouyinFE/semi-design/pull/2803)
+
 #### 🎉 2.78.0 (2025-04-08)
 - 【Fix】
     - BackTop 组件的 target 不存在时候的兜底操作，避免 TypeError [#2786](https://github.com/DouyinFE/semi-design/pull/2786)

cypress/e2e/image.spec.js

@@ -479,7 +479,7 @@ describe('image', () => {
     });
 
     // 测试懒加载
-    it('lazyLoad + lazyLoadMargin', () => {
+    it.skip('lazyLoad + lazyLoadMargin', () => {
         cy.visit('http://127.0.0.1:6006/iframe.html?id=image--lazy-load-image&args=&viewMode=storyi');
         cy.get('.semi-image-img').eq(4).should('have.attr', 'data-src', 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/imag5.png');
         cy.get('.semi-image-img').eq(4).should('not.have.attr', 'src');

cypress/e2e/tabs.spec.js

@@ -101,17 +101,18 @@ describe('tabs', () => {
         cy.get('.semi-tabs-bar-arrow .semi-button-primary').eq(0).should('exist');
     });
 
-    it('showRestInDropdown', () => {
-        cy.visit('http://127.0.0.1:6006/iframe.html?id=tabs--show-rest-in-dropdown-demo&args=&viewMode=story');
-
-        cy.get('.semi-button').eq(1).trigger('mouseover');
-        cy.get('.semi-dropdown-content .semi-dropdown-item').should('not.exist');
-    });
-
     it.skip('activeTab is within the viewport after collapse Tabs did mount', () => {
         cy.visit('http://127.0.0.1:6006/iframe.html?id=tabs--collapse-scroll-into-view-demo&args=&viewMode=story');
 
         cy.wait(1000);
         cy.get('.semi-tabs-tab').contains('Tab-9').should('exist').and('be.visible');
     });
+
+    it('showRestInDropdown', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tabs--show-rest-in-dropdown-demo&args=&viewMode=story');
+
+        cy.get('.semi-button').eq(1).trigger('mouseover');
+        cy.get('.semi-dropdown-content .semi-dropdown-item').should('not.exist');
+    });
+   
 });

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.78.0"
+    "version": "2.79.0"
 }

packages/semi-animation-react/package.json

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

packages/semi-animation-styled/package.json

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

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.78.0",
+    "version": "2.79.0",
     "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.78.0",
+    "version": "2.79.0",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/button/button.scss

@@ -6,7 +6,6 @@ $module: #{$prefix}-button;
 
 .#{$module} {
     @include shadow-0;
-    @include font-size-regular;
     height: $height-button_default;
     display: inline-flex;
     align-items: center;
@@ -19,6 +18,8 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-size: $font-button-fontSize;
+    line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;
     outline: none;
     vertical-align: middle;
@@ -313,6 +314,9 @@ $module: #{$prefix}-button;
         padding-bottom: $spacing-button_small-paddingBottom;
         padding-left: $spacing-button_small-paddingLeft;
         padding-right: $spacing-button_small-paddingRight;
+        font-size: $font-button_small-fontSize;
+        line-height: $font-button_small-lineHeight;
+        font-weight: $font-button_small-fontWeight;
     }
 
     &-size-large {
@@ -321,6 +325,9 @@ $module: #{$prefix}-button;
         padding-bottom: $spacing-button_large-paddingBottom;
         padding-left: $spacing-button_large-paddingLeft;
         padding-right: $spacing-button_large-paddingRight;
+        font-size: $font-button_large-fontSize;
+        line-height: $font-button_large-lineHeight;
+        font-weight: $font-button_large-fontWeight;
     }
 
     &-block {

packages/semi-foundation/button/variables.scss

@@ -165,7 +165,16 @@ $width-button_iconOnly_large: $height-control-large; // 图标按钮 width - 大
 $spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距
 $spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
 
-$font-button-fontWeight: $font-weight-bold; // 按钮文字字重
+$font-button-fontWeight: $font-weight-bold; // 按钮文字字重 - 默认
+$font-button-fontSize: $font-size-regular; // 按钮文字字号- 默认
+$font-button-lineHeight: 20px; // 按钮文字行高 - 默认
+$font-button_small-fontWeight: $font-weight-bold; // 按钮文字字重 - 小尺寸
+$font-button_small-fontSize: $font-size-regular; // 按钮文字字号- 小尺寸
+$font-button_small-lineHeight: 20px; // 按钮文字行高 - 小尺寸
+$font-button_large-fontWeight: $font-weight-bold; // 默认按钮文字字重 - 大尺寸
+$font-button_large-fontSize: $font-size-regular; // 默认按钮文字字号 - 大尺寸
+$font-button_large-lineHeight: 20px; // 默认按钮文字行高 - 大尺寸
+
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认

packages/semi-foundation/cascader/cascader.scss

@@ -39,6 +39,16 @@ $module: #{$prefix}-cascader;
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
+
+        .#{$module}-selection {
+            padding-left: $spacing-cascader_small_selection-paddingLeft;
+            padding-right: $spacing-cascader_small_selection-paddingRight;
+
+            &-multiple {
+                padding-left: $spacing-cascader_small_selection_multiple-paddingLeft;
+                padding-right: $spacing-cascader_small_selection_multiple-paddingRight;
+            }
+        }
     }
 
     &-large {
@@ -47,6 +57,16 @@ $module: #{$prefix}-cascader;
         .#{$module}-selection {
             @include font-size-header-6;
         }
+
+        .#{$module}-selection {
+            padding-left: $spacing-cascader_large_selection-paddingLeft;
+            padding-right: $spacing-cascader_large_selection-paddingRight;
+
+            &-multiple {
+                padding-left: $spacing-cascader_large_selection_multiple-paddingLeft;
+                padding-right: $spacing-cascader_large_selection_multiple-paddingRight;
+            }
+        }
     }
 
     &-focus {

packages/semi-foundation/cascader/variables.scss

@@ -45,10 +45,20 @@ $color-cascader_danger-border-active: var(--semi-color-danger-light-active); //
 
 $color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
 
-$spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
-$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
-$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
-$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
+$spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距 - 默认
+$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距 - 默认
+$spacing-cascader_small_selection-paddingLeft: 12px;  // 级联选择触发器左侧内边距 - 小尺寸
+$spacing-cascader_small_selection-paddingRight: 12px;  // 级联选择触发器右侧内边距 - 小尺寸
+$spacing-cascader_large_selection-paddingLeft: 12px;  // 级联选择触发器左侧内边距 - 大尺寸
+$spacing-cascader_large_selection-paddingRight: 12px;  // 级联选择触发器右侧内边距 - 大尺寸
+
+$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 默认
+$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距 - 默认
+$spacing-cascader_small_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 小尺寸
+$spacing-cascader_small_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 小尺寸
+$spacing-cascader_large_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 大尺寸
+$spacing-cascader_large_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 大尺寸
+
 $spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
 $spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距

packages/semi-foundation/chat/chat.scss

@@ -138,6 +138,8 @@ $module: #{$prefix}-chat;
 
         &-avatar {
             flex-shrink: 0;
+            width: $width-chat_chatBox_avatar;
+            height: $width-chat_chatBox_avatar;
 
             &-hidden {
                 visibility: hidden;
@@ -208,6 +210,7 @@ $module: #{$prefix}-chat;
             align-items: flex-start;
             position: relative;
             row-gap: $spacing-chat_chatBox_wrap;
+            max-width: calc(100% - $spacing-chat_chatBox-columnGap - $width-chat_chatBox_avatar);
         }
 
 
@@ -217,6 +220,8 @@ $module: #{$prefix}-chat;
                 padding: $spacing-chat_chatBox_content-paddingY $spacing-chat_chatBox_content-paddingX;
                 border-radius: $radius-chat_chatBox_content;
                 background-color: $color-chat_chatBox_content_bg;
+                max-width: 100%;
+                box-sizing: border-box;
             }
 
             code {

packages/semi-foundation/chat/variables.scss

@@ -104,6 +104,8 @@ $width-chat_attachment_file_title: 90px; // 附件文件标题最大宽度
 $width-chat_max: 800px; // chat组件最大宽度
 $width-chat_dropArea-border: 5px; // 拖拽上传边框宽度
 $width-chat_chatBox_content_code_topSlot_copy: 150px; // 聊天框代码块顶部复制按钮最小宽度 
+$width-chat_chatBox_avatar: 24px; // 聊天框头像宽度
+
 // height
 $height-chat_action_stop: 42px; //停止生成按钮高度
 

packages/semi-foundation/checkbox/checkbox.scss

@@ -81,6 +81,7 @@ $module: #{$prefix}-checkbox;
 
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
+                color: $color-checkbox_checked-icon-disabled;
                 background: $color-checkbox_checked-bg-disabled;
                 box-shadow: none;
             }

packages/semi-foundation/dropdown/dropdown.scss

@@ -48,6 +48,7 @@ $module: #{$prefix}-dropdown;
         align-items: center;
         transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
             $transition_delay-dropdown_item-bg;
+        border-radius: $radius-dropdown_item;
 
         &-hover {
             background-color: $color-dropdown_item-bg-hover;

packages/semi-foundation/dropdown/variables.scss

@@ -1,4 +1,5 @@
 $radius-dropdown: var(--semi-border-radius-medium); // 下拉菜单圆角大小
+$radius-dropdown_item: 0px; // 下拉菜单项圆角大小
 $color-dropdown-bg-default: var(--semi-color-bg-3); // 下拉菜单背景颜色
 $color-dropdown_title-text-default: var(--semi-color-text-2); // 下拉菜单分组标题文字颜色
 

packages/semi-foundation/inputNumber/inputNumber.scss

@@ -65,6 +65,8 @@ $module: #{$prefix}-input-number;
 
     &-suffix-btns-inner {
         margin-left: $spacing-inputNumber_button_inner-marginLeft;
+        border-radius: $radius-inputNumber_inner;
+        overflow: hidden
     }
 
     .#{$prefix}-input-clearbtn {

packages/semi-foundation/inputNumber/variables.scss

@@ -6,7 +6,8 @@ $height-inputNumber_button_inner_large: $height-control-large - 2px; // 隐藏
 $height-inputNumber_button_inner_small: $height-control-small - 2px; // 隐藏步进器的数字输入框高度 - 小
 
 $width-inputNumber_button: 14px; // 步进器按钮宽度
-$radius-inputNumber: var(--semi-border-radius-small);
+$radius-inputNumber: var(--semi-border-radius-small); // 步进器按钮圆角 - 外部
+$radius-inputNumber_inner: var(--semi-border-radius-small); // 步进器按钮圆角 - 内部
 $spacing-inputNumber_button-marginLeft: 4px; // 步进器按钮左侧外边距
 $color-inputNumber_button-text-default: var(--semi-color-text-2); // 步进器按钮图标颜色
 $color-inputNumber_button-text-disabled: var(--semi-color-disabled-text); // 步进器按钮图标颜色 - 禁用

packages/semi-foundation/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.78.0",
+    "version": "2.79.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.78.0",
-        "@douyinfe/semi-json-viewer-core": "2.78.0",
+        "@douyinfe/semi-animation": "2.79.0",
+        "@douyinfe/semi-json-viewer-core": "2.79.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",

packages/semi-foundation/popover/popover.scss

@@ -88,5 +88,15 @@ $module-icon: #{$module}-icon-arrow;
     }
 }
 
+.#{$module}-icon-arrow {
+    path:nth-child(1) {
+        fill: $color-popover-arrow-border;
+    }
+  
+    path:nth-child(2) {
+        fill: $color-popover-arrow-bg;
+    }
+}
+
 @import '../tooltip/arrow.scss';
 @import "./rtl.scss";

packages/semi-foundation/popover/variables.scss

@@ -2,6 +2,8 @@
 $color-tooltip_arrow-icon-default: unset; // 箭头图标
 $color-popover-bg-default: var(--semi-color-bg-3); // 默认背景色
 $color-popover-border-default: var(--semi-color-border); // 默认描边颜色
+$color-popover-arrow-border: var(--semi-color-border); // 箭头描边颜色
+$color-popover-arrow-bg: var(--semi-color-bg-3); // 箭头默认背景色
 
 // Width/Height
 $width-popover_arrow: 24px; // 水平箭头宽度 ignore-semi-css-trans

packages/semi-foundation/progress/progress.scss

@@ -81,12 +81,18 @@ $module: #{$prefix}-progress;
             display: block;
         }
 
+        &-ring-track {
+            stroke: $color-progress_default-bg;
+        }
+
         &-ring-inner {
             transition: stroke-dashoffset $motion-progress-transition_duration;
             transition-timing-function: $motion-progress-transition_timing_function;
 
             transform: rotate(-90deg);
             transform-origin: 50% 50%;
+
+            stroke: $color-progress_track_inner-bg;
         }
 
         &-text {

packages/semi-foundation/radio/radio.scss

@@ -202,6 +202,7 @@ $inner-width: $width-icon-medium;
 
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
+                color: $color-radio_checked-icon-disabled;
                 background: $color-radio_checked-bg-disabled;
                 border-color: $color-radio_checked-border-disabled;
             }
@@ -363,10 +364,12 @@ $inner-width: $width-icon-medium;
 
         .#{$module}-inner-checked {
             .#{$module}-inner-display {
+                color: $color-radio_checked-icon-disabled;
                 background: $color-radio_checked-bg-disabled;
                 border-color: $color-radio_checked-border-disabled;
 
                 &:hover {
+                    color: $color-radio_checked-icon-disabled;
                     background: $color-radio_checked-bg-disabled;
                     border-color: $color-radio_checked-border-disabled;
                 }

packages/semi-foundation/radio/variables.scss

@@ -13,7 +13,7 @@ $color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中项悬
 $color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中项按下态背景颜色
 $color-radio_primary-border-default: var(--semi-color-primary); // 选中项描边颜色
 $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景颜色
-$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项原点颜色
+$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项圆点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
 $color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色
@@ -23,6 +23,7 @@ $color-radio_disabled-bg-default: var(--semi-color-disabled-fill); // 禁用态
 $color-radio_disabled-bg-hover: transparent;
 $color-radio_disabled-text-default: var(--semi-color-disabled-text); // 禁用态文本颜色
 $color-radio_disabled-border-default: var(--semi-color-border); // 禁用态描边颜色
+$color-radio_checked-icon-disabled: rgba(var(--semi-white), 1); // 禁用态圆点颜色
 
 $color-radio_buttonRadio-text-default: var(--semi-color-text-1); // 按钮样式单选文本颜色
 $color-radio_buttonRadio-bg-default: var(--semi-color-fill-0); // 按钮样式单选背景颜色

packages/semi-foundation/scrollList/scrollList.scss

@@ -12,7 +12,7 @@ $module: #{$prefix}-scrolllist;
     background: $color-scrollList-bg;
     box-shadow: $shadow-scrollList;
     border-radius: $radius-scrollList;
-
+    overflow: hidden;
     @include font-size-regular;
     user-select: none;
 

packages/semi-foundation/switch/switch.scss

@@ -98,6 +98,12 @@ $module: #{$prefix}-switch;
         }
     }
 
+    &-disabled.#{$module}-loading:not(.#{$module}-checked) {
+        &:hover {
+            background-color: $color-switch_spin_unchecked-bg-default;
+        }
+    }
+
     &-knob {
         @include shadow-knob;
         cursor: pointer;

packages/semi-foundation/table/foundation.ts

@@ -59,6 +59,11 @@ export interface OnChangeExtra {
     changeType?: 'sorter' | 'filter' | 'pagination'
 }
 
+interface MouseDownTarget {
+    targetName: string;
+    className: string
+}
+
 export interface TableAdapter<RecordType> extends DefaultAdapter {
     resetScrollY: () => void;
     setSelectedRowKeys: (selectedRowKeys: BaseRowKeyType[]) => void;
@@ -158,6 +163,8 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         }
     }
 
+    mouseDownTarget: MouseDownTarget;
+
     constructor(adapter: TableAdapter<RecordType>) {
         super({ ...adapter });
 
@@ -166,6 +173,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
          */
         const handleColumns: (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[]) => BaseColumnProps<RecordType>[] = this._adapter.getHandleColumns();
         const mergePagination: (pagination: BasePagination) => BasePagination = this._adapter.getMergePagination();
+        this.mouseDownTarget = null ;
 
         this.memoizedWithFnsColumns = memoizeOne(handleColumns, isEqual);
         this.memoizedFilterColumns = memoizeOne(filterColumns);
@@ -1079,8 +1087,21 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
      * @param {*} column
      * @param {*} e
      */
-    handleSort(column: { dataIndex?: string; sortOrder?: BaseSortOrder } = {}, e: any) {
+    handleSort(column: { dataIndex?: string; sortOrder?: BaseSortOrder } = {}, e: any, check = false) {
         this.stopPropagation(e);
+        /* if mouse down to the resizable handle, do not trigger the sorting，fix #2802
+            The target of the click event may be different from the target of the mousedown, 
+            e.g: Press the mouse, move to another node and then release it，
+            So according to the event in the mousedown to determine whether to trigger the sorting
+        */ 
+        if (check) {
+            if (this.mouseDownTarget && this.mouseDownTarget?.targetName === 'SPAN' && 
+                this.mouseDownTarget?.className?.includes?.('react-resizable-handle')
+            ) {
+                return;
+            }
+            this.mouseDownTarget = null;
+        }
 
         const { dataIndex } = column;
 
@@ -1127,6 +1148,13 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         this._notifyChange(null, null, curQuery, { changeType: 'sorter' });
     }
 
+    handleMouseDown = (e: any) => {
+        this.mouseDownTarget = {
+            targetName: e.target?.tagName,
+            className: e.target?.className,
+        };
+    }
+
     /**
      * Recalculate the cached data after clicking filter or sorter
      * @param {*} queries

packages/semi-foundation/table/table.scss

@@ -148,14 +148,14 @@ $module: #{$prefix}-table;
                         background-image: linear-gradient(0deg, $color-table_th-clickSort-bg-hover, $color-table_th-clickSort-bg-hover);
                         background-color: $color-table_cell-bg-hover;
                         
-                        &.#{$module}-cell-fixed {
-                            &-left,
-                            &-right {
-                                &::before {
-                                    background-color: transparent;
-                                }
-                            }
-                        }
+                        // &.#{$module}-cell-fixed {
+                        //     &-left,
+                        //     &-right {
+                        //         &::before {
+                        //             background-color: transparent;
+                        //         }
+                        //     }
+                        // }
                     }
                 }
 
@@ -164,19 +164,19 @@ $module: #{$prefix}-table;
                     &-right {
                         z-index: $z-table_fixed_column;
                         position: sticky;
-                        background-color: $color-table-bg-default;
-
-                        &::before {
-                            background-color: $color-table_th-bg-default;
-                            content: '';
-                            position: absolute;
-                            left: 0;
-                            top: 0;
-                            right: 0;
-                            bottom: 0;
-                            display: block;
-                            z-index: -1;
-                        }
+                        background-color: $color-table_th-bg-default;
+
+                        // &::before {
+                        //     background-color: $color-table_th-bg-default;
+                        //     content: '';
+                        //     position: absolute;
+                        //     left: 0;
+                        //     top: 0;
+                        //     right: 0;
+                        //     bottom: 0;
+                        //     display: block;
+                        //     z-index: -1;
+                        // }
                     }
 
                     &-left-last {
@@ -270,18 +270,19 @@ $module: #{$prefix}-table;
                         &-left,
                         &-right {
                             background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
-
-                            &::before {
-                                background-color: $color-table_body-bg-hover;
-                                content: '';
-                                position: absolute;
-                                left: 0;
-                                top: 0;
-                                right: 0;
-                                bottom: 0;
-                                display: block;
-                                z-index: -1;
-                            }
+                            background-color: $color-table_body-bg-hover;
+
+                            // &::before {
+                            //     background-color: $color-table_body-bg-hover;
+                            //     content: '';
+                            //     position: absolute;
+                            //     left: 0;
+                            //     top: 0;
+                            //     right: 0;
+                            //     bottom: 0;
+                            //     display: block;
+                            //     z-index: -1;
+                            // }
                         }
                     }
                 }

packages/semi-icons-lab/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons-lab",
-  "version": "2.78.0",
+  "version": "2.79.0",
   "description": "semi icons lab",
   "keywords": [
     "semi",

packages/semi-icons/package.json

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

packages/semi-illustrations/package.json

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

packages/semi-json-viewer-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-json-viewer-core",
-    "version": "2.78.0",
+    "version": "2.79.0",
     "description": "",
     "main": "lib/index.js",
     "module": "lib/index.js",

packages/semi-next/package.json

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

packages/semi-rspack/package.json

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

packages/semi-rspack/src/componentDependentTree.ts

@@ -1,5 +1,6 @@
 const dependentTree = {
     "Anchor": ["Typography"],
+    "AudioPlayer": ["Button", "Dropdown", "Image", "Tooltip", "Popover", "Icon"],
     "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
     "Avatar": [] as any,
     "AvatarGroup": [] as any,
@@ -8,14 +9,20 @@ const dependentTree = {
     "Banner": ["IconButton", "Typography", "Icon"],
     "Breadcrumb": ["Popover", "Typography", "Icon"],
     "Button": ["Icon"],
+    "ButtonGroup": ["Button"],
+    "SplitButtonGroup": ["Button"],
     "Calendar": ["Popover", "Button", "Icon"],
     "Card": ["Space", "Skeleton", "Typography"],
     "Carousel": ["Icon"],
     "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
+    "Chat": ["TextArea", "Button", "Upload", "Toast", "Progress", "Image", "Avatar", "Icon", "MarkdownRender", "Typography", "Tooltip", "Divider", "Popconfirm", "BackTop"],
     "Checkbox": ["Icon"],
+    "CodeHighlight": [] as any,
     "CheckboxGroup": ["Icon"],
     "Collapse": ["Collapsible", "Icon"],
     "Collapsible": [] as any,
+    "ColorPicker": ["Popover", "Input", "InputGroup", "InputNumber", "Select", "Button"],
+    "Cropper": [] as any,
     "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
     "Descriptions": [] as any,
     "Divider": [] as any,
@@ -25,24 +32,30 @@ const dependentTree = {
     "Row": [] as any,
     "Col": [] as any,
     "Highlight": [] as any,
+    "HotKeys": [] as any,
     "IconButton": ["Button", "Spin", "Icon"],
     "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
     "Input": ["Icon"],
     "InputGroup": ["Form"],
     "TextArea": ["Icon"],
     "InputNumber": ["Input", "Icon"],
+    "JsonViewer": ["Button", "Input", "Icon"],
     "Layout": [] as any,
+    "List": ["Row", "Spin"],
+    "MarkdownRender": ["Typography", "CodeHighlight", "Image", "Table", "Icon"],
     "Modal": ["Button", "Portal", "Typography", "Icon"],
     "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
     "Notification": ["Button", "Icon"],
     "OverflowList": [] as any,
     "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
+    "PinCode": ["Input"],
     "Popconfirm": ["Popover", "Button", "Icon"],
     "Popover": ["Tooltip"],
     "Portal": [] as any,
     "Progress": [] as any,
     "Radio": ["Icon"],
     "Rating": ["Icon", "Tooltip"],
+    "Resizable": ["Icon"],
     "ScrollList": [] as any,
     "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
     "SideSheet": ["[Portal", "Button", "Icon"],
@@ -58,13 +71,15 @@ const dependentTree = {
     "TagGroup": ["Icon", "Popover", "Avatar"],
     "TagInput": ["Tag", "Input", "Popover", "Icon"],
     "Timeline": [] as any,
+    "TimePicker": ["Input", "Icon", "Popover", "ScrollList"],
     "Toast": ["Button", "Icon"],
     "Tooltip": ["Portal"],
     "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
     "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
     "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
     "Typography": ["Popover", "Tooltip", "Icon"],
-    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"]
+    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"],
+    "UserGuide": ["Popover", "Button", "Modal"]
 };
   
 export default dependentTree;

packages/semi-rspack/src/loaders/semi-web-component-loader.ts

@@ -9,7 +9,9 @@ function getAllComponents(components: string[]) {
     const specialCaseBefore = {
         'AvatarGroup': 'Avatar',
         'CheckboxGroup': 'Checkbox',
-        'TagGroup': 'Tag'
+        'TagGroup': 'Tag',
+        'ButtonGroup': 'Button',
+        'SplitButtonGroup': 'Button',
     };
 
     /*
@@ -70,6 +72,7 @@ function getScssImportPaths(components: string[]) {
         'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
         "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
         "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
+        "SplitButtonGroup": `${pathsObj.foundationPath}button/SplitButtonGroup.scss`,
     };
     const cssPaths = ["Base", ...components].map(componentName => {
         const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.78.0",
+    "version": "2.79.0",
     "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.78.0",
+    "version": "2.79.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

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

@@ -4,7 +4,7 @@ import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { Form, Button, Avatar, Dropdown, Radio, RadioGroup, Switch, Collapsible, AvatarGroup, Divider } from '@douyinfe/semi-ui';
 import { IconUpload, IconForward, IconMoreStroked, IconArrowRight, IconChevronUp } from '@douyinfe/semi-icons';
 import MarkdownRender from '../../markdownRender';
-import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode, infoWithDivider, infoWithJSX } from './constant';
+import { initMessage, roleInfo, commonOuterStyle, hintsExample, infoWithAttachment, simpleInitMessage, semiCode, infoWithDivider, infoWithJSX, tableContent } from './constant';
 
 export default {
     title: 'Chat',
@@ -149,6 +149,25 @@ export const _Chat = () => {
     )
 }
 
+
+export const TableContent = () => {
+    const [message, setMessage] = useState(tableContent);
+
+    return (
+        <div
+            style={{ height: 600, width: 400}}
+        >
+            <Chat 
+                placeholder={'不处理输入信息，仅用于展示'}
+                style={commonOuterStyle}
+                chats={message}
+                roleConfig={roleInfo}
+                uploadProps={uploadProps}
+            />
+        </div>
+    )
+}
+
 export const Attachment = () => {
     const [message, setMessage] = useState(infoWithAttachment);
 

packages/semi-ui/chat/_story/constant.js

@@ -74,7 +74,7 @@ const infoWithDivider = [
         createAt: 1715676751919,
         content: "test",
     },
-]
+];
 
 const infoWithAttachment = [
     {
@@ -168,7 +168,23 @@ const infoWithJSX = [
 直接在 Markdown 中书写 JSX 即可
 `
     },
-]
+];
+
+const tableContent = [
+    {
+        role: 'system',
+        id: '1',
+        createAt: 1715676751919,
+        content: `这是一个 Table示例
+| 支持 | Markdown 表格 |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2fdasfdsafdsafdsf | 3fdafdsafdsfd | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+`
+    },
+];
 
 export {
     initMessage,
@@ -179,5 +195,6 @@ export {
     simpleInitMessage,
     semiCode, 
     infoWithDivider,
-    infoWithJSX
+    infoWithJSX,
+    tableContent
 };

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.78.0",
+    "version": "2.79.0",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.78.0",
-        "@douyinfe/semi-animation-react": "2.78.0",
-        "@douyinfe/semi-foundation": "2.78.0",
-        "@douyinfe/semi-icons": "2.78.0",
-        "@douyinfe/semi-illustrations": "2.78.0",
-        "@douyinfe/semi-theme-default": "2.78.0",
+        "@douyinfe/semi-animation": "2.79.0",
+        "@douyinfe/semi-animation-react": "2.79.0",
+        "@douyinfe/semi-foundation": "2.79.0",
+        "@douyinfe/semi-icons": "2.79.0",
+        "@douyinfe/semi-illustrations": "2.79.0",
+        "@douyinfe/semi-theme-default": "2.79.0",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-ui/popover/Arrow.tsx

@@ -16,16 +16,16 @@ const Arrow: React.FC<ArrowProps> = (props = {}) => {
     const isVertical = position.indexOf('top') === 0 || position.indexOf('bottom') === 0;
     const cls = classnames(className, cssClasses.ARROW);
 
-    const borderOpacity = get(arrowStyle, 'borderOpacity', strings.DEFAULT_ARROW_STYLE.borderOpacity);
+    const borderOpacity = get(arrowStyle, 'borderOpacity');
     const bgColor = get(
         arrowStyle,
         'backgroundColor',
-        get(popStyle, 'backgroundColor', strings.DEFAULT_ARROW_STYLE.backgroundColor)
+        get(popStyle, 'backgroundColor')
     );
     const borderColor = get(
         arrowStyle,
         'borderColor',
-        get(popStyle, 'borderColor', strings.DEFAULT_ARROW_STYLE.borderColor)
+        get(popStyle, 'borderColor')
     );
 
     const wrapProps = {
@@ -40,19 +40,23 @@ const Arrow: React.FC<ArrowProps> = (props = {}) => {
         <svg {...wrapProps}>
             <path
                 d="M0 0.5L0 1.5C4 1.5, 5.5 3, 7.5 5S10,8 12,8S14.5 7, 16.5 5S20,1.5 24,1.5L24 0.5L0 0.5z"
-                fill={borderColor}
-                opacity={borderOpacity}
+                style={{ fill: borderColor, opacity: borderOpacity }}
+            />
+            <path 
+                d="M0 0L0 1C4 1, 5.5 2, 7.5 4S10,7 12,7S14.5  6, 16.5 4S20,1 24,1L24 0L0 0z" 
+                style={{ fill: bgColor }}
             />
-            <path d="M0 0L0 1C4 1, 5.5 2, 7.5 4S10,7 12,7S14.5  6, 16.5 4S20,1 24,1L24 0L0 0z" fill={bgColor} />
         </svg>
     ) : (
         <svg {...wrapProps}>
             <path
                 d="M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z"
-                fill={borderColor}
-                opacity={borderOpacity}
+                style={{ fill: borderColor, opacity: borderOpacity }}
+            />
+            <path 
+                d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" 
+                style={{ fill: bgColor }}
             />
-            <path d="M0 0L1 0C1 4, 2 5.5, 4 7.5S7,10 7,12S6 14.5, 4 16.5S1,20 1,24L0 24L0 0z" fill={bgColor} />
         </svg>
     );
 };

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

@@ -681,4 +681,38 @@ export const FixNestedPopover = () => {
             </Popover>
         </div>
     );
-}
+}
+
+export const CustomBg = () => {
+  return (
+      <div id='popup-parent' style={{ position: 'relative' }}>
+          <Popover
+              content={
+                  <article style={{ padding: 4 }}>
+                      Hi, Semi UI Popover.
+                  </article>
+              }
+              trigger='custom'
+              visible
+              position='right'
+              showArrow
+              style={{
+                  backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                  borderColor: 'rgba(var(--semi-blue-4),1)',
+                  color: 'var(--semi-color-white)',
+                  borderWidth: 1,
+                  borderStyle: 'solid',
+              }}
+          >
+              <Tag
+                  style={{
+                      backgroundColor: 'rgba(var(--semi-blue-4),1)',
+                      color: 'var(--semi-color-white)'
+                  }}
+              >
+                  Colorful Popover
+              </Tag>
+          </Popover>
+      </div>
+  );
+}

packages/semi-ui/progress/__test__/progress.test.js

@@ -70,12 +70,12 @@ describe('Progress', () => {
             type: 'circle',
         };
         const p = getProgress(props);
-        const _stroke = p
+        const style = p
             .find('.semi-progress-circle-ring-inner')
             .at(0)
             .getDOMNode()
-            .getAttribute('stroke');
-        expect(_stroke).toEqual('#8080807f');
+            .getAttribute('style');
+        expect(style).toEqual("stroke: #8080807f;");
     });
 
     it('Gradient Accuracy [strokeGradient false & stroke type is Array]', () => {
@@ -90,12 +90,12 @@ describe('Progress', () => {
             type: 'circle',
         };
         const p = getProgress(props);
-        const _stroke = p
+        const style = p
             .find('.semi-progress-circle-ring-inner')
             .at(0)
             .getDOMNode()
-            .getAttribute('stroke');
-        expect(_stroke).toEqual('#ffffffff');
+            .getAttribute('style');
+        expect(style).toEqual("stroke: #ffffffff;");
     });
 
     it('Gradient Compatibility [strokeGradient true & stroke type is Array]', () => {
@@ -111,12 +111,12 @@ describe('Progress', () => {
             type: 'circle',
         };
         const p = getProgress(props);
-        const _stroke = p
+        const style = p
             .find('.semi-progress-circle-ring-inner')
             .at(0)
             .getDOMNode()
-            .getAttribute('stroke');
-        expect(_stroke).toEqual('#066b9dff');
+            .getAttribute('style');
+        expect(style).toEqual("stroke: #066b9dff;");
     });
 
     it('direction', () => {

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
-import { Progress, IconButton } from '../../index';
+import { Progress, IconButton, Button } from '../../index';
+import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
+
 
 export default {
   title: 'Progress'
@@ -69,3 +71,50 @@ export const ProgressShowInfo = () => (
 ProgressShowInfo.story = {
   name: 'progress showInfo',
 };
+
+export const CustomLineColor = () => {
+  const [percent, setPercent] = useState(10);
+  const strokeArr = [
+      { percent: 20, color: 'red' },
+      { percent: 40, color: 'orange-9' },
+      { percent: 60, color: 'light-green-8' },
+      { percent: 80, color: 'hsla(125, 50%, 46% / 1)' }
+  ];
+  return (
+      <>
+          <div>
+              <Progress
+                  percent={percent}
+                  stroke={strokeArr}
+                  showInfo
+                  type="circle"
+                  width={100}
+                  aria-label="disk usage"
+              />
+              <Progress
+                  percent={percent}
+                  stroke={strokeArr}
+                  showInfo
+                  style={{ margin: '20px 0 10px', width: 200 }}
+                  aria-label="disk usage"
+              />
+          </div>
+          <Button
+              icon={<IconChevronLeft />}
+              theme="light"
+              onClick={() => {
+                  setPercent(percent - 10);
+              }}
+              disabled={percent === 0}
+          />
+          <Button
+              icon={<IconChevronRight />}
+              theme="light"
+              onClick={() => {
+                  setPercent(percent + 10);
+              }}
+              disabled={percent === 100}
+          />
+      </>
+  )
+}

packages/semi-ui/progress/index.tsx

@@ -73,11 +73,9 @@ class Progress extends Component<ProgressProps, ProgressState> {
         direction: strings.DEFAULT_DIRECTION,
         format: (text: string): string => `${text}%`,
         motion: true,
-        orbitStroke: 'var(--semi-color-fill-0)',
         percent: 0,
         showInfo: false,
         size: strings.DEFAULT_SIZE,
-        stroke: strings.STROKE_DEFAULT,
         strokeGradient: false,
         strokeLinecap: strings.DEFAULT_LINECAP,
         strokeWidth: 4,
@@ -170,6 +168,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
             wrapper: cls(`${prefixCls}-circle`, className),
             svg: cls(`${prefixCls}-circle-ring`),
             circle: cls(`${prefixCls}-circle-ring-inner`),
+            track: cls(`${prefixCls}-circle-ring-track`),
         };
         const perc = this.calcPercent(percent);
         const percNumber = this.calcPercent(percentNumber);
@@ -210,12 +209,13 @@ class Progress extends Component<ProgressProps, ProgressState> {
             >
                 <svg key={size} className={classNames.svg} height={width} width={width} aria-hidden>
                     <circle
+                        className={classNames.track}
                         strokeDashoffset={0}
                         strokeWidth={strokeWidth}
                         strokeDasharray={strokeDasharray}
                         strokeLinecap={strokeLinecap}
                         fill="transparent"
-                        stroke={orbitStroke}
+                        style={{ stroke: orbitStroke }}
                         r={radius}
                         cx={cx}
                         cy={cy}
@@ -228,7 +228,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
                         strokeDasharray={strokeDasharray}
                         strokeLinecap={strokeLinecap}
                         fill="transparent"
-                        stroke={_stroke}
+                        style={{ stroke: _stroke }}
                         r={radius}
                         cx={cx}
                         cy={cy}
@@ -260,7 +260,7 @@ class Progress extends Component<ProgressProps, ProgressState> {
         if (typeof color !== 'undefined') {
             return color;
         }
-        return strings.STROKE_DEFAULT;
+        return null;
     }
 
     renderLineProgress(): ReactNode {

packages/semi-ui/table/Table.tsx

@@ -1092,8 +1092,9 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             column = { ...column, title: newTitle };
             if (clickColumnToSorter) {
                 column.clickToSort = e => {
-                    this.foundation.handleSort(column, e);
+                    this.foundation.handleSort(column, e, true);
                 };
+                column.mouseDown = this.foundation.handleMouseDown;
                 column.sortOrder = sortOrder;
                 column.showSortTip = showSortTip;
             }

packages/semi-ui/table/TableHeaderRow.tsx

@@ -197,8 +197,9 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
             
             if (typeof column.clickToSort === 'function') {
                 if (props.onClick) {
+                    const onClick = props.onClick;
                     props.onClick = (e: any) => {
-                        props.onClick(e);
+                        onClick(e);
                         column.clickToSort(e);
                     };
                 } else {
@@ -206,6 +207,18 @@ export default class TableHeaderRow extends BaseComponent<TableHeaderRowProps, R
                 }
             }
 
+            if (typeof column.mouseDown === 'function') {
+                if (props.onMouseDown) {
+                    const onMouseDown = props.onMouseDown;
+                    props.onMouseDown = (e: any) => {
+                        onMouseDown(e);
+                        column.mouseDown(e);
+                    };
+                } else {
+                    props.onMouseDown = column.mouseDown;
+                }
+            }
+
             const headerCellNode = (<HeaderCell
                 role="columnheader"
                 aria-colindex={cellIndex + 1}

packages/semi-ui/table/_story/RowBg/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+
+class RowBg extends React.Component {
+    constructor(props = {}) {
+        super(props);
+  
+        this.columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                width: 150,
+                fixed: 'left',
+                filterMultiple: false,
+                filters: [
+                    {
+                        text: 'Code 45',
+                        value: '45',
+                    },
+                    {
+                        text: 'King 4',
+                        value: 'King 4',
+                    },
+                ],
+                onFilter: (value, record) => record.name.includes(value),
+                filterDropdownProps: {
+                    showTick: true,
+                }
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                width: 150,
+                sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+            },
+            {
+                title: 'Address',
+                width: 200,
+                dataIndex: 'address',
+            },
+            {
+                title: 'Description',
+                dataIndex: 'description',
+            },
+            {
+                fixed: 'right',
+                width: 250,
+                render: (text, record) => (
+                    <span color="green">Info</span>
+                ),
+            },
+        ];
+  
+  
+        const onHeaderCell = () => {
+            return {
+                style: { background: 'rgba(var(--semi-grey-1), 1)' },
+            };
+        };
+        this.columns.forEach((item) => (item.onHeaderCell = onHeaderCell));
+  
+        this.data = [];
+  
+        for (let i = 0; i < 46; i++) {
+            let age = 40 + (Math.random() > 0.5 ? 1 : -1) * Math.ceil(i / 3);
+            let name = `Edward King ${i}`;
+            this.data.push({
+                key: '' + i,
+                name,
+                age,
+                address: `London, Park Lane no. ${i}`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+        this.handleRow = (record, index) => {
+            // 给偶数行设置斑马纹
+            if (index % 2 === 0) {
+                return {
+                    style: {
+                        background: 'var(--semi-color-fill-0)',
+                    },
+                };
+            } else {
+                return {};
+            }
+        };
+  
+        this.scroll = { y: 400, x: '150%' };
+    }
+  
+    render() {
+        return <Table columns={this.columns} dataSource={this.data} onRow={this.handleRow} scroll={this.scroll} />;
+    }
+}
+
+export default RowBg;
+  

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

@@ -49,6 +49,7 @@ import ExpandRowByClick from './ExpandRowByClick';
 import FixAllColumnsWithoutWidth from './FixAllColumnsWithoutWidth';
 import HugeData from "./HugeData"
 import RowSelectionRenderCell from './RowSelectionRenderCell';
+import RowBg from './RowBg';
 
 export default {
   title: 'Table'
@@ -653,3 +654,5 @@ export const _RowSelectionRenderCell = () => <RowSelectionRenderCell />;
 _RowSelectionRenderCell.story = {
   name: 'RowSelection RenderCell',
 };
+
+export const RowBgDemo = () => <RowBg />;

packages/semi-ui/tree/index.tsx

@@ -48,6 +48,15 @@ export type { AutoSizerProps } from './autoSizer';
 
 const prefixcls = cssClasses.PREFIX;
 
+const treeDataNodeShape = {
+    key: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    label: PropTypes.any,
+    isLeaf: PropTypes.bool,
+    children: PropTypes.array,
+};
+treeDataNodeShape.children = PropTypes.arrayOf(PropTypes.shape(treeDataNodeShape));
+
 class Tree extends BaseComponent<TreeProps, TreeState> {
     static contextType = ConfigContext;
 
@@ -82,14 +91,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         showFilteredOnly: PropTypes.bool,
         showLine: PropTypes.bool,
         style: PropTypes.object,
-        treeData: PropTypes.arrayOf(
-            PropTypes.shape({
-                key: PropTypes.string,
-                value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-                label: PropTypes.any,
-                isLeaf: PropTypes.bool,
-            })
-        ),
+        treeData: PropTypes.arrayOf(PropTypes.shape(treeDataNodeShape)),
         keyMaps: PropTypes.object,
         treeDataSimpleJson: PropTypes.object,
         treeNodeFilterProp: PropTypes.string,

packages/semi-ui/upload/fileCard.tsx

@@ -15,6 +15,7 @@ import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
 import { isElement } from '../_base/reactUtils';
 import { RenderFileItemProps } from './interface';
+import Typography, { ShowTooltip } from '../typography';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -48,7 +49,8 @@ export interface FileCardProps extends RenderFileItemProps {
     className?: string;
     style?: CSSProperties;
     picWidth?: string | number;
-    picHeight?: string | number
+    picHeight?: string | number;
+    showTooltip?: boolean | ShowTooltip
 }
 
 export interface FileCardState {
@@ -77,7 +79,8 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
         style: PropTypes.object,
         url: PropTypes.string,
         validateMessage: PropTypes.node,
-        index: PropTypes.number
+        index: PropTypes.number,
+        showTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
     };
 
     static defaultProps = {
@@ -87,6 +90,7 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
         onRetry: (): void => undefined,
         preview: false,
         size: '',
+        showTooltip: true,
     };
 
     constructor(props: FileCardProps) {
@@ -227,7 +231,7 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
     }
 
     renderFile(locale: Locale["Upload"]) {
-        const { name, size, percent, url, showRetry: propsShowRetry, showReplace: propsShowReplace, preview, previewFile, status, style, onPreviewClick, renderFileOperation } = this.props;
+        const { name, size, percent, url, showRetry: propsShowRetry, showReplace: propsShowReplace, preview, previewFile, status, style, onPreviewClick, renderFileOperation, showTooltip } = this.props;
         const { fallbackPreview } = this.state;
         const fileCardCls = cls({
             [`${prefixCls}-file-card`]: true,
@@ -258,9 +262,9 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
                 </div>
                 <div className={`${infoCls}-main`}>
                     <div className={`${infoCls}-main-text`}>
-                        <span className={`${infoCls}-name`}>
+                        <Typography.Text className={`${infoCls}-name`} ellipsis={{ showTooltip }}>
                             {name}
-                        </span>
+                        </Typography.Text>
                         <span>
                             <span className={`${infoCls}-size`}>{fileSize}</span>
                             {showReplace && (

packages/semi-ui/upload/index.tsx

@@ -31,6 +31,7 @@ import type {
     FileItemStatus
 } from '@douyinfe/semi-foundation/upload/foundation';
 import type { ValidateStatus } from '../_base/baseComponent';
+import { ShowTooltip } from '../typography';
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -119,7 +120,8 @@ export interface UploadProps {
     uploadTrigger?: 'auto' | 'custom';
     validateMessage?: ReactNode;
     validateStatus?: ValidateStatus;
-    withCredentials?: boolean
+    withCredentials?: boolean;
+    showTooltip?: boolean | ShowTooltip
 }
 
 export interface UploadState {
@@ -200,6 +202,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         validateMessage: PropTypes.node,
         validateStatus: PropTypes.oneOf<UploadProps['validateStatus']>(strings.VALIDATE_STATUS),
         withCredentials: PropTypes.bool,
+        showTooltip: PropTypes.oneOfType([PropTypes.bool, PropTypes.object])
     };
 
     static defaultProps: Partial<UploadProps> = {
@@ -232,6 +235,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         showUploadList: true,
         uploadTrigger: 'auto' as const,
         withCredentials: false,
+        showTooltip: true,
     };
 
     static FileCard = FileCard;
@@ -424,6 +428,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             onPreviewClick,
             picWidth,
             picHeight,
+            showTooltip,
         } = this.props;
         const onRemove = (): void => this.remove(file);
         const onRetry = (): void => {
@@ -455,7 +460,8 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
                     ? (): void => this.foundation.handlePreviewClick(file)
                     : undefined,
             picWidth,
-            picHeight
+            picHeight,
+            showTooltip,
         };
 
         if (status === strings.FILE_STATUS_UPLOAD_FAIL && !validateMessage) {

packages/semi-webpack/package.json

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

packages/semi-webpack/src/componentDependentTree.ts

@@ -1,5 +1,6 @@
 const dependentTree = {
     "Anchor": ["Typography"],
+    "AudioPlayer": ["Button", "Dropdown", "Image", "Tooltip", "Popover", "Icon"],
     "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
     "Avatar": [] as any,
     "AvatarGroup": [] as any,
@@ -8,14 +9,20 @@ const dependentTree = {
     "Banner": ["IconButton", "Typography", "Icon"],
     "Breadcrumb": ["Popover", "Typography", "Icon"],
     "Button": ["Icon"],
+    "ButtonGroup": ["Button"],
+    "SplitButtonGroup": ["Button"],
     "Calendar": ["Popover", "Button", "Icon"],
     "Card": ["Space", "Skeleton", "Typography"],
     "Carousel": ["Icon"],
     "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
+    "Chat": ["TextArea", "Button", "Upload", "Toast", "Progress", "Image", "Avatar", "Icon", "MarkdownRender", "Typography", "Tooltip", "Divider", "Popconfirm"],
     "Checkbox": ["Icon"],
+    "CodeHighlight": [] as any,
     "CheckboxGroup": ["Icon"],
     "Collapse": ["Collapsible", "Icon"],
     "Collapsible": [] as any,
+    "ColorPicker": ["Popover", "Input", "InputGroup", "InputNumber", "Select", "Button"],
+    "Cropper": [] as any,
     "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
     "Descriptions": [] as any,
     "Divider": [] as any,
@@ -25,24 +32,30 @@ const dependentTree = {
     "Row": [] as any,
     "Col": [] as any,
     "Highlight": [] as any,
+    "HotKeys": [] as any,
     "IconButton": ["Button", "Spin", "Icon"],
     "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
     "Input": ["Icon"],
     "InputGroup": ["Form"],
     "TextArea": ["Icon"],
     "InputNumber": ["Input", "Icon"],
+    "JsonViewer": ["Button", "Input", "Icon"],
     "Layout": [] as any,
+    "List": ["Row", "Spin"],
+    "MarkdownRender": ["Typography", "CodeHighlight", "Image", "Table", "Icon"],
     "Modal": ["Button", "Portal", "Typography", "Icon"],
     "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
     "Notification": ["Button", "Icon"],
     "OverflowList": [] as any,
     "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
+    "PinCode": ["Input"],
     "Popconfirm": ["Popover", "Button", "Icon"],
     "Popover": ["Tooltip"],
     "Portal": [] as any,
     "Progress": [] as any,
     "Radio": ["Icon"],
     "Rating": ["Icon", "Tooltip"],
+    "Resizable": ["Icon"],
     "ScrollList": [] as any,
     "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
     "SideSheet": ["[Portal", "Button", "Icon"],
@@ -58,13 +71,15 @@ const dependentTree = {
     "TagGroup": ["Icon", "Popover", "Avatar"],
     "TagInput": ["Tag", "Input", "Popover", "Icon"],
     "Timeline": [] as any,
+    "TimePicker": ["Input", "Icon", "Popover", "ScrollList"],
     "Toast": ["Button", "Icon"],
     "Tooltip": ["Portal"],
     "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
     "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
     "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
     "Typography": ["Popover", "Tooltip", "Icon"],
-    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"]
+    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"],
+    "UserGuide": ["Popover", "Button", "Modal"]
 };
   
 export default dependentTree;

packages/semi-webpack/src/semi-web-component-loader.ts

@@ -8,7 +8,9 @@ function getAllComponents(components: string[]) {
     const specialCaseBefore = {
         'AvatarGroup': 'Avatar',
         'CheckboxGroup': 'Checkbox',
-        'TagGroup': 'Tag'
+        'TagGroup': 'Tag',
+        'ButtonGroup': 'Button',
+        'SplitButtonGroup': 'Button',
     };
 
     /*
@@ -69,6 +71,7 @@ function getScssImportPaths(components: string[]) {
         'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
         "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
         "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
+        "SplitButtonGroup": `${pathsObj.foundationPath}button/SplitButtonGroup.scss`,
     };
     const cssPaths = ["Base", ...components].map(componentName => {
         const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);

yarn.lock

@@ -1592,13 +1592,13 @@
     "@douyinfe/semi-animation-styled" "2.65.0"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.77.1.tgz#1b173e5a7a3eba316656123fbc7d0937bc586ceb"
-  integrity sha512-imELR02pufgGFkZURfTd9oBUtZPYhHvXv9WsYoRvEoBM9U7yzxrR6Fb/Lc3TH+WHVJ2oZHH2S0APS5t1MceEOw==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.78.0.tgz#25db969d363b649052c809fc9a7f1a721a51c915"
+  integrity sha512-81DUulQUnjjuWeAw73gOay+BHLEHchCcvGhyWZVL1s/CYi73AoivmraWc5GrCWdZzT8nMxSAJ85hesXnwGVHgg==
   dependencies:
-    "@douyinfe/semi-animation" "2.77.1"
-    "@douyinfe/semi-animation-styled" "2.77.1"
+    "@douyinfe/semi-animation" "2.78.0"
+    "@douyinfe/semi-animation-styled" "2.78.0"
     classnames "^2.2.6"
 
 "@douyinfe/[email protected]":
@@ -1606,10 +1606,10 @@
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.65.0.tgz#8c56047a5704a45b05cc9809a2a126cc24526ea1"
   integrity sha512-YFF8Ptcz/jwS0phm28XZV7ROqMQ233sjVR0Uy33FImCITr6EAPe5wcCeEmzVZoYS7x3tUFR30SF+0hSO01rQUg==
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.77.1.tgz#7b695342676c46a0b5715815d6dd2affc7c88334"
-  integrity sha512-FBRroqVJroel1CXmBgV58ulZHG2xUVInJF7k0FAag54noKKaToEobSxRjiTJ6JHne3ZDU1M6sBqpbzYJElFnPQ==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.78.0.tgz#e3d9fd66625bd3d46105fc72fe6e0c2ca47775dc"
+  integrity sha512-NYMuI4SOl4+fV4/S8qJfL8ip1EkjO+G6rtlWTmtvc77ENHoBsf6C+qLxupi5e+IKGBy/Vfr52hPDOsOC8FWokQ==
 
 "@douyinfe/[email protected]":
   version "2.65.0"
@@ -1618,10 +1618,10 @@
   dependencies:
     bezier-easing "^2.1.0"
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.77.1.tgz#55e3fde74b806c864e2045cd7cffabbd7bc09bb0"
-  integrity sha512-Q1D7whvQe0D+mPov8hXeH/e1uR/iBhpGGcW1LCTL2pSVMEZEYGJLf2KeXTTiCIgRVWm0PRH3Sux7auJ64zg7vw==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.78.0.tgz#a76be1ff65486d5146e78fdafffd5a6ab1b818e6"
+  integrity sha512-M54Typ1mHU4BIT/em/WlpmKM0V1yk2EFoVy9qtTr0+vkIgTfE+w53A7/NX2cyWq97FHCD9k4jQGGK31Z1YqMQg==
   dependencies:
     bezier-easing "^2.1.0"
 
@@ -1644,13 +1644,13 @@
     remark-gfm "^4.0.0"
     scroll-into-view-if-needed "^2.2.24"
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.77.1.tgz#a19888ecc14ff50ccd86e7841a92c75539d2282a"
-  integrity sha512-DAXRy8ryLNzbKAiTAv+RrivGCoMU0asv2cO7PNV5aBq0ICB8XXn97FHyZo6Wb5NpqpyMhOaOr8Ro1bfpd0FeaA==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.78.0.tgz#d1949b552ff75bfe66a88519fdfbf97dfd71216f"
+  integrity sha512-LVBcVUDM74FMmzx/L6b/Vk/W9b4MnQCb1+1t7Q2BU3v5DC4dfhgRpbloxj3JmAyOgAcxJz2VDE07Sgzt9mS6ww==
   dependencies:
-    "@douyinfe/semi-animation" "2.77.1"
-    "@douyinfe/semi-json-viewer-core" "2.77.1"
+    "@douyinfe/semi-animation" "2.78.0"
+    "@douyinfe/semi-json-viewer-core" "2.78.0"
     "@mdx-js/mdx" "^3.0.1"
     async-validator "^3.5.0"
     classnames "^2.2.6"
@@ -1671,10 +1671,10 @@
   dependencies:
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]7.1", "@douyinfe/semi-icons@^2.0.0":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.77.1.tgz#bbef83c860b7551a65dd969ae60e2d3832cef858"
-  integrity sha512-IbGqYzbjzCoSd+//HlO/Gn1c3XmbulQwGys+JgDfQhYIbPeGyhQfLk56Q7ku3vJGC8BGy7dUmR9MbeTf1UQGtw==
+"@douyinfe/[email protected]8.0", "@douyinfe/semi-icons@^2.0.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.78.0.tgz#aa0f852939f9eef071d17d2c3894dabf2e4b87d4"
+  integrity sha512-8Sugn7lgAqgHThX3EJT9npyQ2tXFIEZoV6KkYMNFdewOlZ23O1VYEHwh4ktdNVsgtw5CTQ5+UQrsuM3mqszAVw==
   dependencies:
     classnames "^2.2.6"
 
@@ -1683,15 +1683,15 @@
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.65.0.tgz#9916c540c91222a1d9f48cd34a941d28b8a05d2f"
   integrity sha512-1IhOztyBYiSu8WrcvN+oWWtcJTC9+x6zbnYtufx4ToISs5UO1te1PQofABpkDzIJYFtW9yYLxg4uoL4wGjqYMA==
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.77.1.tgz#4bf2a8b2c56a00567376b3418a728daf18c48969"
-  integrity sha512-FlESLOPaY0SadiSIFcP4gqJUk+CYkd4rHK6YP9bfjmU26v7h1S02H7pGLLV1lS0WnY4j0ad4zqRV9tbXFvba9g==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.78.0.tgz#af2a6188d36b156bb716005a4ee01419eadf4b06"
+  integrity sha512-690Llbnqsf1OZYuFvHhFWLpJkj6Gk5fjnWjJzUUcgfS5Apn/FBRHH2tkGyn4eU2iBihta1zzC6/G7Orp7qID5A==
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-json-viewer-core/-/semi-json-viewer-core-2.77.1.tgz#68cc406c8c00ef1a0894d50175da017ecc67debe"
-  integrity sha512-LOW+7ga2OzFIL9pGKftwHfl1kKLTV3x6Cs857iyvq9GIF/GHbAboiHcKUy2OZIHfy66zvP+Focs+yhfZG7IcZw==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-json-viewer-core/-/semi-json-viewer-core-2.78.0.tgz#046b07c4f51db386478175f661484f5f147fb8b5"
+  integrity sha512-htbOfZp079wxoKaZkGwxd7pFfxU+tfzihGMmTy3b3Dneut3cPQmRVkyCSbJjuYwOkNEyHQ7Cva6KFbNhfeKxqw==
   dependencies:
     jsonc-parser "^3.3.1"
 
@@ -1766,25 +1766,25 @@
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.61.0.tgz#a7e9bf9534721c12af1d0eeb5d5a2de615896a23"
   integrity sha512-obn/DOw4vZyKFAlWvZxHTpBLAK9FO9kygTSm2GROgvi+UDB2PPU6l20cuUCsdGUNWJRSqYlTTVZ1tNYIyFZ5Sg==
 
-"@douyinfe/[email protected]7.1":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.77.1.tgz#034034fc3122eb8000da9ccbdaa5b8d5a671eafc"
-  integrity sha512-Rug75C7jjSqmCP2L2tBI0K4dnXuo4GardzwSzdSjxDkiaIXwOwR5KE0K1FRbKWkQ7xmxbyRu4S6Pff+CDEJ/lA==
+"@douyinfe/[email protected]8.0":
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.78.0.tgz#009d711196b5a15134afbffc14c088368db1e058"
+  integrity sha512-LtF6G+cmGNNjDE08K5VCG2n2cOi/hPIBTCfvwwXot8druEw94RGQ16rnAKNDMhASWJbiAzaVWKGhDQLDCwfZvg==
 
 "@douyinfe/semi-ui@^2.0.0":
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.77.1.tgz#cf1c0fd35c449b2c8982dec872510e3349d1ca90"
-  integrity sha512-eIy7kr9OleCwlNRby3VICSGScHM23Zt2u7TJpID68qN3WrfQowGaB4wQ/0k5bvpLzv463HQnVWFk5aak+v46yw==
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.78.0.tgz#5a8fdcac557932e3e24c3c495ef81f98638baadc"
+  integrity sha512-S8AvtfwLwb147mRzX83WmnW4op5YXoD0RSdnDzWrWDNNQyszV7VkV6+f2VIg27e4rReexYkMG1SzJLdzgoZKGQ==
   dependencies:
     "@dnd-kit/core" "^6.0.8"
     "@dnd-kit/sortable" "^7.0.2"
     "@dnd-kit/utilities" "^3.2.1"
-    "@douyinfe/semi-animation" "2.77.1"
-    "@douyinfe/semi-animation-react" "2.77.1"
-    "@douyinfe/semi-foundation" "2.77.1"
-    "@douyinfe/semi-icons" "2.77.1"
-    "@douyinfe/semi-illustrations" "2.77.1"
-    "@douyinfe/semi-theme-default" "2.77.1"
+    "@douyinfe/semi-animation" "2.78.0"
+    "@douyinfe/semi-animation-react" "2.78.0"
+    "@douyinfe/semi-foundation" "2.78.0"
+    "@douyinfe/semi-icons" "2.78.0"
+    "@douyinfe/semi-illustrations" "2.78.0"
+    "@douyinfe/semi-theme-default" "2.78.0"
     async-validator "^3.5.0"
     classnames "^2.2.6"
     copy-text-to-clipboard "^2.1.1"
@@ -12236,9 +12236,9 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     string.prototype.repeat "^1.0.0"
 
 eslint-plugin-semi-design@^2.33.0:
-  version "2.77.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.77.1.tgz#346071b04b2845a9d47d6ae170dacbcea255120f"
-  integrity sha512-vXEgs9cnSKbBL0+OezPSE5/uic1HPyOxe71txBCXwNOl2OCGmd+BtcDWuRrswfJ9UaX7okYHukY1qpyUin+cmQ==
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.78.0.tgz#066c79b8e2e0bbb0cc7d8ed2ac8811dd601bd289"
+  integrity sha512-1+ZltNfA/zx1ipMaqa+gr/yTArpx2aeaXb4UXz6omUzlmgFDERbIUZ1P1n6+bbOCu8tAJ4CaD3gnwlDFBcamGQ==
 
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
@@ -25495,7 +25495,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -25513,15 +25513,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -25665,7 +25656,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -25693,13 +25684,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -28318,7 +28302,7 @@ worker-loader@^3.0.8:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -28353,15 +28337,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"