rsuite 5.50.0 → 5.51.0

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

@@ -1,10 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _get from "lodash/get";
 var _this = this;
-import React, { useRef, useState, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef, useState, useEffect } from 'react';
 import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
@@ -13,13 +11,15 @@ import pickBy from 'lodash/pickBy';
 import getPosition from 'dom-lib/getPosition';
 import scrollTop from 'dom-lib/scrollTop';
 import getHeight from 'dom-lib/getHeight';
+import get from 'lodash/get';
 import classNames from 'classnames';
 import { List, AutoSizer, VariableSizeList } from '../Windowing';
 import shallowEqual from '../utils/shallowEqual';
-import { mergeRefs, useClassNames, useMount } from '../utils';
-import DropdownMenuGroup from './DropdownMenuGroup';
+import { mergeRefs, useClassNames, useMount, useEventCallback } from '../utils';
+import ListItemGroup from './ListItemGroup';
 import { KEY_GROUP, KEY_GROUP_TITLE } from '../utils/getDataGroupBy';
-var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import useCombobox from './hooks/useCombobox';
+var Listbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$data = props.data,
     data = _props$data === void 0 ? [] : _props$data,
     group = props.group,
@@ -42,9 +42,9 @@ var DropdownMenu = /*#__PURE__*/React.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,
@@ -53,7 +53,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     renderMenuItem = props.renderMenuItem,
     onGroupTitleClick = props.onGroupTitleClick,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix,
@@ -61,12 +61,17 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix('items', {
     grouped: group
   }));
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType,
+    multiple = _useCombobox.multiple;
   var menuBodyContainerRef = useRef(null);
   var listRef = useRef(null);
   var _useState = useState([]),
     foldedGroupKeys = _useState[0],
     setFoldedGroupKeys = _useState[1];
