rsuite 5.48.1 → 5.50.0

package/esm/DateRangePicker/types.d.ts

@@ -9,12 +9,20 @@ export interface RangeType<T = DateRange> {
     placement?: 'bottom' | 'left';
 }
 export declare type DisabledDateFunction = (
-/** Date used to determine if disabling is required. */
+/**
+ * Date used to determine if disabling is required.
+ */
 date: Date, 
-/** Date selected. */
+/**
+ * Date selected.
+ */
 selectDate?: ValueType, 
 /**
  * Whether to choose to finish now.
  * If `false`, only the start date is selected, waiting for the selection end date.
  */
-selectedDone?: boolean, target?: DATERANGE_DISABLED_TARGET) => boolean;
+selectedDone?: boolean, 
+/**
+ * Call the target of the `shouldDisableDate` function.
+ */
+target?: DATERANGE_DISABLED_TARGET) => boolean;

package/esm/DateRangePicker/utils.d.ts

@@ -1,7 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
+    allowAameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -4,29 +4,31 @@ export function getSafeCalendarDate(_ref) {
   var _value;
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
-    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey;
+    calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
+    allowAameMonth = _ref.allowAameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
+  var gap = allowAameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = differenceInCalendarMonths(value[1], value[0]);
     if (calendarKey === 'start') {
       return [value[0], diffMonth <= 0 ? copyTime({
         from: value[1],
-        to: addMonths(value[0], 1)
+        to: addMonths(value[0], gap)
       }) : value[1]];
     } else if (calendarKey === 'end') {
       return [diffMonth <= 0 ? copyTime({
         from: value[0],
-        to: addMonths(value[1], -1)
+        to: addMonths(value[1], -gap)
       }) : value[0], value[1]];
     }
 
     // If only the start date
   } else if (value[0]) {
-    return [value[0], addMonths(value[0], 1)];
+    return [value[0], addMonths(value[0], gap)];
   }
   var todayDate = new Date();
