@douyinfe/semi-ui 2.6.0-beta.0 → 2.7.0

package/dist/umd/semi-ui.js

@@ -24247,25 +24247,25 @@ class foundation_Tooltip extends foundation {
         break;
 
       case 'leftTopOver':
-        left = triggerRect.left;
-        top = triggerRect.top;
+        left = triggerRect.left - SPACING;
+        top = triggerRect.top - SPACING;
         break;
 
       case 'rightTopOver':
-        left = triggerRect.right;
-        top = triggerRect.top;
+        left = triggerRect.right + SPACING;
+        top = triggerRect.top - SPACING;
         translateX = -1;
         break;
 
       case 'leftBottomOver':
-        left = triggerRect.left;
-        top = triggerRect.bottom;
+        left = triggerRect.left - SPACING;
+        top = triggerRect.bottom + SPACING;
         translateY = -1;
         break;
 
       case 'rightBottomOver':
-        left = triggerRect.right;
-        top = triggerRect.bottom;
+        left = triggerRect.right + SPACING;
+        top = triggerRect.bottom + SPACING;
         translateX = -1;
         translateY = -1;
         break;
@@ -26895,7 +26895,9 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
         } = _ref;
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", assign_default()({
           className: classnames_default()(className, animateCls),
-          style: assign_default()(assign_default()(assign_default()({}, animateStyle), {
+          style: assign_default()(assign_default()(assign_default()({
+            visibility: 'visible'
+          }, animateStyle), {
             transformOrigin
           }), style)
         }, portalEventSet, animateEvents, {
@@ -26907,7 +26909,9 @@ class tooltip_Tooltip extends baseComponent_BaseComponent {
         className: className
       }, portalEventSet, {
         "x-placement": placement,
-        style: style
+        style: assign_default()({
+          visibility: motion ? undefined : 'visible'
+        }, style)
       }), content, icon);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(_portal, {
         getPopupContainer: this.props.getPopupContainer,
@@ -36381,6 +36385,7 @@ var buttonGroup_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 const buttonGroup_prefixCls = button_constants_cssClasses.PREFIX;
 const buttonGroup_btnSizes = button_constants_strings.sizes;
 class buttonGroup_ButtonGroup extends baseComponent_BaseComponent {
@@ -36391,11 +36396,13 @@ class buttonGroup_ButtonGroup extends baseComponent_BaseComponent {
       disabled,
       size,
       type,
+      className,
       'aria-label': ariaLabel
     } = _a,
-          rest = buttonGroup_rest(_a, ["children", "disabled", "size", "type", 'aria-label']);
+          rest = buttonGroup_rest(_a, ["children", "disabled", "size", "type", "className", 'aria-label']);
 
     let inner;
+    const cls = classnames_default()("".concat(buttonGroup_prefixCls, "-group"), className);
 
     if (children) {
       var _context;
@@ -36410,7 +36417,7 @@ class buttonGroup_ButtonGroup extends baseComponent_BaseComponent {
     }
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-      className: "".concat(buttonGroup_prefixCls, "-group"),
+      className: cls,
       role: "group",
       "aria-label": ariaLabel
     }, inner);
@@ -47182,6 +47189,36 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       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, displayTag, !isEmpty_default()(hiddenTag) && this.renderPlusN(hiddenTag));
     };
 
+    this.renderDisplayText = () => {
+      const {
+        displayProp,
+        separator,
+        displayRender
+      } = this.props;
+      const {
+        selectedKeys
+      } = this.state;
+      let displayText = '';
+
+      if (selectedKeys.size) {
+        const displayPath = this.foundation.getItemPropPath([...selectedKeys][0], displayProp);
+
+        if (displayRender && typeof displayRender === 'function') {
+          displayText = displayRender(displayPath);
+        } else {
+          displayText = map_default()(displayPath).call(displayPath, (path, index) => {
+            var _context3;
+
+            return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_["Fragment"], {
+              key: concat_default()(_context3 = "".concat(path, "-")).call(_context3, index)
+            }, index < displayPath.length - 1 ? /*#__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, path, separator) : path);
+          });
+        }
+      }
+
+      return displayText;
+    };
+
     this.renderSelectContent = () => {
       const {
         placeholder,
@@ -47189,7 +47226,6 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         multiple
       } = this.props;
       const {
-        selectedKeys,
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
@@ -47204,9 +47240,9 @@ class cascader_Cascader extends baseComponent_BaseComponent {
 
           return this.renderMultipleTags();
         } else {
-          const displayText = selectedKeys.size ? this.foundation.renderDisplayText([...selectedKeys][0]) : '';
+          const displayText = this.renderDisplayText();
           const spanCls = classnames_default()({
-            ["".concat(cascader_prefixcls, "-selection-placeholder")]: !displayText || !displayText.length
+            ["".concat(cascader_prefixcls, "-selection-placeholder")]: !displayText
           });
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
             className: spanCls
@@ -47751,7 +47787,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
   }
 
   renderTagInput() {
-    var _context3;
+    var _context4;
 
     const {
       size,
@@ -47771,7 +47807,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
     const tagValue = [];
     const realKeys = this.mergeType === cascader_constants_strings.NONE_MERGE_TYPE ? checkedKeys : resolvedCheckedKeys;
 
-    for_each_default()(_context3 = [...realKeys]).call(_context3, checkedKey => {
+    for_each_default()(_context4 = [...realKeys]).call(_context4, checkedKey => {
       if (!isEmpty_default()(keyEntities[checkedKey])) {
         tagValue.push(keyEntities[checkedKey].valuePath);
       }
@@ -48705,6 +48741,70 @@ function forwardStatics(obj, srcObj) {
 
   return obj;
 }
+// CONCATENATED MODULE: ../semi-foundation/datePicker/constants.ts
+
+
+
+const dayItemClasses = {
+  DAY_TODAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-today"),
+  DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inrange"),
+  DAY_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inhover"),
+  DAY_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected"),
+  DAY_SELECTED_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start"),
+  DAY_SELECTED_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end"),
+  DAY_DISABLED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-disabled"),
+  DAY_HOVER_DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday"),
+  DAY_HOVER_DAY_OFFSET: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-offset"),
+  DAY_IN_OFFSET_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inoffsetrange"),
+  DAY_SELECTED_RANGE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selectedrange-hover"),
+  DAY_OFFSET_RANGE_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-start"),
+  DAY_OFFSET_RANGE_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-end"),
+  DAY_SELECTED_START_AFTER_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start-afterhover"),
+  DAY_SELECTED_END_BEFORE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end-beforehover"),
+  DAY_HOVER_DAY_BEFORE_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-beforerange"),
+  DAY_HOVER_DAY_AFTER_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-afterrange"),
+  DAY_HOVER_DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-inrange"),
+  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-around-singleselected")
+};
+
+const datePicker_constants_cssClasses = assign_default()({
+  PREFIX: "".concat(BASE_CLASS_PREFIX, "-datepicker"),
+  NAVIGATION: "".concat(BASE_CLASS_PREFIX, "-datepicker-navigation"),
+  PANEL_YAM: "".concat(BASE_CLASS_PREFIX, "-datepicker-panel-yam"),
+  MONTH: "".concat(BASE_CLASS_PREFIX, "-datepicker-month"),
+  WEEKDAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-weekday"),
+  WEEKS: "".concat(BASE_CLASS_PREFIX, "-datepicker-weeks"),
+  WEEK: "".concat(BASE_CLASS_PREFIX, "-datepicker-week"),
+  DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day")
+}, dayItemClasses);
+
+const constants_formatToken = {
+  FORMAT_FULL_DATE: 'yyyy-MM-dd',
+  FORMAT_TIME_PICKER: 'HH:mm:ss',
+  FORMAT_DATE_TIME: 'yyyy-MM-dd HH:mm:ss',
+  FORMAT_YEAR_MONTH: 'yyyy-MM'
+};
+
+const datePicker_constants_strings = assign_default()({
+  DEFAULT_SEPARATOR_MULTIPLE: ',',
+  DEFAULT_SEPARATOR_RANGE: ' ~ ',
+  SIZE_SET: ['small', 'default', 'large'],
+  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
+  DENSITY_SET: ['default', 'compact'],
+  PANEL_TYPE_LEFT: 'left',
+  PANEL_TYPE_RIGHT: 'right',
+  STATUS: VALIDATE_STATUS,
+  POSITION_SET: popover_constants_strings.POSITION_SET,
+  POSITION_INLINE_INPUT: 'leftTopOver'
+}, constants_formatToken);
+
+const datePicker_constants_numbers = {
+  WEEK_START_ON: 0,
+  WEEK_HEIGHT: 36,
+  SPACING: constants_numbers.SPACING,
+  SPACING_INSET_INPUT: 1
+};
+
 // EXTERNAL MODULE: /home/runner/work/semi-design/semi-design/node_modules/lodash/isDate.js
 var lodash_isDate = __webpack_require__("+f76");
 var isDate_default = /*#__PURE__*/__webpack_require__.n(lodash_isDate);
@@ -52740,69 +52840,6 @@ function compatiableParse(value, formatToken, baseDate, locale) {
 
   return result;
 }
-// CONCATENATED MODULE: ../semi-foundation/datePicker/constants.ts
-
-
-
-const dayItemClasses = {
-  DAY_TODAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-today"),
-  DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inrange"),
-  DAY_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inhover"),
-  DAY_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected"),
-  DAY_SELECTED_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start"),
-  DAY_SELECTED_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end"),
-  DAY_DISABLED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-disabled"),
-  DAY_HOVER_DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday"),
-  DAY_HOVER_DAY_OFFSET: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-offset"),
-  DAY_IN_OFFSET_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-inoffsetrange"),
-  DAY_SELECTED_RANGE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selectedrange-hover"),
-  DAY_OFFSET_RANGE_START: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-start"),
-  DAY_OFFSET_RANGE_END: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-offsetrange-end"),
-  DAY_SELECTED_START_AFTER_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-start-afterhover"),
-  DAY_SELECTED_END_BEFORE_HOVER: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-selected-end-beforehover"),
-  DAY_HOVER_DAY_BEFORE_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-beforerange"),
-  DAY_HOVER_DAY_AFTER_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-afterrange"),
-  DAY_HOVER_DAY_IN_RANGE: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-inrange"),
-  DAY_HOVER_DAY_AROUND_SINGLE_SELECTED: "".concat(BASE_CLASS_PREFIX, "-datepicker-day-hoverday-around-singleselected")
-};
-
-const datePicker_constants_cssClasses = assign_default()({
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-datepicker"),
-  NAVIGATION: "".concat(BASE_CLASS_PREFIX, "-datepicker-navigation"),
-  PANEL_YAM: "".concat(BASE_CLASS_PREFIX, "-datepicker-panel-yam"),
-  MONTH: "".concat(BASE_CLASS_PREFIX, "-datepicker-month"),
-  WEEKDAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-weekday"),
-  WEEKS: "".concat(BASE_CLASS_PREFIX, "-datepicker-weeks"),
-  WEEK: "".concat(BASE_CLASS_PREFIX, "-datepicker-week"),
-  DAY: "".concat(BASE_CLASS_PREFIX, "-datepicker-day")
-}, dayItemClasses);
-
-const constants_formatToken = {
-  FORMAT_FULL_DATE: 'yyyy-MM-dd',
-  FORMAT_TIME_PICKER: 'HH:mm:ss',
-  FORMAT_DATE_TIME: 'yyyy-MM-dd HH:mm:ss',
-  FORMAT_YEAR_MONTH: 'yyyy-MM'
-};
-
-const datePicker_constants_strings = assign_default()({
-  DEFAULT_SEPARATOR_MULTIPLE: ',',
-  DEFAULT_SEPARATOR_RANGE: ' ~ ',
-  SIZE_SET: ['small', 'default', 'large'],
-  TYPE_SET: ['date', 'dateRange', 'year', 'month', 'dateTime', 'dateTimeRange'],
-  DENSITY_SET: ['default', 'compact'],
-  PANEL_TYPE_LEFT: 'left',
-  PANEL_TYPE_RIGHT: 'right',
-  STATUS: VALIDATE_STATUS,
-  POSITION_SET: popover_constants_strings.POSITION_SET
-}, constants_formatToken);
-
-const datePicker_constants_numbers = {
-  WEEK_START_ON: 0,
-  WEEK_HEIGHT: 36,
-  SPACING: constants_numbers.SPACING // Floating distance trigger interval
-
-};
-
 // CONCATENATED MODULE: ../semi-foundation/datePicker/_utils/getDefaultFormatToken.ts
 
 const defaultFormatTokens = {
@@ -52819,6 +52856,122 @@ function getDefaultFormatTokenByType(type) {
   return type && defaultFormatTokens[type];
 }
 /* harmony default export */ var _utils_getDefaultFormatToken = (getDefaultFormatToken);
+// CONCATENATED MODULE: ../semi-foundation/datePicker/_utils/getInsetInputFormatToken.ts
+
+
+/**
+ * 获取 insetInput 输入框的 placeholder
+ * Get the placeholder of the insetInput input
+ *
+ * If type is time related, we only recognize the format like `dateFormat timeFormat`
+ *  - 'yyyy-MM-dd HH:mm:ss' // ok
+ *  - 'yyyy-MM-dd  HH:mm:ss' // bad format
+ *
+ * @example
+ * 'yyyy-MM-dd' => 'yyyy-MM-dd'
+ * 'yyyy-MM' => 'yyyy-MM'
+ * 'yyyy-MM-dd HH:mm:ss' => 'yyyy-MM-dd HH:mm:ss'
+ * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
+ * 'Pp' => 'yyyy-MM-dd'
+ */
+
+function getInsetInputFormatToken(options) {
+  var _context;
+
+  const {
+    format,
+    type
+  } = options;
+  const dateReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4})/i;
+  const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;
+  const defaultToken = getDefaultFormatTokenByType(type);
+  let insetInputFormat;
+
+  switch (type) {
+    case 'dateTime':
+    case 'dateTimeRange':
+      const dateTimeResult = dateTimeReg.exec(format);
+      insetInputFormat = dateTimeResult && dateTimeResult[1] && dateTimeResult[2] ? concat_default()(_context = "".concat(dateTimeResult[1], " ")).call(_context, dateTimeResult[2]) : defaultToken;
+      break;
+
+    case 'date':
+    case 'month':
+    case 'dateRange':
+    default:
+      const dateResult = dateReg.exec(format);
+      insetInputFormat = dateResult && dateResult[1] || defaultToken;
+      break;
+  }
+
+  return insetInputFormat;
+}
+// CONCATENATED MODULE: ../semi-foundation/datePicker/_utils/getInsetInputValueFromInsetInputStr.ts
+/**
+ * 从 insetInputStr 字符串解析出 insetInputValue 对象
+ * Parse the insetInputValue object from the insetInputStr string
+ *
+ * @example
+ * ```
+ * '2022-02-01' => { monthLeft: { dateInput: '2022-02-01' } }
+ * '2022-02-01 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00' } }
+ * '2022-02-01 00:00:00 ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ *
+ * '2022-0' => { monthLeft: { dateInput: '2022-0' } }
+ * '2022-02-01 00:00:' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:' } }
+ * '2022-02-01 00:00:00 ~ ' => { monthLeft: { dateInput: '2022-02-01', timeInput: '00:00:00'}, monthRight: { dateInput: '', timeInput: '' } }
+ * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
+ * ```
+ */
+function getInsetInputValueFromInsetInputStr(options) {
+  const timeSeparator = ' ';
+  const {
+    inputValue = '',
+    rangeSeparator,
+    type
+  } = options;
+  let leftDateInput, leftTimeInput, rightDateInput, rightTimeInput;
+  const insetInputValue = {
+    monthLeft: {
+      dateInput: '',
+      timeInput: ''
+    },
+    monthRight: {
+      dateInput: '',
+      timeInput: ''
+    }
+  };
+
+  switch (type) {
+    case 'date':
+    case 'month':
+      insetInputValue.monthLeft.dateInput = inputValue;
+      break;
+
+    case 'dateRange':
+      [leftDateInput = '', rightDateInput = ''] = inputValue.split(rangeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthRight.dateInput = rightDateInput;
+      break;
+
+    case 'dateTime':
+      [leftDateInput = '', leftTimeInput = ''] = inputValue.split(timeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthLeft.timeInput = leftTimeInput;
+      break;
+
+    case 'dateTimeRange':
+      const [leftInput = '', rightInput = ''] = inputValue.split(rangeSeparator);
+      [leftDateInput = '', leftTimeInput = ''] = leftInput.split(timeSeparator);
+      [rightDateInput = '', rightTimeInput = ''] = rightInput.split(timeSeparator);
+      insetInputValue.monthLeft.dateInput = leftDateInput;
+      insetInputValue.monthLeft.timeInput = leftTimeInput;
+      insetInputValue.monthRight.dateInput = rightDateInput;
+      insetInputValue.monthRight.timeInput = rightTimeInput;
+      break;
+  }
+
+  return insetInputValue;
+}
 // CONCATENATED MODULE: ../semi-foundation/datePicker/foundation.ts
 
 
@@ -52853,6 +53006,8 @@ function getDefaultFormatTokenByType(type) {
 
 
 
+
+
 /**
  * The datePicker foundation.js is responsible for maintaining the date value and the input box value, as well as the callback of both
  *  task 1. Accept the selected date change, update the date value, and update the input box value according to the date = > Notify the change
@@ -53084,6 +53239,20 @@ class foundation_DatePickerFoundation extends foundation {
       this.resetCachedSelectedValue(willUpdateDates);
     }
   }
+  /**
+   * clear inset input value when close panel
+   */
+
+
+  clearInsetInputValue() {
+    const {
+      insetInput
+    } = this._adapter.getProps();
+
+    if (insetInput) {
+      this._adapter.updateInsetInputValue(null);
+    }
+  }
 
   resetCachedSelectedValue(willUpdateDates) {
     const {
@@ -53131,6 +53300,7 @@ class foundation_DatePickerFoundation extends foundation {
 
     this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
     this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
+    this.clearInsetInputValue();
 
     this._adapter.notifyOpenChange(false);
 
@@ -53176,6 +53346,52 @@ class foundation_DatePickerFoundation extends foundation {
       this._adapter.updateInputValue(input);
     }
   }
+  /**
+   * inset input 变化时需要更新以下 state 状态
+   *  - insetInputValue（总是）
+   *  - inputValue（可以解析为合法日期时）
+   *  - value（可以解析为合法日期时）
+   */
+
+
+  handleInsetInputChange(options) {
+    const {
+      insetInputStr,
+      format,
+      insetInputValue
+    } = options;
+
+    const _isMultiple = this._isMultiple();
+
+    const result = _isMultiple ? this.parseMultipleInput(insetInputStr, format) : this.parseInput(insetInputStr, format);
+    const {
+      value: stateValue
+    } = this.getStates();
+
+    if (result && result.length) {
+      const changedDates = this._getChangedDates(result);
+
+      if (!this._someDateDisabled(changedDates)) {
+        if (this._adapter.needConfirm()) {
+          this._adapter.updateCachedSelectedValue(result);
+        }
+
+        if (!isEqual_default()(result, stateValue)) {
+          if (!this._isControlledComponent()) {
+            this._adapter.updateValue(result);
+          }
+
+          this._notifyChange(result);
+        }
+
+        const triggerInput = _isMultiple ? this.formatMultipleDates(result) : this.formatDates(result);
+
+        this._adapter.updateInputValue(triggerInput);
+      }
+    }
+
+    this._adapter.updateInsetInputValue(insetInputValue);
+  }
   /**
    * Input box blur
    * @param {String} input
@@ -53306,6 +53522,7 @@ class foundation_DatePickerFoundation extends foundation {
 
   parseInput() {
     let input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    let format = arguments.length > 1 ? arguments[1] : undefined;
     let result = []; // console.log(input);
 
     const {
@@ -53315,7 +53532,7 @@ class foundation_DatePickerFoundation extends foundation {
 
     if (input && input.length) {
       const type = this.getProp('type');
-      const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+      const formatToken = format || this.getProp('format') || getDefaultFormatTokenByType(type);
       let parsedResult, formatedInput;
       const nowDate = new Date();
 
@@ -53409,12 +53626,13 @@ class foundation_DatePickerFoundation extends foundation {
 
   formatDates() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let customFormat = arguments.length > 1 ? arguments[1] : undefined;
     let str = '';
     const rangeSeparator = this.getProp('rangeSeparator');
 
     if (is_array_default()(dates) && dates.length) {
       const type = this.getProp('type');
-      const formatToken = this.getProp('format') || getDefaultFormatTokenByType(type);
+      const formatToken = customFormat || this.getProp('format') || getDefaultFormatTokenByType(type);
 
       switch (type) {
         case 'date':
@@ -53464,6 +53682,7 @@ class foundation_DatePickerFoundation extends foundation {
   formatMultipleDates() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : datePicker_constants_strings.DEFAULT_SEPARATOR_MULTIPLE;
+    let customFormat = arguments.length > 2 ? arguments[2] : undefined;
     const strs = [];
 
     if (is_array_default()(dates) && dates.length) {
@@ -53473,14 +53692,14 @@ class foundation_DatePickerFoundation extends foundation {
         case 'date':
         case 'dateTime':
         case 'month':
-          for_each_default()(dates).call(dates, date => strs.push(this.formatDates([date])));
+          for_each_default()(dates).call(dates, date => strs.push(this.formatDates([date], customFormat)));
 
           break;
 
         case 'dateRange':
         case 'dateTimeRange':
           for (let i = 0; i < dates.length; i += 2) {
-            strs.push(this.formatDates(slice_default()(dates).call(dates, i, i + 2)));
+            strs.push(this.formatDates(slice_default()(dates).call(dates, i, i + 2), customFormat));
           }
 
           break;
@@ -53530,7 +53749,13 @@ class foundation_DatePickerFoundation extends foundation {
 
 
   handleSelectedChange(value, options) {
-    const type = this.getProp('type');
+    const {
+      type,
+      format,
+      rangeSeparator,
+      insetInput
+    } = this._adapter.getProps();
+
     const {
       value: stateValue
     } = this.getStates();
@@ -53557,10 +53782,24 @@ class foundation_DatePickerFoundation extends foundation {
 
     const changedDates = this._getChangedDates(dates);
 
-    let inputValue;
+    let inputValue, insetInputValue;
 
     if (!this._someDateDisabled(changedDates)) {
       inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
+
+      if (insetInput) {
+        const insetInputFormatToken = getInsetInputFormatToken({
+          format,
+          type
+        });
+        const insetInputStr = this._isMultiple() ? this.formatMultipleDates(dates, undefined, insetInputFormatToken) : this.formatDates(dates, insetInputFormatToken);
+        insetInputValue = getInsetInputValueFromInsetInputStr({
+          inputValue: insetInputStr,
+          type,
+          rangeSeparator
+        });
+      }
+
       const isRangeTypeAndInputIncomplete = this._isRangeType() && !this._isRangeValueComplete(dates);
       /**
        * If the input is incomplete when under control, the notifyChange is not triggered because
@@ -53575,15 +53814,23 @@ class foundation_DatePickerFoundation extends foundation {
           // do not change value when selected value is incomplete
           this._adapter.updateInputValue(inputValue);
 
+          this._adapter.updateInsetInputValue(insetInputValue);
+
           return;
         } else {
-          (!controlled || fromPreset) && this._updateValueAndInput(dates, true, inputValue);
+          if (!controlled || fromPreset) {
+            this._updateValueAndInput(dates, true, inputValue);
+
+            this._adapter.updateInsetInputValue(insetInputValue);
+          }
         }
       }
 
       if (!controlled && this._adapter.needConfirm()) {
         // select date only change inputValue when needConfirm is true
-        this._adapter.updateInputValue(inputValue); // if inputValue is not complete, don't notifyChange
+        this._adapter.updateInputValue(inputValue);
+
+        this._adapter.updateInsetInputValue(insetInputValue); // if inputValue is not complete, don't notifyChange
 
 
         if (isRangeTypeAndInputIncomplete) {
@@ -53627,7 +53874,7 @@ class foundation_DatePickerFoundation extends foundation {
     const {
       cachedSelectedValue,
       value
-    } = this.getStates();
+    } = this._adapter.getStates();
 
     const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
 
@@ -53998,6 +54245,23 @@ class foundation_DatePickerFoundation extends foundation {
     }
   }
 
+  handlePanelVisibleChange(visible) {
+    if (visible) {
+      this._adapter.setInsetInputFocus();
+      /**
+       * After the panel is closed, the trigger input is disabled
+       * 面板关闭后，trigger input 禁用
+       */
+
+
+      set_timeout_default()(() => {
+        this._adapter.setTriggerDisabled(true);
+      }, 0);
+    } else {
+      this._adapter.setTriggerDisabled(false);
+    }
+  }
+
 }
 // CONCATENATED MODULE: ../semi-foundation/datePicker/_utils/formatter.ts
 
@@ -54060,7 +54324,11 @@ function formatDateValues(values, formatToken) {
 // CONCATENATED MODULE: ../semi-foundation/datePicker/inputFoundation.ts
 
 
-/* eslint-disable max-len */
+
+
+
+
+
 
 
 
@@ -54122,7 +54390,7 @@ class inputFoundation_InputFoundation extends foundation {
     this._adapter.notifyRangeInputFocus(e, rangeType);
   }
 
-  formatShowText(value) {
+  formatShowText(value, customFormat) {
     const {
       type,
       dateFnsLocale,
@@ -54130,7 +54398,7 @@ class inputFoundation_InputFoundation extends foundation {
       rangeSeparator
     } = this._adapter.getProps();
 
-    const formatToken = format || getDefaultFormatTokenByType(type);
+    const formatToken = customFormat || format || getDefaultFormatTokenByType(type);
     let text = '';
 
     switch (type) {
@@ -54167,6 +54435,256 @@ class inputFoundation_InputFoundation extends foundation {
     return text;
   }
 
+  handleInsetInputChange(options) {
+    const {
+      value,
+      valuePath,
+      insetInputValue
+    } = options;
+
+    const {
+      format,
+      type
+    } = this._adapter.getProps();
+
+    const insetFormatToken = getInsetInputFormatToken({
+      type,
+      format
+    });
+
+    const newInsetInputValue = lodash_set_default()(cloneDeep_default()(insetInputValue), valuePath, value);
+
+    const newInputValue = this.concatInsetInputValue({
+      insetInputValue: newInsetInputValue
+    });
+
+    this._adapter.notifyInsetInputChange({
+      insetInputValue: newInsetInputValue,
+      format: insetFormatToken,
+      insetInputStr: newInputValue
+    });
+  }
+  /**
+   * 只有传入的 format 符合 formatReg 时，才会使用用户传入的 format
+   * 否则会使用默认的 format 作为 placeholder
+   *
+   * The format passed in by the user will be used only if the incoming format conforms to formatReg
+   * Otherwise the default format will be used as placeholder
+   */
+
+
+  getInsetInputPlaceholder() {
+    const {
+      type,
+      format
+    } = this._adapter.getProps();
+
+    const insetInputFormat = getInsetInputFormatToken({
+      type,
+      format
+    });
+    let datePlaceholder, timePlaceholder;
+
+    switch (type) {
+      case 'date':
+      case 'month':
+      case 'dateRange':
+        datePlaceholder = insetInputFormat;
+        break;
+
+      case 'dateTime':
+      case 'dateTimeRange':
+        [datePlaceholder, timePlaceholder] = insetInputFormat.split(' ');
+        break;
+    }
+
+    return {
+      datePlaceholder,
+      timePlaceholder
+    };
+  }
+  /**
+   * 从当前日期值或 inputValue 中解析出 insetInputValue
+   *
+   * Parse out insetInputValue from current date value or inputValue
+   */
+
+
+  getInsetInputValue(_ref) {
+    let {
+      value,
+      insetInputValue
+    } = _ref;
+
+    const {
+      type,
+      rangeSeparator,
+      format
+    } = this._adapter.getProps();
+
+    let inputValueStr = '';
+
+    if (isObject_default()(insetInputValue)) {
+      inputValueStr = this.concatInsetInputValue({
+        insetInputValue
+      });
+    } else {
+      const insetInputFormat = getInsetInputFormatToken({
+        format,
+        type
+      });
+      inputValueStr = this.formatShowText(value, insetInputFormat);
+    }
+
+    const newInsetInputValue = getInsetInputValueFromInsetInputStr({
+      inputValue: inputValueStr,
+      type,
+      rangeSeparator
+    });
+    return newInsetInputValue;
+  }
+
+  concatInsetDateAndTime(_ref2) {
+    var _context;
+
+    let {
+      date,
+      time
+    } = _ref2;
+    return concat_default()(_context = "".concat(date, " ")).call(_context, time);
+  }
+
+  concatInsetDateRange(_ref3) {
+    var _context2, _context3;
+
+    let {
+      rangeStart,
+      rangeEnd
+    } = _ref3;
+
+    const {
+      rangeSeparator
+    } = this._adapter.getProps();
+
+    return concat_default()(_context2 = concat_default()(_context3 = "".concat(rangeStart)).call(_context3, rangeSeparator)).call(_context2, rangeEnd);
+  }
+
+  concatInsetInputValue(_ref4) {
+    let {
+      insetInputValue
+    } = _ref4;
+
+    const {
+      type
+    } = this._adapter.getProps();
+
+    let inputValue = '';
+
+    switch (type) {
+      case 'date':
+      case 'month':
+        inputValue = insetInputValue.monthLeft.dateInput;
+        break;
+
+      case 'dateRange':
+        inputValue = this.concatInsetDateRange({
+          rangeStart: insetInputValue.monthLeft.dateInput,
+          rangeEnd: insetInputValue.monthRight.dateInput
+        });
+        break;
+
+      case 'dateTime':
+        inputValue = this.concatInsetDateAndTime({
+          date: insetInputValue.monthLeft.dateInput,
+          time: insetInputValue.monthLeft.timeInput
+        });
+        break;
+
+      case 'dateTimeRange':
+        const rangeStart = this.concatInsetDateAndTime({
+          date: insetInputValue.monthLeft.dateInput,
+          time: insetInputValue.monthLeft.timeInput
+        });
+        const rangeEnd = this.concatInsetDateAndTime({
+          date: insetInputValue.monthRight.dateInput,
+          time: insetInputValue.monthRight.timeInput
+        });
+        inputValue = this.concatInsetDateRange({
+          rangeStart,
+          rangeEnd
+        });
+        break;
+    }
+
+    return inputValue;
+  }
+
+}
+// CONCATENATED MODULE: ./datePicker/insetInput.tsx
+
+
+
+
+function InsetDateInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    onFocus,
+    onChange,
+    placeholder,
+    forwardRef
+  } = props;
+
+  const value = get_default()(insetInputValue, valuePath);
+
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(input_0, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    ref: forwardRef
+  });
+}
+function InsetTimeInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    type,
+    onFocus,
+    onChange,
+    placeholder,
+    disabled
+  } = props;
+
+  const _isTimeType = includes_default()(type).call(type, 'Time');
+
+  if (!_isTimeType) {
+    return null;
+  }
+
+  const value = get_default()(insetInputValue, valuePath);
+
+  return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(input_0, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    disabled: disabled
+  });
 }
 // CONCATENATED MODULE: ./datePicker/dateInput.tsx
 
@@ -54186,7 +54704,9 @@ var dateInput_rest = undefined && undefined.__rest || function (s, e) {
   }
   return t;
 };
-/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 
 /* eslint-disable max-lines-per-function */
 
@@ -54202,6 +54722,7 @@ var dateInput_rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
  // eslint-disable-next-line @typescript-eslint/ban-types
 
 class dateInput_DateInput extends baseComponent_BaseComponent {
@@ -54240,6 +54761,10 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       this.handleRangeInputFocus(e, 'rangeStart');
     };
 
+    this.handleInsetInputChange = options => {
+      this.foundation.handleInsetInputChange(options);
+    };
+
     this.getRangeInputValue = (rangeStart, rangeEnd) => {
       var _context, _context2;
 
@@ -54288,7 +54813,8 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       },
       notifyTabPress: function () {
         return _this.props.onRangeEndTabPress(...arguments);
-      }
+      },
+      notifyInsetInputChange: options => this.props.onInsetInputChange(options)
     });
   }
 
