@douyinfe/semi-foundation 2.2.0 → 2.3.0

package/breadcrumb/foundation.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-const */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-
+import isEnterPress from '../utils/isEnterPress';
 import { BreadcrumbItemInfo, Route } from './itemFoundation';
 export interface BreadcrumbAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (itemInfo: BreadcrumbItemInfo, event: any) => void;
@@ -21,6 +21,15 @@ export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<st
         this._adapter.expandCollapsed(clickEvent);
     }
 
+    /**
+     * A11y: simulate clear button click
+     */
+    handleExpandEnterPress(keyboardEvent: any) {
+        if (isEnterPress(keyboardEvent)) {
+            this.handleExpand(keyboardEvent);
+        }
+    }
+
     genRoutes(routes: Array<Route>) {
         return routes.map(route => {
             if (typeof route !== 'object') {

package/checkbox/checkboxFoundation.ts

@@ -1,4 +1,5 @@
 import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface BasicTargetObject {
     [x: string]: any;
@@ -98,6 +99,12 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
         this._adapter.notifyGroupChange(event);
     }
 
+    handleEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleChange(e);
+        }
+    }
+
     setChecked(checked: boolean) {
         this._adapter.setNativeControlChecked(checked);
     }
@@ -121,6 +128,8 @@ export interface BaseCheckboxProps {
     onMouseEnter?: (e: any) => void;
     onMouseLeave?: (e: any) => void;
     extra?: any;
+    addonId?: string;
+    extraId?: string;
 }
 
 export default CheckboxFoundation;

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);
         }
@@ -725,7 +745,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         let inputValue;
         if (!this._someDateDisabled(changedDates)) {
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
-            const isRangeTypeAndInputIncomplete = this._isRangeType() && (isNullOrUndefined(dates[0]) || isNullOrUndefined(dates[1]));
+            const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
             /**
              * If the input is incomplete when under control, the notifyChange is not triggered because
              * You need to update the value of the input box, otherwise there will be a problem that a date is selected but the input box does not show the date #1357
@@ -1004,11 +1024,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     };
 
     _isRangeValueComplete = (value: Date[] | Date) => {
-        let result = true;
+        let result = false;
         if (Array.isArray(value)) {
             result = !value.some(date => isNullOrUndefined(date));
-        } else {
-            result = false;
         }
         return result;
     };

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/monthsGridFoundation.ts

@@ -16,7 +16,7 @@ import {
 import { isBefore, isValidDate, getDefaultFormatToken, getFullDateOffset } from './_utils/index';
 import { formatFullDate, WeekStartNumber } from './_utils/getMonthTable';
 import { compatiableParse } from './_utils/parser';
-import { includes, isSet, isEqual } from 'lodash';
+import { includes, isSet, isEqual, isFunction } from 'lodash';
 import { zonedTimeToUtc } from '../utils/date-fns-extra';
 import { getDefaultFormatTokenByType } from './_utils/getDefaultFormatToken';
 import isNullOrUndefined from '../utils/isNullOrUndefined';
@@ -85,6 +85,7 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     setRangeInputFocus?: (rangeInputFocus: 'rangeStart' | 'rangeEnd') => void;
     isAnotherPanelHasOpened?: (currentRangeInput: 'rangeStart' | 'rangeEnd') => boolean;
     focusRecordsRef?: any;
+    triggerRender?: (props: Record<string, any>) => any;
 }
 
 export interface MonthInfo {
@@ -636,7 +637,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
 
     handleRangeSelected(day: MonthDayInfo) {
         let { rangeStart, rangeEnd } = this.getStates();
-        const { startDateOffset, endDateOffset, type, dateFnsLocale, rangeInputFocus } = this.getProps();
+        const { startDateOffset, endDateOffset, type, dateFnsLocale, rangeInputFocus, triggerRender } = this._adapter.getProps();
         const { fullDate } = day;
         let rangeStartReset = false;
         let rangeEndReset = false;
@@ -712,7 +713,13 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
                     date = [start, end];
                 }
             }
-            this._adapter.notifySelectedChange(date, { needCheckFocusRecord: !(type === 'dateRange' && isDateRangeAndHasOffset) });
+            /**
+             * no need to check focus then
+             *  - dateRange and isDateRangeAndHasOffset
+             *  - dateRange and triggerRender
+             */
+            const needCheckFocusRecord = !(type === 'dateRange' && (isDateRangeAndHasOffset || isFunction(triggerRender)));
+            this._adapter.notifySelectedChange(date, { needCheckFocusRecord });
         }
     }
 

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/form/foundation.ts

