@douyinfe/semi-foundation 2.2.0 → 2.2.1

package/datePicker/datePicker.scss

@@ -140,6 +140,17 @@ $module: #{$prefix}-datepicker;
         padding-bottom: $spacing-datepicker_footer-paddingBottom;
         text-align: right;
         background-color: $color-datepicker_footer-bg-default;
+
+        .#{$prefix}-button {
+            // cancel button
+            &:first-of-type {
+                margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+            }
+            // confirm button
+            &:nth-of-type(2) {
+                margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
+            }
+        }
     }
 
     // 年月选择

package/datePicker/foundation.ts

@@ -323,10 +323,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *   2. set cachedSelectedValue using given dates(in needConfirm mode)
      *      - directly closePanel without click confirm will set cachedSelectedValue to state value
      *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]) {
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]) {
         if (this._isRangeType()) {
             this._adapter.setRangeInputFocus(false);
             /**
@@ -334,11 +332,29 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
              * when inputValue is null, picker value will back to last selected value
              */
             this.handleInputBlur(inputValue);
-            const { value, cachedSelectedValue } = this._adapter.getStates();
-            const newCachedSelectedValue = Array.isArray(dates) && dates.length ? dates : value;
-            if (!isEqual(newCachedSelectedValue, cachedSelectedValue)) {
-                this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-            }
+            this.resetCachedSelectedValue(willUpdateDates);
+        }
+    }
+
+    /**
+     * clear input value when selected date is not confirmed
+     */
+    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined) {
+        if (this._adapter.needConfirm() && !this._isRangeType()) {
+            /**
+             * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+             * if `` input element will show `` directly
+             */
+            this._adapter.updateInputValue(null);
+            this.resetCachedSelectedValue(willUpdateDates);
+        }
+    }
+
+    resetCachedSelectedValue(willUpdateDates?: Date[]) {
+        const { value, cachedSelectedValue } = this._adapter.getStates();
+        const newCachedSelectedValue = Array.isArray(willUpdateDates) ? willUpdateDates : value;
+        if (!isEqual(newCachedSelectedValue, cachedSelectedValue)) {
+            this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
         }
     }
 
@@ -354,13 +370,16 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * @param {String} inputValue
      * @param {Date[]} dates
      */
-    closePanel(e?: any, inputValue: string = null, dates: Date[] = []) {
+    closePanel(e?: any, inputValue: string = null, dates?: Date[]) {
+        const { value, cachedSelectedValue } = this._adapter.getStates();
+        const willUpdateDates = isNullOrUndefined(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
         if (!this._isControlledComponent('open')) {
             this._adapter.togglePanel(false);
             this._adapter.unregisterClickOutSide();
         }
         // range type picker, closing panel requires the following side effects
-        this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+        this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates as Date[]);
+        this.needConfirmSideEffectsWhenClosePanel(willUpdateDates as Date[]);
         this._adapter.notifyOpenChange(false);
         this._adapter.notifyBlur(e);
     }
@@ -416,7 +435,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         if (parsedResult && parsedResult.length) {
             this._updateValueAndInput(parsedResult, input === '');
         } else if (input === '') {
-            this._updateValueAndInput('' as any, true);
+            // if clear input, set input to `''`
+            this._updateValueAndInput('' as any, true, '');
         } else {
             this._updateValueAndInput(stateValue);
         }

package/datePicker/inputFoundation.ts

@@ -89,6 +89,8 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
     }
 
     handleRangeInputClear(e: any) {
+        // prevent trigger click outside
+        this.stopPropagation(e);
         this._adapter.notifyRangeInputClear(e);
     }
 

package/datePicker/rtl.scss

@@ -9,6 +9,18 @@ $module: #{$prefix}-datepicker;
             padding-right: 0;
             padding-left: $spacing-datepicker_footer-paddingRight;
             text-align: left;
+
+            .#{$prefix}-button {
+                &:first-of-type {
+                    margin-left: 0;
+                    margin-right: 0;
+                }
+                // confirm button
+                &:nth-of-type(2) {
+                    margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+                    margin-left: 0;
+                }
+            }
         }
 
         &-day {
@@ -66,7 +78,9 @@ $module: #{$prefix}-datepicker;
         &-yam {
             // rtl 对箭头进行翻转
             .#{$prefix}-icon-chevron_left,
-            .#{$prefix}-icon-chevron_right {
+            .#{$prefix}-icon-chevron_right,
+            .#{$prefix}-icon-double_chevron_left,
+            .#{$prefix}-icon-double_chevron_right {
                 transform: scaleX(-1);
             }
         }

