rsuite 5.50.0 → 5.52.0

package/esm/Sidenav/SidenavItem.js

@@ -5,14 +5,15 @@ import React, { useContext, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import { useClassNames, shallowEqual, mergeRefs, createChainedFunction } from '../utils';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
-import MenuItem from '../Menu/MenuItem';
+import MenuItem from '../internals/Menu/MenuItem';
 import omit from 'lodash/omit';
 import { SidenavContext } from './Sidenav';
 import Whisper from '../Whisper';
 import Tooltip from '../Tooltip';
+import classNames from 'classnames';
 /**
  * @private
  */
@@ -56,6 +57,9 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelectFromNav === null || onSelectFromNav === void 0 ? void 0 : onSelectFromNav(eventKey, event);
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [disabled, onSelect, onSelectFromNav, eventKey, onClick]);
+  var clonedIcon = icon ? /*#__PURE__*/React.cloneElement(icon, {
+    className: classNames(prefix('icon'), icon.props.className)
+  }) : null;
   if (!sidenav.expanded) {
     return /*#__PURE__*/React.createElement(Whisper, {
       trigger: "hover",
@@ -86,9 +90,7 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }, omit(rest, ['divider', 'panel']), triggerProps, menuitem, {
           onMouseOver: createChainedFunction(menuitem.onMouseOver, triggerProps.onMouseOver),
           onMouseOut: createChainedFunction(menuitem.onMouseOut, triggerProps.onMouseOut)
-        }), icon && /*#__PURE__*/React.cloneElement(icon, {
-          className: prefix('icon')
-        }), children, /*#__PURE__*/React.createElement(Ripple, null));
+        }), clonedIcon, children, /*#__PURE__*/React.createElement(Ripple, null));
       });
     });
   }
@@ -118,9 +120,7 @@ var SidenavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": selected || undefined,
     "data-event-key": eventKey
-  }, rest), icon && /*#__PURE__*/React.cloneElement(icon, {
-    className: prefix('icon')
-  }), children, /*#__PURE__*/React.createElement(Ripple, null));
+  }, rest), clonedIcon, children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 SidenavItem.displayName = 'Sidenav.Item';
 SidenavItem.propTypes = {

package/esm/Sidenav/SidenavToggle.js

@@ -7,7 +7,7 @@ import IconButton from '../IconButton';
 import { useClassNames } from '../utils';
 import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType } from '../internals/propTypes';
 import { SidenavContext } from './Sidenav';
 var SidenavToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var sidenav = useContext(SidenavContext);

package/esm/Slider/Slider.js

@@ -11,7 +11,7 @@ import Handle from './Handle';
 import Graduated from './Graduated';
 import { useClassNames, useControlled, useCustom } from '../utils';
 import { precisionMath, checkValue } from './utils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
 export var sliderPropTypes = {
   min: PropTypes.number,
   max: PropTypes.number,

package/esm/Stack/Stack.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useCustom, isSupportFlexGap } from '../utils';
+import { oneOf } from '../internals/propTypes';
 import StackItem from './StackItem';
 /**
  * The `Stack` component is a quick layout component through Flexbox,
@@ -75,9 +76,9 @@ Stack.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   classPrefix: PropTypes.string,
-  direction: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
-  alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
-  justifyContent: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
+  direction: oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
+  alignItems: oneOf(['flex-start', 'center', 'flex-end', 'stretch', 'baseline']),
+  justifyContent: oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
   spacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
   divider: PropTypes.node,
   wrap: PropTypes.bool

package/esm/Stack/StackItem.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `Stack.Item` component is used to set the layout of the child element in the `Stack` component.
  *
@@ -38,7 +39,7 @@ StackItem.displayName = 'StackItem';
 StackItem.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
-  alignSelf: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
+  alignSelf: oneOf(['flex-start', 'flex-end', 'center', 'baseline', 'stretch']),
   flex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   grow: PropTypes.number,
   shrink: PropTypes.number,

package/esm/Steps/StepItem.js

@@ -5,6 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Check from '@rsuite/icons/Check';
 import Close from '@rsuite/icons/Close';
+import { oneOf } from '../internals/propTypes';
 import { useClassNames } from '../utils';
 var STEP_STATUS_ICON = {
   finish: /*#__PURE__*/React.createElement(Check, null),
