@douyinfe/semi-ui 2.31.2 → 2.32.0-beta.0

package/dist/umd/semi-ui.js

@@ -21396,7 +21396,8 @@ const local = {
       date: '请选择日期',
       dateTime: '请选择日期及时间',
       dateRange: ['开始日期', '结束日期'],
-      dateTimeRange: ['开始日期', '结束日期']
+      dateTimeRange: ['开始日期', '结束日期'],
+      monthRange: ['开始月份', '结束月份']
     },
     footer: {
       confirm: '确定',
@@ -37075,6 +37076,16 @@ const utils_flatten = children => {
   });
   return res;
 };
+// CONCATENATED MODULE: ../semi-foundation/utils/getDataAttr.ts
+function getDataAttr(props) {
+  return Object.keys(props).reduce((prev, key) => {
+    if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
+      prev[key] = props[key];
+    }
+
+    return prev;
+  }, {});
+}
 // CONCATENATED MODULE: ./space/index.tsx
 
 
@@ -37085,6 +37096,7 @@ const utils_flatten = children => {
 
 
 
+
 const space_prefixCls = space_constants_cssClasses.PREFIX;
 
 class space_Space extends external_root_React_commonjs2_react_commonjs_react_amd_react_["PureComponent"] {
@@ -37136,11 +37148,12 @@ class space_Space extends external_root_React_commonjs2_react_commonjs_react_amd
       [`${space_prefixCls}-loose-vertical`]: spacingVerticalType === space_constants_strings.SPACING_LOOSE
     });
     const childrenNodes = utils_flatten(children);
-    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+    const dataAttributes = getDataAttr(this.props);
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", Object.assign({}, dataAttributes, {
       className: classNames,
       style: realStyle,
       "x-semi-prop": "children"
-    }, childrenNodes);
+    }), childrenNodes);
   }
 
 }
@@ -37640,16 +37653,6 @@ class foundation_CarouselFoundation extends foundation {
 }
 
 /* harmony default export */ var carousel_foundation = (foundation_CarouselFoundation);
-// CONCATENATED MODULE: ../semi-foundation/utils/getDataAttr.ts
-function getDataAttr(props) {
-  return Object.keys(props).reduce((prev, key) => {
-    if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
-      prev[key] = props[key];
-    }
-
-    return prev;
-  }, {});
-}
 // CONCATENATED MODULE: ./carousel/CarouselIndicator.tsx
 var CarouselIndicator_rest = undefined && undefined.__rest || function (s, e) {
   var t = {};
@@ -44425,6 +44428,13 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       this.foundation.handleTagRemove(e, tagValuePath);
     };
 
+    this.handleRemoveByKey = key => {
+      const {
+        keyEntities
+      } = this.state;
+      this.handleTagRemove(null, keyEntities[key].valuePath);
+    };
+
     this.renderTagItem = (value, idx, type) => {
       const {
         keyEntities,
@@ -44714,7 +44724,9 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         disabled: disabled,
         triggerRender: triggerRender,
         componentName: 'Cascader',
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.handleInputChange,
+        onRemove: this.handleRemoveByKey
       });
     };
 