@@ -54393,11 +54919,11 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     const rangePlaceholder = is_array_default()(placeholder) ? placeholder : [placeholder, placeholder];
     const [rangeStartPlaceholder, rangeEndPlaceholder] = rangePlaceholder;
     const inputLeftWrapperCls = classnames_default()("".concat(prefixCls, "-range-input-wrapper-start"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart',
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeStart' && !disabled,
       ["".concat(prefixCls, "-range-input-wrapper-start-with-prefix")]: this.props.prefix || this.props.insetLabel
     });
     const inputRightWrapperCls = classnames_default()("".concat(prefixCls, "-range-input-wrapper-end"), "".concat(prefixCls, "-range-input-wrapper"), {
-      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd'
+      ["".concat(prefixCls, "-range-input-wrapper-active")]: rangeInputFocus === 'rangeEnd' && !disabled
     });
     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, this.renderRangePrefix(), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       onClick: e => !disabled && this.handleRangeInputFocus(e, 'rangeStart'),
@@ -54436,7 +54962,70 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     })), this.renderRangeClearBtn(rangeStart, rangeEnd), this.renderRangeSuffix(suffix));
   }
 
-  render() {
+  renderInputInset() {
+    const {
+      type,
+      handleInsetDateFocus,
+      handleInsetTimeFocus,
+      value,
+      insetInputValue,
+      prefixCls,
+      rangeInputStartRef,
+      rangeInputEndRef,
+      density
+    } = this.props;
+
+    const _isRangeType = includes_default()(type).call(type, 'Range');
+
+    const newInsetInputValue = this.foundation.getInsetInputValue({
+      value,
+      insetInputValue
+    });
+    const {
+      datePlaceholder,
+      timePlaceholder
+    } = this.foundation.getInsetInputPlaceholder();
+    const insetInputWrapperCls = "".concat(prefixCls, "-inset-input-wrapper");
+    const separatorCls = "".concat(prefixCls, "-inset-input-separator");
+    return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      className: insetInputWrapperCls,
+      "x-type": type
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetDateInput, {
+      forwardRef: rangeInputStartRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthLeft.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeStart')
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetTimeInput, {
+      disabled: !newInsetInputValue.monthLeft.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      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", {
+      className: separatorCls
+    }, density === 'compact' ? null : '-'), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetDateInput, {
+      forwardRef: rangeInputEndRef,
+      insetInputValue: newInsetInputValue,
+      placeholder: datePlaceholder,
+      valuePath: 'monthRight.dateInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: e => handleInsetDateFocus(e, 'rangeEnd')
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(InsetTimeInput, {
+      disabled: !newInsetInputValue.monthRight.dateInput,
+      insetInputValue: newInsetInputValue,
+      placeholder: timePlaceholder,
+      type: type,
+      valuePath: 'monthRight.timeInput',
+      onChange: this.handleInsetInputChange,
+      onFocus: handleInsetTimeFocus
+    })));
+  }
+
+  renderTriggerInput() {
     const _a = this.props,
           {
       placeholder,
@@ -54468,9 +55057,11 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       onRangeBlur,
       onRangeEndTabPress,
       rangeInputFocus,
-      rangeSeparator
+      rangeSeparator,
+      insetInput,
+      insetInputValue
     } = _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"]);
+          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"]);
 
     const dateIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
       "aria-hidden": true
@@ -54521,6 +55112,13 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     }));
   }
 
