rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/Sidenav/ExpandedSidenavDropdown.js

@@ -1,14 +1,13 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useCallback } from 'react';
-import kebabCase from 'lodash/kebabCase';
 import omit from 'lodash/omit';
 import NavContext from "../Nav/NavContext.js";
 import SidenavDropdownCollapse from "./SidenavDropdownCollapse.js";
 import Disclosure from "../internals/Disclosure/Disclosure.js";
 import SidenavDropdownToggle from "./SidenavDropdownToggle.js";
-import { useClassNames, useInternalId } from "../internals/hooks/index.js";
-import { forwardRef, placementPolyfill, mergeRefs } from "../internals/utils/index.js";
+import { useStyles, useInternalId } from "../internals/hooks/index.js";
+import { forwardRef, kebabPlace, mergeRefs } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
 import { NavMenuContext } from "../Nav/NavMenu.js";
 const ExpandedSidenavDropdown = forwardRef((props, ref) => {
@@ -44,8 +43,8 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const internalId = useInternalId('SidenavDropdown');
   const uniqueKey = eventKey !== null && eventKey !== void 0 ? eventKey : internalId;
   const {
@@ -77,20 +76,18 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
     let {
       open
     } = _ref;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${kebabCase(placementPolyfill(placement))}`]: placement,
+    const classes = merge(className, withPrefix({
       [open ? 'expand' : 'collapse']: true,
-      disabled,
-      'selected-within': hasSelectedItems,
-      'no-caret': noCaret
+      disabled
     }));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, containerRef),
       style: style,
-      className: classes
-    }, rest, {
-      "data-event-key": eventKey
-    }), /*#__PURE__*/React.createElement(Disclosure.Button, null, (buttonProps, buttonRef) => /*#__PURE__*/React.createElement(SidenavDropdownToggle, _extends({
+      className: classes,
+      "data-event-key": eventKey,
+      "data-placement": kebabPlace(placement),
+      "data-active-descendant": hasSelectedItems
+    }, rest), /*#__PURE__*/React.createElement(Disclosure.Button, null, (buttonProps, buttonRef) => /*#__PURE__*/React.createElement(SidenavDropdownToggle, _extends({
       ref: buttonRef,
       as: toggleAs,
       noCaret: noCaret,

package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps } from '../internals/types';
-export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface SidenavDropdownItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Primary content */

package/esm/Sidenav/ExpandedSidenavDropdownItem.js

@@ -5,9 +5,9 @@ import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import NavContext from "../Nav/NavContext.js";
 import { forwardRef, createChainedFunction, shallowEqual } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useRenderDropdownItem } from "../Dropdown/useRenderDropdownItem.js";
+import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 /**
  * Tree View Node
  * @see https://www.w3.org/TR/wai-aria-practices-1.2/#TreeView
@@ -21,13 +21,13 @@ const ExpandedSidenavDropdownItem = forwardRef((props, ref) => {
   const {
     as: Component = 'li',
     active: activeProp,
+    classPrefix = 'dropdown-item',
     children,
     disabled,
     divider,
     panel,
     className,
     style,
-    classPrefix = 'dropdown-item',
     icon,
     eventKey,
     onClick,
@@ -36,11 +36,11 @@ const ExpandedSidenavDropdownItem = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const selected = activeProp !== null && activeProp !== void 0 ? activeProp : !isNil(eventKey) && (shallowEqual(eventKey, sidenav.activeKey) || shallowEqual(nav.activeKey, eventKey));
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     'with-icon': icon,
     active: selected,
     disabled
@@ -55,7 +55,7 @@ const ExpandedSidenavDropdownItem = forwardRef((props, ref) => {
   const menuitemEventHandlers = {
     onClick: createChainedFunction(handleClick, onClick)
   };
-  const renderDropdownItem = useRenderDropdownItem(Component);
+  const renderDropdownItem = useRenderMenuItem(Component);
   if (divider) {
     return renderDropdownItem({
       ref,

package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import type { WithAsProps, SanitizedHTMListProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLLIElement>, 'title' | 'onSelect'> {
+export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, SanitizedHTMListProps<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>> {
     /** Primary content */
     children?: React.ReactNode;
     /** You can use a custom element for this component */

package/esm/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -9,7 +9,7 @@ import Disclosure from "../internals/Disclosure/Disclosure.js";
 import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import { forwardRef, createChainedFunction } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -41,9 +41,9 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
   } = useCustom();
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     openKeys = [],
     onOpenChange,
@@ -65,7 +65,7 @@ const ExpandedSidenavDropdownMenu = forwardRef((props, ref) => {
     let {
       open
     } = _ref;
-    const classes = merge(className, prefix('submenu'), prefix(`pull-${rtl ? 'left' : 'right'}`), prefix(open ? 'expand' : 'collapse'), withClassPrefix({
+    const classes = merge(className, prefix('submenu'), prefix(`pull-${rtl ? 'left' : 'right'}`), prefix(open ? 'expand' : 'collapse'), withPrefix({
       'with-icon': icon,
       // open,
       disabled

package/esm/Sidenav/Sidenav.d.ts

@@ -48,6 +48,12 @@ declare const Sidenav: import("../internals/types").InternalRefForwardingCompone
     Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
         name: string;
     }>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
+        name: string;
+    }>, never> & Record<string, never>;
+    GroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
+        name: string;
+    }>, never> & Record<string, never>;
     Toggle: import("../internals/types").InternalRefForwardingComponent<"div", import("./SidenavToggle").SidenavToggleProps, never> & Record<string, never>;
 };
 export default Sidenav;

package/esm/Sidenav/Sidenav.js

@@ -5,15 +5,19 @@ import remove from 'lodash/remove';
 import Transition from "../Animation/Transition.js";
 import SidenavBody from "./SidenavBody.js";
 import SidenavHeader from "./SidenavHeader.js";
+import SidenavFooter from "./SidenavFooter.js";
 import SidenavToggle from "./SidenavToggle.js";
+import SidenavGroupLabel from "./SidenavGroupLabel.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
-import { useClassNames, useControlled } from "../internals/hooks/index.js";
+import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 export const SidenavContext = /*#__PURE__*/React.createContext(null);
 const emptyArray = [];
 const Subcomponents = {
   Header: SidenavHeader,
   Body: SidenavBody,
+  Footer: SidenavFooter,
+  GroupLabel: SidenavGroupLabel,
   Toggle: SidenavToggle
 };
 
@@ -42,9 +46,9 @@ const Sidenav = forwardRef((props, ref) => {
   const {
     prefix,
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(appearance));
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(appearance));
   const handleOpenChange = useCallback((eventKey, event) => {
     const find = key => shallowEqual(key, eventKey);
     const nextOpenKeys = [...openKeys];

package/esm/Sidenav/SidenavDropdown.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { PlacementCorners, WithAsProps } from '../internals/types';
+import type { PlacementCorners, WithAsProps, SanitizedHTMListProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type SidenavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
+export interface SidenavDropdownProps<T = any> extends WithAsProps, SanitizedHTMListProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -54,6 +54,6 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.H
  */
 declare const SidenavDropdown: import("../internals/types").InternalRefForwardingComponent<"div", SidenavDropdownProps<any>, never> & {
     Item: import("../internals/types").InternalRefForwardingComponent<"li", import("../Nav/NavDropdownItem").NavDropdownItemProps<any>, never> & Record<string, never>;
-    Menu: React.ForwardRefExoticComponent<import("../Nav/NavDropdownMenu").NavDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect" | "onToggle"> & React.RefAttributes<HTMLElement>>;
+    Menu: React.ForwardRefExoticComponent<import("../Nav/NavDropdownMenu").NavDropdownMenuProps<any> & SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
 };
 export default SidenavDropdown;

package/esm/Sidenav/SidenavDropdown.js

@@ -6,14 +6,13 @@ import pick from 'lodash/pick';
 import SidenavDropdownToggle from "./SidenavDropdownToggle.js";
 import Menu from "../internals/Menu/Menu.js";
 import MenuItem from "../internals/Menu/MenuItem.js";
-import kebabCase from 'lodash/kebabCase';
 import ExpandedSidenavDropdown from "./ExpandedSidenavDropdown.js";
 import NavContext from "../Nav/NavContext.js";
 import NavDropdownItem from "../Nav/NavDropdownItem.js";
 import NavDropdownMenu from "../Nav/NavDropdownMenu.js";
 import { NavMenuContext } from "../Nav/NavMenu.js";
-import { forwardRef, mergeRefs, placementPolyfill } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { forwardRef, mergeRefs, kebabPlace } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { SidenavContext } from "./Sidenav.js";
 const Subcomponents = {
   Item: NavDropdownItem,
@@ -59,17 +58,17 @@ const SidenavDropdown = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = useClassNames('dropdown-menu');
+  } = useStyles('dropdown-menu');
   const {
-    withClassPrefix: withNavItemClassPrefix,
+    withPrefix: withNavItemClassPrefix,
     merge: mergeNavItemClassNames
-  } = useClassNames('nav-item');
+  } = useStyles('nav-item');
   const [{
     items
   }] = navMenu;
@@ -149,19 +148,18 @@ const SidenavDropdown = forwardRef((props, ref) => {
       open,
       ...menuContainer
     } = _ref3;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${kebabCase(placementPolyfill(placement))}`]: !!placement,
+    const classes = merge(className, withPrefix({
       disabled,
       open,
-      submenu: true,
-      'selected-within': hasSelectedItems
+      submenu: true
     }));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, menuContainerRef),
-      className: classes
-    }, menuContainer, pick(toggleProps, ['data-testid']), {
-      style: style
-    }));
+      className: classes,
+      style: style,
+      "data-placement": kebabPlace(placement),
+      "data-active-descendant": hasSelectedItems
+    }, menuContainer, pick(toggleProps, ['data-testid'])));
   });
 }, Subcomponents);
 SidenavDropdown.displayName = 'Sidenav.Dropdown';

