rsuite 5.50.0 → 5.51.0

package/esm/InputPicker/TextBox.js

@@ -0,0 +1,42 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
+import React from 'react';
+import TagList from './TagList';
+import { useClassNames } from '../utils';
+import InputSearch from './InputSearch';
+var TextBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var tags = props.tags,
+    inputProps = props.inputProps,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    multiple = props.multiple,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onChange = props.onChange,
+    inputValue = props.inputValue,
+    inputRef = props.inputRef,
+    editable = props.editable,
+    showTagList = props.showTagList,
+    rest = _objectWithoutPropertiesLoose(props, ["tags", "inputProps", "readOnly", "disabled", "multiple", "onBlur", "onFocus", "onChange", "inputValue", "inputRef", "editable", "showTagList"]);
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  if (!multiple && disabled) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["textbox"]))),
+    ref: ref
+  }, rest), showTagList ? /*#__PURE__*/React.createElement(TagList, null, tags) : null, editable && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
+    tabIndex: -1,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    inputRef: inputRef,
+    onChange: onChange,
+    value: inputValue
+  })));
+});
+export default TextBox;

package/esm/MultiCascader/MultiCascader.js

@@ -7,13 +7,13 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
-import DropdownMenu from './DropdownMenu';
+import TreeView from './TreeView';
 import Checkbox from '../Checkbox';
 import { useCascadeValue, useColumnData, useFlattenData, isSomeChildChecked } from './utils';
 import { getNodeParents, findNodeOfTree } from '../utils/treeUtils';
 import { getColumnsAndPaths } from '../Cascader/utils';
 import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect, useControlled, useEventCallback } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, PickerPopup, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 var emptyArray = [];
 
 /**
@@ -328,9 +328,10 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       'cascader-row-focus': item[valueKey] === focusItemValue
     });
     return /*#__PURE__*/React.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
       key: key,
       className: itemClasses,
-      "aria-disabled": disabled,
       "data-key": item[valueKey]
     }, /*#__PURE__*/React.createElement(Checkbox, {
       disabled: disabled,
@@ -359,12 +360,13 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var items = getSearchResult();
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('cascader-search-panel'),
-      "data-layer": 0
+      "data-layer": 0,
+      role: "tree"
     }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/React.createElement("div", {
       className: prefix('none')
     }, locale.noResultsText));
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var _ref = positionProps || {},
       left = _ref.left,
       top = _ref.top,
@@ -376,7 +378,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-cascader-menu', {
       inline: inline
     }));
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       className: classes,
       style: styles,
@@ -387,8 +389,7 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange: handleSearch,
       value: searchKeyword,
       inputRef: searchInput