@@ -46281,7 +46293,7 @@ const datePicker_constants_strings = Object.assign({
   DEFAULT_SEPARATOR_MULTIPLE: ',',
   DEFAULT_SEPARATOR_RANGE: ' ~ ',
   SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'monthRange', 'dateTime', 'dateTimeRange'],
   PRESET_POSITION_SET: ['left', 'right', 'top', 'bottom'],
   DENSITY_SET: ['default', 'compact'],
   PANEL_TYPE_LEFT: 'left',
@@ -50441,7 +50453,8 @@ const defaultFormatTokens = {
   dateTime: datePicker_constants_strings.FORMAT_DATE_TIME,
   dateRange: datePicker_constants_strings.FORMAT_FULL_DATE,
   dateTimeRange: datePicker_constants_strings.FORMAT_DATE_TIME,
-  month: datePicker_constants_strings.FORMAT_YEAR_MONTH
+  month: datePicker_constants_strings.FORMAT_YEAR_MONTH,
+  monthRange: datePicker_constants_strings.FORMAT_YEAR_MONTH
 };
 
 const getDefaultFormatToken = type => defaultFormatTokens;
@@ -50487,6 +50500,7 @@ function getInsetInputFormatToken(options) {
 
     case 'date':
     case 'month':
+    case 'monthRange':
     case 'dateRange':
     default:
       const dateResult = dateReg.exec(format);
@@ -50535,6 +50549,7 @@ function getInsetInputValueFromInsetInputStr(options) {
   switch (type) {
     case 'date':
     case 'month':
+    case 'monthRange':
       insetInputValue.monthLeft.dateInput = inputValue;
       break;
 
@@ -50669,9 +50684,7 @@ class foundation_DatePickerFoundation extends foundation {
     this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
 
 
-    this._adapter.updateInputValue(null);
-
-    this._adapter.updateInsetInputValue(null);
+    this.clearInputValue();
 
     this._adapter.updateValue(result);
 
@@ -50758,7 +50771,8 @@ class foundation_DatePickerFoundation extends foundation {
 
   destroy() {
     // Ensure that event listeners will be uninstalled and users may not trigger closePanel
-    // this._adapter.togglePanel(false);
+    this._adapter.togglePanel(false);
+
     this._adapter.unregisterClickOutSide();
   }
 
@@ -50777,52 +50791,47 @@ class foundation_DatePickerFoundation extends foundation {
   openPanel() {
     if (!this.getProp('disabled')) {
       if (!this._isControlledComponent('open')) {
-        this._adapter.togglePanel(true);
-
-        this._adapter.registerClickOutSide();
+        this.open();
       }
 
       this._adapter.notifyOpenChange(true);
     }
   }
   /**
+   * @deprecated
    * do these side effects when type is dateRange or dateTimeRange
    *   1. trigger input blur, if input value is invalid, set input value and state value to previous status
    *   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
    */
+  // rangeTypeSideEffectsWhenClosePanel(inputValue: string, willUpdateDates: Date[]) {
+  //     if (this._isRangeType()) {
+  //         this._adapter.setRangeInputFocus(false);
+  //         /**
+  //          * inputValue is string when it is not disabled or can't parsed
+  //          * when inputValue is null, picker value will back to last selected value
+  //          */
+  //         this.handleInputBlur(inputValue);
+  //         this.resetCachedSelectedValue(willUpdateDates);
+  //     }
+  // }
 
-
-  rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates) {
-    if (this._isRangeType()) {
-      this._adapter.setRangeInputFocus(false);
-      /**
-       * inputValue is string when it is not disabled or can't parsed
-       * when inputValue is null, picker value will back to last selected value
-       */
-
-
-      this.handleInputBlur(inputValue);
-      this.resetCachedSelectedValue(willUpdateDates);
-    }
-  }
   /**
+   * @deprecated
    * 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);
+  //     }
+  // }
 
-
-  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);
-
-      this.resetCachedSelectedValue(willUpdateDates);
-    }
-  }
   /**
    * clear inset input value when close panel
    */
@@ -50879,20 +50888,114 @@ class foundation_DatePickerFoundation extends foundation {
     const willUpdateDates = isNullOrUndefined(dates) ? value : dates;
 
     if (!this._isControlledComponent('open')) {
-      this._adapter.togglePanel(false);
+      this.close();
+    } else {
+      this.resetInnerSelectedStates(willUpdateDates);
+    }
 
-      this._adapter.unregisterClickOutSide();
-    } // range type picker, closing panel requires the following side effects
+    this._adapter.notifyOpenChange(false);
+  }
 
+  open() {
+    this._adapter.togglePanel(true);
 
-    this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
-    this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
-    this.clearInsetInputValue();
+    this._adapter.registerClickOutSide();
+  }
 
-    this._adapter.notifyOpenChange(false);
+  close() {
+    this._adapter.togglePanel(false, () => this.resetInnerSelectedStates());
+
+    this._adapter.unregisterClickOutSide();
+  }
+
+  focus(focusType) {
+    if (this._isRangeType()) {
+      const rangeInputFocus = focusType !== null && focusType !== void 0 ? focusType : 'rangeStart';
+
+      this._adapter.setRangeInputFocus(rangeInputFocus);
+    } else {
+      this._adapter.setInputFocus();
+    }
+  }
+
+  blur() {
+    if (this._isRangeType()) {
+      this._adapter.setRangeInputBlur();
+    } else {
+      this._adapter.setInputBlur();
+    }
+  }
+  /**
+   * reset cachedSelectedValue, inputValue when close panel
+   */
+
+
+  resetInnerSelectedStates(willUpdateDates) {
+    const {
+      value
+    } = this._adapter.getStates();
+
+    const needResetCachedSelectedValue = !this.isCachedSelectedValueValid(willUpdateDates) || this._adapter.needConfirm() && !this.clickConfirmButton;
+
+    if (needResetCachedSelectedValue) {
+      this.resetCachedSelectedValue(value);
+    }
+
+    this.resetFocus();
+    this.clearInputValue();
+    this.clickConfirmButton = false;
+  }
+
+  resetFocus(e) {
+    this._adapter.setRangeInputFocus(false);
 
     this._adapter.notifyBlur(e);
   }
+  /**
+   * cachedSelectedValue can be `(Date|null)[]` or `null`
+   */
+
+
+  isCachedSelectedValueValid(dates) {
+    const cachedSelectedValue = dates || this._adapter.getState('cachedSelectedValue');
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    let isValid = true;
+
+    switch (true) {
+      case type === 'dateRange':
+      case type === 'dateTimeRange':
+        if (!this._isRangeValueComplete(cachedSelectedValue)) {
+          isValid = false;
+        }
+
+        break;
+
+      default:
+        const value = cachedSelectedValue === null || cachedSelectedValue === void 0 ? void 0 : cachedSelectedValue.filter(item => item);
+
+        if (!(Array.isArray(value) && value.length)) {
+          isValid = false;
+        }
+
+        break;
+    }
+
+    return isValid;
+  }
+  /**
+   * 将输入框内容置空
+   */
+
+
+  clearInputValue() {
+    this._adapter.updateInputValue(null);
+
+    this._adapter.updateInsetInputValue(null);
+  }
   /**
    * Callback when the content of the input box changes
    * Update the date panel if the changed value is a legal date, otherwise only update the input box
@@ -50995,36 +51098,12 @@ class foundation_DatePickerFoundation extends foundation {
    * @param {String} input
    * @param {Event} e
    */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 
   handleInputBlur() {
     let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     let e = arguments.length > 1 ? arguments[1] : undefined;
-    const parsedResult = input ? this._isMultiple() ? this.parseMultipleInput(input, ',', true) : this.parseInput(input) : [];
-    const stateValue = this.getState('value'); // console.log(input, parsedResult);
-
-    if (parsedResult && parsedResult.length) {
-      this._updateValueAndInput(parsedResult, input === '');
-    } else if (input === '') {
-      // if clear input, set input to `''`
-      this._updateValueAndInput('', true, '');
-    } else {
-      this._updateValueAndInput(stateValue);
-    }
-    /**
-     * 当不是范围类型且不需要确认时，使用 stateValue 重置 cachedSelectedValue
-     * 这样做的目的是，在输入非法值时，使用上次选中的值作为已选值
-     * needConfirm 或者 range type 时，我们在 close panel 时调用 resetCachedSelectedValue，这里不用重复调用
-     *
-     * Use stateValue to reset cachedSelectedValue when it is not a range type and does not require confirmation
-     * The purpose of this is to use the last selected value as the selected value when an invalid value is entered
-     * When needConfirm or range type, we call resetCachedSelectedValue when close panel, no need to call repeatedly here
-     */
-
-
-    if (!this._adapter.needConfirm() && !this._isRangeType()) {
-      this.resetCachedSelectedValue(stateValue);
-    }
   }
   /**
    * called when range type rangeEnd input tab press
@@ -51159,6 +51238,7 @@ class foundation_DatePickerFoundation extends foundation {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           const separator = rangeSeparator;
           const values = input.split(separator);
           parsedResult = values && values.reduce((arr, cur) => {
@@ -51382,6 +51462,7 @@ class foundation_DatePickerFoundation extends foundation {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           const startIsTruthy = !isNullOrUndefined(dates[0]);
           const endIsTruthy = !isNullOrUndefined(dates[1]);
 
@@ -51430,6 +51511,7 @@ class foundation_DatePickerFoundation extends foundation {
 
         case 'dateRange':
         case 'dateTimeRange':
+        case 'monthRange':
           for (let i = 0; i < dates.length; i += 2) {
             strs.push(this.formatDates(dates.slice(i, i + 2), customFormat));
           }
@@ -51579,7 +51661,7 @@ class foundation_DatePickerFoundation extends foundation {
     }
   }
   /**
-   * when changing the year and month through the panel when the type is year or month
+   * when changing the year and month through the panel when the type is year or month or monthRange
    * @param {*} item
    */
 
@@ -51591,15 +51673,23 @@ class foundation_DatePickerFoundation extends foundation {
       currentMonth,
       currentYear
     } = item;
+    const {
+      type
+    } = this.getProps();
 
-    if (typeof currentMonth === 'number' && typeof currentYear === 'number') {
-      // Strings with only dates (e.g. "1970-01-01") will be treated as UTC instead of local time #1460
-      const date = new Date(currentYear, currentMonth - 1);
+    if (type === 'month') {
+      const date = new Date(currentYear['left'], currentMonth['left'] - 1);
       this.handleSelectedChange([date]);
+    } else {
+      const dateLeft = new Date(currentYear['left'], currentMonth['left'] - 1);
+      const dateRight = new Date(currentYear['right'], currentMonth['right'] - 1);
+      this.handleSelectedChange([dateLeft, dateRight]);
     }
   }
 
   handleConfirm() {
+    this.clickConfirmButton = true;
+
     const {
       cachedSelectedValue,
       value
@@ -51725,6 +51815,7 @@ class foundation_DatePickerFoundation extends foundation {
 
       case 'dateRange':
       case 'dateTimeRange':
+      case 'monthRange':
         notifyValue = _value.map(v => v && this.localeFormat(v, formatToken));
         notifyDate = [..._value];
         break;
@@ -52293,6 +52384,13 @@ class inputFoundation_InputFoundation extends foundation {
         text = formatDateValues(value, formatToken, undefined, dateFnsLocale);
         break;
 
+      case 'monthRange':
+        text = formatDateValues(value, formatToken, {
+          groupSize: 2,
+          groupInnerSeparator: rangeSeparator
+        }, dateFnsLocale);
+        break;
+
       default:
         break;
     }
@@ -52414,7 +52512,8 @@ class inputFoundation_InputFoundation extends foundation {
   getInsetInputPlaceholder() {
     const {
       type,
-      format
+      format,
+      rangeSeparator
     } = this._adapter.getProps();
 
     const insetInputFormat = getInsetInputFormatToken({
@@ -52433,6 +52532,9 @@ class inputFoundation_InputFoundation extends foundation {
       case 'dateTime':
       case 'dateTimeRange':
         [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+
+      case 'monthRange':
+        datePlaceholder = insetInputFormat + rangeSeparator + insetInputFormat;
         break;
     }
 
@@ -52517,6 +52619,7 @@ class inputFoundation_InputFoundation extends foundation {
     switch (type) {
       case 'date':
       case 'month':
+      case 'monthRange':
         inputValue = insetInputValue.monthLeft.dateInput;
         break;
 
@@ -52886,6 +52989,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
+  isRenderMultipleInputs() {
+    const {
+      type
+    } = this.props; // isRange and not monthRange render multiple inputs
+
+    return type.includes('Range') && type !== 'monthRange';
+  }
+
   renderInputInset() {
     const {
       type,
@@ -52899,9 +53010,6 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       density,
       insetInput
     } = this.props;
-
-    const _isRangeType = type.includes('Range');
-
     const newInsetInputValue = this.foundation.getInsetInputValue({
       value,
       insetInputValue
@@ -52938,7 +53046,7 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       valuePath: 'monthLeft.timeInput',
       onChange: this.handleInsetInputChange,
       onFocus: handleInsetTimeFocus
-    }), _isRangeType && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+    }), this.isRenderMultipleInputs() && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: separatorCls
     }, density === 'compact' ? null : '-'), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetDateInput, {
       forwardRef: rangeInputEndRef,
@@ -52983,6 +53091,7 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       prefix,
       autofocus,
       size,
+      inputRef,
       // range input support props, no need passing to not range type
       rangeInputStartRef,
       rangeInputEndRef,
@@ -52995,7 +53104,7 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       insetInputValue,
       defaultPickerValue
     } = _a,
-          rest = dateInput_rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
+          rest = dateInput_rest(_a, ["placeholder", "type", "value", "inputValue", "inputStyle", "disabled", "showClear", "inputReadOnly", "insetLabel", "validateStatus", "block", "prefixCls", "multiple", "dateFnsLocale", "onBlur", "onClear", "onFocus", "prefix", "autofocus", "size", "inputRef", "rangeInputStartRef", "rangeInputEndRef", "onRangeClear", "onRangeBlur", "onRangeEndTabPress", "rangeInputFocus", "rangeSeparator", "insetInput", "insetInputValue", "defaultPickerValue"]);
 
     const dateIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
       "aria-hidden": true
@@ -53013,22 +53122,23 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     }
 
     const inputCls = classnames_default()({
-      [`${prefixCls}-input-readonly`]: inputReadOnly
+      [`${prefixCls}-input-readonly`]: inputReadOnly,
+      [`${prefixCls}-monthRange-input`]: type === 'monthRange'
     });
-    const isRangeType = /range/i.test(type);
     const rangeProps = Object.assign(Object.assign({}, this.props), {
       text,
       suffix,
       inputCls
     });
-    return isRangeType ? this.renderRangeInput(rangeProps) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(input_0, Object.assign({}, rest, {
+    return this.isRenderMultipleInputs() ? this.renderRangeInput(rangeProps) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(input_0, Object.assign({}, rest, {
+      ref: inputRef,
       insetLabel: insetLabel,
       disabled: disabled,
       readonly: inputReadOnly,
       className: inputCls,
       style: inputStyle,
       hideSuffix: showClear,
-      placeholder: placeholder,
+      placeholder: type === 'monthRange' && Array.isArray(placeholder) ? placeholder[0] + rangeSeparator + placeholder[1] : placeholder,
       onEnterPress: this.handleEnterPress,
       onChange: this.handleChange,
       onClear: this.handleInputClear,
@@ -56989,6 +57099,8 @@ function setYear(dirtyDate, dirtyYear) {
 // CONCATENATED MODULE: ../semi-foundation/datePicker/yearAndMonthFoundation.ts
 
 
+
+
 class yearAndMonthFoundation_YearAndMonthFoundation extends foundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
@@ -57000,18 +57112,58 @@ class yearAndMonthFoundation_YearAndMonthFoundation extends foundation {
 
   destroy() {}
 
-  selectYear(item) {
-    const year = item.value;
+  selectYear(item, panelType) {
+    // const year = item.value;
+    const {
+      currentYear,
+      currentMonth
+    } = this.getStates();
+    const {
+      type
+    } = this.getProps();
+    const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
+    const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
+
+    const year = cloneDeep_default()(currentYear);
+
+    year[panelType] = item.value; // make sure the right panel time is always less than the left panel time
 
-    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item));
+    if (type === 'monthRange') {
+      const isSameYearIllegalDate = year[left] === year[right] && currentMonth[left] > currentMonth[right];
+
+      if (panelType === left && item.value > year[right] || panelType === left && isSameYearIllegalDate) {
+        // 1. select left year and left year > right year
+        // 2. select left year, left year = right year, but left date > right date
+        year[right] = item.value + 1;
+      } else if (panelType === right && isSameYearIllegalDate) {
+        // 1. select right year, left year = right year, but left date > right date
+        year[left] = item.value - 1;
+      }
+    }
+
+    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item, panelType, year));
 
     this._adapter.notifySelectYear(year);
   }
 
-  selectMonth(item) {
+  selectMonth(item, panelType) {
     const {
-      month
-    } = item;
+      currentMonth,
+      currentYear
+    } = this.getStates();
+    const {
+      type
+    } = this.getProps();
+    const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
+    const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
+
+    const month = cloneDeep_default()(currentMonth);
+
+    month[panelType] = item.month; // make sure the right panel time is always less than the left panel time
+
+    if (type === 'monthRange' && panelType === left && currentYear[left] === currentYear[right] && item.value > month[right]) {
+      month[right] = item.month + 1;
+    }
 
     this._adapter.setCurrentMonth(month);
 
@@ -57022,7 +57174,7 @@ class yearAndMonthFoundation_YearAndMonthFoundation extends foundation {
    */
 
 
-  autoSelectMonth(item) {
+  autoSelectMonth(item, panelType, year) {
     const {
       disabledDate,
       locale
@@ -57034,14 +57186,14 @@ class yearAndMonthFoundation_YearAndMonthFoundation extends foundation {
     } = this._adapter.getStates();
 
     const currentDate = setYear(Date.now(), item.year);
-    const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth - 1));
+    const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth[panelType] - 1));
 
     if (isCurrentMonthDisabled) {
       const currentIndex = months.findIndex(_ref => {
         let {
           month
         } = _ref;
-        return month === currentMonth;
+        return month === currentMonth[panelType];
       });
       let validMonth; // First look in the back, if you can't find it in the back, then look in the front
 
@@ -57062,11 +57214,13 @@ class yearAndMonthFoundation_YearAndMonthFoundation extends foundation {
       }
 
       if (validMonth) {
-        this.selectMonth({
-          month: validMonth.month,
-          value: locale.fullMonths[validMonth.month],
-          disabled: false
-        });
+        const month = cloneDeep_default()(currentMonth);
+
+        month[panelType] = validMonth.month; // change year and month same time
+
+        this._adapter.setCurrentYearAndMonth(year, month);
+
+        this._adapter.notifySelectYearAndMonth(year, month);
       }
     }
   }
@@ -57090,8 +57244,8 @@ const getYears = () => {
 
 
 
-/* eslint-disable max-len */
 
+/* eslint-disable max-len */
 
 
 
@@ -57110,12 +57264,12 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
   constructor(props) {
     super(props);
 
-    this.selectYear = item => {
-      this.foundation.selectYear(item);
+    this.selectYear = (item, panelType) => {
+      this.foundation.selectYear(item, panelType);
     };
 
-    this.selectMonth = item => {
-      this.foundation.selectMonth(item);
+    this.selectMonth = (item, panelType) => {
+      this.foundation.selectMonth(item, panelType);
     };
 
     this.reselect = () => {
@@ -57139,8 +57293,16 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       currentYear,
       currentMonth
     } = props;
-    currentYear = currentYear || now.getFullYear();
-    currentMonth = currentMonth || now.getMonth() + 1;
+    const currentLeftYear = currentYear.left || now.getFullYear();
+    const currentLeftMonth = currentMonth.left || now.getMonth() + 1;
+    currentYear = {
+      left: currentLeftYear,
+      right: currentLeftYear
+    };
+    currentMonth = {
+      left: currentLeftMonth,
+      right: currentMonth.right || currentLeftMonth + 1
+    };
     this.state = {
       years: _utils_getYears().map(year => ({
         value: year,
@@ -57168,6 +57330,10 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       setCurrentMonth: currentMonth => this.setState({
         currentMonth
       }),
+      setCurrentYearAndMonth: (currentYear, currentMonth) => this.setState({
+        currentYear,
+        currentMonth
+      }),
       notifySelectYear: year => this.props.onSelect({
         currentMonth: this.state.currentMonth,
         currentYear: year
@@ -57176,26 +57342,29 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
         currentYear: this.state.currentYear,
         currentMonth: month
       }),
+      notifySelectYearAndMonth: (year, month) => this.props.onSelect({
+        currentYear: year,
+        currentMonth: month
+      }),
       notifyBackToMain: () => this.props.onBackToMain()
     });
   }
 
   static getDerivedStateFromProps(props, state) {
     const willUpdateStates = {};
-    const now = new Date();
 
-    if (!isNullOrUndefined(props.currentMonth) && props.currentMonth !== state.currentMonth && props.currentMonth !== 0) {
-      willUpdateStates.currentMonth = props.currentMonth || now.getMonth() + 1;
+    if (!isEqual_default()(props.currentYear, state.currentYear) && props.currentYear.left !== 0) {
+      willUpdateStates.currentYear = props.currentYear;
     }
 
-    if (isNullOrUndefined(props.currentYear) && props.currentYear !== state.currentYear && props.currentYear !== 0) {
-      willUpdateStates.currentYear = props.currentYear || now.getFullYear();
+    if (!isEqual_default()(props.currentMonth, state.currentMonth) && props.currentMonth.left !== 0) {
+      willUpdateStates.currentMonth = props.currentMonth;
     }
 
     return willUpdateStates;
   }
 
-  renderColYear() {
+  renderColYear(panelType) {
     const {
       years,
       currentYear,
@@ -57208,7 +57377,22 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       yearCycled,
       yearAndMonthOpts
     } = this.props;
-    const currentDate = setMonth(Date.now(), currentMonth - 1);
+    const currentDate = setMonth(Date.now(), currentMonth[panelType] - 1);
+    const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
+    const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
+
+    const needDisabled = year => {
+      if (panelType === right && currentYear[left]) {
+        if (currentMonth[left] <= currentMonth[right]) {
+          return currentYear[left] > year;
+        } else {
+          return currentYear[left] >= year;
+        }
+      }
+
+      return false;
+    };
+
     const list = years.map(_ref => {
       let {
         value,
@@ -57223,10 +57407,11 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
           month: month - 1
         }));
       });
+      const isRightPanelDisabled = needDisabled(year);
       return {
         year,
         value,
-        disabled: isAllMonthDisabled
+        disabled: isAllMonthDisabled || isRightPanelDisabled
       };
     });
 
@@ -57242,14 +57427,14 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       cycled: yearCycled,
       list: list,
       transform: transform,
-      selectedIndex: years.findIndex(item => item.value === currentYear),
+      selectedIndex: years.findIndex(item => item.value === currentYear[panelType]),
       type: "year",
-      onSelect: this.selectYear,
+      onSelect: item => this.selectYear(item, panelType),
       mode: "normal"
     }, yearAndMonthOpts));
   }
 
-  renderColMonth() {
+  renderColMonth(panelType) {
     const {
       months,
       currentMonth,
@@ -57265,7 +57450,9 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
 
     let transform = val => val;
 
-    const currentDate = setYear(Date.now(), currentYear);
+    const currentDate = setYear(Date.now(), currentYear[panelType]);
+    const left = datePicker_constants_strings.PANEL_TYPE_LEFT;
+    const right = datePicker_constants_strings.PANEL_TYPE_RIGHT;
 
     if (localeCode === 'zh-CN' || localeCode === 'zh-TW') {
       // Only Chinese needs to add [month] after the selected month
@@ -57278,14 +57465,15 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
         value,
         month
       } = _ref3;
+      const isRightPanelDisabled = panelType === right && currentMonth[left] && currentYear[left] === currentYear[right] && currentMonth[left] > month;
       return {
         month,
-        disabled: disabledDate(setMonth(currentDate, month - 1)),
+        disabled: disabledDate(setMonth(currentDate, month - 1)) || isRightPanelDisabled,
         value: locale.fullMonths[value] // Actual rendered text
 
       };
     });
-    const selectedIndex = list.findIndex(item => item.month === currentMonth);
+    const selectedIndex = list.findIndex(item => item.month === currentMonth[panelType]);
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(scrollItem_ScrollItem, Object.assign({
       ref: this.monthRef,
       cycled: monthCycled,
@@ -57293,11 +57481,15 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       transform: transform,
       selectedIndex: selectedIndex,
       type: "month",
-      onSelect: this.selectMonth,
+      onSelect: item => this.selectMonth(item, panelType),
       mode: 'normal'
     }, yearAndMonthOpts));
   }
 
+  renderPanel(panelType) {
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(scrollList_0, null, this.renderColYear(panelType), this.renderColMonth(panelType)));
+  }
+
   render() {
     const {
       locale,
@@ -57305,13 +57497,27 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       density,
       presetPosition,
       renderQuickControls,
-      renderDateInput
+      renderDateInput,
+      type
     } = this.props;
-    const prefix = `${yearAndMonth_prefixCls}-yearmonth-header`; // i18n
+    const prefix = `${yearAndMonth_prefixCls}-yearmonth-header`;
+    const bodyCls = `${yearAndMonth_prefixCls}-yearmonth-body`; // i18n
 
     const selectDateText = locale.selectDate;
     const iconSize = density === 'compact' ? 'default' : 'large';
     const buttonSize = density === 'compact' ? 'small' : 'default';
+    const panelTypeLeft = datePicker_constants_strings.PANEL_TYPE_LEFT;
+    const panelTypeRight = datePicker_constants_strings.PANEL_TYPE_RIGHT;
+    let content = null;
+
+    if (type === 'month') {
+      content = this.renderPanel(panelTypeLeft);
+    } else {
+      content = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        className: bodyCls
+      }, this.renderPanel(panelTypeLeft), this.renderPanel(panelTypeRight));
+    }
+
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, noBackBtn ? null : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: prefix
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
@@ -57326,14 +57532,14 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
       style: {
         display: 'flex'
       }
-    }, presetPosition === "left" && renderQuickControls, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, renderDateInput, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(scrollList_0, null, this.renderColYear(), this.renderColMonth())), presetPosition === "right" && renderQuickControls) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, renderDateInput, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(scrollList_0, null, this.renderColYear(), this.renderColMonth())));
+    }, presetPosition === "left" && type !== 'monthRange' && renderQuickControls, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", null, renderDateInput, content), presetPosition === "right" && type !== 'monthRange' && renderQuickControls) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.Fragment, null, renderDateInput, content));
   }
 
 }
 
 yearAndMonth_YearAndMonth.propTypes = {
-  currentYear: prop_types_default.a.number,
-  currentMonth: prop_types_default.a.number,
+  currentYear: prop_types_default.a.object,
+  currentMonth: prop_types_default.a.object,
   onSelect: prop_types_default.a.func,
   locale: prop_types_default.a.object,
   localeCode: prop_types_default.a.string,
@@ -57344,14 +57550,16 @@ yearAndMonth_YearAndMonth.propTypes = {
   density: prop_types_default.a.string,
   presetPosition: prop_types_default.a.oneOf(datePicker_constants_strings.PRESET_POSITION_SET),
   renderQuickControls: prop_types_default.a.node,
-  renderDateInput: prop_types_default.a.node
+  renderDateInput: prop_types_default.a.node,
+  type: prop_types_default.a.oneOf(datePicker_constants_strings.TYPE_SET)
 };
 yearAndMonth_YearAndMonth.defaultProps = {
   disabledDate: stubFalse_default.a,
   monthCycled: false,
   yearCycled: false,
   noBackBtn: false,
-  onSelect: noop_default.a
+  onSelect: noop_default.a,
+  type: 'month'
 };
 /* harmony default export */ var yearAndMonth = (yearAndMonth_YearAndMonth);
 // CONCATENATED MODULE: ./datePicker/monthsGrid.tsx
@@ -57839,9 +58047,17 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       ref: current => this.cacheRefCurrent(`yam-${panelType}`, current),
       locale: locale,
       localeCode: localeCode,
-      currentYear: y,
-      currentMonth: m,
-      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear, item.currentMonth - 1)),
+      // currentYear={y}
+      // currentMonth={m}
+      currentYear: {
+        left: y,
+        right: 0
+      },
+      currentMonth: {
+        left: m,
+        right: 0
+      },
+      onSelect: item => this.foundation.toYearMonth(panelType, new Date(item.currentYear.left, item.currentMonth.left - 1)),
       onBackToMain: () => {
         this.foundation.showDatePanel(panelType);
         const wrapCurrent = this.adapter.getCache(`wrap-${panelType}`);
@@ -58302,7 +58518,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         density,
         topSlot,
         bottomSlot,
-        presetPosition
+        presetPosition,
+        type
       } = this.props;
       const wrapCls = classnames_default()(datePicker_constants_cssClasses.PREFIX, {
         [datePicker_constants_cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
@@ -58311,11 +58528,12 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
-        style: dropdownStyle
+        style: dropdownStyle,
+        "x-type": type
       }, topSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: `${datePicker_constants_cssClasses.PREFIX}-topSlot`,
         "x-semi-prop": "topSlot"
-      }, topSlot), presetPosition === "top" && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && this.renderQuickControls(), bottomSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      }, topSlot), presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls(), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls(), bottomSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: `${datePicker_constants_cssClasses.PREFIX}-bottomSlot`,
         "x-semi-prop": "bottomSlot"
       }, bottomSlot), this.renderFooter(locale, localeCode));
@@ -58325,15 +58543,31 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       const {
         density,
         presetPosition,
-        yearAndMonthOpts
+        yearAndMonthOpts,
+        type
       } = this.props;
       const date = this.state.value[0];
-      let year = 0;
-      let month = 0;
+      const year = {
+        left: 0,
+        right: 0
+      };
+      const month = {
+        left: 0,
+        right: 0
+      };
 
       if (isDate_default()(date)) {
-        year = date.getFullYear();
-        month = date.getMonth() + 1;
+        year.left = date.getFullYear();
+        month.left = date.getMonth() + 1;
+      }
+
+      if (type === 'monthRange') {
+        const dateRight = this.state.value[1];
+
+        if (isDate_default()(dateRight)) {
+          year.right = dateRight.getFullYear();
+          month.right = dateRight.getMonth() + 1;
+        }
       }
 
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(yearAndMonth, {
@@ -58349,6 +58583,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         presetPosition: presetPosition,
         renderQuickControls: this.renderQuickControls(),
         renderDateInput: this.renderDateInput(),
+        type: type,
         yearAndMonthOpts: yearAndMonthOpts
       });
     };
