Merge branch 'release' into main

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

@@ -176,6 +176,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | accordion | Accordion mode | boolean | `false` | - |
 | activeKey | Controlled property, key of the currently expanded panel | string \| string[] | - | - |
 | className | className of Collapse | string | '' | - |
+| clickHeaderToExpand | Click Header to expand and collapse, otherwise only respond to click arrow | boolean | true | 2.32.0 |
 | collapseIcon | Custom collapsing icons | ReactNode | `<IconChevronDown />` | - |
 | defaultActiveKey | Key of the expanded panel when initialized | string \| string[] | - | - |
 | expandIcon | Custom expanding icon | ReactNode | `<IconChevronUp />` | - |

content/show/collapse/index.md

@@ -175,6 +175,7 @@ import { IconCopy } from '@douyinfe/semi-icons';
 | accordion | 手风琴模式 | boolean | `false` | - |
 | activeKey | 受控属性, 当前展开的面板的 key | string \| string[] | 无 | - |
 | className | 样式类名 | string | '' | - |
+| clickHeaderToExpand | 点击 Header 展开收起，否则只响应点击箭头 | boolean | true | 2.32.0 |
 | collapseIcon | 自定义折叠图标 | ReactNode | `<IconChevronDown />` | - |
 | defaultActiveKey | 初始化选中面板的 key | string \| string[] | 无 | - |
 | expandIcon | 自定义展开图标 | ReactNode | `<IconChevronUp />` | - |

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