+  render() {
+    const {
+      insetInput
+    } = this.props;
+    return insetInput ? this.renderInputInset() : this.renderTriggerInput();
+  }
+
 }
 dateInput_DateInput.propTypes = {
   onClick: prop_types_default.a.func,
@@ -54545,7 +55143,9 @@ dateInput_DateInput.propTypes = {
   rangeInputFocus: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.bool]),
   rangeInputStartRef: prop_types_default.a.object,
   rangeInputEndRef: prop_types_default.a.object,
-  rangeSeparator: prop_types_default.a.string
+  rangeSeparator: prop_types_default.a.string,
+  insetInput: prop_types_default.a.bool,
+  insetInputValue: prop_types_default.a.object
 };
 dateInput_DateInput.defaultProps = {
   showClear: true,
@@ -55233,7 +55833,8 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
     let refreshPicker = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     const monthLeft = this.getState('monthLeft');
 
-    const newMonthLeft = assign_default()({}, monthLeft);
+    const newMonthLeft = assign_default()({}, monthLeft); // REMOVE:
+
 
     this._adapter.updateMonthOnLeft(newMonthLeft);
 
@@ -55250,6 +55851,7 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
     if (refreshPicker) {
       this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_LEFT, values[0] || newMonthLeft.pickerDate);
     } else {
+      // FIXME:
       this.handleShowDateAndTime(datePicker_constants_strings.PANEL_TYPE_LEFT, newMonthLeft.pickerDate);
     }
 
