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

package/inputNumber/_story/inputNumber.stories.js

@@ -63,6 +63,10 @@ export const _InputNumber = () => {
         />
         <br />
 
+        <label>小数（没有初始化值）</label>
+        <InputNumber precision={2} onChange={log} />
+        <br />
+
         <label>小数</label>
         <InputNumber defaultValue={10.08} precision={2} onChange={log} />
         <br />

package/lib/cjs/_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/cjs/_utils/index.js

@@ -10,7 +10,10 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports.cloneDeep = cloneDeep;
 exports.getActiveElement = getActiveElement;
-exports.registerMediaQuery = exports.isSemiIcon = exports.getHighLightTextHTML = void 0;
+exports.getFocusableElements = getFocusableElements;
+exports.getHighLightTextHTML = void 0;
+exports.isNodeContainsFocus = isNodeContainsFocus;
+exports.registerMediaQuery = exports.isSemiIcon = void 0;
 exports.stopPropagation = stopPropagation;
 
 var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
@@ -23,6 +26,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
 var _get2 = _interopRequireDefault(require("lodash/get"));
 
 var _set2 = _interopRequireDefault(require("lodash/set"));
@@ -35,6 +40,8 @@ var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs
 
 var _getHighlight = require("@douyinfe/semi-foundation/lib/cjs/utils/getHighlight");
 
+var _dom = require("@douyinfe/semi-foundation/lib/cjs/utils/dom");
+
 /* eslint-disable max-len */
 
 /* argus-disable unPkgSensitiveInfo */
@@ -202,4 +209,21 @@ exports.isSemiIcon = isSemiIcon;
 
 function getActiveElement() {
   return document ? document.activeElement : null;
+}
+
+function isNodeContainsFocus(node) {
+  const activeElement = getActiveElement();
+  return activeElement === node || node.contains(activeElement);
+}
+
+function getFocusableElements(node) {
+  if (!(0, _dom.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 = (0, _from.default)(node.querySelectorAll(focusableSelectorsStr));
+  return focusableElements;
 }

package/lib/cjs/datePicker/monthsGrid.js

@@ -12,8 +12,6 @@ exports.default = void 0;
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
-var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
-
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
@@ -54,6 +52,8 @@ var _semiIcons = require("@douyinfe/semi-icons");
 
 var _getDefaultFormatToken = require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultFormatToken");
 
+var _getDefaultPickerDate = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/datePicker/_utils/getDefaultPickerDate"));
+
 /* eslint-disable jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events */
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -165,23 +165,15 @@ class MonthsGrid extends _baseComponent.default {
       return this.foundation.getYAMOpenType();
     };
 
-    let nowDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[0] : props.defaultPickerValue;
     const validFormat = props.format || (0, _getDefaultFormatToken.getDefaultFormatTokenByType)(props.type);
-
-    if (!nowDate) {
-      nowDate = new Date();
-    } else {
-      nowDate = (0, _parser.compatiableParse)(nowDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
-    let nextDate = (0, _isArray.default)(props.defaultPickerValue) ? props.defaultPickerValue[1] : undefined;
-
-    if (!nextDate) {
-      nextDate = (0, _dateFns.addMonths)(nowDate, 1);
-    } else {
-      nextDate = (0, _parser.compatiableParse)(nextDate, validFormat, undefined, props.dateFnsLocale);
-    }
-
+    const {
+      nowDate,
+      nextDate
+    } = (0, _getDefaultPickerDate.default)({
+      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'}
@@ -676,7 +668,7 @@ class MonthsGrid extends _baseComponent.default {
       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/cjs/notification/useNotification/index.js

@@ -111,9 +111,9 @@ function usePatchElement() {
 function useNotification() {
   const [elements, patchElement] = usePatchElement();
   const noticeRef = new _map2.default();
-  const id = (0, _uuid.default)('semi_notice_');
 
   const addNotice = config => {
+    const id = (0, _uuid.default)('semi_notice_');
     const mergeConfig = (0, _assign.default)((0, _assign.default)({}, config), {
       id
     }); // eslint-disable-next-line prefer-const

package/lib/cjs/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/cjs/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/cjs/popover/index.js

@@ -18,6 +18,8 @@ var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _noop2 = _interopRequireDefault(require("lodash/noop"));
 
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -49,23 +51,45 @@ const positionSet = _constants.strings.POSITION_SET;
 const triggerSet = _constants.strings.TRIGGER_SET;
 
 class Popover extends _react.default.PureComponent {
-  renderPopCard() {
-    const {
-      content,
-      contentClassName,
-      prefixCls
-    } = this.props;
-    const {
-      direction
-    } = this.context;
-    const popCardCls = (0, _classnames.default)(prefixCls, contentClassName, {
-      ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
-    });
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: popCardCls
-    }, /*#__PURE__*/_react.default.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 = (0, _classnames.default)(prefixCls, contentClassName, {
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+      });
+      const contentNode = this.renderContentNode({
+        initialFocusRef,
+        content
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: popCardCls
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-content")
+      }, contentNode));
+    };
+
+    this.renderContentNode = props => {
+      const {
+        initialFocusRef,
+        content
+      } = props;
+      const contentProps = {
+        initialFocusRef
+      };
+      return !(0, _isFunction2.default)(content) ? content : content(contentProps);
+    };
   }
 
   render() {
@@ -85,7 +109,6 @@ class Popover extends _react.default.PureComponent {
     let {
       spacing
     } = this.props;
-    const popContent = this.renderPopCard();
     const arrowProps = {
       position,
       className: '',
@@ -99,11 +122,13 @@ class Popover extends _react.default.PureComponent {
     }
 
     const role = trigger === 'click' || trigger === 'custom' ? 'dialog' : 'tooltip';
-    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({}, attr, {
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+      guardFocus: true
+    }, attr, {
       trigger: trigger,
       position: position,
       style: style,
-      content: popContent,
+      content: this.renderPopCard,
       prefixCls: prefixCls,
       spacing: spacing,
       showArrow: arrow,
@@ -117,7 +142,7 @@ class Popover extends _react.default.PureComponent {
 Popover.contextType = _context.default;
 Popover.propTypes = {
   children: _propTypes.default.node,
-  content: _propTypes.default.node,
+  content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
   visible: _propTypes.default.bool,
   autoAdjustOverflow: _propTypes.default.bool,
   motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object, _propTypes.default.func]),
@@ -140,7 +165,8 @@ Popover.propTypes = {
   }),
   arrowPointAtCenter: _propTypes.default.bool,
   arrowBounding: _propTypes.default.object,
-  prefixCls: _propTypes.default.string
+  prefixCls: _propTypes.default.string,
+  guardFocus: _propTypes.default.bool
 };
 Popover.defaultProps = {
   arrowBounding: _constants.numbers.ARROW_BOUNDING,
@@ -153,7 +179,11 @@ Popover.defaultProps = {
   okText: 'Yes',
   position: 'bottom',
   prefixCls: _constants.cssClasses.PREFIX,
-  onClickOutSide: _noop2.default
+  onClickOutSide: _noop2.default,
+  onEscKeyDown: _noop2.default,
+  closeOnEsc: true,
+  returnFocusOnClose: true,
+  guardFocus: true
 };
 var _default = Popover;
 exports.default = _default;

package/lib/cjs/tooltip/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Event from '@douyinfe/semi-foundation/lib/cjs/utils/Event';
 import { ArrayElement } from '@douyinfe/semi-foundation/lib/cjs/utils/type';
-import { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation';
+import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/cjs/tooltip/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/cjs/tooltip/constants';
 import '@douyinfe/semi-foundation/lib/cjs/tooltip/tooltip.css';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
@@ -15,6 +15,10 @@ export interface ArrowBounding {
     width?: number;
     height?: number;
 }
+export interface RenderContentProps {
+    initialFocusRef?: React.RefObject<HTMLElement>;
+}
+export declare type RenderContent = (props: RenderContentProps) => React.ReactNode;
 export interface TooltipProps extends BaseProps {
     children?: React.ReactNode;
     motion?: Motion;
@@ -28,7 +32,7 @@ export interface TooltipProps extends BaseProps {
     clickToHide?: boolean;
     visible?: boolean;
     style?: React.CSSProperties;
-    content?: React.ReactNode;
+    content?: React.ReactNode | RenderContent;
     prefixCls?: string;
     onVisibleChange?: (visible: boolean) => void;
     onClickOutSide?: (e: React.MouseEvent) => void;
@@ -44,6 +48,10 @@ export interface TooltipProps extends BaseProps {
     stopPropagation?: boolean;
     clickTriggerToHide?: boolean;
     wrapperClassName?: string;
+    closeOnEsc?: boolean;
+    guardFocus?: boolean;
+    returnFocusOnClose?: boolean;
+    onEscKeyDown?: (e: React.KeyboardEvent) => void;
 }
 interface TooltipState {
     visible: boolean;
@@ -97,6 +105,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         stopPropagation: PropTypes.Requireable<boolean>;
         role: PropTypes.Requireable<string>;
         wrapWhenSpecial: PropTypes.Requireable<boolean>;
+        guardFocus: PropTypes.Requireable<boolean>;
+        returnFocusOnClose: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         arrowBounding: {
@@ -121,10 +131,15 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         showArrow: boolean;
         wrapWhenSpecial: boolean;
         zIndex: 1060;
+        closeOnEsc: boolean;
+        guardFocus: boolean;
+        returnFocusOnClose: boolean;
+        onEscKeyDown: (...args: any[]) => void;
     };
     eventManager: Event;
     triggerEl: React.RefObject<unknown>;
-    containerEl: React.RefObject<unknown>;
+    containerEl: React.RefObject<HTMLDivElement>;
+    initialFocusRef: React.RefObject<HTMLElement>;
     clickOutsideHandler: any;
     resizeHandler: any;
     isWrapped: boolean;
@@ -132,6 +147,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     scrollHandler: any;
     getPopupContainer: () => HTMLElement;
     containerPosition: string;
+    foundation: TooltipFoundation;
     constructor(props: TooltipProps);
     setContainerEl: (node: HTMLDivElement) => {
         current: HTMLDivElement;
@@ -142,10 +158,12 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
     isSpecial: (elem: React.ReactNode | HTMLElement | any) => boolean | "disabled" | "loading";
     didLeave: () => void;
     /** for transition - end */
-    rePosition(): any;
+    rePosition(): Record<string, string | number>;
     componentDidUpdate(prevProps: TooltipProps, prevState: TooltipState): void;
     renderIcon: () => any;
     handlePortalInnerClick: (e: React.MouseEvent) => void;
+    handlePortalInnerKeyDown: (e: React.KeyboardEvent) => void;
+    renderContentNode: (content: TooltipProps['content']) => React.ReactNode;
     renderPortal: () => JSX.Element;
     wrapSpan: (elem: React.ReactNode | React.ReactElement) => JSX.Element;
     mergeEvents: (rawEvents: Record<string, any>, events: Record<string, any>) => {};

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
@@ -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/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;
 }