-    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(TreeView, {
       cascade: cascade,
       menuWidth: menuWidth,
       menuHeight: menuHeight,
@@ -438,22 +439,24 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   if (inline) {
-    return renderDropdownMenu();
+    return renderTreeView();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
     onExit: createChainedFunction(onClose, onExit),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,

package/esm/MultiCascader/{DropdownMenu.d.ts → TreeView.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './MultiCascader';
-export interface DropdownMenuProps extends WithAsProps {
+export interface TreeViewProps extends WithAsProps {
     disabledItemValues: ValueType;
     value: ValueType;
     childrenKey: string;
@@ -21,5 +21,5 @@ export interface DropdownMenuProps extends WithAsProps {
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;
-export default DropdownMenu;
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/esm/MultiCascader/{DropdownMenu.js → TreeView.js}

@@ -1,20 +1,19 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
-import { useClassNames, shallowEqual, useCustom } from '../utils';
-import { DropdownMenuCheckItem } from '../Picker';
+import { useClassNames, shallowEqual, useCustom, useEventCallback } from '../utils';
+import { ListCheckItem, useCombobox } from '../Picker';
 import { isSomeParentChecked, isSomeChildChecked } from './utils';
 var emptyArray = [];
 
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -40,18 +39,24 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
     renderMenuItem = props.renderMenuItem,
     renderMenu = props.renderMenu,
     _onCheck = props.onCheck,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, prefix('items'));
-  var _useCustom = useCustom('DropdownMenu'),
+  var _useCustom = useCustom(),
     rtl = _useCustom.rtl;
-  var getCascadePaths = useCallback(function (layer, node) {
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType,
+    multiple = _useCombobox.multiple;
+  var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
     for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
@@ -60,15 +65,21 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     paths.push(node);
     return paths;
-  }, [cascadeData, cascadePaths]);
-  var handleSelect = useCallback(function (layer, node, event) {
+  };
+  var handleSelect = useEventCallback(function (layer, node, event) {
     var cascadePaths = getCascadePaths(layer + 1, node);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-  }, [getCascadePaths, onSelect]);
-  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus, uncheckable) {
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      uncheckable = nodeProps.uncheckable,
+      size = nodeProps.size;
     var children = node[childrenKey];
     var nodeValue = node[valueKey];
-    var nodeLabel = node[labelKey];
+    var label = node[labelKey];
     var disabled = disabledItemValues.some(function (disabledValue) {
       return shallowEqual(disabledValue, nodeValue);
     });
@@ -84,8 +95,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         valueKey: valueKey
       });
     }
-    return /*#__PURE__*/React.createElement(DropdownMenuCheckItem, {
+    return /*#__PURE__*/React.createElement(ListCheckItem, {
       as: "li",
+      role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: active,
@@ -105,72 +121,60 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);
       },
       checkable: !uncheckable
-    }, renderMenuItem ? renderMenuItem(nodeLabel, node) : nodeLabel, children ? /*#__PURE__*/React.createElement(Icon, {
+    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
       className: prefix('caret'),
       spin: node.loading
     }) : null);
   };
-  var renderCascade = function renderCascade() {
-    var styles = {
-      width: cascadeData.length * menuWidth
-    };
-    var columnStyles = {
-      height: menuHeight,
-      width: menuWidth
-    };
-    var cascadeNodes = cascadeData.map(function (children, layer) {
-      var uncheckableCount = 0;
-      var onlyKey = layer + "_" + children.length;
-      var menu = /*#__PURE__*/React.createElement("ul", {
-        role: "listbox"
-      }, children.map(function (item, index) {
-        var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
-          return shallowEqual(uncheckableValue, item[valueKey]);
-        });
-        if (uncheckable) {
-          uncheckableCount++;
-        }
-        return renderCascadeNode(item, index, layer, cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]), uncheckable);
-      }));
-      var parentNode = cascadePaths[layer - 1];
-      var columnClasses = prefix('column', {
-        'column-uncheckable': uncheckableCount === children.length
+  var columnStyles = {
+    height: menuHeight,
+    width: menuWidth
+  };
+  var cascadeNodes = cascadeData.map(function (children, layer) {
+    var uncheckableCount = 0;
+    var onlyKey = layer + "_" + children.length;
+    var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
+      var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
+        return shallowEqual(uncheckableValue, item[valueKey]);
       });
-      return /*#__PURE__*/React.createElement("div", {
-        key: onlyKey,
-        className: columnClasses,
-        "data-layer": layer,
-        style: columnStyles
-      }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+      if (uncheckable) {
+        uncheckableCount++;
+      }
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        uncheckable: uncheckable,
+        size: children.length
+      });
+    }));
+    var parentNode = cascadePaths[layer - 1];
+    var columnClasses = prefix('column', {
+      'column-uncheckable': uncheckableCount === children.length
     });
-    return /*#__PURE__*/React.createElement("div", {
-      style: styles
-    }, cascadeNodes);
-  };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement("ul", {
+      role: "group",
+      key: onlyKey,
+      className: columnClasses,
+      "data-layer": layer,
+      style: columnStyles
+    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+  });
+  var styles = _extends({}, style, {
+    width: cascadeData.length * menuWidth
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiple
+  }, rest, {
     ref: ref,
-    className: classes
-  }), renderCascade());
+    className: classes,
+    style: styles
+  }), cascadeNodes);
 });
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = {
-  classPrefix: PropTypes.string,
-  data: PropTypes.array,
-  disabledItemValues: PropTypes.array,
-  value: PropTypes.array,
-  childrenKey: PropTypes.string,
-  valueKey: PropTypes.string,
-  labelKey: PropTypes.string,
-  menuWidth: PropTypes.number,
-  menuHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  cascade: PropTypes.bool,
-  cascadeData: PropTypes.array,
-  cascadePaths: PropTypes.array,
-  uncheckableItemValues: PropTypes.array,
-  renderMenuItem: PropTypes.func,
-  renderMenu: PropTypes.func,
-  onSelect: PropTypes.func,
-  onCheck: PropTypes.func
-};
-export default DropdownMenu;
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/{cjs/Picker/DropdownMenuCheckItem.d.ts → esm/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/esm/Picker/{DropdownMenuCheckItem.js → ListCheckItem.js}

@@ -1,11 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
+import React from 'react';
+import { useClassNames, useEventCallback } from '../utils';
 import Checkbox from '../Checkbox';
-var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import useCombobox from './hooks/useCombobox';
+var ListCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$active = props.active,
     active = _props$active === void 0 ? false : _props$active,
     _props$as = props.as,
@@ -28,19 +28,21 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
     onSelectItem = props.onSelectItem,
     renderMenuItemCheckbox = props.renderMenuItemCheckbox,
     rest = _objectWithoutPropertiesLoose(props, ["active", "as", "checkboxAs", "classPrefix", "checkable", "disabled", "value", "focus", "children", "className", "indeterminate", "onKeyDown", "onSelect", "onCheck", "onSelectItem", "renderMenuItemCheckbox"]);
-  var handleChange = useCallback(function (value, checked, event) {
+  var handleChange = useEventCallback(function (value, checked, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event, checked);
-  }, [onSelect]);
-  var handleCheck = useCallback(function (event) {
+  });
+  var handleCheck = useEventCallback(function (event) {
     if (!disabled) {
       onCheck === null || onCheck === void 0 ? void 0 : onCheck(value, event, !active);
     }
-  }, [value, disabled, onCheck, active]);
-  var handleSelectItem = useCallback(function (event) {
+  });
+  var handleSelectItem = useEventCallback(function (event) {
     if (!disabled) {
       onSelectItem === null || onSelectItem === void 0 ? void 0 : onSelectItem(value, event, !active);
     }
-  }, [value, disabled, onSelectItem, active]);
+  });
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id;
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix;
   var checkboxItemClasses = withClassPrefix({
@@ -63,6 +65,7 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
     role: "option",
     "aria-selected": active,
     "aria-disabled": disabled,
+    id: id ? id + "-opt-" + value : undefined,
     "data-key": value
   }, rest, {
     ref: ref,
@@ -72,23 +75,5 @@ var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref)
     role: "checkbox"
   }, checkboxProps)));
 });
