rsuite 5.50.0 → 5.51.0

package/esm/@types/common.d.ts

@@ -77,6 +77,14 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     onOpen?: () => void;
     /** Called when Modal is closed */
     onClose?: () => void;
+    /**
+     * Called when the component is focused.
+     */
+    onFocus?: React.FocusEventHandler<any>;
+    /**
+     * Called when the component is blurred.
+     */
+    onBlur?: React.FocusEventHandler<any>;
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }

package/esm/AutoComplete/AutoComplete.js

@@ -5,12 +5,12 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
-import Input from '../Input';
 import { useClassNames, useControlled, useIsMounted, useEventCallback, PLACEMENT, mergeRefs, partitionHTMLProps } from '../utils';
 import { animationPropTypes } from '../Animation/utils';
-import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from '../Picker';
+import { PickerToggleTrigger, onMenuKeyDown, Listbox, ListItem, PickerPopup, useFocusItemValue, usePickerRef, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
 import Plaintext from '../Plaintext';
+import Combobox from './Combobox';
 /**
  * Autocomplete function of input field.
  * @see https://rsuitejs.com/components/auto-complete
@@ -72,6 +72,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
       data: datalist,
+      focusToOption: false,
       callback: onMenuFocus,
       target: function target() {
         return overlay.current;
@@ -154,7 +155,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _partitionHTMLProps = partitionHTMLProps(omit(rest, pickTriggerPropKeys)),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -162,18 +163,17 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     };
-    var menu = /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = /*#__PURE__*/React.createElement(Listbox, {
       classPrefix: "auto-complete-menu",
-      dropdownMenuItemClassPrefix: "auto-complete-item",
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemClassPrefix: "auto-complete-item",
+      listItemAs: ListItem,
       focusItemValue: focusItemValue,
       onSelect: handleItemSelect,
       renderMenuItem: renderMenuItem,
       data: items,
       className: menuClassName
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       style: styles,
       className: className,
@@ -188,23 +188,26 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
+  var expanded = open || focus && hasItems;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
     ref: trigger,
     placement: placement,
     pickerProps: pick(props, pickTriggerPropKeys),
     trigger: ['click', 'focus'],
-    open: open || focus && hasItems,
-    speaker: renderDropdownMenu
+    open: expanded,
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, _extends({
     className: classes,
     style: style,
     ref: root
-  }, restProps), /*#__PURE__*/React.createElement(Input, _extends({}, htmlInputProps, {
-    id: id,
+  }, restProps), /*#__PURE__*/React.createElement(Combobox, _extends({}, htmlInputProps, {
     disabled: disabled,
     value: value,
     size: size,
     readOnly: readOnly,
+    expanded: expanded,
+    focusItemValue: focusItemValue,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,

package/esm/AutoComplete/Combobox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type InputProps } from '../Input';
+interface ComboboxProps extends InputProps {
+    expanded?: boolean;
+    focusItemValue?: string | null;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Combobox;

package/esm/AutoComplete/Combobox.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 '../Picker';
+import Input from '../Input';
+var Combobox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    popupType = _useCombobox.popupType;
+  var expanded = props.expanded,
+    focusItemValue = props.focusItemValue,
+    rest = _objectWithoutPropertiesLoose(props, ["expanded", "focusItemValue"]);
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-haspopup": popupType,
+    "aria-expanded": expanded,
+    "aria-activedescendant": focusItemValue ? id + "-opt-" + focusItemValue : undefined,
+    autoComplete: "off",
+    id: id,
+    ref: ref
+  }, rest));
+});
+export default Combobox;

package/esm/Calendar/CalendarContainer.js

@@ -1,14 +1,14 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import MonthDropdown from './MonthDropdown';
 import TimeDropdown from './TimeDropdown';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
 import { CalendarProvider } from './CalendarContext';
 import useCalendarState, { CalendarState } from './useCalendarState';
@@ -62,42 +62,42 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var calendarDate = useMemo(function () {
     return isValid(calendarDateProp) ? calendarDateProp : new Date();
   }, [calendarDateProp]);
-  var isDisabledDate = useCallback(function (date) {
+  var isDisabledDate = useEventCallback(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  }, [disabledDate]);
+  });
   var isTimeDisabled = function isTimeDisabled(date) {
     return disabledTime(props, date);
   };
-  var handleMoveForward = useCallback(function () {
+  var handleMoveForward = useEventCallback(function () {
     onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(calendarDate, 1));
-  }, [onMoveForward, calendarDate]);
-  var handleMoveBackward = useCallback(function () {
+  });
+  var handleMoveBackward = useEventCallback(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(calendarDate, -1));
-  }, [onMoveBackward, calendarDate]);
+  });
 
   // It is displayed as the month to be selected.
