@douyinfe/semi-foundation 2.23.0 → 2.23.2

package/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
         @include font-size-regular;

package/form/rtl.scss

@@ -33,6 +33,7 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
+            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/form/variables.scss

@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
 
 // form label
+$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距

package/input/foundation.ts

@@ -21,7 +21,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyKeyUp(e: any): void;
     notifyKeyPress(e: any): void;
     notifyEnterPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isEventTarget(e: any): boolean
 }
 
@@ -266,10 +265,6 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         }
     }
 
-    setPaddingLeft(paddingLeft: string) {
-        this._adapter.setPaddingLeft(paddingLeft);
-    }
-
     isAllowClear() {
         const { value, isFocus, isHovering } = this._adapter.getStates();
         const { showClear, disabled } = this._adapter.getProps();

package/lib/cjs/form/form.css

@@ -48,6 +48,7 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  padding-right: 16px;
   display: inline-block;
   vertical-align: middle;
   font-size: 14px;
@@ -231,6 +232,7 @@
 .semi-rtl .semi-form-field-label,
 .semi-portal-rtl .semi-form-field-label {
   padding-right: 0;
+  padding-left: 16px;
 }
 .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
 .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {

package/lib/cjs/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
         @include font-size-regular;

package/lib/cjs/form/rtl.scss

@@ -33,6 +33,7 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
+            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/lib/cjs/form/variables.scss

@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
 
 // form label
+$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距

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

@@ -15,7 +15,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyKeyUp(e: any): void;
     notifyKeyPress(e: any): void;
     notifyEnterPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isEventTarget(e: any): boolean;
 }
 declare class InputFoundation extends BaseFoundation<InputAdapter> {
@@ -67,7 +66,6 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
     handleKeyDown(e: any): void;
     handleKeyUp(e: any): void;
     handleKeyPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isAllowClear(): any;
     handleClickPrefixOrSuffix(e: any): void;
     /**

package/lib/cjs/input/foundation.js

@@ -321,10 +321,6 @@ class InputFoundation extends _foundation.default {
     }
   }
 
-  setPaddingLeft(paddingLeft) {
-    this._adapter.setPaddingLeft(paddingLeft);
-  }
-
   isAllowClear() {
     const {
       value,

package/lib/cjs/modal/modalFoundation.d.ts

@@ -10,7 +10,6 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
     getProps: () => ModalProps;
-    setShouldRender: (shouldRender: boolean) => void;
 }
 export interface ModalProps {
     afterClose?: () => void;
@@ -56,7 +55,6 @@ export interface ModalProps {
 export interface ModalState {
     displayNone: boolean;
     isFullScreen: boolean;
-    shouldRender: boolean;
 }
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     constructor(adapter: ModalAdapter);
@@ -66,5 +64,4 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     beforeShow(): void;
     afterHide(): void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
-    setShouldRender: (shouldRender: any) => void;
 }

package/lib/cjs/modal/modalFoundation.js

@@ -18,10 +18,6 @@ class ModalFoundation extends _foundation.default {
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
-
-    this.setShouldRender = shouldRender => {
-      this._adapter.setShouldRender(shouldRender);
-    };
   }
 
   destroy() {

package/lib/cjs/sideSheet/sideSheetFoundation.d.ts

@@ -28,7 +28,6 @@ export interface SideSheetProps {
 }
 export interface SideSheetState {
     displayNone: boolean;
-    shouldRender: boolean;
 }
 export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
     disabledBodyScroll: () => void;
@@ -38,7 +37,6 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
     setOnKeyDownListener: () => void;
     removeKeyDownListener: () => void;
     toggleDisplayNone: (displayNone: boolean) => void;
-    setShouldRender: (shouldRender: boolean) => void;
 }
 export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
     constructor(adapter: SideSheetAdapter);
@@ -52,7 +50,6 @@ export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter
     beforeShow(): void;
     afterHide(): void;
     handleKeyDown(e: any): void;
-    setShouldRender(shouldRender: boolean): void;
     onVisibleChange(visible: boolean): void;
     toggleDisplayNone: (displayNone: boolean) => void;
 }

package/lib/cjs/sideSheet/sideSheetFoundation.js

@@ -64,10 +64,6 @@ class SideSheetFoundation extends _foundation.default {
     }
   }
 
-  setShouldRender(shouldRender) {
-    this._adapter.setShouldRender(shouldRender);
-  }
-
   onVisibleChange(visible) {
     this._adapter.notifyVisibleChange(visible);
   }

package/lib/cjs/switch/rtl.scss

@@ -20,7 +20,7 @@ $module: #{$prefix}-switch;
         &-knob {
             right: 0;
             left: auto;
-            transform: translateX(-$motion-switch_unchecked-translateX);
+            transform: translateX(-1 * $spacing-switch_unchecked-translateX);
         }
 
         &-native-control {

package/lib/cjs/switch/switch.css

@@ -71,7 +71,7 @@
   background-color: rgba(var(--semi-white), 1);
   box-sizing: border-box;
   position: absolute;
-  left: 0;
+  left: 0px;
   right: auto;
   transition: transform 200ms ease-in-out, width 200ms ease-in-out;
   width: 18px;

package/lib/cjs/switch/switch.scss

@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_knob-bg-default;
         box-sizing: border-box;
         position: absolute;
-        left: 0;
+        left: $spacing-switch_knob-left;
         right: auto;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
 
         width: $width-switch_knob_default;
         height: $width-switch_knob_default;
         top: $spacing-switch_knob-padding;
-        transform: translateX($motion-switch_unchecked-translateX);
+        transform: translateX($spacing-switch_unchecked-translateX);
     }
 
     &-native-control {

package/lib/cjs/switch/variables.scss

@@ -1,5 +1,5 @@
 // Other
-$motion-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
+$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing
-$spacing-switch_knob-padding: 2px; // 开关按钮内边距
+$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
+$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
 
 // Radius
 $radius-switch: $height-switch * 0.5; // 开关圆角

package/lib/cjs/tagInput/tagInput.css

@@ -15,6 +15,9 @@
   display: flex;
   align-items: center;
 }
+.semi-tagInput-drag-item-move {
+  z-index: 2000;
+}
 .semi-tagInput-drag-handler {
   color: var(--semi-color-text-2);
   margin-right: 4px;
@@ -82,6 +85,15 @@
   padding-right: 4px;
   overflow: hidden;
 }
+.semi-tagInput-wrapper-small {
+  min-height: 24px;
+}
+.semi-tagInput-wrapper-default {
+  min-height: 32px;
+}
+.semi-tagInput-wrapper-large {
+  min-height: 40px;
+}
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
@@ -134,6 +146,36 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input {
   padding-left: 0;
 }
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small {
+  height: 20px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  line-height: 20px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default {
+  height: 24px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large {
+  height: 24px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large {
+  height: 24px;
+  line-height: 24px;
+}
 .semi-tagInput-clearBtn {
   display: flex;
   justify-content: center;

package/lib/cjs/tagInput/tagInput.scss

@@ -20,6 +20,10 @@ $module: #{$prefix}-tagInput;
         &-item {
             display: flex;
             align-items: center;
+
+            &-move {
+                z-index: $z-tagInput_drag_item_move;
+            }
         }
 
         &-handler {
@@ -102,6 +106,18 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
+        &-small {
+            min-height: $height-tagInput-small;
+        }
+
+        &-default {
+            min-height: $height-tagInput-default;
+        }
+
+        &-large {
+            min-height: $height-tagInput-large;
+        }
+
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -166,6 +182,42 @@ $module: #{$prefix}-tagInput;
             &:not(:first-child) > input {
                 padding-left: 0;
             }
+
+            &-small {
+                height: $height-tagInput_input_small;
+                margin-top: $spacing-tagInput_small-Y;
+                margin-bottom: $spacing-tagInput_small-Y;
+                line-height: $height-tagInput_input_small;
+
+                & .#{$prefix}-input-small {
+                    height: $height-tagInput_input_small;
+                    line-height: $height-tagInput_input_small;
+                }
+            }
+
+            &-default {
+                height: $height-tagInput_input_default;
+                margin-top: $spacing-tagInput_default-Y;
+                margin-bottom: $spacing-tagInput_default-Y;
+                line-height: $height-tagInput_input_default;
+
+                & .#{$prefix}-input-default {
+                    height: $height-tagInput_input_default;
+                    line-height: $height-tagInput_input_default;
+                }
+            }
+
+            &-large {
+                height: $height-tagInput_input_large;
+                margin-top: $spacing-tagInput_large-Y;
+                margin-bottom: $spacing-tagInput_large-Y;
+                line-height: $height-tagInput_input_large;
+
+                & .#{$prefix}-input-large {
+                    height: $height-tagInput_input_large;
+                    line-height: $height-tagInput_input_large;
+                }
+            }
         }
     }
 

package/lib/cjs/tagInput/variables.scss

@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
+$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
+$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
+$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
@@ -47,3 +50,5 @@ $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框
 $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
+
+$z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index

package/lib/cjs/transfer/transfer.css

@@ -144,6 +144,9 @@
   margin-right: 4px;
   flex-shrink: 0;
 }
+.semi-transfer-right-item-drag-item-move {
+  z-index: 2000;
+}
 .semi-transfer-right-empty {
   position: absolute;
   height: 100%;

package/lib/cjs/transfer/transfer.scss

@@ -165,9 +165,15 @@ $module: #{$prefix}-transfer;
                 word-break: break-all;
             }
 
-            &-drag-handler {
-                margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
-                flex-shrink: 0;
+            &-drag {
+                &-handler {
+                    margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
+                    flex-shrink: 0;
+                }
+
+                &-item-move {
+                    z-index: $z-transfer_right_item_drag_item_move;
+                }            
             }
         }
 

package/lib/cjs/transfer/variables.scss

@@ -53,3 +53,5 @@ $radius-transfer: var(--semi-border-radius-medium); // 穿梭框圆角
 
 // Font
 $font-transfer_header_all-fontWeight: 600; // 穿梭框字重
+
+$z-transfer_right_item_drag_item_move: 2000 !default; // 穿梭框右侧面板中正在拖拽元素的z-index

package/lib/es/form/form.css

@@ -48,6 +48,7 @@
   font-weight: 600;
   color: var(--semi-color-text-0);
   margin-bottom: 4px;
+  padding-right: 16px;
   display: inline-block;
   vertical-align: middle;
   font-size: 14px;
@@ -231,6 +232,7 @@
 .semi-rtl .semi-form-field-label,
 .semi-portal-rtl .semi-form-field-label {
   padding-right: 0;
+  padding-left: 16px;
 }
 .semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra,
 .semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra {

package/lib/es/form/form.scss

@@ -92,6 +92,7 @@ $rating: #{$prefix}-rating;
         font-weight: $font-form_label-fontWeight;
         color: $color-form_label-text-default;
         margin-bottom: $spacing-form_label-marginBottom;
+        padding-right: $spacing-form_label-paddingRight;
         display: inline-block;
         vertical-align: middle;
         @include font-size-regular;

package/lib/es/form/rtl.scss

@@ -33,6 +33,7 @@ $rating: #{$prefix}-rating;
     
         &-field-label {
             padding-right: 0;
+            padding-left: $spacing-form_label-paddingRight;
     
             &-with-extra {
                 .#{$field}-label-extra {

package/lib/es/form/variables.scss

@@ -7,6 +7,7 @@ $spacing-form_field_group_vertical-paddingTop: $spacing-base-tight; // 垂直布
 $spacing-form_field_group_vertical-paddingBottom: $spacing-base-tight; // 垂直布局表单组底部内边距
 
 // form label
+$spacing-form_label-paddingRight: $spacing-base; // 表单项标签右侧边距（水平布局）
 $spacing-form_label-paddingTop: ($height-control-default - 20px) * 0.5; // 表单项标签顶部内边距（水平布局）
 $spacing-form_label-marginBottom: $spacing-extra-tight; // 表单项标签底部外边距
 $spacing-form_label_extra-marginLeft: $spacing-extra-tight; // 表单项标签额外信息左侧边距

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

@@ -15,7 +15,6 @@ export interface InputAdapter extends Partial<DefaultAdapter>, Partial<InputDefa
     notifyKeyUp(e: any): void;
     notifyKeyPress(e: any): void;
     notifyEnterPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isEventTarget(e: any): boolean;
 }
 declare class InputFoundation extends BaseFoundation<InputAdapter> {
@@ -67,7 +66,6 @@ declare class InputFoundation extends BaseFoundation<InputAdapter> {
     handleKeyDown(e: any): void;
     handleKeyUp(e: any): void;
     handleKeyPress(e: any): void;
-    setPaddingLeft(paddingLeft: string): void;
     isAllowClear(): any;
     handleClickPrefixOrSuffix(e: any): void;
     /**

package/lib/es/input/foundation.js

@@ -306,10 +306,6 @@ class InputFoundation extends BaseFoundation {
     }
   }
 
-  setPaddingLeft(paddingLeft) {
-    this._adapter.setPaddingLeft(paddingLeft);
-  }
-
   isAllowClear() {
     const {
       value,

package/lib/es/modal/modalFoundation.d.ts

@@ -10,7 +10,6 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
     getProps: () => ModalProps;
-    setShouldRender: (shouldRender: boolean) => void;
 }
 export interface ModalProps {
     afterClose?: () => void;
@@ -56,7 +55,6 @@ export interface ModalProps {
 export interface ModalState {
     displayNone: boolean;
     isFullScreen: boolean;
-    shouldRender: boolean;
 }
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     constructor(adapter: ModalAdapter);
@@ -66,5 +64,4 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
     beforeShow(): void;
     afterHide(): void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
-    setShouldRender: (shouldRender: any) => void;
 }

package/lib/es/modal/modalFoundation.js

@@ -8,10 +8,6 @@ export default class ModalFoundation extends BaseFoundation {
     this.toggleDisplayNone = (displayNone, callback) => {
       this._adapter.toggleDisplayNone(displayNone, callback);
     };
-
-    this.setShouldRender = shouldRender => {
-      this._adapter.setShouldRender(shouldRender);
-    };
   }
 
   destroy() {

package/lib/es/sideSheet/sideSheetFoundation.d.ts

@@ -28,7 +28,6 @@ export interface SideSheetProps {
 }
 export interface SideSheetState {
     displayNone: boolean;
-    shouldRender: boolean;
 }
 export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
     disabledBodyScroll: () => void;
@@ -38,7 +37,6 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
     setOnKeyDownListener: () => void;
     removeKeyDownListener: () => void;
     toggleDisplayNone: (displayNone: boolean) => void;
-    setShouldRender: (shouldRender: boolean) => void;
 }
 export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
     constructor(adapter: SideSheetAdapter);
@@ -52,7 +50,6 @@ export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter
     beforeShow(): void;
     afterHide(): void;
     handleKeyDown(e: any): void;
-    setShouldRender(shouldRender: boolean): void;
     onVisibleChange(visible: boolean): void;
     toggleDisplayNone: (displayNone: boolean) => void;
 }

package/lib/es/sideSheet/sideSheetFoundation.js

@@ -52,10 +52,6 @@ export default class SideSheetFoundation extends BaseFoundation {
     }
   }
 
-  setShouldRender(shouldRender) {
-    this._adapter.setShouldRender(shouldRender);
-  }
-
   onVisibleChange(visible) {
     this._adapter.notifyVisibleChange(visible);
   }

package/lib/es/switch/rtl.scss

@@ -20,7 +20,7 @@ $module: #{$prefix}-switch;
         &-knob {
             right: 0;
             left: auto;
-            transform: translateX(-$motion-switch_unchecked-translateX);
+            transform: translateX(-1 * $spacing-switch_unchecked-translateX);
         }
 
         &-native-control {

package/lib/es/switch/switch.css

@@ -71,7 +71,7 @@
   background-color: rgba(var(--semi-white), 1);
   box-sizing: border-box;
   position: absolute;
-  left: 0;
+  left: 0px;
   right: auto;
   transition: transform 200ms ease-in-out, width 200ms ease-in-out;
   width: 18px;

package/lib/es/switch/switch.scss

@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_knob-bg-default;
         box-sizing: border-box;
         position: absolute;
-        left: 0;
+        left: $spacing-switch_knob-left;
         right: auto;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
 
         width: $width-switch_knob_default;
         height: $width-switch_knob_default;
         top: $spacing-switch_knob-padding;
-        transform: translateX($motion-switch_unchecked-translateX);
+        transform: translateX($spacing-switch_unchecked-translateX);
     }
 
     &-native-control {

package/lib/es/switch/variables.scss

@@ -1,5 +1,5 @@
 // Other
-$motion-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
+$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing
-$spacing-switch_knob-padding: 2px; // 开关按钮内边距
+$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
+$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
 
 // Radius
 $radius-switch: $height-switch * 0.5; // 开关圆角

package/lib/es/tagInput/tagInput.css

@@ -15,6 +15,9 @@
   display: flex;
   align-items: center;
 }
+.semi-tagInput-drag-item-move {
+  z-index: 2000;
+}
 .semi-tagInput-drag-handler {
   color: var(--semi-color-text-2);
   margin-right: 4px;
@@ -82,6 +85,15 @@
   padding-right: 4px;
   overflow: hidden;
 }
+.semi-tagInput-wrapper-small {
+  min-height: 24px;
+}
+.semi-tagInput-wrapper-default {
+  min-height: 32px;
+}
+.semi-tagInput-wrapper-large {
+  min-height: 40px;
+}
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
   white-space: pre;
@@ -134,6 +146,36 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input {
   padding-left: 0;
 }
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small {
+  height: 20px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  line-height: 20px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small {
+  height: 20px;
+  line-height: 20px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default {
+  height: 24px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default {
+  height: 24px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large {
+  height: 24px;
+  margin-top: 3px;
+  margin-bottom: 3px;
+  line-height: 24px;
+}
+.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large {
+  height: 24px;
+  line-height: 24px;
+}
 .semi-tagInput-clearBtn {
   display: flex;
   justify-content: center;

package/lib/es/tagInput/tagInput.scss

@@ -20,6 +20,10 @@ $module: #{$prefix}-tagInput;
         &-item {
             display: flex;
             align-items: center;
+
+            &-move {
+                z-index: $z-tagInput_drag_item_move;
+            }
         }
 
         &-handler {
@@ -102,6 +106,18 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
+        &-small {
+            min-height: $height-tagInput-small;
+        }
+
+        &-default {
+            min-height: $height-tagInput-default;
+        }
+
+        &-large {
+            min-height: $height-tagInput-large;
+        }
+
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -166,6 +182,42 @@ $module: #{$prefix}-tagInput;
             &:not(:first-child) > input {
                 padding-left: 0;
             }
+
+            &-small {
+                height: $height-tagInput_input_small;
+                margin-top: $spacing-tagInput_small-Y;
+                margin-bottom: $spacing-tagInput_small-Y;
+                line-height: $height-tagInput_input_small;
+
+                & .#{$prefix}-input-small {
+                    height: $height-tagInput_input_small;
+                    line-height: $height-tagInput_input_small;
+                }
+            }
+
+            &-default {
+                height: $height-tagInput_input_default;
+                margin-top: $spacing-tagInput_default-Y;
+                margin-bottom: $spacing-tagInput_default-Y;
+                line-height: $height-tagInput_input_default;
+
+                & .#{$prefix}-input-default {
+                    height: $height-tagInput_input_default;
+                    line-height: $height-tagInput_input_default;
+                }
+            }
+
+            &-large {
+                height: $height-tagInput_input_large;
+                margin-top: $spacing-tagInput_large-Y;
+                margin-bottom: $spacing-tagInput_large-Y;
+                line-height: $height-tagInput_input_large;
+
+                & .#{$prefix}-input-large {
+                    height: $height-tagInput_input_large;
+                    line-height: $height-tagInput_input_large;
+                }
+            }
         }
     }
 

package/lib/es/tagInput/variables.scss

@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
+$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
+$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
+$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
@@ -47,3 +50,5 @@ $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框
 $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
+
+$z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index

package/lib/es/transfer/transfer.css

@@ -144,6 +144,9 @@
   margin-right: 4px;
   flex-shrink: 0;
 }
+.semi-transfer-right-item-drag-item-move {
+  z-index: 2000;
+}
 .semi-transfer-right-empty {
   position: absolute;
   height: 100%;

package/lib/es/transfer/transfer.scss

@@ -165,9 +165,15 @@ $module: #{$prefix}-transfer;
                 word-break: break-all;
             }
 
-            &-drag-handler {
-                margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
-                flex-shrink: 0;
+            &-drag {
+                &-handler {
+                    margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
+                    flex-shrink: 0;
+                }
+
+                &-item-move {
+                    z-index: $z-transfer_right_item_drag_item_move;
+                }            
             }
         }
 

package/lib/es/transfer/variables.scss

@@ -53,3 +53,5 @@ $radius-transfer: var(--semi-border-radius-medium); // 穿梭框圆角
 
 // Font
 $font-transfer_header_all-fontWeight: 600; // 穿梭框字重
+
+$z-transfer_right_item_drag_item_move: 2000 !default; // 穿梭框右侧面板中正在拖拽元素的z-index

package/modal/modalFoundation.ts

@@ -11,8 +11,7 @@ export interface ModalAdapter extends DefaultAdapter<ModalProps, ModalState> {
     notifyClose: () => void;
     toggleDisplayNone: (displayNone: boolean, callback?: (displayNone: boolean) => void) => void;
     notifyFullScreen: (isFullScreen: boolean) => void;
-    getProps: () => ModalProps;
-    setShouldRender:(shouldRender:boolean)=>void
+    getProps: () => ModalProps
 }
 
 export interface ModalProps {
@@ -59,8 +58,7 @@ export interface ModalProps {
 
 export interface ModalState {
     displayNone: boolean;
-    isFullScreen: boolean;
-    shouldRender:boolean
+    isFullScreen: boolean
 }
 
 export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
@@ -101,9 +99,6 @@ export default class ModalFoundation extends BaseFoundation<ModalAdapter> {
         this._adapter.toggleDisplayNone(displayNone, callback);
     };
 
-    setShouldRender=(shouldRender)=>{
-        this._adapter.setShouldRender(shouldRender);
-    }
 
     // // eslint-disable-next-line max-len
     // mergeMotionProp = (motion: Motion, prop: string, cb: () => void) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.23.0",
+    "version": "2.23.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "a5195872c7df1a97551c6c23357bdb941b8fa807",
+    "gitHead": "b7fc3d0d2fe9dafb8e3ec4706b9a68212bb5f6bc",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/sideSheet/sideSheetFoundation.ts

@@ -32,8 +32,7 @@ export interface SideSheetProps {
 }
 
 export interface SideSheetState {
-    displayNone: boolean;
-    shouldRender: boolean
+    displayNone: boolean
 }
 
 export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
@@ -43,8 +42,7 @@ export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideShe
     notifyVisibleChange: (visible: boolean) => void;
     setOnKeyDownListener: () => void;
     removeKeyDownListener: () => void;
-    toggleDisplayNone: (displayNone: boolean) => void;
-    setShouldRender: (shouldRender: boolean) => void
+    toggleDisplayNone: (displayNone: boolean) => void
 }
 
 
@@ -91,9 +89,6 @@ export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter
         }
     }
 
-    setShouldRender(shouldRender: boolean) {
-        this._adapter.setShouldRender(shouldRender);
-    }
 
     onVisibleChange(visible: boolean) {
         this._adapter.notifyVisibleChange(visible);

package/switch/rtl.scss

@@ -20,7 +20,7 @@ $module: #{$prefix}-switch;
         &-knob {
             right: 0;
             left: auto;
-            transform: translateX(-$motion-switch_unchecked-translateX);
+            transform: translateX(-1 * $spacing-switch_unchecked-translateX);
         }
 
         &-native-control {

package/switch/switch.scss

@@ -94,14 +94,14 @@ $module: #{$prefix}-switch;
         background-color: $color-switch_knob-bg-default;
         box-sizing: border-box;
         position: absolute;
-        left: 0;
+        left: $spacing-switch_knob-left;
         right: auto;
         transition: transform $motion-switch-transitionDuration ease-in-out, width $motion-switch-transitionDuration ease-in-out;
 
         width: $width-switch_knob_default;
         height: $width-switch_knob_default;
         top: $spacing-switch_knob-padding;
-        transform: translateX($motion-switch_unchecked-translateX);
+        transform: translateX($spacing-switch_unchecked-translateX);
     }
 
     &-native-control {

package/switch/variables.scss

@@ -1,5 +1,5 @@
 // Other
-$motion-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量 - 动画用
+$spacing-switch_unchecked-translateX: 2px; // 未选中开关右侧偏移量
 $motion-switch_spin_unchecked-translateX: 2px; // 未选中开关加载图标右侧偏移量 - 动画用
 $motion-switch_checked-translateX: 18px; // 选中开关右侧偏移量
 $motion-switch_spin_checked-translateX: 16px; // 选中开关加载图标右侧偏移量
@@ -62,9 +62,10 @@ $width-switch-outline: 2px; // 开关轮廓宽度
 
 
 // Spacing
-$spacing-switch_knob-padding: 2px; // 开关按钮内边距
+$spacing-switch_knob-padding: 2px; // 开关按钮顶部边距
 $spacing-switch_knob_large-padding: 3px; // 大尺寸开关按钮内边距
 $spacing-switch_knob_small-padding: 1px; // 小尺寸开关按钮内边距
+$spacing-switch_knob-left: 0px; // 开关左侧偏移距离
 
 // Radius
 $radius-switch: $height-switch * 0.5; // 开关圆角

package/tagInput/tagInput.scss

@@ -20,6 +20,10 @@ $module: #{$prefix}-tagInput;
         &-item {
             display: flex;
             align-items: center;
+
+            &-move {
+                z-index: $z-tagInput_drag_item_move;
+            }
         }
 
         &-handler {
@@ -102,6 +106,18 @@ $module: #{$prefix}-tagInput;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
 
+        &-small {
+            min-height: $height-tagInput-small;
+        }
+
+        &-default {
+            min-height: $height-tagInput-default;
+        }
+
+        &-large {
+            min-height: $height-tagInput-large;
+        }
+
         &-tag {
             margin-right: $spacing-extra-tight;
             white-space: pre;
@@ -166,6 +182,42 @@ $module: #{$prefix}-tagInput;
             &:not(:first-child) > input {
                 padding-left: 0;
             }
+
+            &-small {
+                height: $height-tagInput_input_small;
+                margin-top: $spacing-tagInput_small-Y;
+                margin-bottom: $spacing-tagInput_small-Y;
+                line-height: $height-tagInput_input_small;
+
+                & .#{$prefix}-input-small {
+                    height: $height-tagInput_input_small;
+                    line-height: $height-tagInput_input_small;
+                }
+            }
+
+            &-default {
+                height: $height-tagInput_input_default;
+                margin-top: $spacing-tagInput_default-Y;
+                margin-bottom: $spacing-tagInput_default-Y;
+                line-height: $height-tagInput_input_default;
+
+                & .#{$prefix}-input-default {
+                    height: $height-tagInput_input_default;
+                    line-height: $height-tagInput_input_default;
+                }
+            }
+
+            &-large {
+                height: $height-tagInput_input_large;
+                margin-top: $spacing-tagInput_large-Y;
+                margin-bottom: $spacing-tagInput_large-Y;
+                line-height: $height-tagInput_input_large;
+
+                & .#{$prefix}-input-large {
+                    height: $height-tagInput_input_large;
+                    line-height: $height-tagInput_input_large;
+                }
+            }
         }
     }
 

package/tagInput/variables.scss

@@ -40,6 +40,9 @@ $spacing-tagInput_tag_icon_paddingLeft: 4px; // tag中有handler icon时tag的
 $height-tagInput-large: $height-control-large; // 大尺寸标签输入框高度
 $height-tagInput-default: $height-control-default; // 默认尺寸标签输入框高度
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
+$height-tagInput_input_small: 20px; // 小尺寸标签输入框Input框高度
+$height-tagInput_input_default: 24px; // 默认尺寸标签输入框Input框高度
+$height-tagInput_input_large: 24px; // 大尺寸标签输入框Input框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
@@ -47,3 +50,5 @@ $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框
 $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
+
+$z-tagInput_drag_item_move: 2000 !default; // 标签输入框中正在拖拽元素的z-index

package/transfer/transfer.scss

@@ -165,9 +165,15 @@ $module: #{$prefix}-transfer;
                 word-break: break-all;
             }
 
-            &-drag-handler {
-                margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
-                flex-shrink: 0;
+            &-drag {
+                &-handler {
+                    margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
+                    flex-shrink: 0;
+                }
+
+                &-item-move {
+                    z-index: $z-transfer_right_item_drag_item_move;
+                }            
             }
         }
 

package/transfer/variables.scss

@@ -53,3 +53,5 @@ $radius-transfer: var(--semi-border-radius-medium); // 穿梭框圆角
 
 // Font
 $font-transfer_header_all-fontWeight: 600; // 穿梭框字重
+
+$z-transfer_right_item_drag_item_move: 2000 !default; // 穿梭框右侧面板中正在拖拽元素的z-index