rsuite 5.12.0 → 5.14.0

package/cjs/Navbar/NavbarDropdownMenu.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StandardProps } from '../@types/common';
+import { IconProps } from '@rsuite/icons/lib/Icon';
+export interface NavbarDropdownMenuProps<T = any> extends StandardProps {
+    /** Define the title as a submenu */
+    title?: React.ReactNode;
+    /**
+     * The submenu expands from the left and defaults to the right
+     * @deprecated Use openDirection="start" instead.
+     */
+    pullLeft?: boolean;
+    /**
+     * Direction that the sub-menu open towards
+     * - start: towards the head of the reading direction (right by default, left in RTL)
+     * - end: towards the end of the reading direction (left by default, right in RTL)
+     *
+     * @default 'end'
+     */
+    openDirection?: 'start' | 'end';
+    /**
+     *  Only used for setting the default expand state when it's a submenu.
+     */
+    eventKey?: T;
+    /** Set the icon */
+    icon?: React.ReactElement<IconProps>;
+    open?: boolean;
+    collapsible?: boolean;
+    expanded?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+    activeKey?: T;
+    onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
+}
+/**
+ * @private this component is not supposed to be used directly
+ *          Instead it's rendered by a <Nav.Menu> within a <Navbar>
+ *
+ * <Navbar>
+ *   <Nav>
+ *     <Nav.Menu>
+ *       <Nav.Menu title="menu"> -> This submenu will render <NavbarDropdownMenu> component
+ *       </Nav.Menu>
+ *     </Nav.Menu>
+ *   </Nav>
+ * </Navbar>
+ */
+declare const NavbarDropdownMenu: React.ForwardRefExoticComponent<NavbarDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect"> & React.RefAttributes<HTMLElement>>;
+export default NavbarDropdownMenu;

package/cjs/Navbar/NavbarDropdownMenu.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
+var _utils = require("../utils");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _AngleLeft = _interopRequireDefault(require("@rsuite/icons/legacy/AngleLeft"));
+
+var _AngleRight = _interopRequireDefault(require("@rsuite/icons/legacy/AngleRight"));
+
+var _useCustom2 = _interopRequireDefault(require("../utils/useCustom"));
+
+var _ = require(".");
+
+var _Disclosure = _interopRequireDefault(require("../Disclosure"));
+
+var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
+
+var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+
+var _templateObject, _templateObject2;
+
+/**
+ * @private this component is not supposed to be used directly
+ *          Instead it's rendered by a <Nav.Menu> within a <Navbar>
+ *
+ * <Navbar>
+ *   <Nav>
+ *     <Nav.Menu>
+ *       <Nav.Menu title="menu"> -> This submenu will render <NavbarDropdownMenu> component
+ *       </Nav.Menu>
+ *     </Nav.Menu>
+ *   </Nav>
+ * </Navbar>
+ */
+var NavbarDropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var navbar = (0, _react.useContext)(_.NavbarContext);
+  var nav = (0, _react.useContext)(_NavContext.default);
+
+  if (!navbar || !nav) {
+    throw new Error('<Navbar.Dropdown.Menu> must be rendered within a <Nav> within a <Navbar> component.');
+  }
+
+  var _onToggle = props.onToggle,
+      eventKey = props.eventKey,
+      title = props.title,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu' : _props$classPrefix,
+      children = props.children,
+      _props$openDirection = props.openDirection,
+      openDirection = _props$openDirection === void 0 ? 'end' : _props$openDirection,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection"]);
+
+  var _useCustom = (0, _useCustom2.default)('DropdownMenu'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      prefix = _useClassNames.prefix;
+
+  var _useClassNames2 = (0, _utils.useClassNames)('dropdown-menu'),
+      withMenuClassPrefix = _useClassNames2.withClassPrefix,
+      mergeMenuClassName = _useClassNames2.merge;
+
+  var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
+      mergeItemClassNames = _useClassNames3.merge,
+      withItemClassPrefix = _useClassNames3.withClassPrefix,
+      prefixItemClassName = _useClassNames3.prefix; // Parent menu exists. This is a submenu.
+  // Should render a `menuitem` that controls this submenu.
+
+
+  var _omit = (0, _omit2.default)(rest, ['trigger']),
+      icon = _omit.icon,
+      className = _omit.className,
+      disabled = _omit.disabled,
+      menuProps = (0, _objectWithoutPropertiesLoose2.default)(_omit, ["icon", "className", "disabled"]);
+
+  var Icon = rtl ? _AngleLeft.default : _AngleRight.default;
+  return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
+    hideOnClickOutside: true,
+    trigger: ['click', 'mouseover'],
+    onToggle: function onToggle(open, event) {
+      return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(open, undefined, event);
+    }
+  }, function (_ref, containerRef) {
+    var open = _ref.open,
+        props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["open"]);
+    var classes = mergeItemClassNames(className, withItemClassPrefix({
+      disabled: disabled,
+      open: open,
+      submenu: true
+    }));
+    return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
+      ref: (0, _utils.mergeRefs)(ref, containerRef),
+      className: classes
+    }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, function (_ref2, buttonRef) {
+      var open = _ref2.open,
+          buttonProps = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["open"]);
+      var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["toggle"]))), withItemClassPrefix({
+        'with-icon': icon,
+        open: open,
+        disabled: disabled
+      }));
+      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+        ref: (0, _utils.mergeRefs)(buttonRef, buttonRef),
+        className: classes,
+        "data-event-key": eventKey,
+        "data-event-key-type": typeof eventKey
+      }, buttonProps), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), title, /*#__PURE__*/_react.default.createElement(Icon, {
+        className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["toggle-icon"])))
+      }));
+    }), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Content, null, function (_ref3, elementRef) {
+      var open = _ref3.open;
+      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+      return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+        ref: elementRef,
+        className: menuClassName,
+        hidden: !open,
+        "data-direction": openDirection
+      }, menuProps), children);
+    }));
+  });
+});
+
+NavbarDropdownMenu.displayName = 'Nav.Dropdown.Menu';
+NavbarDropdownMenu.propTypes = {
+  active: _propTypes.default.bool,
+  activeKey: _propTypes.default.any,
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  icon: _propTypes.default.any,
+  classPrefix: _propTypes.default.string,
+  pullLeft: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use openDirection="start" instead.'),
+  openDirection: _propTypes.default.oneOf(['start', 'end']),
+  title: _propTypes.default.node,
+  open: _propTypes.default.bool,
+  eventKey: _propTypes.default.any,
+  expanded: _propTypes.default.bool,
+  collapsible: _propTypes.default.bool,
+  onToggle: _propTypes.default.func
+};
+var _default = NavbarDropdownMenu;
+exports.default = _default;

