import * as React from 'react' ; import { PopoverContainerRenderProps } from '../Popover/PopoverContainer' ; export type MenuProviderProps = { children : React . ReactNode ; } ; export type MenuContextState = PopoverContainerRenderProps & { isVisible : boolean ; startAt ? : 'first' | 'last' ; handleMenuOpenViaKeyboard : ( opts ? : { startAt ? : 'first' | 'last' ; } ) => void ; setPopoverProps : ( popover : PopoverContainerRenderProps ) => void ; } ; const initialState = { startAt : undefined , handleMenuOpenViaKeyboard : ( ) => { } , setPopoverProps : ( ) => { } , hide : ( ) => { } , show : ( ) => { } , toggle : ( ) => { } , isVisible : false } ; const Context = React . createContext ( initialState ) ; export class MenuProvider extends React . Component < MenuProviderProps > { handleMenuOpenViaKeyboard = ( { startAt = 'first' } = { } ) => { this . setState ( { startAt } , this . state . show ) ; } ; setPopoverProps = ( popover ) => { this . setState ( { ... popover } ) ; } ; state = { ... initialState , setPopoverProps : this . setPopoverProps , handleMenuOpenViaKeyboard : this . handleMenuOpenViaKeyboard } ; render = ( ) => { const { children } = this . props ; return < Context . Provider value = { this . state } > { children } < /Context.Provider>; } ; } export default { ... Context , Provider : MenuProvider } ; export const withMenuContext = ( C ) => ( props ) => ( < Context . Consumer > { context => < C context = { context } { ... props } />}</Context . Consumer > ) ;