import type * as React from 'react'; import type { Override } from '../helpers/overrides'; import type { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants'; export declare type Item = any; export declare type ArrayItems = ReadonlyArray; export declare type GroupedItems = { __ungrouped: ArrayItems; [x: string]: ArrayItems; }; export declare type Items = ArrayItems | GroupedItems; export declare type GetItemLabelFn = (item: Item) => React.ReactNode; export declare type GetProfileItemLabelsFn = (item: Item) => { title?: string; subtitle?: string; body?: string; }; export declare type GetProfileItemImgFn = (item: Item) => string | React.ComponentType; export declare type GetProfileItemImgTextFn = (item: Item) => string; export declare type SetRootRefFn = (ref: React.RefObject) => void; export declare type RootRef = { current: null | HTMLElement; }; export declare type OnItemSelectFn = (a: { item: Item; event?: React.SyntheticEvent | KeyboardEvent; }) => unknown; export declare type ProfileOverrides = { List?: Override; ListItemProfile?: Override; ProfileImgContainer?: Override; ProfileImg?: Override; ProfileLabelsContainer?: Override; ProfileTitle?: Override; ProfileSubtitle?: Override; ProfileBody?: Override; }; export declare type RenderItemProps = { disabled?: boolean; ref?: React.RefObject; id?: string | null; isFocused?: boolean; isHighlighted?: boolean; onClick?: (event: React.MouseEvent) => void; onMouseEnter?: (event: React.MouseEvent) => void; resetMenu?: () => void; }; export declare type GetRequiredItemPropsFn = (item: Item, index: number) => RenderItemProps; export declare type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPES | undefined | null, changes: Partial, currentState: StatefulContainerState) => StatefulContainerState; export declare type StatefulContainerState = { activedescendantId?: string | null; highlightedIndex: number; isFocused: boolean; }; export declare type InitialState = { activedescendantId?: string | null; highlightedIndex?: number; isFocused?: boolean; }; export declare type RenderProps = StatefulContainerState & { items: Items; getRequiredItemProps: GetRequiredItemPropsFn; }; /** * Component Prop Types * ==================== * Required and Optional are split into separate object types, and internals are all * marked as required because otherwise defaultProps will not work properly */ export declare type StatefulContainerProps = { /** List of menu items. */ items: Items; /** Initial state of the stateful menu. */ initialState: InitialState; /** State reducer to intercept state changes and return new internal state */ stateReducer: StateReducerFn; /** Function to get props for each rendered item. This will have some defaults needed for keyboard * bindings to work properly. Every rendered item should call this. */ getRequiredItemProps: GetRequiredItemPropsFn; onActiveDescendantChange?: (id?: string) => unknown; /** Callback executed on menu item clicks. */ onItemSelect: OnItemSelectFn; /** Ref for the menu container element. Used to capture key events for navigation */ rootRef?: RootRef; /** Node for menu's keyboard listener. Default is null and keyboard handlers will listen on menu root. */ keyboardControlNode: { current: HTMLElement | null; }; /** whether has keyboard type-ahead function */ typeAhead: boolean; /** Child as function pattern. */ children: (a: RenderProps) => React.ReactNode; addMenuToNesting?: (ref: { current: HTMLElement | null; }) => void; removeMenuFromNesting?: (ref: { current: HTMLElement | null; }) => void; getParentMenu?: (ref: { current: HTMLElement | null; }) => { current: HTMLElement | null; } | undefined | null; getChildMenu?: (ref: { current: HTMLElement | null; }) => { current: HTMLElement | null; } | undefined | null; nestedMenuHoverIndex?: number; isNestedMenuVisible?: (ref: { current: HTMLElement | null; }) => boolean; forceHighlight: boolean; }; export declare type MenuOverrides = { EmptyState?: Override; List?: Override; Option?: Override; OptgroupHeader?: Override; ListItem?: Override; MenuDivider?: Override; }; export declare type MenuProps = { overrides?: MenuOverrides; /** Renders all menu content for SEO purposes regardless of menu state */ renderAll?: boolean; }; export declare type MenuProfileProps = { /** Returns an object consisting of title, subtitle, and body to render menu item */ getProfileItemLabels: GetProfileItemLabelsFn; /** Returns either an image source url, or a full React component to render as the image. */ getProfileItemImg: GetProfileItemImgFn; /** Returns the alt text for the image */ getProfileItemImgText: GetProfileItemImgTextFn; overrides?: ProfileOverrides; }; export declare type SharedStatelessProps = { /** Id of the highlighted menu item. */ activedescendantId?: string | null; /** Function to get props for each rendered item. This will have some defaults needed for keyboard * bindings to work properly. Every rendered item should call this. */ /** Passed to the top level menu element. */ 'aria-label'?: string; getRequiredItemProps?: GetRequiredItemPropsFn; isFocused?: boolean; handleMouseLeave?: (event: React.MouseEvent) => unknown; /** Index of highlighted menu item. */ highlightedIndex?: number; /** List of menu items. */ items: Items; /** Message to be displayed if no menu items are passed in. */ noResultsMsg?: React.ReactNode; onBlur?: (event: React.FocusEvent) => unknown; onFocus?: (event: React.FocusEvent) => unknown; /** Ref for the menu container element. Used to capture key events for navigation */ rootRef?: RootRef; focusMenu?: (event: React.FocusEvent | React.MouseEvent | KeyboardEvent) => unknown; unfocusMenu?: () => unknown; handleKeyDown?: (event: KeyboardEvent) => unknown; }; export declare type StatefulMenuProps = { /** List of menu items. */ items: Items; /** Initial state of the stateful menu. */ initialState?: InitialState; /** State reducer to intercept state changes and return new internal state */ stateReducer?: StateReducerFn; /** Function to get props for each rendered item. This will have some defaults needed for keyboard * bindings to work properly. Every rendered item should call this. */ getRequiredItemProps?: GetRequiredItemPropsFn; onActiveDescendantChange?: (id?: string) => unknown; /** Callback executed on menu item clicks. */ onItemSelect?: OnItemSelectFn; /** Ref for the menu container element. Used to capture key events for navigation */ rootRef?: RootRef; /** Child as function pattern. */ children?: (a: RenderProps) => React.ReactNode; /** whether has keyboard type-ahead function */ typeAhead?: boolean; addMenuToNesting?: (ref: { current: HTMLElement | null; }) => void; removeMenuFromNesting?: (ref: { current: HTMLElement | null; }) => void; getParentMenu?: (ref: { current: HTMLElement | null; }) => { current: HTMLElement | null; } | undefined | null; getChildMenu?: (ref: { current: HTMLElement | null; }) => { current: HTMLElement | null; } | undefined | null; nestedMenuHoverIndex?: number; isNestedMenuVisible?: (ref: { current: HTMLElement | null; }) => boolean; } & MenuProps; export declare type StatefulMenuProfileProps = StatefulContainerProps & MenuProfileProps; export declare type StatelessMenuProps = SharedStatelessProps & MenuProps; export declare type StatelessMenuProfileProps = SharedStatelessProps & MenuProfileProps; export declare type OptionListProps = { /** Item to parse and render. */ item: Item; /** Function used to get the string label for each item. */ getItemLabel: GetItemLabelFn; /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */ getChildMenu?: (item: Item) => React.ReactNode; onClick?: (event: React.MouseEvent) => unknown; /** Callback used to change highlighted index in stateful menu. */ onMouseDown?: (event: React.MouseEvent) => unknown; /** Callback used to change highlighted index in stateful menu. */ onMouseEnter?: (event: React.MouseEvent) => unknown; /** Renders UI in defined scale. */ size?: keyof typeof OPTION_LIST_SIZE; overrides?: { ListItem?: Override; ListItemAnchor?: Override; ChildMenuPopover?: Override; }; renderHrefAsAnchor?: boolean; /** Utility to reset menu to default state. Useful for rendering child menus. */ resetMenu?: () => void; /** Renders UI in 'highlighted' state. */ $isHighlighted?: boolean; /** Is the parent menu focused. determines if highlighted item should be blue or black */ $isFocused?: boolean; /** Renders all menu content for SEO purposes regardless of menu state */ renderAll?: boolean; /** Is the item disabled */ $disabled?: boolean; /** Is the item disabled */ 'aria-disabled'?: boolean; /** Is the item selected */ 'aria-selected'?: boolean; /** Id of the item */ id?: string; /** Accessibility role of the item */ role?: string; }; export declare type OptionProfileProps = { /** Item to parse and render. */ item: Item; /** Used to render a sub menu at this menu item. You'll often render another menu from this function. */ getChildMenu?: (item: Item) => React.ReactNode; /** Returns an object consisting of title, subtitle, and body to render menu item */ getProfileItemLabels: GetProfileItemLabelsFn; /** Returns either an image source url, or a full React component to render as the image. */ getProfileItemImg: GetProfileItemImgFn; /** Returns the alt text for the image */ getProfileItemImgText: GetProfileItemImgTextFn; overrides?: { ListItemProfile?: Override; ProfileImgContainer?: Override; ProfileImg?: Override; ProfileLabelsContainer?: Override; ProfileTitle?: Override; ProfileSubtitle?: Override; ProfileBody?: Override; ChildMenuPopover?: Override; }; /** Utility to reset menu to default state. Useful for rendering child menus. */ resetMenu?: () => void; /** Renders UI in 'highlighted' state. */ $isHighlighted?: boolean; /** Renders all menu content for SEO purposes regardless of menu state */ renderAll?: boolean; }; export declare type NestedMenuRef = { current: HTMLElement | null; }; export declare type NestedMenuContextProps = { addMenuToNesting: (ref: NestedMenuRef) => void; removeMenuFromNesting: (ref: NestedMenuRef) => void; getParentMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null; getChildMenu: (ref: NestedMenuRef) => NestedMenuRef | undefined | null; nestedMenuHoverIndex: number; isNestedMenuVisible: (ref: NestedMenuRef) => boolean; mountRef: NestedMenuRef; };