rsuite 5.50.0 → 5.52.0

package/esm/MultiCascader/{DropdownMenu.js → TreeView.js}

@@ -1,20 +1,19 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React from 'react';
 import SpinnerIcon from '@rsuite/icons/legacy/Spinner';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
-import { useClassNames, shallowEqual, useCustom } from '../utils';
-import { DropdownMenuCheckItem } from '../Picker';
+import { useClassNames, shallowEqual, useCustom, useEventCallback } from '../utils';
+import { ListCheckItem, useCombobox } from '../internals/Picker';
 import { isSomeParentChecked, isSomeChildChecked } from './utils';
 var emptyArray = [];
 
 /**
  * TODO: reuse Menu from Cascader for consistent behavior
  */
-var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
+var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -40,18 +39,24 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     valueKey = _props$valueKey === void 0 ? 'value' : _props$valueKey,
     _props$labelKey = props.labelKey,
     labelKey = _props$labelKey === void 0 ? 'label' : _props$labelKey,
+    style = props.style,
     renderMenuItem = props.renderMenuItem,
     renderMenu = props.renderMenu,
     _onCheck = props.onCheck,
     onSelect = props.onSelect,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "cascade", "cascadeData", "cascadePaths", "childrenKey", "disabledItemValues", "menuWidth", "menuHeight", "uncheckableItemValues", "value", "valueKey", "labelKey", "style", "renderMenuItem", "renderMenu", "onCheck", "onSelect"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var classes = merge(className, prefix('items'));
-  var _useCustom = useCustom('DropdownMenu'),
+  var _useCustom = useCustom(),
     rtl = _useCustom.rtl;
