rsuite 5.12.0 → 5.14.0

package/esm/Navbar/NavbarDropdownMenu.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+var _templateObject, _templateObject2;
+
+import React, { useContext } from 'react';
+import omit from 'lodash/omit';
+import { mergeRefs, useClassNames } from '../utils';
+import PropTypes from 'prop-types';
+import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
+import AngleRight from '@rsuite/icons/legacy/AngleRight';
+import useCustom from '../utils/useCustom';
+import { NavbarContext } from '.';
+import Disclosure from '../Disclosure';
+import NavContext from '../Nav/NavContext';
+import deprecatePropType from '../utils/deprecatePropType';
+
+/**
+ * @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.forwardRef(function (props, ref) {
+  var navbar = useContext(NavbarContext);
+  var nav = useContext(NavContext);
+
+  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 = _objectWithoutPropertiesLoose(props, ["onToggle", "eventKey", "title", "classPrefix", "children", "openDirection"]);
+
+  var _useCustom = useCustom('DropdownMenu'),
+      rtl = _useCustom.rtl;
+
+  var _useClassNames = useClassNames(classPrefix),
+      prefix = _useClassNames.prefix;
+
+  var _useClassNames2 = useClassNames('dropdown-menu'),
+      withMenuClassPrefix = _useClassNames2.withClassPrefix,
+      mergeMenuClassName = _useClassNames2.merge;
+
+  var _useClassNames3 = 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 = omit(rest, ['trigger']),
+      icon = _omit.icon,
+      className = _omit.className,
+      disabled = _omit.disabled,
+      menuProps = _objectWithoutPropertiesLoose(_omit, ["icon", "className", "disabled"]);
+
+  var Icon = rtl ? AngleLeft : AngleRight;
+  return /*#__PURE__*/React.createElement(Disclosure, {
+    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 = _objectWithoutPropertiesLoose(_ref, ["open"]);
+
+    var classes = mergeItemClassNames(className, withItemClassPrefix({
+      disabled: disabled,
+      open: open,
+      submenu: true
+    }));
+    return /*#__PURE__*/React.createElement("li", _extends({
+      ref: mergeRefs(ref, containerRef),
+      className: classes
+    }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, function (_ref2, buttonRef) {
+      var open = _ref2.open,
+          buttonProps = _objectWithoutPropertiesLoose(_ref2, ["open"]);
+
+      var classes = mergeItemClassNames(className, prefixItemClassName(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["toggle"]))), withItemClassPrefix({
+        'with-icon': icon,
+        open: open,
+        disabled: disabled
+      }));
+      return /*#__PURE__*/React.createElement("div", _extends({
+        ref: mergeRefs(buttonRef, buttonRef),
+        className: classes,
+        "data-event-key": eventKey,
+        "data-event-key-type": typeof eventKey
+      }, buttonProps), icon && /*#__PURE__*/React.cloneElement(icon, {
+        className: prefix('menu-icon')
+      }), title, /*#__PURE__*/React.createElement(Icon, {
+        className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["toggle-icon"])))
+      }));
+    }), /*#__PURE__*/React.createElement(Disclosure.Content, null, function (_ref3, elementRef) {
+      var open = _ref3.open;
+      var menuClassName = mergeMenuClassName(className, withMenuClassPrefix());
+      return /*#__PURE__*/React.createElement("ul", _extends({
+        ref: elementRef,
+        className: menuClassName,
+        hidden: !open,
+        "data-direction": openDirection
+      }, menuProps), children);
+    }));
+  });
+});
+NavbarDropdownMenu.displayName = 'Nav.Dropdown.Menu';
+NavbarDropdownMenu.propTypes = {
+  active: PropTypes.bool,
+  activeKey: PropTypes.any,
+  className: PropTypes.string,
+  children: PropTypes.node,
+  icon: PropTypes.any,
+  classPrefix: PropTypes.string,
+  pullLeft: deprecatePropType(PropTypes.bool, 'Use openDirection="start" instead.'),
+  openDirection: PropTypes.oneOf(['start', 'end']),
+  title: PropTypes.node,
+  open: PropTypes.bool,
+  eventKey: PropTypes.any,
+  expanded: PropTypes.bool,
+  collapsible: PropTypes.bool,
+  onToggle: PropTypes.func
+};
+export default NavbarDropdownMenu;