@@ -16,6 +16,21 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.33.0 (2023-04-14)
+-【Fix】
+     - Fix the problem that the prefixCls configured by Webpack plugin does not take effect when using cjs lib [#1544](https://github.com/DouyinFE/semi-design/pull/1544)
+     - Fix the problem that the background content of the mask cannot be clicked when the Sidesheet is set to mask=false, and the impact range is 2.32.0-beta.0 ~ 2.33.0-beta.0 [#1543](https://github.com/DouyinFE/semi-design/issues/1543)
+     - Fix rangeStart and rangeEnd in DatePicker disabledDate callback using cached values [#777](https://github.com/DouyinFE/semi-design/issues/777)
+
+#### 🎉 2.33.0-beta.0 (2023-04-10)
+- 【Fix】
+    - Change the vertical-align of copy/copied icon in Typography from text-bottom to middle [#1533](https://github.com/DouyinFE/semi-design/pull/1533)
+    - Align hover and active states of form input components Input TextArea Select Cascader TimePicker DatePicker TreeSelect [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+    - Fix Typography copyable type [@baranwang](https://github.com/baranwang) [#1546](https://github.com/DouyinFE/semi-design/pull/1546)
+- 【Feat】
+    - Form input class components Input TextArea Select Cascader TimePicker DatePicker TreeSelect Added borderless api for displaying borderless components [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+    - Collapse Added clickHeaderToExpand for setting click response hotspots [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+
 #### 🎉 2.32.1 (2023-04-06)
 - 【Fix】
     - Fix the problem that an error may be reported when Tooltip is used in conjunction with the loading button in the production environment [#1540](https://github.com/DouyinFE/semi-design/pull/1540)

content/start/changelog/index.md

@@ -14,6 +14,20 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
 
+#### 🎉 2.33.0 (2023-04-14)
+- 【Fix】
+    - 修复使用 cjs 产物时，Webpack plugin 配置的 prefixCls 不生效的问题 [#1544](https://github.com/DouyinFE/semi-design/pull/1544)
+    - 修复 Sidesheet 在 mask=false 时，mask 背景内容无法点击的问题，影响范围 2.32.0-beta.0 ~ 2.33.0-beta.0 [#1543](https://github.com/DouyinFE/semi-design/issues/1543)
+    - 修复 DatePicker disabledDate 回调中的 rangeStart 和 rangeEnd 使用缓存值问题 [#777](https://github.com/DouyinFE/semi-design/issues/777)
+
+#### 🎉 2.33.0-beta.0 (2023-04-10)
+- 【Feat】
+    - 表单输入类组件 Input TextArea Select Cascader TimePicker DatePicker TreeSelect 新增 borderless api 用于显示无边框组件 [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+    - Collapse 新增 clickHeaderToExpand 用于设置点击响应热区 [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+- 【Fix】
+    - 将 Typography 中的 copy/copied icon 垂直对齐方式从 text-bottom 改为 middle [#1533](https://github.com/DouyinFE/semi-design/pull/1533)
+    - 对齐表单输入类组件 Input TextArea Select Cascader TimePicker DatePicker TreeSelect 的 hover 和 active 态 [#1537](https://github.com/DouyinFE/semi-design/pull/1537)
+    - 修复 Typography 的 copyable 类型错误 [@baranwang](https://github.com/baranwang) [#1546](https://github.com/DouyinFE/semi-design/pull/1546)
 
 #### 🎉 2.32.1 (2023-04-06)
 - 【Fix】

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

@@ -39,7 +39,7 @@ Property like `defaultValue`, `defaultXXX` will only be consumed once when the c
 Or force React to remount the component by passing in a different `key`.
 
 #### Does Semi support i18n?
-As of 2022-07, Semi supports 17 languages. See [Semi·LocaleProvider](/en-US/other/locale) for details.
+As of 2023-04, Semi supports 21 languages. See [Semi·LocaleProvider](/en-US/other/locale) for details.
 
 #### Who should I look for if there is a new component requirement, or an existing component Feature does not meet my business needs?
 

content/start/faq/index.md

@@ -47,7 +47,7 @@ Semi 组件中，所有的 defaultValue、defaultXXX 传参只会在组件被 mo
 
 #### Semi 支持 i18n 吗？
 
-Semi 目前支持 17 种语言，具体使用可以查阅 [Semi·LocaleProvider](/zh-CN/other/locale)
+Semi 目前支持 21 种语言，具体使用可以查阅 [Semi·LocaleProvider](/zh-CN/other/locale)
 
 #### Semi 的样式是基于 Scss 还是 Less ？为什么不用 CSS Module？
 

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

@@ -73,27 +73,31 @@ At the same time, with the expansion of business, developers in all regions of t
 
 ## Roadmap
 
-In the next year, the Semi Design team will continue to improve and optimize the quality, and open more internally implemented tool chains and resources to community users, including but not limited to:
+In the future, Semi Design team will continue to improve and optimize the quality, and open more internal tool chains and resources to community users, including but not limited to:
 
-### Material market
-
-In the past year, users of Bytedance's internal business line teams have independently designed and developed a wide variety of UI materials including forms, multimedia, user guidance, message notifications, charts, etc., around the basic components of Semi, and released them in the material market. Semi users can search for materials and reuse them based on product requirements, greatly saving development costs; at the same time, high-quality UI resources can also be accumulated and disseminated.  
-The material community will meet with you soon. At that time, we will open source the high-quality materials together, open the material release process to community users, and provide development guidelines.
-
-![Semi 物料市场（内部）](https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/SemiMaterial.gif)
 
 ### Design to Code
 
 For a long time, the Semi team has been trying to optimize daily work processes through various automated means, help team designers and R&D to improve efficiency, and even redefine traditional working methods. Among them, the "front-end page restoration" link has various inefficiencies such as time-consuming and high communication costs, which has always been the focus of our attention.  
-At present, we have implemented a simple translation of static page design drafts, and have been effectively verified in scenarios such as landing pages. In fact, the official website of https://semi.design is developed and restored with the help of this solution.  
-In the future, the Design to Code program will complete component-level identification and translation through code scanning. At the same time, combined with the page templates deposited by the team from a large number of business scenarios, users will be able to quickly complete the cloning and structural restoration of the front-end page at a very low cost.
+
+At present, we have implemented translation of static page design drafts, and have been effectively verified in scenarios such as landing pages, Form Page and Table page.In fact, homepage of our [official website](https://semi.design/en-US/) is developed with the help of this solution.  
+
+
+For the identification and translation of the component level in the design, we have implemented support through Code2Design + Design2Code. At present, we have covered 80% basic components. You can use [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81---%E7%A4%BE%E5%8C%BA%E7%89%88) for experience. Detailed tutorial can be found at https://semi.design/code/en-US/
+
+In the future, combined with D2C tools, we can convert the page design templates accumulated by the team from massive business scenarios into code templates at low cost, and users will be able to quickly complete the cloning and structure restoration of front-end pages at a very low cost.
 
 ![Semi Pro 页面模板 & 落地页转代码 (内部)](https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/semiPro.gif)
 
 ### A11y
 
-Semi always pays attention to Web accessibility. At present, we have achieved some accessibility support in terms of semantic labeling, color wheel algorithm contrast, text perception, etc., but we believe that there is still a lot of room for improvement. We will continue to pay attention to and improve the operability and perceptibility of components in the future, provide more convenient keyboard interaction for mouse-based operations, and provide more complete WAI-ARIA support.
+Semi attaches great importance to Web accessibility. Currently, we have implemented accessibility support for components in terms of semantic tags, theme color wheel algorithm contrast, and text perception.
+
+The Accessibility chapter in each component document gives a detailed description of WAI-ARIA support and best practice recommendations. At the same time, we also provide keyboard event support and focus accessibility support for frequently used components.
+
+However, since the improvement of barrier-free is a project with a large workload, we have not yet provided complete keyboard and focus barrier-free functions on all components. For more progress, please refer to [A11y Issue](https://github.com/DouyinFE/semi-design/issues/205)
 
+The Semi team will continue to pay attention to and improve the operability and perceptibility of components, and provide more convenient keyboard interaction and more complete barrier-free functions in addition to mouse-based operations in continuous iterations.
 ### Cross WebFramework
 
 High scalability, as Semi's core design principle, runs through Semi's code architecture design, API design, style layer abstraction and other aspects. Thanks to the Foundation/Adapter architecture design and the principle of layering style files, Semi is very easy to migrate to other front-end frameworks. In version 2.0, we rewrite Semi based on Typescript, hoping to still have a good development experience and quality assurance in the process of multi-frame migration and adaptation.  

content/start/introduction/index.md

@@ -38,7 +38,7 @@ Semi 是如何在连贯统一的基础上，做到灵活多变的？答案是强
 
 ![全面覆盖的设计变量用例、文档与编辑器](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/p3.gif)
 
-在今年内，我们还将实现主题**从线上到设计工具的实时同步** —— 在提升效率的同时，进一步保证设计和研发的持续对齐，降低产研间的沟通成本。
+DSM还支持 **从线上到设计工具的实时同步** —— Design Token可以同时在工程项目与Figma中进行消费，在提升效率的同时，进一步保证设计和研发的持续对齐，降低产研间的沟通成本。
 
 ### 深色模式
 
@@ -52,7 +52,7 @@ Semi 是如何在连贯统一的基础上，做到灵活多变的？答案是强
 
 ### 国际化 —— 多元兼容
 
-在字节跳动全球化业务实践下，Semi Design 经过 30+ 版本迭代，已具备完善的国际化特性 —— 覆盖简/繁体中文，英语、日语、韩语、葡萄牙语等 10+ 语言，日期时间组件提供全球时区支持，全部组件可自动适配阿拉伯文 RTL 布局。
+在字节跳动全球化业务实践下，Semi Design 经过 30+ 版本迭代，已具备完善的国际化特性 —— 覆盖简/繁体中文，英语、日语、韩语、葡萄牙语等 20+ 语言，日期时间组件提供全球时区支持，全部组件可自动适配阿拉伯文 RTL 布局。
 
 同时，随业务的拓展，也不断有海外地区的开发者开始使用 Semi 构建应用。为了更好地支持这部分用户的诉求，我们也对站点和文档进行了双语适配，以保证开发无障碍。
 
@@ -76,29 +76,28 @@ Adapter 是一个接口，具有 Foundation 实现 Semi Design 业务逻辑所
 
 ## 展望
 
-在未来一年内，Semi Design 团队会持续进行质量提升与优化，并将更多内部落地的工具链与资源，陆续开放给社区用户，包括不限于：
-
-### 物料社区
-
-过去一年来，字节内部各业务线团队的用户围绕 Semi 的基础组件，自主设计和开发了包含表单、多媒体、用户引导、消息通知、图表等种类繁多的 UI 物料，并发布在物料市场。Semi 的用户可基于产品需求，查找物料并复用，大幅节省开发成本；同时，优质的 UI 资源也得以形成积累和传播。
-
-物料社区很快会和大家见面。届时，我们会将高质量的物料一同开源，并对社区用户开放物料的发布流程，提供开发指南。
-
-![Semi 物料市场（内部）](https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/SemiMaterial.gif)
+在未来，Semi Design 团队会持续进行质量提升与优化，并将更多内部落地的工具链与资源，陆续开放给社区用户，包括不限于：
 
 ### Design to Code
 
 一直以来，Semi 团队都在尝试通过各类自动化手段，优化日常工作流程，帮助团队设计师和研发提效，甚至重新定义传统的工作方式。其中，「前端页面还原」这一环节存在耗时、沟通成本高等各种低效问题，一直是我们关注的重点。
 
-目前，我们已实现了简单的静态页面设计稿转译，并在落地页等场景下进行了有效验证 —— 事实上，https://semi.design 官网正是借助该方案进行开发与还原的。
+目前，我们已实现了设计稿转代码功能的建设，并在Landing Page、表单页、表格页等场景下进行了有效验证 —— 事实上，https://semi.design 官网正是借助该方案进行开发与还原的。  
 
-未来，Design to Code 方案将通过代码扫描，完成组件级别的识别与转译。同时，结合团队从海量业务场景中沉淀的页面模板，用户将能以极低的成本，快速完成前端页面的克隆和结构还原。
+对于设计中的组件级别的识别与转译，我们通过 Code2Design + Design2Code 的方式实现了支持，目前我们已经实现了 80%的基础组件覆盖，你可以通过 [Semi Figma Plugin](https://www.figma.com/community/plugin/1166339852662786534/Semi-Design-%E8%AE%BE%E8%AE%A1%E8%BD%AC%E4%BB%A3%E7%A0%81---%E7%A4%BE%E5%8C%BA%E7%89%88) 进行体验，详细使用教程可查阅 https://semi.design/code 
+
+
+后续结合 D2C 工具，我们能够将团队从海量业务场景中沉淀的页面设计模板，低成本转换为代码模板，用户将能以极低的成本，快速完成前端页面的克隆和结构还原。
 
 ![Semi Pro 页面模板 & 落地页转代码 (内部)](https://lf9-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/tech-doc/semiPro.gif)
 
 ### A11y
 
-Semi 始终关注 Web 可访问性，当前我们从语义化标签，色盘算法可对比度、文本感知性等方面实现了一部分的无障碍支持，但我们相信这仍有不少提升的空间。我们后续会持续关注并提升组件的可操作性、可感知性，为基于鼠标的操作提供更便捷的键盘交互，提供更完善的 WAI-ARIA 支持。
+Semi 重视 Web 可访问性，当前我们从语义化标签，主题色盘算法可对比度、文本感知性等方面实现了组件的无障碍支持。  
+
+各组件文档中的 Accessibility 章节对 WAI-ARIA 支持程度给出了详细的描述以及最佳实践建议，同时，我们对于高频使用的组件也提供了键盘事件支持以及焦点可访问性的无障碍支持。但由于无障碍的改进是一项工作量较大的工程，目前我们尚未在所有组件上提供完备键盘与焦点无障碍功能，更多的进展可查阅 [A11y Issue](https://github.com/DouyinFE/semi-design/issues/205)  
+
+Semi 团队后续仍会持续关注并提升组件的可操作性、可感知性，在持续迭代中，在基于鼠标的操作外提供更便捷的键盘交互以及更完善的无障碍功能。
 
 ### 多框架
 

lerna.json

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

packages/semi-animation-react/package.json

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

packages/semi-animation-styled/package.json

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

packages/semi-animation/package.json

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

packages/semi-foundation/cascader/cascader.scss

@@ -25,6 +25,17 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
+    &:focus {
+        border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        background-color: $color-cascader_default-bg-default;
+        outline: 0;
+    }
+
+
+    &:active {
+        background-color: $color-cascader_default-bg-active;
+    }
+
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
@@ -41,11 +52,13 @@ $module: #{$prefix}-cascader;
     &-focus {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         outline: 0;
-        &:hover,
-        &:active {
+        &:hover{
             background-color: $color-cascader_default-bg-default;
             border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         }
+        &:active {
+            background-color: $color-cascader_default-bg-active;
+        }
     }
 
     &-warning {
@@ -495,4 +508,36 @@ $module: #{$prefix}-cascader;
     }
 }
 
+.#{$module}-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+
+}
+
 @import './rtl.scss';

packages/semi-foundation/cascader/foundation.ts

@@ -109,6 +109,7 @@ export interface BasicScrollPanelProps {
 }
 
 export interface BasicCascaderProps {
+    borderless?: boolean;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
     separator?: string;

packages/semi-foundation/cascader/variables.scss

@@ -5,6 +5,7 @@ $color-cascader_default-border-hover: transparent; // 级联选择描边颜色 -
 $color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
 $color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
+$color-cascader_default-bg-active: var(--semi-color-fill-2); // 级联选择菜单项背景颜色 - 按下
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮

packages/semi-foundation/collapse/foundation.ts

@@ -7,6 +7,7 @@ export interface CollapseProps{
     activeKey?: string | string[];
     defaultActiveKey?: string | string[];
     accordion?: boolean;
+    clickHeaderToExpand?: boolean;
     onChange?: (activeKey: CollapseProps['activeKey'], e: any) => void;
     expandIcon?: any;
     collapseIcon?: any;

packages/semi-foundation/datePicker/datePicker.scss

@@ -77,6 +77,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_month_grid_yearType_insetInput;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_month_grid_timeType_insetInput;
                 }
@@ -101,7 +102,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
             .#{$module}-month {
                 height: $height-datepicker_month_max;
             }
@@ -234,6 +235,7 @@ $module-list: #{$prefix}-scrolllist;
             &:first-of-type {
                 margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
             }
+
             // confirm button
             &:nth-of-type(2) {
                 margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
@@ -564,6 +566,7 @@ $module-list: #{$prefix}-scrolllist;
                 }
             }
         }
+
         // 以上是天状态
     }
 
@@ -662,11 +665,12 @@ $module-list: #{$prefix}-scrolllist;
             display: grid;
             align-content: flex-start;
             grid-gap: $spacing-datepicker_quick_control_item-margin;
-            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5 , $width-datepicker_presetPanel_left_and_right_two_col_button));
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_left_and_right_two_col_button));
             padding: 0 $spacing-datepicker_quick_control_content-paddingX $spacing-datepicker_quick_control_content-paddingX;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     // ellipsis text content, $spacing-datepicker_quick_control_item-margin（default 8px）space left and right
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
@@ -686,6 +690,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -705,6 +710,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -723,6 +729,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -733,6 +740,7 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
@@ -748,12 +756,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -762,12 +772,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -776,12 +788,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -790,12 +804,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -838,10 +854,12 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper;
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper;
             }
@@ -877,12 +895,13 @@ $module-list: #{$prefix}-scrolllist;
             background-color: $color-datepicker_range_input-bg-default;
             border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
 
-            &:hover{
-                border-color: $color-datepicker_range_trigger-border-hover
+            &:hover {
+                border-color: $color-datepicker_range_trigger-border-hover;
             }
 
-            &:active{
-                border-color: $color-datepicker_range_trigger-border-active ;
+            &:active {
+                border-color: $color-datepicker_range_trigger-border-active;
+
             }
 
             .#{$module}-monthRange-input {
@@ -914,7 +933,7 @@ $module-list: #{$prefix}-scrolllist;
                     & ~ .#{$module}-range-input-clearbtn {
                         display: flex;
                     }
-    
+
                     & ~ .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                         display: none;
                     }
@@ -939,7 +958,7 @@ $module-list: #{$prefix}-scrolllist;
 
                 &-start-with-prefix {
                     border-radius: 0;
-                }                
+                }
 
                 &-end {
                     border-radius: 0;
@@ -994,7 +1013,7 @@ $module-list: #{$prefix}-scrolllist;
                         background-color: $color-datepicker_range_input_inputWrapper-bg-default;
                     }
                 }
-                
+
                 &:hover {
                     background-color: $color-datepicker_range_input_disabled-bg-hover;
                 }
@@ -1012,8 +1031,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_warning-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_warning-border-active;
                         background-color: $color-datepicker_range_input_warning-bg-active;
@@ -1028,8 +1047,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_error-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_error-border-active;
                         background-color: $color-datepicker_range_input_error-bg-active;
@@ -1063,7 +1082,7 @@ $module-list: #{$prefix}-scrolllist;
             &-suffix {
                 padding-left: $spacing-datepicker_range_input_suffix-paddingLeft;
                 padding-right: $spacing-datepicker_range_input_suffix-paddingRight;
-                
+
                 &-hidden {
                     display: none;
                 }
@@ -1083,7 +1102,7 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module}-compact {
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
-  
+
     .#{$module}-month-grid {
 
         &[x-type="dateTime"],
@@ -1093,7 +1112,7 @@ $module-list: #{$prefix}-scrolllist;
                 height: calc(100% - #{$height-datepicker_switch_compact});
             }
         }
-    
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1113,7 +1132,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
 
             .#{$module}-month {
                 height: $height-datepicker_month_max_compact;
@@ -1184,6 +1203,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_tpk_compact;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_tpk_compact;
                 }
@@ -1272,7 +1292,7 @@ $module-list: #{$prefix}-scrolllist;
     .#{$module}-day {
         width: $width-datepicker_day_compact;
         height: $width-datepicker_day_compact;
-  
+
         &-main {
             width: $width-datepicker_day_main_compact;
             height: $width-datepicker_day_main_compact;
@@ -1384,6 +1404,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1403,6 +1424,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1421,6 +1443,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1439,6 +1462,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1449,12 +1473,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact + $height-datepicker_inset_input_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1463,12 +1489,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1477,12 +1505,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1491,12 +1521,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1505,12 +1537,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1531,6 +1565,7 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper_compact;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
@@ -1540,6 +1575,7 @@ $module-list: #{$prefix}-scrolllist;
                     margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
                 }
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper_compact;
             }
@@ -1585,4 +1621,73 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module}-borderless {
+
+    &:not(:focus-within):not(:hover){
+        background-color: transparent;
+        border-color: transparent;
+
+        .#{$prefix}-input-suffix, .#{$module}-range-input-suffix {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+
+    &.#{$module}-range-input-error {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+    }
+    &.#{$module}-range-input-error:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+    &.#{$module}-range-input-error:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-range-input-warning {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+    }
+
+    &.#{$module}-range-input-warning:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+    &.#{$module}-range-input-warning:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+
+}
+
+
 @import "./rtl.scss";

packages/semi-foundation/datePicker/foundation.ts

@@ -121,6 +121,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     autoSwitchDate?: boolean;
+    borderless?: boolean;
     className?: string;
     defaultOpen?: boolean;
     defaultPickerValue?: ValueType;

packages/semi-foundation/datePicker/inputFoundation.ts

@@ -34,6 +34,7 @@ export interface DateInputEventHandlerProps {
 }
 
 export interface DateInputElementProps {
+    borderless?: boolean;
     insetLabel?: any;
     prefix?: any
 }

packages/semi-foundation/input/input.scss

@@ -30,6 +30,7 @@ $module: #{$prefix}-input;
     transform: scale($transform_scale-input);
 }
 
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -687,4 +688,31 @@ $module: #{$prefix}-input;
     }
 }
 
+
+
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+
+    &.#{$module}-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+    &.#{$module}-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+
+
+
+}
+
 @import "./rtl.scss";

packages/semi-foundation/input/textarea.scss

@@ -195,4 +195,38 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-textarea-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-textarea-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+
+
+    &.#{$module}-textarea-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+    &.#{$module}-textarea-wrapper-error{
+            .#{$module}-textarea-counter{
+                color: $color-input_danger-border-focus;
+            }
+    }
+
+    &.#{$module}-textarea-wrapper-warning{
+        .#{$module}-textarea-counter{
+            color: $color-input_warning-border-focus;
+        }
+    }
+
+}
+
 @import "./rtl.scss";

