@trail-ui/react
Version:
67 lines (64 loc) • 2.15 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { MenuItemVariantProps, SlotsToClasses, MenuItemSlots } from '@trail-ui/theme';
import { ReactNode } from 'react';
import { MenuItemProps as MenuItemProps$1 } from 'react-aria-components';
type MenuItemSelectedIconProps = {
/**
* The current icon, usually an checkmark icon.
*/
icon?: ReactNode;
/**
* The current selected status.
*/
isSelected?: boolean;
/**
* The current disabled status.
* @default false
*/
isDisabled?: boolean;
};
interface MenuItemProps extends MenuItemProps$1, MenuItemVariantProps {
/**
* The menu item subtitle.
*/
description?: ReactNode | string;
/**
* The menu item keyboard shortcut.
*/
shortcut?: ReactNode | string;
/**
* The menu item start content.
*/
startContent?: ReactNode;
/**
* The menu item end content.
*/
endContent?: ReactNode;
/**
* The menu item `selected` icon, it's usually an checkmark icon.
* If you pass a function, NextUI will expose the current selected icon and the selected status,
* In case you want to use a custom indicator or modify the current one.
*
* Important: The selected icon will be rendered only if the menu selection mode is different than `none`.
*/
selectedIcon?: ReactNode | ((props: MenuItemSelectedIconProps) => ReactNode) | null;
/**
* Classname or List of classes to change the classNames of the element.
* if `className` is passed, it will be added to the base slot.
*
* @example
* ```ts
* <MenuItem classNames={{
* base:"base-classes",
* title:"label-classes",
* wrapper:"wrapper-classes", // title and description wrapper
* description:"description-classes",
* selectedIcon:"selected-icon-classes",
* shortcut:"shortcut-classes",
* }} />
* ```
*/
classNames?: SlotsToClasses<MenuItemSlots>;
}
declare function MenuItem(props: MenuItemProps): react_jsx_runtime.JSX.Element;
export { MenuItem, MenuItemProps, MenuItemSelectedIconProps };