rsuite 5.13.0 → 5.15.0

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) {

package/esm/Picker/utils.d.ts

@@ -101,7 +101,7 @@ export declare function useSearch(props: SearchProps): {
     filteredData: import("../CheckTreePicker/utils").TreeNodeType[];
     updateFilteredData: (nextData: ItemDataType[]) => void;
     setSearchKeyword: React.Dispatch<React.SetStateAction<string>>;
-    checkShouldDisplay: (item: ItemDataType, keyword?: string | undefined) => boolean;
+    checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
     handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
 };
 interface PickerDependentParameters {

package/esm/Popover/Popover.d.ts

@@ -7,6 +7,8 @@ export interface PopoverProps extends WithAsProps {
     visible?: boolean;
     /** The content full the container */
     full?: boolean;
+    /** Whether show the arrow indicator */
+    arrow?: boolean;
 }
 declare const Popover: RsRefForwardingComponent<'div', PopoverProps>;
 export default Popover;

package/esm/Popover/Popover.js

@@ -18,7 +18,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
       visible = props.visible,
       className = props.className,
       full = props.full,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "title", "children", "style", "visible", "className", "full"]);
+      _props$arrow = props.arrow,
+      arrow = _props$arrow === void 0 ? true : _props$arrow,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "title", "children", "style", "visible", "className", "full", "arrow"]);
 
   var _useClassNames = useClassNames(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -40,7 +42,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     className: classes,
     style: styles
-  }), /*#__PURE__*/React.createElement("div", {
+  }), arrow && /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["arrow"]))),
     "aria-hidden": true
   }), title && /*#__PURE__*/React.createElement("h3", {
@@ -58,6 +60,7 @@ Popover.propTypes = {
   style: PropTypes.object,
   visible: PropTypes.bool,
   className: PropTypes.string,
-  full: PropTypes.bool
+  full: PropTypes.bool,
+  arrow: PropTypes.bool
 };
 export default Popover;

package/esm/Sidenav/SidenavDropdownToggle.js

@@ -36,7 +36,8 @@ var SidenavDropdownToggle = /*#__PURE__*/React.forwardRef(function (props, ref)
   }));
   var toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    tooltip: children
   }), children, !noCaret && /*#__PURE__*/React.createElement(ArrowDownLineIcon, {
     className: prefix('caret')
   }));

package/esm/Sidenav/SidenavItem.d.ts

@@ -14,6 +14,10 @@ export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLA
     onSelect?: (eventKey: T, event: React.MouseEvent) => void;
     divider?: boolean;
     panel?: boolean;
