rsuite 5.50.0 → 5.51.0

package/{esm/Picker/DropdownMenuCheckItem.d.ts → cjs/Picker/ListCheckItem.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckboxProps } from '../Checkbox';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface DropdownMenuCheckItemProps extends WithAsProps {
+export interface ListCheckItemProps extends WithAsProps {
     active?: boolean;
     checkboxAs?: React.ElementType | string;
     classPrefix?: string;
@@ -19,5 +19,5 @@ export interface DropdownMenuCheckItemProps extends WithAsProps {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     renderMenuItemCheckbox?: (checkboxProps: CheckboxProps) => React.ReactNode;
 }
-declare const DropdownMenuCheckItem: RsRefForwardingComponent<'div', DropdownMenuCheckItemProps>;
-export default DropdownMenuCheckItem;
+declare const ListCheckItem: RsRefForwardingComponent<'div', ListCheckItemProps>;
+export default ListCheckItem;

package/cjs/Picker/{DropdownMenuCheckItem.js → ListCheckItem.js}

@@ -1,17 +1,16 @@
 '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 _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
+var ListCheckItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$active = props.active,
     active = _props$active === void 0 ? false : _props$active,
     _props$as = props.as,
@@ -34,19 +33,21 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     onSelectItem = props.onSelectItem,
     renderMenuItemCheckbox = props.renderMenuItemCheckbox,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
-  var handleChange = (0, _react.useCallback)(function (value, checked, event) {
+  var handleChange = (0, _utils.useEventCallback)(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
-  }, [onSelect]);
-  var handleCheck = (0, _react.useCallback)(function (event) {
+  });
+  var handleCheck = (0, _utils.useEventCallback)(function (event) {
     if (!disabled) {
       onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);
     }
-  }, [value, disabled, onCheck, active]);
-  var handleSelectItem = (0, _react.useCallback)(function (event) {
+  });
+  var handleSelectItem = (0, _utils.useEventCallback)(function (event) {
     if (!disabled) {
       onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);
     }
-  }, [value, disabled, onSelectItem, active]);
+  });
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix;
   var checkboxItemClasses = withClassPrefix({
@@ -69,6 +70,7 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     role: "option",
     "aria-selected": active,
     "aria-disabled": disabled,
+    id: id ? id + "-opt-" + value : undefined,
     "data-key": value
   }, rest, {
     ref: ref,
@@ -78,24 +80,6 @@ var DropdownMenuCheckItem = /*#__PURE__*/_react.default.forwardRef(function (pro
     role: "checkbox"
   }, checkboxProps)));
 });
-DropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';
-DropdownMenuCheckItem.propTypes = {
-  classPrefix: _propTypes.default.string,
-  active: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  checkable: _propTypes.default.bool,
-  indeterminate: _propTypes.default.bool,
-  value: _propTypes.default.any,
-  onSelect: _propTypes.default.func,
-  onCheck: _propTypes.default.func,
-  onSelectItem: _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,
-  checkboxAs: _propTypes.default.elementType
-};
-var _default = DropdownMenuCheckItem;
+ListCheckItem.displayName = 'ListCheckItem';
+var _default = ListCheckItem;
 exports.default = _default;

package/{esm/Picker/DropdownMenuItem.d.ts → cjs/Picker/ListItem.d.ts}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
-export interface DropdownMenuItemProps extends WithAsProps {
+export interface ListItemProps extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     active?: boolean;
     disabled?: boolean;
-    value?: any;
+    value?: string | number;
     focus?: boolean;
     title?: string;
     onSelect?: (value: any, event: React.MouseEvent) => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     renderItem?: (value: any) => React.ReactNode;
 }
-declare const DropdownMenuItem: RsRefForwardingComponent<'div', DropdownMenuItemProps>;
-export default DropdownMenuItem;
+declare const ListItem: RsRefForwardingComponent<'div', ListItemProps>;
+export default ListItem;

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/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

@@ -28,8 +28,8 @@ export interface PickerToggleProps extends ToggleButtonProps {
     loading?: boolean;
     label?: React.ReactNode;
     name?: string;
-    id?: string;
     inputValue?: ValueType | ValueType[];
+    focusItemValue?: ValueType | null;
     onClean?: (event: React.MouseEvent) => void;
 }
 declare const PickerToggle: RsRefForwardingComponent<typeof ToggleButton, PickerToggleProps>;

package/cjs/Picker/PickerToggle.js

@@ -16,6 +16,7 @@ var _useToggleCaret = _interopRequireDefault(require("../utils/useToggleCaret"))
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PickerIndicator = _interopRequireDefault(require("./PickerIndicator"));
 var _PickerLabel = _interopRequireDefault(require("./PickerLabel"));
+var _useCombobox2 = _interopRequireDefault(require("./hooks/useCombobox"));
 var _templateObject;
 var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var active = props.active,
@@ -36,8 +37,8 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     cleanable = props.cleanable,
     _props$tabIndex = props.tabIndex,
     tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
-    id = props.id,
     inputValueProp = props.inputValue,
+    focusItemValue = props.focusItemValue,
     onClean = props.onClean,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
@@ -46,12 +47,16 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "id", "inputValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "inputValue", "focusItemValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
   var combobox = (0, _react.useRef)(null);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var _useCombobox = (0, _useCombobox2.default)(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
   var inputValue = (0, _react.useMemo)(function () {
     if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {
       return inputValueProp;
@@ -80,10 +85,14 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var showCleanButton = cleanable && hasValue && !readOnly;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     role: "combobox",
-    "aria-haspopup": "listbox",
+    id: id,
+    "aria-haspopup": popupType,
     "aria-expanded": active,
     "aria-disabled": disabled,
-    "aria-owns": id ? id + "-listbox" : undefined
+    "aria-controls": id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-describedby": id + "-describe",
+    "aria-activedescendant": active && focusItemValue ? id + "-opt-" + focusItemValue : undefined
   }, rest, {
     ref: (0, _utils.mergeRefs)(combobox, ref),
     disabled: disabled,
@@ -92,7 +101,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }), /*#__PURE__*/_react.default.createElement(_Stack.default, null, label && /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_PickerLabel.default, {
     as: "span",
     className: prefix('label'),
-    id: id ? id + "-label" : undefined
+    id: labelId
   }, label)), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
     grow: 1,
     style: {
@@ -101,20 +110,18 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }, /*#__PURE__*/_react.default.createElement("input", {
     readOnly: true,
     "aria-hidden": true,
-    "aria-controls": id ? id + "-listbox" : undefined,
-    "aria-labelledby": label ? id + "-label" : undefined,
     tabIndex: -1,
     "data-testid": "picker-toggle-input",
     name: name,
     value: inputValue,
-    id: id,
     className: prefix('textbox', 'read-only'),
     style: {
       pointerEvents: 'none'
     }
   }), children ? /*#__PURE__*/_react.default.createElement("span", {
     className: prefix(hasValue ? 'value' : 'placeholder'),
-    "aria-placeholder": typeof children === 'string' ? children : undefined
+    id: id + "-describe",
+    "data-testid": "picker-describe"
   }, children) : null), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["indicator"])))
   }, /*#__PURE__*/_react.default.createElement(_PickerIndicator.default, {