rsuite 5.49.0 → 5.50.0

package/cjs/Picker/usePickerRef.js

@@ -1,9 +1,11 @@
 'use client';
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
 /**
  * A hook of the exposed method of Picker
  */
@@ -13,20 +15,22 @@ function usePickerRef(ref, parmas) {
   var target = (0, _react.useRef)(null);
   var overlay = (0, _react.useRef)(null);
   var list = (0, _react.useRef)(null);
+  var searchInput = (0, _react.useRef)(null);
+  var treeView = (0, _react.useRef)(null);
   var _ref = parmas || {},
     inline = _ref.inline;
-  var handleOpen = (0, _react.useCallback)(function () {
+  var handleOpen = (0, _useEventCallback.default)(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 = (0, _react.useCallback)(function () {
+  });
+  var handleClose = (0, _useEventCallback.default)(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 = (0, _react.useCallback)(function () {
+  });
+  var handleUpdatePosition = (0, _useEventCallback.default)(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]);
+  });
   (0, _react.useImperativeHandle)(ref, function () {
     // Tree and CheckTree
     if (inline) {
@@ -75,7 +79,9 @@ function usePickerRef(ref, parmas) {
     root: root,
     overlay: overlay,
     target: target,
-    list: list
+    list: list,
+    searchInput: searchInput,
+    treeView: treeView
   };
 }
 var _default = usePickerRef;

package/cjs/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/cjs/Picker/utils.js

@@ -9,7 +9,6 @@ exports.shouldDisplay = shouldDisplay;
 exports.usePickerClassName = usePickerClassName;
 exports.onMenuKeyDown = onMenuKeyDown;
 exports.useSearch = useSearch;
-exports.usePublicMethods = usePublicMethods;
 exports.useToggleKeyDownEvent = exports.useFocusItemValue = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
@@ -366,10 +365,10 @@ exports.useFocusItemValue = useFocusItemValue;
 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,
@@ -381,32 +380,32 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     onMenuKeyDown = props.onMenuKeyDown,
     onMenuPressEnter = props.onMenuPressEnter,
     onMenuPressBackspace = props.onMenuPressBackspace;
-  var handleClose = (0, _react.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 = (0, _utils.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 = (0, _react.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 = (0, _utils.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 = (0, _react.useCallback)(function () {
+  });
+  var handleToggleDropdown = (0, _utils.useEventCallback)(function () {
     if (active) {
       handleClose();
       return;
     }
     handleOpen();
-  }, [active, handleOpen, handleClose]);
-  var onToggle = (0, _react.useCallback)(function (event) {
+  });
+  var onToggle = (0, _utils.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 === _utils.KEY_VALUES.ENTER) {
         handleToggleDropdown();
@@ -417,7 +416,7 @@ 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 === _utils.KEY_VALUES.ENTER) {
@@ -428,7 +427,7 @@ 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 === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current)) {
+      if (event.key === _utils.KEY_VALUES.BACKSPACE && event.target !== (searchInput === null || searchInput === void 0 ? void 0 : searchInput.current)) {
         onMenuPressBackspace === null || onMenuPressBackspace === void 0 ? void 0 : onMenuPressBackspace(event);
       }
 
@@ -438,8 +437,8 @@ 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();
         }
       }
     }
@@ -449,7 +448,7 @@ 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;
 };
 exports.useToggleKeyDownEvent = useToggleKeyDownEvent;
@@ -498,70 +497,4 @@ function useSearch(data, props) {
     handleSearch: handleSearch,
     resetSearch: resetSearch
   };
-}
-/**
- * A hook of the exposed method of Picker
- */
-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 = (0, _react.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 = (0, _react.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 = (0, _react.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]);
-  (0, _react.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/cjs/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/cjs/SelectPicker/SelectPicker.js

@@ -79,11 +79,13 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     renderMenuItem = props.renderMenuItem,
     renderExtraFooter = props.renderExtraFooter,
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _ref = (0, _utils.useControlled)(valueProp, defaultValue),
@@ -93,7 +95,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
@@ -116,19 +118,19 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useState = (0, _react.useState)(false),
     active = _useState[0],
     setActive = _useState[1];
-  var handleClose = (0, _react.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 = (0, _react.useCallback)(function (value, item, event) {
-    var _targetRef$current;
+  var handleClose = (0, _utils.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 = (0, _utils.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 = (0, _react.useCallback)(function (value, event) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleMenuPressEnter = (0, _react.useCallback)(function (event) {
+  });
+  var handleMenuPressEnter = (0, _utils.useEventCallback)(function (event) {
     if (!focusItemValue) {
       return;
     }
@@ -141,28 +143,28 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     handleSelect(focusItemValue, focusItem, event);
     handleChangeValue(focusItemValue, event);
     handleClose();
-  }, [data, focusItemValue, handleChangeValue, handleClose, handleSelect, setValue, valueKey]);
-  var handleItemSelect = (0, _react.useCallback)(function (value, item, event) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     handleSelect(value, item, event);
     handleChangeValue(value, event);
     handleClose();
-  }, [setValue, setFocusItemValue, handleSelect, handleChangeValue, handleClose]);
-  var handleClean = (0, _react.useCallback)(function (event) {
+  });
+  var handleClean = (0, _utils.useEventCallback)(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue(null);
     setFocusItemValue(value);
     handleChangeValue(null, event);
-  }, [value, disabled, cleanable, setValue, handleChangeValue, setFocusItemValue]);
+  });
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     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,
@@ -171,22 +173,16 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       setFocusItemValue(null);
     }
   }, rest));
-  var handleExited = (0, _react.useCallback)(function () {
+  var handleExited = (0, _utils.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 = (0, _react.useCallback)(function () {
+  });
+  var handleEntered = (0, _utils.useEventCallback)(function () {
     setActive(true);
     setFocusItemValue(value);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen, setFocusItemValue, value]);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   // Find active `MenuItem` by `value`
@@ -233,7 +229,7 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var menu = items.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -258,17 +254,17 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.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 = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
@@ -282,17 +278,18 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     onKeyDown: onPickerKeyDown,