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

package/cjs/Nav/Nav.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface NavProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
     /**
      * The appearance style of the Nav component.
      *
@@ -49,13 +49,10 @@ declare const Nav: import("../internals/types").InternalRefForwardingComponent<"
      */
     Dropdown: import("../internals/types").InternalRefForwardingComponent<"div", import("./NavDropdown").NavDropdownProps<any>, never> & {
         Item: import("../internals/types").InternalRefForwardingComponent<"li", import("./NavDropdownItem").NavDropdownItemProps<any>, never> & Record<string, never>;
-        /**
-         * The `Nav` component is used to create navigation links.
-         * @see https://rsuitejs.com/components/nav
-         */
-        Menu: React.ForwardRefExoticComponent<import("./NavDropdownMenu").NavDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect" | "onToggle"> & React.RefAttributes<HTMLElement>>;
+        Menu: React.ForwardRefExoticComponent<import("./NavDropdownMenu").NavDropdownMenuProps<any> & import("../internals/types").SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
     };
     Item: import("../internals/types").InternalRefForwardingComponent<"a", import("./NavItem").NavItemProps<string | number>, never> & Record<string, never>;
     Menu: React.ForwardRefExoticComponent<import("./NavMenu").NavMenuProps & React.RefAttributes<any>>;
+    MegaMenu: React.ForwardRefExoticComponent<import("../Navbar/NavbarMegaMenu").NavbarMegaMenuProps & React.RefAttributes<any>>;
 };
 export default Nav;

package/cjs/Nav/Nav.js

@@ -10,6 +10,7 @@ var _NavContext = _interopRequireDefault(require("./NavContext"));
 var _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
 var _NavDropdown = _interopRequireDefault(require("./NavDropdown"));
 var _NavMenu = _interopRequireDefault(require("./NavMenu"));