-  var getCascadePaths = useCallback(function (layer, node) {
+  var _useCombobox = useCombobox(),
+    id = _useCombobox.id,
+    labelId = _useCombobox.labelId,
+    popupType = _useCombobox.popupType,
+    multiple = _useCombobox.multiple;
+  var getCascadePaths = function getCascadePaths(layer, node) {
     var paths = [];
     for (var i = 0; i < cascadeData.length && i < layer; i += 1) {
       if (i < layer - 1 && cascadePaths) {
@@ -60,15 +65,21 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     paths.push(node);
     return paths;
-  }, [cascadeData, cascadePaths]);
-  var handleSelect = useCallback(function (layer, node, event) {
+  };
+  var handleSelect = useEventCallback(function (layer, node, event) {
     var cascadePaths = getCascadePaths(layer + 1, node);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-  }, [getCascadePaths, onSelect]);
-  var renderCascadeNode = function renderCascadeNode(node, index, layer, focus, uncheckable) {
+  });
+  var renderCascadeNode = function renderCascadeNode(nodeProps) {
+    var node = nodeProps.node,
+      index = nodeProps.index,
+      layer = nodeProps.layer,
+      focus = nodeProps.focus,
+      uncheckable = nodeProps.uncheckable,
+      size = nodeProps.size;
     var children = node[childrenKey];
     var nodeValue = node[valueKey];
-    var nodeLabel = node[labelKey];
+    var label = node[labelKey];
     var disabled = disabledItemValues.some(function (disabledValue) {
       return shallowEqual(disabledValue, nodeValue);
     });
@@ -84,8 +95,13 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         valueKey: valueKey
       });
     }
-    return /*#__PURE__*/React.createElement(DropdownMenuCheckItem, {
+    return /*#__PURE__*/React.createElement(ListCheckItem, {
       as: "li",
+      role: "treeitem",
+      "aria-level": layer + 1,
+      "aria-setsize": size,
+      "aria-posinset": index + 1,
+      "aria-label": typeof label === 'string' ? label : undefined,
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: active,
@@ -105,72 +121,60 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return _onCheck === null || _onCheck === void 0 ? void 0 : _onCheck(node, event, checked);
       },
       checkable: !uncheckable
-    }, renderMenuItem ? renderMenuItem(nodeLabel, node) : nodeLabel, children ? /*#__PURE__*/React.createElement(Icon, {
+    }, renderMenuItem ? renderMenuItem(label, node) : label, children ? /*#__PURE__*/React.createElement(Icon, {
       className: prefix('caret'),
       spin: node.loading
     }) : null);
   };
-  var renderCascade = function renderCascade() {
-    var styles = {
-      width: cascadeData.length * menuWidth
-    };
-    var columnStyles = {
-      height: menuHeight,
-      width: menuWidth
-    };
-    var cascadeNodes = cascadeData.map(function (children, layer) {
-      var uncheckableCount = 0;
-      var onlyKey = layer + "_" + children.length;
-      var menu = /*#__PURE__*/React.createElement("ul", {
-        role: "listbox"
-      }, children.map(function (item, index) {
-        var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
-          return shallowEqual(uncheckableValue, item[valueKey]);
-        });
-        if (uncheckable) {
-          uncheckableCount++;
-        }
-        return renderCascadeNode(item, index, layer, cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]), uncheckable);
-      }));
-      var parentNode = cascadePaths[layer - 1];
-      var columnClasses = prefix('column', {
-        'column-uncheckable': uncheckableCount === children.length
+  var columnStyles = {
+    height: menuHeight,
+    width: menuWidth
+  };
+  var cascadeNodes = cascadeData.map(function (children, layer) {
+    var uncheckableCount = 0;
+    var onlyKey = layer + "_" + children.length;
+    var menu = /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (item, index) {
+      var uncheckable = uncheckableItemValues.some(function (uncheckableValue) {
+        return shallowEqual(uncheckableValue, item[valueKey]);
       });
-      return /*#__PURE__*/React.createElement("div", {
-        key: onlyKey,
-        className: columnClasses,
-        "data-layer": layer,
-        style: columnStyles
-      }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+      if (uncheckable) {
+        uncheckableCount++;
+      }
+      var focus = cascadePaths[layer] && shallowEqual(cascadePaths[layer][valueKey], item[valueKey]);
+      return renderCascadeNode({
+        node: item,
+        index: index,
+        layer: layer,
+        focus: focus,
+        uncheckable: uncheckable,
+        size: children.length
+      });
+    }));
+    var parentNode = cascadePaths[layer - 1];
+    var columnClasses = prefix('column', {
+      'column-uncheckable': uncheckableCount === children.length
     });
-    return /*#__PURE__*/React.createElement("div", {
-      style: styles
-    }, cascadeNodes);
-  };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    return /*#__PURE__*/React.createElement("ul", {
+      role: "group",
+      key: onlyKey,
+      className: columnClasses,
+      "data-layer": layer,
+      style: columnStyles
+    }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
+  });
+  var styles = _extends({}, style, {
+    width: cascadeData.length * menuWidth
+  });
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    role: "tree",
+    id: id + "-" + popupType,
+    "aria-labelledby": labelId,
+    "aria-multiselectable": multiple
+  }, rest, {
     ref: ref,
-    className: classes
-  }), renderCascade());
+    className: classes,
+    style: styles
+  }), cascadeNodes);
 });
-DropdownMenu.displayName = 'DropdownMenu';
-DropdownMenu.propTypes = {
-  classPrefix: PropTypes.string,
-  data: PropTypes.array,
-  disabledItemValues: PropTypes.array,
-  value: PropTypes.array,
-  childrenKey: PropTypes.string,
-  valueKey: PropTypes.string,
-  labelKey: PropTypes.string,
-  menuWidth: PropTypes.number,
-  menuHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-  cascade: PropTypes.bool,
-  cascadeData: PropTypes.array,
-  cascadePaths: PropTypes.array,
-  uncheckableItemValues: PropTypes.array,
-  renderMenuItem: PropTypes.func,
-  renderMenu: PropTypes.func,
-  onSelect: PropTypes.func,
-  onCheck: PropTypes.func
-};
-export default DropdownMenu;
+TreeView.displayName = 'TreeView';
+export default TreeView;

package/esm/Nav/Nav.js

@@ -9,7 +9,8 @@ import { NavbarContext } from '../Navbar/Navbar';
 import { SidenavContext } from '../Sidenav/Sidenav';
 import NavContext from './NavContext';
 import useEnsuredRef from '../utils/useEnsuredRef';