@@ -258,10 +258,19 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             });
     }
 
-    // All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
-    // input => output:
-    //      a  => a[0]、a[1]
-    //      b  => b.type、b.name[3]、b.name[2]
+    /**
+     * Case A：
+     *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+     *      input => output:
+     *           a  => a[0]、a[1]
+     *           b  => b.type、b.name[0]、b.name[2]
+     *
+     * Case B：
+     *      All fields: activity.a[0]、activity.a[1]、activity.c、activity.d、other
+     *      input => output:
+     *           activity.a => activity.a[0]、activity.a[1]
+     *
+     */
     _getNestedField(path: string): Map<string, FieldStaff> {
         const allRegisterField = this.fields;
         const allFieldPath = [...allRegisterField].map(item => item[0]);
@@ -269,7 +278,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         allFieldPath.forEach(item => {
             let itemPath = toPath(item);
             let targetPath = toPath(path);
-            if (itemPath[0] === targetPath[0]) {
+            if (targetPath.every((path, i) => (targetPath[i] === itemPath[i]))) {
                 const realField = allRegisterField.get(item);
                 nestedFieldPath.set(item, realField);
             }
@@ -503,7 +512,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldVal = ObjectUtil.get(this.data.values, fieldPath);
-                        fieldStaff.fieldApi.setValue(newFieldVal, opts);
+                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                        fieldStaff.fieldApi.setValue(newFieldVal, nestedBatchUpdateOpts);
                     });
                 }
                 // If the reset happens to be, then update the updateKey corresponding to ArrayField to render it again
@@ -524,7 +534,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldError = ObjectUtil.get(this.data.errors, fieldPath);
-                        fieldStaff.fieldApi.setError(newFieldError, opts);
+                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                        fieldStaff.fieldApi.setError(newFieldError, nestedBatchUpdateOpts);
                     });
                 }
                 if (this.getArrayField(field)) {
@@ -544,7 +555,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
                     nestedFields.forEach(fieldStaff => {
                         let fieldPath = fieldStaff.field;
                         let newFieldTouch = ObjectUtil.get(this.data.touched, fieldPath);
-                        fieldStaff.fieldApi.setTouched(newFieldTouch, opts);
+                        let nestedBatchUpdateOpts = { notNotify: true, notUpdate: true };
+                        fieldStaff.fieldApi.setTouched(newFieldTouch, nestedBatchUpdateOpts);
                     });
                 }
                 if (this.getArrayField(field)) {

package/form/utils.ts

@@ -133,6 +133,7 @@ export function mergeProps(props: any) {
         extraText,
         extraTextPosition,
         pure,
+        id,
         ...rest
     }: any = { ...defaultProps, ...props };
     // Form中的任何类型组件，初始值都统一通过initValue字段来传入，同时将可能会导致组件行为错误的props抽取出来，防止透传到组件中
@@ -183,6 +184,7 @@ export function mergeProps(props: any) {
         extraTextPosition,
         pure,
         rest,
+        id
     };
 }
 

package/input/foundation.ts

@@ -2,7 +2,8 @@ import BaseFoundation, { DefaultAdapter, noopFunction } from '../base/foundation
 import { strings } from './constants';
 import { noop, set, isNumber, isString, isFunction } from 'lodash';
 
-const ENTER_KEY_CODE = 'Enter';
+import isEnterPress from '../utils/isEnterPress';
+import { ENTER_KEY } from './../utils/keyCode';
 
 export interface InputDefaultAdapter {
     notifyChange: noopFunction;
@@ -261,7 +262,7 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     handleKeyPress(e: any) {
         this._adapter.notifyKeyPress(e);
-        if (e.key === ENTER_KEY_CODE) {
+        if (e.key === ENTER_KEY) {
             this._adapter.notifyEnterPress(e);
         }
     }
@@ -294,5 +295,23 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
             e.preventDefault();
         }
     }
+
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClear(e);
+        }
+    }
+
+    /**
+     * A11y: simulate password button click
+     */
+    handleModeEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClickEye(e);
+        }
+    }
 }
 export default InputFoundation;