package/cjs/Navbar/NavbarDropdownToggle.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import Button from '../Button';
+import { WithAsProps, RsRefForwardingComponent, TypeAttributes } from '../@types/common';
+export interface NavbarDropdownToggleProps extends WithAsProps {
+    noCaret?: boolean;
+    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
+    placement?: TypeAttributes.Placement8;
+}
+/**
+ * @private this component is not supposed to be used directly
+ *          Instead it's rendered by a <Nav.Menu> call
+ *
+ * <Nav>
+ *   <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
+ *   </Nav.Menu>
+ * </Nav>
+ */
+declare const NavbarDropdownToggle: RsRefForwardingComponent<typeof Button, NavbarDropdownToggleProps>;
+export default NavbarDropdownToggle;

package/cjs/Navbar/NavbarDropdownToggle.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
+
+var _utils = require("../utils");
+
+var _NavbarItem = _interopRequireDefault(require("./NavbarItem"));
+
+/**
+ * @private this component is not supposed to be used directly
+ *          Instead it's rendered by a <Nav.Menu> call
+ *
+ * <Nav>
+ *   <Nav.Menu> -> This will render <NavDropdown> component that renders a <NavDropdownToggle>
+ *   </Nav.Menu>
+ * </Nav>
+ */
+var NavbarDropdownToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? _NavbarItem.default : _props$as,
+      className = props.className,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'navbar-item' : _props$classPrefix,
+      renderToggle = props.renderToggle,
+      children = props.children,
+      noCaret = props.noCaret,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"]);
+
+  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      prefix = _useClassNames.prefix,
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix({
+    'no-caret': noCaret
+  }));
+
+  var toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: classes
+  }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {
+    className: prefix('caret')
+  }));
+
+  return renderToggle ? renderToggle(rest, ref) : toggle;
+});
+
+NavbarDropdownToggle.displayName = 'Navbar.Dropdown.Toggle';
+NavbarDropdownToggle.propTypes = {
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  classPrefix: _propTypes.default.string,
+  noCaret: _propTypes.default.bool,
+  as: _propTypes.default.elementType,
+  renderToggle: _propTypes.default.func,
+  placement: _propTypes.default.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+};
+var _default = NavbarDropdownToggle;
+exports.default = _default;

