rsuite 6.0.0-canary-20250315 → 6.0.0-canary-20250319

package/cjs/List/List.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _useSortHelper = _interopRequireDefault(require("./helper/useSortHelper"));
 var _ListContext = _interopRequireDefault(require("./ListContext"));
 var _ListItem = _interopRequireDefault(require("./ListItem"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -27,7 +28,7 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('List', props);
   const {
-    as: Component = 'div',
+    as,
     autoScroll = true,
     bordered,
     classPrefix = 'list',
@@ -76,14 +77,14 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     size,
     register
   }), [bordered, register, size]);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "list"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    role: "list",
     ref: (0, _utils.mergeRefs)(containerRef, ref),
     className: classes,
     onMouseDown: sortable ? handleStart : undefined,
     onMouseUp: sortable ? handleEnd : undefined
-  }), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {
     value: contextValue
   }, children));
 }, Subcomponents);

package/cjs/List/ListItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
 import { Collection } from './helper/useManager';
-export interface ListItemProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+export interface ListItemProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     index?: number;
     collection?: Collection;
     disabled?: boolean;

package/cjs/List/ListItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _ListContext = _interopRequireDefault(require("./ListContext"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 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); }
@@ -17,7 +18,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 const ListItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     children,
     className,
     classPrefix = 'list-item',
@@ -58,13 +59,13 @@ const ListItem = (0, _utils.forwardRef)((props, ref) => {
     disabled,
     bordered
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "listitem",
-    "aria-disabled": disabled
-  }, rest, {
+    "aria-disabled": disabled,
     ref: (0, _utils.mergeRefs)(listItemRef, ref),
     className: classes
-  }), children);
+  }, rest), children);
 });
 ListItem.displayName = 'ListItem';
 var _default = exports.default = ListItem;

package/cjs/Loader/Loader.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface LoaderProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface LoaderProps extends BoxProps {
     /** Centered in the container */
     center?: boolean;
     /** Whether the background is displayed */

package/cjs/Loader/Loader.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -18,7 +19,7 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Loader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'loader',
     className,
     inverse,
@@ -41,13 +42,13 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     vertical,
     inverse
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "status",
-    "aria-labelledby": content ? labelId : undefined
-  }, rest, {
+    "aria-labelledby": content ? labelId : undefined,
     ref: ref,
     className: classes
-  }), backdrop && /*#__PURE__*/_react.default.createElement("div", {
+  }, rest), backdrop && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: withPrefix()

