rsuite 5.49.0 → 5.50.0

package/esm/Picker/usePickerRef.js

@@ -1,5 +1,6 @@
 'use client';
-import { useCallback, useImperativeHandle, useRef } from 'react';
+import { useImperativeHandle, useRef } from 'react';
+import useEventCallback from '../utils/useEventCallback';
 /**
  * A hook of the exposed method of Picker
  */
@@ -9,20 +10,22 @@ function usePickerRef(ref, parmas) {
   var target = useRef(null);
   var overlay = useRef(null);
   var list = useRef(null);
+  var searchInput = useRef(null);
+  var treeView = useRef(null);
   var _ref = parmas || {},
     inline = _ref.inline;
-  var handleOpen = useCallback(function () {
+  var handleOpen = useEventCallback(function () {
     var _trigger$current;
     trigger === null || trigger === void 0 ? void 0 : (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.open();
-  }, [trigger]);
-  var handleClose = useCallback(function () {
+  });
+  var handleClose = useEventCallback(function () {
     var _trigger$current2;
     trigger === null || trigger === void 0 ? void 0 : (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.close();
-  }, [trigger]);
-  var handleUpdatePosition = useCallback(function () {
+  });
+  var handleUpdatePosition = useEventCallback(function () {
     var _trigger$current3;
     trigger === null || trigger === void 0 ? void 0 : (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.updatePosition();
-  }, [trigger]);
+  });
   useImperativeHandle(ref, function () {
     // Tree and CheckTree
     if (inline) {
@@ -71,7 +74,9 @@ function usePickerRef(ref, parmas) {
     root: root,
     overlay: overlay,
     target: target,
-    list: list
+    list: list,
+    searchInput: searchInput,
+    treeView: treeView
   };
 }
 export default usePickerRef;

package/esm/Picker/utils.d.ts

@@ -68,10 +68,10 @@ export declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null |
 };
 export interface ToggleKeyDownEventProps {
     toggle?: boolean;
-    triggerRef: React.RefObject<any>;
-    targetRef: React.RefObject<any>;
-    overlayRef?: React.RefObject<any>;
-    searchInputRef?: React.RefObject<any>;
+    trigger: React.RefObject<any>;
+    target: React.RefObject<any>;
+    overlay?: React.RefObject<any>;
+    searchInput?: React.RefObject<any>;
     active?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
@@ -88,7 +88,7 @@ export interface ToggleKeyDownEventProps {
  * A hook to control the toggle keyboard operation
  * @param props
  */
-export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (event: React.KeyboardEvent) => void;
+export declare const useToggleKeyDownEvent: (props: ToggleKeyDownEventProps) => (...args: any[]) => any;
 interface SearchOptions<T> {
     labelKey: string;
     searchBy?: (keyword: string, label: any, item: T) => boolean;
@@ -113,8 +113,4 @@ export interface PickerDependentParameters {
     listRef?: React.RefObject<ListHandle>;
     inline?: boolean;
 }
-/**
- * A hook of the exposed method of Picker
- */
-export declare function usePublicMethods(ref: any, parmas: PickerDependentParameters): void;
 export {};

package/esm/Picker/utils.js

@@ -1,6 +1,6 @@
 'use client';
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useImperativeHandle, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import kebabCase from 'lodash/kebabCase';
 import trim from 'lodash/trim';
 import isFunction from 'lodash/isFunction';
@@ -8,7 +8,7 @@ import isUndefined from 'lodash/isUndefined';
 import omit from 'lodash/omit';
 import find from 'lodash/find';
 import { findNodeOfTree } from '../utils/treeUtils';
-import { KEY_VALUES, useClassNames, shallowEqual, reactToString, placementPolyfill } from '../utils';
+import { KEY_VALUES, useClassNames, shallowEqual, reactToString, placementPolyfill, useEventCallback } from '../utils';
 import { getHeight } from 'dom-lib';
 var defaultNodeKeys = {
   valueKey: 'value',
@@ -353,10 +353,10 @@ export var useFocusItemValue = function useFocusItemValue(defaultFocusItemValue,
 export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   var _props$toggle = props.toggle,
     toggle = _props$toggle === void 0 ? true : _props$toggle,
-    triggerRef = props.triggerRef,
-    targetRef = props.targetRef,
-    overlayRef = props.overlayRef,
-    searchInputRef = props.searchInputRef,
+    trigger = props.trigger,
+    target = props.target,
+    overlay = props.overlay,
+    searchInput = props.searchInput,
     active = props.active,
     readOnly = props.readOnly,
     disabled = props.disabled,
@@ -368,32 +368,32 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuKeyDown = props.onMenuKeyDown,
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$c, _targetRef$current, _targetRef$current$fo;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _trigger$current$clos, _trigger$current2, _trigger$current2$foc;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
 
     // The focus is on the trigger button after closing
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$foc = _trigger$current2.focus) === null || _trigger$current2$foc === void 0 ? void 0 : _trigger$current2$foc.call(_trigger$current2);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, targetRef, triggerRef]);
-  var handleOpen = useCallback(function () {
-    var _triggerRef$current2, _triggerRef$current2$;
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+  });
+  var handleOpen = useEventCallback(function () {
+    var _trigger$current3, _trigger$current3$ope;
+    (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : (_trigger$current3$ope = _trigger$current3.open) === null || _trigger$current3$ope === void 0 ? void 0 : _trigger$current3$ope.call(_trigger$current3);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, triggerRef]);
-  var handleToggleDropdown = useCallback(function () {
+  });
+  var handleToggleDropdown = useEventCallback(function () {
     if (active) {
       handleClose();
       return;
     }
     handleOpen();
-  }, [active, handleOpen, handleClose]);
-  var onToggle = useCallback(function (event) {
+  });
+  var onToggle = useEventCallback(function (event) {
     // Keyboard events should not be processed when readOnly and disabled are set.
     if (readOnly || disabled || loading) {
       return;
     }
-    if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
+    if (event.target === (target === null || target === void 0 ? void 0 : target.current)) {
       // enter
       if (toggle && event.key === KEY_VALUES.ENTER) {
         handleToggleDropdown();
@@ -404,7 +404,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
         onExit === null || onExit === void 0 ? void 0 : onExit(event);
       }
     }
-    if (overlayRef !== null && overlayRef !== void 0 && overlayRef.current) {
+    if (overlay !== null && overlay !== void 0 && overlay.current) {
       // The keyboard operation callback on the menu.
       onMenuKeyDown === null || onMenuKeyDown === void 0 ? void 0 : onMenuKeyDown(event);
       if (event.key === KEY_VALUES.ENTER) {
@@ -415,7 +415,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
        * There is no callback when typing the Backspace key in the search box.
        * The default is to remove search keywords
        */
-      if (event.key === KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {
+      if (event.key === KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {
         onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
       }
 
@@ -425,8 +425,8 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
         // 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 === null || searchInputRef === void 0 ? void 0 : (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.focus();
+          var _searchInput$current;
+          searchInput === null || searchInput === void 0 ? void 0 : (_searchInput$current = searchInput.current) === null || _searchInput$current === void 0 ? void 0 : _searchInput$current.focus();
         }
       }
     }
@@ -436,7 +436,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
     // Native event callback
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
+  });
   return onToggle;
 };
 /**
@@ -484,70 +484,4 @@ export function useSearch(data, props) {
     handleSearch: handleSearch,
     resetSearch: resetSearch
   };
-}
-/**
- * A hook of the exposed method of Picker
- */
-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;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : _triggerRef$current3.open();
-  }, [triggerRef]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current4;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.close();
-  }, [triggerRef]);
-  var handleUpdatePosition = useCallback(function () {
-    var _triggerRef$current5;
-    triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current5 = triggerRef.current) === null || _triggerRef$current5 === void 0 ? void 0 : _triggerRef$current5.updatePosition();
-  }, [triggerRef]);
-  useImperativeHandle(ref, function () {
-    // Tree and CheckTree
-    if (inline) {
-      return {
-        get root() {
-          var _triggerRef$current$r, _triggerRef$current6;
-          return rootRef !== null && rootRef !== void 0 && rootRef.current ? rootRef === null || rootRef === void 0 ? void 0 : rootRef.current : (_triggerRef$current$r = triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current6 = triggerRef.current) === null || _triggerRef$current6 === void 0 ? void 0 : _triggerRef$current6.root) !== null && _triggerRef$current$r !== void 0 ? _triggerRef$current$r : null;
-        },
-        get list() {
-          if (!(listRef !== null && listRef !== void 0 && listRef.current)) {
-            throw new Error('The list is not found, please set `virtualized` for the component.');
-          }
-          return listRef === null || listRef === void 0 ? void 0 : listRef.current;
-        }
-      };
-    }
-    return {
-      get root() {
-        var _ref, _triggerRef$current7;
-        return (_ref = (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) || (triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current7 = triggerRef.current) === null || _triggerRef$current7 === void 0 ? void 0 : _triggerRef$current7.root)) !== null && _ref !== void 0 ? _ref : null;
-      },
-      get overlay() {
-        var _overlayRef$current;
-        if (!(overlayRef !== null && overlayRef !== void 0 && overlayRef.current)) {
-          throw new Error('The overlay is not found. Please confirm whether the picker is open.');
-        }
-        return (_overlayRef$current = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) !== null && _overlayRef$current !== void 0 ? _overlayRef$current : null;
-      },
-      get target() {
-        var _targetRef$current2;
-        return (_targetRef$current2 = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) !== null && _targetRef$current2 !== void 0 ? _targetRef$current2 : null;
-      },
-      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/SelectPicker/SelectPicker.d.ts

@@ -1,4 +1,4 @@
-import React, { Ref } from 'react';
+import React from 'react';
 import { PickerLocale } from '../locales';
 import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ListProps } from '../Windowing';
@@ -49,7 +49,7 @@ export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, Pic
 }
 export interface SelectPickerComponent {
     <T>(props: SelectPickerProps<T> & {
-        ref?: Ref<PickerHandle>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<SelectPickerProps<any>>;

package/esm/SelectPicker/SelectPicker.js

@@ -3,16 +3,16 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
-import { createChainedFunction, useCustom, useClassNames, useControlled, mergeRefs, shallowEqual } from '../utils';
+import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, mergeRefs, shallowEqual } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * The `SelectPicker` component is used to select an item from a list of data.
@@ -73,11 +73,13 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
     rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "data", "valueKey", "labelKey", "value", "classPrefix", "placeholder", "defaultValue", "disabled", "cleanable", "placement", "menuClassName", "menuAutoWidth", "menuMaxHeight", "menuStyle", "groupBy", "locale", "toggleAs", "style", "searchable", "disabledItemValues", "virtualized", "listProps", "id", "onGroupTitleClick", "searchBy", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "sort", "renderValue", "renderMenu", "renderMenuGroup", "renderMenuItem", "renderExtraFooter"]);
-  var triggerRef = useRef(null);
-  var targetRef = useRef(null);
-  var overlayRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _ref = useControlled(valueProp, defaultValue),
@@ -87,7 +89,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
@@ -110,19 +112,19 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$c;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, []);
-  var handleSelect = useCallback(function (value, item, event) {
-    var _targetRef$current;
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _trigger$current$clos;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+  });
+  var handleSelect = useEventCallback(function (value, item, event) {
+    var _target$current;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.focus();
-  }, [onSelect]);
-  var handleChangeValue = useCallback(function (value, event) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleMenuPressEnter = useCallback(function (event) {
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
     if (!focusItemValue) {
       return;
     }
@@ -135,28 +137,28 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(focusItemValue, focusItem, event);
     handleChangeValue(focusItemValue, event);
     handleClose();
-  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);
-  var handleItemSelect = useCallback(function (value, item, event) {
+  });
+  var handleItemSelect = useEventCallback(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     handleSelect(value, item, event);
     handleChangeValue(value, event);
     handleClose();
-  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
-  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);
+  });
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
@@ -165,22 +167,16 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleExited = useCallback(function () {
+  var handleExited = useEventCallback(function () {
     resetSearch();
     setActive(false);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, resetSearch, onSearch]);
-  var handleEntered = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     setFocusItemValue(value);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, setFocusItemValue, value]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   // Find active `MenuItem` by `value`
@@ -227,7 +223,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -252,17 +248,17 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
@@ -276,17 +272,18 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onClean: createChainedFunction(handleClean, onClean),
     onKeyDown: onPickerKeyDown,