rsuite 5.2.0 → 5.2.4

package/esm/Menu/Menu.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import MenuContext, { MenuActionTypes, MoveFocusTo } from './MenuContext';
 import { KEY_VALUES, useCustom } from '../utils';
@@ -40,7 +40,10 @@ function Menu(props) {
       rtl = _useCustom.rtl;
 
   var activeItem = (_items$activeItemInde = items[activeItemIndex]) === null || _items$activeItemInde === void 0 ? void 0 : _items$activeItemInde.element;
-  var menuFocus = useFocus(menuElementRef);
+
+  var _useFocus = useFocus(menuElementRef),
+      grabFocus = _useFocus.grab;
+
   var openMenu = useCallback(function (event) {
     dispatch({
       type: MenuActionTypes.OpenMenu
@@ -54,8 +57,8 @@ function Menu(props) {
     }
 
     onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(true, event);
-    menuFocus.grab();
-  }, [dispatch, onToggleMenu, menuFocus]);
+    grabFocus();
+  }, [dispatch, onToggleMenu, grabFocus]);
   var closeMenu = useCallback(function (event, returnFocusToButton) {
     if (returnFocusToButton === void 0) {
       returnFocusToButton = true;
@@ -150,41 +153,48 @@ function Menu(props) {
     if (disabled) return;
     openMenu(event);
   }, [open, disabled, openMenu]);
-  var buttonEventHandlers = {
-    onKeyDown: handleButtonKeydown
-  };
-  /**
-   * Bind event of trigger,
-   * not used in  in the expanded state of '<Sidenav>'
-   */
-
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
-    buttonEventHandlers.onClick = handleButtonClick;
-  }
+  var buttonEventHandlers = useMemo(function () {
+    var buttonEventHandlers = {
+      onKeyDown: handleButtonKeydown
+    };
+    /**
+     * Bind event of trigger,
+     * not used in  in the expanded state of '<Sidenav>'
+     */
+
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('click')) {
+      buttonEventHandlers.onClick = handleButtonClick;
+    }
 
-  if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
-    buttonEventHandlers.onContextMenu = handleButtonContextMenu;
-  }
+    if (openMenuOn !== null && openMenuOn !== void 0 && openMenuOn.includes('contextmenu')) {
+      buttonEventHandlers.onContextMenu = handleButtonContextMenu;
+    }
 
+    return buttonEventHandlers;
+  }, [openMenuOn, handleButtonKeydown, handleButtonClick, handleButtonContextMenu]);
   var buttonId = useUniqueId('menubutton-');
-  var menuId = useUniqueId('menu-'); // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
-
-  var buttonAriaAttributes = {
-    role: 'button',
-    'aria-haspopup': 'menu',
-    'aria-expanded': open || undefined,
-    // it's recommend to remove aria-expanded when menu is hidden
-    'aria-controls': menuId
-  };
-
-  var buttonProps = _extends({
-    id: buttonId
-  }, buttonAriaAttributes, buttonEventHandlers, {
-    // render props
-    open: open
-  });
-
-  var customMenuButton = renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  var menuId = useUniqueId('menu-');
+  var buttonAriaAttributes = useMemo(function () {
+    // Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#wai-aria-roles-states-and-properties-14
+    return {
+      role: 'button',
+      'aria-haspopup': 'menu',
+      'aria-expanded': open || undefined,
+      // it's recommend to remove aria-expanded when menu is hidden
+      'aria-controls': menuId
+    };
+  }, [open, menuId]);
+  var buttonProps = useMemo(function () {
+    return _extends({
+      id: buttonId
+    }, buttonAriaAttributes, buttonEventHandlers, {
+      // render props
+      open: open
+    });
+  }, [buttonId, buttonAriaAttributes, buttonEventHandlers, open]);
+  var customMenuButton = useMemo(function () {
+    return renderMenuButton === null || renderMenuButton === void 0 ? void 0 : renderMenuButton(buttonProps, buttonElementRef);
+  }, [renderMenuButton, buttonProps, buttonElementRef]);
   var buttonElement = customMenuButton !== null && customMenuButton !== void 0 ? customMenuButton : /*#__PURE__*/React.createElement("button", _extends({
     ref: buttonElementRef
   }, buttonProps), menuButtonText);

package/esm/Menu/MenuItem.js

