@douyinfe/semi-ui 2.6.0 → 2.7.1

package/lib/cjs/datePicker/datePicker.js

@@ -20,6 +20,8 @@ var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-j
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
 var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
 
 var _get2 = _interopRequireDefault(require("lodash/get"));
@@ -65,6 +67,10 @@ require("@douyinfe/semi-foundation/lib/cjs/datePicker/datePicker.css");
 /* 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 */
 class DatePicker extends _baseComponent.default {
   constructor(props) {
     var _this;
@@ -102,6 +108,8 @@ class DatePicker extends _baseComponent.default {
       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((0, _get2.default)(e, 'nativeEvent.target.value'), e);
@@ -130,6 +138,30 @@ class DatePicker extends _baseComponent.default {
       }
     };
 
+    this.handleInsetDateFocus = (e, rangeType) => {
+      const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showDatePanel(_constants.strings.PANEL_TYPE_RIGHT);
+      }
+
+      this.handleInputFocus(e, rangeType);
+    };
+
+    this.handleInsetTimeFocus = () => {
+      const monthGridFoundation = (0, _get2.default)(this, 'monthGrid.current.foundation');
+
+      if (monthGridFoundation) {
+        monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_LEFT);
+        monthGridFoundation.showTimePicker(_constants.strings.PANEL_TYPE_RIGHT);
+      }
+    };
+
+    this.handlePanelVisibleChange = visible => {
+      this.foundation.handlePanelVisibleChange(visible);
+    };
+
     this.handleConfirm = e => this.foundation.handleConfirm();
 
     this.handleCancel = e => this.foundation.handleCancel();
@@ -153,19 +185,43 @@ class DatePicker extends _baseComponent.default {
         dropdownStyle,
         density,
         topSlot,
-        bottomSlot
+        bottomSlot,
+        insetInput,
+        type,
+        format,
+        rangeSeparator
       } = this.props;
+      const {
+        insetInputValue,
+        value
+      } = this.state;
       const wrapCls = (0, _classnames.default)(_constants.cssClasses.PREFIX, {
         [_constants.cssClasses.PANEL_YAM]: this.adapter.typeIsYearOrMonth(),
         ["".concat(_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__*/_react.default.createElement("div", {
         ref: this.panelRef,
         className: wrapCls,
         style: dropdownStyle
       }, topSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-topSlot")
-      }, topSlot), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
+      }, topSlot), insetInput && /*#__PURE__*/_react.default.createElement(_dateInput.default, (0, _assign.default)({}, insetInputProps, {
+        insetInput: true
+      })), this.adapter.typeIsYearOrMonth() ? this.renderYearMonthPanel(locale, localeCode) : this.renderMonthGrid(locale, localeCode, dateFnsLocale), this.renderQuickControls(), bottomSlot && /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_constants.cssClasses.PREFIX, "-bottomSlot")
       }, bottomSlot), this.renderFooter(locale, localeCode));
     };
@@ -229,7 +285,8 @@ class DatePicker extends _baseComponent.default {
         position: position,
         visible: panelShow,
         stopPropagation: stopPropagation,
-        spacing: spacing
+        spacing: spacing,
+        onVisibleChange: this.handlePanelVisibleChange
       }, children);
     };
 
@@ -242,7 +299,9 @@ class DatePicker extends _baseComponent.default {
       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__*/_react.default.createRef();
@@ -345,6 +404,17 @@ class DatePicker extends _baseComponent.default {
           inputValue
         });
       },
+      updateInsetInputValue: insetInputValue => {
+        const {
+          insetInput
+        } = this.props;
+
+        if (insetInput && !(0, _isEqual2.default)(insetInputValue, this.state.insetInputValue)) {
+          this.setState({
+            insetInputValue
+          });
+        }
+      },
       needConfirm: () => {
         var _context;
 
@@ -415,7 +485,36 @@ class DatePicker extends _baseComponent.default {
         }
       },
       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 = (0, _get2.default)(this, 'rangeInputEndRef.current');
+              inputEndNode && inputEndNode.focus();
+            }
+
+            break;
+
+          case 'rangeStart':
+          default:
+            if (document.activeElement !== this.rangeInputStartRef.current) {
+              const inputStartNode = (0, _get2.default)(this, 'rangeInputStartRef.current');
+              inputStartNode && inputStartNode.focus();
+            }
+
+            break;
+        }
+      },
+      setTriggerDisabled: disabled => {
+        this.setState({
+          triggerDisabled: disabled
+        });
+      }
     });
   }
 
