rsuite 6.0.0-canary-2025031415 → 6.0.0-canary-20250319

package/cjs/MultiCascader/MultiCascader.js

@@ -12,6 +12,7 @@ var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _TreeView = _interopRequireDefault(require("../MultiCascadeTree/TreeView"));
 var _SearchView = _interopRequireDefault(require("../MultiCascadeTree/SearchView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _useActive = _interopRequireDefault(require("../Cascader/useActive"));
 var _utils = require("../internals/Tree/utils");
 var _hooks = require("../internals/hooks");
@@ -35,7 +36,7 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
     rtl
   } = (0, _CustomProvider.useCustom)('MultiCascader', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     classPrefix = 'picker',
     defaultValue,
@@ -313,7 +314,8 @@ const MultiCascader = (0, _utils3.forwardRef)((props, ref) => {
     onEnter: handleEntered,
     onExited: handleExited,
     speaker: renderTreeView
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/Nav/Nav.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface NavProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
     /**
      * The appearance style of the Nav component.
      *

package/cjs/Nav/Nav.js

@@ -14,6 +14,7 @@ var _NavMegaMenu = _interopRequireDefault(require("./NavMegaMenu"));
 var _NavDropdownItem = _interopRequireDefault(require("./NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("./NavDropdownMenu"));
 var _AdaptiveNavItem = _interopRequireDefault(require("./AdaptiveNavItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _NavbarContext = require("../Navbar/NavbarContext");
@@ -43,7 +44,7 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Nav', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'nav',
     appearance = 'default',
     vertical,
@@ -105,7 +106,8 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
       value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: !!sidenav
-    }, (menubar, ref) => /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    }, (menubar, ref) => /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: ref
     }, rest, {
       className: classes
@@ -113,7 +115,9 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
   }
   return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
     value: contextValue
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: menubarRef,
     className: classes
   }), children, hasWaterline && /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Nav/NavDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { NavDropdownToggleProps } from './NavDropdownToggle';
-import type { PlacementCorners, WithAsProps, SanitizedHTMListProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners, SanitizedHTMListProps } from '../internals/types';
 export type NavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavDropdownProps<T = any> extends WithAsProps, SanitizedHTMListProps {
+export interface NavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -33,7 +34,7 @@ export interface NavDropdownProps<T = any> extends WithAsProps, SanitizedHTMList
      */
     renderTitle?: (children: React.ReactNode) => React.ReactNode;
     /** Custom Toggle */
-    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
+    renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;
     /** The callback function that the menu closes */
     onClose?: () => void;
     /** Menu Pop-up callback function */

package/cjs/Nav/NavDropdown.js

@@ -13,6 +13,7 @@ var _NavContext = _interopRequireDefault(require("./NavContext"));
 var _NavDropdownItem = _interopRequireDefault(require("./NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("./NavDropdownMenu"));
 var _NavDropdownToggle = _interopRequireDefault(require("./NavDropdownToggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _DropdownState = require("../Dropdown/DropdownState");
@@ -39,7 +40,7 @@ const NavDropdown = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Nav.Dropdown> must be rendered within a <Nav> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     onClose,
     onOpen,
@@ -125,7 +126,8 @@ const NavDropdown = (0, _utils.forwardRef)((props, ref) => {
       disabled,
       open
     }));
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
       className: classes,
       style: style,

package/cjs/Nav/NavDropdownItem.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { DeprecatedDropdownItemProps } from '../Dropdown/types';
-export interface NavDropdownItemProps<T = any> extends WithAsProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
+export interface NavDropdownItemProps<T = any> extends BoxProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Whether to display the divider */

package/cjs/Nav/NavDropdownItem.js

@@ -23,17 +23,17 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Nav.Dropdown.Item> should be used within a <Nav> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
     divider,
     panel,
     children,
     disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -50,7 +50,7 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
     onSelectFromNav === null || onSelectFromNav === void 0 || onSelectFromNav(eventKey, event);
   }, [onSelect, eventKey, onSelectFromNav]);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (divider) {
     return renderDropdownItem({
       ref,

package/cjs/Nav/NavDropdownToggle.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { NavItemProps } from './NavItem';
-import type { WithAsProps, PlacementCorners } from '../internals/types';
-export interface NavDropdownToggleProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
+export interface NavDropdownToggleProps extends BoxProps {
     icon?: NavItemProps['icon'];
     noCaret?: boolean;
-    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
+    renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;
     placement?: PlacementCorners;
 }
 /**

package/cjs/Nav/NavDropdownToggle.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
 var _NavItem = _interopRequireDefault(require("./NavItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 /**
@@ -21,7 +22,7 @@ var _utils = require("../internals/utils");
  */
 const NavDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _NavItem.default,
+    as = _NavItem.default,
     className,
     classPrefix = 'dropdown-toggle',
     renderToggle,
@@ -39,7 +40,9 @@ const NavDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
-  const toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const toggle = /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {

package/cjs/Nav/NavItem.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface NavItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
+export interface NavItemProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Nav/NavItem.js

@@ -11,6 +11,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
 var _NavContext = _interopRequireDefault(require("./NavContext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 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); }
@@ -29,7 +30,7 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Nav.Item> must be rendered within a <Nav> component.');
   }
   const {
-    as: Component = _SafeAnchor.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     disabled,
     eventKey,
@@ -83,7 +84,8 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
       className: merge(className, prefix('panel'))
     }, rest), children);
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     tabIndex: disabled ? -1 : undefined
   }, rest, {

package/cjs/Navbar/Navbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface NavbarProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface NavbarProps extends BoxProps {
     /**
      * The appearance style of the Navbar component.
      */
@@ -15,12 +15,8 @@ export interface NavbarProps extends WithAsProps {
  * @see https://rsuitejs.com/components/navbar
  */
 declare const Navbar: import("../internals/types").InternalRefForwardingComponent<"div", NavbarProps, never> & {
-    Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<{
-        name: string;
-        componentAs: "a";
-        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>;
+    Brand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Content: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", 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

@@ -10,6 +10,7 @@ var _NavbarBrand = _interopRequireDefault(require("./NavbarBrand"));
 var _NavbarContent = _interopRequireDefault(require("./NavbarContent"));
 var _NavbarToggle = _interopRequireDefault(require("./NavbarToggle"));
 var _NavbarDrawer = _interopRequireDefault(require("./NavbarDrawer"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -33,7 +34,7 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _CustomProvider.useCustom)('Navbar', props);
   const {
     className,
-    as: Component = 'nav',
+    as = 'nav',
     classPrefix = 'navbar',
     appearance = 'default',
     onDrawerOpenChange,
@@ -58,7 +59,9 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
   }), [appearance, navbarId, open]);
   return /*#__PURE__*/_react.default.createElement(_NavbarContext.NavbarContext.Provider, {
     value: context
-  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   })));

package/cjs/Navbar/NavbarBrand.d.ts

@@ -1,8 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type NavbarBrandProps = ComponentProps;
-declare const NavbarBrand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<{
-    name: string;
-    componentAs: "a";
-    componentClassPrefix: string;
-}>, never> & Record<string, never>;
+declare const NavbarBrand: import("../internals/types").InternalRefForwardingComponent<"a", Partial<ComponentProps>, never> & Record<string, never>;
 export default NavbarBrand;

package/cjs/Navbar/NavbarContent.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from '../internals/utils';
 import { BoxProps } from '../internals/Box';
-export type NavbarContentProps = Omit<ComponentProps, 'hidden'> & BoxProps;
+export type NavbarContentProps = ComponentProps & 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/NavbarDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { PlacementCorners, WithAsProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type NavbarDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface NavbarDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
+export interface NavbarDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */

package/cjs/Navbar/NavbarDropdown.js

@@ -12,6 +12,7 @@ var _Disclosure = _interopRequireDefault(require("../internals/Disclosure/Disclo
 var _NavDropdownItem = _interopRequireDefault(require("../Nav/NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("../Nav/NavDropdownMenu"));
 var _NavbarDropdownToggle = _interopRequireDefault(require("./NavbarDropdownToggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _NavbarContext = require("./NavbarContext");
@@ -31,7 +32,7 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Navbar.Dropdown> should be used within a <Navbar> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     onClose,
     onOpen,
@@ -76,7 +77,8 @@ const NavbarDropdown = (0, _utils.forwardRef)((props, ref) => {
       disabled,
       open
     }));
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: (0, _utils.mergeRefs)(ref, containerRef),
       className: classes,
       style: style,

package/cjs/Navbar/NavbarDropdownItem.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { BoxProps } from '../internals/Box';
+import type { IconProps } from '@rsuite/icons/Icon';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
 import type { DeprecatedDropdownItemProps } from '../Dropdown/types';
-export interface NavbarDropdownItemProps<T = any> extends WithAsProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
+export interface NavbarDropdownItemProps<T = any> extends BoxProps, DeprecatedDropdownItemProps, HTMLPropsWithoutSelect {
     /** Active the current option */
     active?: boolean;
     /** Whether to display the divider */

package/cjs/Navbar/NavbarDropdownItem.js

@@ -25,17 +25,17 @@ const NavbarDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Navbar.Dropdown.Item> must be rendered within a <Nav> component within a <Navbar> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
+    children,
+    disabled,
+    divider,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
-    divider,
     panel,
-    children,
-    disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -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, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (divider) {
     return renderDropdownItem({
       ref,

package/cjs/Navbar/NavbarDropdownToggle.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { WithAsProps, PlacementCorners } from '../internals/types';
-export interface NavbarDropdownToggleProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
+export interface NavbarDropdownToggleProps extends BoxProps {
     noCaret?: boolean;
-    renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
     placement?: PlacementCorners;
+    renderToggle?: (props: BoxProps, ref: React.Ref<any>) => any;
 }
 /**
  * @private this component is not supposed to be used directly

package/cjs/Navbar/NavbarDropdownToggle.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _ArrowDownLine = _interopRequireDefault(require("@rsuite/icons/ArrowDownLine"));
 var _NavbarItem = _interopRequireDefault(require("./NavbarItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -21,7 +22,7 @@ var _hooks = require("../internals/hooks");
  */
 const NavbarDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _NavbarItem.default,
+    as = _NavbarItem.default,
     className,
     classPrefix = 'navbar-item',
     renderToggle,
@@ -37,7 +38,9 @@ const NavbarDropdownToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     'no-caret': noCaret
   }));
-  const toggle = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  const toggle = /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), children, !noCaret && /*#__PURE__*/_react.default.createElement(_ArrowDownLine.default, {

package/cjs/Navbar/NavbarItem.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface NavbarItemProps<T = string | number> extends WithAsProps, HTMLPropsWithoutSelect {
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface NavbarItemProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect {
     /** Activation status */
     active?: boolean;
     /** Disabled status */

package/cjs/Navbar/NavbarItem.js

@@ -9,8 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
-var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _SafeAnchor = _interopRequireDefault(require("../SafeAnchor"));
+var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 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); }
@@ -20,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const NavbarItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = _SafeAnchor.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     disabled,
     eventKey,
@@ -57,7 +58,8 @@ const NavbarItem = (0, _utils.forwardRef)((props, ref) => {
       onClick === null || onClick === void 0 || onClick(event);
     }
   }, [disabled, emitSelect, onClick]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     "aria-selected": active || undefined
   }, rest, {

package/cjs/Navbar/NavbarMegaMenu.js

@@ -30,14 +30,16 @@ const NavbarMegaMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
-  const renderMenu = (0, _react.useCallback)((_ref, ref) => {
-    let {
-      onClose
-    } = _ref;
+  const renderMenu = (0, _react.useCallback)((menuProps, ref) => {
+    const {
+      onClose,
+      className
+    } = menuProps;
     return /*#__PURE__*/_react.default.createElement(_Popover.default, {
       ref: ref,
       full: true,
-      arrow: false
+      arrow: false,
+      className: className
     }, typeof children === 'function' ? children({
       onClose
     }) : children);

package/cjs/Notification/Notification.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsPropsWithoutChildren, StatusType } from '../internals/types';
-export interface NotificationProps extends WithAsPropsWithoutChildren {
+import { BoxProps } from '../internals/Box';
+import type { StatusType } from '../internals/types';
+export interface NotificationProps extends Omit<BoxProps, 'children'> {
     children?: React.ReactNode | (() => React.ReactNode);
     /** Title of the message */
     header?: React.ReactNode;

package/cjs/Notification/Notification.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _useDelayedClosure = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -24,7 +25,7 @@ const Notification = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Notification', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'notification',
     closable,
     duration = 4500,
@@ -70,7 +71,8 @@ const Notification = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix(type, {
     closable
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "alert"
   }, rest, {
     ref: (0, _utils.mergeRefs)(targetRef, ref),

package/cjs/Pagination/Pagination.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
 import type { PaginationLocale } from '../locales';
-export interface PaginationProps extends WithAsProps {
+export interface PaginationProps extends BoxProps {
     /** Current page number */
     activePage?: number;
     /** Page buttons display the maximum number of */

package/cjs/Pagination/Pagination.js

@@ -12,6 +12,7 @@ var _PageTop = _interopRequireDefault(require("@rsuite/icons/PageTop"));
 var _PageNext = _interopRequireDefault(require("@rsuite/icons/PageNext"));
 var _PageEnd = _interopRequireDefault(require("@rsuite/icons/PageEnd"));
 var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -32,7 +33,7 @@ const Pagination = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Pagination', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     classPrefix = 'pagination',
     disabled: disabledProp,
@@ -189,10 +190,11 @@ const Pagination = (0, _utils.forwardRef)((props, ref) => {
     });
   };
   const classes = merge(className, withPrefix(size));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
-  }), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
+  }, rest), renderFirst(), renderPrev(), renderPageButtons(), renderNext(), renderLast());
 });
 Pagination.displayName = 'Pagination';
 var _default = exports.default = Pagination;

package/cjs/Pagination/PaginationGroup.js

@@ -11,6 +11,7 @@ var _Pagination = _interopRequireDefault(require("./Pagination"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _LimitPicker = _interopRequireDefault(require("./LimitPicker"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -28,7 +29,7 @@ const defaultLimitOptions = [30, 50, 100];
  */
 const PaginationGroup = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     activePage: activePageProp,
     classPrefix = 'pagination-group',
     className,
@@ -78,7 +79,8 @@ const PaginationGroup = (0, _utils.forwardRef)((props, ref) => {
     setLimit(value);
     onChangeLimit === null || onChangeLimit === void 0 || onChangeLimit(value);
   });
-  return /*#__PURE__*/_react.default.createElement(Component, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     ref: ref,
     className: classes,
     style: style