package/esm/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/esm/Navbar/NavbarDropdownToggle.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import { useClassNames } from '../utils';
+import NavbarItem from './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.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? NavbarItem : _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 = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "renderToggle", "children", "noCaret"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      prefix = _useClassNames.prefix,
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  var classes = merge(className, withClassPrefix({
+    'no-caret': noCaret
+  }));
+  var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes
+  }), children, !noCaret && /*#__PURE__*/React.createElement(ArrowDownLineIcon, {
+    className: prefix('caret')
+  }));
+  return renderToggle ? renderToggle(rest, ref) : toggle;
+});
+NavbarDropdownToggle.displayName = 'Navbar.Dropdown.Toggle';
+NavbarDropdownToggle.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
+  noCaret: PropTypes.bool,
+  as: PropTypes.elementType,
+  renderToggle: PropTypes.func,
+  placement: PropTypes.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+};
+export default NavbarDropdownToggle;

package/esm/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/esm/Navbar/NavbarItem.js

@@ -7,6 +7,10 @@ import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
 import { shallowEqual, useClassNames } from '../utils';
 import NavContext from '../Nav/NavContext';
+
+/**
+ * @private
+ */
 var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? SafeAnchor : _props$as,
@@ -23,9 +27,9 @@ var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelectProp = props.onSelect,
       rest = _objectWithoutPropertiesLoose(props, ["as", "active", "disabled", "eventKey", "className", "classPrefix", "style", "children", "icon", "onClick", "onSelect"]);
 