+var _NavMegaMenu = _interopRequireDefault(require("./NavMegaMenu"));
 var _NavDropdownItem = _interopRequireDefault(require("./NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("./NavDropdownMenu"));
 var _AdaptiveNavItem = _interopRequireDefault(require("./AdaptiveNavItem"));
@@ -29,7 +30,8 @@ const Subcomponents = {
    */
   Dropdown: DeprecatedNavDropdown,
   Item: _AdaptiveNavItem.default,
-  Menu: _NavMenu.default
+  Menu: _NavMenu.default,
+  MegaMenu: _NavMegaMenu.default
 };
 
 /**
@@ -60,15 +62,15 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
   const navbar = (0, _react.useContext)(_NavbarContext.NavbarContext);
   const menubarRef = (0, _hooks.useEnsuredRef)(ref);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     rootPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, rootPrefix({
     'navbar-nav': navbar,
     'sidenav-nav': sidenav
-  }), withClassPrefix(appearance, {
+  }), withPrefix(appearance, {
     horizontal: (navbar || !sidenav) && !vertical,
     vertical: vertical || sidenav,
     justified,

package/cjs/Nav/NavDropdown.d.ts

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

package/cjs/Nav/NavDropdown.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _Menu = _interopRequireDefault(require("../internals/Menu/Menu"));
-var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _NavContext = _interopRequireDefault(require("./NavContext"));
 var _NavDropdownItem = _interopRequireDefault(require("./NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("./NavDropdownMenu"));
@@ -60,12 +59,12 @@ const NavDropdown = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = (0, _hooks.useClassNames)('dropdown-menu');
+  } = (0, _hooks.useStyles)('dropdown-menu');
   const menuButtonTriggers = (0, _react.useMemo)(() => {
     if (!trigger) {
       return undefined;
@@ -122,18 +121,17 @@ const NavDropdown = (0, _utils.forwardRef)((props, ref) => {
       open,
       ...menuContainer
     } = _ref2;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,
+    const classes = merge(className, withPrefix({
       disabled,
-      open,
-      'selected-within': hasSelectedItem
+      open
     }));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
-      className: classes
-    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid']), {
-      style: style
-    }));
+      className: classes,
+      style: style,
+      "data-placement": (0, _utils.kebabPlace)(placement),
+      "data-active-descendant": hasSelectedItem
+    }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid'])));
   });
 }, Subcomponents);
 NavDropdown.displayName = 'Nav.Dropdown';

package/cjs/Nav/NavDropdownItem.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps } from '../internals/types';
-export interface NavDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { DeprecatedDropdownItemProps } from '../Dropdown/types';
+export interface NavDropdownItemProps<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 */
@@ -18,17 +15,6 @@ export interface NavDropdownItemProps<T = any> extends WithAsProps, Omit<React.H
     panel?: boolean;
     /** Set the icon */
     icon?: React.ReactElement<IconProps>;
-    /**
-     * 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/cjs/Nav/NavDropdownItem.js

@@ -11,7 +11,7 @@ var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _NavContext = _interopRequireDefault(require("./NavContext"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
-var _useRenderDropdownItem = require("../Dropdown/useRenderDropdownItem");
+var _useRenderMenuItem = require("../internals/Menu/useRenderMenuItem");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -42,15 +42,15 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
   } = nav;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(activeKey, eventKey);
   const handleSelectItem = (0, _react.useCallback)(event => {
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [onSelect, eventKey, onSelectFromNav]);
-  const renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
   if (divider) {
     return renderDropdownItem({
       ref,
@@ -77,7 +77,7 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
       active,
       ...menuitem
     } = _ref;
-    const classes = merge(className, withClassPrefix({
+    const classes = merge(className, withPrefix({
       'with-icon': icon,
       active: selected,
       disabled,

package/cjs/Nav/NavDropdownMenu.d.ts

@@ -1,14 +1,10 @@
 import React from 'react';
-import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/Icon';
-export interface NavDropdownMenuProps<T = any> extends StandardProps {
+import type { StandardProps, SanitizedHTMListProps } from '../internals/types';
+import type { IconProps } from '@rsuite/icons/Icon';
+import type { DeprecatedDropdownMenuProps } from '../Dropdown/types';
+export interface NavDropdownMenuProps<T = any> extends StandardProps, DeprecatedDropdownMenuProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
-    /**
-     * The submenu expands from the left and defaults to the right
-     * @deprecated Use openDirection="start" instead
-     */
-    pullLeft?: boolean;
     /**
      * Direction that the sub-menu open towards
      * - start: towards the head of the reading direction (right by default, left in RTL)
@@ -20,20 +16,31 @@ export interface NavDropdownMenuProps<T = any> extends StandardProps {
     /** No caret variation */
     noCaret?: 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 */
     icon?: React.ReactElement<IconProps>;
+    /** Whether the dropdown menu is open */
     open?: boolean;
+    /** Whether the dropdown menu is collapsible */
     collapsible?: boolean;
+    /** Whether the dropdown menu is expanded */
     expanded?: boolean;
+    /** Whether the dropdown menu is active */
     active?: boolean;
+    /** Whether the dropdown menu is disabled */
     disabled?: boolean;
+    /**
+     * Callback function that is triggered when the dropdown menu is toggled
+     * @param open - Whether the dropdown menu is open
+     * @param eventKey - The eventKey of the dropdown menu
+     * @param event - The event object
+     */
     onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
 }
 /**
  * @private
  */
-declare const NavDropdownMenu: React.ForwardRefExoticComponent<NavDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect" | "onToggle"> & React.RefAttributes<HTMLElement>>;
+declare const NavDropdownMenu: React.ForwardRefExoticComponent<NavDropdownMenuProps<any> & SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
 export default NavDropdownMenu;

package/cjs/Nav/NavDropdownMenu.js

@@ -43,16 +43,16 @@ const NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   }, [eventKey, onToggle]);
   const {
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = (0, _hooks.useClassNames)('dropdown-menu');
+  } = (0, _hooks.useStyles)('dropdown-menu');
   const {
     merge: mergeItemClassNames,
-    withClassPrefix: withItemClassPrefix,
+    withPrefix: withItemClassPrefix,
     prefix: prefixItemClassName
-  } = (0, _hooks.useClassNames)('dropdown-item');
+  } = (0, _hooks.useStyles)('dropdown-item');
 
   // Parent menu exists. This is a submenu.
   // Should render a `menuitem` that controls this submenu.

package/cjs/Nav/NavDropdownToggle.js

@@ -30,13 +30,13 @@ const NavDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
     prefix: prefixNavItem
-  } = (0, _hooks.useClassNames)('nav-item');
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)('nav-item');
+  const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
   const toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {

package/cjs/Nav/NavItem.d.ts

@@ -1,7 +1,7 @@
 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 NavItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+export interface NavItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Nav/NavItem.js

@@ -54,11 +54,11 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [eventKey, onSelectProp, onSelectFromNav]);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix({
     active,
     disabled
   }));