package/cjs/Navbar/NavbarItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+export interface NavbarItemProps<T = string> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     /** Activation status */
     active?: boolean;
     /** Disabled status */
@@ -15,5 +15,8 @@ export interface NavItemProps<T = string> extends WithAsProps, Omit<React.HTMLAt
     /** Select the callback function that the event triggers. */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }
-declare const NavbarItem: RsRefForwardingComponent<'a', NavItemProps>;
+/**
+ * @private
+ */
+declare const NavbarItem: RsRefForwardingComponent<'a', NavbarItemProps>;
 export default NavbarItem;

package/cjs/Navbar/NavbarItem.js

@@ -25,6 +25,9 @@ var _utils = require("../utils");
 
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 
+/**
+ * @private
+ */
 var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _SafeAnchor.default : _props$as,
@@ -41,9 +44,9 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelectProp = props.onSelect,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "onClick", "onSelect"]);
 
-  var _useContext = (0, _react.useContext)(_NavContext.default),
-      activeKey = _useContext.activeKey,
-      onSelectFromNav = _useContext.onSelect;
+  var _ref = (0, _react.useContext)(_NavContext.default),
+      activeKey = _ref.activeKey,
+      onSelectFromNav = _ref.onSelect;
 
   var active = activeProp !== null && activeProp !== void 0 ? activeProp : !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(eventKey, activeKey);
   var emitSelect = (0, _react.useCallback)(function (event) {
@@ -52,6 +55,7 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [eventKey, onSelectProp, onSelectFromNav]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+      prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
@@ -72,7 +76,9 @@ var NavbarItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: classes,
     onClick: handleClick,
     style: style
-  }), icon, children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
+  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+    className: prefix('icon')
+  }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });
 
 NavbarItem.displayName = 'Navbar.Item';

package/cjs/Overlay/Modal.d.ts

