rsuite 5.50.0 → 5.52.0

package/VisuallyHidden/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/VisuallyHidden",
+  "private": true,
+  "main": "../cjs/VisuallyHidden/index.js",
+  "module": "../esm/VisuallyHidden/index.js",
+  "types": "../esm/VisuallyHidden/index.d.ts"
+}

package/VisuallyHidden/styles/index.css

@@ -0,0 +1,13 @@
+.rs-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+/*# sourceMappingURL=index.css.map */

package/VisuallyHidden/styles/index.less

@@ -0,0 +1,11 @@
+.rs-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

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/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/cjs/Accordion/Accordion.js

@@ -0,0 +1,24 @@
+'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 _react = _interopRequireDefault(require("react"));
+var _PanelGroup = _interopRequireDefault(require("../PanelGroup"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+/**
+ * The `Accordion` component is used to display content that can be collapsed.
+ * @see https://rsuitejs.com/components/accordion
+ */
+var Accordion = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_PanelGroup.default, (0, _extends2.default)({
+    accordion: true,
+    ref: ref
+  }, props));
+});
+Accordion.Panel = _Panel.default;
+Accordion.displayName = 'Accordion';
+var _default = Accordion;
+exports.default = _default;

package/cjs/Accordion/index.d.ts

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

package/cjs/Accordion/index.js

@@ -0,0 +1,9 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Accordion = _interopRequireDefault(require("./Accordion"));
+var _default = _Accordion.default;
+exports.default = _default;

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

@@ -11,12 +11,13 @@ 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 _Picker = require("../internals/Picker");
+var _Plaintext = _interopRequireDefault(require("../internals/Plaintext"));
+var _propTypes2 = require("../internals/propTypes");
 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 +79,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 +162,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 +170,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 +195,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,
@@ -229,7 +233,7 @@ AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes,
   className: _propTypes.default.string,
   menuClassName: _propTypes.default.string,
   menuAutoWidth: _propTypes.default.bool,