package/cjs/Nav/NavMegaMenu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NavbarMegaMenuProps } from '../Navbar/NavbarMegaMenu';
+export type NavMegaMenuProps = NavbarMegaMenuProps;
+declare const NavMegaMenu: React.ForwardRefExoticComponent<NavbarMegaMenuProps & React.RefAttributes<any>>;
+export default NavMegaMenu;

package/cjs/Nav/NavMegaMenu.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _NavbarMegaMenu = _interopRequireDefault(require("../Navbar/NavbarMegaMenu"));
+var _Navbar = require("../Navbar");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const NavMegaMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const navbar = (0, _react.useContext)(_Navbar.NavbarContext);
+  if (!navbar) {
+    console.error('<Nav.MegaMenu> should be used within a <Navbar> component. Use https://rsuitejs.com/components/navbar/#mega-menu for more information.');
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_NavbarMegaMenu.default, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});
+NavMegaMenu.displayName = 'NavMegaMenu';
+var _default = exports.default = NavMegaMenu;

package/cjs/Nav/NavMenu.js

@@ -57,17 +57,17 @@ const NavMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const navbar = (0, _react.useContext)(_Navbar.NavbarContext);
   const sidenav = (0, _react.useContext)(_Sidenav.SidenavContext);
   if (!parentNavMenu) {
-    if (navbar) {
+    if (sidenav) {
       return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
         value: navMenuContext
-      }, /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, (0, _extends2.default)({
+      }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({
         ref: ref
       }, props)));
     }
-    if (sidenav) {
+    if (navbar) {
       return /*#__PURE__*/_react.default.createElement(NavMenuContext.Provider, {
         value: navMenuContext
-      }, /*#__PURE__*/_react.default.createElement(_SidenavDropdown.default, (0, _extends2.default)({
+      }, /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, (0, _extends2.default)({
         ref: ref
       }, props)));
     }

package/cjs/Nav/index.d.ts

@@ -1,6 +1,7 @@
 import Nav from './Nav';
 import NavItem from './NavItem';
 import NavMenu from './NavMenu';
+import NavMegaMenu from './NavMegaMenu';
 import NavDropdown from './NavDropdown';
 import NavDropdownItem from './NavDropdownItem';
 import NavDropdownMenu from './NavDropdownMenu';
@@ -8,9 +9,10 @@ import NavDropdownToggle from './NavDropdownToggle';
 export type { NavProps } from './Nav';
 export type { NavItemProps } from './NavItem';
 export type { NavMenuProps } from './NavMenu';
+export type { NavMegaMenuProps } from './NavMegaMenu';
 export type { NavDropdownProps } from './NavDropdown';
 export type { NavDropdownItemProps } from './NavDropdownItem';
 export type { NavDropdownMenuProps } from './NavDropdownMenu';
 export type { NavDropdownToggleProps } from './NavDropdownToggle';
-export { Nav, NavItem, NavMenu, NavDropdown, NavDropdownItem, NavDropdownMenu, NavDropdownToggle };
+export { Nav, NavItem, NavMenu, NavMegaMenu, NavDropdown, NavDropdownItem, NavDropdownMenu, NavDropdownToggle };
 export default Nav;

package/cjs/Nav/index.js

@@ -10,6 +10,8 @@ var _NavItem = _interopRequireDefault(require("./NavItem"));
 exports.NavItem = _NavItem.default;
 var _NavMenu = _interopRequireDefault(require("./NavMenu"));
 exports.NavMenu = _NavMenu.default;
+var _NavMegaMenu = _interopRequireDefault(require("./NavMegaMenu"));
+exports.NavMegaMenu = _NavMegaMenu.default;
 var _NavDropdown = _interopRequireDefault(require("./NavDropdown"));
 exports.NavDropdown = _NavDropdown.default;
 var _NavDropdownItem = _interopRequireDefault(require("./NavDropdownItem"));

package/cjs/Navbar/Navbar.d.ts

@@ -20,11 +20,7 @@ declare const Navbar: import("../internals/types").InternalRefForwardingComponen
         componentAs: "a";
         componentClassPrefix: string;
     }>, never> & Record<string, never>;
-    Content: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-        componentAs: "div";
-        componentClassPrefix: string;
-    }>, never> & Record<string, never>;
+    Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>, Partial<import("./NavbarContent").NavbarContentProps>, never> & Record<string, never>;
     Toggle: React.ForwardRefExoticComponent<import("..").IconButtonProps & React.RefAttributes<any>>;
     Drawer: React.ForwardRefExoticComponent<import("..").DrawerProps & React.RefAttributes<any>>;
 };

package/cjs/Navbar/Navbar.js

