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

package/esm/Progress/ProgressCircle.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
+import Box from "../internals/Box/index.js";
 import { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
@@ -14,7 +15,7 @@ const ProgressCircle = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('ProgressCircle', props);
   const {
-    as: Component = 'div',
+    as,
     strokeWidth = 6,
     trailWidth = 6,
     percent = 0,
@@ -92,7 +93,8 @@ const ProgressCircle = forwardRef((props, ref) => {
   }, PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/React.createElement("span", {
     key: 1
   }, percent, "%");
-  return /*#__PURE__*/React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: as,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",

package/esm/Progress/ProgressLine.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface ProgressLineProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface ProgressLineProps extends BoxProps {
     /** Line color */
     strokeColor?: string;
     /** Percent of progress */

package/esm/Progress/ProgressLine.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 { PROGRESS_STATUS_ICON } from "../internals/constants/statusIcons.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles } from "../internals/hooks/index.js";
@@ -14,7 +15,7 @@ const ProgressLine = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('ProgressLine', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     percent = 0,
     strokeColor,
@@ -51,7 +52,8 @@ const ProgressLine = forwardRef((props, ref) => {
   }, PROGRESS_STATUS_ICON[status]) : /*#__PURE__*/React.createElement("span", {
     className: prefix('info-status')
   }, percent, "%");
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "progressbar",
     "aria-valuemin": "0",
     "aria-valuemax": "100",

package/esm/Radio/Radio.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Color, HTMLPropsWithoutChange } from '../internals/types';
-export interface RadioProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
+import { BoxProps } from '../internals/Box';
+import { Color, HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioProps<T = string | number> extends BoxProps, HTMLPropsWithoutChange {
     /**
      * The color of the radio when checked
      *

package/esm/Radio/Radio.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from 'react';
+import Box from "../internals/Box/index.js";
 import { RadioContext } from "../RadioGroup/RadioGroup.js";
 import { useStyles, useControlled, useEventCallback, useUniqueId } from "../internals/hooks/index.js";
 import { forwardRef, partitionHTMLProps } from "../internals/utils/index.js";
@@ -24,7 +25,7 @@ const Radio = forwardRef((props, ref) => {
     onChange: onGroupChange
   } = radioContext !== null && radioContext !== void 0 ? radioContext : {};
   const {
-    as: Component = 'div',
+    as,
     title,
     className,
     children,
@@ -72,10 +73,11 @@ const Radio = forwardRef((props, ref) => {
   }
   const labelId = useUniqueId('label-');
   if (plaintext) {
-    return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+    return checked ? /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: ref,
       className: classes
-    }), children) : null;
+    }, restProps), children) : null;
   }
   const control = /*#__PURE__*/React.createElement("span", {
     className: prefix`control`
@@ -95,11 +97,12 @@ const Radio = forwardRef((props, ref) => {
     className: prefix`inner`,
     "aria-hidden": true
   }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     onClick: onClick,
     className: classes
-  }), /*#__PURE__*/React.createElement("div", {
+  }, restProps), /*#__PURE__*/React.createElement("div", {
     className: prefix`checker`
   }, children ? /*#__PURE__*/React.createElement("label", {
     title: title

package/esm/RadioGroup/RadioGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { WithAsProps, PrependParameters, FormControlBaseProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PrependParameters, FormControlBaseProps } from '../internals/types';
 export interface RadioContextProps {
     inline?: boolean;
     name?: string;
@@ -12,7 +13,7 @@ export interface RadioContextProps {
         value: string | number | undefined
     ]>;
 }
-export interface RadioGroupProps<T = string | number> extends WithAsProps, FormControlBaseProps<T> {
+export interface RadioGroupProps<T = string | number> extends BoxProps, FormControlBaseProps<T> {
     /** A radio group can have different appearances */
     appearance?: 'default' | 'picker';
     /** Name to use for form */

package/esm/RadioGroup/RadioGroup.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import Plaintext from "../internals/Plaintext/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
@@ -16,7 +17,7 @@ const RadioGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('RadioGroup', props);
   const {
-    as: Component = 'div',
+    as,
     className,
     inline,
     children,
@@ -58,7 +59,8 @@ const RadioGroup = forwardRef((props, ref) => {
   }, plaintext ? /*#__PURE__*/React.createElement(Plaintext, _extends({
     ref: ref,
     localeKey: "notSelected"
-  }, rest), value ? children : null) : /*#__PURE__*/React.createElement(Component, _extends({
+  }, rest), value ? children : null) : /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "radiogroup"
   }, rest, {
     ref: ref,

package/esm/RadioTile/RadioTile.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, HTMLPropsWithoutChange } from '../internals/types';
-export interface RadioTileProps<T = string | number> extends WithAsProps, HTMLPropsWithoutChange {
+import { BoxProps } from '../internals/Box';
+import type { HTMLPropsWithoutChange } from '../internals/types';
+export interface RadioTileProps<T = string | number> extends BoxProps, HTMLPropsWithoutChange {
     /** Additional description, if needed*/
     children?: React.ReactNode;
     /** Specifies whether the radio is selected */
@@ -25,7 +26,5 @@ export interface RadioTileProps<T = string | number> extends WithAsProps, HTMLPr
  * @version 5.35.0
  * @see https://rsuitejs.com/components/radio-tile/
  */
-declare const RadioTile: import("../internals/types").InternalRefForwardingComponent<import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack").StackProps, never> & {
-    Item: import("../internals/types").InternalRefForwardingComponent<"div", import("../Stack/StackItem").StackItemProps, never> & Record<string, never>;
-}, RadioTileProps<string | number>, never> & Record<string, never>;
+declare const RadioTile: import("../internals/types").InternalRefForwardingComponent<"label", RadioTileProps<string | number>, never> & Record<string, never>;
 export default RadioTile;

package/esm/RadioTile/RadioTile.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useContext } from 'react';
 import CheckIcon from '@rsuite/icons/Check';
-import Stack from "../Stack/index.js";
+import Box from "../internals/Box/index.js";
 import { RadioTileContext } from "../RadioTileGroup/RadioTileGroup.js";
 import { forwardRef, partitionHTMLProps } from "../internals/utils/index.js";
 import { useStyles, useControlled, useUniqueId } from "../internals/hooks/index.js";
@@ -23,7 +23,7 @@ const RadioTile = forwardRef((props, ref) => {
     onChange: onGroupChange
   } = useContext(RadioTileContext);
   const {
-    as: Component = Stack,
+    as = 'label',
     children,
     classPrefix = 'radio-tile',
     checked: checkedProp,
@@ -55,13 +55,11 @@ const RadioTile = forwardRef((props, ref) => {
     disabled
   }));
   const radioId = useUniqueId('radio-');
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    spacing: 6
-  }, restProps, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
-    className: classes,
-    as: "label"
-  }), /*#__PURE__*/React.createElement("div", {
+    className: classes
+  }, restProps), /*#__PURE__*/React.createElement("div", {
     className: prefix('icon')
   }, icon), /*#__PURE__*/React.createElement("div", {
     className: prefix('body')

package/esm/RadioTileGroup/RadioTileGroup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { WithAsProps, FormControlBaseProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { FormControlBaseProps } from '../internals/types';
 export interface RadioTileContextProps {
     name?: string;
     value?: number | string | null;
@@ -7,7 +8,7 @@ export interface RadioTileContextProps {
     disabled?: boolean;
     onChange?: (value: number | string | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export interface RadioTileGroupProps<T = number | string> extends WithAsProps, FormControlBaseProps<T> {
+export interface RadioTileGroupProps<T = number | string> extends BoxProps, FormControlBaseProps<T> {
     /** Name to use for form */
     name?: string;
     /** Inline layout */

package/esm/RadioTileGroup/RadioTileGroup.js

@@ -2,6 +2,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback, useMemo } from 'react';
 import Stack from "../Stack/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled } from "../internals/hooks/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -17,7 +18,7 @@ const RadioTileGroup = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('RadioTileGroup', props);
   const {
-    as: Component = Stack,
+    as = Stack,
     className,
     inline,
     children,
@@ -47,15 +48,15 @@ const RadioTileGroup = forwardRef((props, ref) => {
   }), [disabled, handleChange, name, value]);
   return /*#__PURE__*/React.createElement(RadioTileContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement(Component, _extends({
+  }, /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     alignItems: "stretch",
-    spacing: 10
-  }, rest, {
+    spacing: 10,
     role: "radiogroup",
     direction: inline ? 'row' : 'column',
     ref: ref,
     className: classes
-  }), children));
+  }, rest), children));
 });
 RadioTileGroup.displayName = 'RadioTileGroup';
 export default RadioTileGroup;

package/esm/RangeSlider/RangeSlider.js

@@ -7,6 +7,7 @@ import getOffset from 'dom-lib/getOffset';
 import ProgressBar from "../Slider/ProgressBar.js";
 import Handle from "../Slider/Handle.js";
 import Graduated from "../Slider/Graduated.js";
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { precisionMath, checkValue, getPosition } from "../Slider/utils.js";
@@ -25,7 +26,7 @@ const RangeSlider = forwardRef((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby,
     'aria-valuetext': ariaValuetext,
-    as: Component = 'div',
+    as,
     barClassName,
     className,
     classPrefix = 'slider',
@@ -277,10 +278,11 @@ const RangeSlider = forwardRef((props, ref) => {
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes
-  }), /*#__PURE__*/React.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: merge(barClassName, prefix('bar')),
     ref: barRef,
     onClick: handleBarClick

package/esm/Rate/Character.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-interface CharacterProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+interface CharacterProps extends BoxProps {
     vertical?: boolean;
     status?: 0 | 0.5 | 1;
     disabled?: boolean;

package/esm/Rate/Character.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useRef } from 'react';
 import contains from 'dom-lib/contains';
 import isNil from 'lodash/isNil';
+import Box from "../internals/Box/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 import { useStyles, useEventCallback } from "../internals/hooks/index.js";
 const characterStatus = {
@@ -13,7 +14,7 @@ const characterStatus = {
 const getKey = (a, b) => contains(a, b) ? 'before' : 'after';
 const Character = forwardRef((props, ref) => {
   const {
-    as: Component = 'li',
+    as = 'li',
     classPrefix = 'rate-character',
     className,
     children,
@@ -38,14 +39,15 @@ const Character = forwardRef((props, ref) => {
   const handleClick = useEventCallback(event => {
     onClick === null || onClick === void 0 || onClick(getKey(beforeRef.current, event.target), event);
   });
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     className: classes,
     tabIndex: 0,
     onClick: disabled ? null : handleClick,
     onKeyDown: disabled ? null : onKeyDown,
     onMouseMove: disabled ? null : handleMouseMove
-  }), /*#__PURE__*/React.createElement("div", {
+  }, rest), /*#__PURE__*/React.createElement("div", {
     ref: beforeRef,
     className: prefix('before', {
       vertical

package/esm/Rate/Rate.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import type { WithAsProps, Color, FormControlBaseProps, Size } from '../internals/types';
-export interface RateProps<T = number> extends WithAsProps, FormControlBaseProps<T> {
+import { BoxProps } from '../internals/Box';
+import type { Color, FormControlBaseProps, Size } from '../internals/types';
+export interface RateProps<T = number> extends BoxProps, FormControlBaseProps<T> {
     allowHalf?: boolean;
     character?: React.ReactNode;
     classPrefix?: string;

package/esm/Rate/Rate.js

@@ -5,6 +5,7 @@ import isNil from 'lodash/isNil';
 import Star from '@rsuite/icons/Star';
 import Character from "./Character.js";
 import Plaintext from "../internals/Plaintext/index.js";
+import Box from "../internals/Box/index.js";
 import { KEY_VALUES } from "../internals/constants/index.js";
 import { useControlled, useStyles, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, shallowEqualArray, isPresetColor, createColorVariables, mergeStyles } from "../internals/utils/index.js";
@@ -19,7 +20,7 @@ const Rate = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Rate', props);
   const {
-    as: Component = 'ul',
+    as = 'ul',
     character = /*#__PURE__*/React.createElement(Star, null),
     className,
     classPrefix = 'rate',
@@ -114,7 +115,8 @@ const Rate = forwardRef((props, ref) => {
       className: className
     }, !isNil(value) ? `${value}(${max})` : null);
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     role: "radiogroup",
     tabIndex: 0,
     ref: ref,

package/esm/SafeAnchor/SafeAnchor.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SafeAnchorProps extends WithAsProps, React.HTMLAttributes<HTMLElement> {
+import { BoxProps } from '../internals/Box';
+export interface SafeAnchorProps extends BoxProps, React.HTMLAttributes<HTMLElement> {
     /** Link specified url */
     href?: string;
     /** A link can show it is currently unable to be interacted with */

package/esm/SafeAnchor/SafeAnchor.js

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useCallback } from 'react';
+import Box from "../internals/Box/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { forwardRef } from "../internals/utils/index.js";
 function isTrivialHref(href) {
@@ -16,7 +17,7 @@ const SafeAnchor = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('SafeAnchor', props);
   const {
-    as: Component = 'a',
+    as = 'a',
     href,
     disabled,
     onClick,
@@ -42,7 +43,8 @@ const SafeAnchor = forwardRef((props, ref) => {
     restProps.tabIndex = -1;
     restProps['aria-disabled'] = true;
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
     ref: ref,
     href: href
   }, trivialProps, restProps, {

package/esm/SelectPicker/SelectPicker.js

@@ -6,6 +6,7 @@ import isNil from 'lodash/isNil';
 import isFunction from 'lodash/isFunction';
 import omit from 'lodash/omit';
 import SearchBox from "../internals/SearchBox/index.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useControlled, useEventCallback } from "../internals/hooks/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, shallowEqual, getDataGroupBy } from "../internals/utils/index.js";
 import { Listbox, ListItem, PickerToggle, PickerToggleTrigger, PickerPopup, useFocusItemValue, usePickerClassName, useSearch, useToggleKeyDownEvent, usePickerRef, pickTriggerPropKeys, omitTriggerPropKeys } from "../internals/Picker/index.js";
@@ -20,7 +21,7 @@ const SelectPicker = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('SelectPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     data = emptyArray,
     valueKey = 'value',
@@ -252,7 +253,8 @@ const SelectPicker = forwardRef((props, ref) => {
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderPopup
-  }, /*#__PURE__*/React.createElement(Component, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/esm/Sidebar/Sidebar.d.ts

@@ -1,5 +1,5 @@
-import type { WithAsProps } from '../internals/types';
-export interface SidebarProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface SidebarProps extends BoxProps {
     /** Width */
     width?: number | string;
     /** Sidebar can be collapsed */

package/esm/Sidebar/Sidebar.js

@@ -1,8 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext, useEffect } from 'react';
+import Box from "../internals/Box/index.js";
 import { useStyles } from "../internals/hooks/index.js";
-import { forwardRef, mergeStyles } from "../internals/utils/index.js";
+import { forwardRef } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { ContainerContext } from "../Container/Container.js";
 /**
@@ -14,12 +15,11 @@ const Sidebar = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Sidebar', props);
   const {
-    as: Component = 'aside',
+    as = 'aside',
     classPrefix = 'sidebar',
     className,
     collapsible,
     width = 260,
-    style,
     ...rest
   } = propsWithDefaults;
   const {
@@ -36,15 +36,12 @@ const Sidebar = forwardRef((props, ref) => {
     /** Notify the Container that the Sidebar is in the child node of the Container. */
     setHasSidebar === null || setHasSidebar === void 0 || setHasSidebar(true);
   }, [setHasSidebar]);
-  const styles = mergeStyles(style, {
-    flex: `0 0 ${width}px`,
-    width
-  });
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: as,
+    w: width,
     ref: ref,
-    className: classes,
-    style: styles
-  }));
+    className: classes
+  }, rest));
 });
 Sidebar.displayName = 'Sidebar';
 export default Sidebar;

package/esm/Sidenav/ExpandedSidenavDropdown.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { PlacementCorners, WithAsProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title'> {
+export interface SidenavDropdownProps<T = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLElement>, 'onToggle' | 'title'> {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -31,7 +32,7 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, Omit<React.H
      */
     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/esm/Sidenav/ExpandedSidenavDropdown.js

@@ -6,6 +6,7 @@ import NavContext from "../Nav/NavContext.js";
 import SidenavDropdownCollapse from "./SidenavDropdownCollapse.js";
 import Disclosure from "../internals/Disclosure/Disclosure.js";
 import SidenavDropdownToggle from "./SidenavDropdownToggle.js";
+import Box from "../internals/Box/index.js";
 import { useStyles, useInternalId } from "../internals/hooks/index.js";
 import { forwardRef, kebabPlace, mergeRefs } from "../internals/utils/index.js";
 import { SidenavContext } from "./Sidenav.js";
@@ -18,15 +19,12 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
     throw new Error('<SidenavDropdown> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
     children,
     className,
     menuStyle,
     disabled,
-    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-    renderTitle,
-    renderToggle,
     classPrefix = 'dropdown',
     placement = 'bottomStart',
     toggleClassName,
@@ -35,9 +33,10 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
     toggleAs,
     noCaret,
     style,
+    open: openProp,
+    renderToggle,
     onOpen,
     onClose,
-    open: openProp,
     onToggle,
     ...rest
   } = props;
@@ -80,7 +79,8 @@ const ExpandedSidenavDropdown = forwardRef((props, ref) => {
       [open ? 'expand' : 'collapse']: true,
       disabled
     }));
-    return /*#__PURE__*/React.createElement(Component, _extends({
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      as: as,
       ref: mergeRefs(ref, containerRef),
       style: style,
       className: classes,

package/esm/Sidenav/ExpandedSidenavDropdownItem.d.ts

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

package/esm/Sidenav/ExpandedSidenavDropdownItem.js

@@ -19,7 +19,7 @@ const ExpandedSidenavDropdownItem = forwardRef((props, ref) => {
     throw new Error('<SidenavDropdownItem> component is not supposed to be used standalone. Use <Nav.Item> within <Sidenav> instead.');
   }
   const {
-    as: Component = 'li',
+    as = 'li',
     active: activeProp,
     classPrefix = 'dropdown-item',
     children,
@@ -55,7 +55,7 @@ const ExpandedSidenavDropdownItem = forwardRef((props, ref) => {
   const menuitemEventHandlers = {
     onClick: createChainedFunction(handleClick, onClick)
   };
-  const renderDropdownItem = useRenderMenuItem(Component);
+  const renderDropdownItem = useRenderMenuItem(as);
   if (divider) {
     return renderDropdownItem({
       ref,

package/esm/Sidenav/ExpandedSidenavDropdownMenu.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import type { WithAsProps, SanitizedHTMListProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { SanitizedHTMListProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
-export interface SidenavDropdownMenuProps<T = any> extends WithAsProps, SanitizedHTMListProps<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>> {
+export interface SidenavDropdownMenuProps<T = any> extends BoxProps, SanitizedHTMListProps<HTMLLIElement, React.LiHTMLAttributes<HTMLLIElement>> {
     /** Primary content */
     children?: React.ReactNode;
     /** You can use a custom element for this component */