rsuite 5.49.0 → 5.51.0

package/cjs/Picker/{DropdownMenuItem.js → ListItem.js}

@@ -1,21 +1,22 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 var _utils = require("../utils");
-var DropdownMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
-    active = props.active,
+    _props$role = props.role,
+    role = _props$role === void 0 ? 'option' : _props$role,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'dropdown-menu-item' : _props$classPrefix,
+    active = props.active,
     children = props.children,
     className = props.className,
     disabled = props.disabled,
@@ -24,13 +25,15 @@ var DropdownMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, r
     onKeyDown = props.onKeyDown,
     onSelect = props.onSelect,
     renderItem = props.renderItem,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "active", "classPrefix", "children", "className", "disabled", "focus", "value", "onKeyDown", "onSelect", "renderItem"]);
-  var handleClick = (0, _react.useCallback)(function (event) {
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "role", "classPrefix", "active", "children", "className", "disabled", "focus", "value", "onKeyDown", "onSelect", "renderItem"]);
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id;
+  var handleClick = (0, _utils.useEventCallback)(function (event) {
     event.preventDefault();
     if (!disabled) {
       onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event);
     }
-  }, [onSelect, disabled, value]);
+  });
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = withClassPrefix({
@@ -39,9 +42,10 @@ var DropdownMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, r
     disabled: disabled
   });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "option",
+    role: role,
     "aria-selected": active,
     "aria-disabled": disabled,
+    id: id ? id + "-opt-" + value : undefined,
     "data-key": value
   }, rest, {
     ref: ref,
@@ -53,19 +57,6 @@ var DropdownMenuItem = /*#__PURE__*/_react.default.forwardRef(function (props, r
     className: classes
   }, renderItem ? renderItem(value) : children));
 });
-DropdownMenuItem.displayName = 'DropdownMenuItem';
-DropdownMenuItem.propTypes = {
-  classPrefix: _propTypes.default.string,
-  active: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  onSelect: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func,
-  focus: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node,
-  as: _propTypes.default.elementType
-};
-var _default = DropdownMenuItem;
+ListItem.displayName = 'ListItem';
+var _default = ListItem;
 exports.default = _default;

package/cjs/Picker/ListItemGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export interface ListItemGroupProps extends WithAsProps, React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ListItemGroup: React.ForwardRefExoticComponent<ListItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default ListItemGroup;

package/cjs/Picker/{DropdownMenuGroup.js → ListItemGroup.js}

@@ -8,11 +8,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _ArrowDown = _interopRequireDefault(require("@rsuite/icons/legacy/ArrowDown"));
 var _templateObject, _templateObject2;
-var DropdownMenuGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var ListItemGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -38,11 +37,6 @@ var DropdownMenuGroup = /*#__PURE__*/_react.default.forwardRef(function (props,
     className: prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["caret"])))
   })));
 });
-DropdownMenuGroup.displayName = 'DropdownMenuGroup';
-DropdownMenuGroup.propTypes = {
-  classPrefix: _propTypes.default.string,
-  className: _propTypes.default.string,
-  children: _propTypes.default.node
-};
-var _default = DropdownMenuGroup;
+ListItemGroup.displayName = 'ListItemGroup';
+var _default = ListItemGroup;
 exports.default = _default;

