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

package/lib/cjs/tooltip/index.js

@@ -24,6 +24,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 
 var _each2 = _interopRequireDefault(require("lodash/each"));
@@ -185,6 +187,17 @@ class Tooltip extends _baseComponent.default {
       }
     };
 
+    this.handlePortalInnerKeyDown = e => {
+      this.foundation.handleContainerKeydown(e);
+    };
+
+    this.renderContentNode = content => {
+      const contentProps = {
+        initialFocusRef: this.initialFocusRef
+      };
+      return !(0, _isFunction2.default)(content) ? content : content(contentProps);
+    };
+
     this.renderPortal = () => {
       const {
         containerStyle = {},
@@ -204,6 +217,7 @@ class Tooltip extends _baseComponent.default {
         role,
         zIndex
       } = this.props;
+      const contentNode = this.renderContentNode(content);
       const {
         className: propClassName
       } = this.props;
@@ -238,7 +252,7 @@ class Tooltip extends _baseComponent.default {
           role: role,
           "x-placement": placement,
           id: id
-        }), content, icon);
+        }), contentNode, icon);
       } : null) : /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
         className: className
       }, portalEventSet, {
@@ -246,7 +260,7 @@ class Tooltip extends _baseComponent.default {
         style: (0, _assign.default)({
           visibility: motion ? undefined : 'visible'
         }, style)
-      }), content, icon);
+      }), contentNode, icon);
       return /*#__PURE__*/_react.default.createElement(_index.default, {
         getPopupContainer: this.props.getPopupContainer,
         style: {
@@ -256,7 +270,8 @@ class Tooltip extends _baseComponent.default {
         className: "".concat(_constants.BASE_CLASS_PREFIX, "-portal-inner"),
         style: portalInnerStyle,
         ref: this.setContainerEl,
-        onClick: this.handlePortalInnerClick
+        onClick: this.handlePortalInnerClick,
+        onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
 
@@ -319,6 +334,7 @@ class Tooltip extends _baseComponent.default {
     this.eventManager = new _Event.default();
     this.triggerEl = /*#__PURE__*/_react.default.createRef();
     this.containerEl = /*#__PURE__*/_react.default.createRef();
+    this.initialFocusRef = /*#__PURE__*/_react.default.createRef();
     this.clickOutsideHandler = null;
     this.resizeHandler = null;
     this.isWrapped = false; // Identifies whether a span element is wrapped
@@ -370,7 +386,8 @@ class Tooltip extends _baseComponent.default {
         mouseOver: 'onMouseOver',
         click: 'onClick',
         focus: 'onFocus',
-        blur: 'onBlur'
+        blur: 'onBlur',
+        keydown: 'onKeyDown'
       }),
       registerTriggerEvent: triggerEventSet => {
         this.setState({
@@ -388,15 +405,8 @@ class Tooltip extends _baseComponent.default {
         // eslint-disable-next-line
         // It may be a React component or an html element
         // There is no guarantee that triggerE l.current can get the real dom, so call findDOMNode to ensure that you can get the real dom
-        let triggerDOM = this.triggerEl.current;
-
-        if (!(0, _reactUtils.isHTMLElement)(this.triggerEl.current)) {
-          const realDomNode = _reactDom.default.findDOMNode(this.triggerEl.current);
-
-          this.triggerEl.current = realDomNode;
-          triggerDOM = realDomNode;
-        }
-
+        const triggerDOM = this.adapter.getTriggerNode();
+        this.triggerEl.current = triggerDOM;
         return triggerDOM && triggerDOM.getBoundingClientRect();
       },
       // Gets the outer size of the specified container
@@ -463,7 +473,7 @@ class Tooltip extends _baseComponent.default {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },
@@ -533,12 +543,7 @@ class Tooltip extends _baseComponent.default {
             return false;
           }
 
-          let triggerDOM = this.triggerEl.current;
-
-          if (!(0, _reactUtils.isHTMLElement)(this.triggerEl.current)) {
-            triggerDOM = _reactDom.default.findDOMNode(this.triggerEl.current);
-          }
-
+          const triggerDOM = this.adapter.getTriggerNode();
           const isRelativeScroll = e.target.contains(triggerDOM);
 
           if (isRelativeScroll) {
@@ -569,7 +574,33 @@ class Tooltip extends _baseComponent.default {
           this.containerPosition = position;
         }
       },
-      getContainerPosition: () => this.containerPosition
+      getContainerPosition: () => this.containerPosition,
+      getContainer: () => this.containerEl && this.containerEl.current,
+      getTriggerNode: () => {
+        let triggerDOM = this.triggerEl.current;
+
+        if (!(0, _reactUtils.isHTMLElement)(this.triggerEl.current)) {
+          triggerDOM = _reactDom.default.findDOMNode(this.triggerEl.current);
+        }
+
+        return triggerDOM;
+      },
+      getFocusableElements: node => {
+        return (0, _utils.getFocusableElements)(node);
+      },
+      getActiveElement: () => {
+        return (0, _utils.getActiveElement)();
+      },
+      setInitialFocus: () => {
+        const focusRefNode = (0, _get2.default)(this, 'initialFocusRef.current');
+
+        if (focusRefNode && 'focus' in focusRefNode) {
+          focusRefNode.focus();
+        }
+      },
+      notifyEscKeydown: event => {
+        this.props.onEscKeyDown(event);
+      }
     });
   }
 
@@ -611,7 +642,8 @@ class Tooltip extends _baseComponent.default {
     } = this.state;
     const {
       wrapWhenSpecial,
-      role
+      role,
+      trigger
     } = this.props;
     let {
       children
@@ -669,7 +701,8 @@ class Tooltip extends _baseComponent.default {
         } else if (ref && typeof ref === 'object') {
           ref.current = node;
         }
-      }
+      },
+      tabIndex: trigger === 'hover' ? 0 : undefined
     })); // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference
     // So if the user adds ref to the content, you need to use callback ref: https://github.com/facebook/react/issues/8873
 
