MenuItemDraggable
MenuItemDraggable renders a menu row that can show a drag grip. The application supplies drag behavior. gripMode defaults to never, which shows no grip; always shows the grip, and onHover swaps the leading content (LeftComponent, otherwise LeftIcon) for the grip while the row is hovered, so it shows nothing without leading content. isDragDisabled affects the appearance, not external drag handlers.
isTooltipOpen and isHoverDisabled are currently accepted but unused. Provide an accessible reordering interface in the surrounding application.
MenuItemSuggestion
MenuItemSuggestion presents a suggested value with an optional icon and supporting text. Without onClick, keep its li root inside a semantic list. selected changes its appearance without adding selection behavior.
onClick gives the row button semantics, a tab stop, and Enter/Space activation. Place clickable rows in <ul role="none"> because their li roots expose button instead of listitem. For a complete selection or action workflow, prefer Dropdown.OptionItem or ListItemButton.
Props
MenuItemDraggable
"danger" | "default" | "placeholder"
default:"default"
Default, danger, or placeholder row styling.
string
Class applied to the row.
ReactNode
Supporting text beside the main label.
"always" | "never" | "onHover"
default:"never"
Grip visibility: never, always, or onHover. always and onHover render a single leading content (LeftComponent when set, otherwise LeftIcon); onHover swaps it for the grip on hover and shows no grip without leading content. Does not implement dragging.
ReactNode
Trailing action elements.
boolean
default:"false"
Disables drag appearance without installing or removing drag handlers.
boolean
Accepted for compatibility; currently has no effect.
boolean
default:"true"
Reveals trailing action elements only on hover.
boolean
Accepted for compatibility; currently has no effect.
ReactNode
Custom leading content.
IconComponent
Leading icon component.
(() => void)
Pointer activation callback. The row itself does not add keyboard or menu semantics.
ReactNode
required
Main row label.
boolean
default:"false"
Places leading content in an icon container.
MenuItemSuggestion
string
Class applied to the row.
string
Supporting text beside the main label.
"left" | "right"
default:"left"
Position of the supporting text.
IconComponent | null
Leading icon component.
((event: MouseEvent<HTMLLIElement, MouseEvent>) => void)
Activation callback. When supplied, the row gains button semantics, a tab stop, and Enter/Space activation.
boolean
Applies selected styling. The application owns selection.
string
required
Main row label.
boolean
default:"false"
Places leading content in an icon container.