@@ -72,7 +73,7 @@ StepItem.propTypes = {
   classPrefix: PropTypes.string,
   style: PropTypes.object,
   itemWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  status: PropTypes.oneOf(['finish', 'wait', 'process', 'error']),
+  status: oneOf(['finish', 'wait', 'process', 'error']),
   icon: PropTypes.object,
   stepNumber: PropTypes.number,
   description: PropTypes.node,

package/esm/Steps/Steps.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, ReactChildren } from '../utils';
+import { oneOf } from '../internals/propTypes';
 import StepItem from './StepItem';
 /**
  * The `Steps` component is used to guide users to complete tasks in accordance with the process.
@@ -74,6 +75,6 @@ Steps.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
   current: PropTypes.number,
-  currentStatus: PropTypes.oneOf(['finish', 'wait', 'process', 'error'])
+  currentStatus: oneOf(['finish', 'wait', 'process', 'error'])
 };
 export default Steps;

package/esm/Tag/Tag.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useCustom } from '../utils';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
 /**
  * The `Tag` component is used to label and categorize.
  * It can be used to mark the status of an object or classify it into different categories.

package/esm/TagInput/index.d.ts

@@ -1,6 +1,6 @@
 import { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
 export declare type TagInputProps = Omit<InputPickerProps<readonly string[]>, 'data'> & Partial<TagOnlyProps>;
 /**
  * The `TagInput` component is an enhancement of Input and supports input tags and management tags.

package/esm/TagInput/index.js

@@ -38,6 +38,10 @@ var TagInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(InputPickerContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(InputPicker, _extends({}, rest, {
+    "aria-haspopup": false,
+    "aria-expanded": undefined,
+    "aria-controls": undefined,
+    "aria-keyshortcuts": trigger,
     value: value,
     defaultValue: defaultValue,
     data: data,

package/esm/TagPicker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InputPickerProps } from '../InputPicker/InputPicker';
 import { TagOnlyProps } from '../InputPicker/InputPickerContext';
-import type { PickerComponent } from '../Picker/types';
+import type { PickerComponent } from '../internals/Picker/types';
 import type { CheckboxProps } from '../Checkbox';
 export interface TagPickerProps extends InputPickerProps, Partial<TagOnlyProps> {
     /**

package/esm/Timeline/Timeline.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import some from 'lodash/some';
 import TimelineItem from './TimelineItem';
 import { useClassNames, ReactChildren } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `Timeline` component is used to display a list of items in chronological order.
  *
@@ -60,7 +61,7 @@ Timeline.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   children: PropTypes.node,
-  align: PropTypes.oneOf(['left', 'right', 'alternate']),
+  align: oneOf(['left', 'right', 'alternate']),
   endless: PropTypes.bool
 };
 export default Timeline;

package/esm/Toggle/Toggle.js

@@ -4,7 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { partitionHTMLProps, useClassNames, useControlled, useCustom } from '../utils';
-import Plaintext from '../Plaintext';
+import { oneOf } from '../internals/propTypes';
+import Plaintext from '../internals/Plaintext';
 import Loader from '../Loader';
 /**
  * The `Toggle` component is used to activate or deactivate an element.
@@ -100,7 +101,7 @@ Toggle.propTypes = {
   className: PropTypes.string,
   onChange: PropTypes.func,
   as: PropTypes.elementType,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  size: oneOf(['sm', 'md', 'lg']),
   locale: PropTypes.shape({
     on: PropTypes.string,
     off: PropTypes.string

package/esm/Tree/Tree.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StandardProps, ItemDataType, RsRefForwardingComponent } from '../@types/common';
-import { ListProps } from '../Windowing';
+import { ListProps } from '../internals/Windowing';
 /**
  * Tree Node Drag Type
  */