@@ -697,7 +730,7 @@ Tooltip.propTypes = {
   clickTriggerToHide: _propTypes.default.bool,
   visible: _propTypes.default.bool,
   style: _propTypes.default.object,
-  content: _propTypes.default.node,
+  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   prefixCls: _propTypes.default.string,
   onVisibleChange: _propTypes.default.func,
   onClickOutSide: _propTypes.default.func,
@@ -711,8 +744,9 @@ Tooltip.propTypes = {
   stopPropagation: _propTypes.default.bool,
   // private
   role: _propTypes.default.string,
-  wrapWhenSpecial: _propTypes.default.bool // when trigger has special status such as "disabled" or "loading", wrap span
-
+  wrapWhenSpecial: _propTypes.default.bool,
+  guardFocus: _propTypes.default.bool,
+  returnFocusOnClose: _propTypes.default.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: _constants2.numbers.ARROW_BOUNDING,
@@ -731,5 +765,9 @@ Tooltip.defaultProps = {
   spacing: _constants2.numbers.SPACING,
   showArrow: true,
   wrapWhenSpecial: true,
-  zIndex: _constants2.numbers.DEFAULT_Z_INDEX
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  closeOnEsc: false,
+  guardFocus: false,
+  returnFocusOnClose: false,
+  onEscKeyDown: _noop2.default
 };

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: []
       });

package/lib/cjs/treeSelect/index.js

@@ -955,6 +955,10 @@ class TreeSelect extends _baseComponent.default {
     this.clickOutsideHandler = null;
     this.foundation = new _foundation.default(this.adapter);
     this.treeSelectID = (0, _slice.default)(_context2 = Math.random().toString(36)).call(_context2, 2);
+
+    this.onMotionEnd = () => {
+      this.adapter.rePositionDropdown();
+    };
   } // eslint-disable-next-line max-lines-per-function
 
 

package/lib/es/_utils/hooks/usePrevFocus.js

@@ -2,6 +2,8 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import { useState, useEffect } from 'react';
 import { getActiveElement } from '../index';