-import Menubar from '../Menu/Menubar';
+import Menubar from '../internals/Menu/Menubar';
+import { oneOf } from '../internals/propTypes';
 import NavDropdown from './NavDropdown';
 import NavMenu, { NavMenuActionType, NavMenuContext } from './NavMenu';
 import deprecateComponent from '../utils/deprecateComponent';
@@ -181,7 +182,7 @@ Nav.propTypes = {
   classPrefix: PropTypes.string,
   className: PropTypes.string,
   children: PropTypes.node,
-  appearance: PropTypes.oneOf(['default', 'subtle', 'tabs']),
+  appearance: oneOf(['default', 'subtle', 'tabs']),
   // Reverse Direction of tabs/subtle
   reversed: PropTypes.bool,
   justified: PropTypes.bool,

package/esm/Nav/NavDropdown.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import { mergeRefs, PLACEMENT_8, placementPolyfill, useClassNames } from '../utils';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import { initialState, reducer } from '../Dropdown/DropdownState';
-import Menu from '../Menu/Menu';
+import Menu from '../internals/Menu/Menu';
 import kebabCase from 'lodash/kebabCase';
 import NavContext from './NavContext';
 import NavDropdownItem from './NavDropdownItem';
@@ -128,8 +128,8 @@ NavDropdown.Menu = NavDropdownMenu;
 NavDropdown.displayName = 'Nav.Dropdown';
 NavDropdown.propTypes = {
   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/Nav/NavDropdownItem.js

@@ -3,12 +3,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-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 './NavContext';
 import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
+import classNames from 'classnames';
 /**
  * @private
  */
@@ -84,7 +85,7 @@ var NavDropdownItem = /*#__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)
     }));
   });
@@ -94,7 +95,7 @@ NavDropdownItem.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/Nav/NavDropdownMenu.js

@@ -5,15 +5,15 @@ 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 AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import useCustom from '../utils/useCustom';
 import NavContext from './NavContext';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 /**
  * @private
  */
@@ -117,7 +117,7 @@ NavDropdownMenu.propTypes = {
   icon: PropTypes.any,
   classPrefix: PropTypes.string,
   pullLeft: deprecatePropType(PropTypes.bool, 'Use openDirection="start" instead.'),
-  openDirection: PropTypes.oneOf(['start', 'end']),
+  openDirection: oneOf(['start', 'end']),
   noCaret: PropTypes.bool,
   title: PropTypes.node,
   open: PropTypes.bool,

package/esm/Nav/NavDropdownToggle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import { useClassNames } from '../utils';
 import NavItem from './NavItem';
+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 @@ NavDropdownToggle.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 NavDropdownToggle;

package/esm/Nav/NavItem.js

@@ -4,10 +4,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import SafeAnchor from '../SafeAnchor';
 import { shallowEqual, useClassNames } from '../utils';
 import NavContext from './NavContext';
+import classNames from 'classnames';
 /**
  * The `Nav.Item` component is used to create navigation links.
  *
@@ -82,7 +83,7 @@ var NavItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     style: style,
     "aria-selected": active || undefined
   }), icon && /*#__PURE__*/React.cloneElement(icon, {
-    className: prefix('icon')
+    className: classNames(prefix('icon'), icon.props.className)
   }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 NavItem.displayName = 'Nav.Item';

package/esm/Navbar/NavbarDropdown.js

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import castArray from 'lodash/castArray';
 import omit from 'lodash/omit';
 import { mergeRefs, PLACEMENT_8, placementPolyfill, useClassNames } from '../utils';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import kebabCase from 'lodash/kebabCase';
 import { NavbarContext } from '.';
-import Disclosure from '../Disclosure/Disclosure';
+import Disclosure from '../internals/Disclosure/Disclosure';
 import NavDropdownItem from '../Nav/NavDropdownItem';
 import NavDropdownMenu from '../Nav/NavDropdownMenu';
 import NavbarDropdownToggle from './NavbarDropdownToggle';
@@ -92,8 +92,8 @@ NavbarDropdown.Menu = NavDropdownMenu;
 NavbarDropdown.displayName = 'Navbar.Dropdown';
 NavbarDropdown.propTypes = {
   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/Navbar/NavbarDropdownItem.js

@@ -3,13 +3,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 import isNil from 'lodash/isNil';
 import { createChainedFunction, shallowEqual, useClassNames } from '../utils';
 import { NavbarContext } from './Navbar';
-import DisclosureContext, { DisclosureActionTypes } from '../Disclosure/DisclosureContext';
+import DisclosureContext, { DisclosureActionTypes } from '../internals/Disclosure/DisclosureContext';
 import { useRenderDropdownItem } from '../Dropdown/useRenderDropdownItem';
 import NavContext from '../Nav/NavContext';
+import classNames from 'classnames';
 /**
  * @private
  */
@@ -88,7 +89,7 @@ var NavbarDropdownItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, dataAttributes, restProps, {
     onClick: createChainedFunction(handleClickNavbarDropdownItem, restProps.onClick),
     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)
   }));
 });