-  return [todayDate, addMonths(todayDate, 1)];
+  return [todayDate, addMonths(todayDate, gap)];
 }
 export var isSameRange = function isSameRange(source, dest, format) {
   // If both are null, reguard as same

package/esm/FormControl/FormControl.d.ts

@@ -9,7 +9,17 @@ export declare type FormControlAccepterProps<ValueType = any> = FormControlBaseP
 export interface FormControlProps<P = any, ValueType = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
     /** Proxied components */
     accepter?: React.ElementType<P & FormControlBaseProps<ValueType>>;
-    /** The name of form-control */
+    /**
+     * The name of form-control, support nested path. such as `address.city`.
+     * The path will be used to get and set form values.
+     *
+     * @example
+     * ```js
+     * <Form formValue={{ address: { city: 'Shanghai' } }}>
+     *   <FormControl name="address.city" />
+     * </Form>
+     * ```
+     **/
     name: string;
     /** Value */
     value?: ValueType;

package/esm/FormControl/FormControl.js

@@ -6,6 +6,8 @@ var _templateObject;
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
+import get from 'lodash/get';
+import set from 'lodash/set';
 import Input from '../Input';
 import FormErrorMessage from '../FormErrorMessage';
 import { useClassNames } from '../utils';
@@ -80,7 +82,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var trigger = checkTrigger || contextCheckTrigger;
   var formValue = useContext(FormValueContext);
-  var val = isUndefined(value) ? formValue === null || formValue === void 0 ? void 0 : formValue[name] : value;
+  var val = isUndefined(value) ? get(formValue, name) : value;
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
@@ -95,7 +97,6 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   };
   var handleFieldCheck = function handleFieldCheck(value, isCheckTrigger) {
-    var _extends2;
     var callbackEvents = function callbackEvents(checkResult) {
       // The relevant event is triggered only when the inspection is allowed.
       if (isCheckTrigger) {
@@ -107,7 +108,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
       return checkResult;
     };
-    var nextFormValue = _extends({}, formValue, (_extends2 = {}, _extends2[name] = value, _extends2));
+    var nextFormValue = set(formValue || {}, name, value);
     var model = getCombinedModel();
     if (checkAsync) {
       return model === null || model === void 0 ? void 0 : model.checkForFieldAsync(name, nextFormValue).then(function (checkResult) {

package/esm/Input/Input.d.ts

@@ -13,12 +13,23 @@ export interface InputProps extends WithAsProps, Omit<React.InputHTMLAttributes<
     size?: TypeAttributes.Size;
     /** Ref of input element */
     inputRef?: React.Ref<any>;
+    /**
+     * The htmlSize attribute defines the width of the <input> element.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size
+     * @version 5.49.0
+     */
+    htmlSize?: number;
+    /**
+     * The callback function in which value is changed.
+     */
     onChange?: PrependParameters<React.ChangeEventHandler<HTMLInputElement>, [value: string]>;
     /** Called on press enter */
     onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }
 /**
  * The `<Input>` component is used to get user input in a text field.
+ *
  * @see https://rsuitejs.com/components/input
  */
 declare const Input: RsRefForwardingComponent<'input', InputProps>;

package/esm/Input/Input.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useContext } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroupContext } from '../FormGroup/FormGroup';
 import { InputGroupContext } from '../InputGroup/InputGroup';
@@ -9,6 +9,7 @@ import Plaintext from '../Plaintext';
 import { createChainedFunction, TypeChecker, mergeRefs, useClassNames, KEY_VALUES } from '../utils';
 /**
  * The `<Input>` component is used to get user input in a text field.
+ *
  * @see https://rsuitejs.com/components/input
  */
 var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -25,6 +26,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inputRef = props.inputRef,
     id = props.id,
     size = props.size,
+    htmlSize = props.htmlSize,
     plaintext = props.plaintext,
     readOnly = props.readOnly,
     onPressEnter = props.onPressEnter,
@@ -32,17 +34,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onBlur = props.onBlur,
     onKeyDown = props.onKeyDown,
     onChange = props.onChange,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
-  var handleKeyDown = useCallback(function (event) {
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "as", "type", "disabled", "value", "defaultValue", "inputRef", "id", "size", "htmlSize", "plaintext", "readOnly", "onPressEnter", "onFocus", "onBlur", "onKeyDown", "onChange"]);
+  var handleKeyDown = function handleKeyDown(event) {
     if (event.key === KEY_VALUES.ENTER) {
       onPressEnter === null || onPressEnter === void 0 ? void 0 : onPressEnter(event);
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [onPressEnter, onKeyDown]);
-  var handleChange = useCallback(function (event) {
+  };
+  var handleChange = function handleChange(event) {
     var _event$target;
     onChange === null || onChange === void 0 ? void 0 : onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  }, [onChange]);
+  };
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
@@ -60,9 +62,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
-  var operable = !disabled && !readOnly;
+  var inputable = !disabled && !readOnly;
   var eventProps = {};
-  if (operable) {
+  if (inputable) {
     eventProps.onChange = handleChange;
     eventProps.onKeyDown = handleKeyDown;
     eventProps.onFocus = createChainedFunction(onFocus, inputGroupContext === null || inputGroupContext === void 0 ? void 0 : inputGroupContext.onFocus);
@@ -76,7 +78,8 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value: value,
     defaultValue: defaultValue,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    size: htmlSize
   }));
 });
 Input.displayName = 'Input';

package/esm/InputPicker/InputPicker.js

@@ -17,9 +17,9 @@ import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
 import Plaintext from '../Plaintext';
-import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
+import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, useEventCallback, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
 import InputSearch from './InputSearch';
@@ -109,11 +109,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (groupBy === valueKey || groupBy === labelKey) {
     throw Error('`groupBy` can not be equal to `valueKey` and `labelKey`');
   }
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var triggerRef = useRef(null);
   var inputRef = useRef();
-  var listRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    triggerRef = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list;
   var _useCustom = useCustom(['Picker', 'InputPicker'], overrideLocale),
     locale = _useCustom.locale;
   var _useClassNames = useClassNames(classPrefix),
