rsuite 5.50.0 → 5.52.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/Accordion/Accordion.d.ts

@@ -0,0 +1,13 @@
+import { type PanelGroupProps } from '../PanelGroup';
+import Panel from '../Panel';
+import { RsRefForwardingComponent } from '../@types/common';
+export declare type AccordionProps = Omit<PanelGroupProps, 'accordion'>;
+export interface AccordionComponent extends RsRefForwardingComponent<'div', AccordionProps> {
+    Panel: typeof Panel;
+}
+/**
+ * The `Accordion` component is used to display content that can be collapsed.
+ * @see https://rsuitejs.com/components/accordion
+ */
+declare const Accordion: AccordionComponent;
+export default Accordion;

package/esm/Accordion/Accordion.js

@@ -0,0 +1,18 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import PanelGroup from '../PanelGroup';
+import Panel from '../Panel';
+/**
+ * The `Accordion` component is used to display content that can be collapsed.
+ * @see https://rsuitejs.com/components/accordion
+ */
+var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(PanelGroup, _extends({
+    accordion: true,
+    ref: ref
+  }, props));
+});
+Accordion.Panel = Panel;
+Accordion.displayName = 'Accordion';
+export default Accordion;

package/esm/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+export type { AccordionProps } from './Accordion';
+export default Accordion;

package/esm/Accordion/index.js

@@ -0,0 +1,3 @@
+'use client';
+import Accordion from './Accordion';
+export default Accordion;