packages/semi-foundation/input/variables.scss

@@ -111,3 +111,5 @@ $width-textarea-icon: $width-icon-medium + $spacing-tight; // clear 图标最小
 $height-textarea-default: 32px; // 多行文本 clear 图标的高度
 $spacing-textarea_withShowClear-paddingRight: 36px; // 多行文本设置 showClear 后的右内边距
 $spacing-textarea-icon-right: $spacing-extra-tight;// 多行文本 clear 图标的右边距
+
+

packages/semi-foundation/inputNumber/inputNumber.scss

@@ -108,4 +108,13 @@ $module: #{$prefix}-input-number;
     }
 }
 
+
+.#{$module}:not(:focus-within):not(:hover){
+    .#{$prefix}-input-borderless{
+        & + .#{$module}-suffix-btns{
+            opacity: 0;
+        }
+    }
+}
+
 @import "./rtl.scss";

packages/semi-foundation/package.json

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

packages/semi-foundation/select/select.scss

@@ -40,6 +40,10 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
+    &:active{
+        background-color: $color-select-bg-active;
+    }
+
     &-small {
         height: $height-select_small;
         line-height: $height-select_small;
@@ -468,4 +472,39 @@ $overflowList: #{$prefix}-overflow-list;
     height: 20px;
 }
 