@@ -58408,6 +58643,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
     this.triggerElRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.panelRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.monthGrid = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
+    this.inputRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.rangeInputStartRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.rangeInputEndRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.focusRecordsRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef(); // @ts-ignore ignore readonly
@@ -58423,10 +58659,10 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
     var _this2 = this;
 
     return Object.assign(Object.assign({}, super.adapter), {
-      togglePanel: panelShow => {
+      togglePanel: (panelShow, cb) => {
         this.setState({
           panelShow
-        });
+        }, cb);
 
         if (!panelShow) {
           this.focusRecordsRef.current.rangeEnd = false;
@@ -58440,17 +58676,20 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         }
 
         this.clickOutSideHandler = e => {
-          if (this.adapter.needConfirm()) {
-            return;
-          }
-
           const triggerEl = this.triggerElRef && this.triggerElRef.current;
           const panelEl = this.panelRef && this.panelRef.current;
           const isInTrigger = triggerEl && triggerEl.contains(e.target);
           const isInPanel = panelEl && panelEl.contains(e.target);
+          const clickOutSide = !isInTrigger && !isInPanel && this._mounted;
 
-          if (!isInTrigger && !isInPanel && this._mounted) {
-            this.foundation.closePanel(e);
+          if (this.adapter.needConfirm()) {
+            clickOutSide && this.props.onClickOutSide();
+            return;
+          } else {
+            if (clickOutSide) {
+              this.props.onClickOutSide();
+              this.foundation.closePanel(e);
+            }
           }
         };
 
@@ -58517,7 +58756,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         }
       },
       needConfirm: () => ['dateTime', 'dateTimeRange'].includes(this.props.type) && this.props.needConfirm === true,
-      typeIsYearOrMonth: () => ['month', 'year'].includes(this.props.type),
+      typeIsYearOrMonth: () => ['month', 'year', 'monthRange'].includes(this.props.type),
       setRangeInputFocus: rangeInputFocus => {
         const {
           preventScroll
@@ -58619,6 +58858,39 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
             break;
         }
       },
+      setInputFocus: () => {
+        const {
+          preventScroll
+        } = this.props;
+
+        const inputNode = get_default()(this, 'inputRef.current');
+
+        inputNode && inputNode.focus({
+          preventScroll
+        });
+      },
+      setInputBlur: () => {
+        const inputNode = get_default()(this, 'inputRef.current');
+
+        inputNode && inputNode.blur();
+      },
+      setRangeInputBlur: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        if (rangeInputFocus === 'rangeStart') {
+          const inputStartNode = get_default()(this, 'rangeInputStartRef.current');
+
+          inputStartNode && inputStartNode.blur();
+        } else if (rangeInputFocus === 'rangeEnd') {
+          const inputEndNode = get_default()(this, 'rangeInputEndRef.current');
+
+          inputEndNode && inputEndNode.blur();
+        }
+
+        this.adapter.setRangeInputFocus(false);
+      },
       setTriggerDisabled: disabled => {
         this.setState({
           triggerDisabled: disabled
@@ -58661,6 +58933,33 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
     super.componentWillUnmount();
   }
 
+  open() {
+    this.foundation.open();
+  }
+
+  close() {
+    this.foundation.close();
+  }
+  /**
+   *
+   * When selecting a range, the default focus is on the start input box, passing in `rangeEnd` can focus on the end input box
+   *
+   * When `insetInput` is `true`, due to trigger disabled, the cursor will focus on the input box of the popup layer panel
+   *
+   * 范围选择时，默认聚焦在开始输入框，传入 `rangeEnd` 可以聚焦在结束输入框
+   *
+   * `insetInput` 打开时，由于 trigger 禁用，会把焦点放在弹出面板的输入框上
+   */
+
+
+  focus(focusType) {
+    this.foundation.focus(focusType);
+  }
+
+  blur() {
+    this.foundation.blur();
+  }
+
   renderMonthGrid(locale, localeCode, dateFnsLocale) {
     const {
       type,
@@ -58782,7 +59081,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
     })) : null;
   }
 
