@douyinfe/semi-ui 2.5.1 → 2.7.0-beta.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;
@@ -36385,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 {
@@ -36395,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;
@@ -36414,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);
@@ -41521,6 +41524,8 @@ weekCalendar_WeekCalendar.contextType = locale_context;
 
 
 
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+
 
 
 
@@ -41576,11 +41581,13 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
       } = this.props;
       this.monthlyData = this.foundation.getMonthlyData(displayValue, dateFnsLocale);
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        className: "".concat(monthCalendar_prefixCls, "-header")
+        className: "".concat(monthCalendar_prefixCls, "-header"),
+        role: "presentation"
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-grid")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "row",
         className: "".concat(monthCalendar_prefixCls, "-grid-row")
       }, map_default()(_context = this.monthlyData[0]).call(_context, day => {
         const {
@@ -41590,6 +41597,8 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
           ["".concat(calendar_constants_cssClasses.PREFIX, "-weekend")]: markWeekend && day.isWeekend
         });
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+          role: "columnheader",
+          "aria-label": weekday,
           key: "".concat(weekday, "-monthheader"),
           className: listCls
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, weekday));
@@ -41672,7 +41681,10 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
       const pos = showCard && showCard[key] ? showCard[key][1] : 'leftTopOver';
       const text = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(localeConsumer_LocaleConsumer, {
         componentName: "Calendar"
-      }, locale => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      }, locale =>
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
         className: "".concat(cardCls, "-wrapper"),
         style: {
           bottom: 0
@@ -41740,11 +41752,12 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         day
       } = events;
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-weekrow"),
         ref: _this.cellDom,
         key: "".concat(index, "-weekrow")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "row",
         className: "".concat(monthCalendar_prefixCls, "-skeleton")
       }, map_default()(weekDay).call(weekDay, each => {
         const {
@@ -41763,6 +41776,9 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         });
         const shouldRenderCollapsed = Boolean(day && day[ind] && day[ind].length > itemLimit);
         const inner = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+          role: "gridcell",
+          "aria-label": date.toLocaleDateString(),
+          "aria-current": isToday ? "date" : false,
           key: "".concat(date, "-weeksk"),
           className: listCls,
           onClick: e => _this.handleClick(e, [date])
@@ -41785,9 +41801,10 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
         parsedEvents
       } = this.state;
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        role: "gridcell",
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-week")
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "presentation",
         className: "".concat(monthCalendar_prefixCls, "-grid-col")
       }, map_default()(_context3 = keys_default()(this.monthlyData)).call(_context3, weekInd => this.renderWeekRow(weekInd, this.monthlyData[weekInd], parsedEvents[weekInd]))));
     };
@@ -41918,12 +41935,15 @@ class monthCalendar_monthCalendar extends baseComponent_BaseComponent {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(localeConsumer_LocaleConsumer, {
       componentName: "Calendar"
     }, (locale, localeCode, dateFnsLocale) => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "grid",
       className: monthCls,
       key: this.state.itemLimit,
       style: monthStyle
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "presentation",
       className: "".concat(monthCalendar_prefixCls, "-sticky-top")
     }, header, this.renderHeader(dateFnsLocale)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "presentation",
       className: "".concat(monthCalendar_prefixCls, "-grid-wrapper")
     }, this.renderMonthGrid())));
   }
@@ -43916,6 +43936,7 @@ function calcMergeType(autoMergeValue, leafOnly) {
 
 
 
+
 
 
  // eslint-disable-next-line max-len
@@ -44425,6 +44446,16 @@ class foundation_CascaderFoundation extends foundation {
       this.close(e);
     }
   }