package/datePicker/variables.scss

@@ -33,6 +33,8 @@ $spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内
 $spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
 $spacing-datepicker_footer-paddingBottom: 10px; // 确认选择 footer 底部内边距
 $spacing-datepicker_footer-paddingRight: 8px; // 确认选择 footer 右侧内边距
+$spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 footer 取消按钮右外边距
+$spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
 $spacing-datepicker_month-padding: $spacing-base; 

package/lib/cjs/datePicker/datePicker.css

@@ -98,6 +98,12 @@
   text-align: right;
   background-color: var(--semi-color-fill-0);
 }
+.semi-datepicker-footer .semi-button:first-of-type {
+  margin-right: 12px;
+}
+.semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 8px;
+}
 .semi-datepicker-yam {
   position: absolute;
   top: 0;
@@ -705,6 +711,16 @@
   padding-left: 8px;
   text-align: left;
 }
+.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
+.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
+  margin-left: 0;
+  margin-right: 0;
+}
+.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
+.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 12px;
+  margin-left: 0;
+}
 .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
 .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -740,12 +756,20 @@
   margin-right: 8px;
 }
 .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
-.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
 .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
-.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
   transform: scaleX(-1);
 }
 .semi-rtl .semi-datepicker-range-input-prefix,

package/lib/cjs/datePicker/datePicker.scss

@@ -140,6 +140,17 @@ $module: #{$prefix}-datepicker;
         padding-bottom: $spacing-datepicker_footer-paddingBottom;
         text-align: right;
         background-color: $color-datepicker_footer-bg-default;
+
+        .#{$prefix}-button {
+            // cancel button
+            &:first-of-type {
+                margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+            }
+            // confirm button
+            &:nth-of-type(2) {
+                margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
+            }
+        }
     }
 
     // 年月选择

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

@@ -201,10 +201,13 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *   2. set cachedSelectedValue using given dates(in needConfirm mode)
      *      - directly closePanel without click confirm will set cachedSelectedValue to state value
      *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]): void;
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]): void;
+    /**
+     * clear input value when selected date is not confirmed
+     */
+    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
+    resetCachedSelectedValue(willUpdateDates?: Date[]): void;
     /**
      * timing to call closePanel
      *  1. click confirm button

package/lib/cjs/datePicker/foundation.js

@@ -250,12 +250,10 @@ class DatePickerFoundation extends _foundation.default {
    *   2. set cachedSelectedValue using given dates(in needConfirm mode)
    *      - directly closePanel without click confirm will set cachedSelectedValue to state value
    *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
 
 
-  rangeTypeSideEffectsWhenClosePanel(inputValue, dates) {
+  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
     if (this._isRangeType()) {
       this._adapter.setRangeInputFocus(false);
       /**
@@ -265,17 +263,36 @@ class DatePickerFoundation extends _foundation.default {
 
 
       this.handleInputBlur(inputValue);
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+  /**
+   * clear input value when selected date is not confirmed
+   */
 
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
 
