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

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/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/tooltip/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Event from '@douyinfe/semi-foundation/lib/es/utils/Event';
 import { ArrayElement } from '@douyinfe/semi-foundation/lib/es/utils/type';
-import { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
+import TooltipFoundation, { TooltipAdapter, Position } from '@douyinfe/semi-foundation/lib/es/tooltip/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/tooltip/constants';
 import '@douyinfe/semi-foundation/lib/es/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/es/tooltip/index.js

@@ -1,3 +1,4 @@
+import _isFunction from "lodash/isFunction";
 import _isEmpty from "lodash/isEmpty";
 import _each from "lodash/each";
 import _omit from "lodash/omit";
@@ -37,7 +38,7 @@ import { getUuidShort } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import '@douyinfe/semi-foundation/lib/es/tooltip/tooltip.css';
 import BaseComponent from '../_base/baseComponent';
 import { isHTMLElement } from '../_base/reactUtils';
-import { stopPropagation } from '../_utils';
+import { getActiveElement, getFocusableElements, stopPropagation } from '../_utils';
 import Portal from '../_portal/index';
 import ConfigContext from '../configProvider/context';
 import TriangleArrow from './TriangleArrow';
@@ -137,6 +138,17 @@ export default class Tooltip extends BaseComponent {
       }
     };
 
+    this.handlePortalInnerKeyDown = e => {
+      this.foundation.handleContainerKeydown(e);
+    };
+
+    this.renderContentNode = content => {
+      const contentProps = {
+        initialFocusRef: this.initialFocusRef
+      };
+      return !_isFunction(content) ? content : content(contentProps);
+    };
+
     this.renderPortal = () => {
       const {
         containerStyle = {},
@@ -156,6 +168,7 @@ export default class Tooltip extends BaseComponent {
         role,
         zIndex
       } = this.props;
+      const contentNode = this.renderContentNode(content);
       const {
         className: propClassName
       } = this.props;
@@ -193,7 +206,7 @@ export default class Tooltip extends BaseComponent {
           role: role,
           "x-placement": placement,
           id: id
-        }), content, icon);
+        }), contentNode, icon);
       } : null) : /*#__PURE__*/React.createElement("div", _Object$assign({
         className: className
       }, portalEventSet, {
@@ -201,7 +214,7 @@ export default class Tooltip extends BaseComponent {
         style: _Object$assign({
           visibility: motion ? undefined : 'visible'
         }, style)
-      }), content, icon);
+      }), contentNode, icon);
       return /*#__PURE__*/React.createElement(Portal, {
         getPopupContainer: this.props.getPopupContainer,
         style: {
@@ -211,7 +224,8 @@ export default class Tooltip extends BaseComponent {
         className: "".concat(BASE_CLASS_PREFIX, "-portal-inner"),
         style: portalInnerStyle,
         ref: this.setContainerEl,
-        onClick: this.handlePortalInnerClick
+        onClick: this.handlePortalInnerClick,
+        onKeyDown: this.handlePortalInnerKeyDown
       }, inner));
     };
 
@@ -279,6 +293,7 @@ export default class Tooltip extends BaseComponent {
     this.eventManager = new Event();
     this.triggerEl = /*#__PURE__*/React.createRef();
     this.containerEl = /*#__PURE__*/React.createRef();
+    this.initialFocusRef = /*#__PURE__*/React.createRef();
     this.clickOutsideHandler = null;
     this.resizeHandler = null;
     this.isWrapped = false; // Identifies whether a span element is wrapped
@@ -330,7 +345,8 @@ export default class Tooltip extends BaseComponent {
         mouseOver: 'onMouseOver',
         click: 'onClick',
         focus: 'onFocus',
-        blur: 'onBlur'
+        blur: 'onBlur',
+        keydown: 'onKeyDown'
       }),
       registerTriggerEvent: triggerEventSet => {
         this.setState({
@@ -348,14 +364,8 @@ export default class Tooltip extends BaseComponent {
         // 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 (!isHTMLElement(this.triggerEl.current)) {
-          const realDomNode = ReactDOM.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
@@ -422,7 +432,7 @@ export default class Tooltip extends BaseComponent {
           willUpdateStates.visible = visible;
         }
 
-        this.setState(willUpdateStates, () => {
+        this.mounted && this.setState(willUpdateStates, () => {
           cb();
         });
       },
@@ -492,12 +502,7 @@ export default class Tooltip extends BaseComponent {
             return false;
           }
 
-          let triggerDOM = this.triggerEl.current;
-
-          if (!isHTMLElement(this.triggerEl.current)) {
-            triggerDOM = ReactDOM.findDOMNode(this.triggerEl.current);
-          }
-
+          const triggerDOM = this.adapter.getTriggerNode();
           const isRelativeScroll = e.target.contains(triggerDOM);
 
           if (isRelativeScroll) {
@@ -528,7 +533,33 @@ export default class Tooltip extends BaseComponent {
           this.containerPosition = position;
         }
       },
-      getContainerPosition: () => this.containerPosition
+      getContainerPosition: () => this.containerPosition,
+      getContainer: () => this.containerEl && this.containerEl.current,
+      getTriggerNode: () => {
+        let triggerDOM = this.triggerEl.current;
+
+        if (!isHTMLElement(this.triggerEl.current)) {
+          triggerDOM = ReactDOM.findDOMNode(this.triggerEl.current);
+        }
+
+        return triggerDOM;
+      },
+      getFocusableElements: node => {
+        return getFocusableElements(node);
+      },
+      getActiveElement: () => {
+        return getActiveElement();
+      },
+      setInitialFocus: () => {
+        const focusRefNode = _get(this, 'initialFocusRef.current');
+
+        if (focusRefNode && 'focus' in focusRefNode) {
+          focusRefNode.focus();
+        }
+      },
+      notifyEscKeydown: event => {
+        this.props.onEscKeyDown(event);
+      }
     });
   }
 
@@ -570,7 +601,8 @@ export default class Tooltip extends BaseComponent {
     } = this.state;
     const {
       wrapWhenSpecial,
-      role
+      role,
+      trigger
     } = this.props;
     let {
       children
@@ -630,7 +662,8 @@ export default class Tooltip extends BaseComponent {
         } 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
 
@@ -655,7 +688,7 @@ Tooltip.propTypes = {
   clickTriggerToHide: PropTypes.bool,
   visible: PropTypes.bool,
   style: PropTypes.object,
-  content: PropTypes.node,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   prefixCls: PropTypes.string,
   onVisibleChange: PropTypes.func,
   onClickOutSide: PropTypes.func,
@@ -669,8 +702,9 @@ Tooltip.propTypes = {
   stopPropagation: PropTypes.bool,
   // private
   role: PropTypes.string,
-  wrapWhenSpecial: PropTypes.bool // when trigger has special status such as "disabled" or "loading", wrap span
-
+  wrapWhenSpecial: PropTypes.bool,
+  guardFocus: PropTypes.bool,
+  returnFocusOnClose: PropTypes.bool
 };
 Tooltip.defaultProps = {
   arrowBounding: numbers.ARROW_BOUNDING,
@@ -689,5 +723,9 @@ Tooltip.defaultProps = {
   spacing: numbers.SPACING,
   showArrow: true,
   wrapWhenSpecial: true,
-  zIndex: numbers.DEFAULT_Z_INDEX
+  zIndex: numbers.DEFAULT_Z_INDEX,
+  closeOnEsc: false,
+  guardFocus: false,
+  returnFocusOnClose: false,
+  onEscKeyDown: _noop
 };