-  var toggleMonthView = useCallback(function () {
+  var toggleMonthView = useEventCallback(function () {
     if (calendarState === CalendarState.MONTH) {
       reset();
     } else {
       openMonth();
     }
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== CalendarState.MONTH);
-  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);
+  });
 
   // It is displayed as a time to be selected.
-  var toggleTimeView = useCallback(function () {
+  var toggleTimeView = useEventCallback(function () {
     if (calendarState === CalendarState.TIME) {
       reset();
     } else {
       openTime();
     }
     onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== CalendarState.TIME);
-  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
-  var handleCloseDropdown = useCallback(function () {
+  });
+  var handleCloseDropdown = useEventCallback(function () {
     return reset();
-  }, [reset]);
+  });
   var renderDate = shouldRenderDate(format);
   var renderTime = shouldRenderTime(format);
   var renderMonth = shouldRenderMonth(format);
@@ -105,40 +105,38 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onlyShowMonth = renderMonth && !renderDate && !renderTime;
   var showTime = calendarState === CalendarState.TIME || onlyShowTime;
   var showMonth = calendarState === CalendarState.MONTH || onlyShowMonth;
-  var inSameThisMonthDate = useCallback(function (date) {
+  var inSameThisMonthDate = useEventCallback(function (date) {
     return isSameMonth(calendarDate, date);
-  }, [calendarDate]);
+  });
   var calendarClasses = merge(className, withClassPrefix({
     'time-view': showTime,
     'month-view': showMonth,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = pick(rest, calendarOnlyProps);
-  var handleChangeMonth = useCallback(function (date, event) {
+  var handleChangeMonth = useEventCallback(function (date, event) {
     reset();
     onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
-  }, [onChangeMonth, reset]);
-  var contextValue = useMemo(function () {
-    return {
-      date: calendarDate,
-      dateRange: dateRange,
-      disabledDate: isDisabledDate,
-      format: format,
-      hoverRangeValue: hoverRangeValue,
-      inSameMonth: inSameThisMonthDate,
-      isoWeek: isoWeek,
-      targetId: targetId,
-      locale: locale,
-      onChangeMonth: handleChangeMonth,
-      onChangeTime: onChangeTime,
-      onMouseMove: onMouseMove,
-      onSelect: onSelect,
-      cellClassName: cellClassName,
-      renderCell: renderCell,
-      showWeekNumbers: showWeekNumbers,
-      inline: inline
-    };
-  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameThisMonthDate, inline, isDisabledDate, isoWeek, targetId, locale, onChangeTime, onMouseMove, onSelect, cellClassName, renderCell, showWeekNumbers]);
+  });
+  var contextValue = {
+    date: calendarDate,
+    dateRange: dateRange,
+    disabledDate: isDisabledDate,
+    format: format,
+    hoverRangeValue: hoverRangeValue,
+    inSameMonth: inSameThisMonthDate,
+    isoWeek: isoWeek,
+    targetId: targetId,
+    locale: locale,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: onChangeTime,
+    onMouseMove: onMouseMove,
+    onSelect: onSelect,
+    cellClassName: cellClassName,
+    renderCell: renderCell,
+    showWeekNumbers: showWeekNumbers,
+    inline: inline
+  };
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Component, _extends({

package/esm/Cascader/Cascader.js

@@ -9,11 +9,11 @@ import pick from 'lodash/pick';
 import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import shallowEqual from '../utils/shallowEqual';
-import DropdownMenu from './DropdownMenu';
+import TreeView from './TreeView';
 import { getParentMap, getPathTowardsItem, findNodeOfTree, flattenTree } from '../utils/treeUtils';
 import { usePaths } from './utils';
 import { getSafeRegExpString, createChainedFunction, mergeRefs, useControlled, useCustom, useClassNames, useIsMounted, useEventCallback } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, PickerPopup, SearchBar, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { useMap } from '../utils/useMap';
 var emptyArray = [];
 
@@ -349,12 +349,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, node[labelKey]);
     });
     return /*#__PURE__*/React.createElement("div", {
+      role: "treeitem",
       key: key,
       "aria-disabled": disabled,
       "data-key": item[valueKey],
       className: itemClasses,
       tabIndex: -1,
-      role: "option",
       onClick: function onClick(event) {
         if (!disabled) {
           handleSearchRowSelect(item, nodes, event);
@@ -370,12 +370,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('cascader-search-panel'),
       "data-layer": 0,
-      role: "listbox"
+      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 _ref2 = positionProps || {},
       left = _ref2.left,
       top = _ref2.top,
@@ -387,7 +387,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var classes = merge(className, menuClassName, prefix('cascader-menu', {
       inline: inline
     }));
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       className: classes,
       style: styles,
@@ -398,8 +398,7 @@ var Cascader = /*#__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, {
       menuWidth: menuWidth,
       menuHeight: menuHeight,
       disabledItemValues: disabledItemValues,
@@ -452,21 +451,22 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1]; // TODO: bad api design
   //       consider an isolated Menu component
   if (inline) {
-    return renderDropdownMenu();
+    return renderTreeView();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
-    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,
     ref: target,
     as: toggleAs,
     appearance: appearance,
@@ -477,7 +477,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: active,
     placement: placement,
-    inputValue: value !== null && value !== void 0 ? value : ''
+    inputValue: value !== null && value !== void 0 ? value : '',
+    focusItemValue: focusItemValue
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
 });
 Cascader.displayName = 'Cascader';

package/esm/Cascader/DropdownMenu.d.ts

@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './Cascader';
 declare type SetLike<T = unknown> = {
     has(value: T): boolean;
 };
-export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
+export interface TreeViewProps extends Omit<WithAsProps, 'classPrefix'> {
     classPrefix: string;
     disabledItemValues: ValueType[];
     activeItemValue?: ValueType | null;
@@ -21,21 +20,5 @@ export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
     renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
     onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;
 }
-declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;
-export declare const dropdownMenuPropTypes: {
-    classPrefix: PropTypes.Requireable<string>;
-    disabledItemValues: PropTypes.Requireable<any[]>;
-    activeItemValue: PropTypes.Requireable<any>;
-    childrenKey: PropTypes.Requireable<string>;
-    valueKey: PropTypes.Requireable<string>;
-    labelKey: PropTypes.Requireable<string>;
-    menuWidth: PropTypes.Requireable<number>;
-    menuHeight: PropTypes.Requireable<string | number>;
-    className: PropTypes.Requireable<string>;
-    renderMenuItem: PropTypes.Requireable<(...args: any[]) => any>;
-    renderMenu: PropTypes.Requireable<(...args: any[]) => any>;
-    onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    cascadeData: PropTypes.Requireable<any[]>;
-    cascadePaths: PropTypes.Requireable<any[]>;
-};
-export default DropdownMenu;
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;

package/esm/Cascader/DropdownMenu.js

@@ -1,19 +1,18 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import isUndefined from 'lodash/isUndefined';
 import isNil from 'lodash/isNil';
-import { shallowEqual, useClassNames, mergeRefs, useCustom } from '../utils';
-import { DropdownMenuItem } from '../Picker';
+import { shallowEqual, useClassNames, mergeRefs, useCustom, useEventCallback } from '../utils';
+import { ListItem, useCombobox } from '../Picker';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
 import getPosition from 'dom-lib/getPosition';
 import scrollTop from 'dom-lib/scrollTop';
 var emptyArray = [];
-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,
     activeItemValue = props.activeItemValue,
@@ -36,17 +35,22 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     loadingItemsSet = props.loadingItemsSet,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
     renderMenu = props.renderMenu,
     renderMenuItem = props.renderMenuItem,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "renderMenu", "renderMenuItem", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "activeItemValue", "classPrefix", "className", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "valueKey", "cascadeData", "cascadePaths", "loadingItemsSet", "labelKey", "style", "renderMenu", "renderMenuItem", "onSelect"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, prefix('items'));
   var rootRef = useRef();
-  var _useCustom = useCustom('DropdownMenu'),
+  var _useCustom = useCustom(),
     rtl = _useCustom.rtl;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType;
   useEffect(function () {
     var _rootRef$current;
     var columns = ((_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.querySelectorAll('[data-type="column"]')) || [];
@@ -65,7 +69,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   }, [prefix]);
-  var getCascadePaths = useCallback(function (layer, node) {
+  var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
     for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
@@ -74,14 +78,19 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     paths.push(node);
     return paths;
-  }, [cascadeData, cascadePaths]);
-  var handleSelect = function handleSelect(layer, node, event) {
+  };
+  var handleSelect = useEventCallback(function (layer, node, event) {
     var isLeafNode = isNil(node[childrenKey]);
     var cascadePaths = getCascadePaths(layer + 1, node);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, isLeafNode, event);
-  };
-  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus) {
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
     var _loadingItemsSet$has;
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      size = nodeProps.size;
     var children = node[childrenKey];
     var value = node[valueKey];
     var label = node[labelKey];
@@ -93,16 +102,19 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
     var Icon = loading ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
-    return /*#__PURE__*/React.createElement(DropdownMenuItem, {
-      classPrefix: "picker-cascader-menu-item",
+    return /*#__PURE__*/React.createElement(ListItem, {
       as: 'li',
       role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
+      classPrefix: "picker-cascader-menu-item",
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: !isUndefined(activeItemValue) && shallowEqual(activeItemValue, value),
       focus: focus,
       value: value,
-      "aria-owns": node.children ? 'treeitem-' + value + '-children' : undefined,
       className: children ? prefix('has-children') : undefined,
       onSelect: function onSelect(_value, event) {
         return handleSelect(layer, node, event);
@@ -112,54 +124,43 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
       spin: loading
     }) : null);
   };
-  var styles = {
-    width: cascadeData.length * menuWidth
-  };
   var cascadeNodes = cascadeData.map(function (children, layer) {
     var onlyKey = layer + "_" + children.length;
     var parentNode = cascadePaths[layer - 1];
-    var menu = /*#__PURE__*/React.createElement("ul", {
-      role: layer === 0 ? 'none presentation' : 'group',
-      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined
-    }, children.map(function (item, index) {
-      return renderCascadeNode(item, index, layer, cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]));
+    var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        size: children.length
+      });
     }));
-    return /*#__PURE__*/React.createElement("div", {
-      key: onlyKey,
-      className: prefix('column'),
+    return /*#__PURE__*/React.createElement("ul", {
+      role: "group",
       "data-layer": layer,
       "data-type": 'column',
+      key: onlyKey,
+      className: prefix('column'),
       style: {
         height: menuHeight,
         width: menuWidth
       }
     }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
   });
+  var styles = _extends({}, style, {
+    width: cascadeData.length * menuWidth
+  });
   return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "tree"
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId
   }, rest, {
     ref: mergeRefs(rootRef, ref),
-    className: classes
-  }), /*#__PURE__*/React.createElement("div", {
+    className: classes,
     style: styles
-  }, cascadeNodes));
+  }), cascadeNodes);
 });
