rsuite 6.0.0-canary-20250624 → 6.0.0-canary-20250702

package/cjs/Card/Card.js

@@ -39,17 +39,17 @@ const Card = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     cssVar
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(direction, size, {
-    bordered,
-    shaded: shaded === true,
-    ['shaded-hover']: shaded === 'hover'
-  }));
+  const classes = merge(className, withPrefix());
   const styles = (0, _utils.mergeStyles)(style, cssVar('width', width, _utils.getCssValue));
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
     className: classes,
-    style: styles
+    style: styles,
+    "data-size": size,
+    "data-direction": direction,
+    "data-bordered": bordered,
+    "data-shaded": shaded
   }, rest), children);
 }, Subcomponents);
 Card.displayName = 'Card';

package/cjs/Checkbox/Checkbox.js

@@ -71,12 +71,7 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
     prefix,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(color, {
-    inline,
-    indeterminate,
-    disabled,
-    checked
-  }));
+  const classes = merge(className, withPrefix());
   const [htmlInputProps, restProps] = (0, _utils.partitionHTMLProps)(rest);
 
   // If <Checkbox> is within a <CheckboxGroup>, it's bound to be controlled
@@ -136,7 +131,11 @@ const Checkbox = (0, _utils.forwardRef)((props, ref) => {
   }, restProps, {
     ref: ref,
     onClick: onClick,
-    className: classes
+    className: classes,
+    "data-color": color,
+    "data-checked": indeterminate ? 'mixed' : checked,
+    "data-disabled": disabled,
+    "data-inline": inline
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix`checker`
   }, /*#__PURE__*/_react.default.createElement("label", {

package/cjs/CheckboxGroup/CheckboxGroup.js

@@ -41,9 +41,7 @@ const CheckboxGroup = (0, _utils.forwardRef)((props, ref) => {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
-    inline
-  }));
+  const classes = merge(className, withPrefix());
   const [value, setValue, isControlled] = (0, _hooks.useControlled)(valueProp, defaultValue);
   const handleChange = (0, _react.useCallback)((itemValue, itemChecked, event) => {
     const nextValue = (0, _cloneDeep.default)(value) || [];
@@ -75,7 +73,8 @@ const CheckboxGroup = (0, _utils.forwardRef)((props, ref) => {
   }, rest, {
     ref: ref,
     role: "group",
-    className: classes
+    className: classes,
+    "data-inline": inline
   }), children));
 });
 CheckboxGroup.displayName = 'CheckboxGroup';

package/cjs/Dropdown/Dropdown.js

@@ -145,15 +145,14 @@ const Dropdown = (0, _utils.forwardRef)((props, ref) => {
     open,
     ...menuContainer
   }, menuContainerRef) => {
-    const classes = merge(className, withPrefix({
-      disabled,
-      open
-    }));
+    const classes = merge(className, withPrefix());
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
       className: classes,
       style: style,
       "data-placement": (0, _utils.kebabPlace)(placement),
+      "data-disabled": disabled,
+      "data-open": open,
       "data-active-descendant": hasSelectedItem
     }, menuContainer, (0, _pick.default)(toggleProps, ['data-testid'])));
   }));

package/cjs/Dropdown/DropdownItem.js

@@ -111,14 +111,14 @@ const DropdownItem = (0, _utils.forwardRef)((props, ref) => {
     ...menuitem
   }, menuitemRef) => {
     const classes = merge(className, withPrefix({
-      'with-icon': icon,
-      active: selected,
-      disabled,
-      focus: active,
       divider,
       panel
     }));
     const dataAttributes = {
+      'data-disabled': disabled,
+      'data-focus': active,
+      'data-active': selected,
+      'data-with-icon': !!icon,
       'data-event-key': eventKey
     };
     if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {

package/cjs/Dropdown/DropdownMenu.js

@@ -118,16 +118,15 @@ const DropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       active,
       ...menuitem
     }, menuitemRef) => {
-      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-        'with-icon': icon,
-        open,
-        active: selected,
-        disabled,
-        focus: active
-      }));
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix());
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),
         className: classes,
+        "data-open": open,
+        "data-disabled": disabled,
+        "data-focus": active,
+        "data-active": selected,
+        "data-with-icon": icon,
         "data-event-key": eventKey,
         "data-event-key-type": typeof eventKey
       }, menuitem, (0, _omit.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
@@ -153,13 +152,13 @@ const DropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     ...menuContainer
   }, menuContainerRef) => {
     const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
       submenu: true
     }));
     return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, menuContainer));
   });
 });

package/cjs/FormControl/FormControl.d.ts

@@ -7,7 +7,7 @@ import type { ErrorMessagePlacement, FormControlBaseProps, CheckTriggerType } fr
  * Props that FormControl passes to its accepter
  */
 export type FormControlAccepterProps<ValueType = any> = FormControlBaseProps<ValueType>;