+    /**
+     * Content of the tooltip
+     */
+    tooltip?: React.ReactNode;
 }
 /**
  * @private

package/esm/Sidenav/SidenavItem.js

@@ -3,13 +3,15 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
-import { useClassNames, shallowEqual, mergeRefs, appendTooltip } from '../utils';
+import { useClassNames, shallowEqual, mergeRefs, createChainedFunction } from '../utils';
 import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import MenuItem from '../Menu/MenuItem';
 import omit from 'lodash/omit';
 import { SidenavContext } from './Sidenav';
+import Whisper from '../Whisper';
+import Tooltip from '../Tooltip';
 
 /**
  * @private
@@ -24,7 +26,7 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? SafeAnchor : _props$as,
       activeProp = props.active,
-      _children = props.children,
+      children = props.children,
       className = props.className,
       disabled = props.disabled,
       _props$classPrefix = props.classPrefix,
@@ -36,7 +38,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       divider = props.divider,
       panel = props.panel,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel"]);
+      _props$tooltip = props.tooltip,
+      tooltip = _props$tooltip === void 0 ? children : _props$tooltip,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "active", "children", "className", "disabled", "classPrefix", "icon", "eventKey", "style", "onClick", "onSelect", "divider", "panel", "tooltip"]);
 
   var _ref = useContext(NavContext),
       activeKey = _ref.activeKey,
@@ -56,34 +60,37 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);
 
   if (!sidenav.expanded) {
-    return /*#__PURE__*/React.createElement(MenuItem, {
-      selected: selected,
-      disabled: disabled,
-      onActivate: handleClick
-    }, function (_ref2, menuitemRef) {
-      var selected = _ref2.selected,
-          active = _ref2.active,
-          menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
+    return /*#__PURE__*/React.createElement(Whisper, {
+      trigger: "hover",
+      speaker: /*#__PURE__*/React.createElement(Tooltip, null, tooltip),
+      placement: "right"
+    }, function (triggerProps, triggerRef) {
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        selected: selected,
+        disabled: disabled,
+        onActivate: handleClick
+      }, function (_ref2, menuitemRef) {
+        var selected = _ref2.selected,
+            active = _ref2.active,
+            menuitem = _objectWithoutPropertiesLoose(_ref2, ["selected", "active"]);
 
-      var classes = merge(className, withClassPrefix({
-        focus: active,
-        active: selected,
-        disabled: disabled
-      })); // Show tooltip when inside a collapse <Sidenav>
+        var classes = merge(className, withClassPrefix({
+          focus: active,
+          active: selected,
+          disabled: disabled
+        })); // Show tooltip when inside a collapse <Sidenav>
 
-      return appendTooltip({
-        children: function children(triggerProps, triggerRef) {
-          return /*#__PURE__*/React.createElement(Component, _extends({
-            ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
-            disabled: Component === SafeAnchor ? disabled : undefined,
-            className: classes,
-            "data-event-key": eventKey
-          }, omit(rest, ['divider', 'panel']), triggerProps, menuitem), icon && /*#__PURE__*/React.cloneElement(icon, {
-            className: prefix('icon')
-          }), _children, /*#__PURE__*/React.createElement(Ripple, null));
-        },
-        message: _children,
-        placement: 'right'
+        return /*#__PURE__*/React.createElement(Component, _extends({
+          ref: mergeRefs(mergeRefs(ref, menuitemRef), triggerRef),
+          disabled: Component === SafeAnchor ? disabled : undefined,
+          className: classes,
+          "data-event-key": eventKey
+        }, omit(rest, ['divider', 'panel']), triggerProps, menuitem, {
+          onMouseOver: createChainedFunction(menuitem.onMouseOver, triggerProps.onMouseOver),
+          onMouseOut: createChainedFunction(menuitem.onMouseOut, triggerProps.onMouseOut)
+        }), icon && /*#__PURE__*/React.cloneElement(icon, {
+          className: prefix('icon')
+        }), children, /*#__PURE__*/React.createElement(Ripple, null));
       });
     });
   }
@@ -103,7 +110,7 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       role: "none presentation",
       style: style,
       className: merge(className, prefix('panel'))
-    }, rest), _children);
+    }, rest), children);
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({
@@ -118,7 +125,7 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "data-event-key": eventKey
   }, rest), icon && /*#__PURE__*/React.cloneElement(icon, {
     className: prefix('icon')
-  }), _children, /*#__PURE__*/React.createElement(Ripple, null));
+  }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 SidenavItem.displayName = 'Sidenav.Item';
 SidenavItem.propTypes = {

package/esm/Sidenav/SidenavToggle.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface SidenavToggleProps extends WithAsProps {
-    /** Expand then nav */
+    /**
+     * Expand then nav
+     *
+     * @deprecated Use <Sidenav expanded> instead.
+     */
     expanded?: boolean;
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;

package/esm/Sidenav/SidenavToggle.js

@@ -1,29 +1,41 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '../IconButton';
 import { useClassNames } from '../utils';
 import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
+import deprecatePropType from '../utils/deprecatePropType';
+import { SidenavContext } from './Sidenav';
 var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var sidenav = useContext(SidenavContext);
+
+  if (!sidenav) {
+    throw new Error('<Sidenav.Toggle> must be rendered within a <Sidenav>');
+  }
+
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
-      expanded = props.expanded,
+      DEPRECATED_expanded = props.expanded,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'sidenav-toggle' : _props$classPrefix,
       onToggle = props.onToggle,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "expanded", "className", "classPrefix", "onToggle"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "expanded", "className", "classPrefix", "onToggle"]); // if `expanded` prop is provided, it takes priority
