carbon-react
Version:
A library of reusable React components for easily building user interfaces.
81 lines (80 loc) • 3.51 kB
TypeScript
import React from "react";
import { FlexboxProps, LayoutProps, MaxWidthProps, PaddingProps } from "styled-system";
import { IconType } from "../../icon";
import { TagProps } from "../../../__internal__/utils/helpers/tags";
export type VariantType = "default" | "alternate";
interface MenuItemBaseProps extends TagProps, Pick<LayoutProps, "width" | "maxWidth" | "minWidth">, FlexboxProps, PaddingProps {
/** onClick handler */
onClick?: (event: React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>) => void;
/** Defines which direction the submenu will hang eg. left/right */
submenuDirection?: string;
/** Is the menu item the currently selected item. */
selected?: boolean;
/** A title for the menu item that has a submenu. */
submenu?: React.ReactNode;
/** The href to use for the menu item. */
href?: string;
/** onKeyDown handler */
onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
/** The target to use for the menu item. */
target?: string;
/** The rel attribute to be used for the underlying <a> tag */
rel?: string;
/** set the colour variant for a menuType */
variant?: VariantType;
/** Flag to display the dropdown arrow when an item has a submenu */
showDropdownArrow?: boolean;
/** If no text is provided an ariaLabel should be given to facilitate accessibility. */
ariaLabel?: string;
/** Callback triggered when submenu opens. Only valid with submenu prop */
onSubmenuOpen?: () => void;
/** Callback triggered when submenu closes. Only valid with submenu prop */
onSubmenuClose?: () => void;
/**
@ignore @private
private prop, used inside ScrollableBlock to ensure the MenuItem's color variant overrides the CSS
for other MenuItems inside the block
*/
overrideColor?: boolean;
/** When set the submenu opens by click instead of hover */
clickToOpen?: boolean;
/**
* Sets the maxWidth of the MenuItem, setting this on a non-submenu
* item will truncate any text/content that may overflow
* */
maxWidth?: MaxWidthProps["maxWidth"];
/**
* @private @ignore
* Renders MenuItem as a div element
* */
as?: "div";
/**
* Sets the maximum width for the item's submenu when it is opened.
* This prop is only applicable if the item has a submenu.
* Overrides the maximum width of any items within the submenu.
* Accepts any valid CSS width value (e.g. "200px", "50%").
* */
submenuMaxWidth?: string;
/**
* Sets a minimum width for the item's submenu when it is opened.
* Accepts any valid CSS width value (e.g. "200px", "50%").
* This prop is only applicable if the item has a submenu.
* */
submenuMinWidth?: string;
}
export interface MenuWithChildren extends MenuItemBaseProps {
children?: React.ReactNode;
/** Either prop `icon` must be defined or this node must have children. */
icon?: IconType;
}
export interface MenuWithIcon extends MenuItemBaseProps {
/** Either prop `icon` must be defined or this node must have children. */
icon: IconType;
children?: React.ReactNode;
}
export type MenuItemHandle = {
/** Programmatically focus the MenuItem. */
focus: () => void;
} | null;
export declare const MenuItem: React.ForwardRefExoticComponent<(MenuWithChildren | MenuWithIcon) & React.RefAttributes<MenuItemHandle>>;
export default MenuItem;