-export interface FormControlProps<ValueType = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange'> {
+export interface FormControlProps<ValueType = any> extends BoxProps, Omit<React.HTMLAttributes<HTMLFormElement>, 'value' | 'onChange' | 'color'> {
     /** Proxied components */
     accepter?: React.ElementType;
     /**

package/cjs/FormControlLabel/FormControlLabel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-export interface FormControlLabelProps extends BoxProps, React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface FormControlLabelProps extends BoxProps, Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'color'> {
     /** Attribute of the html label tag, defaults to the controlId of the FormGroup */
     htmlFor?: string;
 }

package/cjs/FormHelpText/FormHelpText.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BoxProps } from '../internals/Box';
-export interface FormHelpTextProps extends BoxProps, React.HTMLAttributes<HTMLSpanElement> {
+export interface FormHelpTextProps extends BoxProps, Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
     /** Whether to show through the Tooltip component */
     tooltip?: boolean;
 }

package/cjs/IconButton/IconButton.d.ts

@@ -7,7 +7,7 @@ export interface IconButtonProps extends ButtonProps {
     /** Set circle button */
     circle?: boolean;
     /** The placement of icon */
-    placement?: 'left' | 'right';
+    placement?: 'left' | 'right' | 'start' | 'end';
 }
 /**
  * The `IconButton` component is used to specify a button with icon.

package/cjs/IconButton/IconButton.js

@@ -18,25 +18,25 @@ const IconButton = (0, _utils.forwardRef)((props, ref) => {
     propsWithDefaults
   } = (0, _hooks.useCustom)('IconButton', props);
   const {
-    icon,
-    placement = 'left',
-    children,
     circle,
-    classPrefix = 'btn-icon',
+    children,
     className,
+    classPrefix = 'btn-icon',
+    placement = 'start',
+    icon,
     ...rest
   } = propsWithDefaults;
   const {
     merge,
     withPrefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(`placement-${placement}`, {
-    circle,
-    'with-text': typeof children !== 'undefined'
-  }));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, rest, {
     ref: ref,
-    className: classes
+    className: classes,
+    "data-shape": circle ? 'circle' : undefined,
+    "data-placement": placement,
+    "data-with-text": typeof children !== 'undefined' || undefined
   }), icon, children);
 });
 IconButton.displayName = 'IconButton';

package/cjs/Image/Image.d.ts

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

package/cjs/InlineEdit/InlineEdit.js

@@ -71,12 +71,13 @@ const InlineEdit = (0, _utils.forwardRef)((props, ref) => {
     as: as,
     ref: (0, _utils.mergeRefs)(root, ref),
     tabIndex: 0,
-    className: merge(className, withPrefix(size, {
+    className: merge(className, withPrefix({
       disabled
     })),
     onClick: onClick,
     onKeyDown: onKeyDown,
-    onFocus: onFocus
+    onFocus: onFocus,
+    "data-size": size
   }, htmlProps), (0, _renderChildren.renderChildren)(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/_react.default.createElement(_EditableControls.default, {
     className: prefix('controls'),
     onSave: onSave,

package/cjs/InputGroup/InputGroup.js

@@ -47,20 +47,14 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    inside,
-    focus,
-    disabled
-  }));
-  const renderChildren = (0, _react.useCallback)(() => {
+  const classes = merge(className, withPrefix());
+  const inputGroupChildren = (0, _react.useMemo)(() => {
     return _react.default.Children.map(children, item => {
       if (/*#__PURE__*/_react.default.isValidElement(item)) {
-        if (/*#__PURE__*/_react.default.isValidElement(item)) {
-          // Fix: Add type assertion to pass the disabled prop to the child element
-          return disabled ? /*#__PURE__*/_react.default.cloneElement(item, {
-            disabled
-          }) : item;
-        }
+        // Fix: Add type assertion to pass the disabled prop to the child element
+        return disabled ? /*#__PURE__*/_react.default.cloneElement(item, {
+          disabled
+        }) : item;
       }
       return item;
     });
@@ -76,8 +70,12 @@ const InputGroup = (0, _utils.forwardRef)((props, ref) => {
     as: as
   }, rest, {
     ref: ref,
-    className: classes
-  }), renderChildren()));
+    className: classes,
+    "data-size": size,
+    "data-inside": inside,
+    "data-disabled": disabled,
+    "data-focus": focus
+  }), inputGroupChildren));
 }, Subcomponents);
 InputGroup.displayName = 'InputGroup';
 var _default = exports.default = InputGroup;

package/cjs/InputGroup/InputGroupAddon.d.ts

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

package/cjs/InputPicker/InputAutosize.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 _utils = require("../internals/utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const sizerStyle = {
@@ -88,10 +89,6 @@ const InputAutosize = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     return currentValue;
   });
   const inputWidth = useInputWidth(props, sizerRef, placeholderRef);
