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

package/esm/Badge/Badge.js

@@ -1,7 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useMemo } from 'react';
-import kebabCase from 'lodash/kebabCase';
 import Box from "../internals/Box/index.js";
 import { useStyles, useCustom } from "../internals/hooks/index.js";
 import { forwardRef, mergeStyles, createOffsetStyles, isPresetColor, createColorVariables } from "../internals/utils/index.js";
@@ -40,30 +39,36 @@ const Badge = forwardRef((props, ref) => {
     var _String;
     return ((_String = String(content)) === null || _String === void 0 ? void 0 : _String.length) === 1;
   }, [content]);
-  const classes = merge(className, withPrefix(isPresetColor(color) && color, shape, {
-    compact,
-    outline,
-    'one-char': isOneChar,
-    hidden: invisible,
-    wrapper: children,
-    independent: !children,
-    [kebabCase(placement)]: children
+  const classes = merge(className, withPrefix({
+    wrapper: children
   }));
   const styles = useMemo(() => mergeStyles(style, createOffsetStyles(offset, '--rs-badge-offset'), createColorVariables(color, '--rs-badge-bg')), [style, offset, color]);
+  const dataAttributes = useMemo(() => {
+    return {
+      ['data-color']: isPresetColor(color) ? color : undefined,
+      ['data-shape']: shape,
+      ['data-compact']: compact,
+      ['data-one-char']: isOneChar,
+      ['data-outline']: outline,
+      ['data-hidden']: invisible,
+      ['data-independent']: !children,
+      ['data-placement']: children ? placement : undefined
+    };
+  }, [color, shape, compact, isOneChar, outline, invisible, children, placement]);
   if (!children) {
     return /*#__PURE__*/React.createElement(Box, _extends({
       as: as,
       ref: ref,
       className: classes,
       style: styles
-    }, rest), text);
+    }, dataAttributes, rest), text);
   }
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,
     className: classes,
     style: styles
-  }, rest), children, /*#__PURE__*/React.createElement("div", {
+  }, dataAttributes, rest), children, /*#__PURE__*/React.createElement("div", {
     className: prefix('content')
   }, text));
 });

package/esm/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { BoxProps } from '../internals/Box';
+import { StyledBoxProps } from '../internals/StyledBox';
 import type { BreadcrumbLocale } from '../locales';
