rsuite 5.48.1 → 5.50.0

package/cjs/Calendar/CalendarContainer.js

@@ -34,6 +34,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     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,
@@ -46,7 +47,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    calendarDate = props.calendarDate,
+    calendarDateProp = props.calendarDate,
     cellClassName = props.cellClassName,
     renderCell = props.renderCell,
     renderTitle = props.renderTitle,
@@ -54,7 +55,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     showMeridian = props.showMeridian,
     showWeekNumbers = props.showWeekNumbers,
     inline = props.inline,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -64,6 +65,9 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     reset = _useCalendarState.reset,
     openMonth = _useCalendarState.openMonth,
     openTime = _useCalendarState.openTime;
+  var calendarDate = (0, _react.useMemo)(function () {
+    return (0, _dateUtils.isValid)(calendarDateProp) ? calendarDateProp : new Date();
+  }, [calendarDateProp]);
   var isDisabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
@@ -129,6 +133,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       hoverRangeValue: hoverRangeValue,
       inSameMonth: inSameThisMonthDate,
       isoWeek: isoWeek,
+      targetId: targetId,
       locale: locale,
       onChangeMonth: handleChangeMonth,
       onChangeTime: onChangeTime,
@@ -139,10 +144,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    "data-testid": "calendar"
+  }, (0, _dateUtils.omitHideDisabledProps)(rest), {
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_CalendarHeader.default, {

package/cjs/Calendar/CalendarHeader.js

@@ -128,6 +128,7 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Select time",
     className: timeTitleClasses,
     onClick: onToggleTimeDropdown,
     disabled: disableSelectTime
@@ -135,6 +136,7 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
+    "aria-label": "Toggle meridian",
     className: prefix('meridian'),
     onClick: onToggleMeridian,
     disabled: disableSelectTime

package/cjs/Calendar/MonthDropdown.js

@@ -42,7 +42,8 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"]);
   var _useCalendarContext = (0, _CalendarContext.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 = (0, _utils.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -76,6 +77,7 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement("div", {
       className: rowClassName,
       role: "row",
+      "aria-label": "" + year,
       style: style
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: titleClassName,
@@ -99,7 +101,10 @@ var MonthDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var initialItemIndex = _utils.DateUtils.getYear(date) - startYear;
   var initialScrollOffset = itemSize * initialItemIndex;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "menu"
+    role: "grid",
+    "aria-label": "Select month",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/MonthDropdownItem.js

@@ -61,8 +61,8 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     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/cjs/Calendar/Table.js

@@ -11,6 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TableRow = _interopRequireDefault(require("./TableRow"));
 var _TableHeaderRow = _interopRequireDefault(require("./TableHeaderRow"));
 var _utils = require("../utils");
+var _CalendarContext = require("./CalendarContext");
 var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -24,8 +25,12 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix());
+  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
+    targetId = _useCalendarContext.targetId;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "grid"
+    role: "grid",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/TimeDropdown.js

@@ -98,7 +98,8 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     locale = _useCalendarContext.locale,
     format = _useCalendarContext.format,
     date = _useCalendarContext.date,
-    onSelect = _useCalendarContext.onChangeTime;
+    onSelect = _useCalendarContext.onChangeTime,
+    targetId = _useCalendarContext.targetId;
   var rowRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var time = getTime({
@@ -149,24 +150,26 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         });
         items.push( /*#__PURE__*/_react.default.createElement("li", {
           key: i,
-          role: "menuitem"
-        }, /*#__PURE__*/_react.default.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 ? (0, _partial.default)(handleClick, type, i) : undefined
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: itemClasses
         }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
       }
     }
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('column'),
-      role: "listitem"
+      className: prefix('column')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('column-title')
     }, locale === null || locale === void 0 ? void 0 : locale[type]), /*#__PURE__*/_react.default.createElement("ul", {
       "data-type": type,
-      role: "menu"
+      role: "listbox",
+      "aria-label": "Select " + type
     }, items));
   };
   var time = getTime({
@@ -174,9 +177,13 @@ var TimeDropdown = /*#__PURE__*/_react.default.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.default.createElement(Component, (0, _extends2.default)({
-    role: "list"
+    role: "group",
+    tabIndex: -1,
+    id: targetId ? targetId + "-" + classPrefix : undefined
   }, _utils.DateUtils.omitHideDisabledProps(rest), {
     ref: ref,
     className: classes

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

package/cjs/CheckPicker/CheckPicker.js

@@ -86,11 +86,13 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClose = props.onClose,
     onOpen = props.onOpen,
     rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var searchInputRef = (0, _react.useRef)(null);
-  var listRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    list = _usePickerRef.list,
+    searchInput = _usePickerRef.searchInput;
   var _useCustom = (0, _utils.useCustom)('Picker', overrideLocale),
     locale = _useCustom.locale;
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue || []),
@@ -100,18 +102,18 @@ var CheckPicker = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(function (searchKeyword, filteredData, event) {
+  var handleSearchCallback = (0, _utils.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 = (0, _Picker.useSearch)(data, {
@@ -145,17 +147,17 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     setStickyItems(nextStickyItems);
   };
-  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 handleClean = (0, _react.useCallback)(function (event) {
+  });
+  var handleClean = (0, _utils.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 = (0, _clone.default)(value);
     if (!focusItemValue) {
@@ -179,10 +181,10 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   };
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
@@ -192,10 +194,10 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       setFocusItemValue(null);
     }
   }, rest));
-  var handleSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextItemValue, item, event);
-  }, [onSelect]);
-  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event, checked) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event, checked) {
     var nextValue = (0, _clone.default)(value);
     if (checked) {
       nextValue.push(nextItemValue);
@@ -208,22 +210,16 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setFocusItemValue(nextItemValue);
     handleSelect(nextValue, item, event);
     handleChangeValue(nextValue, event);
-  }, [value, setValue, handleSelect, handleChangeValue, setFocusItemValue]);
-  var handleEntered = (0, _react.useCallback)(function () {
+  });
+  var handleEntered = (0, _utils.useEventCallback)(function () {
     setActive(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
+  });
+  var handleExited = (0, _utils.useEventCallback)(function () {
     resetSearch();
     setFocusItemValue(null);
     setActive(false);
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setFocusItemValue, resetSearch]);
-  (0, _Picker.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) {
@@ -287,7 +283,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var menu = items.length || filteredStickyItems.length ? /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
       id: id ? id + "-listbox" : undefined,
       listProps: listProps,
-      listRef: listRef,
+      listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
@@ -310,17 +306,17 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
       style: styles,
       onKeyDown: onPickerKeyDown,
-      target: triggerRef
+      target: trigger
     }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
+      inputRef: searchInput
     }), renderMenu ? renderMenu(menu) : menu, renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
@@ -335,7 +331,7 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     onEnter: (0, _utils.createChainedFunction)(initStickyItems, onEnter),
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
@@ -343,10 +339,11 @@ var CheckPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
     id: id,
-    ref: targetRef,
+    ref: target,
     appearance: appearance,
     disabled: disabled,
     onClean: handleClean,