-  const wrapperStyle = {
-    display: 'inline-block',
-    ...style
-  };
   const nextInputStyle = {
     boxSizing: 'content-box',
     width: `${inputWidth}px`,
@@ -122,10 +119,11 @@ const InputAutosize = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     // By setting an id, matching the style, hiding the `x` symbol by the style.
     htmlInputProps.id = inputId;
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
     ref: rootRef,
     className: className,
-    style: wrapperStyle
+    style: style,
+    display: "inline-block"
   }, (0, _utils.isIE)() ? /*#__PURE__*/_react.default.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `input#${inputId}::-ms-clear {display: none;}`

package/cjs/List/List.d.ts

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

package/cjs/List/List.js

@@ -65,13 +65,7 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     pressDelay,
     transitionDuration
   });
-  const classes = merge(className, withPrefix({
-    bordered,
-    sortable,
-    sorting,
-    hover,
-    divider
-  }));
+  const classes = merge(className, withPrefix());
   const contextValue = (0, _react.useMemo)(() => ({
     bordered,
     size,
@@ -85,7 +79,12 @@ const List = (0, _utils.forwardRef)((props, ref) => {
     onMouseDown: sortable ? handleStart : undefined,
     onMouseUp: sortable ? handleEnd : undefined,
     onTouchStart: sortable ? handleTouchStart : undefined,
-    onTouchEnd: sortable ? handleTouchEnd : undefined
+    onTouchEnd: sortable ? handleTouchEnd : undefined,
+    "data-bordered": bordered,
+    "data-hover": hover,
+    "data-sortable": sortable,
+    "data-sorting": sorting,
+    "data-divider": divider
   }, rest), /*#__PURE__*/_react.default.createElement(_ListContext.default.Provider, {
     value: contextValue
   }, children));

package/cjs/List/ListItem.d.ts

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

package/cjs/List/ListItem.js

@@ -54,14 +54,14 @@ const ListItem = (0, _utils.forwardRef)((props, ref) => {
       return unregister;
     }
   }, [collection, disabled, index, register]);
-  const classes = merge(className, withPrefix(size, {
-    disabled,
-    bordered
-  }));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     role: "listitem",
     "aria-disabled": disabled,
+    "data-size": size,
+    "data-disabled": disabled,
+    "data-bordered": bordered,
     ref: (0, _utils.mergeRefs)(listItemRef, ref),
     className: classes
   }, rest), children);

package/cjs/Loader/Loader.js

@@ -36,21 +36,22 @@ const Loader = (0, _utils.forwardRef)((props, ref) => {
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
   const labelId = (0, _hooks.useUniqueId)('loader-label-');
-  const classes = merge(className, prefix(`speed-${speed}`, size, {
-    center: backdrop || center,
-    vertical,
-    inverse
-  }));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     role: "status",
     "aria-labelledby": content ? labelId : undefined,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": size,
+    "data-speed": speed,
+    "data-center": backdrop || center,
+    "data-direction": vertical ? 'vertical' : 'horizontal',
+    "data-inverse": inverse
   }, rest), backdrop && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: withPrefix()
+    className: prefix('box')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('spin')
   }), content && /*#__PURE__*/_react.default.createElement("span", {

package/cjs/Menu/MenuSeparator.d.ts

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

package/cjs/Nav/Nav.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { BoxProps } from '../internals/Box';
+import { BaseBoxProps } from '../internals/Box';
 import type { HTMLPropsWithoutSelect } from '../internals/types';
-export interface NavProps<T = any> extends BoxProps, HTMLPropsWithoutSelect {
+export interface NavProps<T = any> extends BaseBoxProps, HTMLPropsWithoutSelect {
     /**
      * The appearance style of the Nav component.
      * - 'pills' appearance is deprecated. Use `SegmentedControl` component instead.

package/cjs/Nav/Nav.js

@@ -69,12 +69,13 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
   const classes = merge(className, rootPrefix({
     'navbar-nav': navbar,
     'sidenav-nav': sidenav
-  }), withPrefix(appearance, {
-    horizontal: (navbar || !sidenav) && !vertical,
-    vertical: vertical || sidenav,
-    justified,
-    reversed
-  }));
+  }), withPrefix());
+  const dataAttributes = {
+    'data-appearance': appearance,
+    'data-reversed': reversed,
+    'data-justified': justified,
+    'data-direction': vertical || sidenav ? 'vertical' : 'horizontal'
+  };
   const {
     activeKey: activeKeyFromSidenav,
     onSelect: onSelectFromSidenav
@@ -94,7 +95,7 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
     }, /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
       ref: ref,
       className: classes
-    }, rest), children));
+    }, dataAttributes, rest), children));
   }
   const hasWaterline = appearance !== 'default';
 
@@ -106,19 +107,17 @@ const Nav = (0, _utils.forwardRef)((props, ref) => {
       vertical: !!sidenav
     }, (menubar, ref) => /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
       as: as,
-      ref: ref
-    }, rest, {
+      ref: ref,
       className: classes
-    }, menubar), children)));
+    }, dataAttributes, menubar, rest), children)));
   }
   return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: as
-  }, rest, {
+    as: as,
     ref: menubarRef,
     className: classes
-  }), children, hasWaterline && /*#__PURE__*/_react.default.createElement("div", {
+  }, dataAttributes, rest), children, hasWaterline && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('bar')
   })));
 }, Subcomponents);