package/esm/TreePicker/TreeNode.d.ts

@@ -23,8 +23,8 @@ export interface TreeNodeProps extends WithAsProps {
     style?: React.CSSProperties;
     onExpand?: (nodeData: any) => void;
     onSelect?: (nodeData: any, event: React.SyntheticEvent) => void;
-    onRenderTreeIcon?: (nodeData: any) => React.ReactNode;
-    onRenderTreeNode?: (nodeData: any) => React.ReactNode;
+    renderTreeIcon?: (nodeData: any) => React.ReactNode;
+    renderTreeNode?: (nodeData: any) => React.ReactNode;
     onDragStart?: (data: any, event: React.DragEvent<any>) => void;
     onDragEnter?: (data: any, event: React.DragEvent<any>) => void;
     onDragOver?: (data: any, event: React.DragEvent<any>) => void;

package/esm/TreePicker/TreeNode.js

@@ -1,12 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { forwardRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
 import hasClass from 'dom-lib/hasClass';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
-import { useClassNames } from '../utils';
+import { useClassNames, useEventCallback } from '../utils';
 import { getTreeNodeIndent, stringifyTreeNodeLabel } from '../utils/treeUtils';
 var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$as = _ref.as,
@@ -40,20 +39,20 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onDragEnd = _ref.onDragEnd,
     onDrop = _ref.onDrop,
     onExpand = _ref.onExpand,
-    onRenderTreeIcon = _ref.onRenderTreeIcon,
-    onRenderTreeNode = _ref.onRenderTreeNode,
-    rest = _objectWithoutPropertiesLoose(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "onRenderTreeIcon", "onRenderTreeNode"]);
+    renderTreeIcon = _ref.renderTreeIcon,
+    renderTreeNode = _ref.renderTreeNode,
+    rest = _objectWithoutPropertiesLoose(_ref, ["as", "rtl", "label", "layer", "style", "active", "loading", "nodeData", "className", "classPrefix", "disabled", "visible", "draggable", "expand", "focus", "hasChildren", "dragging", "dragOver", "dragOverTop", "dragOverBottom", "onSelect", "onDragStart", "onDragOver", "onDragEnter", "onDragLeave", "onDragEnd", "onDrop", "onExpand", "renderTreeIcon", "renderTreeNode"]);
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
     withClassPrefix = _useClassNames.withClassPrefix;
-  var handleExpand = useCallback(function (event) {
+  var handleExpand = useEventCallback(function (event) {
     var _event$nativeEvent, _event$nativeEvent$st;
     // stop propagation when using custom loading icon
     event === null || event === void 0 ? void 0 : (_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : (_event$nativeEvent$st = _event$nativeEvent.stopImmediatePropagation) === null || _event$nativeEvent$st === void 0 ? void 0 : _event$nativeEvent$st.call(_event$nativeEvent);
     onExpand === null || onExpand === void 0 ? void 0 : onExpand(nodeData);
-  }, [nodeData, onExpand]);
-  var handleSelect = useCallback(function (event) {
+  });
+  var handleSelect = useEventCallback(function (event) {
     if (disabled) {
       return;
     }
@@ -63,33 +62,33 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeData, event);
-  }, [nodeData, disabled, prefix, onSelect]);
-  var handleDragStart = useCallback(function (event) {
+  });
+  var handleDragStart = useEventCallback(function (event) {
     onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
-  }, [nodeData, onDragStart]);
-  var handleDragEnter = useCallback(function (event) {
+  });
+  var handleDragEnter = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
-  }, [nodeData, onDragEnter]);
-  var handleDragOver = useCallback(function (event) {
+  });
+  var handleDragOver = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
-  }, [nodeData, onDragOver]);
-  var handleDragLeave = useCallback(function (event) {
+  });
+  var handleDragLeave = useEventCallback(function (event) {
     event.stopPropagation();
     onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
-  }, [nodeData, onDragLeave]);
-  var handleDragEnd = useCallback(function (event) {
+  });
+  var handleDragEnd = useEventCallback(function (event) {
     event.stopPropagation();
     onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
-  }, [nodeData, onDragEnd]);
-  var handleDrop = useCallback(function (event) {
+  });
+  var handleDrop = useEventCallback(function (event) {
     event.preventDefault();
     event.stopPropagation();
     onDrop === null || onDrop === void 0 ? void 0 : onDrop(nodeData, event);
-  }, [nodeData, onDrop]);
+  });
   var renderIcon = function renderIcon() {
     var classes = prefix('expand-icon', 'icon', {
       expanded: expand
@@ -104,8 +103,8 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
         spin: true
       }));
     }
