rsuite 6.0.0-canary-20250315 → 6.0.0-canary-2025031915

package/esm/Image/Image.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface ImageProps extends WithAsProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+import { BoxProps } from '../internals/Box';
+export interface ImageProps extends Omit<BoxProps, 'rounded'>, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
     /**
      * An image may appear with border.
      */

package/esm/Image/Image.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { ImageWrapper } from "./ImageWrapper.js";
 import { useImage } from "./hooks/useImage.js";
@@ -11,7 +12,7 @@ const Image = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Image', props);
   const {
-    as: Component = 'img',
+    as = 'img',
     bordered,
     classPrefix = 'image',
     className,
@@ -63,11 +64,8 @@ const Image = forwardRef((props, ref) => {
     ['--rs-object-fit']: fit,
     ['--rs-object-position']: position
   };
-  const wrapStyles = {
-    width,
-    height
-  };
-  const image = /*#__PURE__*/React.createElement(Component, _extends({
+  const image = /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     src: imgSrc,
     className: classes,
@@ -77,12 +75,14 @@ const Image = forwardRef((props, ref) => {
   }, imgProps, rest));
   if (zoomed) {
     return /*#__PURE__*/React.createElement(ImageWrapper, {
-      style: wrapStyles
+      w: width,
+      h: height
     }, image);
   }
   if (placeholder) {
     return /*#__PURE__*/React.createElement(ImageWrapper, {
-      style: wrapStyles
+      w: width,
+      h: height
     }, isLoading && placeholder, image);
   }
   return image;

package/esm/Image/ImageWrapper.d.ts

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

package/esm/InlineEdit/InlineEdit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import { ChildrenProps } from './renderChildren';
-import type { WithAsPropsWithoutChildren } from '../internals/types';
-export interface InlineEditProps extends WithAsPropsWithoutChildren {
+export interface InlineEditProps extends Omit<BoxProps, 'children'> {
     /**
      * If true, the InlineEdit will be disabled.
      */

package/esm/InlineEdit/InlineEdit.js

@@ -4,6 +4,7 @@ import React from 'react';
 import EditableControls from "./EditableControls.js";
 import useFocusEvent from "./useFocusEvent.js";
 import useEditState from "./useEditState.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { renderChildren, defaultRenderInput } from "./renderChildren.js";
@@ -13,7 +14,7 @@ const InlineEdit = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('InlineEdit', props);
   const {
-    as: Component = 'div',
+    as,
     children = defaultRenderInput,
     classPrefix = 'inline-edit',
     className,
@@ -61,7 +62,8 @@ const InlineEdit = forwardRef((props, ref) => {
     onChange,
     onBlur
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: mergeRefs(root, ref),
     tabIndex: 0,
     className: merge(className, withPrefix(size, {

package/esm/Input/Input.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { BoxProps } from '../internals/Box';
 import { PrependParameters } from '../internals/types/utils';
-import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, WithAsProps, Size } from '../internals/types';
+import type { PropsWithoutChange, SanitizedInputProps, FormControlBaseProps, Size } from '../internals/types';
 export interface LocaleType {
     unfilled: string;
 }
-export interface InputProps extends WithAsProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
+export interface InputProps extends BoxProps, SanitizedInputProps, PropsWithoutChange<FormControlBaseProps> {
     /** The HTML input type */
     type?: string;
     /** The HTML input id */

package/esm/Input/Input.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useFormGroup } from "../FormGroup/index.js";
 import { InputGroupContext } from "../InputGroup/InputGroup.js";
@@ -20,9 +21,9 @@ const Input = forwardRef((props, ref) => {
   } = useCustom('Input', props);
   const inputGroup = useContext(InputGroupContext);
   const {
+    as = 'input',
     className,
     classPrefix = 'input',
-    as: Component = 'input',
     type = 'text',
     disabled,
     value,
@@ -79,7 +80,9 @@ const Input = forwardRef((props, ref) => {
     eventProps.onFocus = createChainedFunction(onFocus, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onFocus);
     eventProps.onBlur = createChainedFunction(onBlur, inputGroup === null || inputGroup === void 0 ? void 0 : inputGroup.onBlur);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, eventProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, eventProps, {
     ref: mergeRefs(ref, inputRef),
     className: classes,
     type: type,

package/esm/InputGroup/InputGroup.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { WithAsProps, Size } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
 export declare const InputGroupContext: React.Context<{
     onFocus: () => void;
     onBlur: () => void;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } | null>;
-export interface InputGroupProps extends WithAsProps {
+export interface InputGroupProps extends BoxProps {
     /** Sets the composition content internally */
     inside?: boolean;
     /** An Input group can show that it is disabled */

package/esm/InputGroup/InputGroup.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useCallback, useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import InputGroupAddon from "./InputGroupAddon.js";
 import InputGroupButton from "./InputGroupButton.js";
 import { forwardRef } from "../internals/utils/index.js";
@@ -21,7 +22,7 @@ const InputGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('InputGroup', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'input-group',
     className,
     disabled,
@@ -66,7 +67,9 @@ const InputGroup = forwardRef((props, ref) => {
   }), [size, handleFocus, handleBlur]);
   return /*#__PURE__*/React.createElement(InputGroupContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }), renderChildren()));

package/esm/InputGroup/InputGroupAddon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface InputGroupAddonProps extends WithAsProps, React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '../internals/Box';
+export interface InputGroupAddonProps extends BoxProps, React.HTMLAttributes<HTMLSpanElement> {
     /** An Input group addon can show that it is disabled */
     disabled?: boolean;
 }

package/esm/InputGroup/InputGroupAddon.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 /**
@@ -9,7 +10,7 @@ import { forwardRef } from "../internals/utils/index.js";
  */
 const InputGroupAddon = forwardRef((props, ref) => {
   const {
-    as: Component = 'span',
+    as = 'span',
     classPrefix = 'input-group-addon',
     className,
     disabled,
@@ -22,7 +23,9 @@ const InputGroupAddon = forwardRef((props, ref) => {
   const classes = merge(className, withPrefix({
     disabled
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/esm/InputNumber/InputNumber.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, WithAsProps, Size } from '../internals/types';
-export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, WithAsProps, FormControlBaseProps<T> {
+import { BoxProps } from '../internals/Box';
+import type { SanitizedInputProps, FormControlBaseProps, AppearanceType, Size } from '../internals/types';
+export interface InputNumberProps<T = number | string | null> extends Omit<SanitizedInputProps, 'value' | 'defaultValue' | 'prefix'>, BoxProps, FormControlBaseProps<T> {
     /**
      * Button can have different appearances
      */

package/esm/InputNumber/InputNumber.js

@@ -9,6 +9,7 @@ import InputGroup from "../InputGroup/InputGroup.js";
 import InputGroupAddon from "../InputGroup/InputGroupAddon.js";
 import Input from "../Input/index.js";
 import Button from "../Button/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { forwardRef, partitionHTMLProps, createChainedFunction } from "../internals/utils/index.js";
@@ -75,7 +76,7 @@ const InputNumber = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('InputNumber', props);
   const {
-    as: Component = InputGroup,
+    as = InputGroup,
     className,
     classPrefix = 'input-number',
     disabled,
@@ -261,7 +262,9 @@ const InputNumber = forwardRef((props, ref) => {
   if (plaintext) {
     return input;
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes,
     disabled: disabled,

package/esm/InputPicker/InputPicker.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { type InputOption } from './hooks/useData';
+import { InputOption } from './hooks/useData';
 import { PickerToggleProps } from '../internals/Picker';
 import type { Option, FormControlPickerProps } from '../internals/types';
 import type { InputPickerLocale } from '../locales';
 import type { SelectProps } from '../SelectPicker';
 export type ValueType = any;
-export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
+export interface InputPickerProps<V = ValueType> extends FormControlPickerProps<V, InputPickerLocale, InputOption>, Omit<SelectProps<V>, 'renderValue'>, Pick<PickerToggleProps, 'caretAs' | 'loading' | 'label'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;

package/esm/InputPicker/InputPicker.js

@@ -14,6 +14,7 @@ import Stack from "../Stack/index.js";
 import useInput from "./hooks/useInput.js";
 import useData from "./hooks/useData.js";
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { filterNodesOfTree } from "../internals/Tree/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
@@ -33,11 +34,12 @@ const InputPicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('InputPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     cleanable = true,
     cacheData = [],
     classPrefix = 'picker',
+    caretAs,
     data: controlledData = [],
     disabled,
     readOnly,
@@ -67,6 +69,8 @@ const InputPicker = forwardRef((props, ref) => {
     listProps,
     id,
     tabIndex,
+    loading,
+    label,
     sort,
     renderListbox,
     renderExtraFooter,
@@ -405,6 +409,7 @@ const InputPicker = forwardRef((props, ref) => {
     trigger: triggerRef,
     target,
     overlay,
+    loading,
     ...events,
     ...rest
   });
@@ -574,7 +579,7 @@ const InputPicker = forwardRef((props, ref) => {
     [prefix`disabled-options`]: disabledOptions
   });
   const searching = !!searchKeyword && open;
-  const editable = searchable && !disabled && !rest.loading;
+  const editable = searchable && !disabled && !loading;
   if (plaintext) {
     const plaintextProps = {};
 
@@ -602,18 +607,22 @@ const InputPicker = forwardRef((props, ref) => {
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderPopup,
     placement: placement
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     className: classes,
     style: style,
     onClick: focus,
     onKeyDown: onPickerKeyDown,
     ref: root
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys]), {
+  }, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys])), /*#__PURE__*/React.createElement(PickerToggle, {
+    loading: loading,
+    label: label,
     appearance: appearance,
     readOnly: readOnly,
     plaintext: plaintext,
     ref: target,
     as: toggleAs,
+    caretAs: caretAs,
     tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
@@ -625,7 +634,7 @@ const InputPicker = forwardRef((props, ref) => {
     focusItemValue: focusItemValue,
     caret: !disabledOptions,
     size: size
-  }), searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
+  }, searching || multi && hasValue ? null : itemNode || placeholderNode), /*#__PURE__*/React.createElement(TextBox, {
     showTagList: multi,
     inputRef: inputRef,
     inputValue: open ? searchKeyword : '',

package/esm/Kbd/Kbd.d.ts

@@ -1,5 +1,6 @@
-import type { WithAsProps, Size } from '../internals/types';
-export interface KbdProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+import type { Size } from '../internals/types';
+export interface KbdProps extends BoxProps {
     /**
      * Sets Kbd size.
      */

package/esm/Kbd/Kbd.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -15,7 +16,7 @@ const Kbd = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Kbd', props);
   const {
-    as: Component = 'kbd',
+    as = 'kbd',
     classPrefix = 'kbd',
     className,
     size = 'md',
@@ -26,7 +27,9 @@ const Kbd = forwardRef((props, ref) => {
     merge
   } = useStyles(classPrefix);
   const classes = merge(className, withPrefix(size));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, rest, {
     ref: ref,
     className: classes
   }));

package/esm/List/List.d.ts

@@ -1,6 +1,6 @@
 import { SortConfig } from './helper/useSortHelper';
-import type { WithAsProps } from '../internals/types';
-export interface ListProps extends WithAsProps, SortConfig {
+import { BoxProps } from '../internals/Box';
+export interface ListProps extends BoxProps, SortConfig {
     /**
      * Size of list item.
      */

package/esm/List/List.js

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import useSortHelper from "./helper/useSortHelper.js";
 import ListContext from "./ListContext.js";
 import ListItem from "./ListItem.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -20,7 +21,7 @@ const List = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('List', props);
   const {
-    as: Component = 'div',
+    as,
     autoScroll = true,
     bordered,
     classPrefix = 'list',
@@ -69,14 +70,14 @@ const List = forwardRef((props, ref) => {
     size,
     register
   }), [bordered, register, size]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "list"
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    role: "list",
     ref: mergeRefs(containerRef, ref),
     className: classes,
     onMouseDown: sortable ? handleStart : undefined,
     onMouseUp: sortable ? handleEnd : undefined
-  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
+  }, rest), /*#__PURE__*/React.createElement(ListContext.Provider, {
     value: contextValue
   }, children));
 }, Subcomponents);

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

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useEffect, useRef } from 'react';
 import ListContext from "./ListContext.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef, mergeRefs } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 /**
@@ -10,7 +11,7 @@ import { useStyles } from "../internals/hooks/index.js";
  */
 const ListItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'div',
+    as,
     children,
     className,
     classPrefix = 'list-item',
@@ -51,13 +52,13 @@ const ListItem = forwardRef((props, ref) => {
     disabled,
     bordered
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "listitem",
-    "aria-disabled": disabled
-  }, rest, {
+    "aria-disabled": disabled,
     ref: mergeRefs(listItemRef, ref),
     className: classes
-  }), children);
+  }, rest), children);
 });
 ListItem.displayName = 'ListItem';
 export default ListItem;

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

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useUniqueId } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -13,7 +14,7 @@ const Loader = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Loader', props);
   const {
-    as: Component = 'div',
+    as,
     classPrefix = 'loader',
     className,
     inverse,
@@ -36,13 +37,13 @@ const Loader = forwardRef((props, ref) => {
     vertical,
     inverse
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "status",
-    "aria-labelledby": content ? labelId : undefined
-  }, rest, {
+    "aria-labelledby": content ? labelId : undefined,
     ref: ref,
     className: classes
-  }), backdrop && /*#__PURE__*/React.createElement("div", {
+  }, rest), backdrop && /*#__PURE__*/React.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/React.createElement("div", {
     className: withPrefix()

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

@@ -5,6 +5,7 @@ import Menubar from "../internals/Menu/Menubar.js";
 import MenuContext from "./MenuContext.js";
 import MenuItem from "./MenuItem.js";
 import MenuSeparator from "./MenuSeparator.js";
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
 import { mergeRefs, forwardRef } from "../internals/utils/index.js";
 const Subcomponents = {
@@ -19,6 +20,7 @@ const Subcomponents = {
  */
 const Menu = forwardRef((props, ref) => {
   const {
+    as = 'ul',
     activeKey,
     classPrefix = 'menu',
     className,
@@ -39,7 +41,9 @@ const Menu = forwardRef((props, ref) => {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Menubar, {
     vertical: true
-  }, (menubar, menubarRef) => /*#__PURE__*/React.createElement("ul", _extends({}, menubar, rest, {
+  }, (menubar, menubarRef) => /*#__PURE__*/React.createElement(Box, _extends({
+    as: as
+  }, menubar, rest, {
     ref: mergeRefs(menubarRef, ref),
     className: classes,
     role: "menu"

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

@@ -10,7 +10,7 @@ import { forwardRef, mergeRefs, shallowEqual } from "../internals/utils/index.js
 import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
 const MenuItem = forwardRef((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'menu-item',
     className,
@@ -35,7 +35,7 @@ const MenuItem = 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 || !isNil(eventKey) && shallowEqual(menu === null || menu === void 0 ? void 0 : menu.activeKey, eventKey);
-  const renderMenuItem = useRenderMenuItem(Component);
+  const renderMenuItem = useRenderMenuItem(as);
   return /*#__PURE__*/React.createElement(MenuItemBase, {
     selected: selected,
     disabled: disabled,

package/esm/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;
 }