-@import './rtl.scss';
+
+.#{$module}-borderless {
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-select_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-select_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-select_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-select_warning-border-focus;
+    }
+
+}
+
+
+    @import './rtl.scss';

packages/semi-foundation/timePicker/timePicker.scss

@@ -128,4 +128,16 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module} {
+    .#{$prefix}-input-borderless:not(:focus-within):not(:hover){
+        .#{$prefix}-input {
+            &-suffix {
+                opacity: 0;
+            }
+        }
+    }
+
+}
+
+
 @import "./rtl.scss";

packages/semi-foundation/treeSelect/foundation.ts

@@ -99,6 +99,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'checkRelation'
 | 'preventScroll'
 > {
+    borderless?: boolean;
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -16,19 +16,38 @@ $module: #{$prefix}-tree-select;
     position: relative;
     cursor: pointer;
 
+
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
         border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
-    &-focus {
+    &:focus {
         border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+        background-color: $color-treeSelect_default-bg-focus;
         outline: 0;
     }
 
-    &-focus:hover {
+    &:active{
+        background-color: $color-treeSelect_default-bg-active;
+    }
+
+
+    &-focus {
+        background-color: $color-treeSelect_default-bg-focus;
         border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
         outline: 0;
+
+        &:hover {
+            background-color: $color-treeSelect_default-bg-focus;
+            border: $width-treeSelect_focus-border solid $color-treeSelect_default-border-focus;
+            outline: 0;
+        }
+
+
+        &:active{
+            background-color: $color-treeSelect_default-bg-active;
+        }
     }
 
 
@@ -353,4 +372,37 @@ $module: #{$prefix}-tree-select;
     }
 }
 
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-treeSelect_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-treeSelect_warning-border-focus;
+    }
+
+}
+
 @import './rtl.scss';

