rsuite 5.50.0 → 5.52.0

package/esm/InputPicker/InputPicker.js

@@ -2,7 +2,7 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React, { useState, useRef, useEffect, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
@@ -16,14 +16,26 @@ import pick from 'lodash/pick';
 import getWidth from 'dom-lib/getWidth';
 import shallowEqual from '../utils/shallowEqual';
 import { filterNodesOfTree } from '../utils/treeUtils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
 import { createChainedFunction, tplTransform, useClassNames, useCustom, useControlled, useEventCallback, mergeRefs, isOneOf, KEY_VALUES } from '../utils';
+import { oneOf } from '../internals/propTypes';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, DropdownMenuCheckItem, PickerToggle, PickerOverlay, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListItem, ListCheckItem, PickerToggle, PickerPopup, PickerToggleTrigger, useFocusItemValue, usePickerClassName, useSearch, usePickerRef, useToggleKeyDownEvent, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
 import Tag from '../Tag';
 import InputAutosize from './InputAutosize';
-import InputSearch from './InputSearch';
+import TextBox from './TextBox';
 import InputPickerContext from './InputPickerContext';
+var convertSize = function convertSize(size) {
+  switch (size) {
+    case 'lg':
+      return 'lg';
+    case 'sm':
+    case 'xs':
+      return 'sm';
+    default:
+      return 'md';
+  }
+};
 /**
  * Single item selector with text box input.
  *
@@ -206,7 +218,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     (_triggerRef$current3 = triggerRef.current) === null || _triggerRef$current3 === void 0 ? void 0 : (_triggerRef$current3$ = _triggerRef$current3.updatePosition) === null || _triggerRef$current3$ === void 0 ? void 0 : _triggerRef$current3$.call(_triggerRef$current3);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchKeyword, value]);
-  var getDateItem = function getDateItem(value) {
+  var getDataItem = function getDataItem(value) {
     // Find active `MenuItem` by `value`
     var allData = getAllDataAndCache();
     var activeItem = allData.find(function (item) {
@@ -464,7 +476,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     blurInput();
     setOpen(false);
   });
-  var renderDropdownMenuItem = function renderDropdownMenuItem(label, item) {
+  var renderListItem = function renderListItem(label, item) {
     // 'Create option "{0}"' =>  Create option "xxxxx"
     var newLabel = item.create ? /*#__PURE__*/React.createElement("span", null, tplTransform(locale.createOption, label)) : label;
     return renderMenuItem ? renderMenuItem(newLabel, item) : newLabel;
@@ -476,7 +488,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemNode: null
       };
     }
