rsuite 5.48.1 → 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

@@ -6,6 +6,8 @@ import { CalendarState } from './useCalendarState';
 export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
     /** The panel render based on date range */
     dateRange?: Date[];
+    /** The Id of the target element that triggers the opening of the calendar */
+    targetId?: string;
     /** Date displayed on the current page */
     calendarDate: Date;
     /** Whether to show week numbers */
@@ -30,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/Calendar/CalendarContainer.js

@@ -9,7 +9,7 @@ import TimeDropdown from './TimeDropdown';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
 import { useClassNames } from '../utils';
-import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps } from '../utils/dateUtils';
+import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
 import { CalendarProvider } from './CalendarContext';
 import useCalendarState, { CalendarState } from './useCalendarState';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
@@ -28,6 +28,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hoverRangeValue = props.hoverRangeValue,
     _props$isoWeek = props.isoWeek,
     isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
+    targetId = props.targetId,
     limitEndYear = props.limitEndYear,
     limitStartYear = props.limitStartYear,
     locale = props.locale,
@@ -40,7 +41,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    calendarDate = props.calendarDate,
+    calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
     renderTitle = props.renderTitle,
@@ -48,7 +49,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -58,6 +59,9 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     reset = _useCalendarState.reset,
     openMonth = _useCalendarState.openMonth,
     openTime = _useCalendarState.openTime;
+  var calendarDate = useMemo(function () {
+    return isValid(calendarDateProp) ? calendarDateProp : new Date();
+  }, [calendarDateProp]);
   var isDisabledDate = useCallback(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
@@ -123,6 +127,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hoverRangeValue: hoverRangeValue,
       inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
+      targetId: targetId,
       locale: locale,
       onChangeMonth: handleChangeMonth,
       onChangeTime: onChangeTime,
@@ -133,10 +138,12 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, targetId, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, omitHideDisabledProps(rest), {
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    "data-testid": "calendar"
+  }, omitHideDisabledProps(rest), {
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/React.createElement(CalendarHeader, {

package/esm/Calendar/CalendarHeader.js

@@ -122,6 +122,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/React.createElement("div", {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
+    "aria-label": "Select time",
     className: timeTitleClasses,
     onClick: onToggleTimeDropdown,
     disabled: disableSelectTime
@@ -129,6 +130,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
+    "aria-label": "Toggle meridian",
     className: prefix('meridian'),
     onClick: onToggleMeridian,
     disabled: disableSelectTime

package/esm/Calendar/MonthDropdown.js

@@ -35,7 +35,8 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"]);
   var _useCalendarContext = useCalendarContext(),
     _useCalendarContext$d = _useCalendarContext.date,
-    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d;
+    date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
+    targetId = _useCalendarContext.targetId;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -69,6 +70,7 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: rowClassName,
       role: "row",
+      "aria-label": "" + year,
       style: style
     }, /*#__PURE__*/React.createElement("div", {
       className: titleClassName,
@@ -92,7 +94,10 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var initialItemIndex = DateUtils.getYear(date) - startYear;
   var initialScrollOffset = itemSize * initialItemIndex;
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "menu"
+    role: "grid",
+    "aria-label": "Select month",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/esm/Calendar/MonthDropdownItem.js

@@ -55,8 +55,8 @@ var MonthDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({
     key: month,
     role: "gridcell",
-    "aria-selected": active ? true : undefined,
-    "aria-disabled": disabled ? true : undefined,
+    "aria-selected": active,
+    "aria-disabled": disabled,
     "aria-label": ariaLabel,
     tabIndex: active ? 0 : -1,
     ref: ref,

package/esm/Calendar/Table.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import TableRow from './TableRow';
 import TableHeaderRow from './TableHeaderRow';
 import { useClassNames } from '../utils';
+import { useCalendarContext } from './CalendarContext';
 var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -19,8 +20,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix());
+  var _useCalendarContext = useCalendarContext(),
+    targetId = _useCalendarContext.targetId;
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "grid"
+    role: "grid",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/esm/Calendar/TimeDropdown.js

@@ -90,7 +90,8 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     locale = _useCalendarContext.locale,
     format = _useCalendarContext.format,
     date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeTime;
+    onSelect = _useCalendarContext.onChangeTime,
+    targetId = _useCalendarContext.targetId;
   var rowRef = useRef(null);
   useEffect(function () {
     var time = getTime({
@@ -141,24 +142,26 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         });
         items.push( /*#__PURE__*/React.createElement("li", {
           key: i,
-          role: "menuitem"
-        }, /*#__PURE__*/React.createElement("a", {
-          role: "button",
-          className: itemClasses,
+          role: "option",
           tabIndex: -1,
+          "aria-label": i + " " + type,
+          "aria-selected": active === i,
+          "aria-disabled": disabled,
           "data-key": type + "-" + i,
           onClick: !disabled ? partial(handleClick, type, i) : undefined
+        }, /*#__PURE__*/React.createElement("span", {
+          className: itemClasses
         }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
       }
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: prefix('column'),
-      role: "listitem"
+      className: prefix('column')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('column-title')
     }, locale === null || locale === void 0 ? void 0 : locale[type]), /*#__PURE__*/React.createElement("ul", {
       "data-type": type,
-      role: "menu"
+      role: "listbox",
+      "aria-label": "Select " + type
     }, items));
   };
   var time = getTime({
@@ -166,9 +169,13 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     date: date,
     showMeridian: showMeridian
   });
-  var classes = merge(className, rootPrefix(classPrefix));
+  var classes = merge(className, rootPrefix(classPrefix), {
+    show: show
+  });
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "list"
+    role: "group",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, DateUtils.omitHideDisabledProps(rest), {
     ref: ref,
     className: classes

package/esm/Calendar/types.d.ts

@@ -16,6 +16,7 @@ export interface CalendarInnerContextValue {
     cellClassName?: (date: Date) => string | undefined;
     showWeekNumbers?: boolean;
     inline?: boolean;
+    targetId?: string;
 }
 export interface CalendarContextValue extends CalendarInnerContextValue {
     locale: CalendarLocale;

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,