@@ -97,7 +98,7 @@ NavbarDropdownItem.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/Navbar/NavbarDropdownMenu.js

@@ -11,9 +11,9 @@ import AngleLeft from '@rsuite/icons/legacy/AngleLeft';
 import AngleRight from '@rsuite/icons/legacy/AngleRight';
 import { mergeRefs, useClassNames, useCustom } from '../utils';
 import { NavbarContext } from '.';
-import Disclosure from '../Disclosure';
+import Disclosure from '../internals/Disclosure';
 import NavContext from '../Nav/NavContext';
-import deprecatePropType from '../utils/deprecatePropType';
+import { deprecatePropType, oneOf } from '../internals/propTypes';
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> within a <Navbar>
@@ -120,7 +120,7 @@ NavbarDropdownMenu.propTypes = {
   icon: PropTypes.any,
   classPrefix: PropTypes.string,
   pullLeft: deprecatePropType(PropTypes.bool, 'Use openDirection="start" instead.'),
-  openDirection: PropTypes.oneOf(['start', 'end']),
+  openDirection: oneOf(['start', 'end']),
   title: PropTypes.node,
   open: PropTypes.bool,
   eventKey: PropTypes.any,

package/esm/Navbar/NavbarDropdownToggle.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import { useClassNames } from '../utils';
 import NavbarItem from './NavbarItem';
+import { oneOf } from '../internals/propTypes';
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> call
@@ -48,6 +49,6 @@ NavbarDropdownToggle.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 NavbarDropdownToggle;

package/esm/Navbar/NavbarItem.js

@@ -4,10 +4,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import isNil from 'lodash/isNil';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import SafeAnchor from '../SafeAnchor';
 import { shallowEqual, useClassNames } from '../utils';
 import NavContext from '../Nav/NavContext';
+import classNames from 'classnames';
 /**
  * @private
  */
@@ -56,7 +57,7 @@ var NavbarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleClick,
     style: style
   }), icon && /*#__PURE__*/React.cloneElement(icon, {
-    className: prefix('icon')
+    className: classNames(prefix('icon'), icon.props.className)
   }), children, /*#__PURE__*/React.createElement(Ripple, null));
 });
 NavbarItem.displayName = 'Navbar.Item';

package/esm/Notification/Notification.js

@@ -3,10 +3,11 @@ 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, _templateObject2;
-import React, { useCallback, useState, useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, useIsMounted } from '../utils';
-import CloseButton from '../CloseButton';
+import { useClassNames, useTimeout, MESSAGE_STATUS_ICONS, useIsMounted, useEventCallback } from '../utils';
+import { oneOf } from '../internals/propTypes';
+import CloseButton from '../internals/CloseButton';
 import ToastContext from '../toaster/ToastContext';
 /**
  * The `Notification` component is used to display global messages and notifications.
@@ -39,7 +40,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedToaster = _useContext.usedToaster; // Timed close message
   var _useTimeout = useTimeout(onClose, duration, usedToaster && duration > 0),
     clear = _useTimeout.clear; // Click to trigger to close the message
-  var handleClose = useCallback(function (event) {
+  var handleClose = useEventCallback(function (event) {
     setDisplay('hiding');
     onClose === null || onClose === void 0 ? void 0 : onClose(event);
     clear();
@@ -48,8 +49,8 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
         setDisplay('hide');
       }
     }, 1000);
-  }, [onClose, clear, isMounted]);
-  var renderHeader = useCallback(function () {
+  });
+  var renderHeader = function renderHeader() {
     if (!header) {
       return null;
     }
@@ -60,7 +61,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }, MESSAGE_STATUS_ICONS[type], header) : /*#__PURE__*/React.createElement("div", {
       className: prefix('title')
     }, header));