-    var dataItem = getDateItem(value);
+    var dataItem = getDataItem(value);
     var itemNode = dataItem.itemNode;
     if (!isNil(value) && isFunction(renderValue)) {
       itemNode = renderValue(value, dataItem.activeItem, itemNode);
@@ -497,17 +509,19 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var tags = value || [];
     var items = [];
     var tagElements = tags.map(function (tag) {
-      var _getDateItem = getDateItem(tag),
-        isValid = _getDateItem.isValid,
-        itemNode = _getDateItem.itemNode,
-        activeItem = _getDateItem.activeItem;
+      var _getDataItem = getDataItem(tag),
+        isValid = _getDataItem.isValid,
+        itemNode = _getDataItem.itemNode,
+        activeItem = _getDataItem.activeItem;
       items.push(activeItem);
       if (!isValid) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(Tag, _extends({}, tagRest, {
+      return /*#__PURE__*/React.createElement(Tag, _extends({
+        role: "option"
+      }, tagRest, {
         key: tag,
-        size: rest.size === 'lg' ? 'lg' : rest.size === 'xs' ? 'sm' : 'md',
+        size: convertSize(rest.size),
         closable: !disabled && closable && !readOnly && !plaintext,
         title: typeof itemNode === 'string' ? itemNode : undefined,
         onClose: createChainedFunction(handleRemoveItemByTag.bind(null, tag), onClose)
@@ -520,7 +534,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return tagElements;
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -544,21 +558,20 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       items = items.sort(sort(false));
     }
     if (disabledOptions) {
-      return /*#__PURE__*/React.createElement(PickerOverlay, {
+      return /*#__PURE__*/React.createElement(PickerPopup, {
         ref: mergeRefs(overlay, speakerRef)
       });
     }
-    var menu = items.length ? /*#__PURE__*/React.createElement(DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = items.length ? /*#__PURE__*/React.createElement(Listbox, {
       listProps: listProps,
       listRef: list,
       disabledItemValues: disabledItemValues,
       valueKey: valueKey,
       labelKey: labelKey,
       classPrefix: menuClassPrefix,
-      dropdownMenuItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
-      dropdownMenuItemAs: multi ? DropdownMenuCheckItem : DropdownMenuItem,
-      dropdownMenuItemProps: {
+      listItemClassPrefix: multi ? undefined : menuClassPrefix + "-item",
+      listItemAs: multi ? ListCheckItem : ListItem,
+      listItemProps: {
         renderMenuItemCheckbox: renderMenuItemCheckbox
       },
       activeItemValues: multi ? value : [value],
@@ -573,12 +586,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect: multi ? handleCheckTag : handleSelectItem // fixme don't use any
       ,
       renderMenuGroup: renderMenuGroup,
-      renderMenuItem: renderDropdownMenuItem,
+      renderMenuItem: renderListItem,
       virtualized: virtualized
     }) : /*#__PURE__*/React.createElement("div", {
       className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["none"])))
     }, locale === null || locale === void 0 ? void 0 : locale.noResultsText);
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       ref: mergeRefs(overlay, speakerRef),
       autoWidth: menuAutoWidth,
       className: classes,
@@ -611,7 +624,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
-  var displaySearchInput = searchable && !disabled && !rest.loading;
+  var editable = searchable && !disabled && !rest.loading;
   var inputProps = multi ? {
     inputStyle: {
       maxWidth: maxWidth - 63
@@ -637,6 +650,8 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
   var placeholderNode = placeholder || (disabledOptions ? null : locale === null || locale === void 0 ? void 0 : locale.placeholder);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    multiple: multi,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
     trigger: "active",
@@ -644,7 +659,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntered: createChainedFunction(onEntered, onOpen),
     onExit: createChainedFunction(handleExit, onExit),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu,
+    speaker: renderPopup,
     placement: placement
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
@@ -653,7 +668,6 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: onPickerKeyDown,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
@@ -667,23 +681,27 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled: disabled,
     placement: placement,
     inputValue: value,
+    focusItemValue: focusItemValue,
     caret: !disabledOptions
-  }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
-    className: prefix(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
-  }, tagElements, displaySearchInput && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
-    tabIndex: -1,
+  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
+    showTagList: hasValue && multi,
+    tags: tagElements,
+    editable: editable,
     readOnly: readOnly,
+    disabled: disabled,
+    multiple: multi,
     onBlur: onBlur,
     onFocus: createChainedFunction(handleFocus, onFocus),
     inputRef: inputRef,
     onChange: handleSearch,
-    value: open ? searchKeyword : ''
-  })))));
+    inputValue: open ? searchKeyword : '',
+    inputProps: inputProps
+  })));
 });
 InputPicker.displayName = 'InputPicker';
 InputPicker.propTypes = _extends({}, listPickerPropTypes, {
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   cacheData: PropTypes.array,
   menuAutoWidth: PropTypes.bool,
   menuMaxHeight: PropTypes.number,

package/esm/InputPicker/InputSearch.js

@@ -3,9 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { TypeChecker, useClassNames } from '../utils';
+import React from 'react';
+import { useClassNames, useEventCallback } from '../utils';
 var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'input' : _props$as,
@@ -19,10 +18,10 @@ var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
     readOnly = props.readOnly,
     onChange = props.onChange,
     rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "children", "className", "value", "inputRef", "style", "readOnly", "onChange"]);