+
+
+  var expanded = DEPRECATED_expanded !== null && DEPRECATED_expanded !== void 0 ? DEPRECATED_expanded : sidenav.expanded;
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix({
     collapsed: !expanded
   }));
-  var Icon = expanded ? AngleRight : AngleLeft;
+  var Icon = expanded ? AngleLeft : AngleRight;
 
   var handleToggle = function handleToggle(event) {
     onToggle === null || onToggle === void 0 ? void 0 : onToggle(!expanded, event);
@@ -33,16 +45,17 @@ var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(IconButton, {
-    appearance: "default",
     icon: /*#__PURE__*/React.createElement(Icon, null),
-    onClick: handleToggle
+    className: prefix('button'),
+    onClick: handleToggle,
+    "aria-label": expanded ? 'Collapse' : 'Expand'
   }));
 });
-SidenavToggle.displayName = 'SidenavToggle';
+SidenavToggle.displayName = 'Sidenav.Toggle';
 SidenavToggle.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
-  expanded: PropTypes.bool,
+  expanded: deprecatePropType(PropTypes.bool, 'Use <Sidenav expanded> instead.'),
   onToggle: PropTypes.func
 };
 export default SidenavToggle;

package/esm/Toggle/Toggle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { WithAsProps, TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 import { ToggleLocale } from '../locales';
 export interface ToggleProps extends WithAsProps {
-    /** Wheather to disabled toggle */
+    /** Whether to disabled toggle */
     disabled?: boolean;
     /** Render the control as plain text */
     plaintext?: boolean;

package/esm/Tooltip/Tooltip.d.ts

@@ -3,10 +3,12 @@ import { TypeAttributes, WithAsProps, RsRefForwardingComponent } from '../@types
 export interface TooltipProps extends WithAsProps {
     /** Dispaly placement */
     placement?: TypeAttributes.Placement;
-    /** Wheather visible */
+    /** Whether visible */
     visible?: boolean;
     /** Primary content */
     children?: React.ReactNode;
+    /** Whether show the arrow indicator */
+    arrow?: boolean;
 }
 declare const Tooltip: RsRefForwardingComponent<'div', TooltipProps>;
 export default Tooltip;

package/esm/Tooltip/Tooltip.js

@@ -12,13 +12,17 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
       children = props.children,
       style = props.style,
       visible = props.visible,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "style", "visible"]);
+      _props$arrow = props.arrow,
+      arrow = _props$arrow === void 0 ? true : _props$arrow,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "children", "style", "visible", "arrow"]);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  var classes = merge(className, withClassPrefix());
+  var classes = merge(className, withClassPrefix({
+    arrow: arrow
+  }));
 
   var styles = _extends({
     opacity: visible ? 1 : undefined
@@ -38,6 +42,7 @@ Tooltip.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   style: PropTypes.object,
-  children: PropTypes.node
+  children: PropTypes.node,
+  arrow: PropTypes.bool
 };
 export default Tooltip;

package/esm/Whisper/Whisper.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
+import { OverlayTriggerInstance } from '../Overlay/OverlayTrigger';
 import { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
 export declare type WhisperProps = OverlayTriggerProps;
-export interface WhisperInstance extends React.Component<WhisperProps> {
-    open: (delay?: number) => void;
-    close: (delay?: number) => void;
-}
-declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<unknown>>;
+export declare type WhisperInstance = OverlayTriggerInstance;
+declare const Whisper: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<OverlayTriggerInstance>>;
 export default Whisper;