Merge branch 'main' into release

content/input/datepicker/index.md

@@ -859,9 +859,6 @@ function Demo() {
 | presets | 日期时间快捷方式, start 和 end 在 v2.52 版本支持函数类型                                                                                            |  <ApiType detail='type PresetType = { start?: BaseValueType \| (() => BaseValueType); end?: BaseValueType \| (() => BaseValueType); text?: string }; type PresetsType = Array<PresetType \| (() => PresetType)>;'>Array</ApiType> | [] |  |
 | preventScroll | 指示浏览器是否应滚动文档以显示新聚焦的元素，作用于组件内的 focus 方法                                                               | boolean |  |  |
 | presetPosition | 日期时间快捷方式面板位置, 可选值'left', 'right', 'top', 'bottom'                                                    | string |  'bottom' | **2.18.0** |
-| rangeSeparator | 自定义范围类型输入框的日期分隔符                                                                                     | string | '~' |  |
-| renderDate | 自定义日期显示内容                                                                                            | (dayNumber, fullDate) => ReactNode | - |  |
-| renderFullDate | 自定义显示日期格子内容                                                                                          | (dayNumber, fullDate, dayStatus) => ReactNode | - |  |
 | rangeSeparator | 自定义范围类型输入框的日期分隔符                                                                                     | string | '~' | |
 | renderDate | 自定义日期显示内容                                                                                            | (dayNumber, fullDate) => ReactNode | - |  |
 | renderFullDate | 自定义显示日期格子内容                                                                                          | (dayNumber, fullDate, dayStatus) => ReactNode | - |  |

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

@@ -1959,7 +1959,7 @@ import { Tree } from '@douyinfe/semi-ui';
                 role="treeitem"
                 onClick={isLeaf ? onClick : onExpand}
             >
-                {isLeaf ? null : expandIcon}
+                {expandIcon}
                 <span>{label}</span>
             </li>
         );

content/navigation/tree/index.md

@@ -1982,7 +1982,7 @@ import { Tree } from '@douyinfe/semi-ui';
                 role="treeitem"
                 onClick={isLeaf ? onClick : onExpand}
             >
-                {isLeaf ? null : expandIcon}
+                {expandIcon}
                 <span>{label}</span>
             </li>
         );

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

@@ -24,6 +24,9 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 You can specify keywords to be highlighted with `searchWords` and source text with `sourceString`
 
+<Notice title='Attension'>
+The Highlight component will split the text into multiple independent inline elements. Any CSS layout that splits the text flow (such as flex layout) may break the highlighted text. To prevent the highlighted content from being split into different rows or columns by the browser, please wrap the Highlight component with a wrapper element as needed.
+</Notice>
 
 ```jsx live=true dir="column"
 import React from 'react';

content/show/highlight/index.md

@@ -23,6 +23,11 @@ import { Highlight } from '@douyinfe/semi-ui';
 
 你可以通过 `searchWords` 指定需要高亮的关键字，通过 `sourceString` 指定源文本
 
+<Notice title='注意事项'>
+Highlight 组件会将文本被拆分成多个独立的行内元素，任何分割文本流的 CSS 布局（如 flex 布局）可能会将高亮文本断开，为避免高亮内容被浏览器拆分到不同行或列，请按需使用元素包裹 Highlight 组件。
+</Notice>
+
+
 
 ```jsx live=true dir="column"
 import React from 'react';

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