-    if (nodeData !== undefined && typeof onRenderTreeIcon === 'function') {
-      var customIcon = onRenderTreeIcon(nodeData);
+    if (nodeData !== undefined && typeof renderTreeIcon === 'function') {
+      var customIcon = renderTreeIcon(nodeData);
       expandIcon = customIcon !== null ? /*#__PURE__*/React.createElement("div", {
         className: prefix('custom-icon')
       }, customIcon) : expandIcon;
@@ -135,7 +134,7 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClick: handleSelect
     }, /*#__PURE__*/React.createElement("span", {
       className: contentClasses
-    }, onRenderTreeNode ? onRenderTreeNode(nodeData) : label));
+    }, renderTreeNode ? renderTreeNode(nodeData) : label));
   };
   var classes = merge(className, withClassPrefix({
     disabled: disabled,
@@ -165,37 +164,4 @@ var TreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), renderIcon(), renderLabel()) : null;
 });
 TreeNode.displayName = 'TreePickerNode';
-TreeNode.propTypes = {
-  as: PropTypes.elementType,
-  rtl: PropTypes.bool,
-  focus: PropTypes.bool,
-  layer: PropTypes.number,
-  value: PropTypes.any,
-  label: PropTypes.any,
-  expand: PropTypes.bool,
-  active: PropTypes.bool,
-  loading: PropTypes.bool,
-  visible: PropTypes.bool,
-  nodeData: PropTypes.any,
-  disabled: PropTypes.bool,
-  draggable: PropTypes.bool,
-  dragging: PropTypes.bool,
-  dragOver: PropTypes.bool,
-  dragOverTop: PropTypes.bool,
-  dragOverBottom: PropTypes.bool,
-  hasChildren: PropTypes.bool,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  style: PropTypes.object,
-  onExpand: PropTypes.func,
-  onSelect: PropTypes.func,
-  onRenderTreeIcon: PropTypes.func,
-  onRenderTreeNode: PropTypes.func,
-  onDragStart: PropTypes.func,
-  onDragEnter: PropTypes.func,
-  onDragOver: PropTypes.func,
-  onDragLeave: PropTypes.func,
-  onDragEnd: PropTypes.func,
-  onDrop: PropTypes.func
-};
 export default TreeNode;