-  placement: _propTypes.default.oneOf(_utils.PLACEMENT),
+  placement: (0, _propTypes2.oneOf)(_utils.PLACEMENT),
   onFocus: _propTypes.default.func,
   onMenuFocus: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -240,7 +244,7 @@ AutoComplete.propTypes = (0, _extends2.default)({}, _utils2.animationPropTypes,
   renderMenu: _propTypes.default.func,
   renderMenuItem: _propTypes.default.func,
   style: _propTypes.default.object,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
   open: _propTypes.default.bool,
   selectOnEnter: _propTypes.default.bool,
   filterBy: _propTypes.default.func

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

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _AvatarGroup = require("../AvatarGroup/AvatarGroup");
+var _propTypes2 = require("../internals/propTypes");
 var _templateObject;
 /**
  * The Avatar component is used to represent user or brand.
@@ -58,7 +59,7 @@ Avatar.propTypes = {
   classPrefix: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.node,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
   src: _propTypes.default.string,
   sizes: _propTypes.default.string,
   srcSet: _propTypes.default.string,

package/cjs/AvatarGroup/AvatarGroup.js

@@ -10,6 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var AvatarGroupContext = /*#__PURE__*/_react.default.createContext({});
 
 /**
@@ -61,7 +62,7 @@ AvatarGroup.propTypes = {
   children: _propTypes.default.node,
   stack: _propTypes.default.bool,
   spacing: _propTypes.default.number,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs'])
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs'])
 };
 var _default = AvatarGroup;
 exports.default = _default;

package/cjs/Badge/Badge.js

@@ -9,6 +9,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
+var _propTypes2 = require("../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
@@ -62,7 +63,7 @@ Badge.propTypes = {
   as: _propTypes.default.elementType,
   content: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.bool]),
   maxCount: _propTypes.default.number,
-  color: _propTypes.default.oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
+  color: (0, _propTypes2.oneOf)(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'])
 };
 var _default = Badge;
 exports.default = _default;

package/cjs/Button/Button.js

@@ -12,8 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ButtonGroup = require("../ButtonGroup");
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
-var _Ripple = _interopRequireDefault(require("../Ripple"));
+var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 var _templateObject, _templateObject2, _templateObject3;
 /**
  * The Button component is used to trigger a custom action.
@@ -87,16 +88,16 @@ Button.displayName = 'Button';
 Button.propTypes = {
   as: _propTypes.default.elementType,
   active: _propTypes.default.bool,
-  appearance: _propTypes.default.oneOf(['default', 'primary', 'link', 'subtle', 'ghost']),
+  appearance: (0, _propTypes2.oneOf)(['default', 'primary', 'link', 'subtle', 'ghost']),
   block: _propTypes.default.bool,
   children: _propTypes.default.node,
-  color: _propTypes.default.oneOf(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
+  color: (0, _propTypes2.oneOf)(['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet']),
   disabled: _propTypes.default.bool,
   href: _propTypes.default.string,
   loading: _propTypes.default.bool,
   ripple: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs']),
-  type: _propTypes.default.oneOf(['button', 'reset', 'submit'])
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs']),
+  type: (0, _propTypes2.oneOf)(['button', 'reset', 'submit'])
 };
 var _default = Button;
 exports.default = _default;

package/cjs/ButtonGroup/ButtonGroup.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _ButtonGroupContext = _interopRequireDefault(require("./ButtonGroupContext"));
+var _propTypes2 = require("../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
@@ -60,7 +61,7 @@ ButtonGroup.propTypes = {
   vertical: _propTypes.default.bool,
   justified: _propTypes.default.bool,
   role: _propTypes.default.string,
-  size: _propTypes.default.oneOf(['lg', 'md', 'sm', 'xs'])
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm', 'xs'])
 };
 var _default = ButtonGroup;
 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 = function inSameThisMonthDate(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/Calendar/MonthDropdown.js

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _Windowing = require("../Windowing");
+var _Windowing = require("../internals/Windowing");
 var _utils = require("../utils");
 var _MonthDropdownItem = _interopRequireDefault(require("./MonthDropdownItem"));
 var _CalendarContext = require("./CalendarContext");

package/cjs/Carousel/Carousel.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+var _propTypes2 = require("../internals/propTypes");
 /**
  * The Carousel component is used to display a series of content.
  * @see https://rsuitejs.com/components/carousel
@@ -162,8 +163,8 @@ Carousel.propTypes = {
   defaultActiveIndex: _propTypes.default.number,
   autoplay: _propTypes.default.bool,
   autoplayInterval: _propTypes.default.number,
-  placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
-  shape: _propTypes.default.oneOf(['dot', 'bar']),
+  placement: (0, _propTypes2.oneOf)(['top', 'bottom', 'left', 'right']),
+  shape: (0, _propTypes2.oneOf)(['dot', 'bar']),
   onSelect: _propTypes.default.func,
   onSlideStart: _propTypes.default.func,
   onSlideEnd: _propTypes.default.func

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

@@ -15,12 +15,14 @@ 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");
-var _Picker = require("../Picker");
+var _Picker = require("../internals/Picker");
+var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
 var _useMap = require("../utils/useMap");
+var _propTypes2 = require("../internals/propTypes");
 var emptyArray = [];
 
 /**
@@ -355,12 +357,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 +378,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,19 +395,18 @@ 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,
       target: trigger,
       onKeyDown: onPickerKeyDown
-    }, searchable && /*#__PURE__*/_react.default.createElement(_Picker.SearchBar, {
+    }, searchable && /*#__PURE__*/_react.default.createElement(_SearchBox.default, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       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 +459,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,14 +485,15 @@ 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';
 Cascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {
   disabledItemValues: _propTypes.default.array,
   locale: _propTypes.default.any,
-  appearance: _propTypes.default.oneOf(['default', 'subtle']),
+  appearance: (0, _propTypes2.oneOf)(['default', 'subtle']),
   renderMenu: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onSearch: _propTypes.default.func,