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

package/esm/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/esm/Nav/NavDropdownMenu.js

@@ -7,7 +7,7 @@ import MenuItem from "../internals/Menu/MenuItem.js";
 import PagePreviousIcon from '@rsuite/icons/PagePrevious';
 import PageNextIcon from '@rsuite/icons/PageNext';
 import NavContext from "./NavContext.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
@@ -36,16 +36,16 @@ const NavDropdownMenu = /*#__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');
 
   // Parent menu exists. This is a submenu.
   // Should render a `menuitem` that controls this submenu.

package/esm/Nav/NavDropdownToggle.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import NavItem from "./NavItem.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 /**
  * @private this component is not supposed to be used directly
@@ -25,13 +25,13 @@ const NavDropdownToggle = forwardRef((props, ref) => {
     ...rest
   } = props;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const {
     prefix: prefixNavItem
-  } = useClassNames('nav-item');
-  const classes = merge(className, withClassPrefix({
+  } = useStyles('nav-item');
+  const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
   const toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {

package/esm/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/esm/Nav/NavItem.js

@@ -6,7 +6,7 @@ import isNil from 'lodash/isNil';
 import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
 import NavContext from "./NavContext.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
 /**
  * The `Nav.Item` component is used to create navigation links.
@@ -47,11 +47,11 @@ const NavItem = forwardRef((props, ref) => {
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [eventKey, onSelectProp, onSelectFromNav]);
   const {
-    withClassPrefix,
+    withPrefix,
     merge,
     prefix
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     active,
     disabled
   }));

package/esm/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/esm/Nav/NavMegaMenu.js

@@ -0,0 +1,17 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useContext } from 'react';
+import NavbarMegaMenu from "../Navbar/NavbarMegaMenu.js";
+import { NavbarContext } from "../Navbar/index.js";
+const NavMegaMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const navbar = useContext(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.createElement(NavbarMegaMenu, _extends({
+    ref: ref
+  }, props));
+});
+NavMegaMenu.displayName = 'NavMegaMenu';
+export default NavMegaMenu;

package/esm/Nav/NavMenu.js

@@ -50,17 +50,17 @@ const NavMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   const navbar = useContext(NavbarContext);
   const sidenav = useContext(SidenavContext);
   if (!parentNavMenu) {
-    if (navbar) {
+    if (sidenav) {
       return /*#__PURE__*/React.createElement(NavMenuContext.Provider, {
         value: navMenuContext
-      }, /*#__PURE__*/React.createElement(NavbarDropdown, _extends({
+      }, /*#__PURE__*/React.createElement(SidenavDropdown, _extends({
         ref: ref
       }, props)));
     }
-    if (sidenav) {
+    if (navbar) {
       return /*#__PURE__*/React.createElement(NavMenuContext.Provider, {
         value: navMenuContext
-      }, /*#__PURE__*/React.createElement(SidenavDropdown, _extends({
+      }, /*#__PURE__*/React.createElement(NavbarDropdown, _extends({
         ref: ref
       }, props)));
     }

package/esm/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/esm/Nav/index.js

@@ -2,6 +2,7 @@
 import Nav from "./Nav.js";
 import NavItem from "./NavItem.js";
 import NavMenu from "./NavMenu.js";
+import NavMegaMenu from "./NavMegaMenu.js";
 import NavDropdown from "./NavDropdown.js";
 import NavDropdownItem from "./NavDropdownItem.js";
 import NavDropdownMenu from "./NavDropdownMenu.js";
@@ -10,5 +11,5 @@ import NavDropdownToggle from "./NavDropdownToggle.js";
 // export types
 
 // export components
-export { Nav, NavItem, NavMenu, NavDropdown, NavDropdownItem, NavDropdownMenu, NavDropdownToggle };
+export { Nav, NavItem, NavMenu, NavMegaMenu, NavDropdown, NavDropdownItem, NavDropdownMenu, NavDropdownToggle };
 export default Nav;

package/esm/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/esm/Navbar/Navbar.js

@@ -6,7 +6,7 @@ import NavbarContent from "./NavbarContent.js";
 import NavbarToggle from "./NavbarToggle.js";
 import NavbarDrawer from "./NavbarDrawer.js";
 import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
+import { useStyles, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { NavbarContext } from "./NavbarContext.js";
 const Subcomponents = {
@@ -33,10 +33,10 @@ const Navbar = forwardRef((props, ref) => {
     ...rest
   } = propsWithDefaults;
   const {
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(appearance));
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix(appearance));
   const [open, setOpen] = React.useState(false);
   const handleToggle = useEventCallback(nextOpen => {
     setOpen(nextOpen);

package/esm/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/esm/Navbar/NavbarContent.js

@@ -1,8 +1,9 @@
 'use client';
 import { createComponent } from "../internals/utils/index.js";
+import Box from "../internals/Box/index.js";
 const NavbarContent = createComponent({
   name: 'NavbarContent',
-  componentAs: 'div',
+  componentAs: Box,
   componentClassPrefix: 'navbar-content'
 });
 export default NavbarContent;

package/esm/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/esm/Navbar/NavbarDropdown.js

@@ -3,13 +3,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import castArray from 'lodash/castArray';
 import omit from 'lodash/omit';
-import kebabCase from 'lodash/kebabCase';
 import Disclosure from "../internals/Disclosure/Disclosure.js";
 import NavDropdownItem from "../Nav/NavDropdownItem.js";
 import NavDropdownMenu from "../Nav/NavDropdownMenu.js";
 import NavbarDropdownToggle from "./NavbarDropdownToggle.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { forwardRef, mergeRefs, placementPolyfill } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { forwardRef, mergeRefs, kebabPlace } from "../internals/utils/index.js";
 import { NavbarContext } from "./NavbarContext.js";
 const Subcomponents = {
   Item: NavDropdownItem,
@@ -44,12 +43,12 @@ const NavbarDropdown = forwardRef((props, ref) => {
   } = props;
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = useClassNames('dropdown-menu');
+  } = useStyles('dropdown-menu');
   return /*#__PURE__*/React.createElement(Disclosure, {
     trigger: castArray(trigger),
     hideOnClickOutside: true,
@@ -66,15 +65,15 @@ const NavbarDropdown = forwardRef((props, ref) => {
       open,
       ...props
     } = _ref;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${kebabCase(placementPolyfill(placement))}`]: !!placement,
+    const classes = merge(className, withPrefix({
       disabled,
       open
     }));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, containerRef),
       className: classes,
-      style: style
+      style: style,
+      "data-placement": kebabPlace(placement)
     }, props), /*#__PURE__*/React.createElement(Disclosure.Button, null, (buttonProps, buttonRef) => /*#__PURE__*/React.createElement(NavbarDropdownToggle, _extends({
       ref: buttonRef,
       as: toggleAs,

package/esm/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/esm/Navbar/NavbarDropdownItem.js

@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import isNil from 'lodash/isNil';
 import DisclosureContext, { DisclosureActionTypes } from "../internals/Disclosure/DisclosureContext.js";
 import NavContext from "../Nav/NavContext.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, shallowEqual } from "../internals/utils/index.js";
 import { NavbarContext } from "./NavbarContext.js";
-import { useRenderDropdownItem } from "../Dropdown/useRenderDropdownItem.js";
+import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 /**
  * @private
  */
@@ -33,9 +33,9 @@ const NavbarDropdownItem = 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);
@@ -51,7 +51,7 @@ const NavbarDropdownItem = forwardRef((props, ref) => {
     handleSelectItem === null || handleSelectItem === void 0 || handleSelectItem(event);
   }, [dispatchDisclosure, handleSelectItem]);
   const selected = activeProp || !isNil(eventKey) && shallowEqual(nav.activeKey, eventKey);
-  const renderDropdownItem = useRenderDropdownItem(Component);
+  const renderDropdownItem = useRenderMenuItem(Component);
   if (divider) {
     return renderDropdownItem({
       ref,
@@ -68,7 +68,7 @@ const NavbarDropdownItem = forwardRef((props, ref) => {
       ...restProps
     });
   }
-  const classes = merge(className, withClassPrefix({
+  const classes = merge(className, withPrefix({
     'with-icon': icon,
     disabled,
     divider,

package/esm/Navbar/NavbarDropdownMenu.d.ts

@@ -1,14 +1,10 @@
 import React from 'react';
-import { StandardProps } from '../internals/types';
-import { IconProps } from '@rsuite/icons/Icon';
-export interface NavbarDropdownMenuProps<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 NavbarDropdownMenuProps<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)
@@ -18,17 +14,29 @@ export interface NavbarDropdownMenuProps<T = any> extends StandardProps {
      */
     openDirection?: 'start' | 'end';
     /**
-     *  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;
+    /** The currently active key in the dropdown menu */
     activeKey?: T;
+    /**
+     * Callback function when toggling the dropdown menu
+     * @param open - Whether the menu is open
+     * @param eventKey - The eventKey of the menu item
+     * @param event - The event object
+     */
     onToggle?: (open: boolean, eventKey?: T | undefined, event?: React.SyntheticEvent) => void;
 }
 /**
@@ -44,5 +52,5 @@ export interface NavbarDropdownMenuProps<T = any> extends StandardProps {
  *   </Nav>
  * </Navbar>
  */
-declare const NavbarDropdownMenu: React.ForwardRefExoticComponent<NavbarDropdownMenuProps<any> & Omit<React.HTMLAttributes<HTMLUListElement>, "title" | "onSelect" | "onToggle"> & React.RefAttributes<HTMLElement>>;
+declare const NavbarDropdownMenu: React.ForwardRefExoticComponent<NavbarDropdownMenuProps<any> & SanitizedHTMListProps<HTMLElement, React.HTMLAttributes<HTMLElement>> & React.RefAttributes<HTMLElement>>;
 export default NavbarDropdownMenu;

package/esm/Navbar/NavbarDropdownMenu.js

@@ -8,8 +8,8 @@ import PageNextIcon from '@rsuite/icons/PageNext';
 import Disclosure from "../internals/Disclosure/index.js";
 import NavContext from "../Nav/NavContext.js";
 import { mergeRefs } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { NavbarContext } from '.';
+import { useStyles } from "../internals/hooks/index.js";
+import { NavbarContext } from "./NavbarContext.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * @private this component is not supposed to be used directly
@@ -44,16 +44,16 @@ const NavbarDropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = useCustom();
   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');
 
   // Parent menu exists. This is a submenu.
   // Should render a `menuitem` that controls this submenu.

package/esm/Navbar/NavbarDropdownToggle.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
 import NavbarItem from "./NavbarItem.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
@@ -26,10 +26,10 @@ const NavbarDropdownToggle = forwardRef((props, ref) => {
   } = props;
   const {
     prefix,
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
   const toggle = /*#__PURE__*/React.createElement(Component, _extends({}, rest, {

package/esm/Navbar/NavbarItem.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 NavbarItemProps<T = string | number> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavbarItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/esm/Navbar/NavbarItem.js

@@ -6,7 +6,7 @@ import isNil from 'lodash/isNil';
 import NavContext from "../Nav/NavContext.js";
 import Ripple from "../internals/Ripple/index.js";
 import SafeAnchor from "../SafeAnchor/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqual } from "../internals/utils/index.js";
 /**
  * @private
@@ -37,10 +37,10 @@ const NavbarItem = forwardRef((props, ref) => {
   }, [eventKey, onSelectProp, onSelectFromNav]);
   const {
     prefix,
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix({
     active,
     disabled
   }));

package/esm/Navbar/NavbarMegaMenu.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { WhisperProps } from '../Whisper';
+import { NavbarItemProps } from './NavbarItem';
+import type { WithoutChildren } from '../internals/types';
+export interface NavbarMegaMenuProps extends Omit<WithoutChildren<NavbarItemProps>, 'title'> {
+    /** Define the title as a submenu */
+    title?: React.ReactNode;
+    /**
+     * Control the open state of the mega menu
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The content of the mega menu. Can be either React nodes or a render function
+     * @param props.onClose Function to close the mega menu
+     */
+    children?: React.ReactNode | ((props: {
+        onClose: () => void;
+    }) => React.ReactNode);
+    /**
+     * Define the placement of the mega menu
+     */
+    placement?: WhisperProps['placement'];
+}
+declare const NavbarMegaMenu: React.ForwardRefExoticComponent<NavbarMegaMenuProps & React.RefAttributes<HTMLElement>>;
+export default NavbarMegaMenu;