@carbon/react
Version:
React components for the Carbon Design System
115 lines (114 loc) • 4.13 kB
TypeScript
/**
* Copyright IBM Corp. 2023, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { type ComponentProps, type ElementType, type KeyboardEvent, type LiHTMLAttributes, type MouseEvent, type ReactNode } from 'react';
export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
/**
* Optionally provide another Menu to create a submenu. props.children can't be used to specify the content of the MenuItem itself. Use props.label instead.
*/
children?: ReactNode;
/**
* Additional CSS class names.
*/
className?: string;
/**
* Specify the message read by screen readers for the danger menu item variant
*/
dangerDescription?: string;
/**
* Specify whether the MenuItem is disabled or not.
*/
disabled?: boolean;
/**
* Specify the kind of the MenuItem.
*/
kind?: 'default' | 'danger';
/**
* A required label titling the MenuItem. Will be rendered as its text content.
*/
label: string;
/**
* Provide an optional function to be called when the MenuItem is clicked.
*/
onClick?: (event: KeyboardEvent<HTMLLIElement> | MouseEvent<HTMLLIElement>) => void;
/**
* A component used to render an icon.
*/
renderIcon?: ElementType;
/**
* Provide a shortcut for the action of this MenuItem. Note that the component will only render it as a hint but not actually register the shortcut.
*/
shortcut?: string;
}
export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
export interface MenuItemSelectableProps extends Omit<MenuItemProps, 'onChange'> {
/**
* Specify whether the option should be selected by default.
*/
defaultSelected?: boolean;
/**
* Provide an optional function to be called when the selection state changes.
*/
onChange?: (checked: boolean) => void;
/**
* Controls the state of this option.
*/
selected?: boolean;
}
export declare const MenuItemSelectable: React.ForwardRefExoticComponent<MenuItemSelectableProps & React.RefAttributes<HTMLLIElement>>;
export interface MenuItemGroupProps extends ComponentProps<'ul'> {
/**
* A collection of MenuItems to be rendered within this group.
*/
children?: ReactNode;
/**
* Additional CSS class names.
*/
className?: string;
/**
* A required label titling this group.
*/
label: string;
}
export declare const MenuItemGroup: React.ForwardRefExoticComponent<Omit<MenuItemGroupProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
export interface MenuItemRadioGroupProps<Item> extends Omit<ComponentProps<'ul'>, 'onChange'> {
/**
* Additional CSS class names.
*/
className?: string;
/**
* Specify the default selected item. Must match the type of props.items.
*/
defaultSelectedItem?: Item;
/**
* Converts an item into a string for display.
*/
itemToString?: (item: Item) => string;
/**
* Provide the options for this radio group. Can be of any type, as long as you provide an appropriate props.itemToString function.
*/
items: Item[];
/**
* A required label titling this radio group.
*/
label: string;
/**
* Provide an optional function to be called when the selection changes.
*/
onChange?: (selectedItem: Item) => void;
/**
* Provide props.selectedItem to control the state of this radio group. Must match the type of props.items.
*/
selectedItem?: Item;
}
export declare const MenuItemRadioGroup: React.ForwardRefExoticComponent<Omit<MenuItemRadioGroupProps<unknown>, "ref"> & React.RefAttributes<HTMLLIElement>>;
export interface MenuItemDividerProps extends ComponentProps<'li'> {
/**
* Additional CSS class names.
*/
className?: string;
}
export declare const MenuItemDivider: React.ForwardRefExoticComponent<Omit<MenuItemDividerProps, "ref"> & React.RefAttributes<HTMLLIElement>>;