@@ -473,7 +572,8 @@ class DatePicker extends _baseComponent.default {
       syncSwitchMonth,
       onPanelChange,
       timeZone,
-      triggerRender
+      triggerRender,
+      insetInput
     } = this.props;
     const {
       value,
@@ -521,7 +621,8 @@ class DatePicker extends _baseComponent.default {
       onPanelChange: onPanelChange,
       timeZone: timeZone,
       focusRecordsRef: this.focusRecordsRef,
-      triggerRender: triggerRender
+      triggerRender: triggerRender,
+      insetInput: insetInput
     });
   }
 
@@ -557,20 +658,23 @@ class DatePicker extends _baseComponent.default {
       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 = (0, _classnames.default)("".concat(_constants.cssClasses.PREFIX, "-input"), {
       ["".concat(_constants.cssClasses.PREFIX, "-range-input")]: isRangeType,
       [(0, _concat.default)(_context3 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context3, size)]: isRangeType && size,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !disabled,
-      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && disabled,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-active")]: isRangeType && rangeInputFocus && !inputDisabled,
+      ["".concat(_constants.cssClasses.PREFIX, "-range-input-disabled")]: isRangeType && inputDisabled,
       [(0, _concat.default)(_context4 = "".concat(_constants.cssClasses.PREFIX, "-range-input-")).call(_context4, validateStatus)]: isRangeType && validateStatus
     });
     const phText = placeholder || locale.placeholder[type]; // i18n
@@ -578,9 +682,9 @@ class DatePicker extends _baseComponent.default {
 
     const props = (0, _assign.default)((0, _assign.default)({}, extraProps), {
       placeholder: phText,
-      disabled,
+      disabled: inputDisabled,
       inputValue,
-      value,
+      value: value,
       onChange: this.handleInputChange,
       onEnterPress: this.handleInputComplete,
       // TODO: remove in next major version
@@ -593,7 +697,7 @@ class DatePicker extends _baseComponent.default {
       format,
       multiple,
       validateStatus,
-      inputReadOnly,
+      inputReadOnly: inputReadOnly || insetInput,
       // onClick: this.handleOpenPanel,
       onBlur: this.handleInputBlur,
       onFocus: this.handleInputFocus,
@@ -602,13 +706,13 @@ class DatePicker extends _baseComponent.default {
       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__*/_react.default.createElement("div", {
       // tooltip will mount a11y props to children
@@ -757,5 +861,6 @@ DatePicker.defaultProps = {
   spacing: _constants.numbers.SPACING,
   autoSwitchDate: true,
   syncSwitchMonth: false,
-  rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE
+  rangeSeparator: _constants.strings.DEFAULT_SEPARATOR_RANGE,
+  insetInput: false
 };

package/lib/cjs/datePicker/index.js

@@ -14,13 +14,17 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _object = require("@douyinfe/semi-foundation/lib/cjs/utils/object");
 
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/datePicker/constants");
+
 var _datePicker = _interopRequireDefault(require("./datePicker"));
 
-var _context = _interopRequireDefault(require("../configProvider/context"));
+var _context2 = _interopRequireDefault(require("../configProvider/context"));
 
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
@@ -47,7 +51,25 @@ var _default = (0, _object.forwardStatics)( /*#__PURE__*/_react.default.forwardR
     propsObj.rangeSeparator = " ".concat((0, _trim.default)(rangeSeparator).call(rangeSeparator), " ");
   }
 
-  return /*#__PURE__*/_react.default.createElement(_context.default.Consumer, null, _ref => {
+  if (propsObj.insetInput) {
+    var _context;
+
+    if (!propsObj.position) {
+      propsObj.position = _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 ((0, _includes.default)(_context = propsObj.position).call(_context, 'Over') && !propsObj.spacing) {
+      propsObj.spacing = _constants.numbers.SPACING_INSET_INPUT;
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_context2.default.Consumer, null, _ref => {
     let {
       timeZone
     } = _ref;

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

@@ -0,0 +1,21 @@
+import { InsetInputValue, Type, InsetInputChangeFoundationProps } from '@douyinfe/semi-foundation/lib/cjs/datePicker/inputFoundation';
+import { InputProps } from '../input';
+export interface InsetDateInputProps {
+    forwardRef: InputProps['forwardRef'];
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+export interface InsetTimeInputProps {
+    disabled: boolean;
+    insetInputValue: InsetInputValue;
+    placeholder: string;
+    valuePath: string;
+    type: Type;
+    onChange: (options: InsetInputChangeFoundationProps) => void;
+    onFocus: InputProps['onFocus'];
+}
+export declare function InsetDateInput(props: InsetDateInputProps): JSX.Element;
+export declare function InsetTimeInput(props: InsetTimeInputProps): JSX.Element;

package/lib/cjs/datePicker/insetInput.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.InsetDateInput = InsetDateInput;
+exports.InsetTimeInput = InsetTimeInput;
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+function InsetDateInput(props) {
+  const {
+    insetInputValue,
+    valuePath,
+    onFocus,
+    onChange,
+    placeholder,
+    forwardRef
+  } = props;
+  const value = (0, _get2.default)(insetInputValue, valuePath);
+  return /*#__PURE__*/_react.default.createElement(_input.default, {
+    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 = (0, _includes.default)(type).call(type, 'Time');
+
+  if (!_isTimeType) {
+    return null;
+  }
+
+  const value = (0, _get2.default)(insetInputValue, valuePath);
+  return /*#__PURE__*/_react.default.createElement(_input.default, {
+    value: value,
+    onChange: (value, event) => {
+      onChange({
+        value,
+        event,
+        insetInputValue,
+        valuePath
+      });
+    },
+    onFocus: onFocus,
+    placeholder: placeholder,
+    disabled: disabled
+  });
+}

package/lib/cjs/datePicker/monthsGrid.js

@@ -56,6 +56,8 @@ var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePick
 
 /* 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 */
@@ -317,6 +319,9 @@ class MonthsGrid extends _baseComponent.default {
       monthRight,
       currentPanelHeight
     } = this.state;
+    const {
+      insetInput
+    } = this.props;
     const panelDetail = panelType === _constants.strings.PANEL_TYPE_RIGHT ? monthRight : monthLeft;
     const {
       isTimePickerOpen,
@@ -339,7 +344,7 @@ class MonthsGrid extends _baseComponent.default {
         style.minWidth = wrap.getBoundingClientRect().width;
       }
 
-      if (this.leftIsYearOrTime() && this.rightIsYearOrTime()) {
+      if (this.leftIsYearOrTime() && this.rightIsYearOrTime() && !insetInput) {
         /**
          * left和right同时为tpk时，panel会有一个minHeight
          * 如果缓存的currentPanelHeight为0，则需要计算滚动列表的高度
@@ -349,7 +354,7 @@ class MonthsGrid extends _baseComponent.default {
          * 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();
       }
@@ -357,10 +362,14 @@ class MonthsGrid extends _baseComponent.default {
       monthCls = (0, _classnames.default)(monthCls, "".concat(prefixCls, "-yam-showing"));
     }
 
+    const _isDatePanelOpen = !(isYearPickerOpen || isTimePickerOpen);
+
+    const xOpenType = _isDatePanelOpen ? 'date' : isYearPickerOpen ? 'year' : 'time';
     return /*#__PURE__*/_react.default.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));
   }
 
@@ -569,10 +578,11 @@ class MonthsGrid extends _baseComponent.default {
       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 (!(0, _includes.default)(type).call(type, 'Time')) {
+    if (!(0, _includes.default)(type).call(type, 'Time') || insetInput) {
       return null;
     } // switch year/month & time
 
@@ -643,7 +653,8 @@ class MonthsGrid extends _baseComponent.default {
       monthRight
     } = this.state;
     const {
-      type
+      type,
+      insetInput
     } = this.props;
     const monthGridCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-month-grid")]: true
@@ -665,6 +676,7 @@ class MonthsGrid extends _baseComponent.default {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
+      "x-insetInput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

package/lib/cjs/form/hooks/useFormApi.d.ts

@@ -1 +1,2 @@
-export default function useFormApi(): import("@douyinfe/semi-foundation/lib/cjs/form/interface").BaseFormApi<any>;
+import { BaseFormApi } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+export default function useFormApi<T extends Record<string, any> = any>(): BaseFormApi<T>;

package/lib/cjs/modal/useModal/HookModal.js

@@ -57,6 +57,8 @@ const HookModal = (_a, ref) => {
   const {
     motion
   } = props;
+  /* istanbul ignore next */
+
   const mergedMotion = typeof motion === 'undefined' || motion ? (0, _assign.default)((0, _assign.default)({}, motion), {
     didLeave: function () {
       const didLeave = (0, _get2.default)(props.motion, 'didLeave');

package/lib/cjs/radio/radioGroup.js

@@ -55,6 +55,12 @@ class RadioGroup extends _baseComponent.default {
   }
 
   componentDidUpdate(prevProps) {
+    if (typeof prevProps.value === 'number' && isNaN(prevProps.value) && typeof this.props.value === 'number' && isNaN(this.props.value)) {
+      // `NaN === NaN` returns false, and this will fail the next if check
+      // therefore triggering an infinite loop
+      return;
+    }
+
     if (prevProps.value !== this.props.value) {
       this.foundation.handlePropValueChange(this.props.value);
     }

package/lib/cjs/select/index.js

@@ -742,7 +742,9 @@ class Select extends _baseComponent.default {
       });
     }
 
-    const tags = (0, _map2.default)(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? (0, _slice.default)(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = (0, _map2.default)(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -800,12 +802,13 @@ class Select extends _baseComponent.default {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/_react.default.createElement("span", {
       className: spanCls
     }, placeholder) : null;
-    const n = tags.length > maxTagCount ? maxTagCount : undefined;
+    const n = selectedItems.length > maxTagCount ? maxTagCount : undefined;
     const NotOneLine = !maxTagCount; // Multiple lines (that is, do not set maxTagCount), do not use TagGroup, directly traverse with Tag, otherwise Input cannot follow the correct position
 
     const tagContent = NotOneLine ? tags : /*#__PURE__*/_react.default.createElement(_group.default, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/cjs/tag/group.d.ts

@@ -7,6 +7,7 @@ export interface TagGroupProps {
     style?: React.CSSProperties;
     className?: string;
     maxTagCount?: number;
+    restCount?: number;
     tagList?: (TagProps | React.ReactNode)[];
     size?: 'small' | 'large';
     showPopover?: boolean;
@@ -26,6 +27,7 @@ export default class TagGroup extends PureComponent<TagGroupProps> {
         style: PropTypes.Requireable<object>;
         className: PropTypes.Requireable<string>;
         maxTagCount: PropTypes.Requireable<number>;
+        restCount: PropTypes.Requireable<number>;
         tagList: PropTypes.Requireable<any[]>;
         size: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/cjs/tag/group.js

@@ -77,9 +77,10 @@ class TagGroup extends _react.PureComponent {
   renderMergeTags(tags) {
     const {
       maxTagCount,
-      tagList
+      tagList,
+      restCount
     } = this.props;
-    const n = tagList.length - maxTagCount;
+    const n = restCount ? restCount : tagList.length - maxTagCount;
     let renderTags = tags;
     const normalTags = (0, _slice.default)(tags).call(tags, 0, maxTagCount);
     const restTags = (0, _slice.default)(tags).call(tags, maxTagCount);
@@ -156,6 +157,7 @@ TagGroup.propTypes = {
   style: _propTypes.default.object,
   className: _propTypes.default.string,
   maxTagCount: _propTypes.default.number,
+  restCount: _propTypes.default.number,
   tagList: _propTypes.default.array,
   size: _propTypes.default.oneOf(tagSize),
   mode: _propTypes.default.string,

package/lib/cjs/tooltip/index.js

@@ -463,7 +463,7 @@ class Tooltip extends _baseComponent.default {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },

package/lib/cjs/tree/index.js

@@ -275,7 +275,8 @@ class Tree extends _baseComponent.default {
     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;
@@ -319,7 +320,8 @@ class Tree extends _baseComponent.default {
       }
     }
 
-    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+    const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
+    const expandAllWhenDataChange = dataUpdated && props.expandAll;
 
     if (!isSeaching) {
       // Update expandedKeys
@@ -345,7 +347,7 @@ class Tree extends _baseComponent.default {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
       } else if (!prevProps && props.defaultValue) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.defaultValue, keyEntities, props.multiple, valueEntities);
-      } else if (!prevProps && props.value) {
+      } else if ((!prevProps || !isExpandControlled && dataUpdated) && props.value) {
         newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
       }
 

package/lib/cjs/tree/interface.d.ts

@@ -109,6 +109,7 @@ export interface NodeListProps {
     motionKeys: Set<string>;
     motionType: string;
     flattenList: FlattenNode[] | undefined;
+    searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
 export declare type TransitionNodes<T> = Array<T | Array<T>>;

package/lib/cjs/tree/nodeList.js

@@ -49,6 +49,7 @@ class NodeList extends _react.PureComponent {
     super(props);
 
     this.onMotionEnd = () => {
+      typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });
@@ -107,12 +108,13 @@ class NodeList extends _react.PureComponent {
     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 = (0, _map.default)(mapData).call(mapData, treeNode => {
       const isMotionNode = (0, _isArray.default)(treeNode);