package/cjs/Picker/Listbox.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ListProps, ListHandle } from '../Windowing';
+import { StandardProps, ItemDataType } from '../@types/common';
+export interface ListboxProps<Multiple = false> extends StandardProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    classPrefix: string;
+    data?: ItemDataType[];
+    group?: boolean;
+    groupBy?: string;
+    disabledItemValues?: any[];
+    activeItemValues?: any[];
+    focusItemValue?: any;
+    maxHeight?: number;
+    valueKey?: string;
+    labelKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    listItemAs: React.ElementType | string;
+    listItemClassPrefix?: string;
+    listItemProps?: any;
+    rowHeight?: number;
+    rowGroupHeight?: number;
+    virtualized?: boolean;
+    listProps?: Partial<ListProps>;
+    listRef?: React.Ref<ListHandle>;
+    /** Custom selected option */
+    renderMenuItem?: (itemLabel: React.ReactNode, item: any) => React.ReactNode;
+    renderMenuGroup?: (title: React.ReactNode, item: any) => React.ReactNode;
+    onSelect?: Multiple extends true ? (value: any, item: any, event: React.MouseEvent, checked: boolean) => void : Multiple extends false ? (value: any, item: any, event: React.MouseEvent) => void : any;
+    onGroupTitleClick?: (event: React.MouseEvent) => void;
+}
+export declare type ListboxComponent = React.ForwardRefExoticComponent<ListboxProps> & {
+    <Multiple = false>(props: ListboxProps<Multiple>): React.ReactElement | null;
+};
+declare const Listbox: ListboxComponent;
+export default Listbox;

package/cjs/Picker/{DropdownMenu.js → Listbox.js}

@@ -4,12 +4,10 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
-exports.default = exports.dropdownMenuPropTypes = void 0;
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _get2 = _interopRequireDefault(require("lodash/get"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
 var _isNumber = _interopRequireDefault(require("lodash/isNumber"));
@@ -18,14 +16,16 @@ var _pickBy = _interopRequireDefault(require("lodash/pickBy"));
 var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));
 var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));
 var _getHeight = _interopRequireDefault(require("dom-lib/getHeight"));
+var _get = _interopRequireDefault(require("lodash/get"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Windowing = require("../Windowing");
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
 var _utils = require("../utils");
-var _DropdownMenuGroup = _interopRequireDefault(require("./DropdownMenuGroup"));
+var _ListItemGroup = _interopRequireDefault(require("./ListItemGroup"));
 var _getDataGroupBy = require("../utils/getDataGroupBy");
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
 var _this = void 0;
-var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var Listbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
     group = props.group,
@@ -48,9 +48,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     className = props.className,
     style = props.style,
     focusItemValue = props.focusItemValue,
-    dropdownMenuItemClassPrefix = props.dropdownMenuItemClassPrefix,
-    DropdownMenuItem = props.dropdownMenuItemAs,
-    dropdownMenuItemProps = props.dropdownMenuItemProps,
+    listItemClassPrefix = props.listItemClassPrefix,
+    ListItem = props.listItemAs,
+    listItemProps = props.listItemProps,
     _props$rowHeight = props.rowHeight,
     rowHeight = _props$rowHeight === void 0 ? 36 : _props$rowHeight,
     _props$rowGroupHeight = props.rowGroupHeight,
@@ -59,7 +59,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     renderMenuItem = props.renderMenuItem,
     onGroupTitleClick = props.onGroupTitleClick,
     onSelect = props.onSelect,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["data", "group", "groupBy", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "dropdownMenuItemClassPrefix", "dropdownMenuItemAs", "dropdownMenuItemProps", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["data", "group", "groupBy", "maxHeight", "activeItemValues", "disabledItemValues", "classPrefix", "valueKey", "labelKey", "virtualized", "listProps", "listRef", "className", "style", "focusItemValue", "listItemClassPrefix", "listItemAs", "listItemProps", "rowHeight", "rowGroupHeight", "renderMenuGroup", "renderMenuItem", "onGroupTitleClick", "onSelect"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -67,12 +67,17 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var classes = merge(className, withClassPrefix('items', {
     grouped: group
   }));
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType,
+    multiple = _useCombobox.multiple;
   var menuBodyContainerRef = (0, _react.useRef)(null);
   var listRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)([]),
     foldedGroupKeys = _useState[0],
     setFoldedGroupKeys = _useState[1];
-  var handleGroupTitleClick = (0, _react.useCallback)(function (key, event) {
+  var handleGroupTitleClick = (0, _utils.useEventCallback)(function (key, event) {
     var nextGroupKeys = foldedGroupKeys.filter(function (item) {
       return item !== key;
     });
@@ -81,10 +86,10 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     setFoldedGroupKeys(nextGroupKeys);
     onGroupTitleClick === null || onGroupTitleClick === void 0 ? void 0 : onGroupTitleClick(event);
-  }, [onGroupTitleClick, foldedGroupKeys]);
-  var handleSelect = (0, _react.useCallback)(function (item, value, event, checked) {
+  });
+  var handleSelect = (0, _utils.useEventCallback)(function (item, value, event, checked) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, item, event, checked);
-  }, [onSelect]);
+  });
   var getRowHeight = function getRowHeight(list, index) {
     var item = list[index];
     if (group && item[_getDataGroupBy.KEY_GROUP] && index !== 0) {
@@ -113,6 +118,24 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       (0, _scrollTop.default)(container, Math.max(0, position.top - sHeight + 32));
     }
   }, [focusItemValue, menuBodyContainerRef, prefix]);