-export interface BreadcrumbProps extends BoxProps {
+export interface BreadcrumbProps extends Omit<StyledBoxProps, 'name'> {
     /**
      * The separator between each breadcrumb item.
      */

package/esm/Button/Button.js

@@ -44,12 +44,7 @@ const Button = forwardRef((props, ref) => {
     prefix,
     merge
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(appearance, color, size, {
-    active,
-    disabled,
-    loading,
-    block
-  }));
+  const classes = merge(className, withPrefix());
   const buttonContent = useMemo(() => {
     const spin = /*#__PURE__*/React.createElement("span", {
       className: prefix`spin`
@@ -80,7 +75,14 @@ const Button = forwardRef((props, ref) => {
     as: buttonAs,
     ref: ref,
     className: classes,
-    onClick: handleClick
+    onClick: handleClick,
+    "data-appearance": appearance,
+    "data-color": color,
+    "data-size": size,
+    "data-block": block,
+    "data-active": active || undefined,
+    "data-disabled": disabled,
+    "data-loading": loading
   }, uncertainProps, rest), buttonContent);
 });
 Button.displayName = 'Button';

package/esm/ButtonGroup/ButtonGroup.js

@@ -31,12 +31,7 @@ const ButtonGroup = forwardRef((props, ref) => {
     withPrefix,
     merge
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    block,
-    divided,
-    vertical,
-    justified
-  }));
+  const classes = merge(className, withPrefix());
   const contextValue = useMemo(() => ({
     size,
     disabled
@@ -48,7 +43,12 @@ const ButtonGroup = forwardRef((props, ref) => {
   }, rest, {
     role: role,
     ref: ref,
-    className: classes
+    className: classes,
+    "data-size": size,
+    "data-block": block,
+    "data-vertical": vertical,
+    "data-justified": justified,
+    "data-divided": divided
   }), children));
 });
 ButtonGroup.displayName = 'ButtonGroup';

package/esm/Card/Card.js

@@ -34,17 +34,17 @@ const Card = forwardRef((props, ref) => {
     withPrefix,
     cssVar
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(direction, size, {
-    bordered,
-    shaded: shaded === true,
-    ['shaded-hover']: shaded === 'hover'
-  }));
+  const classes = merge(className, withPrefix());
   const styles = mergeStyles(style, cssVar('width', width, getCssValue));
   return /*#__PURE__*/React.createElement(Box, _extends({
     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/esm/Checkbox/Checkbox.js

@@ -65,12 +65,7 @@ const Checkbox = forwardRef((props, ref) => {
     prefix,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(color, {
-    inline,
-    indeterminate,
-    disabled,
-    checked
-  }));
+  const classes = merge(className, withPrefix());
   const [htmlInputProps, restProps] = partitionHTMLProps(rest);
 
   // If <Checkbox> is within a <CheckboxGroup>, it's bound to be controlled
@@ -130,7 +125,11 @@ const Checkbox = 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.createElement("div", {
     className: prefix`checker`
   }, /*#__PURE__*/React.createElement("label", {

package/esm/CheckboxGroup/CheckboxGroup.js

@@ -35,9 +35,7 @@ const CheckboxGroup = forwardRef((props, ref) => {
     merge,
     withPrefix
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix({
-    inline
-  }));
+  const classes = merge(className, withPrefix());
   const [value, setValue, isControlled] = useControlled(valueProp, defaultValue);
   const handleChange = useCallback((itemValue, itemChecked, event) => {
     const nextValue = cloneDeep(value) || [];
@@ -69,7 +67,8 @@ const CheckboxGroup = forwardRef((props, ref) => {
   }, rest, {
     ref: ref,
     role: "group",
-    className: classes
+    className: classes,
+    "data-inline": inline
   }), children));
 });
 CheckboxGroup.displayName = 'CheckboxGroup';

package/esm/Dropdown/Dropdown.js

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

package/esm/Dropdown/DropdownItem.js

@@ -105,14 +105,14 @@ const DropdownItem = 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 (!isNil(eventKey) && typeof eventKey !== 'string') {

package/esm/Dropdown/DropdownMenu.js

@@ -112,16 +112,15 @@ const DropdownMenu = /*#__PURE__*/React.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.createElement("div", _extends({
         ref: 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, omit(menuButtonProps, ['role'])), icon && /*#__PURE__*/React.cloneElement(icon, {
@@ -147,13 +146,13 @@ const DropdownMenu = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...menuContainer
   }, menuContainerRef) => {
     const classes = mergeItemClassNames(className, withItemClassPrefix({
-      disabled,
-      open,
       submenu: true
     }));
     return /*#__PURE__*/React.createElement("li", _extends({
       ref: mergeRefs(ref, menuContainerRef),
-      className: classes
+      className: classes,
+      "data-open": open,
+      "data-disabled": disabled
     }, menuContainer));
   });
 });

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

@@ -13,25 +13,25 @@ const IconButton = forwardRef((props, ref) => {
     propsWithDefaults
   } = 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
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(`placement-${placement}`, {
-    circle,
-    'with-text': typeof children !== 'undefined'
-  }));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Button, _extends({}, 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/esm/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/esm/InlineEdit/InlineEdit.js

@@ -66,12 +66,13 @@ const InlineEdit = forwardRef((props, ref) => {
     as: as,
     ref: 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), renderChildren(children, childrenProps, target), showControls && isEditing && /*#__PURE__*/React.createElement(EditableControls, {
     className: prefix('controls'),
     onSave: onSave,

package/esm/InputGroup/InputGroup.js

@@ -41,20 +41,14 @@ const InputGroup = forwardRef((props, ref) => {
     withPrefix,
     merge
   } = useStyles(classPrefix);
-  const classes = merge(className, withPrefix(size, {
-    inside,
-    focus,
-    disabled
-  }));
-  const renderChildren = useCallback(() => {
+  const classes = merge(className, withPrefix());
+  const inputGroupChildren = useMemo(() => {
     return React.Children.map(children, item => {
       if (/*#__PURE__*/React.isValidElement(item)) {
-        if (/*#__PURE__*/React.isValidElement(item)) {
-          // Fix: Add type assertion to pass the disabled prop to the child element
-          return disabled ? /*#__PURE__*/React.cloneElement(item, {
-            disabled
-          }) : item;
-        }
+        // Fix: Add type assertion to pass the disabled prop to the child element
+        return disabled ? /*#__PURE__*/React.cloneElement(item, {
+          disabled
+        }) : item;
       }
       return item;
     });
@@ -70,8 +64,12 @@ const InputGroup = 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';
 export default InputGroup;

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

@@ -1,6 +1,7 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useState, useRef, useImperativeHandle, useEffect, useMemo } from 'react';
+import Box from "../internals/Box/index.js";
 import { partitionHTMLProps, isIE, guid } from "../internals/utils/index.js";
 const sizerStyle = {
   position: 'absolute',
@@ -82,10 +83,6 @@ const InputAutosize = /*#__PURE__*/React.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`,
@@ -116,10 +113,11 @@ const InputAutosize = /*#__PURE__*/React.forwardRef((props, ref) => {
     // By setting an id, matching the style, hiding the `x` symbol by the style.
     htmlInputProps.id = inputId;
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     ref: rootRef,
     className: className,
-    style: wrapperStyle
+    style: style,
+    display: "inline-block"
   }, isIE() ? /*#__PURE__*/React.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: `input#${inputId}::-ms-clear {display: none;}`

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

@@ -59,13 +59,7 @@ const List = forwardRef((props, ref) => {
     pressDelay,
     transitionDuration
   });
-  const classes = merge(className, withPrefix({
-    bordered,
-    sortable,
-    sorting,
-    hover,
-    divider
-  }));
+  const classes = merge(className, withPrefix());
   const contextValue = useMemo(() => ({
     bordered,
     size,
@@ -79,7 +73,12 @@ const List = 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.createElement(ListContext.Provider, {
     value: contextValue
   }, children));

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

@@ -48,14 +48,14 @@ const ListItem = 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.createElement(Box, _extends({
     as: as,
     role: "listitem",
     "aria-disabled": disabled,
+    "data-size": size,
+    "data-disabled": disabled,
+    "data-bordered": bordered,
     ref: mergeRefs(listItemRef, ref),
     className: classes
   }, rest), children);

package/esm/Loader/Loader.js

@@ -31,21 +31,22 @@ const Loader = forwardRef((props, ref) => {
     prefix
   } = useStyles(classPrefix);
   const labelId = useUniqueId('loader-label-');
-  const classes = merge(className, prefix(`speed-${speed}`, size, {
-    center: backdrop || center,
-    vertical,
-    inverse
-  }));
+  const classes = merge(className, withPrefix());
   return /*#__PURE__*/React.createElement(Box, _extends({
     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.createElement("div", {
     className: prefix('backdrop')
   }), /*#__PURE__*/React.createElement("div", {
-    className: withPrefix()
+    className: prefix('box')
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('spin')
   }), content && /*#__PURE__*/React.createElement("span", {

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

@@ -63,12 +63,13 @@ const Nav = 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
@@ -88,7 +89,7 @@ const Nav = forwardRef((props, ref) => {
     }, /*#__PURE__*/React.createElement("ul", _extends({
       ref: ref,
       className: classes
-    }, rest), children));
+    }, dataAttributes, rest), children));
   }
   const hasWaterline = appearance !== 'default';
 
@@ -100,19 +101,17 @@ const Nav = forwardRef((props, ref) => {
       vertical: !!sidenav
     }, (menubar, ref) => /*#__PURE__*/React.createElement(Box, _extends({
       as: as,
-      ref: ref
-    }, rest, {
+      ref: ref,
       className: classes
-    }, menubar), children)));
+    }, dataAttributes, menubar, rest), children)));
   }
   return /*#__PURE__*/React.createElement(NavContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(Box, _extends({
-    as: as
-  }, rest, {
+    as: as,
     ref: menubarRef,
     className: classes
-  }), children, hasWaterline && /*#__PURE__*/React.createElement("div", {
+  }, dataAttributes, rest), children, hasWaterline && /*#__PURE__*/React.createElement("div", {
     className: prefix('bar')
   })));
 }, Subcomponents);

package/esm/Nav/NavDropdownItem.js

@@ -70,14 +70,14 @@ const NavDropdownItem = 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 (!isNil(eventKey) && typeof eventKey !== 'string') {