import PropTypes from 'prop-types' ; import React , { useContext , useCallback } from 'react' ; import DropdownContext , { DropdownContextValue } from './DropdownContext' ; export interface UseDropdownToggleProps { ref : DropdownContextValue [ 'setToggle' ] ; onClick : React . MouseEventHandler ; 'aria-haspopup' : boolean ; 'aria-expanded' : boolean ; } export interface UseDropdownToggleMetadata { show : DropdownContextValue [ 'show' ] ; toggle : DropdownContextValue [ 'toggle' ] ; } const noop = ( ) => { } ; memberOf export function useDropdownToggle ( ) { const { show = false , toggle = noop , setToggle } = useContext ( DropdownContext ) || { } ; const handleClick = useCallback ( ( e ) => { toggle ( ! show , e ) ; } , [ show , toggle ] ) ; return [ { ref : setToggle || noop , onClick : handleClick , 'aria-haspopup' : true , 'aria-expanded' : ! ! show , } , { show , toggle } , ] ; } const propTypes = { type { Function children : PropTypes . func . isRequired , } ; export interface DropdownToggleProps { children : ( props : UseDropdownToggleProps , meta : UseDropdownToggleMetadata ) => React . ReactNode ; } displayName memberOf function DropdownToggle ( { children } ) { const [ props , meta ] = useDropdownToggle ( ) ; return < > { children ( props , meta ) } < />; } DropdownToggle . displayName = 'ReactOverlaysDropdownToggle' ; DropdownToggle . propTypes = propTypes ; component export default DropdownToggle ;