@@ -37,9 +37,6 @@ export interface BaseModalProps extends WithAsProps, AnimationEventProps {
     onOpen?: () => void;
     /** Called when Modal is closed */
     onClose?: (event: React.SyntheticEvent) => void;
-}
-interface ModalProps extends BaseModalProps {
-    children: (props: any, ref: any) => React.ReactElement;
     container?: HTMLElement | (() => HTMLElement);
     containerClassName?: string;
     backdropTransitionTimeout?: number;
@@ -48,7 +45,7 @@ interface ModalProps extends BaseModalProps {
     onEsc?: React.KeyboardEventHandler;
     onBackdropClick?: React.MouseEventHandler;
 }
-declare const Modal: RsRefForwardingComponent<'div', ModalProps>;
+declare const Modal: RsRefForwardingComponent<'div', BaseModalProps>;
 export declare const modalPropTypes: {
     as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
     className: PropTypes.Requireable<string>;

package/cjs/Overlay/Overlay.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TypeAttributes, AnimationEventProps } from '../@types/common';
+import { TypeAttributes, AnimationEventProps, CursorPosition } from '../@types/common';
 export interface OverlayProps extends AnimationEventProps {
     container?: HTMLElement | (() => HTMLElement | null) | null;
     children: React.ReactElement | ((props: any, ref: any) => React.ReactElement);
@@ -14,6 +14,8 @@ export interface OverlayProps extends AnimationEventProps {
     transition?: React.ElementType;
     triggerTarget?: React.RefObject<any>;
     onClose?: React.ReactEventHandler;
+    followCursor?: boolean;
+    cursorPosition?: CursorPosition | null;
 }
 export declare const overlayPropTypes: {
     container: PropTypes.Requireable<any>;

package/cjs/Overlay/Overlay.js

@@ -67,7 +67,9 @@ var Overlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onExiting = props.onExiting,
       onEnter = props.onEnter,
       onEntering = props.onEntering,
-      onEntered = props.onEntered;
+      onEntered = props.onEntered,
+      followCursor = props.followCursor,
+      cursorPosition = props.cursorPosition;
 
   var _useState = (0, _react.useState)(!open),
       exited = _useState[0],
@@ -101,7 +103,9 @@ var Overlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     containerPadding: containerPadding,
     triggerTarget: triggerTarget,
     placement: placement,
-    preventOverflow: preventOverflow
+    preventOverflow: preventOverflow,
+    followCursor: followCursor,
+    cursorPosition: cursorPosition
   };
 
   var renderChildWithPosition = function renderChildWithPosition(transitionProps, transitionRef) {

package/cjs/Overlay/OverlayTrigger.d.ts

@@ -50,16 +50,20 @@ export interface OverlayTriggerProps extends StandardProps, AnimationEventProps
     onMouseOut?: React.MouseEventHandler;
     /** Mouse over callback function */
     onMouseOver?: React.MouseEventHandler;
+    /** Mouse move callback function */
+    onMouseMove?: React.MouseEventHandler;
     /** Callback fired when open component */
     onOpen?: () => void;
     /** Callback fired when close component */
     onClose?: () => void;
+    /** Whether speaker to follow the cursor */
+    followCursor?: boolean;
 }
 export interface OverlayTriggerInstance {
-    root: HTMLElement;
+    root: HTMLElement | undefined;
     updatePosition: () => void;
-    open: () => void;
-    close: () => void;
+    open: (delay?: number) => void;
+    close: (delay?: number) => void;
 }
-declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
+declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
 export default OverlayTrigger;

package/cjs/Overlay/OverlayTrigger.js

@@ -93,12 +93,15 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       rootClose = _props$rootClose === void 0 ? true : _props$rootClose,
       onClick = props.onClick,
       onMouseOver = props.onMouseOver,
+      onMouseMove = props.onMouseMove,
       onMouseOut = props.onMouseOut,
       onContextMenu = props.onContextMenu,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
       onClose = props.onClose,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onClose"]);
+      followCursor = props.followCursor,
+      onExited = props.onExited,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "container", "controlId", "defaultOpen", "trigger", "disabled", "readOnly", "plaintext", "open", "delay", "delayOpen", "delayClose", "enterable", "placement", "speaker", "rootClose", "onClick", "onMouseOver", "onMouseMove", "onMouseOut", "onContextMenu", "onFocus", "onBlur", "onClose", "followCursor", "onExited"]);
 
   var _usePortal = (0, _utils.usePortal)({
     container: container
@@ -110,7 +113,11 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
   var _useControlled = (0, _utils.useControlled)(openProp, defaultOpen),
       open = _useControlled[0],
-      setOpen = _useControlled[1]; // Delay the timer to close/open the overlay
+      setOpen = _useControlled[1];
+
+  var _useState = (0, _react.useState)(null),
+      cursorPosition = _useState[0],
+      setCursorPosition = _useState[1]; // Delay the timer to close/open the overlay
   // When the cursor moves from the trigger to the overlay, the overlay will be closed.
   // In order to keep the overlay open, a timer is used to delay the closing.
 
@@ -158,6 +165,9 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
     setOpen(false);
   }, [delayClose, setOpen]);
+  var handleExited = (0, _react.useCallback)(function () {
+    setCursorPosition(null);
+  }, []);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       get root() {
@@ -255,6 +265,16 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       handleCloseWhenLeave();
     }
   }, [handleCloseWhenLeave, trigger]);
+  var handledMoveOverlay = (0, _react.useCallback)(function (event) {
+    setCursorPosition(function () {
+      return {
+        top: event.pageY,
+        left: event.pageX,
+        clientTop: event.clientX,
+        clientLeft: event.clientY
+      };
+    });
+  }, [open]);
   var preventDefault = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -264,7 +284,8 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onMouseMove: onMouseMove
   };
 
   if (!disabled && !readOnly && !plaintext) {
@@ -302,6 +323,10 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       triggerEvents.onFocus = (0, _utils.createChainedFunction)(handleDelayedOpen, onFocus);
       triggerEvents.onBlur = (0, _utils.createChainedFunction)(handleDelayedClose, onBlur);
     }