-  renderInner(extraProps) {
+  renderInner() {
     const {
       clearIcon,
       type,
@@ -58824,7 +59123,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
     const phText = placeholder || locale.placeholder[type]; // i18n
     // These values should be passed to triggerRender, do not delete any key if it is not necessary
 
-    const props = Object.assign(Object.assign({}, extraProps), {
+    const props = {
       placeholder: phText,
       clearIcon,
       disabled: inputDisabled,
@@ -58858,8 +59157,9 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       onRangeClear: this.handleRangeInputClear,
       onRangeEndTabPress: this.handleRangeEndTabPress,
       rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
-      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
-    });
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef,
+      inputRef: this.inputRef
+    };
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       // tooltip will mount a11y props to children
       // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
@@ -58974,7 +59274,8 @@ datePicker_DatePicker.propTypes = {
   onPanelChange: prop_types_default.a.func,
   rangeSeparator: prop_types_default.a.string,
   preventScroll: prop_types_default.a.bool,
-  yearAndMonthOpts: prop_types_default.a.object
+  yearAndMonthOpts: prop_types_default.a.object,
+  onClickOutSide: prop_types_default.a.func
 };
 datePicker_DatePicker.defaultProps = {
   onChangeWithDateFirst: true,
@@ -59011,7 +59312,8 @@ datePicker_DatePicker.defaultProps = {
   autoSwitchDate: true,
   syncSwitchMonth: false,
   rangeSeparator: datePicker_constants_strings.DEFAULT_SEPARATOR_RANGE,
-  insetInput: false
+  insetInput: false,
+  onClickOutSide: noop_default.a
 };
 // CONCATENATED MODULE: ./datePicker/index.tsx
 
@@ -73524,11 +73826,14 @@ class select_Select extends baseComponent_BaseComponent {
     }, arrowIcon) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: `${select_prefixcls}-arrow-empty`
     });
-    const clear = clearIcon ? clearIcon : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null);
+    const clear = clearIcon ? clearIcon : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null); // semantics of onSearch are more in line with behavior, onChange is alias of onSearch, will be deprecate next major version
+
     const inner = useCustomTrigger ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, {
       value: Array.from(selections.values()),
       inputValue: inputValue,
       onChange: this.handleInputChange,
+      onSearch: this.handleInputChange,
+      onRemove: item => this.foundation.removeTag(item),
       onClear: this.onClear,
       disabled: disabled,
       triggerRender: triggerRender,
@@ -77045,7 +77350,7 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
       key: "dialog-element",
       role: "dialog",
       tabIndex: -1,
-      className: classnames_default()(`${SideSheetContent_prefixCls}-inner`, `${SideSheetContent_prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : ""),
+      className: classnames_default()(`${SideSheetContent_prefixCls}-inner`, `${SideSheetContent_prefixCls}-inner-wrap`, (_a = this.props.dialogClassName) !== null && _a !== void 0 ? _a : "", `${SideSheetContent_prefixCls}-size-${props.size}`),
       // onMouseDown={this.onDialogMouseDown}
       style: Object.assign(Object.assign({}, props.style), style)
     }, this.props.wrapperExtraProps), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -77068,7 +77373,8 @@ class SideSheetContent_SideSheetContent extends external_root_React_commonjs2_re
       width
     } = this.props;
     const wrapperCls = classnames_default()(className, {
-      [`${SideSheetContent_prefixCls}-fixed`]: !mask
+      [`${SideSheetContent_prefixCls}-fixed`]: !mask,
+      [`${SideSheetContent_prefixCls}-size-${this.props.size}`]: !mask
     });
     const wrapperStyle = {};
 
@@ -77316,7 +77622,6 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
     } = this.context;
     const isVertical = placement === 'left' || placement === 'right';
     const isHorizontal = placement === 'top' || placement === 'bottom';
-    const sheetWidth = isVertical ? width ? width : defaultWidthList[size] : '100%';
     const sheetHeight = isHorizontal ? height ? height : sideSheet_defaultHeight : '100%';
     const classList = classnames_default()(sideSheet_prefixCls, className, {
       [`${sideSheet_prefixCls}-${placement}`]: placement,
@@ -77325,11 +77630,15 @@ class sideSheet_SideSheet extends baseComponent_BaseComponent {
       [`${sideSheet_prefixCls}-rtl`]: direction === 'rtl',
       [`${sideSheet_prefixCls}-hidden`]: keepDOM && this.state.displayNone
     });
-    const contentProps = Object.assign(Object.assign({}, props), {
+    const contentProps = Object.assign(Object.assign(Object.assign({}, isVertical ? width ? {
+      width
+    } : {} : {
+      width: "100%"
+    }), props), {
       visible,
       motion: false,
+      size,
       className: classList,
-      width: sheetWidth,
       height: sheetHeight,
       onClose: this.handleCancel
     });
@@ -79923,11 +80232,8 @@ class foundation_SwitchFoundation extends foundation {
 
   init() {
     const {
-      defaultChecked,
-      checked,
       disabled
     } = this.getProps();
-    this.setChecked(defaultChecked || checked);
     this.setDisabled(disabled);
   }
 
@@ -80006,7 +80312,7 @@ class switch_Switch extends baseComponent_BaseComponent {
     };
 
     this.state = {
-      nativeControlChecked: false,
+      nativeControlChecked: props.defaultChecked || props.checked,
       nativeControlDisabled: false,
       focusVisible: false
     };
@@ -93698,7 +94004,8 @@ class foundation_TreeSelectFoundation extends foundation {
       isFocus
     } = this.getStates();
     const {
-      searchPosition
+      searchPosition,
+      clickTriggerToHide
     } = this.getProps();
 
     if (isDisabled) {
@@ -93713,7 +94020,7 @@ class foundation_TreeSelectFoundation extends foundation {
           return;
         }
 
-        this.close(e);
+        clickTriggerToHide && this.close(e);
       } else {
         this.open();
       }
@@ -94701,7 +95008,9 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         onClear: this.handleClear,
         componentName: 'TreeSelect',
         triggerRender: triggerRender,
-        componentProps: Object.assign({}, this.props)
+        componentProps: Object.assign({}, this.props),
+        onSearch: this.search,
+        onRemove: this.removeTag
       }) : [/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_["Fragment"], {
         key: 'prefix'
       }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_["Fragment"], {
@@ -95635,7 +95944,8 @@ treeSelect_TreeSelect.propTypes = {
   'aria-label': prop_types_default.a.string,
   showRestTagsPopover: prop_types_default.a.bool,
   restTagsPopoverProps: prop_types_default.a.object,
-  preventScroll: prop_types_default.a.bool
+  preventScroll: prop_types_default.a.bool,
+  clickTriggerToHide: prop_types_default.a.bool
 };
 treeSelect_TreeSelect.defaultProps = {
   searchPosition: treeSelect_constants_strings.SEARCH_POSITION_DROPDOWN,
@@ -95665,7 +95975,8 @@ treeSelect_TreeSelect.defaultProps = {
   checkRelation: 'related',
   'aria-label': 'TreeSelect',
   showRestTagsPopover: false,
-  restTagsPopoverProps: {}
+  restTagsPopoverProps: {},
+  clickTriggerToHide: true
 };
 /* harmony default export */ var treeSelect_0 = (treeSelect_TreeSelect);
 // CONCATENATED MODULE: ../semi-foundation/upload/constants.ts