import cx from 'classnames' ; import PropTypes from 'prop-types' ; import React , { Children , HTMLProps , ReactNode , Ref , useEffect , useRef , } from 'react' ; import { BaseMenuItem } from './MenuItem' ; import { preventInputBlur } from '../utils' ; import { checkPropType , isRequiredForA11y } from '../propTypes' ; const MenuDivider = ( ) => < div className = "dropdown-divider" role = "separator" / > ; const MenuHeader = ( props ) => ( < div { ... props } className = "dropdown-header" role = "heading" / > ) ; const propTypes = { 'aria-label' : PropTypes . string , /**
     * Message to display in the menu if there are no valid results.
     */ emptyLabel : PropTypes . node , /**
     * Needed for accessibility.
     */ id : checkPropType ( PropTypes . oneOfType ( [ PropTypes . number , PropTypes . string ] ) , isRequiredForA11y ) , /**
     * Maximum height of the dropdown menu.
     */ maxHeight : PropTypes . string , } ; const defaultProps = { 'aria-label' : 'menu-options' , } ; export interface MenuProps extends HTMLProps < HTMLDivElement > { emptyLabel ? : ReactNode ; innerRef : Ref < HTMLDivElement > ; inputHeight : number ; scheduleUpdate : ( ( ) => void ) | null ; maxHeight ? : string ; text : string ; } /**
 * Menu component that handles empty state when passed a set of results.
 */ const Menu = ( { children , className , emptyLabel = 'No matches found.' , innerRef , inputHeight , maxHeight = '300px' , scheduleUpdate , style , text , ... props } ) => { const isInitialMount = useRef ( true ) ; useEffect ( ( ) => { if ( isInitialMount . current ) { isInitialMount . current = false ; return ; } scheduleUpdate && scheduleUpdate ( ) ; } , [ inputHeight , scheduleUpdate ] ) ; const contents = Children . count ( children ) === 0 ? ( < BaseMenuItem disabled role = "option" > { emptyLabel } < /BaseMenuItem>) : (children); return ( < div { ... props } className = { cx ( 'rbt-menu' , 'dropdown-menu' , 'show' , className ) } key = { text } onMouseDown = { preventInputBlur } ref = { innerRef } role = "listbox" style = { { ... style , display : 'block' , maxHeight , overflow : 'auto' , } } > { contents } < /div> ) ; } ; Menu . propTypes = propTypes ; Menu . defaultProps = defaultProps ; Menu . Divider = MenuDivider ; Menu . Header = MenuHeader ; export default Menu ;