@douyinfe/semi-foundation 2.32.1 → 2.32.2

package/datePicker/foundation.ts

@@ -546,7 +546,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this._updateValueAndInput(result, input === '', input);
             // Updates the selected value when entering a valid date
             const changedDates = this._getChangedDates(result);
-            if (!this._someDateDisabled(changedDates)) {
+            if (!this._someDateDisabled(changedDates, result)) {
                 if (!isEqual(result, stateValue)) {
                     this._notifyChange(result);
                 }
@@ -571,7 +571,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         if ((result && result.length)) {
             const changedDates = this._getChangedDates(result);
-            if (!this._someDateDisabled(changedDates)) {
+            if (!this._someDateDisabled(changedDates, result)) {
                 if (!isEqual(result, stateValue)) {
                     if (!this._isControlledComponent() && !this._adapter.needConfirm()) {
                         this._adapter.updateValue(result);
@@ -591,7 +591,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _updateCachedSelectedValueFromInput(input: string) {
         const looseResult = this.getLooseDateFromInput(input);
         const changedLooseResult = this._getChangedDates(looseResult);
-        if (!this._someDateDisabled(changedLooseResult)) {
+        if (!this._someDateDisabled(changedLooseResult, looseResult)) {
             this.resetCachedSelectedValue(looseResult);
         }
     }
@@ -683,7 +683,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._updateValueAndInput(parsedResult);
         const { value: stateValue } = this.getStates();
         const changedDates = this._getChangedDates(parsedResult);
-        if (!this._someDateDisabled(changedDates) && !isEqual(parsedResult, stateValue)) {
+        if (!this._someDateDisabled(changedDates, parsedResult) && !isEqual(parsedResult, stateValue)) {
             this._notifyChange(parsedResult);
         }
     }
@@ -983,7 +983,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
             const changedDates = this._getChangedDates(_value);
             // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
-            if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+            if (!this._isControlledComponent() && !this._someDateDisabled(changedDates, _value) && !this._adapter.needConfirm()) {
                 this._adapter.updateValue(_value);
             }
         }
@@ -1012,7 +1012,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const changedDates = this._getChangedDates(dates);
 
         let inputValue, insetInputValue;
-        if (!this._someDateDisabled(changedDates)) {
+        if (!this._someDateDisabled(changedDates, dates)) {
             this.resetCachedSelectedValue(dates);
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
             if (insetInput) {
@@ -1252,22 +1252,22 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
     /**
      * Whether a date is disabled
-     * @param {Array} value
+     * @param value The date that needs to be judged whether to disable
+     * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
      */
-    _someDateDisabled(value: Date[]) {
-        const stateValue = this.getState('value');
+    _someDateDisabled(value: Date[], selectedValue: Date[]) {
         const { rangeInputFocus } = this.getStates();
         const disabledOptions = { rangeStart: '', rangeEnd: '', rangeInputFocus };
 
         // DisabledDate needs to pass the second parameter
-        if (this._isRangeType() && Array.isArray(stateValue)) {
-            if (isValid(stateValue[0])) {
-                const rangeStart = format(stateValue[0], 'yyyy-MM-dd');
+        if (this._isRangeType() && Array.isArray(selectedValue)) {
+            if (isValid(selectedValue[0])) {
+                const rangeStart = format(selectedValue[0], 'yyyy-MM-dd');
                 disabledOptions.rangeStart = rangeStart;
             }
 
-            if (isValid(stateValue[1])) {
-                const rangeEnd = format(stateValue[1], 'yyyy-MM-dd');
+            if (isValid(selectedValue[1])) {
+                const rangeEnd = format(selectedValue[1], 'yyyy-MM-dd');
                 disabledOptions.rangeEnd = rangeEnd;
             }
         }

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

@@ -475,9 +475,10 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _getChangedDates(dates: Date[]): any[];
     /**
      * Whether a date is disabled
-     * @param {Array} value
+     * @param value The date that needs to be judged whether to disable
+     * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
      */
-    _someDateDisabled(value: Date[]): boolean;
+    _someDateDisabled(value: Date[], selectedValue: Date[]): boolean;
     /**
      * Format locale date
      * locale get from LocaleProvider

package/lib/cjs/datePicker/foundation.js

@@ -476,7 +476,7 @@ class DatePickerFoundation extends _foundation.default {
 
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!(0, _isEqual2.default)(result, stateValue)) {
           this._notifyChange(result);
         }
@@ -512,7 +512,7 @@ class DatePickerFoundation extends _foundation.default {
     if (result && result.length) {
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!(0, _isEqual2.default)(result, stateValue)) {
           if (!this._isControlledComponent() && !this._adapter.needConfirm()) {
             this._adapter.updateValue(result);
@@ -539,7 +539,7 @@ class DatePickerFoundation extends _foundation.default {
 
     const changedLooseResult = this._getChangedDates(looseResult);
 
-    if (!this._someDateDisabled(changedLooseResult)) {
+    if (!this._someDateDisabled(changedLooseResult, looseResult)) {
       this.resetCachedSelectedValue(looseResult);
     }
   }
@@ -644,7 +644,7 @@ class DatePickerFoundation extends _foundation.default {
 
     const changedDates = this._getChangedDates(parsedResult);
 
-    if (!this._someDateDisabled(changedDates) && !(0, _isEqual2.default)(parsedResult, stateValue)) {
+    if (!this._someDateDisabled(changedDates, parsedResult) && !(0, _isEqual2.default)(parsedResult, stateValue)) {
       this._notifyChange(parsedResult);
     }
   }
@@ -998,7 +998,7 @@ class DatePickerFoundation extends _foundation.default {
       const changedDates = this._getChangedDates(_value); // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
 
 
-      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates, _value) && !this._adapter.needConfirm()) {
         this._adapter.updateValue(_value);
       }
     }
@@ -1041,7 +1041,7 @@ class DatePickerFoundation extends _foundation.default {
 
     let inputValue, insetInputValue;
 
-    if (!this._someDateDisabled(changedDates)) {
+    if (!this._someDateDisabled(changedDates, dates)) {
       this.resetCachedSelectedValue(dates);
       inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
 
@@ -1348,12 +1348,12 @@ class DatePickerFoundation extends _foundation.default {
   }
   /**
    * Whether a date is disabled
-   * @param {Array} value
+   * @param value The date that needs to be judged whether to disable
+   * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
    */
 
 
-  _someDateDisabled(value) {
-    const stateValue = this.getState('value');
+  _someDateDisabled(value, selectedValue) {
     const {
       rangeInputFocus
     } = this.getStates();
@@ -1363,14 +1363,14 @@ class DatePickerFoundation extends _foundation.default {
       rangeInputFocus
     }; // DisabledDate needs to pass the second parameter
 
-    if (this._isRangeType() && Array.isArray(stateValue)) {
-      if ((0, _dateFns.isValid)(stateValue[0])) {
-        const rangeStart = (0, _dateFns.format)(stateValue[0], 'yyyy-MM-dd');
+    if (this._isRangeType() && Array.isArray(selectedValue)) {
+      if ((0, _dateFns.isValid)(selectedValue[0])) {
+        const rangeStart = (0, _dateFns.format)(selectedValue[0], 'yyyy-MM-dd');
         disabledOptions.rangeStart = rangeStart;
       }
 
-      if ((0, _dateFns.isValid)(stateValue[1])) {
-        const rangeEnd = (0, _dateFns.format)(stateValue[1], 'yyyy-MM-dd');
+      if ((0, _dateFns.isValid)(selectedValue[1])) {
+        const rangeEnd = (0, _dateFns.format)(selectedValue[1], 'yyyy-MM-dd');
         disabledOptions.rangeEnd = rangeEnd;
       }
     }

package/lib/cjs/popconfirm/popconfirm.css

@@ -11,17 +11,9 @@
   padding: 24px 24px 24px 20px;
   position: relative;
 }
-.semi-popconfirm-inner .semi-popconfirm-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin-top: 24px;
-  margin-right: 24px;
-}
 .semi-popconfirm-header {
   display: flex;
   justify-content: flex-start;
-  margin-right: 68px;
 }
 .semi-popconfirm-header-title {
   font-size: 16px;
@@ -41,6 +33,7 @@
 }
 .semi-popconfirm-header-body {
   display: inline-flex;
+  flex-grow: 1;
   flex-direction: column;
 }
 .semi-popconfirm-body {
@@ -66,10 +59,6 @@
 .semi-popover-with-arrow .semi-popconfirm-inner {
   padding: 12px 12px 12px 8px;
 }
-.semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-top: 12px;
-  margin-right: 12px;
-}
 
 .semi-popconfirm-rtl {
   direction: rtl;
@@ -77,15 +66,8 @@
 .semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 24px 20px 24px 24px;
 }
-.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  right: auto;
-  left: 0;
-  margin-right: 0;
-  margin-left: 24px;
-}
 .semi-popconfirm-rtl .semi-popconfirm-header {
   margin-right: 0;
-  margin-left: 68px;
 }
 .semi-popconfirm-rtl .semi-popconfirm-header-icon {
   margin-right: 0;
@@ -104,8 +86,4 @@
 }
 .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 12px 8px 12px 12px;
-}
-.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-right: 0;
-  margin-left: 12px;
 }

package/lib/cjs/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,6 +40,7 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
@@ -84,11 +76,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

package/lib/cjs/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

package/lib/cjs/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font

package/lib/cjs/sideSheet/sideSheet.css

@@ -92,6 +92,15 @@
 .semi-sidesheet-size-large {
   width: 920px;
 }
+.semi-sidesheet-size-small.semi-sidesheet {
+  width: 448px;
+}
+.semi-sidesheet-size-medium.semi-sidesheet {
+  width: 684px;
+}
+.semi-sidesheet-size-large.semi-sidesheet {
+  width: 920px;
+}
 .semi-sidesheet-content {
   height: 100%;
   display: flex;

package/lib/cjs/sideSheet/sideSheet.scss

@@ -116,6 +116,18 @@ $module: #{$prefix}-sidesheet;
         width: $width-sideSheet_size-large;
     }
 
+    &-size-small.#{$module} {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium.#{$module} {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large.#{$module} {
+        width: $width-sideSheet_size-large;
+    }
+
 
 
     &-content {

package/lib/cjs/typography/typography.css

@@ -109,7 +109,7 @@
 }
 .semi-typography-action-copy {
   display: inline-flex;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   padding: 0;
   margin-left: 4px;
 }
@@ -123,7 +123,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-typography-action-copied .semi-icon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
   color: var(--semi-color-success);
 }
 .semi-typography-paragraph {

package/lib/cjs/typography/typography.scss

@@ -140,7 +140,7 @@ $module: #{$prefix}-typography;
 
     &-action-copy {
         display: inline-flex;
-        vertical-align: text-bottom;
+        vertical-align: middle;
         padding: $spacing-typography_copyIcon-padding;
         margin-left: $spacing-typography_copyIcon-marginLeft;
     }
@@ -156,7 +156,7 @@ $module: #{$prefix}-typography;
         color: $color-typography_copied-text-success;
 
         .#{$prefix}-icon {
-            vertical-align: text-bottom;
+            vertical-align: middle;
             color: $color-typography_copied-icon-success;
         }
     }

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

@@ -475,9 +475,10 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _getChangedDates(dates: Date[]): any[];
     /**
      * Whether a date is disabled
-     * @param {Array} value
+     * @param value The date that needs to be judged whether to disable
+     * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
      */
-    _someDateDisabled(value: Date[]): boolean;
+    _someDateDisabled(value: Date[], selectedValue: Date[]): boolean;
     /**
      * Format locale date
      * locale get from LocaleProvider

package/lib/es/datePicker/foundation.js

@@ -451,7 +451,7 @@ export default class DatePickerFoundation extends BaseFoundation {
 
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!_isEqual(result, stateValue)) {
           this._notifyChange(result);
         }
@@ -487,7 +487,7 @@ export default class DatePickerFoundation extends BaseFoundation {
     if (result && result.length) {
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!_isEqual(result, stateValue)) {
           if (!this._isControlledComponent() && !this._adapter.needConfirm()) {
             this._adapter.updateValue(result);
@@ -514,7 +514,7 @@ export default class DatePickerFoundation extends BaseFoundation {
 
     const changedLooseResult = this._getChangedDates(looseResult);
 
-    if (!this._someDateDisabled(changedLooseResult)) {
+    if (!this._someDateDisabled(changedLooseResult, looseResult)) {
       this.resetCachedSelectedValue(looseResult);
     }
   }
@@ -619,7 +619,7 @@ export default class DatePickerFoundation extends BaseFoundation {
 
     const changedDates = this._getChangedDates(parsedResult);
 
-    if (!this._someDateDisabled(changedDates) && !_isEqual(parsedResult, stateValue)) {
+    if (!this._someDateDisabled(changedDates, parsedResult) && !_isEqual(parsedResult, stateValue)) {
       this._notifyChange(parsedResult);
     }
   }
@@ -973,7 +973,7 @@ export default class DatePickerFoundation extends BaseFoundation {
       const changedDates = this._getChangedDates(_value); // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
 
 
-      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates, _value) && !this._adapter.needConfirm()) {
         this._adapter.updateValue(_value);
       }
     }
@@ -1019,7 +1019,7 @@ export default class DatePickerFoundation extends BaseFoundation {
 
     let inputValue, insetInputValue;
 
-    if (!this._someDateDisabled(changedDates)) {
+    if (!this._someDateDisabled(changedDates, dates)) {
       this.resetCachedSelectedValue(dates);
       inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
 
@@ -1326,12 +1326,12 @@ export default class DatePickerFoundation extends BaseFoundation {
   }
   /**
    * Whether a date is disabled
-   * @param {Array} value
+   * @param value The date that needs to be judged whether to disable
+   * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
    */
 
 
-  _someDateDisabled(value) {
-    const stateValue = this.getState('value');
+  _someDateDisabled(value, selectedValue) {
     const {
       rangeInputFocus
     } = this.getStates();
@@ -1341,14 +1341,14 @@ export default class DatePickerFoundation extends BaseFoundation {
       rangeInputFocus
     }; // DisabledDate needs to pass the second parameter
 
-    if (this._isRangeType() && Array.isArray(stateValue)) {
-      if (isValid(stateValue[0])) {
-        const rangeStart = format(stateValue[0], 'yyyy-MM-dd');
+    if (this._isRangeType() && Array.isArray(selectedValue)) {
+      if (isValid(selectedValue[0])) {
+        const rangeStart = format(selectedValue[0], 'yyyy-MM-dd');
         disabledOptions.rangeStart = rangeStart;
       }
 
-      if (isValid(stateValue[1])) {
-        const rangeEnd = format(stateValue[1], 'yyyy-MM-dd');
+      if (isValid(selectedValue[1])) {
+        const rangeEnd = format(selectedValue[1], 'yyyy-MM-dd');
         disabledOptions.rangeEnd = rangeEnd;
       }
     }

package/lib/es/popconfirm/popconfirm.css

@@ -11,17 +11,9 @@
   padding: 24px 24px 24px 20px;
   position: relative;
 }
-.semi-popconfirm-inner .semi-popconfirm-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin-top: 24px;
-  margin-right: 24px;
-}
 .semi-popconfirm-header {
   display: flex;
   justify-content: flex-start;
-  margin-right: 68px;
 }
 .semi-popconfirm-header-title {
   font-size: 16px;
@@ -41,6 +33,7 @@
 }
 .semi-popconfirm-header-body {
   display: inline-flex;
+  flex-grow: 1;
   flex-direction: column;
 }
 .semi-popconfirm-body {
@@ -66,10 +59,6 @@
 .semi-popover-with-arrow .semi-popconfirm-inner {
   padding: 12px 12px 12px 8px;
 }
-.semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-top: 12px;
-  margin-right: 12px;
-}
 
 .semi-popconfirm-rtl {
   direction: rtl;
@@ -77,15 +66,8 @@
 .semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 24px 20px 24px 24px;
 }
-.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  right: auto;
-  left: 0;
-  margin-right: 0;
-  margin-left: 24px;
-}
 .semi-popconfirm-rtl .semi-popconfirm-header {
   margin-right: 0;
-  margin-left: 68px;
 }
 .semi-popconfirm-rtl .semi-popconfirm-header-icon {
   margin-right: 0;
@@ -104,8 +86,4 @@
 }
 .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 12px 8px 12px 12px;
-}
-.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-right: 0;
-  margin-left: 12px;
 }

package/lib/es/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,6 +40,7 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
@@ -84,11 +76,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

package/lib/es/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

package/lib/es/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font

package/lib/es/sideSheet/sideSheet.css

@@ -92,6 +92,15 @@
 .semi-sidesheet-size-large {
   width: 920px;
 }
+.semi-sidesheet-size-small.semi-sidesheet {
+  width: 448px;
+}
+.semi-sidesheet-size-medium.semi-sidesheet {
+  width: 684px;
+}
+.semi-sidesheet-size-large.semi-sidesheet {
+  width: 920px;
+}
 .semi-sidesheet-content {
   height: 100%;
   display: flex;

package/lib/es/sideSheet/sideSheet.scss

@@ -116,6 +116,18 @@ $module: #{$prefix}-sidesheet;
         width: $width-sideSheet_size-large;
     }
 
+    &-size-small.#{$module} {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium.#{$module} {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large.#{$module} {
+        width: $width-sideSheet_size-large;
+    }
+
 
 
     &-content {

package/lib/es/typography/typography.css

@@ -109,7 +109,7 @@
 }
 .semi-typography-action-copy {
   display: inline-flex;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   padding: 0;
   margin-left: 4px;
 }
@@ -123,7 +123,7 @@
   color: var(--semi-color-text-2);
 }
 .semi-typography-action-copied .semi-icon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
   color: var(--semi-color-success);
 }
 .semi-typography-paragraph {

package/lib/es/typography/typography.scss

@@ -140,7 +140,7 @@ $module: #{$prefix}-typography;
 
     &-action-copy {
         display: inline-flex;
-        vertical-align: text-bottom;
+        vertical-align: middle;
         padding: $spacing-typography_copyIcon-padding;
         margin-left: $spacing-typography_copyIcon-marginLeft;
     }
@@ -156,7 +156,7 @@ $module: #{$prefix}-typography;
         color: $color-typography_copied-text-success;
 
         .#{$prefix}-icon {
-            vertical-align: text-bottom;
+            vertical-align: middle;
             color: $color-typography_copied-icon-success;
         }
     }

package/package.json

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

package/popconfirm/popconfirm.scss

@@ -12,20 +12,11 @@ $module: #{$prefix}-popconfirm;
         flex-direction: column;
         padding: $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-top $spacing-popconfirm-bottom;
         position: relative;
-
-        .#{$module}-btn-close {
-            position: absolute;
-            right: $spacing-popconfirm_inner_close_btn-right;
-            top: $spacing-popconfirm_inner_close_btn-top;
-            margin-top: $spacing-popconfirm_btn_close-margin;
-            margin-right: $spacing-popconfirm_btn_close-margin;
-        }
     }
 
     &-header {
         display: flex;
         justify-content: flex-start;
-        margin-right: $spacing-popconfirm_header-marginRight;
 
         &-title {
             @include font-size-header-6;
@@ -49,6 +40,7 @@ $module: #{$prefix}-popconfirm;
 
         &-body {
             display: inline-flex;
+            flex-grow: 1;
             flex-direction: column;
         }
     }
@@ -84,11 +76,6 @@ $module: #{$prefix}-popconfirm;
 .#{$prefix}-popover-with-arrow {
     .#{$module}-inner {
         padding: $spacing-popconfirm_popover_with_arrow_inner-padding;
-
-        .#{$module}-btn-close {
-            margin-top: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop;
-            margin-right: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-        }
     }
 }
 

package/popconfirm/rtl.scss

@@ -9,20 +9,12 @@ $module: #{$prefix}-popconfirm;
     &-inner {
         .#{$module}-rtl & {
             padding: $spacing-popconfirm-top $spacing-popconfirm-bottom $spacing-popconfirm-top $spacing-popconfirm-top;
-    
-            .#{$module}-btn-close {
-                right: auto;
-                left: 0;
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_btn_close-margin;
-            }
         }
     }
 
     &-header {
         .#{$module}-rtl & {
             margin-right: 0;
-            margin-left: $spacing-popconfirm_header-marginRight;
     
             &-icon {
                 margin-right: 0;
@@ -49,11 +41,6 @@ $module: #{$prefix}-popconfirm;
         
         .#{$module}-inner {
             padding: $spacing-popconfirm_popover_with_arrow_inner_rtl-padding;
-    
-            .#{$module}-btn-close {
-                margin-right: 0;
-                margin-left: $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight;
-            }
         }
     }
 

package/popconfirm/variables.scss

@@ -13,9 +13,6 @@ $spacing-popconfirm-top: 24px; // 顶部内边距
 $spacing-popconfirm-bottom: 20px; // 底部内边距
 $spacing-popconfirm_btn_close-margin: 24px; // 关闭按钮顶部 & 右侧外边距
 $spacing-popconfirm_with_arrow-padding: 12px; // 顶部内边距
-$spacing-popconfirm_inner_close_btn-top: 0; // 关闭按钮距顶部距离
-$spacing-popconfirm_inner_close_btn-right: 0; // 关闭按钮距右侧距离
-$spacing-popconfirm_header-marginRight: $spacing-popconfirm_btn_close-margin + $width-popconfirm_close_btn + 20px; // header 右侧外边距
 $spacing-popconfirm_header_title-marginBottom: 8px; // header 标题底部外边距
 $spacing-popconfirm_header_content_p-padding: 0; // header 正文内边距
 $spacing-popconfirm_header_content_p-margin: 0; // header 正文外边距
@@ -26,7 +23,6 @@ $spacing-popconfirm_footer_btn-marginRight: 8px; // footer 按钮右侧外边距
 $spacing-popconfirm_popover_with_arrow_inner-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距
 $spacing-popconfirm_popover_with_arrow_inner_rtl-padding: ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-bottom - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding) ($spacing-popconfirm-top - $spacing-popconfirm_with_arrow-padding); // 带三角形箭头时的内边距(rtl)
 $spacing-popconfirm_popover_with_arrow_inner_btn_close-marginTop: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的顶部外边距