-DropdownMenuCheckItem.displayName = 'DropdownMenuCheckItem';
-DropdownMenuCheckItem.propTypes = {
-  classPrefix: PropTypes.string,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  checkable: PropTypes.bool,
-  indeterminate: PropTypes.bool,
-  value: PropTypes.any,
-  onSelect: PropTypes.func,
-  onCheck: PropTypes.func,
-  onSelectItem: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  focus: PropTypes.bool,
-  title: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  as: PropTypes.elementType,
-  checkboxAs: PropTypes.elementType
-};
-export default DropdownMenuCheckItem;
+ListCheckItem.displayName = 'ListCheckItem';
+export default ListCheckItem;

package/{cjs/Picker/DropdownMenuItem.d.ts → esm/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/esm/Picker/{DropdownMenuItem.js → ListItem.js}

@@ -1,15 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useClassNames } from '../utils';
-var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import React from 'react';
+import { useClassNames, useEventCallback } from '../utils';
+import useCombobox from './hooks/useCombobox';
+var ListItem = /*#__PURE__*/React.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,
@@ -18,13 +20,15 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown = props.onKeyDown,
     onSelect = props.onSelect,
     renderItem = props.renderItem,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "active", "classPrefix", "children", "className", "disabled", "focus", "value", "onKeyDown", "onSelect", "renderItem"]);
-  var handleClick = useCallback(function (event) {
+    rest = _objectWithoutPropertiesLoose(props, ["as", "role", "classPrefix", "active", "children", "className", "disabled", "focus", "value", "onKeyDown", "onSelect", "renderItem"]);
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id;
+  var handleClick = useEventCallback(function (event) {
     event.preventDefault();
     if (!disabled) {
       onSelect === null || onSelect === void 0 ? void 0 : onSelect(value, event);
     }
-  }, [onSelect, disabled, value]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = withClassPrefix({
@@ -33,9 +37,10 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled
   });
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "option",
+    role: role,
     "aria-selected": active,
     "aria-disabled": disabled,
+    id: id ? id + "-opt-" + value : undefined,
     "data-key": value
   }, rest, {
     ref: ref,
@@ -47,18 +52,5 @@ var DropdownMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes
   }, renderItem ? renderItem(value) : children));
 });
-DropdownMenuItem.displayName = 'DropdownMenuItem';
-DropdownMenuItem.propTypes = {
-  classPrefix: PropTypes.string,
-  active: PropTypes.bool,
-  disabled: PropTypes.bool,
-  value: PropTypes.any,
-  onSelect: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  focus: PropTypes.bool,
-  title: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  as: PropTypes.elementType
-};
-export default DropdownMenuItem;
+ListItem.displayName = 'ListItem';
+export default ListItem;

package/esm/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/esm/Picker/{DropdownMenuGroup.js → ListItemGroup.js}

@@ -4,10 +4,9 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2;
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
-var DropdownMenuGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var ListItemGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -33,10 +32,5 @@ var DropdownMenuGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["caret"])))
   })));
 });
-DropdownMenuGroup.displayName = 'DropdownMenuGroup';
-DropdownMenuGroup.propTypes = {
-  classPrefix: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node
-};
-export default DropdownMenuGroup;
+ListItemGroup.displayName = 'ListItemGroup';
+export default ListItemGroup;

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