-  }, [header, type, prefix]);
+  };
   if (display === 'hide') {
     return null;
   }
@@ -88,7 +89,7 @@ Notification.propTypes = {
   closable: PropTypes.bool,
   classPrefix: PropTypes.string,
   className: PropTypes.string,
-  type: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
+  type: oneOf(['info', 'success', 'warning', 'error']),
   onClose: PropTypes.func
 };
 export default Notification;

package/esm/Pagination/PaginationButton.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import Ripple from '../Ripple';
+import Ripple from '../internals/Ripple';
 import { useClassNames, createChainedFunction } from '../utils';
 var PaginationButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,

package/esm/Panel/AccordionButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AccordionButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    expanded?: boolean;
+    controlId?: string;
+    classPrefix?: string;
+    caretAs?: React.ElementType;
+    disabled?: boolean;
+}
+declare const AccordionButton: (props: AccordionButtonProps) => JSX.Element;
+export default AccordionButton;

package/esm/Panel/AccordionButton.js

@@ -0,0 +1,40 @@
+'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 { Icon } from '@rsuite/icons';
+import AngleDownIcon from '@rsuite/icons/legacy/AngleDown';
+import { useClassNames } from '../utils';
+var AccordionButton = function AccordionButton(props) {
+  var _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'panel-btn' : _props$classPrefix,
+    expanded = props.expanded,
+    id = props.id,
+    className = props.className,
+    controlId = props.controlId,
+    children = props.children,
+    disabled = props.disabled,
+    _props$caretAs = props.caretAs,
+    caretAs = _props$caretAs === void 0 ? AngleDownIcon : _props$caretAs,
+    rest = _objectWithoutPropertiesLoose(props, ["classPrefix", "expanded", "id", "className", "controlId", "children", "disabled", "caretAs"]);
+  var _useClassNames = useClassNames(classPrefix),
+    prefix = _useClassNames.prefix,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    id: id,
+    "aria-controls": controlId,
+    "aria-expanded": expanded,
+    "aria-disabled": disabled,
+    className: withClassPrefix(className),
+    disabled: disabled
+  }, rest), children, /*#__PURE__*/React.createElement(Icon, {
+    as: caretAs,
+    "aria-hidden": "true",
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["icon"]))),
+    rotate: expanded ? 180 : 0,
+    "data-testid": "caret icon"
+  }));
+};
+export default AccordionButton;

package/esm/Panel/Panel.d.ts

@@ -1,28 +1,36 @@
 import React from 'react';
 import { AnimationEventProps, RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface PanelProps<T = string | number> extends WithAsProps, AnimationEventProps {
-    /** Whether it is a collapsible panel */
-    collapsible?: boolean;
     /** Show border */
     bordered?: boolean;
-    /** With shadow */
-    shaded?: boolean;
     /** Content area filled with containers */
     bodyFill?: boolean;
-    /** The head displays information. */
-    header?: React.ReactNode;
-    /** ID */
-    id?: string | number;
+    /** Whether it is a collapsible panel */
+    collapsible?: boolean;
+    /**
+     * The icon on the right side of the title.
+     */
+    caretAs?: React.ElementType;
     /** Expand then panel by default */
     defaultExpanded?: boolean;
+    /** Whether the panel is disabled */
+    disabled?: boolean;
     /** Expand then panel */
     expanded?: boolean;
     /** The event key corresponding to the panel. */
     eventKey?: T;
-    /** Role of header */
+    /** The head displays information. */
+    header?: React.ReactNode;
+    /** ID */
+    id?: string;
+    /**
+     * Role of header
+     */
     headerRole?: string;
     /** Role of Panel */
     panelRole?: string;
+    /** With shadow */
+    shaded?: boolean;
     /** callback function for the panel clicked */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
 }