rsuite 5.50.0 → 5.52.0

package/esm/Panel/Panel.js

@@ -1,13 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
 import Collapse from '../Animation/Collapse';
-import { useClassNames, useControlled } from '../utils';
+import { useClassNames, useControlled, useUniqueId, useEventCallback } from '../utils';
 import { PanelGroupContext } from '../PanelGroup';
+import AccordionButton from './AccordionButton';
 /**
  * The `Panel` component is used to display content that can be collapsed.
  * @see https://rsuitejs.com/components/panel
@@ -15,22 +15,24 @@ import { PanelGroupContext } from '../PanelGroup';
 var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
+    bodyFill = props.bodyFill,
+    bordered = props.bordered,
     children = props.children,
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'panel' : _props$classPrefix,
-    bodyFill = props.bodyFill,
-    bordered = props.bordered,
+    caretAs = props.caretAs,
     collapsibleProp = props.collapsible,
     defaultExpanded = props.defaultExpanded,
+    disabled = props.disabled,
     eventKey = props.eventKey,
     expandedProp = props.expanded,
     header = props.header,
-    headerRoleProp = props.headerRole,
+    headerRole = props.headerRole,
     _props$panelRole = props.panelRole,
     panelRole = _props$panelRole === void 0 ? 'region' : _props$panelRole,
     shaded = props.shaded,
-    id = props.id,
+    idProp = props.id,
     onEnter = props.onEnter,
     onEntered = props.onEntered,
     onEntering = props.onEntering,
@@ -38,7 +40,10 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onExited = props.onExited,
     onExiting = props.onExiting,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "children", "className", "classPrefix", "bodyFill", "bordered", "collapsible", "defaultExpanded", "eventKey", "expanded", "header", "headerRole", "panelRole", "shaded", "id", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "bodyFill", "bordered", "children", "className", "classPrefix", "caretAs", "collapsible", "defaultExpanded", "disabled", "eventKey", "expanded", "header", "headerRole", "panelRole", "shaded", "id", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "onSelect"]);
+  var id = useUniqueId('rs-', idProp);
+  var panelId = id + "-panel";
+  var btnId = id + "-btn";
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -51,31 +56,33 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
     expandedState = _useControlled[0],
     setExpanded = _useControlled[1];
   var collapsible = collapsibleProp;
-  var headerRole = headerRoleProp;
   var expanded = expandedState;
   if (accordion) {
     collapsible = true;
-    headerRole = 'button';
-
-    // Collapses all inactive panels.
+  }
+  if (collapsible) {
     if (typeof activeKey !== 'undefined' && activeKey !== eventKey) {
       expanded = false;
     }
   }
-  var handleSelect = useCallback(function (event) {
+  useEffect(function () {
+    if (accordion && typeof activeKey !== 'undefined') {
+      setExpanded(activeKey === eventKey);
+    }
+  }, [accordion, activeKey, eventKey, setExpanded]);
+  var handleSelect = useEventCallback(function (event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKey, event);
     onGroupSelect === null || onGroupSelect === void 0 ? void 0 : onGroupSelect(eventKey, event);
     setExpanded(!expanded);
-  }, [eventKey, expanded, onGroupSelect, onSelect, setExpanded]);
-  var renderBody = useCallback(function () {
+  });
+  var renderBody = useEventCallback(function (bodyProps) {
     var classes = prefix('body', {
       'body-fill': bodyFill
     });
-    return /*#__PURE__*/React.createElement("div", {
-      role: panelRole,
+    return /*#__PURE__*/React.createElement("div", _extends({}, bodyProps, {
       className: classes
-    }, children);
-  }, [bodyFill, children, panelRole, prefix]);
+    }), children);
+  });
   var renderCollapsibleBody = function renderCollapsibleBody() {
     return /*#__PURE__*/React.createElement(Collapse, {
       in: expanded,
@@ -89,42 +96,41 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var className = transitionProps.className,
         rest = _objectWithoutPropertiesLoose(transitionProps, ["className"]);
       return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-        id: id ? "" + id : null,
-        "aria-expanded": expanded,
         className: merge(className, prefix('collapse')),
         ref: ref
-      }), renderBody());
+      }), renderBody({
+        role: panelRole,
+        id: panelId,
+        'aria-labelledby': btnId
+      }));
     });
   };
   var renderHeading = function renderHeading() {
     if (!header) {
       return null;
     }
-    var panelTitleElement;
+    var headerElement;
     if (! /*#__PURE__*/React.isValidElement(header) || Array.isArray(header)) {
-      panelTitleElement = /*#__PURE__*/React.createElement("span", {
-        className: prefix('title'),
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: expanded ? undefined : 'collapsed'
-      }, header));
+      headerElement = /*#__PURE__*/React.createElement("span", {
+        className: prefix('title')
+      }, header);
     } else {
       var _className = merge(prefix('title'), get(header, 'props.className'));
-      panelTitleElement = /*#__PURE__*/React.cloneElement(header, {
+      headerElement = /*#__PURE__*/React.cloneElement(header, {
         className: _className
       });
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("h2", {
+      className: prefix('header')
+    }, collapsible ? /*#__PURE__*/React.createElement(AccordionButton, {
+      id: btnId,
       role: headerRole,
-      "aria-controls": collapsible && id ? "" + id : undefined,
-      "aria-expanded": expanded,
-      className: prefix('header'),
-      onClick: collapsible ? handleSelect : undefined,
-      tabIndex: -1
-    }, panelTitleElement, collapsible && /*#__PURE__*/React.createElement(AngleDownIcon, {
-      rotate: expanded ? 180 : 0,
-      "data-testid": "caret icon"
-    }));
+      caretAs: caretAs,
+      controlId: panelId,
+      disabled: disabled,
+      expanded: expanded,
+      onClick: handleSelect
+    }, headerElement) : headerElement);
   };
   var classes = merge(className, withClassPrefix({
     in: expanded,
@@ -135,7 +141,7 @@ var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes,
-    id: collapsible ? null : id
+    id: idProp
   }), renderHeading(), collapsible ? renderCollapsibleBody() : renderBody());
 });
 Panel.displayName = 'Panel';