@@ -40,10 +40,10 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = (0, _hooks.useClassNames)(classPrefix);
-  const classes = merge(className, withClassPrefix(appearance));
+  } = (0, _hooks.useStyles)(classPrefix);
+  const classes = merge(className, withPrefix(appearance));
   const [open, setOpen] = _react.default.useState(false);
   const handleToggle = (0, _hooks.useEventCallback)(nextOpen => {
     setOpen(nextOpen);

package/cjs/Navbar/NavbarContent.d.ts

@@ -1,8 +1,5 @@
 import { ComponentProps } from '../internals/utils';
-export type NavbarContentProps = ComponentProps;
-declare const NavbarContent: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-    componentAs: "div";
-    componentClassPrefix: string;
-}>, never> & Record<string, never>;
+import { BoxProps } from '../internals/Box';
+export type NavbarContentProps = Omit<ComponentProps, 'hidden'> & BoxProps;
+declare const NavbarContent: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>, Partial<NavbarContentProps>, never> & Record<string, never>;
 export default NavbarContent;

package/cjs/Navbar/NavbarContent.js

@@ -1,12 +1,14 @@
 'use client';
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _utils = require("../internals/utils");
+var _Box = _interopRequireDefault(require("../internals/Box"));
 const NavbarContent = (0, _utils.createComponent)({
   name: 'NavbarContent',
-  componentAs: 'div',
+  componentAs: _Box.default,
   componentClassPrefix: 'navbar-content'
 });
 var _default = exports.default = NavbarContent;

package/cjs/Navbar/NavbarDropdown.d.ts

@@ -44,6 +44,6 @@ export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HT
  */
 declare const NavbarDropdown: import("../internals/types").InternalRefForwardingComponent<"div", NavbarDropdownProps<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> & import("../internals/types").SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
 };
 export default NavbarDropdown;

package/cjs/Navbar/NavbarDropdown.js

@@ -8,7 +8,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _castArray = _interopRequireDefault(require("lodash/castArray"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _Disclosure = _interopRequireDefault(require("../internals/Disclosure/Disclosure"));
 var _NavDropdownItem = _interopRequireDefault(require("../Nav/NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("../Nav/NavDropdownMenu"));
@@ -51,12 +50,12 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+    withPrefix
+  } = (0, _hooks.useStyles)(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = (0, _hooks.useClassNames)('dropdown-menu');
+  } = (0, _hooks.useStyles)('dropdown-menu');
   return /*#__PURE__*/_react.default.createElement(_Disclosure.default, {
     trigger: (0, _castArray.default)(trigger),
     hideOnClickOutside: true,
@@ -73,15 +72,15 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
       open,
       ...props
     } = _ref;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${(0, _kebabCase.default)((0, _utils.placementPolyfill)(placement))}`]: !!placement,
+    const classes = merge(className, withPrefix({
       disabled,
       open
     }));
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, containerRef),
       className: classes,
-      style: style
+      style: style,
+      "data-placement": (0, _utils.kebabPlace)(placement)
     }, props), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, (buttonProps, buttonRef) => /*#__PURE__*/_react.default.createElement(_NavbarDropdownToggle.default, (0, _extends2.default)({
       ref: buttonRef,
       as: toggleAs,

package/cjs/Navbar/NavbarDropdownItem.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
 import { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps } from '../internals/types';
-export interface NavbarDropdownItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { DeprecatedDropdownItemProps } from '../Dropdown/types';
+export interface NavbarDropdownItemProps<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 NavbarDropdownItemProps<T = any> extends WithAsProps, Omit<Reac
     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/cjs/Navbar/NavbarDropdownItem.js

@@ -12,7 +12,7 @@ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _NavbarContext = require("./NavbarContext");
-var _useRenderDropdownItem = require("../Dropdown/useRenderDropdownItem");
+var _useRenderMenuItem = require("../internals/Menu/useRenderMenuItem");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -40,9 +40,9 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = (0, _hooks.useClassNames)(classPrefix);
+  } = (0, _hooks.useStyles)(classPrefix);
   const handleSelectItem = (0, _react.useCallback)(event => {
     var _nav$onSelect;
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
@@ -58,7 +58,7 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     handleSelectItem === null || handleSelectItem === void 0 || handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(nav.activeKey, eventKey);
-  const renderDropdownItem = (0, _useRenderDropdownItem.useRenderDropdownItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
   if (divider) {
     return renderDropdownItem({
       ref,
@@ -75,7 +75,7 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
       ...restProps
     });
   }
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     'with-icon': icon,
     disabled,
     divider,