import React from 'react';
import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
import type { WithDeterministicIdProps } from '@instructure/ui-react-utils';
import type { OtherHTMLAttributes, Renderable, AsElementType } from '@instructure/shared-types';
import type { NewComponentTypes } from '@instructure/ui-themes';
import { Drilldown } from '@instructure/ui-drilldown/latest';
import type { DrilldownProps } from '@instructure/ui-drilldown/latest';
import type { PopoverProps } from '@instructure/ui-popover/latest';
import type { TooltipProps } from '@instructure/ui-tooltip/latest';
import type { BaseButtonOwnProps } from '@instructure/ui-buttons/latest';
import type { ViewOwnProps, ViewProps } from '@instructure/ui-view/latest';
import { TopNavBarContextType } from '../TopNavBarContext';
import { TopNavBarItem } from './index';
type ItemChild = React.ComponentElement<TopNavBarItemProps, TopNavBarItem>;
type DrilldownSubmenu = React.ComponentElement<DrilldownProps, Drilldown>;
type ShouldCloseOnClick = 'auto' | 'always' | 'never';
type TopNavBarItemTooltipType = string | {
    renderTip: TooltipProps['renderTip'];
    color?: TooltipProps['color'];
    placement?: TooltipProps['placement'];
    offsetX?: TooltipProps['offsetX'];
    offsetY?: TooltipProps['offsetY'];
    onShowContent?: TooltipProps['onShowContent'];
    onHideContent?: TooltipProps['onHideContent'];
};
type TopNavBarItemOwnProps = {
    /**
     * the element type to render as (will default to `<a>` if href is provided)
     */
    as?: AsElementType;
    /**
     * Required id, used for internal tracking,
     * and it also appears as an id on the item element.
     */
    id: string;
    /**
     * A required label of the navbar item.
     *
     * __Note__ that it is required even for the `variant="icon"` type items: the label will be used as an accessible label for screen readers.
     */
    children: React.ReactNode;
    /**
     * The display variant of the item.
     *
     * The __"default"__ variant is displayed as a normal menu item.
     *
     * The __"button"__ variant is displayed as a button.
     *
     * The __"icon"__ variant is displayed as an icon without label.
     *
     * The __"avatar"__ variant is displayed as an avatar without label.
     *
     * The __"forceIconWithLabel"__ variant is displayed as default on desktop and the same way (with label) on mobile.
     */
    variant?: 'default' | 'button' | 'icon' | 'avatar' | 'forceIconWithLabel';
    /**
     * The status of the item.
     *
     * The __"active"__ status indicates current page or currently active menu item.
     * Only `variant="default"` items can be set to active.
     *
     * The __"disabled"__ status indicates that the items is disabled.
     */
    status?: 'default' | 'active' | 'disabled';
    /**
     * Renders the submenu for the item.
     * Accepts a [Drilldown](Drilldown) component.
     * The menu toggle logic is controlled by the menu item.
     *
     * If you need more customization, use the `customPopoverConfig` prop.
     */
    renderSubmenu?: DrilldownSubmenu;
    /**
     * Displays the open/close chevron next to the item,
     * when it has a submenu or custom popover.
     */
    showSubmenuChevron?: boolean;
    /**
     * Configures a custom Popover for the menu item.
     * Accepts [Popover](Popover) props (except "renderTrigger").
     *
     * Use this prop for features like search, tooltips, etc., and use
     * the `renderSubmenu` prop for the default submenu!
     *
     * In small viewport mode only items in `<TopNavBar.ActionItems>` can display custom popovers.
     */
    customPopoverConfig?: Omit<PopoverProps, 'renderTrigger' | 'positionContainerDisplay'>;
    /**
     * Configures a Tooltip for the menu item.
     *
     * Tooltips can be useful for `variant="icon"` or `variant="avatar"` type
     * menu items where there is no visible text.
     *
     * Accepts a string or a config object containing a subset of props from [Tooltip](Tooltip).
     */
    tooltip?: TopNavBarItemTooltipType;
    /**
     * Config for displaying an avatar.
     *
     * Used only in `<TopNavBar.User>`, and it is a __required__ prop for the `variant="avatar"` type menu items.
     *
     * - __avatarSrc__: Avatar url
     * - __avatarName__: A __required__ name (user's name) for the avatar
     * - __avatarAlt__: Accessible label for the avatar
     */
    renderAvatar?: {
        avatarSrc?: string;
        avatarName: string;
        avatarAlt?: string;
    };
    /**
     * Renders an icon before the label, or by itself.
     *
     * It is __required__ for the `variant="icon"` type menu items.
     * It is also __required__ for items in `<TopNavBar.ActionItems>`
     * in small viewport mode, because only the icons are displayed
     * due to the lack of space.
     */
    renderIcon?: Renderable;
    /**
     * If the item goes to a new page, pass a href.
     * Items with submenus cannot have href prop.
     */
    href?: string;
    /**
     * If the item does not go to a new page, pass an onClick.
     * Items with submenus cannot have onClick prop, use the `onSubmenuToggle` prop instead.
     */
    onClick?: (event: React.MouseEvent<ViewOwnProps> | React.KeyboardEvent<ViewOwnProps>) => void;
    /**
     * Only fires when the item is hidden because of truncation or mobile view. Intended to be used for navigation when the item would otherwise be a link.
     */
    onHiddenClick?: (event: React.MouseEvent<ViewOwnProps> | React.KeyboardEvent<ViewOwnProps>) => void;
    /**
     * __In desktop mode__, the callback fired when the item's submenu ([Drilldown](Drilldown)) is toggled open/closed.
     */
    onSubmenuToggle?: DrilldownProps['onToggle'];
    /**
     * __In desktop mode__, the callback fired when mouse is over item.
     */
    onMouseOver?: (event: React.MouseEvent<BaseButtonOwnProps>) => void;
    /**
     * __In desktop mode__, the callback fired when mouse leaves item.
     */
    onMouseOut?: (event: React.MouseEvent<BaseButtonOwnProps>) => void;
    /**
     * __In desktop mode__, the callback fired when the item is focused.
     */
    onFocus?: (event: React.FocusEvent<BaseButtonOwnProps>) => void;
    /**
     * __In desktop mode__, the callback fired when the item is blurred.
     */
    onBlur?: (event: React.FocusEvent<BaseButtonOwnProps>) => void;
    /**
     * __In desktop mode__, the callback fired on keydown.
     */
    onKeyDown?: (event: React.KeyboardEvent<ViewProps>) => void;
    /**
     * __In desktop mode__, the callback fired on keyup.
     */
    onKeyUp?: (event: React.KeyboardEvent<BaseButtonOwnProps>) => void;
    /**
     * A function that returns a reference to root HTML element
     */
    elementRef?: (el: Element | null) => void;
    /**
     * A function that returns a reference to the button/link HTML element
     */
    itemRef?: (el: HTMLButtonElement | HTMLLinkElement | null) => void;
    /**
     * Should close the container menu component, if clicked on the option marked with this prop
     */
    shouldCloseOnClick?: ShouldCloseOnClick;
    /**
     * Manually control if this component should display a focus outline.
     *
     * When left `undefined` (which is the default) the focus outline will display
     * if this component is focusable and receives focus or has an open popover.
     */
    withFocusOutline?: boolean;
};
type PropKeys = keyof TopNavBarItemOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type TopNavBarItemProps = TopNavBarItemOwnProps & WithStyleProps<ReturnType<NewComponentTypes['TopNavBarItem']>, TopNavBarItemStyle> & OtherHTMLAttributes<TopNavBarItemOwnProps> & WithDeterministicIdProps;
type TopNavBarItemStyle = ComponentStyle<'topNavBarItem' | 'container' | 'content' | 'contentText' | 'avatarContainer' | 'submenuTriggerContainer' | 'submenuIcon'> & {
    focusOutlineOffset: string | 0;
    itemInlinePadding: string;
};
type TopNavBarItemState = {
    isSubmenuOpen: boolean;
    isPopoverOpen: boolean;
    isFocused: boolean;
};
type TopNavBarItemStyleProps = {
    layout: TopNavBarContextType['layout'];
    inverseColor: TopNavBarContextType['inverseColor'];
};
declare const allowedProps: AllowedPropKeys;
export type { ItemChild, TopNavBarItemProps, TopNavBarItemOwnProps, TopNavBarItemStyle, TopNavBarItemState, TopNavBarItemStyleProps, DrilldownSubmenu, TopNavBarItemTooltipType };
export { allowedProps };
//# sourceMappingURL=props.d.ts.map