packages/semi-foundation/treeSelect/variables.scss

@@ -1,10 +1,12 @@
 $color-treeSelect_default-bg-default: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 默认
+$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
+$color-treeSelect_default-bg-active: var(--semi-color-fill-2); // 树选择器选择框背景颜色 - 按下
+$color-treeSelect_default-bg-focus: var(--semi-color-fill-0); // 树选择器选择框背景颜色 - 选中
 $color-treeSelect_default-border-default: transparent; // 树选择器选择框描边颜色 - 默认
 $color-treeSelect_selection-text-default: var(--semi-color-text-0); // 树选择器选择框回填内容文本颜色 - 默认
 $color-treeSelect_default-icon-default: var(--semi-color-text-2); // 树选择器选择框图标颜色 - 默认
 $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选择器选择框清空按钮颜色 - 悬停
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
-$color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
 $color-treeSelect_default-border-hover: transparent; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中

packages/semi-icons/package.json

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

packages/semi-illustrations/package.json

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

packages/semi-next/package.json

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

packages/semi-scss-compile/package.json

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

packages/semi-ui/cascader/index.tsx

@@ -109,6 +109,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         'aria-required': PropTypes.bool,
         'aria-label': PropTypes.string,
         arrowIcon: PropTypes.node,
+        borderless: PropTypes.bool,
         clearIcon: PropTypes.node,
         changeOnSelect: PropTypes.bool,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
