rsuite 5.50.0 → 5.51.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [5.51.0](https://github.com/rsuite/rsuite/compare/v5.50.0...v5.51.0) (2024-01-19)
+
+### Bug Fixes
+
+- **InputGroup:** fix style conflict caused by zIndex set in InputGoup ([#3552](https://github.com/rsuite/rsuite/issues/3552)) ([f874edf](https://github.com/rsuite/rsuite/commit/f874edfdbf0dbc9a53e4fe26fb9cf39108f1a00c))
+
+### Features
+
+- **Form:** add support for `nestedField` prop on Form ([#3568](https://github.com/rsuite/rsuite/issues/3568)) ([47fce55](https://github.com/rsuite/rsuite/commit/47fce559b159f128fd2f89ffc36c0e9bcfd3f25b))
+- improve accessibility of all pickers ([#3558](https://github.com/rsuite/rsuite/issues/3558)) ([8ad3cfd](https://github.com/rsuite/rsuite/commit/8ad3cfd4f1a2de16b52fec2bed5e4a9ea509f824))
+
 # [5.50.0](https://github.com/rsuite/rsuite/compare/v5.49.0...v5.50.0) (2024-01-12)
 
 ### Bug Fixes

package/CheckTreePicker/styles/index.less

@@ -69,7 +69,7 @@
   .rs-check-item {
     display: inline-block;
 
-    .rs-picker-menu & {
+    .rs-picker-popup & {
       display: block;
     }
   }
@@ -135,7 +135,7 @@
 
 // node children
 .rs-check-tree-node-children {
-  > .rs-check-tree-children {
+  > .rs-check-tree-group {
     position: relative;
     display: none;
 
@@ -154,7 +154,7 @@
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.rs-picker-menu {
+.rs-picker-popup {
   display: flex;
   flex-direction: column;
 

package/DatePicker/styles/index.less

@@ -55,7 +55,7 @@
 }
 
 // Calendar in DatePicker popup
-.rs-picker-menu {
+.rs-picker-popup {
   @calendar-width: 264px; // This is a fixed value per design.
 
   @calendar-padding-x: 15px;

package/Form/styles/mixin.less

@@ -114,10 +114,9 @@
   @height: ~'input-height-@{size-name}';
   @useable-height: (@@height - 2px);
   @vertical: ~'padding-@{size-name}-vertical';
-  @add-on-padding: ~'input-group-padding-for-add-on-@{size-name}';
 
   &.rs-input-group-inside > .rs-input {
-    padding-right: @@add-on-padding;
+    padding-right: 0;
   }
 
   &.rs-input-group {

package/InputGroup/styles/index.less

@@ -102,11 +102,6 @@
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
-    z-index: @zindex-input;
-
-    &:focus {
-      z-index: (@zindex-input+1);
-    }
   }
 
   input.rs-input ~ .rs-input-group-addon,
@@ -136,7 +131,6 @@
 
     .rs-input-group-btn,
     .rs-input-group-addon {
-      z-index: @zindex-input-group-icon;
       flex: 0 0 auto;
       width: auto;
     }
@@ -380,13 +374,6 @@
     + .rs-btn {
       margin-left: -1px;
     }
-
-    // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 2;
-    }
   }
 
   // Negative margin to only have a 1px border between the two
@@ -401,7 +388,6 @@
   &:last-child {
     > .rs-btn,
     > .rs-btn-group {
-      z-index: 2;
       margin-left: -1px;
     }
   }

package/InputPicker/styles/index.less

@@ -33,7 +33,7 @@
   .input-picker-input-sizes();
 }
 
-.rs-picker-tag-wrapper {
+.rs-picker-textbox {
   margin-right: @dropdown-toggle-padding-right;
   min-height: 34px;
 

package/Picker/styles/index.less

@@ -287,10 +287,10 @@
 }
 
 // Picker Menu
-.rs-picker-menu {
+.rs-picker-popup {
   position: absolute;
   text-align: left;
-  z-index: @zindex-picker-menu;
+  z-index: @zindex-picker-popup;
   border-radius: @border-radius;
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-shadow-overlay);

package/Picker/styles/mixin.less

@@ -223,14 +223,14 @@
 }
 
 .tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
-  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-tag-wrapper .rs-picker-search-input {
+  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-textbox .rs-picker-search-input {
     padding: (@padding-vertical - 1px) @padding-horizontal;
     font-size: @font-size;
     line-height: @line-height;
   }
 
   // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
-  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -281,7 +281,7 @@
   );
   /* stylelint-enable */
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-input.rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-y-xs - 1px;
 
     .rs-tag {

package/TagInput/styles/index.less

@@ -4,7 +4,7 @@
   .rs-picker-toggle {
     padding-right: @dropdown-toggle-padding-right !important;
   }
-  .rs-picker-tag-wrapper {
+  .rs-picker-textbox {
     margin-right: @dropdown-toggle-padding-right !important;
   }
   .rs-picker-clean {

package/TagPicker/styles/index.less

@@ -52,7 +52,7 @@
     }
   }
 
-  .rs-picker-tag-wrapper {
+  .rs-picker-textbox {
     position: relative;
     // make sure tag in front of toggle
     z-index: @zindex-picker-toggle + 1;
@@ -60,6 +60,10 @@
   }
 }
 
+.rs-picker-tag-list {
+  display: contents;
+}
+
 .rs-plaintext .rs-tag {
   margin-left: 6px;
   margin-bottom: 6px;

package/TreePicker/styles/index.less

@@ -192,7 +192,7 @@
 
 // node children
 .rs-tree-node-children {
-  > .rs-tree-children {
+  > .rs-tree-group {
     position: relative;
     display: none;
 
@@ -211,7 +211,7 @@
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.rs-picker-menu {
+.rs-picker-popup {
   &.rs-tree-menu {
     padding-top: @picker-menu-padding;
 

package/cjs/@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/cjs/AutoComplete/AutoComplete.js

@@ -11,12 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../utils");
 var _utils2 = require("../Animation/utils");
 var _Picker = require("../Picker");
 var _utils3 = require("./utils");
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Combobox = _interopRequireDefault(require("./Combobox"));
 /**
  * Autocomplete function of input field.
  * @see https://rsuitejs.com/components/auto-complete
@@ -78,6 +78,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
       data: datalist,
+      focusToOption: false,
       callback: onMenuFocus,
       target: function target() {
         return overlay.current;
@@ -160,7 +161,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.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;
@@ -168,18 +169,17 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       left: left,
       top: top
     };
-    var menu = /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       classPrefix: "auto-complete-menu",
-      dropdownMenuItemClassPrefix: "auto-complete-item",
-      dropdownMenuItemAs: _Picker.DropdownMenuItem,
+      listItemClassPrefix: "auto-complete-item",
+      listItemAs: _Picker.ListItem,
       focusItemValue: focusItemValue,
       onSelect: handleItemSelect,
       renderMenuItem: renderMenuItem,
       data: items,
       className: menuClassName
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       className: className,
@@ -194,23 +194,26 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
+  var expanded = open || focus && hasItems;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
     ref: trigger,
     placement: placement,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     trigger: ['click', 'focus'],
-    open: open || focus && hasItems,
-    speaker: renderDropdownMenu
+    open: expanded,
+    speaker: renderPopup
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: classes,
     style: style,
     ref: root
-  }, restProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
-    id: id,
+  }, restProps), /*#__PURE__*/_react.default.createElement(_Combobox.default, (0, _extends2.default)({}, htmlInputProps, {
     disabled: disabled,
     value: value,
     size: size,
     readOnly: readOnly,
+    expanded: expanded,
+    focusItemValue: focusItemValue,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,

package/cjs/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/cjs/AutoComplete/Combobox.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Picker = require("../Picker");
+var _Input = _interopRequireDefault(require("../Input"));
+var Combobox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useCombobox = (0, _Picker.useCombobox)(),
+    id = _useCombobox.id,
+    popupType = _useCombobox.popupType;
+  var expanded = props.expanded,
+    focusItemValue = props.focusItemValue,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["expanded", "focusItemValue"]);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
+    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));
+});
+var _default = Combobox;
+exports.default = _default;

package/cjs/Calendar/CalendarContainer.js

@@ -68,42 +68,42 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var calendarDate = (0, _react.useMemo)(function () {
     return (0, _dateUtils.isValid)(calendarDateProp) ? calendarDateProp : new Date();
   }, [calendarDateProp]);
-  var isDisabledDate = (0, _react.useCallback)(function (date) {
+  var isDisabledDate = (0, _utils.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 (0, _dateUtils.disabledTime)(props, date);
   };
-  var handleMoveForward = (0, _react.useCallback)(function () {
+  var handleMoveForward = (0, _utils.useEventCallback)(function () {
     onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _dateUtils.addMonths)(calendarDate, 1));
-  }, [onMoveForward, calendarDate]);
-  var handleMoveBackward = (0, _react.useCallback)(function () {
+  });
+  var handleMoveBackward = (0, _utils.useEventCallback)(function () {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(calendarDate, -1));
-  }, [onMoveBackward, calendarDate]);
+  });
 
   // It is displayed as the month to be selected.
-  var toggleMonthView = (0, _react.useCallback)(function () {
+  var toggleMonthView = (0, _utils.useEventCallback)(function () {
     if (calendarState === _useCalendarState2.CalendarState.MONTH) {
       reset();
     } else {
       openMonth();
     }
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(calendarState !== _useCalendarState2.CalendarState.MONTH);
-  }, [calendarState, onToggleMonthDropdown, openMonth, reset]);
+  });
 
   // It is displayed as a time to be selected.
-  var toggleTimeView = (0, _react.useCallback)(function () {
+  var toggleTimeView = (0, _utils.useEventCallback)(function () {
     if (calendarState === _useCalendarState2.CalendarState.TIME) {
       reset();
     } else {
       openTime();
     }
     onToggleTimeDropdown === null || onToggleTimeDropdown === void 0 ? void 0 : onToggleTimeDropdown(calendarState !== _useCalendarState2.CalendarState.TIME);
-  }, [calendarState, onToggleTimeDropdown, openTime, reset]);
-  var handleCloseDropdown = (0, _react.useCallback)(function () {
+  });
+  var handleCloseDropdown = (0, _utils.useEventCallback)(function () {
     return reset();
-  }, [reset]);
+  });
   var renderDate = (0, _dateUtils.shouldRenderDate)(format);
   var renderTime = (0, _dateUtils.shouldRenderTime)(format);
   var renderMonth = (0, _dateUtils.shouldRenderMonth)(format);
@@ -111,40 +111,38 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var onlyShowMonth = renderMonth && !renderDate && !renderTime;
   var showTime = calendarState === _useCalendarState2.CalendarState.TIME || onlyShowTime;
   var showMonth = calendarState === _useCalendarState2.CalendarState.MONTH || onlyShowMonth;
-  var inSameThisMonthDate = (0, _react.useCallback)(function (date) {
+  var inSameThisMonthDate = (0, _utils.useEventCallback)(function (date) {
     return (0, _dateUtils.isSameMonth)(calendarDate, date);
-  }, [calendarDate]);
+  });
   var calendarClasses = merge(className, withClassPrefix({
     'time-view': showTime,
     'month-view': showMonth,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = (0, _pick.default)(rest, _dateUtils.calendarOnlyProps);
-  var handleChangeMonth = (0, _react.useCallback)(function (date, event) {
+  var handleChangeMonth = (0, _utils.useEventCallback)(function (date, event) {
     reset();
     onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
-  }, [onChangeMonth, reset]);
-  var contextValue = (0, _react.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.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({

package/cjs/Cascader/Cascader.js

@@ -15,7 +15,7 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
-var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
+var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _treeUtils = require("../utils/treeUtils");
 var _utils = require("./utils");
 var _utils2 = require("../utils");
@@ -355,12 +355,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }, node[labelKey]);
     });
     return /*#__PURE__*/_react.default.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);
@@ -376,12 +376,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('cascader-search-panel'),
       "data-layer": 0,
-      role: "listbox"
+      role: "tree"
     }, items.length ? items.map(renderSearchRow) : /*#__PURE__*/_react.default.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,
@@ -393,7 +393,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var classes = merge(className, menuClassName, prefix('cascader-menu', {
       inline: inline
     }));
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       ref: (0, _utils2.mergeRefs)(overlay, speakerRef),
       className: classes,
       style: styles,
@@ -404,8 +404,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onChange: handleSearch,
       value: searchKeyword,
       inputRef: searchInput
-    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
-      id: id ? id + "-listbox" : undefined,
+    }), renderSearchResultPanel(), searchKeyword === '' && /*#__PURE__*/_react.default.createElement(_TreeView.default, {
       menuWidth: menuWidth,
       menuHeight: menuHeight,
       disabledItemValues: disabledItemValues,
@@ -458,21 +457,22 @@ var Cascader = /*#__PURE__*/_react.default.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.default.createElement(_Picker.PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEntered: (0, _utils2.createChainedFunction)(handleEntered, onEnter),
     onExited: (0, _utils2.createChainedFunction)(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderTreeView
   }, /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends3.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     as: toggleAs,
     appearance: appearance,
@@ -483,7 +483,8 @@ var Cascader = /*#__PURE__*/_react.default.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/cjs/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;