@@ -55651,7 +56253,7 @@ class monthsGridFoundation_MonthsGridFoundation extends foundation {
       selected: selectedSet,
       rangeStart,
       rangeEnd
-    } = this.getStates();
+    } = this.getStates(); // FIXME:
 
     const includeRange = includes_default()(_context3 = ['dateRange', 'dateTimeRange']).call(_context3, type);
 
@@ -58866,6 +59468,8 @@ yearAndMonth_YearAndMonth.defaultProps = {
 
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable react/no-did-update-set-state */
 
 /* eslint-disable max-len */
@@ -59141,6 +59745,9 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       monthRight,
       currentPanelHeight
     } = this.state;
+    const {
+      insetInput
+    } = this.props;
     const panelDetail = panelType === datePicker_constants_strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
     const {
       isTimePickerOpen,
@@ -59163,7 +59770,7 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
         style.minWidth = wrap.getBoundingClientRect().width;
       }
 
-      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
         /**
          * left和right同时为tpk时，panel会有一个minHeight
          * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -59173,7 +59780,7 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
          * When left and right are tpk at the same time, the panel will have a minHeight
          * If the cached currentPanelHeight is 0, you need to calculate the height of the scrolling list
          * If there is a cached value, use currentPanelHeight (if this height is less than the actual value, it will affect the number of cycles in the ScrollList to render the list)
-         * See packages/semi-foundation/scrollList/itemF oundation.js initWheelList function
+         * See packages/semi-foundation/scrollList/itemFoundation.js initWheelList function
          */
         style.minHeight = currentPanelHeight ? currentPanelHeight : this.calcScrollListHeight();
       }