+
+    if (trigger !== 'none') {
+      triggerEvents.onMouseMove = (0, _utils.createChainedFunction)(handledMoveOverlay, onMouseMove);
+    }
   }
 
   var renderOverlay = function renderOverlay() {
@@ -309,6 +334,7 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       rootClose: rootClose,
       triggerTarget: triggerRef,
       onClose: trigger !== 'none' ? (0, _utils.createChainedFunction)(handleClose, onClose) : undefined,
+      onExited: (0, _utils.createChainedFunction)(followCursor ? handleExited : undefined, onExited),
       placement: placement,
       container: container,
       open: open
@@ -326,7 +352,9 @@ var OverlayTrigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref
 
     return /*#__PURE__*/_react.default.createElement(_Overlay.default, (0, _extends2.default)({}, overlayProps, {
       ref: overlayRef,
-      childrenProps: speakerProps
+      childrenProps: speakerProps,
+      followCursor: followCursor,
+      cursorPosition: cursorPosition
     }), typeof speaker === 'function' ? function (props, ref) {
       return speaker((0, _extends2.default)({}, props, {
         onClose: handleClose

package/cjs/Overlay/Position.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypeAttributes } from '../@types/common';
+import { CursorPosition, TypeAttributes } from '../@types/common';
 export interface PositionChildProps {
     className: string;
     left?: number;
@@ -13,6 +13,8 @@ export interface PositionProps {
     placement?: TypeAttributes.Placement;
     preventOverflow?: boolean;
     triggerTarget?: React.RefObject<any>;
+    followCursor?: boolean;
+    cursorPosition?: CursorPosition | null;
 }
 export interface PositionInstance {
     updatePosition?: () => void;

package/cjs/Overlay/Position.js

@@ -41,7 +41,9 @@ var usePosition = function usePosition(props, ref) {
       _props$containerPaddi = props.containerPadding,
       containerPadding = _props$containerPaddi === void 0 ? 0 : _props$containerPaddi,
       container = props.container,
-      triggerTarget = props.triggerTarget;
+      triggerTarget = props.triggerTarget,
+      followCursor = props.followCursor,
+      cursorPosition = props.cursorPosition;
   var containerRef = (0, _react.useRef)(null);
   var lastTargetRef = (0, _react.useRef)(null);
   var overlayResizeObserver = (0, _react.useRef)();
@@ -91,7 +93,7 @@ var usePosition = function usePosition(props, ref) {
 
     var overlay = (0, _utils.getDOMNode)(ref.current);
     var containerElement = (0, _getContainer.default)(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, (0, _ownerDocument.default)(ref.current).body);
-    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement);
+    var posi = utils.calcOverlayPosition(overlay, targetElement, containerElement, followCursor ? cursorPosition : undefined);
 
     if (forceUpdateDOM && overlay) {
       var _overlay$className, _overlay$className$ma;
@@ -113,7 +115,7 @@ var usePosition = function usePosition(props, ref) {
 
     containerRef.current = containerElement;
     lastTargetRef.current = targetElement;
-  }, [container, ref, triggerTarget, utils]);
+  }, [container, ref, triggerTarget, utils, followCursor, cursorPosition]);
   (0, _react.useEffect)(function () {
     updatePosition(false);
     var overlay = (0, _utils.getDOMNode)(ref.current);
@@ -158,7 +160,9 @@ var usePosition = function usePosition(props, ref) {
 
 var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
-      className = props.className;
+      className = props.className,
+      followCursor = props.followCursor,
+      cursorPosition = props.cursorPosition;
 
   var childRef = _react.default.useRef(null);
 
@@ -180,6 +184,10 @@ var Position = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       updatePosition: updatePosition
     };
   });
+  (0, _react.useEffect)(function () {
+    if (!followCursor || !cursorPosition) return;
+    updatePosition();
+  }, [followCursor, cursorPosition, updatePosition]);
 
   if (typeof children === 'function') {
     var childProps = {

package/cjs/Overlay/positionUtils.d.ts

@@ -1,4 +1,10 @@
-import { TypeAttributes } from '../@types/common';
+import { CursorPosition, TypeAttributes } from '../@types/common';
+declare type Offset = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
 export interface PositionType {
     positionLeft?: number;
     positionTop?: number;
@@ -24,13 +30,14 @@ export interface Dimensions {
     scrollY: number;
 }
 declare const _default: (props: UtilProps) => {
-    getPosition(target: any, container: any): {
+    getPosition(target: HTMLElement, container: HTMLElement): {
         top: number;
         left: number;
         height: number;
         width: number;
-    } | null;
+    } | DOMRect | null;
+    getCursorOffsetPosition(target: HTMLElement, container: HTMLElement, cursorPosition: CursorPosition): Offset;
     calcAutoPlacement(targetOffset: any, container: any, overlay: any): any;
-    calcOverlayPosition(overlayNode: any, target: any, container: any): PositionType;
+    calcOverlayPosition(overlayNode: HTMLElement, target: HTMLElement, container: HTMLElement, cursorPosition?: CursorPosition | null): PositionType;
 };
 export default _default;