package/cjs/Menu/Menu.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { StandardProps, HTMLPropsWithoutSelect } from '../internals/types';
-export interface MenuProps<T = string | number> extends StandardProps, HTMLPropsWithoutSelect<HTMLUListElement> {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutSelect } from '../internals/types';
+export interface MenuProps<T = string | number> extends BoxProps, HTMLPropsWithoutSelect<HTMLUListElement> {
     /** Set the active key for the menu */
     activeKey?: T;
     /** Callback function triggered when an item is selected */

package/cjs/Menu/Menu.js

@@ -10,6 +10,7 @@ var _Menubar = _interopRequireDefault(require("../internals/Menu/Menubar"));
 var _MenuContext = _interopRequireDefault(require("./MenuContext"));
 var _MenuItem = _interopRequireDefault(require("./MenuItem"));
 var _MenuSeparator = _interopRequireDefault(require("./MenuSeparator"));
+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); }
@@ -26,6 +27,7 @@ const Subcomponents = {
  */
 const Menu = (0, _utils.forwardRef)((props, ref) => {
   const {
+    as = 'ul',
     activeKey,
     classPrefix = 'menu',
     className,
@@ -46,7 +48,9 @@ const Menu = (0, _utils.forwardRef)((props, ref) => {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
     vertical: true
-  }, (menubar, menubarRef) => /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({}, menubar, rest, {
+  }, (menubar, menubarRef) => /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, menubar, rest, {
     ref: (0, _utils.mergeRefs)(menubarRef, ref),
     className: classes,
     role: "menu"

package/cjs/Menu/MenuItem.d.ts

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

package/cjs/Menu/MenuItem.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 MenuItem = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'menu-item',
     className,
@@ -42,7 +42,7 @@ const MenuItem = (0, _utils.forwardRef)((props, ref) => {
     menu === null || menu === void 0 || (_menu$onSelect = menu.onSelect) === null || _menu$onSelect === void 0 || _menu$onSelect.call(menu, eventKey, event);
   }, [onSelect, eventKey, menu]);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(menu === null || menu === void 0 ? void 0 : menu.activeKey, eventKey);
-  const renderMenuItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderMenuItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     selected: selected,
     disabled: disabled,

package/cjs/Menu/MenuSeparator.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface MenuSeparatorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+import { BoxProps } from '../internals/Box';
+export interface MenuSeparatorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     /** You can use a custom element for this component */
     as?: React.ElementType;
 }

package/cjs/Menu/MenuSeparator.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 /**
@@ -14,20 +15,21 @@ var _hooks = require("../internals/hooks");
  */
 const MenuSeparator = (0, _utils.forwardRef)((props, ref) => {
   const {
+    as = 'li',
     classPrefix = 'menu-item-divider',
     className,
-    as: Component = 'li',
-    ...restProps
+    ...rest
   } = props;
   const {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     role: "separator",
     className: merge(withPrefix(), className)
-  }, restProps));
+  }, rest));
 });
 MenuSeparator.displayName = 'MenuSeparator';
 var _default = exports.default = MenuSeparator;

package/cjs/Message/Message.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, StatusType } from '../internals/types';
-export interface MessageProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { StatusType } from '../internals/types';
+export interface MessageProps extends BoxProps {
     /**
      * The type of the message box.
      */

package/cjs/Message/Message.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _useDelayedClosure = _interopRequireDefault(require("../toaster/hooks/useDelayedClosure"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
@@ -23,7 +24,7 @@ const Message = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Message', props);
   const {
-    as: Component = 'div',
+    as = 'div',
     bordered,
     centered,
     className,
@@ -75,7 +76,8 @@ const Message = (0, _utils.forwardRef)((props, ref) => {
     ['has-title']: header,
     ['has-icon']: showIcon
   }));
-  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/Modal/Modal.d.ts

@@ -33,12 +33,10 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
  * @see https://rsuitejs.com/components/modal
  */
 declare const Modal: import("../internals/types").InternalRefForwardingComponent<"div", ModalProps, never> & {
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalBody").ModalBodyProps, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", import("..").BoxProps, never> & Record<string, never>;
     Header: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalHeader").ModalHeaderProps, never> & Record<string, never>;
     Title: import("../internals/types").InternalRefForwardingComponent<"h4", import("../internals/utils").ComponentProps, never> & Record<string, never>;
-    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Dialog: import("../internals/types").InternalRefForwardingComponent<"div", import("./ModalDialog").ModalDialogProps, never> & Record<string, never>;
 };
 export default Modal;

package/cjs/Modal/ModalBody.d.ts

@@ -1,4 +1,4 @@
-import type { WithAsProps } from '../internals/types';
-export type ModalBodyProps = WithAsProps;
-declare const ModalBody: import("../internals/types").InternalRefForwardingComponent<"div", ModalBodyProps, never> & Record<string, never>;
+import { BoxProps } from '../internals/Box';
+export type ModalBodyProps = BoxProps;
+declare const ModalBody: import("../internals/types").InternalRefForwardingComponent<"div", BoxProps, never> & Record<string, never>;
 export default ModalBody;

package/cjs/Modal/ModalBody.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _ModalContext = require("./ModalContext");
 var _utils = require("../internals/utils");
@@ -15,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 ModalBody = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-body',
     className,
     style,
@@ -46,7 +47,9 @@ const ModalBody = (0, _utils.forwardRef)((props, ref) => {
       onClick: onModalClose
     }) : closeButton;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     id: dialogId ? `${dialogId}-description` : undefined,
     ref: ref,
     style: (0, _utils.mergeStyles)(bodyStyles, style),

package/cjs/Modal/ModalDialog.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Size } from '../internals/types';
-export interface ModalDialogProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface ModalDialogProps extends BoxProps {
     /** A modal can have different sizes */
     size?: Size;
     dialogClassName?: string;

package/cjs/Modal/ModalDialog.js

@@ -6,11 +6,12 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const ModalDialog = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     style,
     children,
     dialogClassName,
@@ -30,7 +31,8 @@ const ModalDialog = (0, _utils.forwardRef)((props, ref) => {
   const modalStyle = (0, _utils.mergeStyles)({
     display: 'block'
   }, style);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     role: "dialog",
     "aria-modal": true,
     ref: ref,

package/cjs/Modal/ModalFooter.d.ts

@@ -1,6 +1,4 @@
 import { ComponentProps } from '../internals/utils';
 export type ModalFooterProps = ComponentProps;
-declare const ModalFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const ModalFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default ModalFooter;

package/cjs/Modal/ModalHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface ModalHeaderProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface ModalHeaderProps extends BoxProps {
     /** Primary content */
     children?: React.ReactNode;
     /** Display close button */

package/cjs/Modal/ModalHeader.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _CloseButton = _interopRequireDefault(require("../internals/CloseButton"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _ModalContext = require("./ModalContext");
@@ -15,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 ModalHeader = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'modal-header',
     className,
     closeButton = true,
@@ -34,7 +35,9 @@ const ModalHeader = (0, _utils.forwardRef)((props, ref) => {
     isDrawer,
     onModalClose
   } = context || {};
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), closeButton && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {

package/cjs/Modal/ModalTitle.js

@@ -6,6 +6,7 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _ModalContext = require("./ModalContext");
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
@@ -13,7 +14,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 ModalTitle = (0, _utils.forwardRef)((props, ref) => {
   const {
-    as: Component = 'h4',
+    as = 'h4',
     classPrefix = 'modal-title',
     className,
     role,
@@ -25,7 +26,8 @@ const ModalTitle = (0, _utils.forwardRef)((props, ref) => {
   } = (0, _hooks.useStyles)(classPrefix);
   const classes = merge(className, withPrefix());
   const context = (0, _react.useContext)(_ModalContext.ModalContext);
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     id: context ? `${context.dialogId}-title` : undefined
   }, rest, {
     role: role,

package/cjs/MultiCascadeTree/MultiCascadeTree.js

@@ -8,6 +8,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _TreeView = _interopRequireDefault(require("./TreeView"));
 var _SearchView = _interopRequireDefault(require("./SearchView"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("./hooks");
 var _hooks2 = require("../internals/hooks");
@@ -23,7 +24,7 @@ const MultiCascadeTree = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('MultiCascadeTree', props);
   const {
-    as: Component = 'div',
+    as,
     data = emptyArray,
     defaultValue,
     className,
@@ -96,7 +97,8 @@ const MultiCascadeTree = (0, _utils.forwardRef)((props, ref) => {
     merge
   } = (0, _hooks2.useStyles)(classPrefix);
   const classes = merge(className, withPrefix('multi'));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     className: classes
   }, rest), searchable && /*#__PURE__*/_react.default.createElement(_SearchView.default, {

package/cjs/MultiCascadeTree/types.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import type { CascadeTreeProps } from '../CascadeTree/types';
-import type { Option, ToArray, WithAsProps } from '../internals/types';
+import type { Option, ToArray } from '../internals/types';
 export interface ItemKeys {
     valueKey: string;
     labelKey: string;
     childrenKey: string;
 }
-export interface MultiCascadeTreeProps<T = any, V = T[], L = any> extends WithAsProps, CascadeTreeProps<T, V> {
+export interface MultiCascadeTreeProps<T = any, V = T[], L = any> extends CascadeTreeProps<T, V> {
     /**
      * When set to true, selecting a child node will update the state of the parent node.
      */

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 */