@@ -59181,10 +59788,14 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       monthCls = classnames_default()(monthCls, "".concat(monthsGrid_prefixCls, "-yam-showing"));
     }
 
+    const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+
+    const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: monthCls,
       key: panelType,
-      style: style
+      style: style,
+      "x-open-type": xOpenType
     }, yearAndMonthLayer, timePickerLayer, this.foundation.isRangeType() ? panelContent : isYearPickerOpen || isTimePickerOpen ? null : panelContent, this.renderSwitch(panelType));
   }
 
@@ -59395,10 +60006,11 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       locale,
       disabledTimePicker,
       density,
-      dateFnsLocale
-    } = this.props; // Type: date, dateRange, year, month, no rendering required
+      dateFnsLocale,
+      insetInput
+    } = this.props; // Type: date, dateRange, year, month, inset input no rendering required
 
-    if (!includes_default()(type).call(type, 'Time')) {
+    if (!includes_default()(type).call(type, 'Time') || insetInput) {
       return null;
     } // switch year/month & time
 
@@ -59471,7 +60083,8 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       monthRight
     } = this.state;
     const {
-      type
+      type,
+      insetInput
     } = this.props;
     const monthGridCls = classnames_default()({
       ["".concat(monthsGrid_prefixCls, "-month-grid")]: true
@@ -59493,6 +60106,7 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
+      "x-insetInput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }
@@ -59644,10 +60258,15 @@ var datePicker = __webpack_require__("IJ0B");
 
 
 
+
 /* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/interactive-supports-focus */
 
 /* eslint-disable max-len */
 
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 
 
 
@@ -59700,6 +60319,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       return _this.foundation.handleInputChange(...arguments);
     };
 
+    this.handleInsetInputChange = options => this.foundation.handleInsetInputChange(options);
+
     this.handleInputComplete = v => this.foundation.handleInputComplete(v);
 
     this.handleInputBlur = e => this.foundation.handleInputBlur(get_default()(e, 'nativeEvent.target.value'), e);
@@ -59728,6 +60349,30 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       }
     };
 