package/esm/AutoComplete/AutoComplete.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PickerComponent } from '../Picker';
+import { PickerComponent } from '../internals/Picker';
 import { WithAsProps, FormControlPickerProps, TypeAttributes, ItemDataType } from '../@types/common';
 export declare type ValueType = string;
 export interface AutoCompleteProps<T = ValueType> extends WithAsProps, FormControlPickerProps<T, any, ItemDataType | string> {

package/esm/AutoComplete/AutoComplete.js

@@ -5,12 +5,13 @@ 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 '../internals/Picker';
+import Plaintext from '../internals/Plaintext';
+import { oneOf } from '../internals/propTypes';
 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 +73,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 +156,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 +164,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 +189,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,
@@ -223,7 +227,7 @@ AutoComplete.propTypes = _extends({}, animationPropTypes, {
   className: PropTypes.string,
   menuClassName: PropTypes.string,
   menuAutoWidth: PropTypes.bool,
-  placement: PropTypes.oneOf(PLACEMENT),
+  placement: oneOf(PLACEMENT),
   onFocus: PropTypes.func,
   onMenuFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -234,7 +238,7 @@ AutoComplete.propTypes = _extends({}, animationPropTypes, {
   renderMenu: PropTypes.func,
   renderMenuItem: PropTypes.func,
   style: PropTypes.object,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
+  size: oneOf(['lg', 'md', 'sm', 'xs']),
   open: PropTypes.bool,
   selectOnEnter: PropTypes.bool,
   filterBy: PropTypes.func

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 '../internals/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/Avatar/Avatar.js

@@ -7,6 +7,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import { AvatarGroupContext } from '../AvatarGroup/AvatarGroup';
+import { oneOf } from '../internals/propTypes';
 /**
  * The Avatar component is used to represent user or brand.
  * @see https://rsuitejs.com/components/avatar
@@ -52,7 +53,7 @@ Avatar.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
+  size: oneOf(['lg', 'md', 'sm', 'xs']),
   src: PropTypes.string,
   sizes: PropTypes.string,
   srcSet: PropTypes.string,

package/esm/AvatarGroup/AvatarGroup.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useCustom } from '../utils';
+import { oneOf } from '../internals/propTypes';
 export var AvatarGroupContext = /*#__PURE__*/React.createContext({});
 
 /**
@@ -54,6 +55,6 @@ AvatarGroup.propTypes = {
   children: PropTypes.node,
   stack: PropTypes.bool,
   spacing: PropTypes.number,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs'])
+  size: oneOf(['lg', 'md', 'sm', 'xs'])
 };
 export default AvatarGroup;

package/esm/Badge/Badge.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The Badge component is usually used to mark or highlight the status or quantity of an object.
  * @see https://rsuitejs.com/components/badge
@@ -57,6 +58,6 @@ Badge.propTypes = {
   as: PropTypes.elementType,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   maxCount: PropTypes.number,
-  color: PropTypes.oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
+  color: oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
 };
 export default Badge;

package/esm/Button/Button.js

@@ -7,8 +7,9 @@ import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroupContext } from '../ButtonGroup';
 import SafeAnchor from '../SafeAnchor';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import { isOneOf, useClassNames } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The Button component is used to trigger a custom action.
  * @see https://rsuitejs.com/components/button
@@ -81,15 +82,15 @@ Button.displayName = 'Button';
 Button.propTypes = {
   as: PropTypes.elementType,
   active: PropTypes.bool,
-  appearance: PropTypes.oneOf(['default', 'primary', 'link', 'subtle', 'ghost']),
+  appearance: oneOf(['default', 'primary', 'link', 'subtle', 'ghost']),
   block: PropTypes.bool,
   children: PropTypes.node,
-  color: PropTypes.oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
+  color: oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
   disabled: PropTypes.bool,
   href: PropTypes.string,
   loading: PropTypes.bool,
   ripple: PropTypes.bool,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
-  type: PropTypes.oneOf(['button', 'reset', 'submit'])
+  size: oneOf(['lg', 'md', 'sm', 'xs']),
+  type: oneOf(['button', 'reset', 'submit'])
 };
 export default Button;

package/esm/ButtonGroup/ButtonGroup.js

@@ -5,6 +5,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import ButtonGroupContext from './ButtonGroupContext';
+import { oneOf } from '../internals/propTypes';
 /**
  * The ButtonGroup component is used to group a series of buttons together in a single line or column.
  * @see https://rsuitejs.com/components/button/#button-group
@@ -54,6 +55,6 @@ ButtonGroup.propTypes = {
   vertical: PropTypes.bool,
   justified: PropTypes.bool,
   role: PropTypes.string,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs'])
+  size: oneOf(['lg', 'md', 'sm', 'xs'])
 };
 export default ButtonGroup;

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 = function inSameThisMonthDate(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/Calendar/MonthDropdown.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { AutoSizer, FixedSizeList } from '../Windowing';
+import { AutoSizer, FixedSizeList } from '../internals/Windowing';
 import { DateUtils, useClassNames } from '../utils';
 import MonthDropdownItem from './MonthDropdownItem';
 import { useCalendarContext } from './CalendarContext';

package/esm/Carousel/Carousel.js

@@ -5,6 +5,7 @@ import React, { useState, useMemo, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useClassNames, useCustom, guid, ReactChildren, useTimeout, mergeRefs, useControlled, useUpdateEffect } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The Carousel component is used to display a series of content.
  * @see https://rsuitejs.com/components/carousel
@@ -156,8 +157,8 @@ Carousel.propTypes = {
   defaultActiveIndex: PropTypes.number,
   autoplay: PropTypes.bool,
   autoplayInterval: PropTypes.number,
-  placement: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  shape: PropTypes.oneOf(['dot', 'bar']),
+  placement: oneOf(['top', 'bottom', 'left', 'right']),
+  shape: oneOf(['dot', 'bar']),
   onSelect: PropTypes.func,
   onSlideStart: PropTypes.func,
   onSlideEnd: PropTypes.func

package/esm/Cascader/Cascader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerHandle, PickerToggleProps } from '../Picker';
+import { PickerHandle, PickerToggleProps } from '../internals/Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 export declare type ValueType = number | string;
-export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>>, Pick<PickerToggleProps, 'loading'> {
+export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
     /** Sets the width of the menu */
     menuWidth?: number;
     /** Sets the height of the menu */

package/esm/Cascader/Cascader.js

@@ -9,12 +9,14 @@ 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, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
 import { useMap } from '../utils/useMap';
+import { oneOf } from '../internals/propTypes';
 var emptyArray = [];
 
 /**
@@ -349,12 +351,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 +372,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,19 +389,18 @@ 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,
       target: trigger,
       onKeyDown: onPickerKeyDown
-    }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
+    }, searchable && /*#__PURE__*/React.createElement(SearchBox, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       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 +453,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,14 +479,15 @@ 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';
 Cascader.propTypes = _extends({}, listPickerPropTypes, {
   disabledItemValues: PropTypes.array,
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   renderMenu: PropTypes.func,
   onSelect: PropTypes.func,
   onSearch: PropTypes.func,

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;