+  /**
+   * A11y: simulate selection click
+   */
+
+
+  handleSelectionEnterPress(keyboardEvent) {
+    if (utils_isEnterPress(keyboardEvent)) {
+      this.handleClick(keyboardEvent);
+    }
+  }
 
   toggleHoverState(bool) {
     this._adapter.toggleHovering(bool);
@@ -44856,6 +44887,16 @@ class foundation_CascaderFoundation extends foundation {
 
     this._adapter.rePositionDropdown();
   }
+  /**
+   * A11y: simulate clear button click
+   */
+
+
+  handleClearEnterPress(keyboardEvent) {
+    if (utils_isEnterPress(keyboardEvent)) {
+      this.handleClear();
+    }
+  }
 
   getRenderData() {
     var _context9, _context10;
@@ -45690,6 +45731,8 @@ checkbox_CheckboxWithGroup.Group = checkboxGroup;
 
 
 
+
+
 const item_prefixcls = cascader_constants_cssClasses.PREFIX_OPTION;
 class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_react_["PureComponent"] {
   constructor() {
@@ -45706,6 +45749,16 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
 
       onItemClick(e, item);
     };
+    /**
+     * A11y: simulate item click
+     */
+
+
+    this.handleItemEnterPress = (keyboardEvent, item) => {
+      if (utils_isEnterPress(keyboardEvent)) {
+        this.onClick(keyboardEvent, item);
+      }
+    };
 
     this.onHover = (e, item) => {
       const {
@@ -45785,6 +45838,7 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
 
         case 'empty':
           return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+            "aria-hidden": true,
             className: concat_default()(_context3 = "".concat(item_prefixcls, "-icon ")).call(_context3, item_prefixcls, "-icon-empty")
           });
 
@@ -45848,11 +45902,13 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
           ["".concat(item_prefixcls, "-disabled")]: disabled
         });
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+          role: 'menuitem',
           className: className,
           key: key,
           onClick: e => {
             this.onClick(e, item);
-          }
+          },
+          onKeyPress: e => this.handleItemEnterPress(e, item)
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
           className: "".concat(item_prefixcls, "-label")
         }, !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(checkbox_0, {
@@ -45877,13 +45933,15 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
     let showChildItem;
     const ind = content.length;
     content.push( /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+      role: 'menu',
       className: "".concat(item_prefixcls, "-list"),
       key: renderData[0].key,
       onScroll: e => this.props.onListScroll(e, ind)
     }, map_default()(renderData).call(renderData, item => {
       const {
         data,
-        key
+        key,
+        parentKey
       } = item;
       const {
         children,
@@ -45908,16 +45966,26 @@ class item_Item extends external_root_React_commonjs2_react_commonjs_react_amd_r
         ["".concat(item_prefixcls, "-select")]: selected && !multiple,
         ["".concat(item_prefixcls, "-disabled")]: disabled
       });
-      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", {
+      const otherAriaProps = parentKey ? {
+        ['aria-owns']: "cascaderItem-".concat(parentKey)
+      } : {};
+      return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", assign_default()({
+        role: 'menuitem',
+        id: "cascaderItem-".concat(key),
+        "aria-expanded": active,
+        "aria-haspopup": Boolean(showExpand),
+        "aria-disabled": disabled
+      }, otherAriaProps, {
         className: className,
         key: key,
         onClick: e => {
           this.onClick(e, item);
         },
+        onKeyPress: e => this.handleItemEnterPress(e, item),
         onMouseEnter: e => {
           this.onHover(e, item);
         }
-      }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+      }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
         className: "".concat(item_prefixcls, "-label")
       }, selected && !multiple && this.renderIcon('tick'), !selected && !multiple && this.renderIcon('empty'), multiple && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(checkbox_0, {
         onChange: e => this.onCheckboxChange(e, item),
@@ -47121,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,
@@ -47128,7 +47226,6 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         multiple
       } = this.props;
       const {
-        selectedKeys,
         checkedKeys
       } = this.state;
       const searchable = Boolean(filterTreeNode);
@@ -47143,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
@@ -47241,6 +47338,15 @@ class cascader_Cascader extends baseComponent_BaseComponent {
       e && e.stopPropagation();
       this.foundation.handleClear();
     };
+    /**
+     * A11y: simulate clear button click
+     */
+
+
+    this.handleClearEnterPress = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClearEnterPress();
+    };
 
     this.showClearBtn = () => {
       const {
@@ -47267,6 +47373,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
           className: clearCls,
           onClick: this.handleClear,
+          onKeyPress: this.handleClearEnterPress,
           role: 'button',
           tabIndex: 0
         }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null));
@@ -47356,6 +47463,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
         style: style,
         ref: this.triggerRef,
         onClick: e => this.foundation.handleClick(e),
