@douyinfe/semi-foundation 2.24.3 → 2.25.0

package/lib/es/sideSheet/sideSheet.scss

@@ -224,42 +224,52 @@ $module: #{$prefix}-sidesheet;
 
     &-animation-content_show_top{
         animation: #{$module}-slideShow_top $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_top{
         animation: #{$module}-slideHide_top $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_bottom{
         animation: #{$module}-slideShow_bottom $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_bottom{
         animation: #{$module}-slideHide_bottom $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_left{
         animation: #{$module}-slideShow_left $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_left{
         animation: #{$module}-slideHide_left $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_right{
         animation: #{$module}-slideShow_right $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_right{
         animation: #{$module}-slideHide_right $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_show{
         animation: #{$module}-opacityShow $animation_duration-sideSheet_mask-show $animation_function-sideSheet_mask-show $animation_delay-sideSheet_mask-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_hide{
         animation: #{$module}-opacityHide $animation_duration-sideSheet_mask-hide $animation_function-sideSheet_mask-hide $animation_delay-sideSheet_mask-hide;
+        animation-fill-mode: forwards;
     }
 
 }

package/lib/es/skeleton/skeleton.css

@@ -71,6 +71,7 @@
   background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
   background-size: 400% 100%;
   animation: 1400ms skeleton-loading ease infinite;
+  animation-fill-mode: forwards;
 }
 @keyframes skeleton-loading {
   0% {

package/lib/es/skeleton/skeleton.scss

@@ -99,6 +99,7 @@ $module: #{$prefix}-skeleton;
             );
             background-size: 400% 100%;
             animation: $animation_duration-skeleton-highlight skeleton-loading $animation_function-skeleton-highlight infinite;
+            animation-fill-mode: forwards;
         }
     }
 

package/lib/es/spin/spin.css

@@ -25,12 +25,14 @@
 }
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
   width: 20px;
   height: 20px;
 }
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-spin-children {
   opacity: 0.5;

package/lib/es/spin/spin.scss

@@ -28,6 +28,7 @@ $module: #{$prefix}-spin;
 
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
+            animation-fill-mode: forwards;
             @include size($width-spin_middle);
         }
     }
@@ -35,6 +36,7 @@ $module: #{$prefix}-spin;
     &-animate {
         display: inline-flex;
         animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
+        animation-fill-mode: forwards;
     }
 
     &-children {

package/lib/es/switch/switch.css

@@ -56,6 +56,10 @@
   box-shadow: none;
   border: 1px var(--semi-color-border) solid;
 }
+.semi-switch-disabled .semi-switch-native-control {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 .semi-switch-disabled.semi-switch-checked {
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);

package/lib/es/switch/switch.scss

@@ -76,6 +76,11 @@ $module: #{$prefix}-switch;
             @include shadow-0;
             border: $width-switch_knob_disabled-border $color-switch_knob-border-default solid;
         }
+        
+        .#{$module}-native-control {
+            pointer-events: none;
+            cursor: not-allowed;
+        }
 
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;

package/lib/es/table/constants.d.ts

@@ -73,6 +73,5 @@ declare const numbers: {
     readonly DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT: number;
-    readonly DEFAULT_EMPTYSLOT_HEIGHT: 52;
 };
 export { cssClasses, strings, numbers };

package/lib/es/table/constants.js

@@ -56,8 +56,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
 const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
-const DEFAULT_CELL_LINE_HEIGHT = 20;
-const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
+const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
 
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
 const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle  size
@@ -93,7 +92,6 @@ const numbers = {
   DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
   DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
   DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
-  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
-  DEFAULT_EMPTYSLOT_HEIGHT
+  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
 };
 export { cssClasses, strings, numbers };

package/lib/es/tabs/tabs.css

