rsuite 5.49.0 → 5.51.0

package/esm/Cascader/Cascader.js

@@ -1,7 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useRef, useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useSet } from 'react-use-set';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
@@ -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 } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { getSafeRegExpString, createChainedFunction, mergeRefs, useControlled, useCustom, useClassNames, useIsMounted, useEventCallback } from '../utils';
+import { PickerToggle, PickerPopup, SearchBar, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
 import { useMap } from '../utils/useMap';
 var emptyArray = [];
 
@@ -76,10 +76,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     active = _useState[0],
     setActive = _useState[1];
-  var triggerRef = useRef(null);
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var searchInputRef = useRef(null);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay,
+    searchInput = _usePickerRef.searchInput;
   var _ref = useControlled(valueProp, defaultValue),
     value = _ref[0],
     setValue = _ref[1];
@@ -120,11 +122,6 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     columnsToDisplay = _usePaths.columnsToDisplay,
     pathTowardsActiveItem = _usePaths.pathTowardsActiveItem,
     pathTowardsSelectedItem = _usePaths.pathTowardsSelectedItem;
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef
-  });
   var _useCustom = useCustom('Picker', overrideLocale),
     locale = _useCustom.locale,
     rtl = _useCustom.rtl;
@@ -139,7 +136,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState3 = useState(''),
     searchKeyword = _useState3[0],
     setSearchKeyword = _useState3[1];
-  var someKeyword = useCallback(function (item, keyword) {
+  var someKeyword = function someKeyword(item, keyword) {
     if (item[labelKey].match(new RegExp(getSafeRegExpString(keyword || searchKeyword), 'i'))) {
       return true;
     }
@@ -148,8 +145,8 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return true;
     }
     return false;
-  }, [labelKey, parentMap, searchKeyword]);
-  var getSearchResult = useCallback(function (keyword) {
+  };
+  var getSearchResult = function getSearchResult(keyword) {
     var items = [];
     var result = flattenedData.filter(function (item) {
       if (!parentSelectable && item[childrenKey]) {
@@ -166,7 +163,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     }
     return items;
-  }, [childrenKey, flattenedData, someKeyword, parentSelectable]);
+  };
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(value, {
@@ -175,7 +172,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       valueKey: valueKey,
       defaultLayer: pathTowardsSelectedItem !== null && pathTowardsSelectedItem !== void 0 && pathTowardsSelectedItem.length ? pathTowardsSelectedItem.length - 1 : 0,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       },
       getParent: function getParent(item) {
         return parentMap.get(item);
@@ -191,7 +188,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setLayer = _useFocusItemValue.setLayer,
     setKeys = _useFocusItemValue.setKeys,
     onFocusItem = _useFocusItemValue.onKeyDown;
-  var handleSearch = useCallback(function (value, event) {
+  var handleSearch = useEventCallback(function (value, event) {
     var items = getSearchResult(value);
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
@@ -204,37 +201,37 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setLayer(0);
       setKeys([]);
     }
-  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
-  var handleEntered = useCallback(function () {
-    if (!targetRef.current) {
+  });
+  var handleEntered = useEventCallback(function () {
+    if (!target.current) {
       return;
     }
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
-    if (!targetRef.current) {
+  });
+  var handleExited = useEventCallback(function () {
+    if (!target.current) {
       return;
     }
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
-  }, [onClose]);
-  var handleClose = useCallback(function () {
-    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
+  });
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _target$current, _target$current$focus;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.close();
 
     // The focus is on the trigger button after closing
-    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
-  }, []);
-  var handleClean = useCallback(function (event) {
-    if (disabled || !targetRef.current) {
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : (_target$current$focus = _target$current.focus) === null || _target$current$focus === void 0 ? void 0 : _target$current$focus.call(_target$current);
+  });
+  var handleClean = useEventCallback(function (event) {
+    if (disabled || !target.current) {
       return;
     }
     setValue(null);
     onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
-  }, [disabled, onChange, setValue]);
-  var handleMenuPressEnter = useCallback(function (event) {
+  });
+  var handleMenuPressEnter = useEventCallback(function (event) {
     var focusItem = findNodeOfTree(data, function (item) {
       return item[valueKey] === focusItemValue;
     });
@@ -250,20 +247,20 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
       handleClose();
     }
-  }, [childrenKey, data, focusItemValue, handleClose, onChange, pathTowardsActiveItem, setLayer, setValue, value, valueKey, onSelect]);
+  });
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     toggle: !focusItemValue || !active,
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    overlayRef: overlayRef,
-    searchInputRef: searchInputRef,
+    trigger: trigger,
+    target: target,
+    overlay: overlay,
+    searchInput: searchInput,
     active: active,
     onExit: handleClean,
     onMenuKeyDown: onFocusItem,
     onMenuPressEnter: handleMenuPressEnter
   }, rest));
-  var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
-    var _node$childrenKey, _triggerRef$current2;
+  var handleSelect = useEventCallback(function (node, cascadePaths, isLeafNode, event) {
+    var _node$childrenKey, _trigger$current2;
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
     setActiveItem(node);
     var nextValue = node[valueKey];
@@ -301,20 +298,20 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     // Update menu position
-    (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.updatePosition();
-  };
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.updatePosition();
+  });
 
   /**
    * The search structure option is processed after being selected.
    */
-  var handleSearchRowSelect = function handleSearchRowSelect(node, nodes, event) {
+  var handleSearchRowSelect = useEventCallback(function (node, nodes, event) {
     var nextValue = node[valueKey];
     handleClose();
     setSearchKeyword('');
     setValue(nextValue);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-  };
+  });
   var renderSearchRow = function renderSearchRow(item, key) {
     var regx = new RegExp(getSafeRegExpString(searchKeyword), 'ig');
     var nodes = getPathTowardsItem(item, function (item) {
@@ -352,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);
@@ -373,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,
@@ -390,19 +387,18 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var classes = merge(className, menuClassName, prefix('cascader-menu', {
       inline: inline
     }));
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
-      ref: mergeRefs(overlayRef, speakerRef),
+    return /*#__PURE__*/React.createElement(PickerPopup, {
+      ref: mergeRefs(overlay, speakerRef),
       className: classes,
       style: styles,
-      target: triggerRef,
+      target: trigger,
       onKeyDown: onPickerKeyDown
     }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
-      inputRef: searchInputRef
-    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+      inputRef: searchInput
+    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/React.createElement(TreeView, {
       menuWidth: menuWidth,
       menuHeight: menuHeight,
       disabledItemValues: disabledItemValues,
@@ -455,21 +451,23 @@ 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: triggerRef,
+    ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
-    ref: targetRef,
+    ref: target,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
@@ -479,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;