+    this.handleInsetDateFocus = (e, rangeType) => {
+      const monthGridFoundation = get_default()(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showDatePanel(datePicker_constants_strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showDatePanel(datePicker_constants_strings.PANEL_TYPE_RIGHT);
+      }
+
+      this.handleInputFocus(e, rangeType);
+    };
+
+    this.handleInsetTimeFocus = () => {
+      const monthGridFoundation = get_default()(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showTimePicker(datePicker_constants_strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showTimePicker(datePicker_constants_strings.PANEL_TYPE_RIGHT);
+      }
+    };
+
+    this.handlePanelVisibleChange = visible => {
+      this.foundation.handlePanelVisibleChange(visible);
+    };
+
     this.handleConfirm = e => this.foundation.handleConfirm();
 
     this.handleCancel = e => this.foundation.handleCancel();
@@ -59751,19 +60396,43 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         dropdownStyle,
         density,
         topSlot,
-        bottomSlot
+        bottomSlot,
+        insetInput,
+        type,
+        format,
+        rangeSeparator
       } = this.props;
+      const {
+        insetInputValue,
+        value
+      } = this.state;
       const wrapCls = classnames_default()(datePicker_constants_cssClasses.PREFIX, {
         [datePicker_constants_cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
         ["".concat(datePicker_constants_cssClasses.PREFIX, "-compact")]: density === 'compact'
       }, dropdownClassName);
+      const insetInputProps = {
+        dateFnsLocale,
+        format,
+        insetInputValue,
+        rangeSeparator,
+        type,
+        value: value,
+        handleInsetDateFocus: this.handleInsetDateFocus,
+        handleInsetTimeFocus: this.handleInsetTimeFocus,
+        onInsetInputChange: this.handleInsetInputChange,
+        rangeInputStartRef: this.rangeInputStartRef,
+        rangeInputEndRef: this.rangeInputEndRef,
+        density
+      };
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: "".concat(datePicker_constants_cssClasses.PREFIX, "-topSlot")
-      }, topSlot), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      }, topSlot), insetInput && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, insetInputProps, {
+        insetInput: true
+      })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: "".concat(datePicker_constants_cssClasses.PREFIX, "-bottomSlot")
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -59827,7 +60496,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         position: position,
         visible: panelShow,
         stopPropagation: stopPropagation,
-        spacing: spacing
+        spacing: spacing,
+        onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
 
@@ -59840,7 +60510,9 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       prevTimeZone: null,
       motionEnd: false,
       rangeInputFocus: undefined,
-      autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen)
+      autofocus: props.autoFocus || this.isRangeType(props.type, props.triggerRender) && (props.open || props.defaultOpen),
+      insetInputValue: null,
+      triggerDisabled: undefined
     };
     this.adapter.setCache('cachedSelectedValue', null);
     this.triggerElRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
@@ -59943,6 +60615,17 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
           inputValue
         });
       },
+      updateInsetInputValue: insetInputValue => {
+        const {
+          insetInput
+        } = this.props;
+
+        if (insetInput && !isEqual_default()(insetInputValue, this.state.insetInputValue)) {
+          this.setState({
+            insetInputValue
+          });
+        }
+      },
       needConfirm: () => {
         var _context;
 
@@ -60017,7 +60700,38 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         }
       },
       couldPanelClosed: () => this.focusRecordsRef.current.rangeStart && this.focusRecordsRef.current.rangeEnd,
-      isEventTarget: e => e && e.target === e.currentTarget
+      isEventTarget: e => e && e.target === e.currentTarget,
+      setInsetInputFocus: () => {
+        const {
+          rangeInputFocus
+        } = this.state;
+
+        switch (rangeInputFocus) {
+          case 'rangeEnd':
+            if (document.activeElement !== this.rangeInputEndRef.current) {
+              const inputEndNode = get_default()(this, 'rangeInputEndRef.current');
+
+              inputEndNode && inputEndNode.focus();
+            }
+
+            break;
+
+          case 'rangeStart':
+          default:
+            if (document.activeElement !== this.rangeInputStartRef.current) {
+              const inputStartNode = get_default()(this, 'rangeInputStartRef.current');
+
+              inputStartNode && inputStartNode.focus();
+            }
+
+            break;
+        }
+      },
+      setTriggerDisabled: disabled => {
+        this.setState({
+          triggerDisabled: disabled
+        });
+      }
     });
   }
 
@@ -60075,7 +60789,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       syncSwitchMonth,
       onPanelChange,
       timeZone,
-      triggerRender
+      triggerRender,
+      insetInput
     } = this.props;
     const {
       value,
@@ -60123,7 +60838,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       onPanelChange: onPanelChange,
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
-      triggerRender: triggerRender
+      triggerRender: triggerRender,
+      insetInput: insetInput
     });
   }
 
@@ -60159,20 +60875,23 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       triggerRender,
       size,
       inputReadOnly,
-      rangeSeparator
+      rangeSeparator,
+      insetInput
     } = this.props;
     const {
       value,
       inputValue,
-      rangeInputFocus
+      rangeInputFocus,
+      triggerDisabled
     } = this.state; // This class is not needed when triggerRender is function
 
     const isRangeType = this.isRangeType(type, triggerRender);
