Merge branch 'main' into feat/cropper

DouyinFE · Dec 24, 2024 · d31ff9f · d31ff9f
2 parents 3de412f + 26f8600
commit d31ff9f
Show file tree

Hide file tree

Showing 55 changed files with 719 additions and 455 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -149,6 +149,17 @@ Semi UI 支持所有主流浏览器。
 
 感谢 [Cypress](https://www.cypress.io/) 提供 E2E 测试。
 
+<div>
+  <a href="https://github.com/VisActor#gh-light-mode-only" target="_blank">
+    <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/logo_500_200_light.svg"/>
+  </a>
+  <a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank">
+    <img alt="VisActor Logo" height="60" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/logo_500_200_dark.svg"/>
+  </a>
+</div>
+
+感谢 [VisActor](https://www.visactor.com/) 提供数据可视化解决方案。
+
 ## 👐 参与共建
 Semi Design 欢迎社区开发者参与共建，衷心感谢每一位协作者的付出
 

diff --git a/README.md b/README.md
@@ -162,6 +162,19 @@ Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testi
 
 Thanks to [Cypress](https://www.cypress.io/) for providing E2E testing.
 
+
+<div>
+  <a href="https://www.visactor.com#gh-light-mode-only" target="_blank">
+    <img alt="VisActor Logo" height="30" src="https://lf-dp.bytetos.com/obj/dp-open-internet-cn/visactor-site/bytedance/client/img/visactor/navigator-logo.svg"/>
+  </a>
+  <a href="https://www.visactor.com#gh-dark-mode-only" target="_blank">
+    <img alt="VisActor Logo" height="30" src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/visactor/logo_500_200_dark.svg"/>
+  </a>
+</div>
+
+Thanks to [VisActor](https://www.visactor.com/) for providing the data visualization solution.
+
+
 ## 👐 Contributing
 Thanks to all the people who already contributed!
 

diff --git a/content/input/select/index-en-US.md b/content/input/select/index-en-US.md
@@ -1246,19 +1246,21 @@ import { Select, TagInput } from '@douyinfe/semi-ui';
 
     const triggerRender = ({ value, onSearch, onClear }) => {
         return (
-            <TagInput
-                draggable
-                allowDuplicates={false}
-                value={value.map(item => item.label)}
-                inputValue={inputVal}
-                onInputChange={(word) => {
-                    onSearch(word);
-                    setInputVal(word);
-                }}
-                onChange={handleSort}
-                onClear={() => onClear()}
-                showClear
-            />
+            <div onKeyDown={e=>e.stopPropagation()}>
+                <TagInput
+                    draggable
+                    allowDuplicates={false}
+                    value={value.map(item => item.label)}
+                    inputValue={inputVal}
+                    onInputChange={(word) => {
+                        onSearch(word);
+                        setInputVal(word);
+                    }}
+                    onChange={handleSort}
+                    onClear={() => onClear()}
+                    showClear
+                />
+            </div>
         );
     }; 
 

diff --git a/content/input/select/index.md b/content/input/select/index.md
@@ -1300,19 +1300,21 @@ import { Select, TagInput } from '@douyinfe/semi-ui';
 
     const triggerRender = ({ value, onSearch, onClear }) => {
         return (
-            <TagInput
-                draggable
-                allowDuplicates={false}
-                value={value.map(item => item.label)}
-                inputValue={inputVal}
-                onInputChange={(word) => {
-                    onSearch(word);
-                    setInputVal(word);
-                }}
-                onChange={handleSort}
-                onClear={() => onClear()}
-                showClear
-            />
+            <div onKeyDown={e=>e.stopPropagation()}>
+                <TagInput
+                    draggable
+                    allowDuplicates={false}
+                    value={value.map(item => item.label)}
+                    inputValue={inputVal}
+                    onInputChange={(word) => {
+                        onSearch(word);
+                        setInputVal(word);
+                    }}
+                    onChange={handleSort}
+                    onClear={() => onClear()}
+                    showClear
+                />
+            </div>
         );
     }; 
 

diff --git a/content/plus/markdownrender/index-en-US.md b/content/plus/markdownrender/index-en-US.md
@@ -22,6 +22,7 @@ Usually used in the following scenarios:
 - Front-end rendering when the server dynamically generates rich text content
 - A light interactive website that focuses on content display
 
+**Note: Safari versions prior to 16.3 do not support regular lookaround assertions, which will cause upstream dependencies on mdxjs to [report errors](https://github.com/syntax-tree/mdast-util-gfm-autolink-literal/issues/10). You can pass remarkGfm as false to disable gfm syntax parsing (which will cause markdown features such as tables to fail to parse), and use null-loader or alias or other methods to ignore the remark-gfm package when compiling the project. **
 
 ## Demos
 

diff --git a/content/plus/markdownrender/index.md b/content/plus/markdownrender/index.md
@@ -23,6 +23,8 @@ Semi 提供的 MarkdownRender 组件支持渲染 Markdown 和 MDX，无需特别
 - 偏内容展示的轻交互网站
 
 
+**注意：Safari 16.3 之前的版本不支持正则环视断言，会导致上游依赖 mdxjs [报错]( https://github.com/syntax-tree/mdast-util-gfm-autolink-literal/issues/10)，可以传入 remarkGfm 为 false 关闭 gfm 语法解析（会导致table 等markdown 特性无法解析），并且在项目编译时使用 null-loader 或 alias 其他方式忽略掉 remark-gfm 这个包。**
+
 ## 代码演示
 
 ### 如何引入

diff --git a/content/show/table/index-en-US.md b/content/show/table/index-en-US.md
@@ -5291,7 +5291,7 @@ render(App);
 | virtualized | Virtualization settings                                                                                                   | Virtualized | false | **0.33.0** |
 | virtualized.itemSize | Row height                                                                                                                | number\|(index: number) => number | 56 | **0.33.0** |
 | virtualized.onScroll | Virtualization scroll callback method                                                                                     | ( scrollDirection?: 'forward' \| 'backward', scrollOffset?: number, scrollUpdateWasRequested?: boolean ) => void |  | **0.33.0** |
-| onChange | Trigger when paging, sorting, filtering changes                                                                           | ({ pagination: TablePaginationProps, <br/>filters: Array<\*>, sorter: object, extra: any }) => void |  |
+| onChange | Trigger when paging, sorting, filtering changes. extra.changeType is supported in v2.72                                                                           | ({ pagination: TablePaginationProps, <br/>filters: Array<\*>, sorter: object, extra: { changeType: 'sorter' \| 'filter' \| 'pagination' } }) => void |  |
 | onExpand | Trigger when clicking on the row expansion icon                                                                           | (expanded: boolean, record: RecordType, DOMEvent: MouseEvent) => void |  | The third parameter DOMEvent requires version **>=0.28.0** |
 | onExpandedRowsChange | Triggers when unfolding row changes                                                                                       | (rows: RecordType[]) => void |  |
 | onGroupedRow | Similar to onRow, but this parameter is used to define the row attribute of the grouping header alone                     | (record: RecordType, index: number) => object |  | **0.29.0** |

diff --git a/content/show/table/index.md b/content/show/table/index.md
@@ -5414,7 +5414,7 @@ render(App);
 | virtualized | 虚拟化配置                                                               | Virtualized | false | **0.33.0** |
 | virtualized.itemSize | 每行的高度                                                               | number\|(index: number) => number | 56 | **0.33.0** |
 | virtualized.onScroll | 虚拟化滚动回调方法                                                           | ( scrollDirection?: 'forward' \| 'backward', scrollOffset?: number, scrollUpdateWasRequested?: boolean ) => void |  | **0.33.0** |
-| onChange | 分页、排序、筛选变化时触发                                                       | ({ pagination: TablePaginationProps, <br/>filters: Array<\*>, sorter: object, extra: any }) => void |  |
+| onChange | 分页、排序、筛选变化时触发。extra.changeType 自 v2.72 支持。                                                       | ({ pagination: TablePaginationProps, <br/>filters: Array<\*>, sorter: object, extra: { changeType: 'sorter' \| 'filter' \| 'pagination' } }) => void |  |
 | onExpand | 点击行展开图标时进行触发                                                        | (expanded: boolean, record: RecordType, DOMEvent: MouseEvent) => void |  | 第三个参数 DOMEvent 需版本 **>=0.28.0** |
 | onExpandedRowsChange | 展开的行变化时触发                                                           | (rows: RecordType[]) => void |  |
 | onGroupedRow | 类似于 onRow，不过这个参数单独用于定义分组表头的行属性                                      | (record: RecordType, index: number) => object |  | **0.29.0** |

diff --git a/content/start/changelog/index-en-US.md b/content/start/changelog/index-en-US.md
@@ -16,6 +16,36 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.72.0 (2024-12-20)
+- 【Fix】
+  - Fix the problem of JsonViewer using Chinese input method incorrectly [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - Fix The problem that the code prompt box cannot be hidden when clicked [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - Fixed the rendering problem caused by multiple carriage returns [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - Fixed the abnormal display of the scroll bar [#2623](https://github.com/DouyinFE/semi-design/pull/2623)
+
+#### 🎉 2.72.0-beta.0 (2024-12-16)
+- 【Feat】
+    - Table onChange add extra.changeType API to idetify the type of changing  [#1238](https://github.com/DouyinFE/semi-design/issues/1238)
+- 【Fix】
+    - fix render state value in Carousel children always get the init one
+
+#### 🎉 2.71.3 (2024-12-17)
+- 【Fix】
+    - Fixed the problem of incorrect onChange callback result in Tree component treeDataSimpleJson mode  [#2508 ](https://github.com/DouyinFE/semi-design/issues/2508)
+    - fixed the issue that the display of disabled subNavItem in vertical Navigation does not meet expectations when it is collapsed
+    - Set the max-width of the img node of the image preview to none to avoid enlargement display errors when using tailwind at the same time.[#2624](https://github.com/DouyinFE/semi-design/pull/2624)
+
+#### 🎉 2.71.2 (2024-12-13)
+- 【Fix】
+    - Remove redundant calculations to determine whether the properties have changed when the Collapsible component is updated. [#2631](https://github.com/DouyinFE/semi-design/pull/2631)
+    - Fixed the issue where in react18, regardless of whether animation is on or not, when the mouse is quickly moved over the tooltip trigger, the DOM would become transparent but not disappear, causing the page element to be unclickable [#2605](https://github.com/DouyinFE/semi-design/pull/2605)
+    - Fixed the problem that the dynamic mode change of the Chat component did not take effect [#2625](https://github.com/DouyinFE/semi-design/pull/2625)
+    - Set the max-width of the img node of the image preview to none to avoid enlargement display errors when using tailwind at the same time. [#2624](https://github.com/DouyinFE/semi-design/pull/2624)
+
+#### 🎉 2.71.1 (2024-12-11)
+- 【Feat】
+    - Button icon mode add $height-button_iconOnly_small $width-button_iconOnly_small $height-button_iconOnly_default $width-button_iconOnly_default $height-button_iconOnly_large $width-button_iconOnly_large token [#2618](https://github.com/DouyinFE/semi-design/pull/2618)
+
 #### 🎉 2.71.0 (2024-12-06)
 - 【Fix】
     - For invisible Tooltips, position calculation is not performed when resizing [#2606](https://github.com/DouyinFE/semi-design/pull/2606)

diff --git a/content/start/changelog/index.md b/content/start/changelog/index.md
@@ -13,6 +13,36 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+#### 🎉 2.72.0 (2024-12-20)
+- 【Fix】
+  - 修复 JsonViewer使用中文输入法错误的问题 [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - 修复 代码提示框点击无法隐藏的问题 [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - 修复多次回车导致的渲染问题 [#2616](https://github.com/DouyinFE/semi-design/pull/2616)
+  - 修复滚动条显示异常的问题 [#2623](https://github.com/DouyinFE/semi-design/pull/2623)
+
+#### 🎉 2.72.0-beta.0 (2024-12-16)
+- 【Feat】
+    - Table onChange 新增 extra.changeType API，用于表示 change 类型  [#1238](https://github.com/DouyinFE/semi-design/issues/1238) [#2617](https://github.com/DouyinFE/semi-design/pull/2617)
+- 【Fix】
+    - 修复 Carousel 在 children 中渲染 state 的值不更新问题 [#2634](https://github.com/DouyinFE/semi-design/pull/2634)
+
+#### 🎉 2.71.3 (2024-12-17)
+- 【Fix】
+  - 修复 Tree 组件 treeDataSimpleJson 模式下，onChange 回调结果错误问题  [#2508 ](https://github.com/DouyinFE/semi-design/issues/2508) [#2601](https://github.com/DouyinFE/semi-design/pull/2601)
+  - 修复竖向 Navigation 在收起状态下 disabled subNavItem 展示不符合预期问题 [#2637](https://github.com/DouyinFE/semi-design/pull/2637)
+  - 设置图片预览的 img 节点的 max-width 为none，避免同时使用 tailwind 时放大显示错误问题[#2624](https://github.com/DouyinFE/semi-design/pull/2624)_
+
+
+#### 🎉 2.71.2 (2024-12-13)
+- 【Fix】
+    - 去除 Collapsible 组件更新时多余的属性前后是否变化对比 [#2631](https://github.com/DouyinFE/semi-design/pull/2631)
+    - 修复在 React18 下无论是否动画开启，快速移动鼠标在 tooltip trigger 上时，概率性 dom 只透明但不消失，导致无法点击页面元素的问题 [#2605](https://github.com/DouyinFE/semi-design/pull/2605)
+    - 修复 Chat 组件 mode 动态变化未生效问题 [#2625](https://github.com/DouyinFE/semi-design/pull/2625)
+    - 设置图片预览的 img 节点的 max-width 为 none，避免同时使用 tailwind 时放大显示错误问题 [#2624](https://github.com/DouyinFE/semi-design/pull/2624)
+
+####  🎉 2.71.1 (2024-12-11)
+- 【Feat】
+    - 图标模式按钮新增 $height-button_iconOnly_small $width-button_iconOnly_small $height-button_iconOnly_default $width-button_iconOnly_default $height-button_iconOnly_large $width-button_iconOnly_large token [#2618](https://github.com/DouyinFE/semi-design/pull/2618)
 
 #### 🎉 2.71.0 (2024-12-06)
 - 【Fix】

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.71.0"
+    "version": "2.72.0"
 }
diff --git a/packages/semi-animation-react/package.json b/packages/semi-animation-react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-react",
-    "version": "2.71.0",
+    "version": "2.72.0",
     "description": "motion library for semi-ui-react",
     "keywords": [
         "motion",
@@ -25,8 +25,8 @@
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.71.0",
-        "@douyinfe/semi-animation-styled": "2.71.0",
+        "@douyinfe/semi-animation": "2.72.0",
+        "@douyinfe/semi-animation-styled": "2.72.0",
         "classnames": "^2.2.6"
     },
     "devDependencies": {

diff --git a/packages/semi-animation-styled/package.json b/packages/semi-animation-styled/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation-styled",
-    "version": "2.71.0",
+    "version": "2.72.0",
     "description": "semi styled animation",
     "keywords": [
         "semi",

diff --git a/packages/semi-animation/package.json b/packages/semi-animation/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.71.0",
+    "version": "2.72.0",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

diff --git a/packages/semi-eslint-plugin/package.json b/packages/semi-eslint-plugin/package.json
@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.71.0",
+    "version": "2.72.0",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

diff --git a/packages/semi-foundation/button/iconButton.scss b/packages/semi-foundation/button/iconButton.scss
@@ -35,6 +35,8 @@ $module: #{$prefix}-button;
         padding-right: $spacing-button_iconOnly_default-paddingRight;
         padding-top: $spacing-button_iconOnly_default-paddingTop;
         padding-bottom: $spacing-button_iconOnly_default-paddingRight;
+        height: $height-button_iconOnly_default;
+        width: $width-button_iconOnly_default;
         justify-content: center;
         align-items: center;
 
@@ -45,13 +47,17 @@ $module: #{$prefix}-button;
                 padding-right: $spacing-button_iconOnly_small-paddingRight;
                 padding-top: $spacing-button_iconOnly_small-paddingTop;
                 padding-bottom: $spacing-button_iconOnly_small-paddingBottom;
+                height: $height-button_iconOnly_small;
+                width: $width-button_iconOnly_small;
             }
 
             &-large {
                 padding-left: $spacing-button_iconOnly_large-paddingLeft;
                 padding-right: $spacing-button_iconOnly_large-paddingRight;
                 padding-top: $spacing-button_iconOnly_large-paddingTop;
                 padding-bottom: $spacing-button_iconOnly_large-paddingBottom;
+                height: $height-button_iconOnly_large;
+                width: $width-button_iconOnly_large;
             }
         }
     }

diff --git a/packages/semi-foundation/button/variables.scss b/packages/semi-foundation/button/variables.scss
@@ -154,6 +154,12 @@ $spacing-button_iconOnly_small-paddingLeft: $spacing-extra-tight; // 图标按
 $spacing-button_iconOnly_small-paddingRight: $spacing-extra-tight; // 图标按钮右侧内边距 - 小尺寸
 $spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮顶部内边距 - 小尺寸
 $spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
+$height-button_iconOnly_small: $height-control-small; // 图标按钮 height - 小尺寸
+$width-button_iconOnly_small: $height-control-small; // 图标按钮 width - 小尺寸
+$height-button_iconOnly_default:$height-control-default;  // 图标按钮 height - 默认
+$width-button_iconOnly_default: $height-control-default; // 图标按钮 width - 默认
+$height-button_iconOnly_large: $height-control-large; // 图标按钮 height - 大尺寸
+$width-button_iconOnly_large: $height-control-large; // 图标按钮 width - 大尺寸
 
 // margin
 $spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距

diff --git a/packages/semi-foundation/carousel/foundation.ts b/packages/semi-foundation/carousel/foundation.ts
@@ -7,7 +7,8 @@ export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any
     setNewActiveIndex: (activeIndex: number) => void;
     setPreActiveIndex: (activeIndex: number) => void;
     setIsReverse: (isReverse: boolean) => void;   
-    setIsInit: (isInit: boolean) => void   
+    setIsInit: (isInit: boolean) => void;
+    getChildren: () => any[]  
 }
 
 class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CarouselAdapter<P, S>, P, S> {
@@ -102,7 +103,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     getValidIndex(index: number): number {
-        const { children } = this.getStates();
+        const children = this._adapter.getChildren();
         return (index + children.length) % children.length;
     }
 
@@ -124,7 +125,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
 
     handleAutoPlay(): void { 
         const { autoPlay } = this.getProps(); 
-        const { children } = this.getStates();
+        const children = this._adapter.getChildren();
         const autoPlayType = typeof autoPlay;
         // when user manually call the play function, force play
         // only when carousel children length > 1 to start play

diff --git a/packages/semi-foundation/image/image.scss b/packages/semi-foundation/image/image.scss
@@ -204,6 +204,12 @@ $module: #{$prefix}-image;
             // transition: transform $transition_duration-image_preview_image_img  $transition_delay-image_preview_image_img;
             z-index: 0;
             user-select: none;
+            /**
+             * In tailwind, the max-width of img/video is set to 100%, 
+             * which will affect the amplification effect of the picture.
+             * So we need to set max-width to none.
+            */
+            max-width: none;
         }
 
         &-spin {