-  var handleChange = useCallback(function (event) {
+  var handleChange = useEventCallback(function (event) {
     var _event$target;
     onChange === null || onChange === void 0 ? void 0 : onChange(event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value, event);
-  }, [onChange]);
+  });
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge,
@@ -41,14 +40,4 @@ var InputSearch = /*#__PURE__*/React.forwardRef(function (props, ref) {
   })), children);
 });
 InputSearch.displayName = 'InputSearch';
-InputSearch.propTypes = {
-  classPrefix: PropTypes.string,
-  value: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node,
-  style: PropTypes.object,
-  inputRef: TypeChecker.refType,
-  as: PropTypes.elementType,
-  onChange: PropTypes.func
-};
 export default InputSearch;

package/esm/InputPicker/TagList.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TagList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export default TagList;

package/esm/InputPicker/TagList.js

@@ -0,0 +1,23 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
+import React from 'react';
+import { useClassNames } from '../utils';
+import useCombobox from '../internals/Picker/hooks/useCombobox';
+var TagList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var children = props.children,
+    rest = _objectWithoutPropertiesLoose(props, ["children"]);
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "listbox",
+    id: id + "-describe",
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["tag-list"])))
+  }, rest), children);
+});
+export default TagList;

package/esm/InputPicker/TextBox.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { InputSearchProps } from './InputSearch';
+interface TextBoxProps {
+    tags?: React.ReactNode;
+    inputProps?: InputSearchProps;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    inputValue?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+    editable?: boolean;
+    multiple?: boolean;
+    showTagList?: boolean;
+}
+declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<HTMLDivElement>>;
+export default TextBox;

package/esm/InputPicker/TextBox.js

@@ -0,0 +1,42 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject;
+import React from 'react';
+import TagList from './TagList';
+import { useClassNames } from '../utils';
+import InputSearch from './InputSearch';
+var TextBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var tags = props.tags,
+    inputProps = props.inputProps,
+    readOnly = props.readOnly,
+    disabled = props.disabled,
+    multiple = props.multiple,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    onChange = props.onChange,
+    inputValue = props.inputValue,
+    inputRef = props.inputRef,
+    editable = props.editable,
+    showTagList = props.showTagList,
+    rest = _objectWithoutPropertiesLoose(props, ["tags", "inputProps", "readOnly", "disabled", "multiple", "onBlur", "onFocus", "onChange", "inputValue", "inputRef", "editable", "showTagList"]);
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  if (!multiple && disabled) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["textbox"]))),
+    ref: ref
+  }, rest), showTagList ? /*#__PURE__*/React.createElement(TagList, null, tags) : null, editable && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
+    tabIndex: -1,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    inputRef: inputRef,
+    onChange: onChange,
+    value: inputValue
+  })));
+});
+export default TextBox;

package/esm/InputPicker/index.d.ts

@@ -1,3 +1,3 @@
 import InputPicker from './InputPicker';
-export type { InputPickerProps } from './InputPicker';
+export type { InputPickerProps, InputItemDataType } from './InputPicker';
 export default InputPicker;

package/esm/List/List.js

@@ -7,6 +7,7 @@ import useSortHelper from './helper/useSortHelper';
 import { mergeRefs, useClassNames } from '../utils';
 import ListContext from './ListContext';
 import ListItem from './ListItem';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `List` component is used to specify the layout of the list.
  * @see https://rsuitejs.com/components/list
@@ -83,7 +84,7 @@ List.propTypes = {
   bordered: PropTypes.bool,
   hover: PropTypes.bool,
   sortable: PropTypes.bool,
-  size: PropTypes.oneOf(['lg', 'md', 'sm']),
+  size: oneOf(['lg', 'md', 'sm']),
   autoScroll: PropTypes.bool,
   pressDelay: PropTypes.number,
   transitionDuration: PropTypes.number,

package/esm/List/helper/useSortHelper.d.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler } from 'react';
 import { Collection, ManagedItem } from './useManager';