package/esm/Sidenav/SidenavDropdownCollapse.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import classNames from 'classnames';
 import Collapse from "../Animation/Collapse.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 const SidenavDropdownCollapse = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
@@ -13,11 +13,11 @@ const SidenavDropdownCollapse = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...restProps
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix());
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Collapse, {
     in: open,
     exitedClassName: prefix`collapse-out`,

package/esm/Sidenav/SidenavDropdownItem.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { DeprecatedDropdownItemProps } from '../Dropdown/types';
+export interface SidenavDropdownItemProps<T = any> extends WithAsProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
-    /** Primary content */
-    children?: React.ReactNode;
-    /** You can use a custom element for this component */
-    as?: React.ElementType;
     /** Whether to display the divider */
     divider?: boolean;
     /** Disable the current option */
@@ -20,17 +17,6 @@ export interface SidenavDropdownItemProps<T = any> extends WithAsProps, Omit<Rea
     icon?: React.ReactElement<IconProps>;
     /** The submenu that this menuitem controls (if exists) */
     submenu?: React.ReactElement;
-    /**
-     * The sub-level menu appears from the right side by default, and when `pullLeft` is set, it appears from the left.
-     * @deprecated Submenus are now pointing the same direction.
-     */
-    pullLeft?: boolean;
-    /**
-     * Whether the submenu is opened.
-     * @deprecated
-     * @internal
-     */
-    open?: boolean;
     /** Select the callback function for the current option  */
     onSelect?: (eventKey: T, event: React.SyntheticEvent) => void;
 }

