rsuite 6.0.0-canary-2025011413 → 6.0.0-canary-20250315

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -13,7 +13,7 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     /**
      * Predefined date ranges
      */
-    ranges?: DateOptionPreset<DateRange>[];
+    ranges?: DateOptionPreset<DateRange | null>[];
     /**
      * Format of the date displayed in the input box
      */
@@ -160,6 +160,12 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Custom render for calendar title
      */
     renderTitle?: (date: Date) => React.ReactNode;
+    /**
+     * Custom rendering calendar cell content.
+     *
+     * @version 5.77.0
+     */
+    renderCell?: (date: Date) => React.ReactNode;
 }
 /**
  * A date range picker allows you to select a date range from a calendar.

package/esm/DateRangePicker/DateRangePicker.js

@@ -19,7 +19,7 @@ import * as StaticMethods from "./disabledDateUtils.js";
 import { DateRangePickerProvider } from "./DateRangePickerProvider.js";
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from "./utils.js";
 import { DATERANGE_DISABLED_TARGET as TARGET } from "../internals/constants/index.js";
-import { useClassNames, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
+import { useStyles, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 import { omitTriggerPropKeys, PickerPopup, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { forwardRef, createChainedFunction, mergeRefs, partitionHTMLProps, getStringLength } from "../internals/utils/index.js";
@@ -48,7 +48,6 @@ const DateRangePicker = forwardRef((props, ref) => {
     defaultValue,
     plaintext,
     disabled,
-    disabledDate: DEPRECATED_disabledDate,
     shouldDisableDate,
     shouldDisableHour,
     shouldDisableMinute,
@@ -63,8 +62,8 @@ const DateRangePicker = forwardRef((props, ref) => {
     locale,
     loading,
     label,
-    menuClassName,
-    menuStyle,
+    popupClassName,
+    popupStyle,
     oneTap,
     placeholder = '',
     placement = 'bottomStart',
@@ -72,8 +71,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     readOnly,
     showOneCalendar = false,
     showWeekNumbers,
-    showMeridian: DEPRECATED_showMeridian,
-    showMeridiem = DEPRECATED_showMeridian,
+    showMeridiem,
     showHeader = true,
     style,
     size,
@@ -92,6 +90,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     onShortcutClick,
     renderTitle,
     renderValue,
+    renderCell,
     ...restProps
   } = propsWithDefaults;
   const id = useUniqueId('rs-', idProp);
@@ -104,7 +103,7 @@ const DateRangePicker = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';
   const rangeFormatStr = `${formatStr}${character}${formatStr}`;
   const [value, setValue] = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
@@ -495,8 +494,7 @@ const DateRangePicker = forwardRef((props, ref) => {
    * Check if the date is disabled
    */
   const isDateDisabled = useDateDisabled({
-    shouldDisableDate,
-    DEPRECATED_disabledDate
+    shouldDisableDate
   });
 
   /**
@@ -549,6 +547,9 @@ const DateRangePicker = forwardRef((props, ref) => {
     if (selectedDates === void 0) {
       selectedDates = [];
     }
+    if (selectedDates === null) {
+      return false;
+    }
     const [startDate, endDate] = selectedDates;
 
     // Disable if either start or end date is missing
@@ -587,11 +588,9 @@ const DateRangePicker = forwardRef((props, ref) => {
   } : undefined;
   const renderCalendarOverlay = (positionProps, speakerRef) => {
     const {
-      left,
-      top,
       className
     } = positionProps;
-    const classes = merge(className, menuClassName, prefix('popup-daterange'));
+    const classes = merge(className, popupClassName, prefix('popup-daterange'));
     const panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar,
       'daterange-panel-only-time': onlyShowTime
@@ -604,11 +603,6 @@ const DateRangePicker = forwardRef((props, ref) => {
     const panelStyles = {
       minWidth: showOneCalendar || onlyShowTime ? 'auto' : 528
     };
-    const styles = {
-      ...menuStyle,
-      left,
-      top
-    };
     const calendarProps = {
       locale,
       isoWeek,
@@ -633,7 +627,8 @@ const DateRangePicker = forwardRef((props, ref) => {
       onChangeCalendarMonth,
       onChangeCalendarTime,
       onMouseMove,
-      renderTitle
+      renderTitle,
+      renderCellOnPicker: renderCell
     };
     const getCalendars = () => {
       if (showOneCalendar) {
@@ -656,12 +651,12 @@ const DateRangePicker = forwardRef((props, ref) => {
       className: classes,
       ref: mergeRefs(overlay, speakerRef),
       target: trigger,
-      style: styles
+      style: popupStyle
     }, /*#__PURE__*/React.createElement("div", {
       className: panelClasses,
       style: panelStyles
     }, /*#__PURE__*/React.createElement(Stack, {
-      alignItems: "flex-start"
+      align: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
       direction: "column",
       spacing: 0,
@@ -702,6 +697,7 @@ const DateRangePicker = forwardRef((props, ref) => {
   const [classes, usedClassNamePropKeys] = usePickerClassName({
     ...props,
     classPrefix,
+    className,
     name: 'daterange',
     appearance,
     hasValue,
@@ -769,7 +765,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
     ref: root,
-    className: merge(className, classes, {
+    className: merge(classes, {
       [prefix('error')]: invalidValue
     }),
     style: style
@@ -802,6 +798,7 @@ const DateRangePicker = forwardRef((props, ref) => {
     onChange: handleInputChange,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
+    size: size,
     loading: loading,
     caretAs: caretAs,
     onClose: handleClean,

package/esm/DateRangePicker/Header.js

@@ -1,13 +1,13 @@
 'use client';
 import React from 'react';
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { compareAsc } from "../internals/utils/date/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
 import Button from "../Button/index.js";
 function Header(props) {
   const {
     prefix
-  } = useClassNames('picker');
+  } = useStyles('picker');
   const {
     formatStr,
     character,

package/esm/DateRangePicker/hooks/useDateDisabled.d.ts

@@ -2,7 +2,6 @@ import { DATERANGE_DISABLED_TARGET as TARGET } from '../../internals/constants';
 import { DisabledDateFunction, SelectedDatesState } from '../types';
 interface UseDateDisabledProps {
     shouldDisableDate?: DisabledDateFunction;
-    DEPRECATED_disabledDate?: DisabledDateFunction;
 }
 interface DateDisabledOptions {
     selectDate?: SelectedDatesState;

package/esm/DateRangePicker/hooks/useDateDisabled.js

@@ -5,8 +5,7 @@ import { useCallback } from 'react';
  */
 export function useDateDisabled(props) {
   const {
-    shouldDisableDate,
-    DEPRECATED_disabledDate
+    shouldDisableDate
   } = props;
   const isDateDisabled = useCallback((date, options) => {
     const {
@@ -17,12 +16,9 @@ export function useDateDisabled(props) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date, selectDate, selectedDone, target);
     }
-    if (typeof DEPRECATED_disabledDate === 'function') {
-      return DEPRECATED_disabledDate(date, selectDate, selectedDone, target);
-    }
     return false;
-  }, [shouldDisableDate, DEPRECATED_disabledDate]);
-  if (shouldDisableDate || DEPRECATED_disabledDate) {
+  }, [shouldDisableDate]);
+  if (shouldDisableDate) {
     return isDateDisabled;
   }
   return undefined;

package/esm/DateRangePicker/types.d.ts

@@ -1,5 +1,5 @@
 import { DATERANGE_DISABLED_TARGET } from '../internals/constants';
-export type ValueType = [Date?, Date?];
+export type ValueType = [Date?, Date?] | null;
 export type DateRange = [Date, Date];
 export type DisabledDateFunction = (
 /**

package/esm/Divider/Divider.d.ts

@@ -1,9 +1,34 @@
-import { WithAsProps } from '../internals/types';
+import React from 'react';
+import type { WithAsProps, Size, Color } from '../internals/types';
 export interface DividerProps extends WithAsProps {
     /**
-     * Vertical dividing line. Cannot be used with text.
+     * The appearance of the divider.
+     */
+    appearance?: 'solid' | 'dashed' | 'dotted';
+    /**
+     * The content of the label.
+     */
+    label?: React.ReactNode;
+    /**
+     * The position of the label.
+     */
+    labelPosition?: 'left' | 'right' | 'center';
+    /**
+     * Vertical dividing line. Cannot be used with label.
      */
     vertical?: boolean;
+    /**
+     * The size of the divider.
+     */
+    size?: Size | number | string;
+    /**
+     * The color of the divider.
+     */
+    color?: Color | React.CSSProperties['color'];
+    /**
+     * The spacing between the divider and its content.
+     */
+    spacing?: Size | number | string;
 }
 /**
  * The Divider component is used to separate content.

package/esm/Divider/Divider.js

@@ -1,8 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React from 'react';
-import { forwardRef } from "../internals/utils/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import StyledBox from "../internals/StyledBox/index.js";
+import { forwardRef, getSizeStyle, mergeStyles } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 /**
  * The Divider component is used to separate content.
@@ -13,30 +14,40 @@ const Divider = forwardRef((props, ref) => {
     propsWithDefaults
   } = useCustom('Divider', props);
   const {
-    as: Component = 'div',
+    as,
+    appearance,
     className,
     classPrefix = 'divider',
     children,
+    color,
+    label = children,
+    labelPosition,
     vertical,
+    spacing,
+    style,
+    size,
     ...rest
   } = propsWithDefaults;
   const {
-    prefix,
-    withClassPrefix,
+    withPrefix,
     merge
-  } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix(vertical ? 'vertical' : 'horizontal', {
-    'with-text': children
-  }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "separator"
-  }, rest, {
+  } = useStyles(classPrefix);
+  const classes = merge(className, withPrefix());
+  const styles = mergeStyles(style, getSizeStyle(spacing, 'divider', 'spacing'));
+  return /*#__PURE__*/React.createElement(StyledBox, _extends({
+    as: as,
+    name: "divider",
+    role: "separator",
     ref: ref,
     className: classes,
-    "aria-orientation": vertical ? 'vertical' : 'horizontal'
-  }), children && /*#__PURE__*/React.createElement("span", {
-    className: prefix('inner-text')
-  }, children));
+    style: styles,
+    size: size,
+    color: color,
+    "data-appearance": appearance,
+    "data-orientation": vertical ? 'vertical' : 'horizontal',
+    "data-with-label": label ? 'true' : undefined,
+    "data-position": labelPosition
+  }, rest), label);
 });
 Divider.displayName = 'Divider';
 export default Divider;

package/esm/Drawer/Drawer.js

@@ -8,7 +8,7 @@ import DrawerHeader from "./DrawerHeader.js";
 import DrawerActions from "./DrawerActions.js";
 import DrawerFooter from "./DrawerFooter.js";
 import DrawerTitle from "./DrawerTitle.js";
-import { useClassNames } from "../internals/hooks/index.js";
+import { useStyles } from "../internals/hooks/index.js";
 import { forwardRef, deprecateComponent } from "../internals/utils/index.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
@@ -41,7 +41,7 @@ const Drawer = forwardRef((props, ref) => {
   const {
     merge,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const classes = merge(className, prefix(placement));
   const animationProps = {
     placement

package/esm/Dropdown/Dropdown.d.ts

@@ -4,59 +4,58 @@ import DropdownMenu from './DropdownMenu';
 import DropdownItem from './DropdownItem';
 import DropdownSeparator from './DropdownSeparator';
 import { IconProps } from '@rsuite/icons/Icon';
-import type { PlacementCorners, WithAsProps, InternalRefForwardingComponent } from '../internals/types';
+import type { PlacementCorners, WithAsProps, InternalRefForwardingComponent, SanitizedHTMListProps } from '../internals/types';
 export type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
-export interface DropdownProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'onToggle' | 'title'> {
-    /** Define the title as a submenu */
-    title?: React.ReactNode;
-    /** Set the icon */
-    icon?: React.ReactElement<IconProps>;
-    /** The option to activate the state, corresponding to the eventkey in the Dropdown.item */
+interface DeprecatedDropdownProps {
+    /**
+     * Deprecated. Use `renderToggle` instead.
+     * @deprecated
+     */
+    renderTitle?: (children: React.ReactNode) => React.ReactNode;
+}
+export interface DropdownProps<T = any> extends WithAsProps, DeprecatedDropdownProps, SanitizedHTMListProps {
+    /** The active option, corresponding to the eventKey in Dropdown.Item */
     activeKey?: T;
-    /** Triggering events */
-    trigger?: DropdownTrigger | DropdownTrigger[];
-    /** The placement of Menu */
-    placement?: PlacementCorners;
-    /** Whether or not component is disabled */
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Whether to disable the component */
     disabled?: boolean;
-    /** The style of the menu */
-    menuStyle?: React.CSSProperties;
-    /** A css class to apply to the Toggle DOM node */
-    toggleClassName?: string;
     /** The value of the current option */
     eventKey?: T;
-    /** You can use a custom element type for this toggle component */
-    toggleAs?: React.ElementType;
-    /** No caret variation */
+    /** Set icon */
+    icon?: React.ReactElement<IconProps>;
+    /** Menu style */
+    menuStyle?: React.CSSProperties;
+    /** Do not display caret */
     noCaret?: boolean;
-    /**
-     * Controlled open state
-     */
+    /** Controlled open state */
     open?: boolean;
-    /**
-     * Whether dropdown is initially open
-     */
-    defaultOpen?: boolean;
-    /**
-     * @deprecated
-     */
-    renderTitle?: (children: React.ReactNode) => React.ReactNode;
-    /** Custom Toggle */
+    /** Menu position */
+    placement?: PlacementCorners;
+    /** Define the title of the submenu */
+    title?: React.ReactNode;
+    /** Toggle component class name */
+    toggleClassName?: string;
+    /** Custom element type can be used for this toggle component */
+    toggleAs?: React.ElementType;
+    /** Trigger event */
+    trigger?: DropdownTrigger | DropdownTrigger[];
+    /** Custom toggle component */
     renderToggle?: (props: WithAsProps, ref: React.Ref<any>) => any;
-    /** The callback function that the menu closes */
+    /** Callback function for closing the menu */
     onClose?: () => void;
-    /** Menu Pop-up callback function */
+    /** Callback function for opening the menu */
     onOpen?: () => void;
-    /** Callback function for menu state switching */
-    onToggle?: (open?: boolean) => void;
-    /** Selected callback function */
+    /** Selection callback function */
     onSelect?: (eventKey: T | undefined, event: React.SyntheticEvent) => void;
+    /** Callback function for menu state toggle */
+    onToggle?: (open?: boolean) => void;
 }
 export interface DropdownComponent extends InternalRefForwardingComponent<'div', DropdownProps> {
     <ToggleAs extends React.ElementType = typeof Button>(props: DropdownProps & {
         ref?: React.Ref<any>;
         toggleAs?: ToggleAs;
-    } & React.ComponentProps<ToggleAs>, context: any): JSX.Element | null;
+    } & React.ComponentProps<ToggleAs>, context: any): React.ReactElement | null;
     Item: typeof DropdownItem;
     Menu: typeof DropdownMenu;
     Separator: typeof DropdownSeparator;

package/esm/Dropdown/Dropdown.js

@@ -9,11 +9,10 @@ import DropdownSeparator from "./DropdownSeparator.js";
 import DropdownContext from "./DropdownContext.js";
 import Menu from "../internals/Menu/Menu.js";
 import DropdownToggle from "./DropdownToggle.js";
-import kebabCase from 'lodash/kebabCase';
 import NavContext from "../Nav/NavContext.js";
 import Nav from "../Nav/index.js";
-import { useClassNames } from "../internals/hooks/index.js";
-import { forwardRef, mergeRefs, placementPolyfill, warnOnce } from "../internals/utils/index.js";
+import { useStyles } from "../internals/hooks/index.js";
+import { forwardRef, mergeRefs, kebabPlace, warnOnce } from "../internals/utils/index.js";
 import { initialState, reducer } from "./DropdownState.js";
 import { useCustom } from "../CustomProvider/index.js";
 const Subcomponents = {
@@ -58,12 +57,12 @@ const Dropdown = forwardRef((props, ref) => {
   const nav = useContext(NavContext);
   const {
     merge,
-    withClassPrefix
-  } = useClassNames(classPrefix);
+    withPrefix
+  } = useStyles(classPrefix);
   const {
-    withClassPrefix: withMenuClassPrefix,
+    withPrefix: withMenuClassPrefix,
     merge: mergeMenuClassName
-  } = useClassNames('dropdown-menu');
+  } = useStyles('dropdown-menu');
   const menuButtonTriggers = useMemo(() => {
     if (!trigger) {
       return undefined;
@@ -143,18 +142,17 @@ const Dropdown = forwardRef((props, ref) => {
       open,
       ...menuContainer
     } = _ref2;
-    const classes = merge(className, withClassPrefix({
-      [`placement-${kebabCase(placementPolyfill(placement))}`]: !!placement,
+    const classes = merge(className, withPrefix({
       disabled,
-      open,
-      'selected-within': hasSelectedItem
+      open
     }));
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: mergeRefs(ref, menuContainerRef),
-      className: classes
-    }, menuContainer, pick(toggleProps, ['data-testid']), {
-      style: style
-    }));
+      className: classes,
+      style: style,
+      "data-placement": kebabPlace(placement),
+      "data-active-descendant": hasSelectedItem
+    }, menuContainer, pick(toggleProps, ['data-testid'])));
   }));
 }, Subcomponents);
 Dropdown.displayName = 'Dropdown';

package/esm/Dropdown/DropdownItem.d.ts

@@ -1,21 +1,22 @@
 import React from 'react';
 import type { IconProps } from '@rsuite/icons/Icon';
-import type { WithAsProps } from '../internals/types';
-export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
-    /** Active the current option */
-    active?: boolean;
-    /** Primary content */
-    children?: React.ReactNode;
-    /** You can use a custom element for this component */
-    as?: React.ElementType;
+import type { WithAsProps, HTMLPropsWithoutSelect } from '../internals/types';
+import type { DeprecatedDropdownItemProps } from './types';
+interface DeprecatedDropdownMenuItemProps extends DeprecatedDropdownItemProps {
     /**
      * Whether to display the divider
      *
      * @deprecated Use dedicated <Dropdown.Separator> component instead
      */
     divider?: boolean;
+}
+export interface DropdownMenuItemProps<T = any> extends WithAsProps, DeprecatedDropdownMenuItemProps, HTMLPropsWithoutSelect {
+    /** Active the current option */
+    active?: boolean;
     /** Disable the current option */
     disabled?: boolean;
+    /** The description of the current option */
+    description?: React.ReactNode;
     /** The value of the current option */
     eventKey?: T;
     /** Displays a custom panel */
@@ -24,17 +25,6 @@ export interface DropdownMenuItemProps<T = any> extends WithAsProps, Omit<React.
     icon?: React.ReactElement<IconProps>;
     /** The submenu that this menuitem controls (if exists) */
     submenu?: React.ReactElement;
-    /**
-     * The sub-level menu appears from the right side by default, and when `pullLeft` is set, it appears from the left.
-     * @deprecated Submenus are now pointing the same direction.
-     */
-    pullLeft?: boolean;
-    /**
-     * Whether the submenu is opened.
-     * @deprecated
-     * @internal
-     */
-    open?: boolean;
     /**
      * The dropdown item keyboard shortcut.
      *

package/esm/Dropdown/DropdownItem.js

@@ -10,10 +10,10 @@ import Nav from "../Nav/index.js";
 import NavContext from "../Nav/NavContext.js";
 import Text from "../Text/index.js";
 import DropdownSeparator from "./DropdownSeparator.js";
-import { useClassNames, useInternalId } from "../internals/hooks/index.js";
+import { useRenderMenuItem } from "../internals/Menu/useRenderMenuItem.js";
+import { useStyles, useInternalId } from "../internals/hooks/index.js";
 import { forwardRef, mergeRefs, shallowEqual, warnOnce } from "../internals/utils/index.js";
 import { DropdownActionType } from "./DropdownState.js";
-import { useRenderDropdownItem } from "./useRenderDropdownItem.js";
 /**
  * The `<Dropdown.Item>` API
  * - When used inside `<Sidenav>`, renders a `<TreeviewItem>`
@@ -21,18 +21,19 @@ import { useRenderDropdownItem } from "./useRenderDropdownItem.js";
  */
 const DropdownItem = forwardRef((props, ref) => {
   const {
+    as: Component = 'li',
+    active: activeProp,
     classPrefix = 'dropdown-item',
     className,
+    children,
     shortcut,
-    active: activeProp,
+    disabled,
+    description,
+    divider,
     eventKey,
-    onSelect,
     icon,
-    as: Component = 'li',
-    divider,
     panel,
-    children,
-    disabled,
+    onSelect,
     ...restProps
   } = props;
   const internalId = useInternalId('DropdownItem');
@@ -40,9 +41,9 @@ const DropdownItem = forwardRef((props, ref) => {
   const dropdown = useContext(DropdownContext);
   const {
     merge,
-    withClassPrefix,
+    withPrefix,
     prefix
-  } = useClassNames(classPrefix);
+  } = useStyles(classPrefix);
   const handleSelectItem = useCallback(event => {
     var _dropdown$onSelect;
     onSelect === null || onSelect === void 0 || onSelect(eventKey, event);
@@ -71,7 +72,7 @@ const DropdownItem = forwardRef((props, ref) => {
       };
     }
   }, [internalId, selected, dispatch]);
-  const renderDropdownItem = useRenderDropdownItem(Component);
+  const renderDropdownItem = useRenderMenuItem(Component);
 
   // If using <Dropdown.Item> within <Nav>
   // Suggest <Nav.Item>
@@ -104,7 +105,7 @@ const DropdownItem = forwardRef((props, ref) => {
       active,
       ...menuitem
     } = _ref;
-    const classes = merge(className, withClassPrefix({
+    const classes = merge(className, withPrefix({
       'with-icon': icon,
       active: selected,
       disabled,
@@ -126,10 +127,14 @@ const DropdownItem = forwardRef((props, ref) => {
       ...restProps,
       children: /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.cloneElement(icon, {
         className: classNames(prefix('menu-icon'), icon.props.className)
-      }), /*#__PURE__*/React.createElement(Text, {
-        as: "span",
+      }), /*#__PURE__*/React.createElement("div", {
         className: prefix('content')
-      }, children), shortcut && /*#__PURE__*/React.createElement(Text, {
+      }, /*#__PURE__*/React.createElement(Text, {
+        as: "span"
+      }, children), /*#__PURE__*/React.createElement(Text, {
+        as: "span",
+        muted: true
+      }, description)), shortcut && /*#__PURE__*/React.createElement(Text, {
         as: "kbd",
         className: prefix('shortcut'),
         muted: true