-export var dropdownMenuPropTypes = {
-  classPrefix: PropTypes.string,
-  disabledItemValues: PropTypes.array,
-  activeItemValue: PropTypes.any,
-  childrenKey: PropTypes.string,
-  valueKey: PropTypes.string,
-  labelKey: PropTypes.string,
-  menuWidth: PropTypes.number,
-  menuHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  renderMenuItem: PropTypes.func,
-  renderMenu: PropTypes.func,
-  onSelect: PropTypes.func,
-  cascadeData: PropTypes.array,
-  cascadePaths: PropTypes.array
-};
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = dropdownMenuPropTypes;
-export default DropdownMenu;
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/esm/Cascader/TreeView.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { ValueType } from './Cascader';
+declare type SetLike<T = unknown> = {
+    has(value: T): boolean;
+};
+export interface TreeViewProps extends Omit<WithAsProps, 'classPrefix'> {
+    classPrefix: string;
+    disabledItemValues: ValueType[];
+    activeItemValue?: ValueType | null;
+    childrenKey: string;
+    cascadeData: (readonly ItemDataType[])[];
+    loadingItemsSet?: SetLike<ItemDataType>;
+    cascadePaths: ItemDataType[];
+    valueKey: string;
+    labelKey: string;
+    menuWidth?: number;
+    menuHeight?: number | string;
+    renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
+    renderMenu?: (items: readonly ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
+    onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;
+}
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;