-  var handleGroupTitleClick = useCallback(function (key, event) {
+  var handleGroupTitleClick = useEventCallback(function (key, event) {
     var nextGroupKeys = foldedGroupKeys.filter(function (item) {
       return item !== key;
     });
@@ -75,10 +80,10 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setFoldedGroupKeys(nextGroupKeys);
     onGroupTitleClick === null || onGroupTitleClick === void 0 ? void 0 : onGroupTitleClick(event);
-  }, [onGroupTitleClick, foldedGroupKeys]);
-  var handleSelect = useCallback(function (item, value, event, checked) {
+  });
+  var handleSelect = 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[KEY_GROUP] && index !== 0) {
@@ -107,6 +112,24 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       scrollTop(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[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 = get(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[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,
@@ -124,13 +147,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var itemKey = isString(value) || isNumber(value) ? value : index;
 
     /**
-     * Render <DropdownMenuGroup>
+     * Render <ListboxGroup>
      * when if `group` is enabled
      */
     if (group && item[KEY_GROUP]) {
       var groupValue = item[KEY_GROUP_TITLE];
       // TODO: grouped options should be owned by group
-      return /*#__PURE__*/React.createElement(DropdownMenuGroup, {
+      return /*#__PURE__*/React.createElement(ListItemGroup, {
         style: style,
         classPrefix: 'picker-menu-group',
         className: classNames({
@@ -151,37 +174,21 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return shallowEqual(v, value);
     });
     var focus = !isUndefined(focusItemValue) && shallowEqual(focusItemValue, value);
-    return /*#__PURE__*/React.createElement(DropdownMenuItem, _extends({
+    return /*#__PURE__*/React.createElement(ListItem, _extends({
+      "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)
-    }, pickBy(dropdownMenuItemProps, function (v) {
+    }, pickBy(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[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 = _get(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[KEY_GROUP_TITLE]);
-    return !foldedGroupKeys.includes(groupValue);
-  }) : data;
-  var rowCount = filteredItems.length;
   useMount(function () {
     var _listRef$current, _listRef$current$scro;
     var itemIndex = findIndex(filteredItems, function (item) {
@@ -190,7 +197,10 @@ var DropdownMenu = /*#__PURE__*/React.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.createElement("div", _extends({
-    role: "listbox"
+    role: "listbox",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiple
   }, rest, {
     className: classes,
     ref: mergeRefs(menuBodyContainerRef, ref),
@@ -220,29 +230,5 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }));
 });
-export var dropdownMenuPropTypes = {
-  classPrefix: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  dropdownMenuItemAs: PropTypes.elementType.isRequired,
-  dropdownMenuItemClassPrefix: PropTypes.string,
-  data: PropTypes.array,
-  group: PropTypes.bool,
-  disabledItemValues: PropTypes.array,
-  activeItemValues: PropTypes.array,
-  focusItemValue: PropTypes.any,
-  maxHeight: PropTypes.number,
-  valueKey: PropTypes.string,
-  labelKey: PropTypes.string,
-  style: PropTypes.object,
-  renderMenuItem: PropTypes.func,
-  renderMenuGroup: PropTypes.func,
-  onSelect: PropTypes.func,
-  onGroupTitleClick: PropTypes.func,
-  virtualized: PropTypes.bool,
-  listProps: PropTypes.any,
-  rowHeight: PropTypes.number,
-  rowGroupHeight: PropTypes.number
-};
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = dropdownMenuPropTypes;
-export default DropdownMenu;
+Listbox.displayName = 'Listbox';
+export default Listbox;

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

@@ -5,14 +5,14 @@ import React, { useRef, useCallback, useEffect } from 'react';
 import omit from 'lodash/omit';
 import addStyle from 'dom-lib/addStyle';
 import getWidth from 'dom-lib/getWidth';
-import { getDOMNode, mergeRefs, useElementResize, useClassNames } from '../utils';
+import { getDOMNode, mergeRefs, useElementResize, useClassNames, useEventCallback } from '../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.forwardRef(function (props, ref) {
+var PickerPopup = /*#__PURE__*/React.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,
@@ -20,12 +20,12 @@ var PickerOverlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
     target = props.target,
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "autoWidth", "className", "placement", "target"]);
   var overlayRef = useRef(null);
-  var handleResize = useCallback(function () {
+  var handleResize = useEventCallback(function () {
     var instance = target === null || target === void 0 ? void 0 : target.current;
     if (instance && resizePlacement.includes(placement)) {
       instance.updatePosition();
     }
-  }, [target, placement]);
+  });
   useElementResize(useCallback(function () {
     return overlayRef.current;
   }, []), handleResize);
@@ -44,10 +44,12 @@ var PickerOverlay = /*#__PURE__*/React.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({}, omit(rest, omitProps), {
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    "data-testid": "picker-popup"
+  }, omit(rest, omitProps), {
     ref: mergeRefs(overlayRef, ref),
     className: classes
   }));
 });
-PickerOverlay.displayName = 'PickerOverlay';
-export default PickerOverlay;
+PickerPopup.displayName = 'PickerPopup';
+export default PickerPopup;

package/esm/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/esm/Picker/PickerToggle.js

@@ -11,6 +11,7 @@ import useToggleCaret from '../utils/useToggleCaret';
 import Stack from '../Stack';
 import PickerIndicator from './PickerIndicator';
 import PickerLabel from './PickerLabel';
+import useCombobox from './hooks/useCombobox';
 var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var active = props.active,
     _props$as = props.as,
@@ -30,8 +31,8 @@ var PickerToggle = /*#__PURE__*/React.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,
@@ -40,12 +41,16 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "id", "inputValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
+    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "loading", "cleanable", "tabIndex", "inputValue", "focusItemValue", "onClean", "placement", "caretComponent", "caretAs", "label", "name"]);
   var combobox = useRef(null);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
   var inputValue = useMemo(function () {
     if (typeof inputValueProp === 'number' || typeof inputValueProp === 'string') {
       return inputValueProp;
@@ -74,10 +79,14 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var showCleanButton = cleanable && hasValue && !readOnly;
   return /*#__PURE__*/React.createElement(Component, _extends({
     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: mergeRefs(combobox, ref),
     disabled: disabled,
@@ -86,7 +95,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), /*#__PURE__*/React.createElement(Stack, null, label && /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(PickerLabel, {
     as: "span",
     className: prefix('label'),
-    id: id ? id + "-label" : undefined
+    id: labelId
   }, label)), /*#__PURE__*/React.createElement(Stack.Item, {
     grow: 1,
     style: {
@@ -95,20 +104,18 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.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.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.createElement(Stack.Item, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["indicator"])))
   }, /*#__PURE__*/React.createElement(PickerIndicator, {

package/esm/Picker/PickerToggleTrigger.d.ts

@@ -4,6 +4,14 @@ import { PositionChildProps } from '../Overlay/Position';
 import { TypeAttributes, AnimationEventProps } from '../@types/common';
 export type { OverlayTriggerHandle, PositionChildProps };
 export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onEntering' | 'onExiting'>, Pick<OverlayTriggerProps, 'speaker' | 'onClose'> {
+    id?: string;
+    /**
+     * Identifies the combobox has having a popout, and indicates the type.
+     *
+     * @see MDN https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
+     */
+    popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
+    multiple?: boolean;
     placement?: TypeAttributes.Placement;
     pickerProps: any;
     open?: boolean;
@@ -12,5 +20,12 @@ export interface PickerToggleTriggerProps extends Omit<AnimationEventProps, 'onE
 }
 export declare const omitTriggerPropKeys: string[];
 export declare const pickTriggerPropKeys: string[];
+export interface ComboboxContextProps {
+    id?: string;
+    multiple?: boolean;
+    hasLabel?: boolean;
+    popupType?: 'listbox' | 'tree' | 'grid' | 'dialog' | 'menu';
+}
+export declare const ComboboxContextContext: React.Context<ComboboxContextProps>;
 declare const PickerToggleTrigger: React.ForwardRefExoticComponent<PickerToggleTriggerProps & React.RefAttributes<any>>;
 export default PickerToggleTrigger;

package/esm/Picker/PickerToggleTrigger.js

@@ -4,26 +4,41 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import pick from 'lodash/pick';
 import OverlayTrigger from '../Overlay/OverlayTrigger';
-import { placementPolyfill, useCustom } from '../utils';
+import { placementPolyfill, useCustom, useUniqueId } from '../utils';
 export var omitTriggerPropKeys = ['onEntered', 'onExited', 'onEnter', 'onEntering', 'onExit', 'onExiting', 'open', 'defaultOpen', 'container', 'containerPadding', 'preventOverflow'];
-export var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading']);
+export var pickTriggerPropKeys = [].concat(omitTriggerPropKeys, ['disabled', 'plaintext', 'readOnly', 'loading', 'label']);
+export var ComboboxContextContext = /*#__PURE__*/React.createContext({
+  popupType: 'listbox'
+});
 var PickerToggleTrigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var pickerProps = props.pickerProps,
     speaker = props.speaker,
     placement = props.placement,
     _props$trigger = props.trigger,
     trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
-    rest = _objectWithoutPropertiesLoose(props, ["pickerProps", "speaker", "placement", "trigger"]);
+    id = props.id,
+    multiple = props.multiple,
+    _props$popupType = props.popupType,
+    popupType = _props$popupType === void 0 ? 'listbox' : _props$popupType,
+    rest = _objectWithoutPropertiesLoose(props, ["pickerProps", "speaker", "placement", "trigger", "id", "multiple", "popupType"]);
   var pickerTriggerProps = pick(pickerProps, pickTriggerPropKeys);
+  var pickerId = useUniqueId('rs-', id);
   var _useCustom = useCustom(),
     rtl = _useCustom.rtl;
-  return /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, rest, {
+  return /*#__PURE__*/React.createElement(ComboboxContextContext.Provider, {
+    value: {
+      id: pickerId,
+      hasLabel: typeof pickerTriggerProps.label !== 'undefined',
+      multiple: multiple,
+      popupType: popupType
+    }
+  }, /*#__PURE__*/React.createElement(OverlayTrigger, _extends({}, pickerTriggerProps, rest, {
     disabled: pickerTriggerProps.disabled || pickerTriggerProps.loading,
     ref: ref,
     trigger: trigger,
     placement: placementPolyfill(placement, rtl),
     speaker: speaker
-  }));
+  })));
 });
 PickerToggleTrigger.displayName = 'PickerToggleTrigger';
 export default PickerToggleTrigger;

package/esm/Picker/SearchBar.js

@@ -1,11 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import get from 'lodash/get';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Search from '@rsuite/icons/legacy/Search';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 var SearchBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -23,15 +22,15 @@ var SearchBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var handleChange = useCallback(function (event) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(get(event, 'target.value'), event);
-  }, [onChange]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "searchbox"
-  }, rest, {
+  var handleChange = useEventCallback(function (event) {
+    var _event$target;
+    onChange === null || onChange === void 0 ? void 0 : onChange((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement("input", {
+    role: "searchbox",
     className: prefix('input'),
     value: value,
     onChange: handleChange,

package/esm/Picker/TreeView.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    treeRootClassName: string;
+    multiselectable?: boolean;
+}
+declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+export default TreeView;

package/esm/Picker/TreeView.js

@@ -0,0 +1,25 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import useCombobox from './hooks/useCombobox';
+var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    treeRootClassName = props.treeRootClassName,
+    multiselectable = props.multiselectable,
+    rest = _objectWithoutPropertiesLoose(props, ["children", "treeRootClassName", "multiselectable"]);
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-multiselectable": multiselectable,
+    "aria-labelledby": labelId,
+    ref: ref
+  }, rest), /*#__PURE__*/React.createElement("div", {
+    className: treeRootClassName
+  }, children));
+});
+export default TreeView;

package/esm/Picker/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { default as usePickerRef } from './usePickerRef';
+export { default as useCombobox } from './useCombobox';
+export { default as useFocusItemValue } from './useFocusItemValue';
+export { default as useToggleKeyDownEvent } from './useToggleKeyDownEvent';
+export { default as useSearch } from './useSearch';
+export { default as usePickerClassName } from './usePickerClassName';

package/esm/Picker/hooks/index.js

@@ -0,0 +1,7 @@
+'use client';
+export { default as usePickerRef } from './usePickerRef';
+export { default as useCombobox } from './useCombobox';
+export { default as useFocusItemValue } from './useFocusItemValue';
+export { default as useToggleKeyDownEvent } from './useToggleKeyDownEvent';
+export { default as useSearch } from './useSearch';
+export { default as usePickerClassName } from './usePickerClassName';

package/esm/Picker/hooks/useCombobox.d.ts

@@ -0,0 +1,7 @@
+declare function useCombobox(): {
+    id: string | undefined;
+    popupType: "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    multiple: boolean | undefined;
+    labelId: string | undefined;
+};
+export default useCombobox;

package/esm/Picker/hooks/useCombobox.js

@@ -0,0 +1,17 @@
+'use client';
+import { useContext } from 'react';
+import { ComboboxContextContext } from '../PickerToggleTrigger';
+function useCombobox() {
+  var _useContext = useContext(ComboboxContextContext),
+    id = _useContext.id,
+    hasLabel = _useContext.hasLabel,
+    popupType = _useContext.popupType,
+    multiple = _useContext.multiple;
+  return {
+    id: id,
+    popupType: popupType,
+    multiple: multiple,
+    labelId: hasLabel ? id + "-label" : undefined
+  };
+}
+export default useCombobox;

package/esm/Picker/hooks/useFocusItemValue.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+interface FocusItemValueProps<T = unknown> {
+    target: HTMLElement | null | (() => HTMLElement | null);
+    data?: T[];
+    /**
+     *  When the down arrow key is pressed, whether to automatically focus on the option
+     */
+    focusToOption?: boolean;
+    valueKey?: string;
+    focusableQueryKey?: string;
+    defaultLayer?: number;
+    rtl?: boolean;
+    callback?: (value: any, event: React.KeyboardEvent) => void;
+    getParent?: (node: T) => T | undefined;
+}
+/**
+ * A hook that manages the focus state of the option.
+ * @param defaultFocusItemValue
+ * @param props
+ */
+declare const useFocusItemValue: <T, D>(defaultFocusItemValue: T | null | undefined, props: FocusItemValueProps<D>) => {
+    focusItemValue: T | null | undefined;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<T | null | undefined>>;
+    layer: number;
+    setLayer: import("react").Dispatch<import("react").SetStateAction<number>>;
+    keys: any[];
+    setKeys: import("react").Dispatch<import("react").SetStateAction<any[]>>;
+    onKeyDown: (...args: any[]) => any;
+};
+export default useFocusItemValue;