@@ -148,7 +154,6 @@ Panel.propTypes = {
   defaultExpanded: PropTypes.bool,
   expanded: PropTypes.bool,
   eventKey: PropTypes.any,
-  headerRole: PropTypes.string,
   panelRole: PropTypes.string,
   classPrefix: PropTypes.string,
   children: PropTypes.node,

package/esm/PanelGroup/PanelGroup.js

@@ -1,9 +1,9 @@
 '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 { useClassNames, useControlled } from '../utils';
+import { useClassNames, useControlled, useEventCallback } from '../utils';
 export var PanelGroupContext = /*#__PURE__*/React.createContext({});
 
 /**
@@ -33,10 +33,10 @@ var PanelGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
     accordion: accordion,
     bordered: bordered
   }));
-  var handleSelect = useCallback(function (activeKey, event) {
+  var handleSelect = useEventCallback(function (activeKey, event) {
     setActiveKey(activeKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeKey, event);
-  }, [onSelect, setActiveKey]);
+  });
   var contextValue = useMemo(function () {
     return {
       accordion: accordion,
@@ -46,7 +46,6 @@ var PanelGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [accordion, activeKey, handleSelect]);
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
-    role: accordion ? 'tablist' : undefined,
     className: classes
   }), /*#__PURE__*/React.createElement(PanelGroupContext.Provider, {
     value: contextValue

package/esm/Placeholder/PlaceholderParagraph.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 } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `Placeholder.Paragraph` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -65,7 +66,7 @@ PlaceholderParagraph.propTypes = {
   rows: PropTypes.number,
   rowHeight: PropTypes.number,
   rowMargin: PropTypes.number,
-  graph: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['circle', 'square', 'image'])]),
+  graph: PropTypes.oneOfType([PropTypes.bool, oneOf(['circle', 'square', 'image'])]),
   active: PropTypes.bool
 };
 export default PlaceholderParagraph;

package/esm/Progress/ProgressCircle.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, PROGRESS_STATUS_ICON } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `Progress.Circle` component is used to display the progress of current operation.
  * @see https://rsuitejs.com/components/progress/#circle
@@ -124,15 +125,15 @@ ProgressCircle.displayName = 'ProgressCircle';
 ProgressCircle.propTypes = {
   className: PropTypes.string,
   strokeColor: PropTypes.string,
-  strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
+  strokeLinecap: oneOf(['butt', 'round', 'square']),
   trailColor: PropTypes.string,
   percent: PropTypes.number,
   strokeWidth: PropTypes.number,
   trailWidth: PropTypes.number,
   gapDegree: PropTypes.number,
-  gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  gapPosition: oneOf(['top', 'bottom', 'left', 'right']),
   showInfo: PropTypes.bool,
-  status: PropTypes.oneOf(['success', 'fail', 'active']),
+  status: oneOf(['success', 'fail', 'active']),
   classPrefix: PropTypes.string
 };
 export default ProgressCircle;

