import React from 'react';
import MenuItem from '../MenuItem';
import type { AsElementType, MenuItemTheme, OtherHTMLAttributes } from '@instructure/shared-types';
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils';
type OnMenuItemSelect = (e: React.MouseEvent, value: MenuItemProps['value'], selected: MenuItemProps['selected'], args: MenuItem) => void;
type MenuItemOwnProps = {
    /**
     * the menu item label
     */
    children: React.ReactNode;
    /**
     * whether to set the menu item state to selected or not on initial render
     */
    defaultSelected?: boolean;
    /**
     * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
     */
    selected?: boolean;
    /**
     * when used with the `selected` prop, the component will not control its own state
     */
    onSelect?: OnMenuItemSelect;
    onClick?: (e: React.MouseEvent) => void;
    onKeyDown?: (e: React.KeyboardEvent) => void;
    onKeyUp?: (e: React.KeyboardEvent) => void;
    onMouseOver?: (e: React.MouseEvent, args: MenuItem) => void;
    /**
     * the id of the element that the menu item will act upon
     */
    controls?: string;
    disabled?: boolean;
    /**
     * the element type to render as (will default to `<a>` if href is provided)
     */
    as?: AsElementType;
    /**
     * How this component should be rendered. If it's `checkbox` or `radio` it will
     * display a checkmark based on its own 'selected' state, if it's `flyout` it will
     * render an arrow after the label.
     */
    type?: 'button' | 'checkbox' | 'radio' | 'flyout';
    /**
     * Arbitrary value that you can store in this component. Is sent out by the
     * `onSelect` event
     */
    value?: string | number;
    /**
     * Value of the `href` prop that will be put on the underlying DOM element.
     */
    href?: string;
    /**
     * Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe>).
     */
    target?: string;
    /**
     * Content to render in the label's info region
     */
    renderLabelInfo?: React.ReactNode | (() => React.ReactNode);
};
type PropKeys = keyof MenuItemOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type MenuItemProps = MenuItemOwnProps & WithStyleProps<MenuItemTheme, MenuItemStyle> & OtherHTMLAttributes<MenuItemOwnProps> & WithDeterministicIdProps;
type MenuItemStyle = ComponentStyle<'menuItem' | 'icon' | 'labelInfo' | 'label'>;
declare const allowedProps: AllowedPropKeys;
type MenuItemState = {
    selected?: boolean;
    isHovered: boolean;
    isFocused: boolean;
};
export type { MenuItemProps, MenuItemStyle, MenuItemState, OnMenuItemSelect };
export { allowedProps };
//# sourceMappingURL=props.d.ts.map