+        onKeyPress: e => this.foundation.handleSelectionEnterPress(e),
         "aria-invalid": this.props['aria-invalid'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-label": this.props['aria-label'],
@@ -47679,7 +47787,7 @@ class cascader_Cascader extends baseComponent_BaseComponent {
   }
 
   renderTagInput() {
-    var _context3;
+    var _context4;
 
     const {
       size,
@@ -47699,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);
       }
@@ -47798,6 +47906,7 @@ cascader_Cascader.propTypes = {
   'aria-errormessage': prop_types_default.a.string,
   'aria-describedby': prop_types_default.a.string,
   'aria-required': prop_types_default.a.bool,
+  'aria-label': prop_types_default.a.string,
   arrowIcon: prop_types_default.a.node,
   changeOnSelect: prop_types_default.a.bool,
   defaultValue: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.array]),
@@ -47892,7 +48001,8 @@ cascader_Cascader.defaultProps = {
   onClear: noop_default.a,
   onDropdownVisibleChange: noop_default.a,
   onListScroll: noop_default.a,
-  enableLeafClick: false
+  enableLeafClick: false,
+  'aria-label': 'Cascader'
 };
 /* harmony default export */ var cascader_0 = (cascader_Cascader);
 // CONCATENATED MODULE: ../semi-foundation/collapse/constants.ts
@@ -48631,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);
@@ -52666,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 = {
@@ -52745,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
 
 
@@ -52779,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
@@ -53010,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 {
@@ -53057,6 +53300,7 @@ class foundation_DatePickerFoundation extends foundation {
 
     this.rangeTypeSideEffectsWhenClosePanel(inputValue, willUpdateDates);
     this.needConfirmSideEffectsWhenClosePanel(willUpdateDates);
+    this.clearInsetInputValue();
 
     this._adapter.notifyOpenChange(false);
 
@@ -53102,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
@@ -53232,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 {
@@ -53241,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();
 
@@ -53335,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':
@@ -53390,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) {
@@ -53399,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;
@@ -53456,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();
@@ -53483,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
@@ -53501,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) {
@@ -53553,7 +53874,7 @@ class foundation_DatePickerFoundation extends foundation {
     const {
       cachedSelectedValue,
       value
-    } = this.getStates();
+    } = this._adapter.getStates();
 
     const isRangeValueComplete = this._isRangeValueComplete(cachedSelectedValue);
 
@@ -53924,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
 
@@ -53986,7 +54324,11 @@ function formatDateValues(values, formatToken) {
 // CONCATENATED MODULE: ../semi-foundation/datePicker/inputFoundation.ts
 
 
-/* eslint-disable max-len */
+
+
+
+
+
 
 
 
@@ -54048,7 +54390,7 @@ class inputFoundation_InputFoundation extends foundation {
     this._adapter.notifyRangeInputFocus(e, rangeType);
   }
 
-  formatShowText(value) {
+  formatShowText(value, customFormat) {
     const {
       type,
       dateFnsLocale,
@@ -54056,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) {
@@ -54093,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
 
@@ -54112,6 +54704,10 @@ var dateInput_rest = undefined && undefined.__rest || function (s, e) {
   }
   return t;
 };
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
 /* eslint-disable max-lines-per-function */
 
 /* eslint-disable no-unused-vars */
@@ -54126,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 {
@@ -54164,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;
 
@@ -54212,7 +54813,8 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       },
       notifyTabPress: function () {
         return _this.props.onRangeEndTabPress(...arguments);
-      }
+      },
+      notifyInsetInputChange: options => this.props.onInsetInputChange(options)
     });
   }
 
@@ -54267,9 +54869,14 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
     } = this.props;
     const allowClear = (rangeStart || rangeEnd) && showClear;
     return allowClear && !disabled ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "Clear range input value",
       className: "".concat(prefixCls, "-range-input-clearbtn"),
       onMouseDown: e => !disabled && this.handleRangeInputClear(e)
-    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, null)) : null;
+    }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClear, {
+      "aria-hidden": true
+    })) : null;
   }
 
   renderRangeSuffix(suffix) {
@@ -54312,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'),
@@ -54355,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,
@@ -54370,6 +55040,8 @@ class dateInput_DateInput extends baseComponent_BaseComponent {
       validateStatus,
       block,
       prefixCls,
+      multiple,
+      // Whether to allow multiple values for email and file types
       dateFnsLocale,
       // No need to pass to input
       onBlur,
@@ -54385,12 +55057,18 @@ 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", "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, null);
-    const dateTimeIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendarClock, null);
+    const dateIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
+      "aria-hidden": true
+    });
+    const dateTimeIcon = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendarClock, {
+      "aria-hidden": true
+    });
     const suffix = includes_default()(type).call(type, 'Time') ? dateTimeIcon : dateIcon;
     let text = '';
 