package/esm/TreePicker/TreePicker.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 { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {

package/esm/TreePicker/TreePicker.js

@@ -8,12 +8,14 @@ import _omit from "lodash/omit";
 import _pick from "lodash/pick";
 import React, { useState, useEffect, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { List, AutoSizer } from '../Windowing';
+import { List, AutoSizer } from '../internals/Windowing';
+import { oneOf } from '../internals/propTypes';
 import TreeNode from './TreeNode';
 import { createDragPreview, getKeyParentMap, getPathTowardsItem, getTreeNodeIndent, removeDragPreview, stringifyTreeNodeLabel } from '../utils/treeUtils';
 import { createChainedFunction, useClassNames, useCustom, useControlled, useEventCallback, TREE_NODE_DROP_POSITION, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { getExpandWhenSearching, hasVisibleChildren, getDragNodeKeys, calDropNodePosition, createUpdateTreeDataFunction, useTreeDrag, useFlattenTreeData, getTreeActiveNode, getDefaultExpandItemValues, useTreeNodeRefs, useTreeSearch, focusPreviousItem, getFocusableItems, focusNextItem, getActiveItem, toggleExpand, useGetTreeNodeChildren, focusToActiveTreeNode, leftArrowHandler, focusTreeNode, rightArrowHandler, isSearching } from '../utils/treeUtils';
-import { PickerToggle, PickerOverlay, SearchBar, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../Picker';
+import { PickerToggle, PickerPopup, TreeView, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePickerRef, onMenuKeyDown as _onMenuKeyDown, listPickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, useToggleKeyDownEvent } from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
 import TreeContext from '../Tree/TreeContext';
 var emptyArray = [];
 var itemSize = function itemSize() {
@@ -279,8 +281,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onDragEnd: handleDragEnd,
       onDrop: handleDrop,
       onExpand: handleExpand,
-      onRenderTreeNode: renderTreeNode,
-      onRenderTreeIcon: renderTreeIcon
+      renderTreeNode: renderTreeNode,
+      renderTreeIcon: renderTreeIcon
     };
   };
 
@@ -467,8 +469,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleClean = useEventCallback(function (event) {
     var nullValue = null;
     var target = event.target;
-    // exclude searchBar
-    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
+    // exclude searchbox
+    if (target.matches('input[role="searchbox"]') || disabled || !cleanable) {
       return;
     }
     if (!isControlled) {
@@ -542,7 +544,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return saveTreeNodeRef(_ref, node.refKey);
         }
       })), /*#__PURE__*/React.createElement("div", {
-        className: treePrefix('children')
+        className: treePrefix('group'),
+        role: "group"
       }, nodes.map(function (child, i) {
         return renderNode(child, i, layer);
       }), showIndentLine && /*#__PURE__*/React.createElement("span", {
@@ -584,18 +587,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _withTreeClassPrefix;
     var classes = withTreeClassPrefix((_withTreeClassPrefix = {}, _withTreeClassPrefix[className !== null && className !== void 0 ? className : ''] = inline, _withTreeClassPrefix.virtualized = virtualized, _withTreeClassPrefix));
     var formattedNodes = getFormattedNodes(renderNode);
-    var styles = inline ? _extends({
-      height: height
-    }, style) : {};
-    return /*#__PURE__*/React.createElement("div", {
-      role: "tree",
-      id: id ? id + "-listbox" : undefined,
+    return /*#__PURE__*/React.createElement(TreeView, {
+      treeRootClassName: treePrefix('root'),
       ref: inline ? root : treeView,
       className: classes,
-      style: styles,
+      style: inline ? _extends({
+        height: height
+      }, style) : {},
       onKeyDown: inline ? handleTreeKeyDown : undefined
-    }, /*#__PURE__*/React.createElement("div", {
-      className: treePrefix('nodes')
     }, virtualized ? /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: inline ? height : menuMaxHeight,
       style: {
@@ -611,9 +610,9 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         itemCount: formattedNodes.length,
         itemData: formattedNodes
       }, listProps), renderVirtualListNode);
-    }) : formattedNodes));
+    }) : formattedNodes);
   };
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderTreeView = function renderTreeView(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -622,14 +621,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: left,
       top: top
     });