-$spacing-popconfirm_popover_with_arrow_inner_btn_close-marginRight: $spacing-popconfirm_btn_close-margin - $spacing-popconfirm_with_arrow-padding; // 带三角形箭头时关闭按钮的右侧外边距
 $spacing-popconfirm_header_icon-marginRight: 12px; // header 图标的右侧外边距
 
 // Font

package/sideSheet/sideSheet.scss

@@ -116,6 +116,18 @@ $module: #{$prefix}-sidesheet;
         width: $width-sideSheet_size-large;
     }
 
+    &-size-small.#{$module} {
+        width: $width-sideSheet_size-small;
+    }
+
+    &-size-medium.#{$module} {
+        width: $width-sideSheet_size-medium;
+    }
+
+    &-size-large.#{$module} {
+        width: $width-sideSheet_size-large;
+    }
+
 
 
     &-content {

package/typography/typography.scss

@@ -140,7 +140,7 @@ $module: #{$prefix}-typography;
 
     &-action-copy {
         display: inline-flex;
-        vertical-align: text-bottom;
+        vertical-align: middle;
         padding: $spacing-typography_copyIcon-padding;
         margin-left: $spacing-typography_copyIcon-marginLeft;
     }
@@ -156,7 +156,7 @@ $module: #{$prefix}-typography;
         color: $color-typography_copied-text-success;
 
         .#{$prefix}-icon {
-            vertical-align: text-bottom;
+            vertical-align: middle;
             color: $color-typography_copied-icon-success;
         }
     }