@@ -54434,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,
@@ -54445,7 +55130,6 @@ dateInput_DateInput.propTypes = {
   value: prop_types_default.a.array,
   disabled: prop_types_default.a.bool,
   type: prop_types_default.a.oneOf(datePicker_constants_strings.TYPE_SET),
-  multiple: prop_types_default.a.bool,
   showClear: prop_types_default.a.bool,
   format: prop_types_default.a.string,
   inputStyle: prop_types_default.a.object,
@@ -54459,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,
@@ -54469,7 +55155,6 @@ dateInput_DateInput.defaultProps = {
   onBlur: function_noop,
   onClear: function_noop,
   onFocus: function_noop,
-  multiple: false,
   type: 'date',
   inputStyle: {},
   inputReadOnly: false,
@@ -55148,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);
 
@@ -55165,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);
     }
 
@@ -55566,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);
 
@@ -56124,7 +56811,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       ref: ref
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "double-chevron-left",
+      "aria-label": "Previous year",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconDoubleChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56134,7 +56823,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       style: leftButtonStyle
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "chevron-left",
+      "aria-label": "Previous month",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56150,7 +56841,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       size: buttonSize
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null, monthText))), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "chevron-right",
+      "aria-label": "Next month",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56160,7 +56853,9 @@ class navigation_Navigation extends external_root_React_commonjs2_react_commonjs
       style: rightButtonStyle
     }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       key: "double-chevron-right",
+      "aria-label": "Next year",
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconDoubleChevronRight, {
+        "aria-hidden": true,
         size: iconBtnSize
       }),
       size: buttonSize,
@@ -56430,6 +57125,8 @@ function isBetween(day, _ref) {
 
 
 
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+
 /* eslint-disable max-len */
 
 
@@ -56752,8 +57449,10 @@ class month_Month extends baseComponent_BaseComponent {
     const weekdaysText = map_default()(weekdays).call(weekdays, key => locale.weeks[key]);
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "row",
       className: weekdayCls
     }, map_default()(weekdaysText).call(weekdaysText, (E, i) => /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "columnheader",
       key: E + i,
       className: weekdayItemCls
     }, E)));
@@ -56788,6 +57487,7 @@ class month_Month extends baseComponent_BaseComponent {
   renderWeek(week, weekIndex) {
     const weekCls = datePicker_constants_cssClasses.WEEK;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "row",
       className: weekCls,
       key: weekIndex
     }, map_default()(week).call(week, (day, dayIndex) => this.renderDay(day, dayIndex)));
@@ -56808,6 +57508,8 @@ class month_Month extends baseComponent_BaseComponent {
 
     if (!fullDate) {
       return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+        role: "gridcell",
+        tabIndex: -1,
         key: dayNumber + dayIndex,
         className: datePicker_constants_cssClasses.DAY
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", null));
@@ -56845,6 +57547,11 @@ class month_Month extends baseComponent_BaseComponent {
     const customRender = isFunction_default()(renderFullDate);
 
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "gridcell",
+      tabIndex: dayStatus.isDisabled ? -1 : 0,
+      "aria-disabled": dayStatus.isDisabled,
+      "aria-selected": dayStatus.isSelected,
+      "aria-label": fullDate,
       className: !customRender ? dayCls : datePicker_constants_cssClasses.DAY,
       title: fullDate,
       key: dayNumber + dayIndex,
@@ -56858,13 +57565,16 @@ class month_Month extends baseComponent_BaseComponent {
 
   render() {
     const {
-      forwardRef
+      forwardRef,
+      multiple
     } = this.props;
     const weekday = this.renderDayOfWeek();
     const weeks = this.renderWeeks();
     const monthCls = classnames_default()(datePicker_constants_cssClasses.MONTH);
     const ref = forwardRef || this.monthRef;
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "grid",
+      "aria-multiselectable": multiple,
       ref: ref,
       className: monthCls
     }, weekday, weeks);
@@ -56890,7 +57600,8 @@ month_Month.propTypes = {
   startDateOffset: prop_types_default.a.func,
   endDateOffset: prop_types_default.a.func,
   rangeInputFocus: prop_types_default.a.oneOfType([prop_types_default.a.string, prop_types_default.a.bool]),
-  focusRecordsRef: prop_types_default.a.object
+  focusRecordsRef: prop_types_default.a.object,
+  multiple: prop_types_default.a.bool
 };
 month_Month.defaultProps = {
   month: new Date(),
@@ -57577,13 +58288,14 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
           transform: itemTrans
         } = item;
         const transform = typeof itemTrans === 'function' ? itemTrans : commonTrans;
+        const selected = selectedIndex === index;
         const cls = classnames_default()({
-          ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-sel")]: selectedIndex === index && mode !== wheelMode,
+          ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-sel")]: selected && mode !== wheelMode,
           ["".concat(scrollList_constants_cssClasses.PREFIX, "-item-disabled")]: Boolean(item.disabled)
         });
         let text = '';
 
-        if (selectedIndex === index) {
+        if (selected) {
           if (typeof transform === 'function') {
             text = transform(item.value, item.text);
           } else {
@@ -57607,7 +58319,10 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
           external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("li", assign_default()({
             key: prefixKey + index
           }, events, {
-            className: cls
+            className: cls,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": item.disabled
           }), text)
         );
       });
@@ -57626,6 +58341,9 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
         className: wrapperCls,
         ref: this._cacheWrapperNode
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "listbox",
+        "aria-multiselectable": false,
+        "aria-label": this.props['aria-label'],
         ref: this._cacheListNode
       }, inner));
     };