+  var filteredItems = group ? data.filter(function (item) {
+    var _item$parent;
+    // Display group title items
+    if (item[_getDataGroupBy.KEY_GROUP]) return true;
+
+    // Display items under the unfolded group
+    // FIXME-Doma
+    // `groupBy` is bound to be string when `group` is true
+    // because `group` is actually redundant as a prop
+    // It could simply be derived from `groupBy` value
+    var groupValue = (0, _get.default)(item, groupBy, '') || ( // FIXME-Doma
+    // Usage of `item.parent` is strongly discouraged
+    // It's only here for legacy support
+    // Remove once `item.parent` is completely removed across related components
+    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);
+    return !foldedGroupKeys.includes(groupValue);
+  }) : data;
+  var rowCount = filteredItems.length;
   var renderItem = function renderItem(_ref) {
     var _ref$index = _ref.index,
       index = _ref$index === void 0 ? 0 : _ref$index,
@@ -130,13 +153,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     var itemKey = (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : index;
 
     /**
-     * Render <DropdownMenuGroup>
+     * Render <ListboxGroup>
      * when if `group` is enabled
      */
     if (group && item[_getDataGroupBy.KEY_GROUP]) {
       var groupValue = item[_getDataGroupBy.KEY_GROUP_TITLE];
       // TODO: grouped options should be owned by group
-      return /*#__PURE__*/_react.default.createElement(_DropdownMenuGroup.default, {
+      return /*#__PURE__*/_react.default.createElement(_ListItemGroup.default, {
         style: style,
         classPrefix: 'picker-menu-group',
         className: (0, _classnames.default)({
@@ -157,37 +180,21 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       return (0, _shallowEqual.default)(v, value);
     });
     var focus = !(0, _isUndefined.default)(focusItemValue) && (0, _shallowEqual.default)(focusItemValue, value);
-    return /*#__PURE__*/_react.default.createElement(DropdownMenuItem, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+      "aria-posinset": index + 1,
+      "aria-setsize": rowCount,
       style: style,
       key: itemKey,
       disabled: disabled,
       active: active,
       focus: focus,
       value: value,
-      classPrefix: dropdownMenuItemClassPrefix,
+      classPrefix: listItemClassPrefix,
       onSelect: handleSelect.bind(null, item)
-    }, (0, _pickBy.default)(dropdownMenuItemProps, function (v) {
+    }, (0, _pickBy.default)(listItemProps, function (v) {
       return v !== undefined;
     })), renderMenuItem ? renderMenuItem(label, item) : label);
   };
-  var filteredItems = group ? data.filter(function (item) {
-    var _item$parent;
-    // Display group title items
-    if (item[_getDataGroupBy.KEY_GROUP]) return true;
-
-    // Display items under the unfolded group
-    // FIXME-Doma
-    // `groupBy` is bound to be string when `group` is true
-    // because `group` is actually redundant as a prop
-    // It could simply be derived from `groupBy` value
-    var groupValue = (0, _get2.default)(item, groupBy, '') || ( // FIXME-Doma
-    // Usage of `item.parent` is strongly discouraged
-    // It's only here for legacy support
-    // Remove once `item.parent` is completely removed across related components
-    (_item$parent = item.parent) === null || _item$parent === void 0 ? void 0 : _item$parent[_getDataGroupBy.KEY_GROUP_TITLE]);
-    return !foldedGroupKeys.includes(groupValue);
-  }) : data;
-  var rowCount = filteredItems.length;
   (0, _utils.useMount)(function () {
     var _listRef$current, _listRef$current$scro;
     var itemIndex = (0, _findIndex.default)(filteredItems, function (item) {
@@ -196,7 +203,10 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : (_listRef$current$scro = _listRef$current.scrollToItem) === null || _listRef$current$scro === void 0 ? void 0 : _listRef$current$scro.call(_listRef$current, itemIndex);
   });
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    role: "listbox"
+    role: "listbox",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiple
   }, rest, {
     className: classes,
     ref: (0, _utils.mergeRefs)(menuBodyContainerRef, ref),
@@ -226,31 +236,6 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     });
   }));
 });