package/input/textareaFoundation.ts

@@ -7,6 +7,7 @@ import {
 } from 'lodash';
 import calculateNodeHeight from './util/calculateNodeHeight';
 import getSizingData from './util/getSizingData';
+import isEnterPress from '../utils/isEnterPress';
 
 export interface TextAreaDefaultAdpter {
     notifyChange: noopFunction;
@@ -171,7 +172,7 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdpter> {
         }
     }
 
-    resizeTextarea = (cb: any) => {
+    resizeTextarea = (cb?: any) => {
         const { height } = this.getStates();
         const { rows } = this.getProps();
         const node = this._adapter.getRef().current;
@@ -232,4 +233,13 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdpter> {
         this._adapter.notifyClear(e);
         this.stopPropagation(e);
     }
+
+    /**
+     * A11y: simulate clear button click
+     */
+    handleClearEnterPress(e: any) {
+        if (isEnterPress(e)) {
+            this.handleClear(e);
+        }
+    }
 }

package/inputNumber/foundation.ts

@@ -126,6 +126,7 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
         }
         this._adapter.recordCursorPosition();
         this._adapter.setFocusing(true, null);
+        this._adapter.setClickUpOrDown(false);
         this._adapter.notifyFocus(e);
     }
 
@@ -425,11 +426,11 @@ class InputNumberFoundation extends BaseFoundation<InputNumberAdapter> {
 
     /**
      * format number to string
-     * @param {number} value
+     * @param {string|number} value
      * @param {boolean} needAdjustPrec
      * @returns {string}
      */
-    doFormat(value = 0, needAdjustPrec = true): string {
+    doFormat(value: string | number = 0, needAdjustPrec = true): string {
         // if (typeof value === 'string') {
         //     return value;
         // }

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

@@ -8,6 +8,10 @@ export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<st
     constructor(adapter: BreadcrumbAdapter<P, S>);
     handleClick(info: BreadcrumbItemInfo, event: any): void;
     handleExpand(clickEvent: any): void;
+    /**
+     * A11y: simulate clear button click
+     */
+    handleExpandEnterPress(keyboardEvent: any): void;
     genRoutes(routes: Array<Route>): ({
         name: never;
         _origin: {

package/lib/cjs/breadcrumb/foundation.js

@@ -16,6 +16,8 @@ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 /* eslint-disable prefer-const */
 class BreadcrumbFoundation extends _foundation.default {
   constructor(adapter) {
@@ -29,6 +31,16 @@ class BreadcrumbFoundation extends _foundation.default {
   handleExpand(clickEvent) {
     this._adapter.expandCollapsed(clickEvent);
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleExpandEnterPress(keyboardEvent) {
+    if ((0, _isEnterPress.default)(keyboardEvent)) {
+      this.handleExpand(keyboardEvent);
+    }
+  }
 
   genRoutes(routes) {
     return (0, _map.default)(routes).call(routes, route => {

package/lib/cjs/checkbox/checkboxFoundation.d.ts

@@ -34,6 +34,7 @@ declare class CheckboxFoundation<P = Record<string, any>, S = Record<string, any
     notifyChange(checked: boolean, e: any): void;
     handleChange(e: any): void;
     handleChangeInGroup(e: any): void;
+    handleEnterPress(e: any): void;
     setChecked(checked: boolean): void;
     destroy(): void;
 }
@@ -52,5 +53,7 @@ export interface BaseCheckboxProps {
     onMouseEnter?: (e: any) => void;
     onMouseLeave?: (e: any) => void;
     extra?: any;
+    addonId?: string;
+    extraId?: string;
 }
 export default CheckboxFoundation;

package/lib/cjs/checkbox/checkboxFoundation.js

@@ -16,6 +16,8 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 
 var _foundation = _interopRequireDefault(require("../base/foundation"));
 
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
 class CheckboxFoundation extends _foundation.default {
   constructor(adapter) {
     super((0, _assign.default)({}, adapter));
@@ -99,6 +101,12 @@ class CheckboxFoundation extends _foundation.default {
     this._adapter.notifyGroupChange(event);
   }
 
+  handleEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleChange(e);
+    }
+  }
+
   setChecked(checked) {
     this._adapter.setNativeControlChecked(checked);
   } // eslint-disable-next-line @typescript-eslint/no-empty-function

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