@carbon/react
Version:
React components for the Carbon Design System
111 lines (110 loc) • 4.01 kB
TypeScript
/**
* Copyright IBM Corp. 2023, 2025
*
* 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, { ComponentProps, FC, KeyboardEvent, LiHTMLAttributes, MouseEvent, 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 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?: FC;
/**
* 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;
/**
* Provide a function to convert an item to the string that will be rendered. Defaults to item.toString().
*/
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>>;