-var dropdownMenuPropTypes = {
-  classPrefix: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  dropdownMenuItemAs: _propTypes.default.elementType.isRequired,
-  dropdownMenuItemClassPrefix: _propTypes.default.string,
-  data: _propTypes.default.array,
-  group: _propTypes.default.bool,
-  disabledItemValues: _propTypes.default.array,
-  activeItemValues: _propTypes.default.array,
-  focusItemValue: _propTypes.default.any,
-  maxHeight: _propTypes.default.number,
-  valueKey: _propTypes.default.string,
-  labelKey: _propTypes.default.string,
-  style: _propTypes.default.object,
-  renderMenuItem: _propTypes.default.func,
-  renderMenuGroup: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onGroupTitleClick: _propTypes.default.func,
-  virtualized: _propTypes.default.bool,
-  listProps: _propTypes.default.any,
-  rowHeight: _propTypes.default.number,
-  rowGroupHeight: _propTypes.default.number
-};
-exports.dropdownMenuPropTypes = dropdownMenuPropTypes;
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = dropdownMenuPropTypes;
-var _default = DropdownMenu;
+Listbox.displayName = 'Listbox';
+var _default = Listbox;
 exports.default = _default;

package/cjs/{DatePicker → Picker}/PickerIndicator.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface PickerIndicatorProps {
     loading?: boolean;
     caretAs?: React.ElementType | null;
-    onClose?: () => void;
+    onClose?: (event: React.MouseEvent<HTMLElement>) => void;
     showCleanButton?: boolean;
     as?: React.ElementType;
 }

package/cjs/{DatePicker → Picker}/PickerIndicator.js

@@ -39,7 +39,8 @@ var PickerIndicator = function PickerIndicator(_ref) {
       });
     }
     return caretAs && /*#__PURE__*/_react.default.createElement(_icons.Icon, {
-      as: caretAs
+      as: caretAs,
+      className: prefix('caret-icon')
     });
   };
   return /*#__PURE__*/_react.default.createElement(Component, null, addon());