-  var _useContext = useContext(NavContext),
-      activeKey = _useContext.activeKey,
-      onSelectFromNav = _useContext.onSelect;
+  var _ref = useContext(NavContext),
+      activeKey = _ref.activeKey,
+      onSelectFromNav = _ref.onSelect;
 
   var active = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && shallowEqual(eventKey, activeKey);
   var emitSelect = useCallback(function (event) {
@@ -34,6 +38,7 @@ var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [eventKey, onSelectProp, onSelectFromNav]);
 
   var _useClassNames = useClassNames(classPrefix),
+      prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
@@ -54,7 +59,9 @@ var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes,
     onClick: handleClick,
     style: style
-  }), icon, children, /*#__PURE__*/React.createElement(Ripple, null));
+  }), icon && /*#__PURE__*/React.cloneElement(icon, {
+    className: prefix('icon')
+  }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 NavbarItem.displayName = 'Navbar.Item';
 NavbarItem.propTypes = {

package/esm/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/esm/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/esm/Overlay/Overlay.js

@@ -48,7 +48,9 @@ var Overlay = /*#__PURE__*/React.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 = useState(!open),
       exited = _useState[0],
@@ -82,7 +84,9 @@ var Overlay = /*#__PURE__*/React.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/esm/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/esm/Overlay/OverlayTrigger.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _isUndefined from "lodash/isUndefined";
-import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext } from 'react';
+import React, { useRef, useEffect, useImperativeHandle, useCallback, useContext, useState } from 'react';
 import get from 'lodash/get';
 import isNil from 'lodash/isNil';
 import contains from 'dom-lib/contains';
@@ -73,12 +73,15 @@ var OverlayTrigger = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = usePortal({
     container: container
@@ -90,7 +93,11 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _useControlled = useControlled(openProp, defaultOpen),
       open = _useControlled[0],
-      setOpen = _useControlled[1]; // Delay the timer to close/open the overlay
+      setOpen = _useControlled[1];
+
+  var _useState = 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.
 
@@ -138,6 +145,9 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     setOpen(false);
   }, [delayClose, setOpen]);
+  var handleExited = useCallback(function () {
+    setCursorPosition(null);
+  }, []);
   useImperativeHandle(ref, function () {
     return {
       get root() {
@@ -235,6 +245,16 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleCloseWhenLeave();
     }
   }, [handleCloseWhenLeave, trigger]);
+  var handledMoveOverlay = useCallback(function (event) {
+    setCursorPosition(function () {
+      return {
+        top: event.pageY,
+        left: event.pageX,
+        clientTop: event.clientX,
+        clientLeft: event.clientY
+      };
+    });
+  }, [open]);
   var preventDefault = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -244,7 +264,8 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onFocus: onFocus,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onMouseMove: onMouseMove
   };
 
   if (!disabled && !readOnly && !plaintext) {
@@ -282,6 +303,10 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       triggerEvents.onFocus = createChainedFunction(handleDelayedOpen, onFocus);
       triggerEvents.onBlur = createChainedFunction(handleDelayedClose, onBlur);
     }
+
+    if (trigger !== 'none') {
+      triggerEvents.onMouseMove = createChainedFunction(handledMoveOverlay, onMouseMove);
+    }
   }
 
   var renderOverlay = function renderOverlay() {
@@ -289,6 +314,7 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       rootClose: rootClose,
       triggerTarget: triggerRef,
       onClose: trigger !== 'none' ? createChainedFunction(handleClose, onClose) : undefined,
+      onExited: createChainedFunction(followCursor ? handleExited : undefined, onExited),
       placement: placement,
       container: container,
       open: open
@@ -307,7 +333,9 @@ var OverlayTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return /*#__PURE__*/React.createElement(Overlay, _extends({}, overlayProps, {
       ref: overlayRef,
-      childrenProps: speakerProps
+      childrenProps: speakerProps,
+      followCursor: followCursor,
+      cursorPosition: cursorPosition
     }), typeof speaker === 'function' ? function (props, ref) {
       return speaker(_extends({}, props, {
         onClose: handleClose

package/esm/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/esm/Overlay/Position.js

@@ -21,7 +21,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 = useRef(null);
   var lastTargetRef = useRef(null);
   var overlayResizeObserver = useRef();
@@ -71,7 +73,7 @@ var usePosition = function usePosition(props, ref) {
 
     var overlay = getDOMNode(ref.current);
     var containerElement = getContainer(typeof container === 'function' ? container() : container !== null && container !== void 0 ? container : null, ownerDocument(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;
@@ -93,7 +95,7 @@ var usePosition = function usePosition(props, ref) {
 
     containerRef.current = containerElement;
     lastTargetRef.current = targetElement;
-  }, [container, ref, triggerTarget, utils]);
+  }, [container, ref, triggerTarget, utils, followCursor, cursorPosition]);
   useEffect(function () {
     updatePosition(false);
     var overlay = getDOMNode(ref.current);
@@ -138,7 +140,9 @@ var usePosition = function usePosition(props, ref) {
 
 var Position = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
-      className = props.className;
+      className = props.className,
+      followCursor = props.followCursor,
+      cursorPosition = props.cursorPosition;
   var childRef = React.useRef(null);
 
   var _usePosition = usePosition(props, childRef),
@@ -159,6 +163,10 @@ var Position = /*#__PURE__*/React.forwardRef(function (props, ref) {
       updatePosition: updatePosition
     };
   });
+  useEffect(function () {
+    if (!followCursor || !cursorPosition) return;
+    updatePosition();
+  }, [followCursor, cursorPosition, updatePosition]);
 
   if (typeof children === 'function') {
     var childProps = {

package/esm/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;

package/esm/Overlay/positionUtils.js

@@ -6,6 +6,8 @@ import getOffset from 'dom-lib/getOffset';
 import scrollTop from 'dom-lib/scrollTop';
 import scrollLeft from 'dom-lib/scrollLeft';
 import _getPosition from 'dom-lib/getPosition';
+import getStyle from 'dom-lib/getStyle';
+import nodeName from 'dom-lib/nodeName';
 export var AutoPlacement = {
   left: 'Start',
   right: 'End',
@@ -130,6 +132,48 @@ export default (function (props) {
       var offset = container.tagName === 'BODY' ? getOffset(target) : _getPosition(target, container, false);
       return offset;
     },
+    getCursorOffsetPosition: function getCursorOffsetPosition(target, container, cursorPosition) {
+      var left = cursorPosition.left,
+          top = cursorPosition.top,
+          clientLeft = cursorPosition.clientLeft,
+          clientTop = cursorPosition.clientTop;
+      var offset = {
+        left: left,
+        top: top,
+        width: 10,
+        height: 10
+      };
+
+      if (getStyle(target, 'position') === 'fixed') {
+        offset.left = clientLeft;
+        offset.top = clientTop;
+        return offset;
+      }
+
+      if (container.tagName === 'BODY') {
+        return offset;
+      }
+
+      var containerOffset = {
+        top: 0,
+        left: 0
+      };
+
+      if (nodeName(container) !== 'html') {
+        var nextParentOffset = getOffset(container);
+
+        if (nextParentOffset) {
+          containerOffset.top = nextParentOffset.top;
+          containerOffset.left = nextParentOffset.left;
+        }
+      }
+
+      containerOffset.top += parseInt(getStyle(container, 'borderTopWidth'), 10) - scrollTop(container) || 0;
+      containerOffset.left += parseInt(getStyle(container, 'borderLeftWidth'), 10) - scrollLeft(container) || 0;
+      offset.left = left - containerOffset.left;
+      offset.top = top - containerOffset.top;
+      return offset;
+    },
     calcAutoPlacement: function calcAutoPlacement(targetOffset, container, overlay) {
       var _getContainerDimensio3 = getContainerDimensions(container),
           width = _getContainerDimensio3.width,
@@ -194,8 +238,8 @@ export default (function (props) {
       return "" + direction.key + AutoPlacement[align.key];
     },
     // Calculate the position of the overlay
-    calcOverlayPosition: function calcOverlayPosition(overlayNode, target, container) {
-      var childOffset = this.getPosition(target, container);
+    calcOverlayPosition: function calcOverlayPosition(overlayNode, target, container, cursorPosition) {
+      var childOffset = cursorPosition ? this.getCursorOffsetPosition(target, container, cursorPosition) : this.getPosition(target, container);
 
       var _ref2 = getOffset(overlayNode),
           overlayHeight = _ref2.height,

package/esm/Panel/Panel.js

@@ -40,23 +40,26 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var _useControlled = useControlled(expandedProp, defaultExpanded),
-      expandedState = _useControlled[0],
-      setExpanded = _useControlled[1];
-
   var _ref = useContext(PanelGroupContext) || {},
       accordion = _ref.accordion,
       activeKey = _ref.activeKey,
       onGroupSelect = _ref.onGroupSelect;
 
+  var _useControlled = useControlled(expandedProp, defaultExpanded || typeof activeKey !== 'undefined' && activeKey === eventKey),
+      expandedState = _useControlled[0],
+      setExpanded = _useControlled[1];
+
   var collapsible = collapsibleProp;
   var headerRole = headerRoleProp;
   var expanded = expandedState;
 
   if (accordion) {
     collapsible = true;
-    headerRole = 'button';
-    expanded = typeof activeKey !== 'undefined' ? activeKey === eventKey : expanded;
+    headerRole = 'button'; // Collapses all inactive panels.
+
+    if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {
+      expanded = false;
+    }
   }
 
   var handleSelect = useCallback(function (event) {