@@ -142,34 +144,34 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
-  var cloneValue = useCallback(function () {
+  var cloneValue = function cloneValue() {
     return multi ? clone(value) || [] : value;
-  }, [multi, value]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
+  };
+  var handleClose = useEventCallback(function () {
+    var _triggerRef$current, _target$current, _target$current$focus;
     triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
 
     // 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);
-  }, []);
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);
+  });
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
       data: getAllDataAndCache(),
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onKeyDown = _useFocusItemValue.onKeyDown;
-  var handleSearchCallback = useCallback(function (searchKeyword, filteredData, event) {
+  var handleSearchCallback = useEventCallback(function (searchKeyword, filteredData, event) {
     var _filteredData$;
     // The first option after filtering is the focus.
     setFocusItemValue(disabledOptions ? searchKeyword : (filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]) || searchKeyword);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [disabledOptions, setFocusItemValue, valueKey, onSearch]);
+  });
 
   // Use search keywords to filter options.
   var _useSearch = useSearch(getAllData(), {
@@ -195,12 +197,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if ((_triggerRef$current2 = triggerRef.current) !== null && _triggerRef$current2 !== void 0 && _triggerRef$current2.root) {
       setMaxWidth(getWidth(triggerRef.current.root));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Update the position of the menu when the search keyword and value change
   useEffect(function () {
     var _triggerRef$current3, _triggerRef$current3$;
     (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
   var getDateItem = function getDateItem(value) {
     // Find active `MenuItem` by `value`
@@ -218,23 +222,23 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       itemNode: itemNode
     };
   };
-  var getInput = useCallback(function () {
+  var getInput = function getInput() {
     var _inputRef$current;
     return multi ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input : inputRef.current;
-  }, [inputRef, multi]);
-  var focusInput = useCallback(function () {
+  };
+  var focusInput = function focusInput() {
     var _getInput;
     return (_getInput = getInput()) === null || _getInput === void 0 ? void 0 : _getInput.focus();
-  }, [getInput]);
-  var blurInput = useCallback(function () {
+  };
+  var blurInput = function blurInput() {
     var _getInput2;
     return (_getInput2 = getInput()) === null || _getInput2 === void 0 ? void 0 : _getInput2.blur();
-  }, [getInput]);
+  };
 
   /**
    * Convert the string of the newly created option into an object.
    */
-  var createOption = useCallback(function (value) {
+  var createOption = function createOption(value) {
     var _ref2;
     if (groupBy) {
       var _ref;
@@ -245,11 +249,11 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return _ref2 = {
       create: true
     }, _ref2[valueKey] = value, _ref2[labelKey] = value, _ref2;
-  }, [groupBy, valueKey, labelKey, locale]);
-  var handleChange = useCallback(function (value, event) {
+  };
+  var handleChange = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleRemoveItemByTag = useCallback(function (tag, event) {
+  });
+  var handleRemoveItemByTag = useEventCallback(function (tag, event) {
     event.stopPropagation();
     var val = cloneValue();
     remove(val, function (itemVal) {
@@ -258,15 +262,15 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(val);
     handleChange(val, event);
     onTagRemove === null || onTagRemove === void 0 ? void 0 : onTagRemove(tag, event);
-  }, [cloneValue, setValue, handleChange, onTagRemove]);
-  var handleSelect = useCallback(function (value, item, event) {
+  });
+  var handleSelect = useEventCallback(function (value, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event);
     if (creatable && item.create) {
       delete item.create;
       onCreate === null || onCreate === void 0 ? void 0 : onCreate(value, item, event);
       setNewData(newData.concat(item));
     }
-  }, [creatable, newData, onSelect, onCreate]);
+  });
 
   /**
    * Callback triggered by single selection
@@ -274,14 +278,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param item
    * @param event
    */
-  var handleSelectItem = function handleSelectItem(value, item, event) {
+  var handleSelectItem = useEventCallback(function (value, item, event) {
     setValue(value);
     setFocusItemValue(value);
     resetSearch();
     handleSelect(value, item, event);
     handleChange(value, event);
     handleClose();
-  };
+  });
 
   /**
    * Callback triggered by multiple selection
@@ -290,7 +294,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * @param event
    * @param checked
    */
-  var handleCheckTag = function handleCheckTag(nextItemValue, item, event, checked) {
+  var handleCheckTag = useEventCallback(function (nextItemValue, item, event, checked) {
     var val = cloneValue();
     if (checked) {
       val.push(nextItemValue);
@@ -305,8 +309,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleSelect(val, item, event);
     handleChange(val, event);
     focusInput();
-  };
-  var handleTagKeyPress = useCallback(function (event) {
+  });
+  var handleTagKeyPress = useEventCallback(function (event) {
     // When composing, ignore the keypress event.
     if (event.nativeEvent.isComposing) {
       return;
@@ -342,8 +346,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     resetSearch();
     handleSelect(val, focusItem, event);
     handleChange(val, event);
-  }, [cloneValue, getAllData, focusItemValue, disabledItemValues, disabledOptions, setValue, resetSearch, handleSelect, handleChange, valueKey, createOption]);
-  var handleMenuItemKeyPress = useCallback(function (event) {
+  });
+  var handleMenuItemKeyPress = useEventCallback(function (event) {
     if (!focusItemValue || !controlledData) {
       return;
     }
@@ -372,19 +376,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     handleChange(focusItemValue, event);
     handleClose();
-  }, [setValue, disabledItemValues, controlledData, focusItemValue, valueKey, searchKeyword, handleClose, resetSearch, createOption, getAllData, handleChange, handleSelect]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
 
   /**
    * Remove the last item, after pressing the back key on the keyboard.
    * @param event
    */
-  var removeLastItem = useCallback(function (event) {
+  var removeLastItem = useEventCallback(function (event) {
     var target = event === null || event === void 0 ? void 0 : event.target;
     if ((target === null || target === void 0 ? void 0 : target.tagName) !== 'INPUT') {
       focusInput();
@@ -397,8 +395,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     val.pop();
     setValue(val);
     handleChange(val, event);
-  }, [setValue, focusInput, handleChange, cloneValue]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || searchKeyword !== '') {
       return;
     }
@@ -411,14 +409,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleChange(null, event);
     }
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-  }, [disabled, searchKeyword, setValue, setFocusItemValue, resetSearch, multi, onClean, handleChange]);
+  });
   var events = {
     onMenuPressBackspace: multi ? removeLastItem : handleClean,
     onMenuKeyDown: onKeyDown,
     onMenuPressEnter: undefined,
     onKeyDown: undefined
   };
-  var handleKeyPress = useCallback(function (event) {
+  var handleKeyPress = useEventCallback(function (event) {
     // When typing a space, create a tag.
     if (isOneOf('Space', trigger) && event.key === KEY_VALUES.SPACE) {
       handleTagKeyPress(event);
@@ -430,7 +428,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleTagKeyPress(event);
       event.preventDefault();
     }
-  }, [handleTagKeyPress, trigger]);
+  });
   if (multi) {
     if (isOneOf('Enter', trigger)) {
       events.onMenuPressEnter = handleTagKeyPress;
@@ -442,30 +440,30 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     events.onMenuPressEnter = handleMenuItemKeyPress;
   }
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef
+    trigger: triggerRef,
+    target: target,
+    overlay: overlay
   }, events, rest));
-  var handleExited = useCallback(function () {
+  var handleExited = useEventCallback(function () {
     setFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value);
     resetSearch();
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [setFocusItemValue, resetSearch, onClose, value, multi]);
-  var handleFocus = useCallback(function () {
+  });
+  var handleFocus = useEventCallback(function () {
     if (!readOnly) {
       var _triggerRef$current4;
       setOpen(true);
       (_triggerRef$current4 = triggerRef.current) === null || _triggerRef$current4 === void 0 ? void 0 : _triggerRef$current4.open();
     }
-  }, [readOnly]);
-  var handleEnter = useCallback(function () {
+  });
+  var handleEnter = useEventCallback(function () {
     focusInput();
     setOpen(true);
-  }, [focusInput]);
-  var handleExit = useCallback(function () {
+  });
+  var handleExit = useEventCallback(function () {
     blurInput();
     setOpen(false);
-  }, [blurInput]);
+  });
   var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     var newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform(locale.createOption, label)) : label;
@@ -547,13 +545,13 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     if (disabledOptions) {
       return /*#__PURE__*/React.createElement(PickerOverlay, {
-        ref: mergeRefs(overlayRef, speakerRef)
+        ref: mergeRefs(overlay, speakerRef)
       });
     }
     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,
@@ -581,7 +579,7 @@ var InputPicker = /*#__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,
@@ -634,7 +632,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return /*#__PURE__*/React.createElement(Plaintext, _extends({
       localeKey: "notSelected",
-      ref: targetRef
+      ref: target
     }, plaintextProps), itemNode || (tagElements !== null && tagElements !== void 0 && tagElements.length ? tagElements : null) || placeholder);
   }
   var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
@@ -652,13 +650,14 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes,
     style: style,
     onClick: focusInput,
-    onKeyDown: onPickerKeyDown
+    onKeyDown: onPickerKeyDown,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
-    ref: targetRef,
+    ref: target,
     as: toggleAs,
     tabIndex: tabIndex,
     onClean: handleClean,