package/esm/Progress/ProgressLine.js

@@ -4,6 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, PROGRESS_STATUS_ICON } from '../utils';
+import { oneOf } from '../internals/propTypes';
 /**
  * The `Progress.Line` component is used to display the progress of current operation.
  * @see https://rsuitejs.com/components/progress/#line
@@ -74,6 +75,6 @@ ProgressLine.propTypes = {
   trailWidth: PropTypes.number,
   showInfo: PropTypes.bool,
   vertical: PropTypes.bool,
-  status: PropTypes.oneOf(['success', 'fail', 'active'])
+  status: oneOf(['success', 'fail', 'active'])
 };
 export default ProgressLine;

package/esm/Radio/Radio.js

@@ -4,7 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { RadioContext } from '../RadioGroup/RadioGroup';
-import { useClassNames, useControlled, partitionHTMLProps, TypeChecker } from '../utils';
+import { useClassNames, useControlled, partitionHTMLProps } from '../utils';
+import { refType } from '../internals/propTypes';
 /**
  * The `Radio` component is a simple radio button.
  * @see https://rsuitejs.com/components/radio
@@ -122,7 +123,7 @@ Radio.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   value: PropTypes.any,
-  inputRef: TypeChecker.refType,
+  inputRef: refType,
   onChange: PropTypes.func,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number

package/esm/RadioGroup/RadioGroup.js

@@ -4,7 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useClassNames, useControlled } from '../utils';
-import Plaintext from '../Plaintext';
+import { oneOf } from '../internals/propTypes';
+import Plaintext from '../internals/Plaintext';
 export var RadioContext = /*#__PURE__*/React.createContext({});
 
 /**
@@ -69,7 +70,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = {
-  appearance: PropTypes.oneOf(['default', 'picker']),
+  appearance: oneOf(['default', 'picker']),
   name: PropTypes.string,
   inline: PropTypes.bool,
   value: PropTypes.any,

package/esm/RangeSlider/RangeSlider.js

@@ -12,7 +12,7 @@ import ProgressBar from '../Slider/ProgressBar';
 import Handle from '../Slider/Handle';
 import Graduated from '../Slider/Graduated';
 import { precisionMath, checkValue } from '../Slider/utils';
-import { tupleType } from '../utils/propTypeChecker';
+import { tupleType } from '../internals/propTypes';
 var defaultDefaultValue = [0, 0];
 
 /**

package/esm/Rate/Rate.js

@@ -5,10 +5,11 @@ import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
 import Star from '@rsuite/icons/legacy/Star';
+import { oneOf } from '../internals/propTypes';
 import { useClassNames, useControlled, shallowEqualArray, SIZE, KEY_VALUES } from '../utils';
 import { transformValueToCharacterMap, transformCharacterMapToValue } from './utils';
 import Character from './Character';
-import Plaintext from '../Plaintext';
+import Plaintext from '../internals/Plaintext';
 /**
  * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
  * @see https://rsuitejs.com/components/rate/
@@ -156,7 +157,7 @@ Rate.propTypes = {
   max: PropTypes.number,
   renderCharacter: PropTypes.func,
   readOnly: PropTypes.bool,
-  size: PropTypes.oneOf(SIZE),
+  size: oneOf(SIZE),
   value: PropTypes.number,
   vertical: PropTypes.bool,
   onChange: PropTypes.func,

package/esm/SelectPicker/SelectPicker.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerHandle, PickerToggleProps } from '../Picker';
-import { ListProps } from '../Windowing';
+import { PickerHandle, PickerToggleProps } from '../internals/Picker';
+import { ListProps } from '../internals/Windowing';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export interface SelectProps<T> {
     /** Set group condition key in data */

package/esm/SelectPicker/SelectPicker.js

@@ -12,7 +12,9 @@ import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import { createChainedFunction, useCustom, useClassNames, useControlled, useEventCallback, mergeRefs, shallowEqual } from '../utils';
 import { getDataGroupBy } from '../utils/getDataGroupBy';
