MenuItemWithDrop

Type: React component

A MenuItem variant which adds the ability to open and close a drop. This component only standardizes the behavior of opening and closing the drop, the actual contents can be specified using a render function.

Closing the outer drop or the drop rendered for this menu item is done automatically by any descendant MenuItem or MenuItemWithDrop. If you render anything else inside the drop and want to close the outer drop or the drop rendered for this menu item, use the provided closeOuterDrop callback inside the "props" of this component's renderDrop.

When providing an "onClick" property, the item will split itself in two parts: a clickable part and a part used for opening the drop on hover. Both parts manage their own hover state.

Should be rendered inside a Menu or MenuGroup.

Props

  1. icon

    (Optional)

    Type: FDS~Icon

    Default value

  2. isDisabled

    (Optional)

    Default value

  3. isHovered

    (Optional)

    Default value

  4. isSelected

    (Optional)

    Default value

  5. keyBindingLabel

    (Optional)

    Default value

  6. label

    (Optional)

    Type: FDS~Label

    Default value

  7. onClick

    (Optional)

    Default value

  8. onMouseEnter

    (Optional)

    Default value

  9. onMouseLeave

    (Optional)

    Default value

  10. renderDrop

    (Required)

    Type: Function

    A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.

    Arguments

    Returns

  11. tooltipContent

    (Optional)

    Default value