-    return /*#__PURE__*/React.createElement(PickerOverlay, {
+    return /*#__PURE__*/React.createElement(PickerPopup, {
       autoWidth: menuAutoWidth,
       className: classes,
       style: mergedMenuStyle,
       ref: mergeRefs(overlay, speakerRef),
       onKeyDown: onPickerKeydown,
       target: trigger
-    }, searchable ? /*#__PURE__*/React.createElement(SearchBar, {
+    }, searchable ? /*#__PURE__*/React.createElement(SearchBox, {
       placeholder: locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeywordState,
@@ -666,6 +665,8 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return renderTree();
   }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
+    popupType: "tree",
     pickerProps: _pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
@@ -673,13 +674,12 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onEntered: onEntered,
     onExit: createChainedFunction(onClose, onExit),
     onExited: createChainedFunction(handleClose, 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, ['cascade'])), {
-    id: id,
     ref: target,
     appearance: appearance,
     onKeyDown: onPickerKeydown,
@@ -690,13 +690,14 @@ var TreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValidValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value,
+    focusItemValue: focusItemValue
   }), selectedElement || locale.placeholder)));
 });
 TreePicker.displayName = 'TreePicker';
 TreePicker.propTypes = _extends({}, listPickerPropTypes, {
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   height: PropTypes.number,
   draggable: PropTypes.bool,
   virtualized: PropTypes.bool,

package/esm/Uploader/UploadFileItem.js

@@ -5,8 +5,9 @@ import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Attachment from '@rsuite/icons/legacy/Attachment';
 import Reload from '@rsuite/icons/Reload';
+import { oneOf } from '../internals/propTypes';
 import { previewFile, useClassNames } from '../utils';
-import CloseButton from '../CloseButton';
+import CloseButton from '../internals/CloseButton';
 /**
  * Format display file size
  * @param size
@@ -259,7 +260,7 @@ UploadFileItem.displayName = 'UploadFileItem';
 UploadFileItem.propTypes = {
   locale: PropTypes.any,
   file: PropTypes.object.isRequired,
-  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']),
+  listType: oneOf(['text', 'picture-text', 'picture']),
   disabled: PropTypes.bool,
   className: PropTypes.string,
   maxPreviewFileSize: PropTypes.number,

package/esm/Uploader/Uploader.js

@@ -7,7 +7,8 @@ import find from 'lodash/find';
 import FileItem from './UploadFileItem';
 import UploadTrigger from './UploadTrigger';
 import { ajaxUpload, useClassNames, useCustom, guid, useWillUnmount } from '../utils';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
+import { oneOf } from '../internals/propTypes';
 
 // Define several states of the file during the upload process.
 
@@ -421,7 +422,7 @@ Uploader.propTypes = {
   withCredentials: PropTypes.bool,
   headers: PropTypes.object,
   locale: PropTypes.any,
-  listType: PropTypes.oneOf(['text', 'picture-text', 'picture']),
+  listType: oneOf(['text', 'picture-text', 'picture']),
   shouldQueueUpdate: PropTypes.func,
   shouldUpload: PropTypes.func,
   onChange: PropTypes.func,

package/esm/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from '../utils/createComponent';
+export declare type VisuallyHiddenProps = ComponentProps;
+/**
+ * VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
+ *
+ * @version 5.52.0
+ * @see https://rsuitejs.com/components/visually-hidden/
+ */
+declare const VisuallyHidden: import("../@types/common").RsRefForwardingComponent<"span", ComponentProps>;
+export default VisuallyHidden;

package/esm/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,13 @@
+'use client';
+import createComponent from '../utils/createComponent';
+/**
+ * VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
+ *
+ * @version 5.52.0
+ * @see https://rsuitejs.com/components/visually-hidden/
+ */
+var VisuallyHidden = createComponent({
+  name: 'VisuallyHidden',
+  componentAs: 'span'
+});
+export default VisuallyHidden;

package/esm/VisuallyHidden/index.d.ts

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

package/esm/VisuallyHidden/index.js

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

package/esm/Whisper/Whisper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { OverlayTriggerHandle } from '../Overlay/OverlayTrigger';
-import { OverlayTriggerProps } from '../Overlay/OverlayTrigger';
+import { OverlayTriggerHandle } from '../internals/Overlay/OverlayTrigger';
+import { OverlayTriggerProps } from '../internals/Overlay/OverlayTrigger';
 export declare type WhisperProps = OverlayTriggerProps;
 export declare type WhisperInstance = OverlayTriggerHandle;
 /**