-import { DropdownMenu, DropdownMenuItem, PickerToggle, PickerToggleTrigger, PickerOverlay, SearchBar, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../Picker';
+import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes } from '../internals/Picker';
+import SearchBox from '../internals/SearchBox';
+import { oneOf } from '../internals/propTypes';
 var emptyArray = [];
 /**
  * The `SelectPicker` component is used to select an item from a list of data.
@@ -203,7 +205,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hasValue = false;
     }
   }
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  var renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -220,8 +222,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (typeof sort === 'function') {
       items = items.sort(sort(false));
     }
-    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,
@@ -231,8 +232,8 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderMenuItem: renderMenuItem,
       maxHeight: menuMaxHeight,
       classPrefix: 'picker-select-menu',
-      dropdownMenuItemClassPrefix: 'picker-select-menu-item',
-      dropdownMenuItemAs: DropdownMenuItem,
+      listItemClassPrefix: 'picker-select-menu-item',
+      listItemAs: ListItem,
       activeItemValues: [value],
       focusItemValue: focusItemValue,
       data: items
@@ -247,14 +248,14 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }) : /*#__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,
       style: styles,
       onKeyDown: onPickerKeyDown,
       target: trigger
-    }, searchable && /*#__PURE__*/React.createElement(SearchBar, {
+    }, searchable && /*#__PURE__*/React.createElement(SearchBox, {
       placeholder: locale === null || locale === void 0 ? void 0 : locale.searchPlaceholder,
       onChange: handleSearch,
       value: searchKeyword,
@@ -271,18 +272,18 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    id: id,
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    speaker: renderPopup
   }, /*#__PURE__*/React.createElement(Component, {
     className: classes,
     style: style,
     ref: root
   }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys)), {
-    id: id,
     ref: target,
     appearance: appearance,
     onClean: createChainedFunction(handleClean, onClean),
@@ -292,6 +293,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
     inputValue: value !== null && value !== void 0 ? value : '',
+    focusItemValue: focusItemValue,
     active: active,
     placement: placement
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
@@ -299,7 +301,7 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 SelectPicker.displayName = 'SelectPicker';
 SelectPicker.propTypes = _extends({}, listPickerPropTypes, {
   locale: PropTypes.any,
-  appearance: PropTypes.oneOf(['default', 'subtle']),
+  appearance: oneOf(['default', 'subtle']),
   menuAutoWidth: PropTypes.bool,
   menuMaxHeight: PropTypes.number,
   renderMenu: PropTypes.func,

package/esm/Sidenav/ExpandedSidenavDropdown.js

@@ -7,9 +7,9 @@ import kebabCase from 'lodash/kebabCase';
 import omit from 'lodash/omit';
 import { useClassNames, placementPolyfill, PLACEMENT_8, mergeRefs } from '../utils';
 import { SidenavContext } from './Sidenav';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import SidenavDropdownCollapse from './SidenavDropdownCollapse';
-import Disclosure from '../Disclosure/Disclosure';
+import Disclosure from '../internals/Disclosure/Disclosure';
 import useInternalId from '../utils/useInternalId';
 import SidenavDropdownToggle from './SidenavDropdownToggle';
 import { NavMenuContext } from '../Nav/NavMenu';
@@ -109,7 +109,7 @@ ExpandedSidenavDropdown.displayName = 'Sidenav.Dropdown';
 ExpandedSidenavDropdown.propTypes = {
   activeKey: PropTypes.any,
   classPrefix: PropTypes.string,
-  placement: PropTypes.oneOf(PLACEMENT_8),
+  placement: oneOf(PLACEMENT_8),
   title: PropTypes.node,
   disabled: PropTypes.bool,
   icon: PropTypes.node,

package/esm/Sidenav/ExpandedSidenavDropdownItem.js

@@ -6,10 +6,11 @@ import isNil from 'lodash/isNil';
 import { createChainedFunction, shallowEqual, useClassNames } from '../utils';
 import { SidenavContext } from './Sidenav';
 import PropTypes from 'prop-types';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import SafeAnchor from '../SafeAnchor';
 import NavContext from '../Nav/NavContext';
 import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
+import classNames from 'classnames';
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
@@ -83,7 +84,7 @@ var ExpandedSidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props,
     'aria-current': selected || undefined
   }, menuitemEventHandlers, {
     children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
-      className: prefix('menu-icon')
+      className: classNames(prefix('menu-icon'), icon.props.className)
     }), children, /*#__PURE__*/React.createElement(Ripple, null))
   }), SafeAnchor);
 });

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -13,8 +13,8 @@ import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import PropTypes from 'prop-types';
 import SidenavDropdownCollapse from './SidenavDropdownCollapse';
-import Ripple from '../Ripple';
-import Disclosure from '../Disclosure/Disclosure';
+import Ripple from '../internals/Ripple';
+import Disclosure from '../internals/Disclosure/Disclosure';
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView

package/esm/Sidenav/Sidenav.js

