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

package/cjs/SafeAnchor/SafeAnchor.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 _CustomProvider = require("../CustomProvider");
 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); }
@@ -23,7 +24,7 @@ const SafeAnchor = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('SafeAnchor', props);
   const {
-    as: Component = 'a',
+    as = 'a',
     href,
     disabled,
     onClick,
@@ -49,7 +50,8 @@ const SafeAnchor = (0, _utils.forwardRef)((props, ref) => {
     restProps.tabIndex = -1;
     restProps['aria-disabled'] = true;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
     ref: ref,
     href: href
   }, trivialProps, restProps, {

package/cjs/Schema/Schema.d.ts

@@ -17,4 +17,5 @@ declare const SchemaTyped: {
         MixedType: typeof MixedType;
     };
 };
+export { SchemaModel as Model, StringType, NumberType, ArrayType, DateType, ObjectType, BooleanType, MixedType };
 export default SchemaTyped;

package/cjs/Schema/Schema.js

@@ -4,6 +4,14 @@
 exports.__esModule = true;
 exports.default = void 0;
 var _schemaTyped = require("schema-typed");
+exports.Model = _schemaTyped.SchemaModel;
+exports.StringType = _schemaTyped.StringType;
+exports.NumberType = _schemaTyped.NumberType;
+exports.ArrayType = _schemaTyped.ArrayType;
+exports.DateType = _schemaTyped.DateType;
+exports.ObjectType = _schemaTyped.ObjectType;
+exports.BooleanType = _schemaTyped.BooleanType;
+exports.MixedType = _schemaTyped.MixedType;
 /**
  * SchemaTyped is a wrapper of schema-typed library to provide a more friendly API.
  * It is used to validate the data of the model.

package/cjs/SelectPicker/SelectPicker.js

@@ -11,6 +11,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _SearchBox = _interopRequireDefault(require("../internals/SearchBox"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _Picker = require("../internals/Picker");
@@ -27,7 +28,7 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('SelectPicker', props);
   const {
-    as: Component = 'div',
+    as,
     appearance = 'default',
     data = emptyArray,
     valueKey = 'value',
@@ -259,7 +260,8 @@ const SelectPicker = (0, _utils.forwardRef)((props, ref) => {
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderPopup
-  }, /*#__PURE__*/_react.default.createElement(Component, {
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: as,
     className: classes,
     style: style,
     ref: root

package/cjs/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/cjs/Sidebar/Sidebar.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 _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _CustomProvider = require("../CustomProvider");
@@ -21,12 +22,11 @@ const Sidebar = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Sidebar', props);
   const {
-    as: Component = 'aside',
+    as = 'aside',
     classPrefix = 'sidebar',
     className,
     collapsible,
     width = 260,
-    style,
     ...rest
   } = propsWithDefaults;
   const {
@@ -43,15 +43,12 @@ const Sidebar = (0, _utils.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 = (0, _utils.mergeStyles)(style, {
-    flex: `0 0 ${width}px`,
-    width
-  });
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+    as: as,
+    w: width,
     ref: ref,
-    className: classes,
-    style: styles
-  }));
+    className: classes
+  }, rest));
 });
 Sidebar.displayName = 'Sidebar';
 var _default = exports.default = Sidebar;

package/cjs/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/cjs/Sidenav/ExpandedSidenavDropdown.js