@@ -57683,6 +58401,9 @@ class scrollItem_ScrollItem extends baseComponent_BaseComponent {
         ref: this._cacheWrapperNode,
         onScroll: this.scrollToSelectItem
       }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("ul", {
+        role: "listbox",
+        "aria-label": this.props['aria-label'],
+        "aria-multiselectable": false,
         ref: this._cacheListNode,
         onClick: this.clickToSelectItem
       }, prependList, inner, appendList)));
@@ -58705,6 +59426,7 @@ class yearAndMonth_YearAndMonth extends baseComponent_BaseComponent {
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(iconButton_0, {
       noHorizontalPadding: false,
       icon: /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconChevronLeft, {
+        "aria-hidden": true,
         size: iconSize
       }),
       size: buttonSize,
@@ -58744,6 +59466,10 @@ 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 */
@@ -59019,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,
@@ -59041,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，则需要计算滚动列表的高度
@@ -59051,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();
       }
@@ -59059,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));
   }
 
@@ -59099,7 +59832,8 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       endDateOffset,
       density,
       rangeInputFocus,
-      syncSwitchMonth
+      syncSwitchMonth,
+      multiple
     } = this.props;
     let monthText = ''; // i18n monthText
 
@@ -59165,7 +59899,8 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       onWeeksRowNumChange: weeksRowNum => this.handleWeeksRowNumChange(weeksRowNum, panelType),
       startDateOffset: startDateOffset,
       endDateOffset: endDateOffset,
-      focusRecordsRef: this.props.focusRecordsRef
+      focusRecordsRef: this.props.focusRecordsRef,
+      multiple: multiple
     }));
   }
 
@@ -59271,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
 
@@ -59321,14 +60057,22 @@ class monthsGrid_MonthsGrid extends baseComponent_BaseComponent {
       className: switchCls,
       ref: current => this.adapter.setCache("switch-".concat(panelType), current)
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to date panel",
       className: dateCls,
       onClick: e => this.foundation.showDatePanel(panelType)
-    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconCalendar, {
+      "aria-hidden": true
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: textCls
     }, dateText || monthText)), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
+      role: "button",
+      "aria-label": "Switch to time panel",
       className: timeCls,
       onClick: e => this.foundation.showTimePicker(panelType, true)
-    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClock, null), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
+    }, showSwithIcon && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(IconClock, {
+      "aria-hidden": true
+    }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("span", {
       className: textCls
     }, timeText)));
   }
@@ -59339,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
@@ -59361,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);
   }
@@ -59417,6 +60163,8 @@ monthsGrid_MonthsGrid.defaultProps = {
 
 
 
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
+
 
 
 
@@ -59510,8 +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 */
+
 
 
 
@@ -59564,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);
@@ -59592,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();
@@ -59615,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));
     };
@@ -59691,7 +60496,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
         position: position,
         visible: panelShow,
         stopPropagation: stopPropagation,
-        spacing: spacing
+        spacing: spacing,
+        onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
 