package/cjs/{DatePicker → Picker}/PickerLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface PickerLabelProps {
-    id: string;
+    id?: string;
     className?: string;
     children?: React.ReactNode;
     as?: React.ElementType;

package/cjs/Picker/{PickerOverlay.d.ts → PickerPopup.d.ts}

@@ -1,12 +1,12 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { OverlayTriggerHandle } from '../Picker';
-export interface PickerOverlayProps extends WithAsProps {
+export interface PickerPopupProps extends WithAsProps {
     placement?: string;
     autoWidth?: boolean;
     children?: React.ReactNode;
     target?: React.RefObject<OverlayTriggerHandle>;
     onKeyDown?: (event: React.KeyboardEvent) => void;
 }
-declare const PickerOverlay: RsRefForwardingComponent<'div', PickerOverlayProps>;
-export default PickerOverlay;
+declare const PickerPopup: RsRefForwardingComponent<'div', PickerPopupProps>;
+export default PickerPopup;

package/cjs/Picker/{PickerOverlay.js → PickerPopup.js}

@@ -14,11 +14,11 @@ var _getWidth = _interopRequireDefault(require("dom-lib/getWidth"));
 var _utils = require("../utils");
 var omitProps = ['placement', 'arrowOffsetLeft', 'arrowOffsetTop', 'positionLeft', 'positionTop', 'getPositionInstance', 'getToggleInstance', 'autoWidth'];
 var resizePlacement = ['topStart', 'topEnd', 'leftEnd', 'rightEnd', 'auto', 'autoVerticalStart', 'autoVerticalEnd', 'autoHorizontalEnd'];
-var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var PickerPopup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
-    classPrefix = _props$classPrefix === void 0 ? 'picker-menu' : _props$classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker-popup' : _props$classPrefix,
     autoWidth = props.autoWidth,
     className = props.className,
     _props$placement = props.placement,
@@ -26,12 +26,12 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     target = props.target,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "autoWidth", "className", "placement", "target"]);
   var overlayRef = (0, _react.useRef)(null);
-  var handleResize = (0, _react.useCallback)(function () {
+  var handleResize = (0, _utils.useEventCallback)(function () {
     var instance = target === null || target === void 0 ? void 0 : target.current;
     if (instance && resizePlacement.includes(placement)) {
       instance.updatePosition();
     }
-  }, [target, placement]);
+  });
   (0, _utils.useElementResize)((0, _react.useCallback)(function () {
     return overlayRef.current;
   }, []), handleResize);
@@ -50,11 +50,13 @@ var PickerOverlay = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _omit.default)(rest, omitProps), {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    "data-testid": "picker-popup"
+  }, (0, _omit.default)(rest, omitProps), {
     ref: (0, _utils.mergeRefs)(overlayRef, ref),
     className: classes
   }));
 });
-PickerOverlay.displayName = 'PickerOverlay';
-var _default = PickerOverlay;
+PickerPopup.displayName = 'PickerPopup';
+var _default = PickerPopup;
 exports.default = _default;

package/cjs/Picker/PickerToggle.d.ts

@@ -4,38 +4,33 @@ import { RsRefForwardingComponent, TypeAttributes } from '../@types/common';
 import { IconProps } from '@rsuite/icons/lib/Icon';
 declare type ValueType = string | number;
 export interface PickerToggleProps extends ToggleButtonProps {
-    value?: ValueType | ValueType[];
-    inputValue?: ValueType | ValueType[];
-    id?: string;
+    active?: boolean;
     hasValue?: boolean;
     cleanable?: boolean;
     caret?: boolean;
-    active?: boolean;
-    disabled?: boolean;
-    readOnly?: boolean;
-    plaintext?: boolean;
-    tabIndex?: number;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
-    editable?: boolean;
-    name?: string;
-    inputPlaceholder?: string;
-    inputMask?: (string | RegExp)[];
-    onInputChange?: (value: string, event: React.ChangeEvent) => void;
-    onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
-    onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
-    placement?: TypeAttributes.Placement;
     /**
      * Custom caret component
      * @deprecated Use `caretAs` instead
      */
     caretComponent?: React.FC<IconProps>;
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType;
-    onClean?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    placement?: TypeAttributes.Placement;
+    readOnly?: boolean;
+    plaintext?: boolean;
+    tabIndex?: number;
+    /**
+     * Whether to display an loading indicator on toggle button
+     */
+    loading?: boolean;
     label?: React.ReactNode;
+    name?: string;
+    inputValue?: ValueType | ValueType[];
+    focusItemValue?: ValueType | null;
+    onClean?: (event: React.MouseEvent) => void;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;
 export default PickerToggle;