@@ -181,6 +182,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     };
 
     static defaultProps = {
+        borderless: false,
         leafOnly: false,
         arrowIcon: <IconChevronDown />,
         stopPropagation: true,
@@ -920,6 +922,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
             triggerRender,
             showClear,
             id,
+            borderless,
         } = this.props;
         const { isOpen, isFocus, isInput, checkedKeys } = this.state;
         const filterable = Boolean(filterTreeNode);
@@ -927,6 +930,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
         const classNames = useCustomTrigger ?
             cls(className) :
             cls(prefixcls, className, {
+                [`${prefixcls}-borderless`]: borderless,
                 [`${prefixcls}-focus`]: isFocus || (isOpen && !isInput),
                 [`${prefixcls}-disabled`]: disabled,
                 [`${prefixcls}-single`]: true,

packages/semi-ui/collapse/collapse-context.tsx

@@ -5,6 +5,7 @@ export interface CollapseContextType{
     activeSet: Set<string>;
     expandIcon: React.ReactNode;
     collapseIcon: React.ReactNode;
+    clickHeaderToExpand: boolean;
     keepDOM: boolean;
     expandIconPosition: 'left' | 'right';
     onClick: (activeKey: string, e: React.MouseEvent) => void;

packages/semi-ui/collapse/index.tsx

@@ -35,6 +35,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
         accordion: PropTypes.bool,
+        clickHeaderToExpand: PropTypes.bool,
         onChange: PropTypes.func,
         expandIcon: PropTypes.node,
         collapseIcon: PropTypes.node,
@@ -47,6 +48,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
 
     static defaultProps = {
         defaultActiveKey: '',
+        clickHeaderToExpand: true,
         onChange: noop,
         expandIconPosition: 'right'
     };
@@ -94,7 +96,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
 
     render() {
         // eslint-disable-next-line max-len
-        const { defaultActiveKey, accordion, style, motion, className, keepDOM, expandIconPosition, expandIcon, collapseIcon, children, ...rest } = this.props;
+        const { defaultActiveKey, accordion, style, motion, className, keepDOM, expandIconPosition, expandIcon, collapseIcon, children, clickHeaderToExpand, ...rest } = this.props;
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
@@ -104,6 +106,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
                         activeSet,
                         expandIcon,
                         collapseIcon,
+                        clickHeaderToExpand,
                         keepDOM,
                         expandIconPosition,
                         onClick: this.onChange,

packages/semi-ui/collapse/item.tsx

@@ -21,7 +21,7 @@ export interface CollapsePanelProps {
 
 export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
     static contextType: React.Context<CollapseContextType> = CollapseContext;
-
+    headerExpandIconTriggerRef = React.createRef<HTMLElement>()
     static propTypes = {
         itemKey: PropTypes.string,
         extra: PropTypes.node,
@@ -65,7 +65,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             collapseIcon = (<IconChevronUp/>);
         }
         const icon = (
-            <span aria-hidden='true' className={cls([`${cssClasses.PREFIX}-header-icon`,
+            <span ref={this.headerExpandIconTriggerRef} aria-hidden='true' className={cls([`${cssClasses.PREFIX}-header-icon`,
                 { [`${cssClasses.PREFIX}-header-iconDisabled`]: !expandIconEnable }])}>
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {expandIconEnable ? (active ? collapseIcon : expandIcon) : expandIcon}
@@ -93,6 +93,14 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         );
     }
 
+    handleClick = (itemKey: string, e: React.MouseEvent)=>{
+        // Judge user click Icon or Header
+        // Don't mount this func into icon span wrapper, or get triggered twice because of event propagation
+        if (this.context.clickHeaderToExpand || this.headerExpandIconTriggerRef.current?.contains(e.target as HTMLElement)) {
+            this.context.onClick(itemKey, e);
+        }
+    }
+
     render() {
         const {
             className,
@@ -109,7 +117,6 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
             keepDOM,
             expandIconPosition,
             activeSet,
-            onClick,
             motion,
         } = this.context;
         const active = activeSet.has(itemKey);
@@ -136,7 +143,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     aria-disabled={disabled}
                     aria-expanded={active ? 'true' : 'false'}
                     aria-owns={this.ariaID}
-                    onClick={e => !disabled && onClick(itemKey, e)}
+                    onClick={e => !disabled && this.handleClick(itemKey, e)}
                 >
                     {this.renderHeader(active, children !== undefined && !disabled)}
                 </div>

packages/semi-ui/datePicker/dateInput.tsx

@@ -44,6 +44,7 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes = {
+        borderless: PropTypes.bool,
         onClick: PropTypes.func,
         onChange: PropTypes.func,
         onEnterPress: PropTypes.func,
@@ -78,6 +79,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     };
 
     static defaultProps = {
+        borderless: false,
         showClear: true,
         onClick: noop,
         onChange: noop,
@@ -244,6 +246,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             rangeInputFocus,
             prefixCls,
             rangeSeparator,
+            borderless
         } = rangeProps;
 
         const [rangeStart, rangeEnd = ''] = text.split(rangeSeparator) || [];
@@ -253,9 +256,11 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
             [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel,
+            [`${prefixCls}-borderless`]: borderless
         });
         const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled,
+            [`${prefixCls}-borderless`]: borderless
         });
         return (
             <>
@@ -265,6 +270,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
                     className={`${inputCls} ${inputLeftWrapperCls}`}
                 >
                     <Input
+                        borderless={borderless}
                         size={rangeSize}
                         style={inputStyle}
                         disabled={disabled}
@@ -286,6 +292,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
                     onClick={e => !disabled && this.handleRangeInputFocus(e, 'rangeEnd')}
                 >
                     <Input
+                        borderless={borderless}
                         size={rangeSize}
                         style={inputStyle}
                         disabled={disabled}

packages/semi-ui/datePicker/datePicker.tsx

@@ -5,9 +5,17 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
+import { noop, stubFalse, isDate, get, isFunction, isEqual, pick } from 'lodash';
 import ConfigContext, { ContextValue } from '../configProvider/context';
-import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
+import DatePickerFoundation, {
+    DatePickerAdapter,
+    DatePickerFoundationProps,
+    DatePickerFoundationState,
+    DayStatusType,
+    PresetType,
+    Type,
+    RangeType
+} from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
 import { strings as popoverStrings, numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
 import BaseComponent from '../_base/baseComponent';
@@ -41,15 +49,15 @@ export interface DatePickerProps extends DatePickerFoundationProps {
     renderFullDate?: (dayNumber?: number, fullDate?: string, dayStatus?: DayStatusType) => React.ReactNode;
     triggerRender?: (props: DatePickerProps) => React.ReactNode;
     /**
-     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times. 
-     * 
+     * There are multiple input boxes when selecting a range, and the input boxes will be out of focus multiple times.
+     *
      * Use `onOpenChange` or `onClickOutSide` instead
      */
     onBlur?: React.MouseEventHandler<HTMLInputElement>;
     onClear?: React.MouseEventHandler<HTMLDivElement>;
     /**
      * There are multiple input boxes when selecting a range, and the input boxes will be focused multiple times.
-     * 
+     *
      * Use `onOpenChange` or `triggerRender` instead
      */
     onFocus?: (e: React.MouseEvent, rangeType: RangeType) => void;
@@ -71,6 +79,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.bool,
         'aria-labelledby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        borderless: PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
         size: PropTypes.oneOf(strings.SIZE_SET),
         clearIcon: PropTypes.node,
@@ -150,6 +159,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
     static defaultProps = {
         onChangeWithDateFirst: true,
+        borderless: false,
         autoAdjustOverflow: true,
         stopPropagation: true,
         motion: true,
@@ -570,7 +580,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             defaultPickerValue
         };
 
-        return insetInput ? <DateInput {...props} insetInput={insetInput} /> : null;
+        return insetInput ? <DateInput {...props} insetInput={insetInput}/> : null;
     }
 
     handleOpenPanel = () => this.foundation.openPanel();
@@ -612,7 +622,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         this.foundation.handlePanelVisibleChange(visible);
     }
 
-    renderInner() {
+    renderInner(extraProps?: Partial<DatePickerProps>) {
         const {
             clearIcon,
             type,
@@ -633,7 +643,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             inputReadOnly,
             rangeSeparator,
             insetInput,
-            defaultPickerValue
+            defaultPickerValue,
+            borderless
         } = this.props;
         const { value, inputValue, rangeInputFocus, triggerDisabled } = this.state;
         // This class is not needed when triggerRender is function
@@ -645,10 +656,12 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
             [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
             [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
+            [`${cssClasses.PREFIX}-borderless`]: borderless
         });
         const phText = placeholder || locale.placeholder[type]; // i18n
         // These values should be passed to triggerRender, do not delete any key if it is not necessary
         const props = {
+            ...extraProps,
             placeholder: phText,
             clearIcon,
             disabled: inputDisabled,
@@ -843,7 +856,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
     };
 
     render() {
-        const { style, className, prefixCls } = this.props;
+        const { style, className, prefixCls, type } = this.props;
         const outerProps = {
             style,
             className: classnames(className, { [prefixCls]: true }),
@@ -855,7 +868,11 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             'aria-required': this.props['aria-required'],
         };
 
-        const inner = this.renderInner();
+        const innerPropKeys: string[] = [];
+        if (!type.toLowerCase().includes("range")) {
+            innerPropKeys.push("borderless");
+        }
+        const inner = this.renderInner(pick(this.props, innerPropKeys));
         const wrappedInner = this.wrapPopover(inner);
 
         return <div {...outerProps}>{wrappedInner}</div>;

packages/semi-ui/input/index.tsx

@@ -34,6 +34,7 @@ export interface InputProps extends
     'aria-required'?: React.AriaAttributes['aria-required'];
     addonBefore?: React.ReactNode;
     addonAfter?: React.ReactNode;
+    borderless?: boolean;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
     mode?: InputMode;
@@ -120,6 +121,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         inputStyle: PropTypes.object,
         getValueLength: PropTypes.func,
         preventScroll: PropTypes.bool,
+        borderless: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -144,6 +146,7 @@ class Input extends BaseComponent<InputProps, InputState> {
         onKeyPress: noop,
         onEnterPress: noop,
         validateStatus: 'default',
+        noBg: false,
     };
 
     inputRef!: React.RefObject<HTMLInputElement>;
@@ -442,6 +445,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             maxLength,
             getValueLength,
             preventScroll,
+            borderless,
             ...rest
         } = this.props;
         const { value, isFocus, minLength: stateMinLength } = this.state;
@@ -467,6 +471,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             [`${wrapperPrefix}-modebtn`]: mode === 'password',
             [`${wrapperPrefix}-hidden`]: type === 'hidden',
             [`${wrapperPrefix}-${size}`]: size,
+            [`${prefixCls}-borderless`]: borderless
         });
         const inputCls = cls(prefixCls, {
             [`${prefixCls}-${size}`]: size,

packages/semi-ui/input/textarea.tsx

@@ -25,6 +25,7 @@ type OmitTextareaAttr =
 export interface TextAreaProps extends
     Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmitTextareaAttr> {
     autosize?: boolean;
+    borderless?: boolean;
     placeholder?: string;
     value?: string;
     rows?: number;
@@ -64,6 +65,7 @@ export interface TextAreaState {
 class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     static propTypes = {
         autosize: PropTypes.bool,
+        borderless: PropTypes.bool,
         placeholder: PropTypes.string,
         value: PropTypes.string,
         rows: PropTypes.number,
@@ -83,6 +85,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
 
     static defaultProps = {
         autosize: false,
+        borderless: false,
         rows: 4,
         cols: 20,
         showCounter: false,
@@ -276,6 +279,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             maxLength,
             minLength,
             showClear,
+            borderless,
             ...rest
         } = this.props;
         const { isFocus, value, minLength: stateMinLength } = this.state;
@@ -283,6 +287,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             className,
             `${prefixCls}-textarea-wrapper`,
             {
+                [`${prefixCls}-textarea-borderless`]: borderless,
                 [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
                 [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
                 [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),

packages/semi-ui/package.json

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

packages/semi-ui/select/index.tsx

@@ -117,6 +117,7 @@ export type SelectProps = {
     autoFocus?: boolean;
     autoClearSearchValue?: boolean;
     arrowIcon?: React.ReactNode;
+    borderless?: boolean;
     clearIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
@@ -228,6 +229,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         'aria-required': PropTypes.bool,
         autoFocus: PropTypes.bool,
         autoClearSearchValue: PropTypes.bool,
+        borderless: PropTypes.bool,
         children: PropTypes.node,
         clearIcon: PropTypes.node,
         defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array, PropTypes.object]),
@@ -316,6 +318,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
     static defaultProps: Partial<SelectProps> = {
         stopPropagation: true,
         motion: true,
+        borderless: false,
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,
         // position: 'bottomLeft',
         filter: false,
@@ -1301,7 +1304,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             placeholder,
             triggerRender,
             arrowIcon,
-            clearIcon
+            clearIcon,
+            borderless
         } = this.props;
 
         const { selections, isOpen, keyboardEventSet, inputValue, isHovering, isFocus, showInput, focusIndex } = this.state;
@@ -1310,6 +1314,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         const selectionCls = useCustomTrigger ?
             cls(className) :
             cls(prefixcls, className, {
+                [`${prefixcls}-borderless`]: borderless,
                 [`${prefixcls}-open`]: isOpen,
                 [`${prefixcls}-focus`]: isFocus,
                 [`${prefixcls}-disabled`]: disabled,

packages/semi-ui/timePicker/TimeInput.tsx

@@ -34,6 +34,7 @@ export type TimeInputProps = Pick<TimePickerProps,
 'localeCode' |
 'insetLabel' |
 'validateStatus' |
+'borderless'|
 'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
@@ -46,6 +47,7 @@ export type TimeInputProps = Pick<TimePickerProps,
 
 class TimeInput extends BaseComponent<TimeInputProps, any> {
     static propTypes = {
+        borderless: PropTypes.bool,
         format: PropTypes.string,
         prefixCls: PropTypes.string,
         placeholder: PropTypes.string,
@@ -74,6 +76,7 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
     };
 
     static defaultProps = {
+        borderless: false,
         inputReadOnly: false,
         onChange: noop,
         onBlur: noop,

packages/semi-ui/timePicker/TimePicker.tsx

@@ -42,6 +42,7 @@ export type TimePickerProps = {
     'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean; // TODO: autoFocus did not take effect
+    borderless?: boolean;
     className?: string;
     clearText?: string;
     clearIcon?: React.ReactNode;
@@ -118,6 +119,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-describedby': PropTypes.string,
         'aria-required': PropTypes.bool,
         prefixCls: PropTypes.string,
+        borderless: PropTypes.bool,
         clearText: PropTypes.string,
         clearIcon: PropTypes.node,
         value: TimeShape,
@@ -173,6 +175,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
     static defaultProps = {
         autoAdjustOverflow: true,
+        borderless: false,
         getPopupContainer: () => document.body,
         showClear: true,
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,

packages/semi-ui/treeSelect/index.tsx

@@ -182,6 +182,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         'aria-invalid': PropTypes.bool,
         'aria-labelledby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        borderless: PropTypes.bool,
         loadedKeys: PropTypes.arrayOf(PropTypes.string),
         loadData: PropTypes.func,
         onLoad: PropTypes.func,
@@ -268,6 +269,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
     };
 
     static defaultProps: Partial<TreeSelectProps> = {
+        borderless: false,
         searchPosition: strings.SEARCH_POSITION_DROPDOWN,
         arrowIcon: <IconChevronDown />,
         autoExpandParent: false,
@@ -969,6 +971,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             leafOnly,
             searchPosition,
             triggerRender,
+            borderless
         } = this.props;
         const { inputValue, selectedKeys, checkedKeys, keyEntities, isFocus } = this.state;
         const filterable = Boolean(filterTreeNode);
@@ -987,6 +990,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
             cls(
                 prefixcls,
                 {
+                    [`${prefixcls}-borderless`]: borderless,
                     [`${prefixcls}-focus`]: isFocus,
                     [`${prefixcls}-disabled`]: disabled,
                     [`${prefixcls}-single`]: !multiple,

packages/semi-webpack/package.json

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