package/cjs/Nav/NavDropdownItem.js

@@ -76,14 +76,14 @@ const NavDropdownItem = (0, _utils.forwardRef)((props, ref) => {
     ...menuitem
   }, menuitemRef) => {
     const classes = merge(className, withPrefix({
-      'with-icon': icon,
-      active: selected,
-      disabled,
-      focus: active,
       divider,
       panel
     }));
     const dataAttributes = {
+      'data-focus': active,
+      'data-active': selected,
+      'data-disabled': disabled,
+      'data-with-icon': !!icon,
       'data-event-key': eventKey
     };
     if (!(0, _isNil.default)(eventKey) && typeof eventKey !== 'string') {

package/cjs/Nav/NavDropdownMenu.js

@@ -73,16 +73,15 @@ const NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
       active,
       ...menuitem
     }, menuitemRef) => {
-      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix({
-        'with-icon': icon,
-        open,
-        active: selected,
-        disabled,
-        focus: active
-      }));
+      const classes = mergeItemClassNames(className, prefixItemClassName`toggle`, withItemClassPrefix());
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         ref: (0, _utils.mergeRefs)(buttonRef, menuitemRef),
         className: classes,
+        "data-open": open,
+        "data-focus": active,
+        "data-active": selected,
+        "data-disabled": disabled,
+        "data-with-icon": icon,
         "data-event-key": eventKey,
         "data-event-key-type": typeof eventKey
       }, menuitem, (0, _omit.default)(menuButtonProps, ['role'])), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
@@ -108,14 +107,12 @@ const NavDropdownMenu = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     open,
     ...menuContainer
   }, menuContainerRef) => {
-    const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
-      submenu: true
-    }));
+    const classes = mergeItemClassNames(className, withItemClassPrefix('submenu'));
     return /*#__PURE__*/_react.default.createElement("li", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(ref, menuContainerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, menuContainer));
   });
 });

package/cjs/Nav/NavItem.d.ts

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

package/cjs/Nav/NavItem.js

@@ -58,10 +58,7 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
     merge,
     prefix
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix({
-    active,
-    disabled
-  }));
+  const classes = merge(className, withPrefix());
   const handleClick = (0, _react.useCallback)(event => {
     if (!disabled) {
       emitSelect(event);
@@ -86,13 +83,14 @@ const NavItem = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
     as: as,
     ref: ref,
-    tabIndex: disabled ? -1 : undefined
-  }, rest, {
+    tabIndex: disabled ? -1 : undefined,
     className: classes,
     onClick: handleClick,
     style: style,
-    "aria-selected": active || undefined
-  }), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
+    "aria-selected": active || undefined,
+    "data-active": active || undefined,
+    "data-disabled": disabled
+  }, rest), icon && /*#__PURE__*/_react.default.cloneElement(icon, {
     className: (0, _classnames.default)(prefix('icon'), icon.props.className)
   }), children, /*#__PURE__*/_react.default.createElement(_Ripple.default, null));
 });

package/cjs/Navbar/Navbar.js

@@ -42,8 +42,8 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
     withPrefix,
     merge
   } = (0, _hooks.useStyles)(classPrefix);
-  const classes = merge(className, withPrefix(appearance));
-  const [open, setOpen] = _react.default.useState(false);
+  const classes = merge(className, withPrefix());
+  const [open, setOpen] = (0, _react.useState)(false);
   const handleToggle = (0, _hooks.useEventCallback)(nextOpen => {
     setOpen(nextOpen);
     onDrawerOpenChange === null || onDrawerOpenChange === void 0 || onDrawerOpenChange(nextOpen);
@@ -58,11 +58,11 @@ const Navbar = (0, _utils.forwardRef)((props, ref) => {
   return /*#__PURE__*/_react.default.createElement(_NavbarContext.NavbarContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
-    as: as
-  }, rest, {
+    as: as,
     ref: ref,
-    className: classes
-  })));
+    className: classes,
+    "data-appearance": appearance
+  }, rest)));
 }, Subcomponents);
 Navbar.displayName = 'Navbar';
 var _default = exports.default = Navbar;