@@ -10,7 +10,7 @@ import SidenavBody from './SidenavBody';
 import SidenavHeader from './SidenavHeader';
 import SidenavToggle from './SidenavToggle';
 import { useClassNames, useControlled, mergeRefs } from '../utils';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 export var SidenavContext = /*#__PURE__*/React.createContext(null);
 var emptyArray = [];
 
@@ -93,7 +93,7 @@ Sidenav.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   expanded: PropTypes.bool,
-  appearance: PropTypes.oneOf(['default', 'inverse', 'subtle']),
+  appearance: oneOf(['default', 'inverse', 'subtle']),
   defaultOpenKeys: PropTypes.array,
   openKeys: PropTypes.array,
   onOpenChange: PropTypes.func,

package/esm/Sidenav/SidenavDropdown.js

@@ -7,9 +7,9 @@ import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import { mergeRefs, PLACEMENT_8, placementPolyfill, useClassNames } from '../utils';
 import { SidenavContext } from './Sidenav';
-import deprecatePropType from '../utils/deprecatePropType';
-import Menu from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
+import Menu from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
 import kebabCase from 'lodash/kebabCase';
 import ExpandedSidenavDropdown from './ExpandedSidenavDropdown';
 import NavContext from '../Nav/NavContext';
@@ -161,8 +161,8 @@ SidenavDropdown.displayName = 'Sidenav.Dropdown';
 SidenavDropdown.propTypes = {
   activeKey: PropTypes.any,
   classPrefix: PropTypes.string,
-  trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover', 'contextMenu'])]),
-  placement: PropTypes.oneOf(PLACEMENT_8),
+  trigger: PropTypes.oneOfType([PropTypes.array, oneOf(['click', 'hover', 'contextMenu'])]),
+  placement: oneOf(PLACEMENT_8),
   title: PropTypes.node,
   disabled: PropTypes.bool,
   icon: PropTypes.node,

package/esm/Sidenav/SidenavDropdownItem.js

@@ -4,13 +4,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { SidenavContext } from './Sidenav';
-import deprecatePropType from '../utils/deprecatePropType';
-import MenuItem from '../Menu/MenuItem';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
+import MenuItem from '../internals/Menu/MenuItem';
 import isNil from 'lodash/isNil';
 import { mergeRefs, shallowEqual, useClassNames } from '../utils';
 import NavContext from '../Nav/NavContext';
 import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
 import ExpandedSidenavDropdownItem from './ExpandedSidenavDropdownItem';
+import classNames from 'classnames';
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Item> within a <Sidenav>
@@ -100,7 +101,7 @@ var SidenavDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classes
     }, menuitem, dataAttributes, restProps, {
       children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
-        className: prefix('menu-icon')
+        className: classNames(prefix('menu-icon'), icon.props.className)
       }), children)
     }));
   });
@@ -110,7 +111,7 @@ SidenavDropdownItem.propTypes = {
   as: PropTypes.elementType,
   divider: PropTypes.bool,
   panel: PropTypes.bool,
-  trigger: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf(['click', 'hover'])]),
+  trigger: PropTypes.oneOfType([PropTypes.array, oneOf(['click', 'hover'])]),
   open: deprecatePropType(PropTypes.bool),
   active: PropTypes.bool,
   disabled: PropTypes.bool,

package/esm/Sidenav/SidenavDropdownMenu.js

@@ -5,8 +5,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 var _templateObject, _templateObject2;
 import React, { useCallback, useContext } from 'react';
 import omit from 'lodash/omit';
-import Menu from '../Menu/Menu';
-import MenuItem from '../Menu/MenuItem';
+import Menu from '../internals/Menu/Menu';
+import MenuItem from '../internals/Menu/MenuItem';
 import { mergeRefs, useClassNames } from '../utils';
 import PropTypes from 'prop-types';
 import { SidenavContext } from './Sidenav';

package/esm/Sidenav/SidenavDropdownToggle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import { useClassNames } from '../utils';
 import SidenavItem from './SidenavItem';
+import { oneOf } from '../internals/propTypes';
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> call
@@ -49,6 +50,6 @@ SidenavDropdownToggle.propTypes = {
   noCaret: PropTypes.bool,
   as: PropTypes.elementType,
   renderToggle: PropTypes.func,
-  placement: PropTypes.oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
+  placement: oneOf(['bottomStart', 'bottomEnd', 'topStart', 'topEnd', 'leftStart', 'rightStart', 'leftEnd', 'rightEnd'])
 };
 export default SidenavDropdownToggle;