-      const newCachedSelectedValue = (0, _isArray.default)(dates) && dates.length ? dates : value;
+  needConfirmSideEffectsWhenClosePanel(willUpdateDates) {
+    if (this._adapter.needConfirm() && !this._isRangeType()) {
+      /**
+       * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+       * if `` input element will show `` directly
+       */
+      this._adapter.updateInputValue(null);
 
-      if (!(0, _isEqual2.default)(newCachedSelectedValue, cachedSelectedValue)) {
-        this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-      }
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+
+  resetCachedSelectedValue(willUpdateDates) {
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const newCachedSelectedValue = (0, _isArray.default)(willUpdateDates) ? willUpdateDates : value;
+
+    if (!(0, _isEqual2.default)(newCachedSelectedValue, cachedSelectedValue)) {
+      this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
     }
   }
   /**
@@ -294,7 +311,14 @@ class DatePickerFoundation extends _foundation.default {
 
   closePanel(e) {
     let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const willUpdateDates = (0, _isNullOrUndefined.default)(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
 
     if (!this._isControlledComponent('open')) {
       this._adapter.togglePanel(false);
@@ -303,7 +327,8 @@ class DatePickerFoundation extends _foundation.default {
     } // range type picker, closing panel requires the following side effects
 
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
+    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
 
     this._adapter.notifyOpenChange(false);
 
@@ -365,7 +390,8 @@ class DatePickerFoundation extends _foundation.default {
     if (parsedResult && parsedResult.length) {
       this._updateValueAndInput(parsedResult, input === '');
     } else if (input === '') {
-      this._updateValueAndInput('', true);
+      // if clear input, set input to `''`
+      this._updateValueAndInput('', true, '');
     } else {
       this._updateValueAndInput(stateValue);
     }

package/lib/cjs/datePicker/inputFoundation.js

@@ -56,6 +56,9 @@ class InputFoundation extends _foundation.default {
   }
 
   handleRangeInputClear(e) {
+    // prevent trigger click outside
+    this.stopPropagation(e);
+
     this._adapter.notifyRangeInputClear(e);
   }
 

package/lib/cjs/datePicker/rtl.scss

@@ -9,6 +9,18 @@ $module: #{$prefix}-datepicker;
             padding-right: 0;
             padding-left: $spacing-datepicker_footer-paddingRight;
             text-align: left;
+
+            .#{$prefix}-button {
+                &:first-of-type {
+                    margin-left: 0;
+                    margin-right: 0;
+                }
+                // confirm button
+                &:nth-of-type(2) {
+                    margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+                    margin-left: 0;
+                }
+            }
         }
 
         &-day {
@@ -66,7 +78,9 @@ $module: #{$prefix}-datepicker;
         &-yam {
             // rtl 对箭头进行翻转
             .#{$prefix}-icon-chevron_left,
-            .#{$prefix}-icon-chevron_right {
+            .#{$prefix}-icon-chevron_right,
+            .#{$prefix}-icon-double_chevron_left,
+            .#{$prefix}-icon-double_chevron_right {
                 transform: scaleX(-1);
             }
         }

package/lib/cjs/datePicker/variables.scss

@@ -33,6 +33,8 @@ $spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内
 $spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
 $spacing-datepicker_footer-paddingBottom: 10px; // 确认选择 footer 底部内边距
 $spacing-datepicker_footer-paddingRight: 8px; // 确认选择 footer 右侧内边距
+$spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 footer 取消按钮右外边距
+$spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
 $spacing-datepicker_month-padding: $spacing-base; 

package/lib/cjs/table/table.css

@@ -52,12 +52,10 @@
   color: var(--semi-color-text-0);
   width: 100%;
 }
-.semi-table-middle .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.semi-table-small .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 8px;
   padding-bottom: 8px;

package/lib/cjs/table/table.scss

@@ -25,7 +25,6 @@ $module: #{$prefix}-table;
     }
 
     &-middle {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_middle-paddingY;
             padding-bottom: $spacing-table_middle-paddingY;
@@ -33,7 +32,6 @@ $module: #{$prefix}-table;
     }
 
     &-small {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_small-paddingY;
             padding-bottom: $spacing-table_small-paddingY;

package/lib/es/datePicker/datePicker.css

@@ -98,6 +98,12 @@
   text-align: right;
   background-color: var(--semi-color-fill-0);
 }
+.semi-datepicker-footer .semi-button:first-of-type {
+  margin-right: 12px;
+}
+.semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 8px;
+}
 .semi-datepicker-yam {
   position: absolute;
   top: 0;
@@ -705,6 +711,16 @@
   padding-left: 8px;
   text-align: left;
 }
+.semi-rtl .semi-datepicker-footer .semi-button:first-of-type,
+.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type {
+  margin-left: 0;
+  margin-right: 0;
+}
+.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2),
+.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) {
+  margin-right: 12px;
+  margin-left: 0;
+}
 .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main,
 .semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
@@ -740,12 +756,20 @@
   margin-right: 8px;
 }
 .semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
-.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left,
 .semi-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left,
 .semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right,
 .semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left,
-.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right {
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left,
+.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right {
   transform: scaleX(-1);
 }
 .semi-rtl .semi-datepicker-range-input-prefix,

package/lib/es/datePicker/datePicker.scss

@@ -140,6 +140,17 @@ $module: #{$prefix}-datepicker;
         padding-bottom: $spacing-datepicker_footer-paddingBottom;
         text-align: right;
         background-color: $color-datepicker_footer-bg-default;
+
+        .#{$prefix}-button {
+            // cancel button
+            &:first-of-type {
+                margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+            }
+            // confirm button
+            &:nth-of-type(2) {
+                margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
+            }
+        }
     }
 
     // 年月选择

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

@@ -201,10 +201,13 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      *   2. set cachedSelectedValue using given dates(in needConfirm mode)
      *      - directly closePanel without click confirm will set cachedSelectedValue to state value
      *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-     * @param {String} inputValue
-     * @param {Date[]} dates
      */
-    rangeTypeSideEffectsWhenClosePanel(inputValue: string, dates: Date[]): void;
+    rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]): void;
+    /**
+     * clear input value when selected date is not confirmed
+     */
+    needConfirmSideEffectsWhenClosePanel(willUpdateDates: Date[] | null | undefined): void;
+    resetCachedSelectedValue(willUpdateDates?: Date[]): void;
     /**
      * timing to call closePanel
      *  1. click confirm button

package/lib/es/datePicker/foundation.js

@@ -212,12 +212,10 @@ export default class DatePickerFoundation extends BaseFoundation {
    *   2. set cachedSelectedValue using given dates(in needConfirm mode)
    *      - directly closePanel without click confirm will set cachedSelectedValue to state value
    *      - select one date(which means that the selection value is incomplete) and click confirm also set cachedSelectedValue to state value
-   * @param {String} inputValue
-   * @param {Date[]} dates
    */
 
 