@@ -59704,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();
@@ -59807,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;
 
@@ -59881,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
+        });
+      }
     });
   }
 
@@ -59939,7 +60789,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       syncSwitchMonth,
       onPanelChange,
       timeZone,
-      triggerRender
+      triggerRender,
+      insetInput
     } = this.props;
     const {
       value,
@@ -59987,7 +60838,8 @@ class datePicker_DatePicker extends baseComponent_BaseComponent {
       onPanelChange: onPanelChange,
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
-      triggerRender: triggerRender
+      triggerRender: triggerRender,
+      insetInput: insetInput
     });
   }
 
@@ -60023,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
@@ -60044,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
@@ -60059,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,
@@ -60068,27 +60923,28 @@ 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__*/
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-      external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement("div", {
-        onClick: this.handleTriggerWrapperClick,
-        className: inputCls
-      }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
-        triggerRender: triggerRender,
-        componentName: "DatePicker",
-        componentProps: assign_default()({}, this.props)
-      })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)))
-    );
+    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
+      role: "combobox",
+      "aria-label": is_array_default()(value) && value.length ? "Change date" : "Choose date",
+      "aria-disabled": disabled,
+      onClick: this.handleTriggerWrapperClick,
+      className: inputCls
+    }, typeof triggerRender === 'function' ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(trigger_0, assign_default()({}, props, {
+      triggerRender: triggerRender,
+      componentName: "DatePicker",
+      componentProps: assign_default()({}, this.props)
+    })) : /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createElement(dateInput_DateInput, assign_default()({}, props)));
   }
 
   render() {
@@ -60221,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
 
@@ -60237,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);
 
@@ -60261,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
@@ -66248,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;
@@ -66268,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);
@@ -66308,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') {
@@ -66754,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", {
@@ -66766,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;
@@ -84826,8 +85705,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,
@@ -84839,7 +85723,7 @@ class Body_Body extends baseComponent_BaseComponent {
         index: index,
         virtualized: virtualized,
         key: genExpandedRowKey(key),
-        cellWidths: cellWidths
+        cellWidths: _this.cellWidths
       });
     };
     /**
@@ -85017,7 +85901,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) {
@@ -85029,6 +85915,8 @@ class Body_Body extends baseComponent_BaseComponent {
     }
 
     this.foundation = new bodyFoundation_TableBodyFoundation(this.adapter);
+    this.flattenedColumns = flattenedColumns;
+    this.cellWidths = getCellWidths(flattenedColumns);
     this.observer = null;
   }
 
@@ -92219,12 +93107,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);
@@ -92474,7 +93363,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;
@@ -92518,7 +93408,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
@@ -92544,7 +93435,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);
       }
 
@@ -93046,6 +93937,7 @@ const treeSelect_constants_numbers = {};
 
 
 
+
 
 
  // eslint-disable-next-line max-len
@@ -93188,7 +94080,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,
@@ -93475,20 +94367,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([]),
@@ -93502,6 +94399,7 @@ class foundation_TreeSelectFoundation extends foundation {
     this._adapter.updateInputValue(sugInput);
 
     const {
+      flattenNodes,
       expandedKeys,
       selectedKeys,
       keyEntities,
@@ -93512,17 +94410,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;
 
@@ -93535,17 +94434,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
     });
   }
@@ -93789,7 +94690,9 @@ class foundation_TreeSelectFoundation extends foundation {
       return;
     }
 
-    if (isSearching) {
+    const isExpandControlled = this._isExpandControlled();
+
+    if (isSearching && !isExpandControlled) {
       this.handleNodeExpandInSearch(e, treeNode);
       return;
     }
@@ -93817,7 +94720,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 = {
@@ -94629,7 +95532,8 @@ class treeSelect_TreeSelect extends baseComponent_BaseComponent {
       const {
         flattenNodes,
         motionKeys,
-        motionType
+        motionType,
+        filteredKeys
       } = this.state;
       const {
         direction
@@ -94638,6 +95542,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, {
@@ -94645,6 +95550,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
         });
@@ -94964,8 +95871,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;
@@ -102585,7 +103492,7 @@ function withField(Component, opts) {
           text: label || field,
           id: labelId,
           required: required,
-          name: name || field,
+          name: a11yId || name || field,
           width: mergeLabelWidth,
           align: mergeLabelAlign
         }, needSpread));