-interface MovedItemInfo {
+export interface MovedItemInfo {
     collection: Collection;
     node: HTMLElement;
     newIndex: number;

package/esm/Loader/Loader.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 `Loader` component is used to indicate the loading state of a page or a section.
  * @see https://rsuitejs.com/components/loader
@@ -60,7 +61,7 @@ Loader.propTypes = {
   inverse: PropTypes.bool,
   vertical: PropTypes.bool,
   content: PropTypes.node,
-  size: PropTypes.oneOf(['lg', 'md', 'sm', 'xs']),
-  speed: PropTypes.oneOf(['normal', 'fast', 'slow'])
+  size: oneOf(['lg', 'md', 'sm', 'xs']),
+  speed: oneOf(['normal', 'fast', 'slow'])
 };
 export default Loader;

package/esm/Message/Message.js

@@ -6,7 +6,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import React, { useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, STATUS, useIsMounted } from '../utils';
-import CloseButton from '../CloseButton';
+import { oneOf } from '../internals/propTypes';
+import CloseButton from '../internals/CloseButton';
 import ToastContext from '../toaster/ToastContext';
 /**
  * The `Message` component is used to display important messages to users.
@@ -79,7 +80,7 @@ var Message = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Message.displayName = 'Message';
 Message.propTypes = {
-  type: PropTypes.oneOf(STATUS),
+  type: oneOf(STATUS),
   className: PropTypes.string,
   onClose: PropTypes.func,
   closable: PropTypes.bool,

package/esm/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseModalProps } from '../Overlay/Modal';
+import { BaseModalProps } from '../internals/Overlay/Modal';
 import ModalDialog from './ModalDialog';
 import ModalBody from './ModalBody';
 import ModalHeader from './ModalHeader';

package/esm/Modal/Modal.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
 import getAnimationEnd from 'dom-lib/getAnimationEnd';
-import BaseModal, { modalPropTypes } from '../Overlay/Modal';
+import BaseModal, { modalPropTypes } from '../internals/Overlay/Modal';
 import Bounce from '../Animation/Bounce';
 import { useClassNames, mergeRefs, useWillUnmount } from '../utils';
 import ModalDialog, { modalDialogPropTypes } from './ModalDialog';
@@ -19,7 +19,7 @@ import ModalTitle from './ModalTitle';
 import ModalFooter from './ModalFooter';
 import { useBodyStyles } from './utils';
 import useUniqueId from '../utils/useUniqueId';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import DrawerContext from '../Drawer/DrawerContext';
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 /**
@@ -211,11 +211,10 @@ Modal.propTypes = _extends({}, modalPropTypes, {
   animationTimeout: PropTypes.number,
   classPrefix: PropTypes.string,
   dialogClassName: PropTypes.string,
-  size: PropTypes.oneOfType([PropTypes.oneOf(modalSizes), PropTypes.number, PropTypes.string]),
+  size: PropTypes.oneOfType([oneOf(modalSizes), PropTypes.number, PropTypes.string]),
   dialogStyle: PropTypes.object,
   dialogAs: PropTypes.elementType,
   full: deprecatePropType(PropTypes.bool, 'Use size="full" instead.'),
-  overflow: PropTypes.bool,
-  drawer: PropTypes.bool
+  overflow: PropTypes.bool
 });
 export default Modal;

package/esm/Modal/ModalDialog.js

@@ -6,8 +6,9 @@ var _templateObject;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, SIZE } from '../utils';
+import { oneOf } from '../internals/propTypes';
 export var modalDialogPropTypes = {
-  size: PropTypes.oneOf(SIZE),
+  size: oneOf(SIZE),
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   dialogClassName: PropTypes.string,

package/esm/Modal/ModalHeader.js

@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { createChainedFunction, useClassNames } from '../utils';
 import { ModalContext } from './ModalContext';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
 import Close from '@rsuite/icons/Close';
 import IconButton from '../IconButton';
 import DrawerContext from '../Drawer/DrawerContext';

package/esm/MultiCascader/MultiCascader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent, PickerToggleProps } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../internals/Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (number | string)[];
 export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'loading'> {

package/esm/MultiCascader/MultiCascader.js

@@ -7,13 +7,15 @@ import pick from 'lodash/pick';
 import omit from 'lodash/omit';
 import isFunction from 'lodash/isFunction';
 import isNil from 'lodash/isNil';
-import DropdownMenu from './DropdownMenu';
+import TreeView from './TreeView';
 import Checkbox from '../Checkbox';
 import { useCascadeValue, useColumnData, useFlattenData, isSomeChildChecked } from './utils';
 import { getNodeParents, findNodeOfTree } from '../utils/treeUtils';
 import { getColumnsAndPaths } from '../Cascader/utils';
 import { createChainedFunction, mergeRefs, getSafeRegExpString, useClassNames, useCustom, useUpdateEffect, useControlled, useEventCallback } from '../utils';
-import { PickerToggle, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { PickerToggle, PickerPopup, SelectedElement, PickerToggleTrigger, usePickerClassName, usePickerRef, useToggleKeyDownEvent, useFocusItemValue, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
+import { oneOf } from '../internals/propTypes';
 var emptyArray = [];
 
 /**
@@ -328,9 +330,10 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       'cascader-row-focus': item[valueKey] === focusItemValue
     });
     return /*#__PURE__*/React.createElement("div", {
+      role: "treeitem",
+      "aria-disabled": disabled,
       key: key,
       className: itemClasses,
-      "aria-disabled": disabled,
       "data-key": item[valueKey]
     }, /*#__PURE__*/React.createElement(Checkbox, {
       disabled: disabled,
@@ -359,12 +362,13 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var items = getSearchResult();
     return /*#__PURE__*/React.createElement("div", {
       className: prefix('cascader-search-panel'),
-      "data-layer": 0
+      "data-layer": 0,
+      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 _ref = positionProps || {},
       left = _ref.left,
       top = _ref.top,
@@ -376,19 +380,18 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var classes = merge(className, menuClassName, prefix('cascader-menu', 'multi-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, {
       cascade: cascade,
       menuWidth: menuWidth,
       menuHeight: menuHeight,
@@ -438,22 +441,24 @@ var MultiCascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   if (inline) {
-    return renderDropdownMenu();
+    return renderTreeView();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
+    multiple: true,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEnter: createChainedFunction(handleEntered, onEnter),
     onExited: createChainedFunction(handleExited, onExited),
     onExit: createChainedFunction(onClose, onExit),
-    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,
     as: toggleAs,
     appearance: appearance,
     disabled: disabled,
@@ -472,7 +477,7 @@ MultiCascader.propTypes = _extends({}, listPickerPropTypes, {
   value: PropTypes.array,
   disabledItemValues: PropTypes.array,
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   cascade: PropTypes.bool,
   inline: PropTypes.bool,
   countable: PropTypes.bool,

package/esm/MultiCascader/{DropdownMenu.d.ts → TreeView.d.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './MultiCascader';
-export interface DropdownMenuProps extends WithAsProps {
+export interface TreeViewProps extends WithAsProps {
     disabledItemValues: ValueType;
     value: ValueType;
     childrenKey: string;
@@ -21,5 +21,5 @@ export interface DropdownMenuProps extends WithAsProps {
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-declare const DropdownMenu: RsRefForwardingComponent<'div', DropdownMenuProps>;
-export default DropdownMenu;
+declare const TreeView: RsRefForwardingComponent<'div', TreeViewProps>;
+export default TreeView;