-  rangeTypeSideEffectsWhenClosePanel(inputValue, dates) {
+  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
     if (this._isRangeType()) {
       this._adapter.setRangeInputFocus(false);
       /**
@@ -227,17 +225,36 @@ export default class DatePickerFoundation extends BaseFoundation {
 
 
       this.handleInputBlur(inputValue);
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+  /**
+   * clear input value when selected date is not confirmed
+   */
 
-      const {
-        value,
-        cachedSelectedValue
-      } = this._adapter.getStates();
 
-      const newCachedSelectedValue = _Array$isArray(dates) && dates.length ? dates : value;
+  needConfirmSideEffectsWhenClosePanel(willUpdateDates) {
+    if (this._adapter.needConfirm() && !this._isRangeType()) {
+      /**
+       * if `null` input element will show `cachedSelectedValue` formatted value（format in DateInput render）
+       * if `` input element will show `` directly
+       */
+      this._adapter.updateInputValue(null);
 
-      if (!_isEqual(newCachedSelectedValue, cachedSelectedValue)) {
-        this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
-      }
+      this.resetCachedSelectedValue(willUpdateDates);
+    }
+  }
+
+  resetCachedSelectedValue(willUpdateDates) {
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const newCachedSelectedValue = _Array$isArray(willUpdateDates) ? willUpdateDates : value;
+
+    if (!_isEqual(newCachedSelectedValue, cachedSelectedValue)) {
+      this._adapter.updateCachedSelectedValue(newCachedSelectedValue);
     }
   }
   /**
@@ -256,7 +273,14 @@ export default class DatePickerFoundation extends BaseFoundation {
 
   closePanel(e) {
     let inputValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    let dates = arguments.length > 2 ? arguments[2] : undefined;
+
+    const {
+      value,
+      cachedSelectedValue
+    } = this._adapter.getStates();
+
+    const willUpdateDates = isNullOrUndefined(dates) ? this._adapter.needConfirm() ? value : cachedSelectedValue : dates;
 
     if (!this._isControlledComponent('open')) {
       this._adapter.togglePanel(false);
@@ -265,7 +289,8 @@ export default class DatePickerFoundation extends BaseFoundation {
     } // range type picker, closing panel requires the following side effects
 
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, dates);
+    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
+    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
 
     this._adapter.notifyOpenChange(false);
 
@@ -327,7 +352,8 @@ export default class DatePickerFoundation extends BaseFoundation {
     if (parsedResult && parsedResult.length) {
       this._updateValueAndInput(parsedResult, input === '');
     } else if (input === '') {
-      this._updateValueAndInput('', true);
+      // if clear input, set input to `''`
+      this._updateValueAndInput('', true, '');
     } else {
       this._updateValueAndInput(stateValue);
     }

package/lib/es/datePicker/inputFoundation.js

@@ -40,6 +40,9 @@ export default class InputFoundation extends BaseFoundation {
   }
 
   handleRangeInputClear(e) {
+    // prevent trigger click outside
+    this.stopPropagation(e);
+
     this._adapter.notifyRangeInputClear(e);
   }
 

package/lib/es/datePicker/rtl.scss

@@ -9,6 +9,18 @@ $module: #{$prefix}-datepicker;
             padding-right: 0;
             padding-left: $spacing-datepicker_footer-paddingRight;
             text-align: left;
+
+            .#{$prefix}-button {
+                &:first-of-type {
+                    margin-left: 0;
+                    margin-right: 0;
+                }
+                // confirm button
+                &:nth-of-type(2) {
+                    margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
+                    margin-left: 0;
+                }
+            }
         }
 
         &-day {
@@ -66,7 +78,9 @@ $module: #{$prefix}-datepicker;
         &-yam {
             // rtl 对箭头进行翻转
             .#{$prefix}-icon-chevron_left,
-            .#{$prefix}-icon-chevron_right {
+            .#{$prefix}-icon-chevron_right,
+            .#{$prefix}-icon-double_chevron_left,
+            .#{$prefix}-icon-double_chevron_right {
                 transform: scaleX(-1);
             }
         }

package/lib/es/datePicker/variables.scss

@@ -33,6 +33,8 @@ $spacing-datepicker_scrolllist_body-padding: 0; // 时间选择滚动菜单内
 $spacing-datepicker_footer-paddingTop: 10px; // 确认选择 footer 顶部内边距
 $spacing-datepicker_footer-paddingBottom: 10px; // 确认选择 footer 底部内边距
 $spacing-datepicker_footer-paddingRight: 8px; // 确认选择 footer 右侧内边距
+$spacing-datepicker_footer_cancel_button-marginRight: 12px; // 确认选择 footer 取消按钮右外边距
+$spacing-datepicker_footer_confirm_button-marginRight: 8px; // 确认选择 footer 确认按钮右外边距
 $spacing-datepicker_navigation-paddingY: $spacing-base-tight; // 年月切换 header 垂直内边距
 $spacing-datepicker_navigation-paddingX: $spacing-base; // 年月切换 header 水平内边距
 $spacing-datepicker_month-padding: $spacing-base; 

package/lib/es/table/table.css

@@ -52,12 +52,10 @@
   color: var(--semi-color-text-0);
   width: 100%;
 }
-.semi-table-middle .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.semi-table-small .semi-table-thead > .semi-table-row > .semi-table-row-head,
 .semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 8px;
   padding-bottom: 8px;

package/lib/es/table/table.scss

@@ -25,7 +25,6 @@ $module: #{$prefix}-table;
     }
 
     &-middle {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_middle-paddingY;
             padding-bottom: $spacing-table_middle-paddingY;
@@ -33,7 +32,6 @@ $module: #{$prefix}-table;
     }
 
     &-small {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_small-paddingY;
             padding-bottom: $spacing-table_small-paddingY;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.2.0",
+        "@douyinfe/semi-animation": "2.2.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f47324c727f9ca85ceb44649c4227b75876c4596",
+    "gitHead": "6d8bb9dd22bf199225fa2a0dda4f8524a4b97f6f",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/table/table.scss

@@ -25,7 +25,6 @@ $module: #{$prefix}-table;
     }
 
     &-middle {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_middle-paddingY;
             padding-bottom: $spacing-table_middle-paddingY;
@@ -33,7 +32,6 @@ $module: #{$prefix}-table;
     }
 
     &-small {
-        .#{$module}-thead > .#{$module}-row > .#{$module}-row-head,
         .#{$module}-tbody > .#{$module}-row > .#{$module}-row-cell {
             padding-top: $spacing-table_small-paddingY;
             padding-bottom: $spacing-table_small-paddingY;