package/esm/Sidenav/SidenavDropdownItem.js

@@ -8,8 +8,8 @@ import NavContext from "../Nav/NavContext.js";
 import ExpandedSidenavDropdownItem from "./ExpandedSidenavDropdownItem.js";
 import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { useRenderDropdownItem } from "../Dropdown/useRenderDropdownItem.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Item> within a <Sidenav>
@@ -44,16 +44,16 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const handleSelectItem = useCallback(event => {
     var _nav$onSelect;
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
     (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 || _nav$onSelect.call(nav, eventKey, event);
   }, [onSelect, eventKey, nav]);
   const selected = activeProp || !isNil(eventKey) && shallowEqual(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey);
-  const renderDropdownItem = useRenderDropdownItem(Component);
+  const renderDropdownItem = useRenderMenuItem(Component);
   if (sidenav.expanded) {
     return /*#__PURE__*/React.createElement(ExpandedSidenavDropdownItem, _extends({
       ref: ref
@@ -85,7 +85,7 @@ const SidenavDropdownItem = forwardRef((props, ref) => {
       active,
       ...menuitem
     } = _ref;
-    const classes = merge(className, withClassPrefix({
+    const classes = merge(className, withPrefix({
       'with-icon': icon,
       active: selected,
       disabled,

package/esm/Sidenav/SidenavDropdownMenu.d.ts

@@ -1,23 +1,26 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { StandardProps } from '../internals/types';
+import type { StandardProps, SanitizedHTMListProps } from '../internals/types';
 export interface SidenavDropdownMenuProps<T = any> extends StandardProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
-    /** The submenu expands from the left and defaults to the right */
-    pullLeft?: boolean;
-    /**
-     *  Only used for setting the default expand state when it's a submenu.
-     */
+    /** Only used for setting the default expand state when it's a submenu */
     eventKey?: T;
-    /** Set the icon */
+    /** Set the icon for the submenu */
     icon?: React.ReactElement<IconProps>;
+    /** Determine whether the submenu is open */
     open?: boolean;
+    /** Allow the submenu to be collapsed */
     collapsible?: boolean;
+    /** Determine whether the submenu is expanded */
     expanded?: boolean;
+    /** Indicate if the submenu is in an active state */
     active?: boolean;
+    /** Disable the submenu */
     disabled?: boolean;
+    /** The currently active key in the submenu */
     activeKey?: T;
+    /** Callback function that is called when the submenu is toggled */
     onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
 }
 /**
@@ -32,5 +35,5 @@ export interface SidenavDropdownMenuProps<T = any> extends StandardProps {
  *   </Nav>
  * </Sidenav>
  */
-declare const SidenavDropdownMenu: React.ForwardRefExoticComponent<SidenavDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect" | "onToggle"> & React.RefAttributes<HTMLElement>>;
+declare const SidenavDropdownMenu: React.ForwardRefExoticComponent<SidenavDropdownMenuProps<any> & SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
 export default SidenavDropdownMenu;

package/esm/Sidenav/SidenavDropdownMenu.js

@@ -8,7 +8,7 @@ import ArrowLeftLine from '@rsuite/icons/ArrowLeftLine';
 import ArrowRightLine from '@rsuite/icons/ArrowRightLine';
 import NavContext from "../Nav/NavContext.js";
 import ExpandedSidenavDropdownMenu from "./ExpandedSidenavDropdownMenu.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -46,16 +46,16 @@ const SidenavDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [eventKey, onToggle]);
   const {
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = useClassNames('dropdown-menu');
+  } = useStyles('dropdown-menu');
   const {
     merge: mergeItemClassNames,
-    withClassPrefix: withItemClassPrefix,
+    withPrefix: withItemClassPrefix,
     prefix: prefixItemClassName
-  } = useClassNames('dropdown-item');
+  } = useStyles('dropdown-item');
   if (sidenav.expanded) {
     return /*#__PURE__*/React.createElement(ExpandedSidenavDropdownMenu, _extends({
       ref: ref

package/esm/Sidenav/SidenavDropdownToggle.js

@@ -1,10 +1,10 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import ArrowRightLineIcon from '@rsuite/icons/ArrowRightLine';
 import SidenavItem from "./SidenavItem.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 /**
  * @private this component is not supposed to be used directly
  *          Instead it's rendered by a <Nav.Menu> call
@@ -17,8 +17,8 @@ import { useClassNames } from "../internals/hooks/index.js";
 const SidenavDropdownToggle = forwardRef((props, ref) => {
   const {
     as: Component = SidenavItem,
+    classPrefix = 'sidenav-dropdown-toggle',
     className,
-    classPrefix = 'dropdown-toggle',
     renderToggle,
     children,
     noCaret,
@@ -26,17 +26,17 @@ const SidenavDropdownToggle = forwardRef((props, ref) => {
   } = props;
   const {
     prefix,
-    withClassPrefix,
-    merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
-    'no-caret': noCaret
-  }));
-  const toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    ref: ref,
+    merge,
+    withPrefix
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const toggle = /*#__PURE__*/React.createElement(Component, _extends({
     className: classes,
+    ref: ref,
     tooltip: children
-  }), children, !noCaret && /*#__PURE__*/React.createElement(ArrowDownLineIcon, {
+  }, rest), /*#__PURE__*/React.createElement("span", {
+    className: prefix('title')
+  }, children), !noCaret && /*#__PURE__*/React.createElement(ArrowRightLineIcon, {
     className: prefix('caret')
   }));
   return renderToggle ? renderToggle(rest, ref) : toggle;

package/esm/Sidenav/SidenavFooter.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from '../internals/utils';
+export type SidenavFooterProps = ComponentProps;
+/**
+ * The `Sidenav.Footer` component for use with the `Sidenav` component.
+ *
+ * @see https://rsuitejs.com/components/sidenav
+ */
+declare const SidenavFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
+    name: string;
+}>, never> & Record<string, never>;
+export default SidenavFooter;

package/esm/Sidenav/SidenavFooter.js

@@ -0,0 +1,11 @@
+'use client';
+import { createComponent } from "../internals/utils/index.js";
+/**
+ * The `Sidenav.Footer` component for use with the `Sidenav` component.
+ *
+ * @see https://rsuitejs.com/components/sidenav
+ */
+const SidenavFooter = createComponent({
+  name: 'SidenavFooter'
+});
+export default SidenavFooter;

package/esm/Sidenav/SidenavGroupLabel.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from '../internals/utils';
+export type SidenavGroupLabelProps = ComponentProps;
+/**
+ * The `Sidenav.GroupLabel` component for use with the `Sidenav` component.
+ *
+ * @see https://rsuitejs.com/components/sidenav
+ */
+declare const SidenavGroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
+    name: string;
+}>, never> & Record<string, never>;
+export default SidenavGroupLabel;

package/esm/Sidenav/SidenavGroupLabel.js

@@ -0,0 +1,11 @@
+'use client';
+import { createComponent } from "../internals/utils/index.js";
+/**
+ * The `Sidenav.GroupLabel` component for use with the `Sidenav` component.
+ *
+ * @see https://rsuitejs.com/components/sidenav
+ */
+const SidenavGroupLabel = createComponent({
+  name: 'SidenavGroupLabel'
+});
+export default SidenavGroupLabel;

package/esm/Sidenav/SidenavItem.d.ts

@@ -1,23 +1,42 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-    /** Activation status */
+/**
+ * Props of SidenavItem component
+ */
+export interface SidenavItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+    /**
+     * Whether the item is activated
+     */
     active?: boolean;
-    /** Set the icon */
+    /**
+     * The icon displayed next to the item
+     */
     icon?: React.ReactElement<IconProps>;
-    /** Whether or not component is disabled */
+    /**
+     * Disable the item
+     */
     disabled?: boolean;
-    /** The value of the current option */
+    /**
+     * The value of the item that is used to identify the item
+     */
     eventKey?: T;
-    /** Selected callback function */
-    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
+    /**
+     * Render a divider
+     */
     divider?: boolean;
+    /**
+     * Render a panel
+     */
     panel?: boolean;
     /**
-     * Content of the tooltip
+     * The content of the tooltip
      */
     tooltip?: React.ReactNode;
+    /**
+     * The callback function when the item is selected
+     */
+    onSelect?: (eventKey: T, event: React.MouseEvent) => void;
 }
 /**
  * @private