rsuite 5.49.0 → 5.50.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [5.50.0](https://github.com/rsuite/rsuite/compare/v5.49.0...v5.50.0) (2024-01-12)
+
+### Bug Fixes
+
+- typo in Next.js guide ([#3555](https://github.com/rsuite/rsuite/issues/3555)) ([77d60cf](https://github.com/rsuite/rsuite/commit/77d60cfeb27e3e52b4003d72114e5164b275a3d2))
+
+### Features
+
+- **cra:** supports using CRA to install javascript template ([#3538](https://github.com/rsuite/rsuite/issues/3538)) ([1b697f4](https://github.com/rsuite/rsuite/commit/1b697f4a4f61a7943351c5ca0f46a484c9ea1ac6))
+- **cra:** supports using CRA to install typescript template ([#3540](https://github.com/rsuite/rsuite/issues/3540)) ([bbe3609](https://github.com/rsuite/rsuite/commit/bbe3609d4492e9186e32309f6c6ee6101d5eb83c))
+- **DateRangePicker:** supports date selection by using keyboard ([#3554](https://github.com/rsuite/rsuite/issues/3554)) ([2c8d197](https://github.com/rsuite/rsuite/commit/2c8d1974e018903b3a1b874566b31c751d207493))
+- **FormControl:** added support for `name` setting path of object ([#3511](https://github.com/rsuite/rsuite/issues/3511)) ([03d5396](https://github.com/rsuite/rsuite/commit/03d5396b8a23d88907be9d1864776d61a0a3b963))
+
 # [5.49.0](https://github.com/rsuite/rsuite/compare/v5.48.1...v5.49.0) (2023-12-29)
 
 ### Bug Fixes

package/Cascader/styles/index.less

@@ -1,6 +1,6 @@
-@import '../../styles/common';
-@import '../../Dropdown/styles/mixin';
-@import '../../styles/mixins/listbox';
+@import '../../styles/common.less';
+@import '../../styles/mixins/combobox.less';
+@import '../../styles/mixins/listbox.less';
 
 // Cascader
 // ----------------------
@@ -123,5 +123,5 @@
 }
 
 .rs-picker-cascader-menu-caret {
-  .dropdown-toggle-caret-common();
+  .combobox-indicator-icon();
 }

package/DateRangePicker/styles/index.less

@@ -4,14 +4,24 @@
 @import '../../DatePicker/styles/index';
 @import '../../Calendar/styles/index';
 
-// Change the <caret/> & <clean/> vertical position make it align middle.
 .rs-picker-daterange {
-  &.rs-picker-default {
-    .rs-picker-toggle-caret,
-    .rs-picker-toggle-clean {
-      top: @padding-y - @picker-default-toggle-border-width;
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &.rs-picker-subtle {
+    .rs-input-group {
+      border-color: transparent;
     }
   }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-right: 0;
+  }
 }
 
 // Date range Picker

package/Dropdown/styles/index.less

@@ -1,6 +1,7 @@
-@import '../../styles/common';
-@import '../../styles/mixins/menu';
-@import 'mixin';
+@import '../../styles/common.less';
+@import '../../styles/mixins/menu.less';
+@import '../../styles/mixins/combobox.less';
+@import 'mixin.less';
 @import '../../Button/styles/index.less';
 
 //
@@ -8,7 +9,7 @@
 // --------------------------------------------------
 
 .rs-dropdown-toggle-caret {
-  .dropdown-toggle-caret-common();
+  .combobox-indicator-icon();
 }
 
 // The dropdown wrapper (div)

package/Dropdown/styles/mixin.less

@@ -1,14 +1,3 @@
-.dropdown-toggle-caret-common(@right:@padding-x) {
-  display: flex;
-  align-items: center;
-  margin-left: 2px;
-  position: absolute;
-  top: @padding-y;
-  right: @right;
-  height: @line-height-computed;
-  font-size: 12px;
-}
-
 .dropdown-toggle-caret-size(@vertical,@horizontal,@caret-size) {
   padding-right: @horizontal+ @dropdown-caret-width+ @dropdown-caret-padding !important;
 

package/Picker/styles/index.less

@@ -1,8 +1,9 @@
-@import '../../styles/common';
-@import '../../styles/mixins/listbox';
-@import (reference) '../../Button/styles/index';
-@import '../../Form/styles/mixin';
-@import 'mixin';
+@import '../../styles/common.less';
+@import '../../styles/mixins/listbox.less';
+@import '../../styles/mixins/combobox.less';
+@import (reference) '../../Button/styles/index.less';
+@import '../../Form/styles/mixin.less';
+@import 'mixin.less';
 
 //
 // Pickers
@@ -252,31 +253,37 @@
   }
 }
 
-// Picker clear button
-.rs-picker-toggle-clean {
-  .dropdown-toggle-caret-common(@picker-toggle-clean-right);
+.rs-picker-toggle-indicator {
+  // Picker clear button
+  .rs-picker-clean {
+    .combobox-indicator-icon(@picker-toggle-clean-right);
 
-  background: inherit;
-  color: var(--rs-text-secondary);
-  transition: 0.2s color linear;
-  cursor: pointer;
+    background: inherit;
+    color: var(--rs-text-secondary);
+    transition: 0.2s color linear;
+    cursor: pointer;
 
-  &.rs-btn-close {
-    padding: 4px 0;
-  }
+    &.rs-btn-close {
+      padding: 4px 0;
+    }
 
-  .rs-@{date-picker-prefix} &,
-  .rs-@{date-range-picker-prefix} & {
-    right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
+    .rs-@{date-picker-prefix} &,
+    .rs-@{date-range-picker-prefix} & {
+      right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
+    }
   }
-}
 
-// Picker toggle caret
-.rs-picker-toggle-caret {
-  // Extend  Dropdown toggle caret style
-  .dropdown-toggle-caret-common();
+  // Picker toggle caret
+  .rs-picker-caret-icon {
+    // Extend  Dropdown toggle caret style
+    .combobox-indicator-icon();
 
-  color: var(--rs-text-secondary);
+    color: var(--rs-text-secondary);
+  }
+
+  .rs-picker-loader {
+    .combobox-indicator-icon();
+  }
 }
 
 // Picker Menu

package/Picker/styles/mixin.less

@@ -103,13 +103,15 @@
     padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
   }
 
-  .rs-picker-toggle-caret,
-  .rs-picker-toggle-clean {
-    top: @padding-vertical;
-    right: @padding-horizontal;
-
-    .rs-picker-default & {
-      top: @padding-vertical - @picker-default-toggle-border-width;
+  .rs-picker-toggle-indicator {
+    .rs-picker-caret-icon,
+    .rs-picker-clean {
+      top: @padding-vertical;
+      right: @padding-horizontal;
+
+      .rs-picker-default & {
+        top: @padding-vertical - @picker-default-toggle-border-width;
+      }
     }
   }
 }
@@ -144,13 +146,15 @@
 
   padding-right: (@padding-horizontal + @calendar-caret-width + @dropdown-caret-padding);
 
-  .rs-picker-toggle-clean,
-  .rs-picker-toggle-caret {
-    top: @top;
-    right: @padding-horizontal;
+  .rs-picker-toggle-indicator {
+    .rs-picker-clean,
+    .rs-picker-caret-icon {
+      top: @top;
+      right: @padding-horizontal;
 
-    .rs-picker-subtle & {
-      top: @top - @picker-default-toggle-border-width;
+      .rs-picker-subtle & {
+        top: @top - @picker-default-toggle-border-width;
+      }
     }
   }
 }

package/README.md

@@ -96,8 +96,8 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Use in Electron][demo-electron]
 - [Use in Flow][demo-flow-app]
 - [Use in TypeScript][demo-typescript-app]
-- [Use in Next.js][demo-nextjs]
-- [Use in Next.js and Typescript][demo-nextjs-typescript]
+- [Use in Next.js (App)][demo-nextjs-app]
+- [Use in Next.js (Pages)][demo-nextjs-pages]
 - [Use in UmiJS][demo-umi-app]
 - [Use in Snowpack][demo-snowpack]
 - [Use in Vite][demo-vite]
@@ -186,11 +186,11 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/main/examples/custom-multiple-themes
 [demo-flow-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-flow
 [demo-typescript-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-typescript
-[demo-nextjs]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs
+[demo-nextjs-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-app
+[demo-nextjs-pages]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-pages
 [demo-umi-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-umi
 [demo-rtlcss]: https://github.com/rsuite/rsuite/tree/main/examples/with-rtlcss
 [demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/main/examples/with-postcss-rtl
-[demo-nextjs-typescript]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-typescript
 [demo-snowpack]: https://github.com/rsuite/rsuite/tree/main/examples/with-snowpack
 [demo-vite]: https://github.com/rsuite/rsuite/tree/main/examples/with-vite
 [codecov]: https://codecov.io/gh/rsuite/rsuite

package/TagInput/styles/index.less

@@ -7,7 +7,7 @@
   .rs-picker-tag-wrapper {
     margin-right: @dropdown-toggle-padding-right !important;
   }
-  .rs-picker-toggle-clean {
+  .rs-picker-clean {
     right: (@dropdown-toggle-padding-right / 2 - 6) !important;
   }
 }

package/cjs/AutoComplete/AutoComplete.js

@@ -69,7 +69,10 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setFocus = _useState[1];
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    overlay = _usePickerRef.overlay,
+    root = _usePickerRef.root;
   var isMounted = (0, _utils.useIsMounted)();
 
   // Used to hover the focuse item  when trigger `onKeydown`
@@ -77,14 +80,14 @@ var AutoComplete = /*#__PURE__*/_react.default.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;
     }
     (0, _Picker.onMenuKeyDown)(event, {
@@ -109,29 +112,29 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   };
-  var handleSelect = (0, _react.useCallback)(function (item, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
-  }, [onSelect]);
-  var handleChangeValue = (0, _react.useCallback)(function (value, event) {
+  });
+  var handleChangeValue = (0, _utils.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 = (0, _react.useCallback)(function () {
+  var handleClose = (0, _utils.useEventCallback)(function () {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
-  }, [isMounted, onClose]);
-  var handleOpen = (0, _react.useCallback)(function () {
+  });
+  var handleOpen = (0, _utils.useEventCallback)(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -139,29 +142,24 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       handleChangeValue(nextItemValue, event);
     }
     handleClose();
-  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);
-  var handleInputFocus = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputFocus = (0, _utils.useEventCallback)(function (event) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleOpen();
-  }, [onFocus, handleOpen]);
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputBlur = (0, _utils.useEventCallback)(function (event) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  }, [onBlur, handleClose]);
+  });
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = (0, _react.useRef)(null);
   var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys)),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef
-  });
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -182,11 +180,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: menuClassName
     });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       className: className,
       onKeyDown: handleKeyDownEvent,
-      target: triggerRef,
+      target: trigger,
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
@@ -197,7 +195,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     trigger: ['click', 'focus'],
@@ -205,7 +203,8 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, restProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
     id: id,
     disabled: disabled,

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

@@ -82,10 +82,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useState = (0, _react.useState)(false),
     active = _useState[0],
     setActive = _useState[1];
-  var triggerRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _ref = (0, _utils2.useControlled)(valueProp, defaultValue),
     value = _ref[0],
     setValue = _ref[1];
@@ -126,11 +128,6 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     columnsToDisplay = _usePaths.columnsToDisplay,
     pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,
     pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
   var _useCustom = (0, _utils2.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -145,7 +142,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useState3 = (0, _react.useState)(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var someKeyword = (0, _react.useCallback)(function (item, keyword) {
+  var someKeyword = function someKeyword(item, keyword) {
     if (item[labelKey].match(new RegExp((0, _utils2.getSafeRegExpString)(keyword || searchKeyword), 'i'))) {
       return true;
     }
@@ -154,8 +151,8 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return true;
     }
     return false;
-  }, [labelKey, parentMap, searchKeyword]);
-  var getSearchResult = (0, _react.useCallback)(function (keyword) {
+  };
+  var getSearchResult = function getSearchResult(keyword) {
     var items = [];
     var result = flattenedData.filter(function (item) {
       if (!parentSelectable && item[childrenKey]) {
@@ -172,7 +169,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     }
     return items;
-  }, [childrenKey, flattenedData, someKeyword, parentSelectable]);
+  };
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
@@ -181,7 +178,7 @@ var Cascader = /*#__PURE__*/_react.default.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);
@@ -197,7 +194,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setLayer = _useFocusItemValue.setLayer,
     setKeys = _useFocusItemValue.setKeys,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  var handleSearch = (0, _react.useCallback)(function (value, event) {
+  var handleSearch = (0, _utils2.useEventCallback)(function (value, event) {
     var items = getSearchResult(value);
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
@@ -210,37 +207,37 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setLayer(0);
       setKeys([]);
     }
-  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
-  var handleEntered = (0, _react.useCallback)(function () {
-    if (!targetRef.current) {
+  });
+  var handleEntered = (0, _utils2.useEventCallback)(function () {
+    if (!target.current) {
       return;
     }
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
-    if (!targetRef.current) {
+  });
+  var handleExited = (0, _utils2.useEventCallback)(function () {
+    if (!target.current) {
       return;
     }
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
-  }, [onClose]);
-  var handleClose = (0, _react.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 = (0, _utils2.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 = (0, _react.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 = (0, _utils2.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 = (0, _react.useCallback)(function (event) {
+  });
+  var handleMenuPressEnter = (0, _utils2.useEventCallback)(function (event) {
     var focusItem = (0, _treeUtils.findNodeOfTree)(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
@@ -256,20 +253,20 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
       handleClose();
     }
-  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey, onSelect]);
+  });
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends3.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,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
-    var _node$childrenKey, _triggerRef$current2;
+  var handleSelect = (0, _utils2.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];
@@ -307,20 +304,20 @@ var Cascader = /*#__PURE__*/_react.default.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 = (0, _utils2.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((0, _utils2.getSafeRegExpString)(searchKeyword), 'ig');
     var nodes = (0, _treeUtils.getPathTowardsItem)(item, function (item) {
@@ -397,16 +394,16 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       inline: inline
     }));
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils2.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, 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
     }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
       id: id ? id + "-listbox" : undefined,
       menuWidth: menuWidth,
@@ -465,17 +462,18 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils2.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, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,

package/cjs/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>>;