+
+/* istanbul ignore next */
 export function usePrevFocus() {
   const [prevFocusElement, setPrevFocus] = useState(getActiveElement());
   useEffect(() => {

package/lib/es/_utils/index.d.ts

@@ -67,4 +67,6 @@ export interface HighLightTextHTMLChunk {
  * @returns boolean
  */
 export declare const isSemiIcon: (icon: any) => boolean;
-export declare function getActiveElement(): HTMLElement;
+export declare function getActiveElement(): HTMLElement | null;
+export declare function isNodeContainsFocus(node: HTMLElement): boolean;
+export declare function getFocusableElements(node: HTMLElement): HTMLElement[];

package/lib/es/_utils/index.js

@@ -6,6 +6,7 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 
 /* eslint-disable max-len */
 
@@ -13,6 +14,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React from 'react';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
 import { findAll } from '@douyinfe/semi-foundation/lib/es/utils/getHighlight';
+import { isHTMLElement } from '@douyinfe/semi-foundation/lib/es/utils/dom';
 /**
  * stop propagation
  *
@@ -168,4 +170,20 @@ export const registerMediaQuery = (media, _ref2) => {
 export const isSemiIcon = icon => /*#__PURE__*/React.isValidElement(icon) && _get(icon.type, 'elementType') === 'Icon';
 export function getActiveElement() {
   return document ? document.activeElement : null;
+}
+export function isNodeContainsFocus(node) {
+  const activeElement = getActiveElement();
+  return activeElement === node || node.contains(activeElement);
+}
+export function getFocusableElements(node) {
+  if (!isHTMLElement(node)) {
+    return [];
+  }
+
+  const focusableSelectorsList = ["input:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", "a[href]:not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "iframe:not([tabindex='-1'])", "object:not([tabindex='-1'])", "*[tabindex]:not([tabindex='-1'])", "*[contenteditable]:not([tabindex='-1'])"];
+  const focusableSelectorsStr = focusableSelectorsList.join(','); // we are not filtered elements which are invisible
+
+  const focusableElements = _Array$from(node.querySelectorAll(focusableSelectorsStr));
+
+  return focusableElements;
 }

package/lib/es/datePicker/monthsGrid.js

@@ -1,7 +1,6 @@
 import _stubFalse from "lodash/stubFalse";
 import _noop from "lodash/noop";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -19,7 +18,7 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { format as formatFn, addMonths, isSameDay } from 'date-fns';
+import { format as formatFn, isSameDay } from 'date-fns';
 import MonthsGridFoundation from '@douyinfe/semi-foundation/lib/es/datePicker/monthsGridFoundation';
 import { strings, numbers, cssClasses } from '@douyinfe/semi-foundation/lib/es/datePicker/constants';
 import { compatiableParse } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/parser';
@@ -30,6 +29,7 @@ import Combobox from '../timePicker/Combobox';
 import YearAndMonth from './yearAndMonth';
 import { IconClock, IconCalendar } from '@douyinfe/semi-icons';
 import { getDefaultFormatTokenByType } from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/getDefaultFormatToken';
+import getDefaultPickerDate from '@douyinfe/semi-foundation/lib/es/datePicker/_utils/getDefaultPickerDate';
 const prefixCls = cssClasses.PREFIX;
 export default class MonthsGrid extends BaseComponent {
   constructor(props) {
@@ -132,23 +132,15 @@ export default class MonthsGrid extends BaseComponent {
       return this.foundation.getYAMOpenType();
     };
 
-    let nowDate = _Array$isArray(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || getDefaultFormatTokenByType(props.type);
-
-    if (!nowDate) {
-      nowDate = new Date();
-    } else {
-      nowDate = compatiableParse(nowDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
-    let nextDate = _Array$isArray(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-
-    if (!nextDate) {
-      nextDate = addMonths(nowDate, 1);
-    } else {
-      nextDate = compatiableParse(nextDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
+    const {
+      nowDate,
+      nextDate
+    } = getDefaultPickerDate({
+      defaultPickerValue: props.defaultPickerValue,
+      format: validFormat,
+      dateFnsLocale: props.dateFnsLocale
+    });
     const dateState = {
       // Direct use of full date string storage, mainly considering the month rendering comparison to save a conversion
       // The selected value for single or multiple selection, full date string, eg. {'2019-10-01', '2019-10-02'}
@@ -647,7 +639,7 @@ export default class MonthsGrid extends BaseComponent {
       className: monthGridCls,
       "x-type": type,
       "x-panel-yearandmonth-open-type": yearOpenType,
-      "x-insetInput": insetInput ? "true" : "false",
+      "x-insetinput": insetInput ? "true" : "false",
       ref: current => this.cacheRefCurrent('monthGrid', current)
     }, content);
   }

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

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

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

@@ -39,6 +39,8 @@ const HookModal = (_a, ref) => {
   const {
     motion
   } = props;
+  /* istanbul ignore next */
+
   const mergedMotion = typeof motion === 'undefined' || motion ? _Object$assign(_Object$assign({}, motion), {
     didLeave: function () {
       const didLeave = _get(props.motion, 'didLeave');

package/lib/es/notification/useNotification/index.js

@@ -80,9 +80,10 @@ function usePatchElement() {
 export default function useNotification() {
   const [elements, patchElement] = usePatchElement();
   const noticeRef = new _Map();
-  const id = getUuid('semi_notice_');
 
   const addNotice = config => {
+    const id = getUuid('semi_notice_');
+
     const mergeConfig = _Object$assign(_Object$assign({}, config), {
       id
     }); // eslint-disable-next-line prefer-const

package/lib/es/popover/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ArrowBounding, Position, Trigger } from '../tooltip/index';
+import { ArrowBounding, Position, TooltipProps, Trigger, RenderContentProps } from '../tooltip/index';
 import '@douyinfe/semi-foundation/lib/es/popover/popover.css';
 import { BaseProps } from '../_base/baseComponent';
 import { Motion } from '../_base/base';
@@ -12,7 +12,7 @@ declare interface ArrowStyle {
 }
 export interface PopoverProps extends BaseProps {
     children?: React.ReactNode;
-    content?: React.ReactNode;
+    content?: TooltipProps['content'];
     visible?: boolean;
     autoAdjustOverflow?: boolean;
     motion?: Motion;
@@ -33,6 +33,10 @@ export interface PopoverProps extends BaseProps {
     rePosKey?: string | number;
     getPopupContainer?: () => HTMLElement;
     zIndex?: number;
+    closeOnEsc?: TooltipProps['closeOnEsc'];
+    guardFocus?: TooltipProps['guardFocus'];
+    returnFocusOnClose?: TooltipProps['returnFocusOnClose'];
+    onEscKeyDown?: TooltipProps['onEscKeyDown'];
 }
 export interface PopoverState {
     popConfirmVisible: boolean;
@@ -64,6 +68,7 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         arrowPointAtCenter: PropTypes.Requireable<boolean>;
         arrowBounding: PropTypes.Requireable<object>;
         prefixCls: PropTypes.Requireable<string>;
+        guardFocus: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -82,8 +87,18 @@ declare class Popover extends React.PureComponent<PopoverProps, PopoverState> {
         position: string;
         prefixCls: string;
         onClickOutSide: (...args: any[]) => void;
+        onEscKeyDown: (...args: any[]) => void;
+        closeOnEsc: boolean;
+        returnFocusOnClose: boolean;
+        guardFocus: boolean;
     };
-    renderPopCard(): JSX.Element;
+    renderPopCard: ({ initialFocusRef }: {
+        initialFocusRef: RenderContentProps['initialFocusRef'];
+    }) => JSX.Element;
+    renderContentNode: (props: {
+        content: TooltipProps['content'];
+        initialFocusRef: RenderContentProps['initialFocusRef'];
+    }) => React.ReactNode;
     render(): JSX.Element;
 }
 export default Popover;

package/lib/es/popover/index.js

@@ -1,4 +1,5 @@
 import _noop from "lodash/noop";
+import _isFunction from "lodash/isFunction";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -26,23 +27,45 @@ const positionSet = strings.POSITION_SET;
 const triggerSet = strings.TRIGGER_SET;
 
 class Popover extends React.PureComponent {
-  renderPopCard() {
-    const {
-      content,
-      contentClassName,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = classNames(prefixCls, contentClassName, {
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: popCardCls
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-content")
-    }, content));
+  constructor() {
+    super(...arguments);
+
+    this.renderPopCard = _ref => {
+      let {
+        initialFocusRef
+      } = _ref;
+      const {
+        content,
+        contentClassName,
+        prefixCls
+      } = this.props;
+      const {
+        direction
+      } = this.context;
+      const popCardCls = classNames(prefixCls, contentClassName, {
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+      });
+      const contentNode = this.renderContentNode({
+        initialFocusRef,
+        content
+      });
+      return /*#__PURE__*/React.createElement("div", {
+        className: popCardCls
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-content")
+      }, contentNode));
+    };
+
+    this.renderContentNode = props => {
+      const {
+        initialFocusRef,
+        content
+      } = props;
+      const contentProps = {
+        initialFocusRef
+      };
+      return !_isFunction(content) ? content : content(contentProps);
+    };
   }
 
   render() {
@@ -62,7 +85,6 @@ class Popover extends React.PureComponent {
     let {
       spacing
     } = this.props;
-    const popContent = this.renderPopCard();
     const arrowProps = {
       position,
       className: '',
@@ -76,11 +98,13 @@ class Popover extends React.PureComponent {
     }
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
-    return /*#__PURE__*/React.createElement(Tooltip, _Object$assign({}, attr, {
+    return /*#__PURE__*/React.createElement(Tooltip, _Object$assign({
+      guardFocus: true
+    }, attr, {
       trigger: trigger,
       position: position,
       style: style,
-      content: popContent,
+      content: this.renderPopCard,
       prefixCls: prefixCls,
       spacing: spacing,
       showArrow: arrow,
@@ -94,7 +118,7 @@ class Popover extends React.PureComponent {
 Popover.contextType = ConfigContext;
 Popover.propTypes = {
   children: PropTypes.node,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   visible: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   motion: PropTypes.oneOfType([PropTypes.bool, PropTypes.object, PropTypes.func]),
@@ -117,7 +141,8 @@ Popover.propTypes = {
   }),
   arrowPointAtCenter: PropTypes.bool,
   arrowBounding: PropTypes.object,
-  prefixCls: PropTypes.string
+  prefixCls: PropTypes.string,
+  guardFocus: PropTypes.bool
 };
 Popover.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,
@@ -130,6 +155,10 @@ Popover.defaultProps = {
   okText: 'Yes',
   position: 'bottom',
   prefixCls: cssClasses.PREFIX,
-  onClickOutSide: _noop
+  onClickOutSide: _noop,
+  onEscKeyDown: _noop,
+  closeOnEsc: true,
+  returnFocusOnClose: true,
+  guardFocus: true
 };
 export default Popover;

package/lib/es/radio/radioGroup.js

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

package/lib/es/select/index.js

@@ -688,7 +688,9 @@ class Select extends BaseComponent {
       });
     }
 
-    const tags = _mapInstanceProperty(selectedItems).call(selectedItems, (item, i) => {
+    const mapItems = maxTagCount ? _sliceInstanceProperty(selectedItems).call(selectedItems, 0, maxTagCount) : selectedItems; // no need to render rest tag when maxTagCount is setting
+
+    const tags = _mapInstanceProperty(mapItems).call(mapItems, (item, i) => {
       const label = item[0];
       const {
         value
@@ -747,12 +749,13 @@ class Select extends BaseComponent {
     const placeholderText = placeholder && !inputValue ? /*#__PURE__*/React.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.createElement(TagGroup, {
       tagList: tags,
       maxTagCount: n,
+      restCount: maxTagCount ? selectedItems.length - maxTagCount : undefined,
       size: "large",
       mode: "custom"
     });

package/lib/es/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/es/tag/group.js

@@ -46,9 +46,10 @@ export default class TagGroup extends 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 = _sliceInstanceProperty(tags).call(tags, 0, maxTagCount);
@@ -128,6 +129,7 @@ TagGroup.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,
   maxTagCount: PropTypes.number,
+  restCount: PropTypes.number,
   tagList: PropTypes.array,
   size: PropTypes.oneOf(tagSize),
   mode: PropTypes.string,