@@ -11,6 +11,7 @@ var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _SidenavDropdownCollapse = _interopRequireDefault(require("./SidenavDropdownCollapse"));
 var _Disclosure = _interopRequireDefault(require("../internals/Disclosure/Disclosure"));
 var _SidenavDropdownToggle = _interopRequireDefault(require("./SidenavDropdownToggle"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 var _Sidenav = require("./Sidenav");
@@ -25,15 +26,12 @@ const ExpandedSidenavDropdown = (0, _utils.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,
@@ -42,9 +40,10 @@ const ExpandedSidenavDropdown = (0, _utils.forwardRef)((props, ref) => {
     toggleAs,
     noCaret,
     style,
+    open: openProp,
+    renderToggle,
     onOpen,
     onClose,
-    open: openProp,
     onToggle,
     ...rest
   } = props;
@@ -87,7 +86,8 @@ const ExpandedSidenavDropdown = (0, _utils.forwardRef)((props, ref) => {
       [open ? 'expand' : 'collapse']: true,
       disabled
     }));
-    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),
       style: style,
       className: classes,

package/cjs/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/cjs/Sidenav/ExpandedSidenavDropdownItem.js

@@ -26,7 +26,7 @@ const ExpandedSidenavDropdownItem = (0, _utils.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,
@@ -62,7 +62,7 @@ const ExpandedSidenavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
   const menuitemEventHandlers = {
     onClick: (0, _utils.createChainedFunction)(handleClick, onClick)
   };
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (divider) {
     return renderDropdownItem({
       ref,

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

package/cjs/Sidenav/ExpandedSidenavDropdownMenu.js

@@ -13,6 +13,7 @@ var _Ripple = _interopRequireDefault(require("../internals/Ripple"));
 var _Disclosure = _interopRequireDefault(require("../internals/Disclosure/Disclosure"));
 var _ArrowLeftLine = _interopRequireDefault(require("@rsuite/icons/ArrowLeftLine"));
 var _ArrowRightLine = _interopRequireDefault(require("@rsuite/icons/ArrowRightLine"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _Sidenav = require("./Sidenav");
@@ -29,7 +30,7 @@ const ExpandedSidenavDropdownMenu = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<SidenavDropdownMenu> component is not supposed to be used standalone. Use <Nav.Menu> inside <Sidenav> instead.');
   }
   const {
-    as: Component = 'li',
+    as = 'li',
     children,
     disabled,
     className,
@@ -78,13 +79,13 @@ const ExpandedSidenavDropdownMenu = (0, _utils.forwardRef)((props, ref) => {
       disabled
     }));
     const iconClasses = merge(className, prefix('toggle-icon'), prefix(`${open ? 'expand' : 'collapse'}-icon`));
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-      ref: ref
-    }, rest, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
+      ref: ref,
       tabIndex: disabled ? -1 : tabIndex,
       style: style,
       className: classes
-    }, menuitemEventHandlers), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, buttonProps => {
+    }, rest, menuitemEventHandlers), /*#__PURE__*/_react.default.createElement(_Disclosure.default.Button, null, buttonProps => {
       return /*#__PURE__*/_react.default.createElement("button", (0, _extends2.default)({
         className: prefix`toggle`,
         onClick: handleClick

package/cjs/Sidenav/Sidenav.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SidenavProps<T = string | number> extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface SidenavProps<T = string | number> extends BoxProps {
     /** Whether to expand the Sidenav */
     expanded?: boolean;
     /** Menu style */
@@ -42,18 +42,10 @@ export interface SidenavContextType<T = string | number> {
  * @see https://rsuitejs.com/components/sidenav/
  */
 declare const Sidenav: import("../internals/types").InternalRefForwardingComponent<"div", SidenavProps<string | number>, never> & {
-    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
-    GroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-        name: string;
-    }>, never> & Record<string, never>;
+    Header: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Body: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    Footer: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
+    GroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<import("../internals/utils").ComponentProps>, never> & Record<string, never>;
     Toggle: import("../internals/types").InternalRefForwardingComponent<"div", import("./SidenavToggle").SidenavToggleProps, never> & Record<string, never>;
 };
 export default Sidenav;

package/cjs/Sidenav/Sidenav.js

@@ -13,6 +13,7 @@ var _SidenavHeader = _interopRequireDefault(require("./SidenavHeader"));
 var _SidenavFooter = _interopRequireDefault(require("./SidenavFooter"));
 var _SidenavToggle = _interopRequireDefault(require("./SidenavToggle"));
 var _SidenavGroupLabel = _interopRequireDefault(require("./SidenavGroupLabel"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _CustomProvider = require("../CustomProvider");
@@ -37,7 +38,7 @@ const Sidenav = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _CustomProvider.useCustom)('Sidenav', props);
   const {
-    as: Component = 'nav',
+    as = 'nav',
     className,
     classPrefix = 'sidenav',
     appearance = 'default',
@@ -89,7 +90,9 @@ const Sidenav = (0, _utils.forwardRef)((props, ref) => {
       className,
       ...transitionRest
     } = transitionProps;
-    return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, transitionRest, {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as
+    }, rest, transitionRest, {
       ref: (0, _utils.mergeRefs)(ref, transitionRef),
       className: merge(classes, className)
     }));

package/cjs/Sidenav/SidenavBody.d.ts

@@ -5,7 +5,5 @@ export type SidenavBodyProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavBody: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavBody;

package/cjs/Sidenav/SidenavDropdown.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import type { PlacementCorners, WithAsProps, SanitizedHTMListProps } from '../internals/types';
+import { BoxProps } from '../internals/Box';
+import type { PlacementCorners, SanitizedHTMListProps } from '../internals/types';
 import type { IconProps } from '@rsuite/icons/Icon';
 export type SidenavDropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface SidenavDropdownProps<T = any> extends WithAsProps, SanitizedHTMListProps {
+export interface SidenavDropdownProps<T = any> extends BoxProps, SanitizedHTMListProps {
     /** Define the title as a submenu */
     title?: React.ReactNode;
     /** Set the icon */
@@ -28,12 +29,8 @@ export interface SidenavDropdownProps<T = any> extends WithAsProps, SanitizedHTM
      * @deprecated
      */
     open?: boolean;
-    /**
-     * @deprecated
-     */
-    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/Sidenav/SidenavDropdown.js

@@ -15,6 +15,7 @@ var _ExpandedSidenavDropdown = _interopRequireDefault(require("./ExpandedSidenav
 var _NavContext = _interopRequireDefault(require("../Nav/NavContext"));
 var _NavDropdownItem = _interopRequireDefault(require("../Nav/NavDropdownItem"));
 var _NavDropdownMenu = _interopRequireDefault(require("../Nav/NavDropdownMenu"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _NavMenu = require("../Nav/NavMenu");
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
@@ -45,11 +46,8 @@ const SidenavDropdown = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Sidenav.Dropdown> must be rendered within a <Nav> component within a <Sidenav> component.');
   }
   const {
-    as: Component = 'div',
+    as,
     title,
-    onClose,
-    onOpen,
-    onToggle,
     eventKey,
     trigger = 'click',
     placement = 'bottomStart',
@@ -61,6 +59,9 @@ const SidenavDropdown = (0, _utils.forwardRef)((props, ref) => {
     children,
     menuStyle,
     style,
+    onClose,
+    onOpen,
+    onToggle,
     ...toggleProps
   } = props;
   const {
@@ -160,7 +161,8 @@ const SidenavDropdown = (0, _utils.forwardRef)((props, ref) => {
       open,
       submenu: true
     }));
-    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/Sidenav/SidenavDropdownCollapse.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { StandardProps } from '../internals/types';
-export interface SidenavDropdownCollapseProps extends StandardProps {
+import { BoxProps } from '../internals/Box';
+export interface SidenavDropdownCollapseProps extends BoxProps {
     open?: boolean;
 }
 declare const SidenavDropdownCollapse: React.ForwardRefExoticComponent<SidenavDropdownCollapseProps & React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<unknown>>;

package/cjs/Sidenav/SidenavDropdownCollapse.js

@@ -8,10 +8,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Collapse = _interopRequireDefault(require("../Animation/Collapse"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _hooks = require("../internals/hooks");
 var _utils = require("../internals/utils");
 const SidenavDropdownCollapse = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const {
+    as = 'ul',
     className,
     classPrefix = 'dropdown-menu',
     open,
@@ -34,7 +36,8 @@ const SidenavDropdownCollapse = /*#__PURE__*/_react.default.forwardRef((props, r
       className: transitionClassName,
       ...transitionRestProps
     } = transitionProps;
-    return /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
+      as: as,
       ref: (0, _utils.mergeRefs)(ref, transitionRef),
       role: "group",
       className: (0, _classnames.default)(classes, transitionClassName)

package/cjs/Sidenav/SidenavDropdownItem.d.ts

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

package/cjs/Sidenav/SidenavDropdownItem.js

@@ -36,17 +36,17 @@ const SidenavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<Sidenav.Dropdown.Item> must be used within a <Nav> within a <Sidenav> component.');
   }
   const {
+    as = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
-    active: activeProp,
+    children,
+    divider,
+    disabled,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
-    divider,
     panel,
-    children,
-    disabled,
+    onSelect,
     ...restProps
   } = props;
   const {
@@ -60,7 +60,7 @@ const SidenavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     (_nav$onSelect = nav.onSelect) === null || _nav$onSelect === void 0 || _nav$onSelect.call(nav, eventKey, event);
   }, [onSelect, eventKey, nav]);
   const selected = activeProp || !(0, _isNil.default)(eventKey) && (0, _utils.shallowEqual)(nav === null || nav === void 0 ? void 0 : nav.activeKey, eventKey);
-  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(Component);
+  const renderDropdownItem = (0, _useRenderMenuItem.useRenderMenuItem)(as);
   if (sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_ExpandedSidenavDropdownItem.default, (0, _extends2.default)({
       ref: ref

package/cjs/Sidenav/SidenavFooter.d.ts

@@ -5,7 +5,5 @@ export type SidenavFooterProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavFooter: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavFooter;

package/cjs/Sidenav/SidenavGroupLabel.d.ts

@@ -5,7 +5,5 @@ export type SidenavGroupLabelProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavGroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavGroupLabel: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavGroupLabel;

package/cjs/Sidenav/SidenavHeader.d.ts

@@ -5,7 +5,5 @@ export type SidenavHeaderProps = ComponentProps;
  *
  * @see https://rsuitejs.com/components/sidenav
  */
-declare const SidenavHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<{
-    name: string;
-}>, never> & Record<string, never>;
+declare const SidenavHeader: import("../internals/types").InternalRefForwardingComponent<"div", Partial<ComponentProps>, never> & Record<string, never>;
 export default SidenavHeader;

package/cjs/Sidenav/SidenavItem.d.ts

@@ -1,10 +1,11 @@
 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';
 /**
  * Props of SidenavItem component
  */
-export interface SidenavItemProps<T = any> extends WithAsProps, HTMLPropsWithoutSelect {
+export interface SidenavItemProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
     /**
      * Whether the item is activated
      */

package/cjs/Sidenav/SidenavItem.js

@@ -14,6 +14,7 @@ var _MenuItem = _interopRequireDefault(require("../internals/Menu/MenuItem"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Whisper = _interopRequireDefault(require("../Whisper"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Box = _interopRequireDefault(require("../internals/Box"));
 var _utils = require("../internals/utils");
 var _hooks = require("../internals/hooks");
 var _Sidenav = require("./Sidenav");
@@ -32,7 +33,7 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
     throw new Error('<SidenavItem> component is not supposed to be used standalone. Use <Nav.Item> inside <Sidenav> instead.');
   }
   const {
-    as: Component = _SafeAnchor.default,
+    as = _SafeAnchor.default,
     active: activeProp,
     classPrefix = 'sidenav-item',
     children,
@@ -99,9 +100,10 @@ const SidenavItem = (0, _utils.forwardRef)((props, ref) => {
       }));
 
       // Show tooltip when inside a collapse <Sidenav>
-      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)((0, _utils.mergeRefs)(ref, menuitemRef), triggerRef),
-        disabled: Component === _SafeAnchor.default ? disabled : undefined,
+        disabled: as === _SafeAnchor.default ? disabled : undefined,
         className: classes,
         "data-event-key": eventKey
       }, (0, _omit.default)(rest, ['divider', 'panel']), triggerProps, menuitem, {
@@ -126,7 +128,8 @@ const SidenavItem = (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,
     className: merge(className, withPrefix({
       active: selected,

package/cjs/Sidenav/SidenavToggle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface SidenavToggleProps extends WithAsProps {
+import { IconButtonProps } from '../IconButton';
+export interface SidenavToggleProps extends IconButtonProps {
     /** Callback function for menu state switching */
     onToggle?: (expanded: boolean, event: React.MouseEvent) => void;
 }

package/cjs/Sidenav/SidenavToggle.js

@@ -23,6 +23,7 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
     className,
     classPrefix = 'sidenav-toggle',
     onToggle,
+    onClick,
     ...rest
   } = props;
   const expanded = sidenav.expanded;
@@ -33,10 +34,11 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, withPrefix({
     collapsed: !expanded
   }));
-  const handleToggle = event => {
+  const handleToggle = (0, _hooks.useEventCallback)(event => {
     onToggle === null || onToggle === void 0 || onToggle(!expanded, event);
-  };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({}, rest, {
+    onClick === null || onClick === void 0 || onClick(event);
+  });
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({
     ref: ref,
     className: classes,
     icon: /*#__PURE__*/_react.default.createElement(_ArrowLeftLine.default, {
@@ -44,7 +46,7 @@ const SidenavToggle = (0, _utils.forwardRef)((props, ref) => {
     }),
     onClick: handleToggle,
     "aria-label": expanded ? 'Collapse' : 'Expand'
-  }));
+  }, rest));
 });
 SidenavToggle.displayName = 'Sidenav.Toggle';
 var _default = exports.default = SidenavToggle;

package/cjs/Slider/Graduated.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { WithAsProps } from '../internals/types';
-export interface GraduatedProps extends WithAsProps {
+import { BoxProps } from '../internals/Box';
+export interface GraduatedProps extends BoxProps {
     step: number;
     min: number;
     max: number;