@@ -32,20 +32,24 @@ function MenuItem(props) {
   }, [disabled, onActivate]); // Gain/release focus on mousedown in `menubar`
 
   var handleMouseDown = useCallback(function () {
-    dispatch({
-      type: MenuActionTypes.MoveFocus,
-      to: MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+    if (!hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = useCallback(function () {
-    dispatch({
-      type: MenuActionTypes.MoveFocus,
-      to: MoveFocusTo.Specific,
-      id: menuitemRef.current.id
-    });
-  }, [dispatch]);
+    if (!hasFocus) {
+      dispatch({
+        type: MenuActionTypes.MoveFocus,
+        to: MoveFocusTo.Specific,
+        id: menuitemRef.current.id
+      });
+    }
+  }, [hasFocus, dispatch]);
   var handleMouseLeave = useCallback(function () {
     dispatch({
       type: MenuActionTypes.MoveFocus,

package/esm/Modal/utils.js

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
-import bindElementResize, { unbind as unbindElementResize } from 'element-resize-event';
 import getHeight from 'dom-lib/getHeight';
 import on from 'dom-lib/on';
+import { ResizeObserver } from '@juggle/resize-observer';
 export var useBodyStyles = function useBodyStyles(ref, options) {
   var _useState = useState({}),
       bodyStyles = _useState[0],
@@ -12,6 +12,7 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       prefix = options.prefix;
   var windowResizeListener = useRef();
   var contentElement = useRef();
+  var contentElementResizeObserver = useRef();
   var updateBodyStyles = useCallback(function (_event, entering) {
     var dialog = ref.current;
     var scrollHeight = dialog ? dialog.scrollHeight : 0;
@@ -40,13 +41,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles(styles);
   }, [prefix, ref]);
   var onDestroyEvents = useCallback(function () {
-    var _windowResizeListener, _windowResizeListener2;
+    var _windowResizeListener, _windowResizeListener2, _contentElementResize;
 
     (_windowResizeListener = windowResizeListener.current) === null || _windowResizeListener === void 0 ? void 0 : (_windowResizeListener2 = _windowResizeListener.off) === null || _windowResizeListener2 === void 0 ? void 0 : _windowResizeListener2.call(_windowResizeListener);
-
-    if (contentElement.current) {
-      unbindElementResize(contentElement.current);
-    }
+    (_contentElementResize = contentElementResizeObserver.current) === null || _contentElementResize === void 0 ? void 0 : _contentElementResize.disconnect();
   }, []);
   var onChangeBodyStyles = useCallback(function (entering) {
     if (overflow && !drawer) {
@@ -55,7 +53,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
       updateBodyStyles(null, entering);
       contentElement.current = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("." + prefix('content'));
       windowResizeListener.current = on(window, 'resize', updateBodyStyles);
-      bindElementResize(contentElement.current, updateBodyStyles);
+      contentElementResizeObserver.current = new ResizeObserver(function () {
+        return updateBodyStyles();
+      });
+      contentElementResizeObserver.current.observe(contentElement.current);
     }
   }, [drawer, overflow, prefix, ref, updateBodyStyles]);
   useEffect(function () {

package/esm/Overlay/Position.js

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback, useImperativeHandle } from 'react';
-import bindElementResize from 'element-resize-event';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import getContainer from 'dom-lib/getContainer';
@@ -8,6 +7,7 @@ import removeClass from 'dom-lib/removeClass';
 import on from 'dom-lib/on';
 import addClass from 'dom-lib/addClass';
 import addStyle from 'dom-lib/addStyle';
+import { ResizeObserver } from '@juggle/resize-observer';
 import isElement from '../DOMHelper/isElement';
 import positionUtils from './positionUtils';
 import { getDOMNode } from '../utils';
@@ -23,6 +23,7 @@ var usePosition = function usePosition(props, ref) {
       triggerTarget = props.triggerTarget;
   var containerRef = useRef();
   var lastTargetRef = useRef();
+  var overlayResizeObserver = useRef();
   var defaultPosition = {
     positionLeft: 0,
     positionTop: 0,
@@ -109,17 +110,19 @@ var usePosition = function usePosition(props, ref) {
 
     if (overlay) {
       // Update the position when the size of the overlay changes
-      bindElementResize(overlay, function () {
+      overlayResizeObserver.current = new ResizeObserver(function () {
         return updatePosition(true, true);
       });
+      overlayResizeObserver.current.observe(overlay);
     }
 
     return function () {
-      var _containerScrollListe;
+      var _containerScrollListe, _overlayResizeObserve;
 
       lastTargetRef.current = null;
       (_containerScrollListe = containerScrollListener) === null || _containerScrollListe === void 0 ? void 0 : _containerScrollListe.off();
       resizeListener === null || resizeListener === void 0 ? void 0 : resizeListener.off();
+      (_overlayResizeObserve = overlayResizeObserver.current) === null || _overlayResizeObserve === void 0 ? void 0 : _overlayResizeObserve.disconnect();
     };
   }, [preventOverflow, ref, updatePosition]);
   useUpdateEffect(function () {

package/esm/Picker/PickerToggle.js

@@ -12,7 +12,7 @@ import CloseButton from '../CloseButton';
 import { useClassNames, KEY_VALUES, mergeRefs } from '../utils';
 import Plaintext from '../Plaintext';
 import useToggleCaret from '../utils/useToggleCaret';
-import MaskedInput from '../MaskedInput';
+import TextMask from '../MaskedInput/TextMask';
 import deprecatePropType from '../utils/deprecatePropType';
 var defaultInputMask = [];
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -83,15 +83,17 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
 
     if (input) {
-      inputRef.current.focus();
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
   }, [input, onFocus]);
   var handleBlur = useCallback(function (event) {
     if (document.activeElement !== inputRef.current) {
-      var _inputRef$current;
+      var _inputRef$current2;
 
       setActive(false);
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
     }
 
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
@@ -146,7 +148,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus: !disabled ? handleFocus : null // The debounce is set to 200 to solve the flicker caused by the switch between input and div.
     ,
     onBlur: !disabled ? debounce(handleBlur, 200) : null
-  }), /*#__PURE__*/React.createElement(MaskedInput, {
+  }), /*#__PURE__*/React.createElement(TextMask, {
     mask: inputMask,
     value: Array.isArray(inputValue) ? inputValue.toString() : inputValue,
     onBlur: handleInputBlur,

package/esm/Picker/VirtualizedList.d.ts

@@ -1,9 +1,36 @@
 import React from 'react';
 import { ListProps, ListRowProps } from 'react-virtualized/dist/commonjs/List';
 import { AutoSizerProps } from 'react-virtualized/dist/commonjs/AutoSizer';
+import type { Alignment } from 'react-virtualized';
 export interface ListInstance {
-    child: Element;
-    scrollToRow?: (index: number) => void;
+    /**
+     * Forcefully re-render the inner Grid component.
+     */
+    forceUpdateGrid(): void;
+    /**
+     * Gets offset for a given row and alignment.
+     */
+    getOffsetForRow(params: {
+        alignment?: Alignment;
+        index?: number;
+    }): number;
+    /**
+     * Pre-measure all rows in a List.
+     */
+    measureAllRows(): void;
+    /**
+     * Recompute row heights and offsets after the specified index (defaults to 0).
+     */
+    recomputeRowHeights(index?: number): void;
+    /**
+     * Scroll to the specified offset. Useful for animating position changes.
+     */
+    scrollToPosition(scrollTop?: number): void;
+    /**
+     * Ensure row is visible. This method can be used to safely scroll back to a cell
+     * that a user has scrolled away from even if it was previously scrolled to.
+     */
+    scrollToRow(index?: number): void;
 }
 export type { ListProps, AutoSizerProps, ListRowProps };
 export declare const List: React.ComponentType<ListProps>;

package/esm/Picker/utils.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { OverlayTriggerInstance } from './PickerToggleTrigger';
 import { TypeAttributes, ItemDataType } from '../@types/common';
+import { ListInstance } from './VirtualizedList';
 interface NodeKeys {
     valueKey: string;
     childrenKey: string;
@@ -103,25 +104,16 @@ export declare function useSearch(props: SearchProps): {
     checkShouldDisplay: (item: ItemDataType, keyword?: string) => boolean;
     handleSearch: (searchKeyword: string, event: React.SyntheticEvent) => void;
 };
-interface Refs {
+interface PickerDependentParameters {
     triggerRef?: React.RefObject<OverlayTriggerInstance>;
-    rootRef?: React.RefObject<HTMLElement>;
+    rootRef?: React.RefObject<any>;
     overlayRef?: React.RefObject<HTMLElement>;
     targetRef?: React.RefObject<HTMLElement>;
+    listRef?: React.RefObject<ListInstance>;
+    inline?: boolean;
 }
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-export declare function usePublicMethods(ref: any, { triggerRef, overlayRef, targetRef, rootRef }: Refs, disabled?: boolean): void;
+export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
 export {};

package/esm/Picker/utils.js

@@ -376,9 +376,15 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
 
       if (event.key.length === 1 && /\w/.test(event.key)) {
-        var _searchInputRef$curre;
+        var _event$target;
 
-        searchInputRef === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        // Exclude Input
+        // eg: <SelectPicker renderExtraFooter={() => <Input />} />
+        if (((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName) !== 'INPUT') {
+          var _searchInputRef$curre;
+
+          (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+        }
       }
     }
 
@@ -455,23 +461,14 @@ export function useSearch(props) {
 
 /**
  * A hook of the exposed method of Picker
- *
- * {
- *   root: Element;
- *   overlay: Element;
- *   target?: Element;
- *   updatePosition:() => void;
- *   open:() => void;
- *   close:() => void;
- * }
- * @param ref
- * @param params
  */
-export function usePublicMethods(ref, _ref, disabled) {
-  var triggerRef = _ref.triggerRef,
-      overlayRef = _ref.overlayRef,
-      targetRef = _ref.targetRef,
-      rootRef = _ref.rootRef;
+export function usePublicMethods(ref, parmas) {
+  var triggerRef = parmas.triggerRef,
+      overlayRef = parmas.overlayRef,
+      targetRef = parmas.targetRef,
+      rootRef = parmas.rootRef,
+      listRef = parmas.listRef,
+      inline = parmas.inline;
   var handleOpen = useCallback(function () {
     var _triggerRef$current3;
 
@@ -487,10 +484,9 @@ export function usePublicMethods(ref, _ref, disabled) {
 
     (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
   }, [triggerRef]);
-
-  if (!disabled) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useImperativeHandle(ref, function () {
+  useImperativeHandle(ref, function () {
+    // Tree and CheckTree
+    if (inline) {
       return {
         get root() {
           var _triggerRef$current6;
@@ -498,18 +494,43 @@ export function usePublicMethods(ref, _ref, disabled) {
           return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root;
         },
 
-        get overlay() {
-          return overlayRef.current;
-        },
+        get list() {
+          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+            throw new Error('The list is not found, please set `virtualized` for the component.');
+          }
 
-        get target() {
-          return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
-        },
+          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        }
 
-        updatePosition: handleUpdatePosition,
-        open: handleOpen,
-        close: handleClose
       };
-    });
-  }
+    }
+
+    return {
+      get root() {
+        var _triggerRef$current7;
+
+        return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root;
+      },
+
+      get overlay() {
+        return overlayRef.current;
+      },
+
+      get target() {
+        return targetRef === null || targetRef === void 0 ? void 0 : targetRef.current;
+      },
+
+      get list() {
+        if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
+          throw new Error("\n            The list is not found.\n            1.Please set virtualized for the component.\n            2.Please confirm whether the picker is open.\n          ");
+        }
+
+        return listRef === null || listRef === void 0 ? void 0 : listRef.current;
+      },
+
+      updatePosition: handleUpdatePosition,
+      open: handleOpen,
+      close: handleClose
+    };
+  });
 }

package/esm/RadioGroup/RadioGroup.js

@@ -55,10 +55,10 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [disabled, handleChange, inline, isControlled, name, plaintext, readOnly, value]);
   return /*#__PURE__*/React.createElement(RadioContext.Provider, {
     value: contextValue
-  }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, {
+  }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, _extends({
     ref: ref,
     localeKey: "notSelected"
-  }, value ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({
+  }, rest), value ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({
     role: "radiogroup"
   }, rest, {
     ref: ref,

package/esm/Rate/Rate.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import isNil from 'lodash/isNil';
 import Star from '@rsuite/icons/legacy/Star';
 import { useClassNames, useControlled, shallowEqualArray, SIZE, KEY_VALUES } from '../utils';
 import { transformValueToCharacterMap, transformCharacterMapToValue } from './utils';
@@ -120,7 +121,7 @@ var Rate = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(Plaintext, {
       localeKey: "notSelected",
       className: className
-    }, value + "(" + max + ")");
+    }, !isNil(value) ? value + "(" + max + ")" : null);
   }
 
   return /*#__PURE__*/React.createElement(Component, _extends({

package/esm/Sidenav/SidenavDropdownItem.js

@@ -9,6 +9,7 @@ import Ripple from '../Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import DropdownContext from '../Dropdown/DropdownContext';
+import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
 
 /**
  * Tree View Node
@@ -59,34 +60,39 @@ var SidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var menuitemEventHandlers = {
     onClick: createChainedFunction(handleClick, onClick)
   };
+  var renderDropdownItem = useRenderDropdownItem(Component);
 
   if (divider) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      role: "separator",
+      role: 'separator',
       style: style,
       className: merge(prefix('divider'), className)
     }, rest));
   }
 
   if (panel) {
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return renderDropdownItem(_extends({
       ref: ref,
-      role: "none presentation",
+      role: 'none presentation',
       style: style,
       className: merge(prefix('panel'), className)
-    }, rest), children);
+    }, rest, {
+      children: children
+    }));
   }
 
-  return /*#__PURE__*/React.createElement(SafeAnchor, _extends({
+  return renderDropdownItem(_extends({
     ref: ref
   }, rest, {
     style: style,
     className: classes,
-    "aria-current": selected || undefined
-  }, menuitemEventHandlers), icon && /*#__PURE__*/React.cloneElement(icon, {
-    className: prefix('menu-icon')
-  }), children, /*#__PURE__*/React.createElement(Ripple, null));
+    'aria-current': selected || undefined
+  }, menuitemEventHandlers, {
+    children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
+      className: prefix('menu-icon')
+    }), children, /*#__PURE__*/React.createElement(Ripple, null))
+  }), SafeAnchor);
 });
 SidenavDropdownItem.displayName = 'Sidenav.Dropdown.Item';
 SidenavDropdownItem.propTypes = {

package/esm/TreePicker/TreePicker.js

@@ -412,10 +412,13 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.focus();
   }, [activeNode, setSearchKeyword, valueKey]);
   usePublicMethods(ref, {
+    rootRef: inline ? treeViewRef : null,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
-    targetRef: targetRef
-  }, inline);
+    targetRef: targetRef,
+    listRef: listRef,
+    inline: inline
+  });
   var handleFocusItem = useCallback(function (key) {
     var focusableItems = getFocusableItems(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -627,7 +630,7 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       role: "tree",
       id: id ? id + "-listbox" : undefined,
-      ref: inline ? mergeRefs(treeViewRef, ref) : treeViewRef,
+      ref: treeViewRef,
       className: classes,
       style: styles,
       onKeyDown: inline ? handleTreeKeyDown : undefined

package/esm/utils/useElementResize.d.ts

@@ -5,4 +5,4 @@
  * @param eventTarget The target to listen for events on
  * @param listener An event handler
  */
-export default function useElementResize(eventTarget: EventTarget | (() => EventTarget), listener: EventListenerOrEventListenerObject): void;
+export default function useElementResize(eventTarget: Element | (() => Element), listener: ResizeObserverCallback): void;

package/esm/utils/useElementResize.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import bindElementResize, { unbind } from 'element-resize-event';
+import { useEffect, useRef } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
 /**
  * Attach the event handler directly to the specified DOM element,
  * and it will be triggered when the size of the DOM element is changed.
@@ -9,11 +9,18 @@ import bindElementResize, { unbind } from 'element-resize-event';
  */
 
 export default function useElementResize(eventTarget, listener) {
+  var resizeObserver = useRef();
   useEffect(function () {
-    var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
-    bindElementResize(target, listener);
+    if (!resizeObserver.current) {
+      var target = typeof eventTarget === 'function' ? eventTarget() : eventTarget;
+      resizeObserver.current = new ResizeObserver(listener);
+      resizeObserver.current.observe(target);
+    }
+
     return function () {
-      return unbind(target);
+      var _resizeObserver$curre;
+
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.disconnect();
     };
   }, [eventTarget, listener]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.2.0",
+  "version": "5.2.4",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
+    "@juggle/resize-observer": "^3.3.1",
     "@rsuite/icons": "^1.0.2",
     "@types/chai": "^4.2.18",
     "@types/lodash": "^4.14.134",
@@ -33,11 +34,10 @@
     "classnames": "^2.3.1",
     "date-fns": "^2.13.0",
     "dom-lib": "^3.0.0",
-    "element-resize-event": "^3.0.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.0.3",
+    "rsuite-table": "^5.2.2",
     "schema-typed": "^2.0.2"
   },
   "peerDependencies": {