@@ -544,6 +544,7 @@ Please refer to [Use with Tooltip/Popconfirm](/en-US/show/tooltip#%E6%90%AD%E9%8
 | --- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| --- | --- | --- |
 | autoAdjustOverflow | Whether to automatically adjust the expansion direction of the floating layer for automatic adjustment of the expansion direction during edge occlusion                                                                                       | boolean | true |
 | arrowPointAtCenter | Whether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same time                                                                                                                     | boolean | true | **0.34.0** |
+| className | Pop-up layer classname                                                                                                                                                                                                      | string |  |  |
 | closeOnEsc | Whether to close the panel by pressing the Esc key in the trigger or popup layer. It does not take effect when visible is under controlled                                                                                                    | boolean | true | **2.8.0** |
 | content | Content displayed                                                                                                                                                                                                                             | string \| ReactNode |  |
 | clickToHide | Whether to automatically close the elastic layer when clicking on the floating layer and any element inside                                                                                                                                   | boolean | false | **0.24.0** |
@@ -562,6 +563,7 @@ Please refer to [Use with Tooltip/Popconfirm](/en-US/show/tooltip#%E6%90%AD%E9%8
 | showArrow | Display little arrow or not                                                                                                                                                                                                                   | boolean |  |
 | trigger | Trigger mode, optional value: `hover`, `focus`, `click`, `custom`                                                                                                                                                                             | string | 'hover' |
 | stopPropagation | Whether to prevent click events on the bomb layer from bubbling                                                                                                                                                                               | boolean | false | **0.34.0** |
+| style | Pop-up layer inline style                                                                                                                                                                                                   | object |  |  |
 | zIndex | Floating layer z-index value                                                                                                                                                                                                                  | number | 1030 |
 | onClickOutSide  | Callback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)                                                                              | (e:event) => void | | **2.1.0** |
 | onEscKeyDown | Called when Esc key is pressed in trigger or popup layer                                                                                                                                                                                      | function(e:event) | | **2.8.0** |

content/show/popover/index.md

@@ -530,6 +530,7 @@ import { Button, Input, Popover, Space } from '@douyinfe/semi-ui';
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------- |------------|
 | autoAdjustOverflow | 是否自动调整弹出层展开方向，用于边缘遮挡时自动调整展开方向                                                                                  | boolean                    | true                                        |            |
 | arrowPointAtCenter | “小三角”是否指向元素中心，需要同时传入"showArrow=true"                                                                                      | boolean                    | true                                        | **0.34.0** |
+| className | 弹出层的样式名                                                                                                                                              | string |  |  |
 | closeOnEsc         | 在 trigger 或 弹出层按 Esc 键是否关闭面板，受控时不生效 | boolean | true | **2.8.0**  |
 | content            | 显示的内容（函数类型，2.8.0 版本支持）                                                                                                                                  | ReactNode \| ({ initialFocusRef }) => ReactNode          |            |            |
 | clickToHide        | 点击弹出层及内部任一元素时是否自动关闭弹层                                                                                                  | boolean                    | false                                       | **0.24.0** |
@@ -546,6 +547,7 @@ import { Button, Input, Popover, Space } from '@douyinfe/semi-ui';
 | spacing            | 弹出层与 children 元素的距离，单位 px（object类型自 v2.45后支持）                                                                                                       | number｜ <ApiType detail='{ x: number; y: number }'>SpacingObject</ApiType>                       | 4(showArrow=false 时) 10(showArrow=true 时) |            |
 | showArrow          | 是否显示“小三角”                                                                                                                            | boolean                    |                                             |            |
 | stopPropagation    | 是否阻止弹出层上的点击事件冒泡                                                                                                              | boolean                    | false                                       | **0.34.0** |
+| style    | 弹出层的内联样式                                                                                                                                             | object |  |  |
 | trigger            | 触发方式，可选值：`hover`, `focus`, `click`, `custom`, `contextMenu`（v2.42支持）                                                          | string                     | 'hover'                                     |            |
 | visible            | 是否显示，配合trigger='custom'可实现完全受控                                                                                                                                    | boolean                    |                                             |            |
 | zIndex             | 弹出层 z-index 值                                                                                                                             | number                     | 1030                                        |            |

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

@@ -34,6 +34,15 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 - 【Style】
     - Dropdown, Modal, SideSheet, Popover, Tooltip add backdrop-filter to set related tokens [#2981](https://github.com/DouyinFE/semi-design/issues/2981)
 
+#### 🎉 2.87.1 (2025-10-16)
+- 【Fix】
+    - Fixed an issue in Chrome V140 and 141 where an error would occur when expanding Tree/TreeSelect after collapsing it [#3005](https://github.com/DouyinFE/semi-design/issues/3005)
+    - Fixed the issue where the Collapsible animation did not work in some Chrome versions 140 and 141. [#3006](https://github.com/DouyinFE/semi-design/pull/3006)
+
+#### 🎉 2.87.0 (2025-10-15)
+- 【Style】
+    - Dropdown, Modal, SideSheet, Popover, Tooltip add backdrop-filter to set related tokens [#2981](https://github.com/DouyinFE/semi-design/issues/2981)
+
 #### 🎉 2.87.0-beta.0 (2025-09-08)
 - 【Fix】
     - JsonViewer keyboard events are compatible with window [@anjiazhuyouxing](https://github.com/anjiazhuyouxing)

content/start/changelog/index.md

@@ -23,6 +23,8 @@ Semi 版本号遵循 **Semver** 规范（主版本号 - 次版本号 - 修订版
     - 新增 AI Token，AI ICON [#2997](https://github.com/DouyinFE/semi-design/pull/2997)
     - Tag/Button 新增加 colorful API [#2997](https://github.com/DouyinFE/semi-design/pull/2997)
 
+=======
+
 #### 🎉 2.87.1 (2025-10-16)
 - 【Fix】
     - 修复部分 chrome V140，141版本中，Tree/TreeSelect 在收起后，再次展开出现错误问题 [#3005](https://github.com/DouyinFE/semi-design/issues/3005)

lerna.json

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

packages/semi-animation-react/package.json

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

packages/semi-animation-styled/package.json

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

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-animation",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "description": "animation base library for semi-ui",
     "keywords": [
         "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-semi-design",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "description": "semi ui eslint plugin",
     "keywords": [
         "semi",

packages/semi-foundation/dropdown/dropdown.scss

@@ -13,6 +13,7 @@ $module: #{$prefix}-dropdown;
         z-index: $z-dropdown;
         border-radius: $radius-dropdown;
         background: $color-dropdown-bg-default;
+        backdrop-filter: $filter-dropdown-bg;
         opacity: 0;
         // min-width: 150px;
         &-show {

packages/semi-foundation/dropdown/variables.scss

@@ -36,4 +36,6 @@ $size-dropdown-icon-width: 12px; // 菜单项图标宽度
 $size-dropdown-icon-height: 12px; // 菜单项图标高度
 $height-dropdown_seperator: 1px; // 菜单项分隔线宽度
 
-$font-dropdown_item_active-fontWeight: 600; // 选中菜单项字重
+$font-dropdown_item_active-fontWeight: 600; // 选中菜单项字重
+
+$filter-dropdown-bg: none;

packages/semi-foundation/modal/modal.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-modal;
         left: $spacing-modal_mask-left;
         bottom: $spacing-modal_mask-bottom;
         background-color: $color-modal_mask-bg;
+        backdrop-filter: $filter-modal_mask-bg;
         height: 100%;
         // filter: alpha(opacity=50);
         z-index: $z-modal-mask;
@@ -65,6 +66,7 @@ $module: #{$prefix}-modal;
         box-sizing: border-box;
         flex-direction: column;
         background-color: $color-modal-bg;
+        backdrop-filter: $filter-modal_content-bg;
         border: $width-modal_content-border solid $color-modal_content-border;
         border-radius: $radius-modal_content;
         padding: $spacing-modal_content-paddingY $spacing-modal_content-paddingX;

packages/semi-foundation/modal/variables.scss

@@ -72,4 +72,6 @@ $width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
 
 
 //shadow
-$shadow-modal_content: var(--semi-shadow-elevated);
+$shadow-modal_content: var(--semi-shadow-elevated);
+$filter-modal_mask-bg: none;
+$filter-modal_content-bg: none;

packages/semi-foundation/package.json

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

packages/semi-foundation/popover/popover.scss

@@ -39,6 +39,7 @@ $module-icon: #{$module}-icon-arrow;
         position: relative;
         // position: absolute;
         background-color: $color-popover-bg-default;
+        backdrop-filter: $filter-popover-bg;
         // background-color: transparent;
 
         @include shadow-elevated;

packages/semi-foundation/popover/variables.scss

@@ -26,3 +26,5 @@ $spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-toolti
 
 // Radius
 $radius-popover: var(--semi-border-radius-medium); // 气泡卡片的圆角大小
+
+$filter-popover-bg: none;

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -86,6 +86,7 @@ $module: #{$prefix}-sidesheet;
         z-index: 1;
         overflow: auto;
         background-color: $color-sideSheet-bg;
+        backdrop-filter: $filter-sideSheet-bg;
         // background-clip: padding-box;
         border: 0;
     }
@@ -146,6 +147,7 @@ $module: #{$prefix}-sidesheet;
         width: 100%;
         height: 100%;
         background-color: $color-sideSheet_mask-bg;
+        backdrop-filter: $filter-sideSheet_mask-bg;
         opacity: 1;
         &-hidden {
             opacity: 0;

packages/semi-foundation/sideSheet/variables.scss

@@ -21,3 +21,6 @@ $width-sideSheet_size-large: 920px; // 大尺寸侧边栏宽度
 // Font
 $font-sideSheet_title-fontWeight: $font-weight-bold; // 侧边栏标题文本字重
 $font-sideSheet_title-fontSize: $font-size-header-5; // 侧边栏标题文本字号
+
+$filter-sideSheet_mask-bg: none;
+$filter-sideSheet-bg: none;

packages/semi-foundation/tooltip/tooltip.scss

@@ -55,6 +55,7 @@ $module-icon: #{$module}-icon-arrow;
     &-wrapper {
         position: relative;
         background-color: $color-tooltip-bg-default;
+        backdrop-filter: $filter-tooltip-bg;
         color: $color-tooltip-text-default;
         // z-index: $z-tooltip; // TODO z-index定义需要收敛
         border-radius: $radius-tooltip;

packages/semi-foundation/tooltip/variables.scss

@@ -30,3 +30,5 @@ $spacing-tooltip_arrow_offset-y: 1px; // 垂直方向渲染会有缝隙，所以
 $spacing-tooltip_arrow_adjusted_offset-y: 5px; // 垂直方向上的校正偏移量，主要修正三角形有棱角的问题
 
 $spacing-tooltip_arrow_adjusted_offset-x: round($horizontal-rate * $width-tooltip_arrow); // 水平方向上的校正偏移量，主要修正三角形有棱角的问题 ignore-semi-css-trans
+
+$filter-tooltip-bg: none;

packages/semi-icons-lab/package.json

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

packages/semi-icons/package.json

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

packages/semi-illustrations/package.json

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

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

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

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "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.87.0-beta.0"
+        "@douyinfe/semi-webpack-plugin": "2.87.1"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-rspack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "description": "",
     "homepage": "",
     "license": "MIT",

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-scss-compile",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "description": "compile semi scss to css",
     "author": "[email protected]",
     "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/collapsible/index.tsx

@@ -32,7 +32,8 @@ interface CollapsibleState extends CollapsibleFoundationState {
     domInRenderTree: boolean;
     domHeight: number;
     visible: boolean;
-    isTransitioning: boolean
+    isTransitioning: boolean;
+    cacheIsOpen: boolean
 }
 
 class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
@@ -58,7 +59,8 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
             domInRenderTree: false,
             domHeight: 0,
             visible: this.props.isOpen,
-            isTransitioning: false
+            isTransitioning: false,
+            cacheIsOpen: this.props.isOpen,
         };
         this.foundation = new CollapsibleFoundation(this.adapter);
     }
@@ -122,8 +124,23 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
         }
     }
 
+    static getDerivedStateFromProps(props: CollapsibleProps, prevState: CollapsibleState) {
+        const newState: Partial<CollapsibleState> = {};
+        const isOpenChanged = props.isOpen !== prevState.cacheIsOpen;
+        if (isOpenChanged) {
+            if (props.isOpen || !props.motion) {
+                newState.visible = props.isOpen;
+            }
+        }
+        if (props.motion && isOpenChanged) {
+            newState.isTransitioning = true;
+        }
+        newState.cacheIsOpen = props.isOpen;
+        return newState;
+    }
+
     componentDidUpdate(prevProps: Readonly<CollapsibleProps>, prevState: Readonly<CollapsibleState>, snapshot?: any) {
-        const changedPropKeys = Object.keys(pick(this.props, ['reCalcKey', "isOpen"])).filter(key => !isEqual(this.props[key], prevProps[key]));
+        const changedPropKeys = Object.keys(pick(this.props, ['reCalcKey'])).filter(key => !isEqual(this.props[key], prevProps[key]));
         const changedStateKeys = Object.keys(pick(this.state, ['domInRenderTree'])).filter(key => !isEqual(this.state[key], prevState[key]));
         if (changedPropKeys.includes("reCalcKey")) {
             this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
@@ -131,15 +148,6 @@ class Collapsible extends BaseComponent<CollapsibleProps, CollapsibleState> {
         if (changedStateKeys.includes("domInRenderTree") && this.state.domInRenderTree) {
             this.foundation.updateDOMHeight(this.domRef.current.scrollHeight);
         }
-        if (changedPropKeys.includes("isOpen")) {
-            if (this.props.isOpen || !this.props.motion) {
-                this.foundation.updateVisible(this.props.isOpen);
-            }
-        }
-
-        if (this.props.motion && (prevProps.isOpen !== this.props.isOpen)) {
-            this.foundation.updateIsTransitioning(true);
-        }
 
     }
 

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.87.0-beta.0",
+    "version": "2.87.1",
     "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.87.0-beta.0",
-        "@douyinfe/semi-animation-react": "2.87.0-beta.0",
-        "@douyinfe/semi-foundation": "2.87.0-beta.0",
-        "@douyinfe/semi-icons": "2.87.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.87.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.87.0-beta.0",
+        "@douyinfe/semi-animation": "2.87.1",
+        "@douyinfe/semi-animation-react": "2.87.1",
+        "@douyinfe/semi-foundation": "2.87.1",
+        "@douyinfe/semi-icons": "2.87.1",
+        "@douyinfe/semi-illustrations": "2.87.1",
+        "@douyinfe/semi-theme-default": "2.87.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",

packages/semi-webpack/package.json

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