@@ -398,15 +398,19 @@
 }
 .semi-tabs-pane-animate-leftShow {
   animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-rightShow {
   animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-topShow {
   animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-bottomShow {
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 
 .semi-rtl .semi-tabs,

package/lib/es/tabs/tabs.scss

@@ -542,16 +542,20 @@ $module: #{$prefix}-tabs;
 
     &-pane-animate-leftShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-rightShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 
     &-pane-animate-topShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-bottomShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 }
 

package/lib/es/tag/tag.css

@@ -3,7 +3,6 @@
 /* spacing */
 .semi-tag {
   box-sizing: border-box;
-  display: inline-block;
   border-radius: var(--semi-border-radius-small);
   background-color: transparent;
   position: relative;
@@ -11,6 +10,10 @@
   overflow: hidden;
   white-space: nowrap;
   vertical-align: bottom;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
 }
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;
@@ -42,11 +45,10 @@
   display: none;
 }
 .semi-tag-content {
-  display: flex;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .semi-tag-close {
   display: flex;
@@ -56,6 +58,12 @@
   padding-left: 4px;
   cursor: pointer;
 }
+.semi-tag-close :hover {
+  color: var(--semi-color-text-1);
+}
+.semi-tag-close :active {
+  color: var(--semi-color-text-0);
+}
 .semi-tag-closable {
   padding: 4px 4px 4px 8px;
 }

package/lib/es/tag/tag.scss

@@ -10,7 +10,6 @@ $types: "ghost", "solid", "light";
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-block;
     border-radius: $radius-tag;
     background-color: transparent;
     position: relative;
@@ -19,6 +18,8 @@ $types: "ghost", "solid", "light";
     overflow: hidden;
     white-space: nowrap;
     vertical-align: bottom;
+    @include all-center;
+    display: inline-flex;
 
     &-default,
     &-small {
@@ -51,9 +52,10 @@ $types: "ghost", "solid", "light";
     }
 
     &-content {
-        display: flex;
-        @include all-center;
-        height: 100%;
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
     }
 
     &-close {
@@ -61,6 +63,14 @@ $types: "ghost", "solid", "light";
         color: $color-tag_close-icon-default;
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
+
+        :hover {
+            color: $color-tag_close-icon-hover
+        }
+
+        :active {
+            color: $color-tag_close-icon-active
+        }
     }
 
     &-closable {

package/lib/es/tag/variables.scss

@@ -29,6 +29,8 @@ $spacing-tag_large-paddingY: 4px; // 大尺寸标签垂直方向内边距
 $spacing-tag_large-paddingX: $spacing-tight; // 大尺寸标签水平方向内边距
 
 $color-tag_close-icon-default: var(--semi-color-text-2); // 可删除的标签删除按钮颜色
+$color-tag_close-icon-hover: var(--semi-color-text-1); // 可删除的标签删除按钮颜色 - 悬浮
+$color-tag_close-icon-active: var(--semi-color-text-0); // 可删除的标签删除按钮颜色 - 按下
 $color-tag_close-icon_deep-default: var(--semi-color-white); // 深色模式下可删除的标签删除按钮颜色
 $spacing-tag_close-paddingLeft: $spacing-extra-tight; // 可删除的标签删除按钮左侧内边距
 $spacing-tag_closable-paddingTop: $spacing-extra-tight; // 可删除的标签删除按钮顶部内边距

package/lib/es/tagInput/tagInput.css

@@ -8,9 +8,16 @@
   display: inline-flex;
   font-weight: 400;
   width: 100%;
+  min-height: 32px;
   box-sizing: border-box;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
+.semi-tagInput-small {
+  min-height: 24px;
+}
+.semi-tagInput-large {
+  min-height: 40px;
+}
 .semi-tagInput-drag-item {
   display: flex;
   align-items: center;
@@ -85,15 +92,6 @@
   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;

package/lib/es/tagInput/tagInput.scss

@@ -11,10 +11,19 @@ $module: #{$prefix}-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
     width: 100%;
+    min-height: $height-tagInput-default;
     box-sizing: border-box;
     transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
         border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
 
+    &-small {
+        min-height: $height-tagInput-small;
+    }
+
+    &-large {
+        min-height: $height-tagInput-large;
+    }
+
     &-drag {
 
         &-item {
@@ -106,18 +115,6 @@ $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;

package/lib/es/toast/toast.css

@@ -67,9 +67,11 @@
 }
 .semi-toast-animation-show {
   animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 .semi-toast-animation-hide {
   animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s;
+  animation-fill-mode: forwards;
 }
 @keyframes semi-toast-keyframe-toast-show {
   0% {

package/lib/es/toast/toast.scss

@@ -90,10 +90,12 @@ $icon: #{$prefix}-toast-icon;
 
     &-animation-show{
         animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
+        animation-fill-mode: forwards;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

package/lib/es/tooltip/tooltip.css

@@ -71,9 +71,11 @@
 }
 .semi-tooltip-animation-show {
   animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-tooltip-animation-hide {
   animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-tooltip-wrapper .semi-tooltip-icon-arrow {

package/lib/es/tooltip/tooltip.scss

@@ -91,10 +91,12 @@ $module-icon: #{$module}-icon-arrow;
 
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-tooltip_in $animation_function-tooltip_in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-tooltip_out $animation_function-tooltip_out;
+        animation-fill-mode: forwards;
     }
 
 }

package/modal/modal.scss

@@ -209,18 +209,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

package/notification/notification.scss

@@ -299,53 +299,65 @@ $module: #{$prefix}-notification;
             }
         }
 
-  
+
 
         &-animation-show_top{
             animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_top{
             animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topLeft{
             animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topLeft{
             animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topRight{
             animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topRight{
             animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottom{
             animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottom{
             animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottomLeft{
             animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomLeft{
             animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
         &-animation-show_bottomRight{
             animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomRight{
             animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.24.3",
+    "version": "2.25.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "989e106471d68c7eaf1b26abb64bbc1a5f383f9a",
+    "gitHead": "3c2ec566acd956095fc502690245c9a502251357",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/popover/popover.scss

@@ -79,10 +79,12 @@ $module-icon: #{$module}-icon-arrow;
     }
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+        animation-fill-mode: forwards;
     }
 }
 

package/sideSheet/sideSheet.scss

@@ -224,42 +224,52 @@ $module: #{$prefix}-sidesheet;
 
     &-animation-content_show_top{
         animation: #{$module}-slideShow_top $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_top{
         animation: #{$module}-slideHide_top $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_bottom{
         animation: #{$module}-slideShow_bottom $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_bottom{
         animation: #{$module}-slideHide_bottom $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_left{
         animation: #{$module}-slideShow_left $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_left{
         animation: #{$module}-slideHide_left $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_right{
         animation: #{$module}-slideShow_right $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_right{
         animation: #{$module}-slideHide_right $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_show{
         animation: #{$module}-opacityShow $animation_duration-sideSheet_mask-show $animation_function-sideSheet_mask-show $animation_delay-sideSheet_mask-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_hide{
         animation: #{$module}-opacityHide $animation_duration-sideSheet_mask-hide $animation_function-sideSheet_mask-hide $animation_delay-sideSheet_mask-hide;
+        animation-fill-mode: forwards;
     }
 
 }

package/skeleton/skeleton.scss

@@ -99,6 +99,7 @@ $module: #{$prefix}-skeleton;
             );
             background-size: 400% 100%;
             animation: $animation_duration-skeleton-highlight skeleton-loading $animation_function-skeleton-highlight infinite;
+            animation-fill-mode: forwards;
         }
     }
 

package/spin/spin.scss

@@ -28,6 +28,7 @@ $module: #{$prefix}-spin;
 
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
+            animation-fill-mode: forwards;
             @include size($width-spin_middle);
         }
     }
@@ -35,6 +36,7 @@ $module: #{$prefix}-spin;
     &-animate {
         display: inline-flex;
         animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
+        animation-fill-mode: forwards;
     }
 
     &-children {

package/switch/switch.scss

@@ -76,6 +76,11 @@ $module: #{$prefix}-switch;
             @include shadow-0;
             border: $width-switch_knob_disabled-border $color-switch_knob-border-default solid;
         }
+        
+        .#{$module}-native-control {
+            pointer-events: none;
+            cursor: not-allowed;
+        }
 
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;

package/table/constants.ts

@@ -60,7 +60,6 @@ const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
 const DEFAULT_CELL_LINE_HEIGHT = 20;
-const DEFAULT_EMPTYSLOT_HEIGHT = 52;
 
 // normal size
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT =
@@ -119,7 +118,6 @@ const numbers = {
     DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
     DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
-    DEFAULT_EMPTYSLOT_HEIGHT
 } as const;
 
 export { cssClasses, strings, numbers };