@douyinfe/semi-foundation 2.32.2 → 2.33.0

package/lib/cjs/input/input.css

@@ -551,6 +551,20 @@
   margin-bottom: 0;
 }
 
+.semi-input-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/cjs/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";

package/lib/cjs/input/textarea.css

@@ -151,6 +151,26 @@
   color: var(--semi-color-danger);
 }
 
+.semi-input-textarea-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-textarea-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
+  color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
+  color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;

package/lib/cjs/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";

package/lib/cjs/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 图标的右边距
+
+

package/lib/cjs/inputNumber/inputNumber.css

@@ -75,6 +75,10 @@
   height: 22px;
 }
 
+.semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns {
+  opacity: 0;
+}
+
 .semi-rtl .semi-input-number,
 .semi-portal-rtl .semi-input-number {
   direction: rtl;

package/lib/cjs/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";

package/lib/cjs/select/select.css

@@ -95,6 +95,9 @@
   background-color: var(--semi-color-fill-0);
   outline: 0;
 }
+.semi-select:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-small {
   height: 24px;
   line-height: 24px;
@@ -435,6 +438,29 @@
   height: 20px;
 }
 
+.semi-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
+  opacity: 0;
+}
+.semi-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-select-borderless.semi-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-select-borderless.semi-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-select,
 .semi-portal-rtl .semi-select {
   direction: rtl;

package/lib/cjs/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';

package/lib/cjs/timePicker/timePicker.css

@@ -87,6 +87,10 @@
   cursor: pointer;
 }
 
+.semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix {
+  opacity: 0;
+}
+
 .semi-rtl .semi-timepicker,
 .semi-portal-rtl .semi-timepicker {
   direction: rtl;

package/lib/cjs/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";

package/lib/cjs/treeSelect/foundation.d.ts

@@ -30,6 +30,7 @@ export interface BasicOnChange {
     (value: BasicTreeNodeData['value'] | Array<BasicTreeNodeData['value']>, node: BasicTreeNodeData[] | BasicTreeNodeData, e: any): void;
 }
 export interface BasicTreeSelectProps extends Pick<BasicTreeProps, 'virtualize' | 'renderFullLabel' | 'renderLabel' | 'autoExpandParent' | 'className' | 'defaultExpandAll' | 'defaultExpandedKeys' | 'defaultValue' | 'disabled' | 'emptyContent' | 'expandAction' | 'expandedKeys' | 'filterTreeNode' | 'labelEllipsis' | 'leafOnly' | 'multiple' | 'onChangeWithObject' | 'showClear' | 'showFilteredOnly' | 'style' | 'treeData' | 'treeNodeFilterProp' | 'value' | 'onExpand' | 'expandAll' | 'disableStrictly' | 'aria-label' | 'checkRelation' | 'preventScroll'> {
+    borderless?: boolean;
     motion?: Motion;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;

package/lib/cjs/treeSelect/treeSelect.css

@@ -19,14 +19,27 @@
   background-color: var(--semi-color-fill-1);
   border: 1px solid transparent;
 }
+.semi-tree-select:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-tree-select:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-tree-select-focus {
+  background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
 .semi-tree-select-focus:hover {
+  background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -276,6 +289,29 @@
   border-bottom: 1px var(--semi-color-fill-0) solid;
 }
 
+.semi-tree-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow {
+  opacity: 0;
+}
+.semi-tree-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-tree-select-borderless.semi-tree-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-tree-select,
 .semi-portal-rtl .semi-tree-select {
   direction: rtl;

package/lib/cjs/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';

package/lib/cjs/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);// 树选择器选择框描边颜色 - 选中

package/lib/es/cascader/cascader.css

@@ -21,6 +21,14 @@
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
+.semi-cascader:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-cascader:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-small {
   min-height: 24px;
   line-height: 24px;
@@ -38,10 +46,13 @@
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
-.semi-cascader-focus:hover, .semi-cascader-focus:active {
+.semi-cascader-focus:hover {
   background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
 }
+.semi-cascader-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -402,6 +413,29 @@
   padding-right: 64px;
 }
 
+.semi-cascader-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow {
+  opacity: 0;
+}
+.semi-cascader-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-cascader-borderless.semi-cascader-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-cascader-borderless.semi-cascader-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-cascader,
 .semi-portal-rtl .semi-cascader {
   direction: rtl;

package/lib/es/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';

package/lib/es/cascader/foundation.d.ts

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

package/lib/es/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); // 级联选择菜单项背景颜色 - 悬浮

package/lib/es/collapse/foundation.d.ts

@@ -4,6 +4,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;

package/lib/es/datePicker/datePicker.css

@@ -1085,6 +1085,51 @@
   min-height: 168px;
 }
 
+.semi-datepicker-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
+  opacity: 0;
+}
+.semi-datepicker-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl,
 .semi-portal-rtl {
   /*