+    const inputDisabled = disabled || insetInput && triggerDisabled;
     const inputCls = classnames_default()("".concat(datePicker_constants_cssClasses.PREFIX, "-input"), {
       ["".concat(datePicker_constants_cssClasses.PREFIX, "-range-input")]: isRangeType,
       [concat_default()(_context3 = "".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-")).call(_context3, size)]: isRangeType && size,
-      ["".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !disabled,
-      ["".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && disabled,
+      ["".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
+      ["".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
       [concat_default()(_context4 = "".concat(datePicker_constants_cssClasses.PREFIX, "-range-input-")).call(_context4, validateStatus)]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
@@ -60180,9 +60899,9 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
 
     const props = assign_default()(assign_default()({}, extraProps), {
       placeholder: phText,
-      disabled,
+      disabled: inputDisabled,
       inputValue,
-      value,
+      value: value,
       onChange: this.handleInputChange,
       onEnterPress: this.handleInputComplete,
       // TODO: remove in next major version
@@ -60195,7 +60914,7 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       format,
       multiple,
       validateStatus,
-      inputReadOnly,
+      inputReadOnly: inputReadOnly || insetInput,
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,
@@ -60204,13 +60923,13 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       size,
       autofocus: this.state.autofocus,
       dateFnsLocale,
-      rangeInputStartRef: this.rangeInputStartRef,
-      rangeInputEndRef: this.rangeInputEndRef,
       rangeInputFocus,
       rangeSeparator,
       onRangeBlur: this.handleRangeInputBlur,
       onRangeClear: this.handleRangeInputClear,
-      onRangeEndTabPress: this.handleRangeEndTabPress
+      onRangeEndTabPress: this.handleRangeEndTabPress,
+      rangeInputStartRef: insetInput ? null : this.rangeInputStartRef,
+      rangeInputEndRef: insetInput ? null : this.rangeInputEndRef
     });
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -60358,7 +61077,8 @@ datePicker_DatePicker.defaultProps = {
   spacing: datePicker_constants_numbers.SPACING,
   autoSwitchDate: true,
   syncSwitchMonth: false,
-  rangeSeparator: datePicker_constants_strings.DEFAULT_SEPARATOR_RANGE
+  rangeSeparator: datePicker_constants_strings.DEFAULT_SEPARATOR_RANGE,
+  insetInput: false
 };
 // CONCATENATED MODULE: ./datePicker/index.tsx
 
@@ -60374,6 +61094,8 @@ datePicker_DatePicker.defaultProps = {
 
 
 
+
+
 /* harmony default export */ var datePicker_0 = (forwardStatics( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.forwardRef((props, ref) => {
   const propsObj = assign_default()({}, props);
 
@@ -60398,6 +61120,24 @@ datePicker_DatePicker.defaultProps = {
     propsObj.rangeSeparator = " ".concat(trim_default()(rangeSeparator).call(rangeSeparator), " ");
   }
 
+  if (propsObj.insetInput) {
+    var _context;
+
+    if (!propsObj.position) {
+      propsObj.position = datePicker_constants_strings.POSITION_INLINE_INPUT;
+    }
+    /**
+     * When insetInput is `true` and `position` includes `over`, use 1px `spacing` to solve the problem of border-radius leakage in the upper left corner
+     *
+     * @see https://user-images.githubusercontent.com/26477537/158817185-126a5f33-41f7-414a-8e36-8d1be2dda5cd.png
+     */
+
+
+    if (includes_default()(_context = propsObj.position).call(_context, 'Over') && !propsObj.spacing) {
+      propsObj.spacing = datePicker_constants_numbers.SPACING_INSET_INPUT;
+    }
+  }
+
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(configProvider_context.Consumer, null, _ref => {
     let {
       timeZone
@@ -66385,6 +67125,7 @@ class Item_NavItem extends baseComponent_BaseComponent {
     var _context3;
 
     let isToggleIcon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
     if (this.props.isSubNav) {
       return null;
@@ -66405,7 +67146,8 @@ class Item_NavItem extends baseComponent_BaseComponent {
       ["".concat(Item_clsPrefix, "-icon-info")]: !isToggleIcon
     });
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("i", {
-      className: className
+      className: className,
+      key: key
     }, Object(_utils["d" /* isSemiIcon */])(icon) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.cloneElement(icon, {
       size: icon.props.size || iconSize
     }) : icon);
@@ -66445,12 +67187,12 @@ class Item_NavItem extends baseComponent_BaseComponent {
 
       if (mode === navigation_constants_strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
         const iconAmount = icon && !indent ? level : level - 1;
-        placeholderIcons = times_default()(iconAmount, () => this.renderIcon(null, navigation_constants_strings.ICON_POS_RIGHT, false));
+        placeholderIcons = times_default()(iconAmount, index => this.renderIcon(null, navigation_constants_strings.ICON_POS_RIGHT, false, index));
       }
 
-      itemChildren = /*#__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, placeholderIcons, this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, navigation_constants_strings.ICON_POS_RIGHT, true), icon || indent || isInSubNav ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT) : null, !isNullOrUndefined(text) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+      itemChildren = /*#__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, placeholderIcons, this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, navigation_constants_strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'), icon || indent || isInSubNav ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT, false, 'key-position-left') : null, !isNullOrUndefined(text) ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(navigation_constants_cssClasses.PREFIX, "-item-text")
-      }, text) : '', this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, navigation_constants_strings.ICON_POS_RIGHT, true));
+      }, text) : '', this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, navigation_constants_strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right'));
     }
 
     if (typeof link === 'string') {
@@ -66891,7 +67633,7 @@ class SubNav_SubNav extends baseComponent_BaseComponent {
     if (mode === navigation_constants_strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
       /* Different icons' amount means different indents.*/
       const iconAmount = icon && !indent ? level : level - 1;
-      placeholderIcons = times_default()(iconAmount, index => this.renderIcon(null, navigation_constants_strings.ICON_POS_RIGHT, false, undefined, index));
+      placeholderIcons = times_default()(iconAmount, index => this.renderIcon(null, navigation_constants_strings.ICON_POS_RIGHT, false, false, index));
     }
 
     const titleDiv = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
@@ -66903,7 +67645,7 @@ class SubNav_SubNav extends baseComponent_BaseComponent {
       onKeyPress: this.handleKeyPress
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
       className: "".concat(prefixCls, "-item-inner")
-    }, placeholderIcons, this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== navigation_constants_strings.MODE_HORIZONTAL ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left') : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, placeholderIcons, this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left'), icon || indent || isInSubNav && mode !== navigation_constants_strings.MODE_HORIZONTAL ? this.renderIcon(icon, navigation_constants_strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left') : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: "".concat(prefixCls, "-item-text")
     }, text), this.context.toggleIconPosition === navigation_constants_strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, navigation_constants_strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')));
     return titleDiv;
@@ -72952,9 +73694,10 @@ class group_TagGroup extends external_root_React_commonjs2_react_commonjs_react_
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
 
     const normalTags = slice_default()(tags).call(tags, 0, maxTagCount);
@@ -73034,6 +73777,7 @@ group_TagGroup.propTypes = {
   style: prop_types_default.a.object,
   className: prop_types_default.a.string,
   maxTagCount: prop_types_default.a.number,
+  restCount: prop_types_default.a.number,
   tagList: prop_types_default.a.array,
   size: prop_types_default.a.oneOf(group_tagSize),
   mode: prop_types_default.a.string,
@@ -73898,7 +74642,9 @@ class select_Select extends baseComponent_BaseComponent {
       });
     }
 
-    const tags = map_default()(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? slice_default()(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = map_default()(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -73957,12 +74703,13 @@ class select_Select extends baseComponent_BaseComponent {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(group_TagGroup, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });
@@ -75964,6 +76711,12 @@ class radioGroup_RadioGroup extends baseComponent_BaseComponent {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }
@@ -84963,8 +85716,13 @@ class Body_Body extends baseComponent_BaseComponent {
       const {
         flattenedColumns,
         getCellWidths
-      } = _this.context;
-      const cellWidths = getCellWidths(flattenedColumns);
+      } = _this.context; // we use memoized cellWidths to avoid re-render expanded row (fix #686)
+
+      if (flattenedColumns !== _this.flattenedColumns) {
+        _this.flattenedColumns = flattenedColumns;
+        _this.cellWidths = getCellWidths(flattenedColumns);
+      }
+
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(ExpandedRow_TableExpandedRow, {
         style: style,
         components: components,
@@ -84976,7 +85734,7 @@ class Body_Body extends baseComponent_BaseComponent {
         index: index,
         virtualized: virtualized,
         key: genExpandedRowKey(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -85154,7 +85912,9 @@ class Body_Body extends baseComponent_BaseComponent {
     };
     this.listRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     const {
-      getVirtualizedListRef
+      getVirtualizedListRef,
+      flattenedColumns,
+      getCellWidths
     } = context;
 
     if (getVirtualizedListRef) {
@@ -85166,6 +85926,8 @@ class Body_Body extends baseComponent_BaseComponent {
     }
 
     this.foundation = new bodyFoundation_TableBodyFoundation(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 
@@ -92295,6 +93057,7 @@ class nodeList_NodeList extends external_root_React_commonjs2_react_commonjs_rea
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });
@@ -92356,12 +93119,13 @@ class nodeList_NodeList extends external_root_React_commonjs2_react_commonjs_rea
     const {
       flattenNodes,
       motionType,
+      searchTargetIsDeep,
       renderTreeNode
     } = this.props;
     const {
       transitionNodes
     } = this.state;
-    const mapData = transitionNodes.length ? transitionNodes : flattenNodes;
+    const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
 
     const options = map_default()(mapData).call(mapData, treeNode => {
       const isMotionNode = is_array_default()(treeNode);
@@ -92611,7 +93375,8 @@ class tree_Tree extends baseComponent_BaseComponent {
     const isSeaching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
     const newState = {
       prevProps: props
-    }; // Accept a props field as a parameter to determine whether to update the field
+    };
+    const isExpandControlled = ('expandedKeys' in props); // Accept a props field as a parameter to determine whether to update the field
 
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
@@ -92655,7 +93420,8 @@ class tree_Tree extends baseComponent_BaseComponent {
       }
     }
 
-    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const expandAllWhenDataChange = dataUpdated && props.expandAll;
 
     if (!isSeaching) {
       // Update expandedKeys
@@ -92681,7 +93447,7 @@ class tree_Tree extends baseComponent_BaseComponent {
         newState.expandedKeys = calcExpandedKeys(props.defaultExpandedKeys, keyEntities);
       } else if (!prevProps && props.defaultValue) {
         newState.expandedKeys = calcExpandedKeysForValues(props.defaultValue, keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
+      } else if ((!prevProps || !isExpandControlled && dataUpdated) && props.value) {
         newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
       }
 
@@ -93183,6 +93949,7 @@ const treeSelect_constants_numbers = {};
 
 
 
+
 
 
  // eslint-disable-next-line max-len
@@ -93325,7 +94092,7 @@ class foundation_TreeSelectFoundation extends foundation {
     const isSearching = Boolean(inputValue);
     const treeNodeProps = {
       eventKey: key,
-      expanded: isSearching ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
+      expanded: isSearching && !this._isExpandControlled() ? filteredExpandedKeys.has(key) : expandedKeys.has(key),
       selected: includes_default()(selectedKeys).call(selectedKeys, key),
       checked: realChecked,
       halfChecked: realHalfChecked,
@@ -93612,20 +94379,25 @@ class foundation_TreeSelectFoundation extends foundation {
 
   clearInput() {
     const {
+      flattenNodes,
       expandedKeys,
       selectedKeys,
       keyEntities,
       treeData
     } = this.getStates();
+    const newExpandedKeys = new set_default.a(expandedKeys);
+
+    const isExpandControlled = this._isExpandControlled();
+
     const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
 
-    for_each_default()(expandedOptsKeys).call(expandedOptsKeys, item => expandedKeys.add(item));
+    for_each_default()(expandedOptsKeys).call(expandedOptsKeys, item => newExpandedKeys.add(item));
 
-    const flattenNodes = flattenTreeData(treeData, expandedKeys);
+    const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
 
     this._adapter.updateState({
-      expandedKeys,
-      flattenNodes,
+      expandedKeys: isExpandControlled ? expandedKeys : newExpandedKeys,
+      flattenNodes: isExpandControlled ? flattenNodes : newFlattenNodes,
       inputValue: '',
       motionKeys: new set_default.a([]),
       filteredKeys: new set_default.a([]),
@@ -93639,6 +94411,7 @@ class foundation_TreeSelectFoundation extends foundation {
     this._adapter.updateInputValue(sugInput);
 
     const {
+      flattenNodes,
       expandedKeys,
       selectedKeys,
       keyEntities,
@@ -93649,17 +94422,18 @@ class foundation_TreeSelectFoundation extends foundation {
       filterTreeNode,
       treeNodeFilterProp
     } = this.getProps();
+    const newExpandedKeys = new set_default.a(expandedKeys);
     let filteredOptsKeys = [];
     let expandedOptsKeys = [];
-    let flattenNodes = [];
+    let newFlattenNodes = [];
     let filteredShownKeys = new set_default.a([]);
 
     if (!sugInput) {
       expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
 
-      for_each_default()(expandedOptsKeys).call(expandedOptsKeys, item => expandedKeys.add(item));
+      for_each_default()(expandedOptsKeys).call(expandedOptsKeys, item => newExpandedKeys.add(item));
 
-      flattenNodes = flattenTreeData(treeData, expandedKeys);
+      newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
     } else {
       var _context3, _context4;
 
@@ -93672,17 +94446,19 @@ class foundation_TreeSelectFoundation extends foundation {
       expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
       const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
       filteredShownKeys = new set_default.a([...shownChildKeys, ...expandedOptsKeys]);
-      flattenNodes = flattenTreeData(treeData, new set_default.a(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+      newFlattenNodes = flattenTreeData(treeData, new set_default.a(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
     }
 
-    this._adapter.notifySearch(sugInput);
+    const newFilteredExpandedKeys = new set_default.a(expandedOptsKeys);
+
+    this._adapter.notifySearch(sugInput, from_default()(newFilteredExpandedKeys));
 
     this._adapter.updateState({
-      expandedKeys,
-      flattenNodes,
+      expandedKeys: this._isExpandControlled() ? expandedKeys : newExpandedKeys,
+      flattenNodes: this._isExpandControlled() ? flattenNodes : newFlattenNodes,
       motionKeys: new set_default.a([]),
       filteredKeys: new set_default.a(filteredOptsKeys),
-      filteredExpandedKeys: new set_default.a(expandedOptsKeys),
+      filteredExpandedKeys: newFilteredExpandedKeys,
       filteredShownKeys
     });
   }
@@ -93926,7 +94702,9 @@ class foundation_TreeSelectFoundation extends foundation {
       return;
     }
 
-    if (isSearching) {
+    const isExpandControlled = this._isExpandControlled();
+
+    if (isSearching && !isExpandControlled) {
       this.handleNodeExpandInSearch(e, treeNode);
       return;
     }
@@ -93954,7 +94732,7 @@ class foundation_TreeSelectFoundation extends foundation {
 
     this._adapter.cacheFlattenNodes(motionType === 'hide' && this._isAnimated());
 
-    if (!this._isExpandControlled()) {
+    if (!isExpandControlled) {
       const flattenNodes = flattenTreeData(treeData, expandedKeys);
       const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
       const newState = {
@@ -94766,7 +95544,8 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -94775,6 +95554,7 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
         virtualize,
         motionExpand
       } = this.props;
+      const isExpandControlled = ('expandedKeys' in this.props);
 
       if (!virtualize || isEmpty_default()(virtualize)) {
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(nodeList_NodeList, {
@@ -94782,6 +95562,8 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
           flattenList: this._flattenNodes,
           motionKeys: motionExpand ? motionKeys : new set_default.a([]),
           motionType: motionType,
+          // When motionKeys is empty, but filteredKeys is not empty (that is, the search hits), this situation should be distinguished from ordinary motionKeys
+          searchTargetIsDeep: isExpandControlled && motionExpand && isEmpty_default()(motionKeys) && !isEmpty_default()(filteredKeys),
           onMotionEnd: this.onMotionEnd,
           renderTreeNode: this.renderTreeNode
         });
@@ -94922,6 +95704,10 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
     this.clickOutsideHandler = null;
     this.foundation = new foundation_TreeSelectFoundation(this.adapter);
     this.treeSelectID = slice_default()(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 
@@ -95101,8 +95887,8 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       notifySelect: (selectKey, bool, node) => {
         this.props.onSelect && this.props.onSelect(selectKey, bool, node);
       },
-      notifySearch: input => {
-        this.props.onSearch && this.props.onSearch(input);
+      notifySearch: (input, filteredExpandedKeys) => {
+        this.props.onSearch && this.props.onSearch(input, filteredExpandedKeys);
       },
       cacheFlattenNodes: bool => {
         this._flattenNodes = bool ? treeUtil_cloneDeep(this.state.flattenNodes) : null;