rsuite 5.49.0 → 5.50.0

package/esm/AutoComplete/AutoComplete.js

@@ -1,14 +1,14 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import Input from '../Input';
-import { useClassNames, useControlled, PLACEMENT, mergeRefs, useIsMounted, partitionHTMLProps } from '../utils';
+import { useClassNames, useControlled, useIsMounted, useEventCallback, PLACEMENT, mergeRefs, partitionHTMLProps } from '../utils';
 import { animationPropTypes } from '../Animation/utils';
-import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePublicMethods, pickTriggerPropKeys } from '../Picker';
+import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
 import Plaintext from '../Plaintext';
 /**
@@ -63,7 +63,10 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocus = _useState[1];
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter(shouldDisplay(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    overlay = _usePickerRef.overlay,
+    root = _usePickerRef.root;
   var isMounted = useIsMounted();
 
   // Used to hover the focuse item  when trigger `onKeydown`
@@ -71,14 +74,14 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: datalist,
       callback: onMenuFocus,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     handleKeyDown = _useFocusItemValue.onKeyDown;
   var handleKeyDownEvent = function handleKeyDownEvent(event) {
-    if (!overlayRef.current) {
+    if (!overlay.current) {
       return;
     }
     onMenuKeyDown(event, {
@@ -103,29 +106,29 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     handleClose();
   };
-  var handleSelect = useCallback(function (item, event) {
+  var handleSelect = useEventCallback(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
-  }, [onSelect]);
-  var handleChangeValue = useCallback(function (value, event) {
+  });
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
+  });
   var handleChange = function handleChange(value, event) {
     setFocusItemValue('');
     setValue(value);
     setFocus(true);
     handleChangeValue(value, event);
   };
-  var handleClose = useCallback(function () {
+  var handleClose = useEventCallback(function () {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
-  }, [isMounted, onClose]);
-  var handleOpen = useCallback(function () {
+  });
+  var handleOpen = useEventCallback(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleItemSelect = useCallback(function (nextItemValue, item, event) {
+  });
+  var handleItemSelect = useEventCallback(function (nextItemValue, item, event) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -133,29 +136,24 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleChangeValue(nextItemValue, event);
     }
     handleClose();
-  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);
-  var handleInputFocus = useCallback(function (event) {
+  });
+  var handleInputFocus = useEventCallback(function (event) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleOpen();
-  }, [onFocus, handleOpen]);
-  var handleInputBlur = useCallback(function (event) {
+  });
+  var handleInputBlur = useEventCallback(function (event) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  }, [onBlur, handleClose]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = useRef(null);
   var _partitionHTMLProps = partitionHTMLProps(omit(rest, pickTriggerPropKeys)),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef
-  });
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -176,11 +174,11 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: menuClassName
     });
     return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       style: styles,
       className: className,
       onKeyDown: handleKeyDownEvent,
-      target: triggerRef,
+      target: trigger,
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
@@ -191,7 +189,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     pickerProps: pick(props, pickTriggerPropKeys),
     trigger: ['click', 'focus'],
@@ -199,7 +197,8 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speaker: renderDropdownMenu
   }, /*#__PURE__*/React.createElement(Component, _extends({
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, restProps), /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
     id: id,
     disabled: disabled,

package/esm/Calendar/Calendar.d.ts

@@ -7,7 +7,11 @@ export interface CalendarProps extends WithAsProps {
     value?: Date;
     /** Default value  */
     defaultValue?: Date;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Display a compact calendar   */
     compact?: boolean;

package/esm/Calendar/CalendarContainer.d.ts

@@ -32,7 +32,11 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     hideSeconds?: (second: number, date: Date) => boolean;
     /** The value that mouse hover on in range selection */
     hoverRangeValue?: [Date, Date];
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Limit showing how many years in the future */
     limitEndYear?: number;

package/esm/Cascader/Cascader.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, { useRef, useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useSet } from 'react-use-set';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -12,8 +12,8 @@ import shallowEqual from '../utils/shallowEqual';
 import DropdownMenu from './DropdownMenu';
 import { getParentMap, getPathTowardsItem, findNodeOfTree, flattenTree } from '../utils/treeUtils';
 import { usePaths } from './utils';
-import { getSafeRegExpString, createChainedFunction, mergeRefs, useControlled, useCustom, useClassNames, useIsMounted } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { getSafeRegExpString, createChainedFunction, mergeRefs, useControlled, useCustom, useClassNames, useIsMounted, useEventCallback } from '../utils';
+import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { useMap } from '../utils/useMap';
 var emptyArray = [];
 
@@ -76,10 +76,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
-  var triggerRef = useRef(null);
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var searchInputRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _ref = useControlled(valueProp, defaultValue),
     value = _ref[0],
     setValue = _ref[1];
@@ -120,11 +122,6 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     columnsToDisplay = _usePaths.columnsToDisplay,
     pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,
     pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -139,7 +136,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState3 = useState(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var someKeyword = useCallback(function (item, keyword) {
+  var someKeyword = function someKeyword(item, keyword) {
     if (item[labelKey].match(new RegExp(getSafeRegExpString(keyword || searchKeyword), 'i'))) {
       return true;
     }
@@ -148,8 +145,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return true;
     }
     return false;
-  }, [labelKey, parentMap, searchKeyword]);
-  var getSearchResult = useCallback(function (keyword) {
+  };
+  var getSearchResult = function getSearchResult(keyword) {
     var items = [];
     var result = flattenedData.filter(function (item) {
       if (!parentSelectable && item[childrenKey]) {
@@ -166,7 +163,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     return items;
-  }, [childrenKey, flattenedData, someKeyword, parentSelectable]);
+  };
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
@@ -175,7 +172,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueKey: valueKey,
       defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       },
       getParent: function getParent(item) {
         return parentMap.get(item);
@@ -191,7 +188,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setLayer = _useFocusItemValue.setLayer,
     setKeys = _useFocusItemValue.setKeys,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  var handleSearch = useCallback(function (value, event) {
+  var handleSearch = useEventCallback(function (value, event) {
     var items = getSearchResult(value);
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
@@ -204,37 +201,37 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setLayer(0);
       setKeys([]);
     }
-  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
-  var handleEntered = useCallback(function () {
-    if (!targetRef.current) {
+  });
+  var handleEntered = useEventCallback(function () {
+    if (!target.current) {
       return;
     }
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
-    if (!targetRef.current) {
+  });
+  var handleExited = useEventCallback(function () {
+    if (!target.current) {
       return;
     }
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
-  }, [onClose]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
+  });
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _target$current, _target$current$focus;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$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);
-  }, []);
-  var handleClean = useCallback(function (event) {
-    if (disabled || !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);
+  });
+  var handleClean = useEventCallback(function (event) {
+    if (disabled || !target.current) {
       return;
     }
     setValue(null);
     onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
-  }, [disabled, onChange, setValue]);
-  var handleMenuPressEnter = useCallback(function (event) {
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
     var focusItem = findNodeOfTree(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
@@ -250,20 +247,20 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
       handleClose();
     }
-  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey, onSelect]);
+  });
   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,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
-    var _node$childrenKey, _triggerRef$current2;
+  var handleSelect = useEventCallback(function (node, cascadePaths, isLeafNode, event) {
+    var _node$childrenKey, _trigger$current2;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
     setActiveItem(node);
     var nextValue = node[valueKey];
@@ -301,20 +298,20 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     // Update menu position
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.updatePosition();
-  };
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.updatePosition();
+  });
 
   /**
    * The search structure option is processed after being selected.
    */
-  var handleSearchRowSelect = function handleSearchRowSelect(node, nodes, event) {
+  var handleSearchRowSelect = useEventCallback(function (node, nodes, event) {
     var nextValue = node[valueKey];
     handleClose();
     setSearchKeyword('');
     setValue(nextValue);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  };
+  });
   var renderSearchRow = function renderSearchRow(item, key) {
     var regx = new RegExp(getSafeRegExpString(searchKeyword), 'ig');
     var nodes = getPathTowardsItem(item, function (item) {
@@ -391,16 +388,16 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inline: inline
     }));
     return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+      ref: mergeRefs(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       menuWidth: menuWidth,
@@ -459,17 +456,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEnter),
     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,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,

package/esm/CheckPicker/CheckPicker.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 { ItemDataType, FormControlPickerProps } from '../@types/common';
@@ -12,7 +12,7 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
 }
 export interface CheckPickerComponent {
     <T>(props: CheckPickerProps<T> & {
-        ref?: Ref<PickerHandle>;
+        ref?: React.Ref<PickerHandle>;
     }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;

package/esm/CheckPicker/CheckPicker.js

@@ -3,7 +3,7 @@ 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 clone from 'lodash/clone';
 import isUndefined from 'lodash/isUndefined';
@@ -13,9 +13,9 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import { filterNodesOfTree } from '../utils/treeUtils';
-import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, mergeRefs } from '../utils';
+import { createChainedFunction, useClassNames, shallowEqual, useCustom, useControlled, useEventCallback, mergeRefs } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePublicMethods, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { DropdownMenu, DropdownMenuCheckItem as DropdownMenuItem, PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 /**
  * A component for selecting checkable items in a dropdown list.
@@ -80,11 +80,13 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClose = props.onClose,
     onOpen = props.onOpen,
     rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onClose", "onOpen"]);
-  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 _useControlled = useControlled(valueProp, defaultValue || []),
@@ -94,18 +96,18 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       data: data,
       valueKey: valueKey,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     onFocusItem = _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(filteredData === null || filteredData === void 0 ? void 0 : (_filteredData$ = filteredData[0]) === null || _filteredData$ === void 0 ? void 0 : _filteredData$[valueKey]);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKeyword, event);
-  }, [setFocusItemValue, onSearch, valueKey]);
+  });
 
   // Use search keywords to filter options.
   var _useSearch = useSearch(data, {
@@ -139,17 +141,17 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setStickyItems(nextStickyItems);
   };
-  var handleChangeValue = useCallback(function (value, event) {
+  var handleChangeValue = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
-  var handleClean = useCallback(function (event) {
+  });
+  var handleClean = useEventCallback(function (event) {
     if (disabled || !cleanable) {
       return;
     }
     setValue([]);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
     handleChangeValue([], event);
-  }, [disabled, cleanable, setValue, onClean, handleChangeValue]);
+  });
   var handleMenuPressEnter = function handleMenuPressEnter(event) {
     var nextValue = clone(value);
     if (!focusItemValue) {
@@ -173,10 +175,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   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,
@@ -186,10 +188,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleSelect = useCallback(function (nextItemValue, item, event) {
+  var handleSelect = useEventCallback(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
-  }, [onSelect]);
-  var handleItemSelect = useCallback(function (nextItemValue, item, event, checked) {
+  });
+  var handleItemSelect = useEventCallback(function (nextItemValue, item, event, checked) {
     var nextValue = clone(value);
     if (checked) {
       nextValue.push(nextItemValue);
@@ -202,22 +204,16 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
-  }, [value, setValue, handleSelect, handleChangeValue, setFocusItemValue]);
-  var handleEntered = useCallback(function () {
+  });
+  var handleEntered = useEventCallback(function () {
     setActive(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
+  });
+  var handleExited = useEventCallback(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, resetSearch]);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    listRef: listRef
   });
   var selectedItems = data.filter(function (item) {
     return value === null || value === void 0 ? void 0 : value.some(function (val) {
@@ -281,7 +277,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -304,17 +300,17 @@ var CheckPicker = /*#__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, {
@@ -329,7 +325,7 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(initStickyItems, onEnter),
     onEntered: createChainedFunction(handleEntered, onEntered),
@@ -337,10 +333,11 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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,
     disabled: disabled,
     onClean: handleClean,